Creating Mobile Apps with Appcelerator Titanium电子书

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