Creating Mobile Apps with Appcelerator Titanium by Brousseau, Christian -- Read -- Imperial Library of Trantor

Index

Creating Mobile Apps with Appcelerator Titanium

Table of Contents Creating Mobile Apps with Appcelerator Titanium Credits About the Author About the Reviewers www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe? Free Access for Packt account holders

Preface

Titanium core

Titanium Mobile SDK Titanium studio Appcelerator analytics Appcelerator Cloud Services

What if this is not enough for my needs? What are the goals of this book? What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support

Downloading the example code Downloading the color images of this book Errata Piracy Questions

1. Stopwatch (with Lap Counter)

Creating our project

What have we here?

The UI structure

Why do we use views?

Now on to the code

It all starts with a window Displaying the current time with big numbers

We can now do our first run

Starting and stopping the stopwatch

We see the buttons, but they don't do much yet! Stopwatch is not defined, but it's okay

Keeping up with lap times

Capturing lap times Showing lap times in a scrollable list

Resetting the timer

Summary

2. Sili, the assistant that just listens

Creating our project The user interface structure Coding the application

Let's do some scaffolding

Let's see how this looks

Recording with a click on a single button

What good is a buffer if we're not using it?

Listing stored recordings

Be sure to call it!

Listening to a recording Deleting old recordings

Summary

3. The To-do List

Creating our project The user interface structure Let's get this show on the road

The database

Defining the structure Implementing our model

The user interface

The header view The tasklist The button bar Let's have a look

Developing a better switch for iOS

Adding a new task Listing all the existing tasks

Before executing the code

Marking a task as completed Filtering out completed tasks

Activating the filter

Deleting the completed tasks Close the door, you're letting the heat out

Summary

4. Interactive E-book for iPad

The user interface structure Before writing any code

A native module Where do I get it?

Creating our project

Adding the module to our project

Now we can code

The user interface

Importing the PageFlip module Adding some colorful views Making sure the pages actually turn Orientation

Why not just LANDSCAPE?

The rich HTML page The map view The video player Final assembly

Summary

5. You've Got to Know When to Hold 'em

Creating our project The application structure The main application window

Moving on to the code

Coding the user interface Sparing our fingers Preparing for our first run

The portfolio management window

Coding what we have designed

The form at the top The stock list

Navigating between the two windows

Let's see if it works

Moving stocks around

Saving our portfolio Keeping up on our objective Portfolio management

Saving Retrieving Updating a particular stock How much is our portfolio worth?

Wiring the preference service to the UI

Adding a new stock to the list Creating a custom look for our table rows

One more thing before we can test

Saving all that What if there are stocks already?

Retrieving the stock values from the Internet

Knowing where to get it

Let's see what we get from it

Retrieving one stock

Creating an HTTPClient object Opening the HTTPClient object Sending the request itself

Retrieving all stocks in a single call Calling the web service

Handling when stocks are updated Making the whole thing more fluid

Updating stocks when the portfolio has changed Updating stocks as the application starts

Summary

6. JRPG – Second to Last Fantasy

Creating our project The game's basic design We need an engine!

Where can we get it? Installing our module

The map (before we code a single line)

The right tool for the right job Creating the map Tilesets

Using the tileset

Using layers

Why layers?

Speaking the same language

Let's turn this map into a game

The scaffolding Loading an external asset Loading the game Let's fire it up! Hum! Somehow it looked like a better map editor

Let's see our map now

We need a hero

Hold that code, will you?

How does a SpriteSheet actually work?

Bringing our hero into the scene

Let's keep it modular Putting our hero on the map Hey! Don't stay in the corner

Venture around the map

No directional pad, but that's okay

Creating our V-Pad Is someone touching the V-Pad?

Giving some visual feedback to the user Aren't we forgetting something?

Moving our hero around

Seeing the future Living the future

Is it a game yet?

Our hero moves, but he's still pretty stiff

Make sure he walks in the right direction Make sure he stops in the right direction

Putting the finishing touch

