creating mobile apps with sencha touch 2

www.it-ebooks.info

Creating Mobile Apps with

Sencha Touch 2

Learn to use the Sencha Touch programming

language and expand your skills by building

10 unique applications

John Earl Clark

Bryan P. Johnson

BIRMINGHAM - MUMBAI

www.it-ebooks.info

Creating Mobile Apps with Sencha Touch 2

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval

system, or transmitted in any form or by any means, without the prior written

permission of the publisher, except in the case of brief quotations embedded in

critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy

of the information presented. However, the information contained in this book is

sold without warranty, either express or implied. Neither the authors, nor Packt

Publishing, and its dealers and distributors will be held liable for any damages

caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the

companies and products mentioned in this book by the appropriate use of capitals.

However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2013

Production Reference: 1280313

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84951-890-1

www.packtpub.com

Cover Image by Avishek Roy ([email protected])

www.it-ebooks.info

Credits

Authors

John Earl Clark

Bryan P. Johnson

Reviewer

Kristian Kristensen

Acquisition Editor

Usha Iyer

Lead Technical Editor

Sweny Sukumaran

Technical Editors

Jalasha D'costa

Saumya Kunder

Project Coordinator

Amey Sawant

Proofreaders

Maria Gould

Kate Robinson

Indexer

Tejal Soni

Graphics

Ronak Dhruv

Production Coordinators

Manu Joseph

Nilesh Mohite

Nitesh Thakur

Cover Work

Nitesh Thakur

www.it-ebooks.info

About the Authors

John Earl Clark holds a Master's degree in Human Computer Interaction

from Georgia Tech and an undergraduate degree in Music Engineering from

Georgia State University. John and his co-author, Bryan P. Johnson, worked

together at MindSpring and later EarthLink, starting out in technical support

and documentation, before moving into application development, and finally

management of a small development team. After leaving EarthLink in 2002,

John began working independently as a consultant and programmer, before

starting Twelve Foot Guru, LLC with Bryan in 2005.

John has been working with Sencha Touch since the first early beta releases.

He has also worked with Sencha's ExtJS since the early days when it was still

known as YUI-Ext. John has also written a previous book with Bryan Johnson

called Sencha Touch Mobile JavaScript Framework by Packt Publishing.

When he is not buried in code, John spends his time woodworking, playing the

guitar, and brewing his own beer.

I would like to thank my family for all of their love and support.

I would also like to thank Bryan for his help, his patience, and his

continued faith in our efforts.

www.it-ebooks.info

Bryan P. Johnson is a graduate of the University of Georgia. Bryan went on to work

for MindSpring Enterprises in late 1995, where he met his co-author John Clark.

At MindSpring, and later EarthLink, for over seven years, Bryan served in multiple

positions, including Director of System Administration and Director of Internal

Application Development. After leaving EarthLink, Bryan took some time off to

travel before joining John in starting Twelve Foot Guru.

Bryan has worked with Sencha's products since the early days of YUI-EXT, and

has used Sencha Touch since its first betas. Last year, he and John wrote their first

Sencha Touch book, Sencha Touch Mobile JavaScript Framework by Packt Publishing.

I would like to thank my friends and family for their support and my

co-author John for his patience during the creation of this book.

www.it-ebooks.info

About the Reviewer

Kristian Kristensen is an independent software development consultant.

Through his company Kristensen Inc., he takes on the role of teacher, coach,

facilitator, and anything in between to help software shops improve their

processes and skills. He is particularly interested in languages and how they

shape our thoughts and problem solving abilities.

He worked as a consultant for Microsoft before embarking on the journey

of freelance consulting. He holds a Master's in Software Engineering from

Aalborg University and currently lives in Brooklyn, NY with his wife.

For Heather…

www.it-ebooks.info

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related

to your book.

Did you know that Packt offers eBook versions of every book published, with PDF

and ePub files available? You can upgrade to the eBook version at www.PacktPub.

com and as a print book customer, you are entitled to a discount on the eBook copy.

Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles,

sign up for a range of free newsletters and receive exclusive discounts and offers

on Packt books and eBooks.

TM

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online

digital book library. Here, you can access, read and search across Packt's entire

library of books.

Why Subscribe?

• Fully searchable across every book published by Packt

• Copy and paste, print and bookmark content

• On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access

PacktLib today and view nine entirely free books. Simply use your login credentials

for immediate access.

www.it-ebooks.info

www.it-ebooks.info

Table of Contents

Preface 1

Chapter 1: A Simple Task List 7

A brief overview of Sencha Architect 7

The Toolbox 10

The help section 11

The design area 12

The Project Inspector area 13

The Config area 14

Getting started with the task list 14

Creating the data store 15

Adding a Model, Fields, and Field Types 16

Adding the model to the store 17

Making copies 18

Adding filters 19

Pay attention to the man behind the curtain 20

Architect versus coding by hand 25

Creating the views 25

Configuring the Tab Panel 27

Adding the lists and details 28

Setting up the templates 30

Testing with starter data 31

Adding the back button 34

Creating the forms 35

Add Task form 35

Editing and completing a task 39

Testing the application 40

Extra credit 41

Summary 41

www.it-ebooks.info

Table of Contents

[ ii ]

Chapter 2: A Feed Reader 43

The basic application 44

An overview of NavigationView 44

Adding the form 46

Back to the navigation view 49

Adding the controller 50

Getting the data from a remote source 52

Enter the JSONP proxy 53

Yahoo Query Language (YQL) 54

The YQL console 55

Meanwhile, back at the controller 58

The details dataview 60

And now, the CSS 64

Homework 67

Summary 68

Chapter 3: Going Command Line 69

The basic application 70

Installing Sencha Cmd 70

Advantages of Sencha Cmd 72

Generating the application skeleton 72

Creating the TimeCop layout 76

Creating the theme 79

Creating the increment button 81

Creating the start button 82

Using native APIs with Ext.device 84

Testing and running native applications 85

Registering as a developer 85

Becoming an Apple developer 85

Provisioning an application 86

Meanwhile back in the code 87

Using the native notifications 87

Compiling the application 88

Setting up packager.json 89

Building native Android applications 91

Creating the Android signing certificate 91

Creating the Android configuration file 92

Compiling and launching the Android application 93

Summary 94

www.it-ebooks.info

Table of Contents

[ iii ]

Chapter 4: Weight Weight 95

Sencha Charts overview 95

The basic application 97

Setting up the application and building the form 97

Creating the data entry form 101

Creating the AddTag view 103

Creating the config form 105

Creating the DataEntry controller 109

Defining the models and stores 112

Meanwhile, back in the controllers 114

Config.js 118

Getting started with Sencha Touch Charts 121

Creating the overview chart 121

Adding the axes 123

Creating the series 124

The interactions section 127

Creating the details view 130

Creating the goalChart view 130

Creating the word chart 134

Homework 140

Summary 141

Chapter 5: On Deck: Using Sencha.io 143

The basic application 144

Creating the models and stores 144

Creating the views 147

Getting started with Sencha.io 153

The sign-up process 154

Downloading and installing the Sencha.io SDK 154

Registering your application and Auth group 155

Updating the application for Sencha.io 160

Updating the stores 160

Creating the controller 161

Overriding the Carousel component 166

Back in the controller 169

Deploying the application 172

Homework 173

Summary 174

www.it-ebooks.info

Table of Contents

[ iv ]

Chapter 6: Catalog Application and API 175

What is an API? 175

Using a remote API in Sencha Touch 177

Creating your own API 180

Receiving data 181

Communicating with the database 182

Sending data back to the application 182

More information on APIs 182

Building the basic application 182

Creating the item model 183

RewriteRule and .htaccess 185

The item store 186

Creating the category model and store 187

Testing the store and the model 188

Creating the XTemplates 192

The API and the database 193

The GET request 194

The POST request 197

The PUT request 198

The DELETE request 199

The rest of the API 199

Summary 200

Chapter 7: The Decider: External APIs 201

Using an external API 202

The API key 202

API functions 202

External APIs and Sencha Touch 205

The basic application 207

Creating the categories list 210

Creating the contact controller 214

Integrating with Google Maps and Foursquare 216

Starting the mainView.js controller 216

Creating the confirmLocation view 217

Creating the Friends Chooser view 221

Creating the restaurant list, store, and details 223

Creating the restaurant store and model 225

Creating the details view 227

Finishing the main view controller 228

Homework 232

Summary 232

www.it-ebooks.info

Table of Contents

[ v ]

Chapter 8: Evolver: Using Profiles 233

An overview of profiles 234

Profile basics 234

Using profiles 236

Creating the Evolver application 238

About WordPress 239

Using the plugin 241

Setting up the profiles and app.js 241

Setting up the models and stores 244

Creating the views 248

Creating the phone details view 249

Creating the tablet details view 250

The main views 251

Creating the phone main view 251

Creating the tablet main view 253

Creating the controllers 255

Conditional styling 259

Media queries 260

Summary 261

Chapter 9: Workbook: Using the Camera 263

Designing the basic application 263

Creating the models and stores 265

The views 267

Creating the book views 268

Adding the book list to the main view 272

Starting the book controller 273

Creating the note views 276

Creating the controller 280

Getting started with images 284

Capturing an image 285

Storing the image 287

Displaying the image 287

Sending images 288

Summary 289

Chapter 10: Game On 291

Building the basic board 292

Creating the square model 292

Exploring itemTpl 295

Creating the game controller 299

Understanding basic controller functions 302

www.it-ebooks.info

Table of Contents

[ vi ]

The game board logic 303

Starting a turn 303

Checking the turn 304

Checking if a move is legal 306

Decorating the move 314

Clearing the move 318

Going beyond the finished game 318

Summary 320

Index 321

www.it-ebooks.info