The user is touching the V-Pad, but where exactly? Be sure nothing overlaps Cleaning up after ourselves

Summary

7. JRPG – Second to Last Fantasy Online

Creating our project

Recycling saves our time

Before we get our hands dirty

Some things to be considered

WebSockets

Setting up things

The server side

Enter Node.js

Installation

Creating our server project socket.io

Installing a JavaScript module on our server sounds complicated

Making sure everything is in place

The client side

The Web Socket module

Downloading the module Installing the module This will work, but at the same time, it won't

Coding our game server

Creating a web server in less than 10 lines of code

Taking our server for a spin

Keeping tabs on our players Creating our socket.io connection Game interactions

A player joins the game A player quits the game JavaScript arrays don't have a contains function?

Player interactions

A player moved around the map A player used the chat feature

Sparing network traffic Make sure everything runs smoothly

Let's bring this game online!

Connecting to the server Every player is different

Designing the hero selection window Gathering new assets To the code! Changing the hero's appearance

The hero has no clothes

Making this work

Before we go any further

Making our hero speak

Back to the drawing board

How to reach the window

Wiring it up Displaying what the hero is saying

Interacting with the game server

When our hero moves

This looks familiar

Someone joined Someone quit Someone moved Someone spoke Where is everybody? Be sure to hang up that connection

Game on! Summary

8. Social Networks

Creating our project One window to rule them all Code while it is hot!

The top section

Staying within the limits Setting up our Post button

The bottom section What if the user rotates the device? See it in action Polishing it up a little

Facebook Integration

Creating our application Retrieving our Facebook app ID There is a module for that

Instantiating our module

Linking our mobile app to our Facebook app

Allowing our user to log in and log out at the click of a button Handling responses from Facebook

Authorizing our application

Posting our message on Facebook

Twitter integration

Creating our application

Retrieving our consumer key and secret

No module, but a good,old fashioned JavaScript library

Instantiating the library

Linking with our Twitter application

Toggling the state of the Twitter connection Authorizing our application

Posting our message on Twitter

Settings

Before we touch anything Settings for iOS

Now to see if this works

Settings for Android

Where are those settings?

Android menus Let's give it a run!

The settings are changed, then what? It goes both ways

Summary

9. Marvels of the World around Us

Creating our project The main window

Let's dig in the right way

The header

The ListView component

The template Creating our ListView object

Wrapping it up Calling our main window Testing our work so far

Getting the device's location

How does that translate into code? How can we test this?

Using the iOS simulator Using the Android emulator Validating our test

Photos from the Web to our application

There is a web service for that...

Getting our API key Remembering that key Defining the call Making the call Handling the response

Having a second look at our main window

The photo viewer window

On with the code

Returning to our main window

Connecting the wires

Selecting a photo The Refresh button Testing out the navigation

Photo gallery integration

Android photo gallery integration iOS photo gallery integration One final run

Summary

10. Worldwide Marco Polo

We know the drill Let's see what we got here Our tabbed user interface

Getting this show on the road

The chicken and the egg Using those windows

Running our application for the first time

Appcelerator Cloud services

Creating a user Our development sandbox Connecting to the cloud

Don't forget to call it

Just to make sure

The Polo window

The user interface

One more thing

Determining the player's location

A better Geolocation service

Pushing our location to the Cloud

This is our very first time We already played this game before

Testing our Polo feature

The Marco window

Creating a dedicated map module We have CommonJS modules, let's use them Getting player locations from the cloud

Let's play! What about Android?

It's good that maps are their own thing Testing this new map module

Summary

A. References

The source code for this book The Page Flip Module The cURL utility The Stock quote API The tiled map editor Sprite sheets and tilesets The QuickTiGame2d game engine Node.js

NPM Socket.IO

The TiWS module The Facebook Graph API The social_plus library The Flickr API Appcelerator Cloud Services The MaxMind GeoIP service Google Maps v2

Index

← Prev
Back
Next →

← Prev
Back
Next →