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 (roy007avishek88@gmail.com) 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 nally 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 rst 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 rst betas. Last year, he and John wrote their rst 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 les, eBooks, discount offers and more You might want to visit www.PacktPub.com for support les and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub les 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 service@packtpub.com 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 Cong 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 lters 19 Pay attention to the man behind the curtain 20 Architect versus coding by hand 25 Creating the views 25 Conguring 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 [...]... Integrating with Google Maps and Foursquare Starting the mainView.js controller Creating the confirmLocation view Creating the Friends Chooser view Creating the restaurant list, store, and details Creating the restaurant store and model Creating the details view Finishing the main view controller Homework Summary 185 20 1 20 2 20 2 20 2 20 5 20 7 21 0 21 4 21 6 21 6 21 7 22 1 22 3 22 5 22 7 22 8 23 2 23 2 [ iv ] www.it-ebooks.info... board Creating the square model Exploring itemTpl Creating the game controller Understanding basic controller functions [v] www.it-ebooks.info 26 3 26 5 26 7 26 8 27 2 27 3 27 6 28 0 28 4 28 5 28 7 28 7 28 8 28 9 29 2 29 2 29 5 29 9 3 02 Table of Contents The game board logic Starting a turn Checking the turn 303 303 304 Decorating the move Clearing the move Going beyond the finished game Summary 314 318 318 320 Checking... Profile basics Using profiles Creating the Evolver application About WordPress Using the plugin Setting up the profiles and app.js Setting up the models and stores Creating the views Creating the phone details view Creating the tablet details view 23 3 23 4 23 4 23 6 23 8 23 9 24 1 24 1 24 4 24 8 24 9 25 0 The main views 25 1 Creating the phone main view Creating the tablet main view 25 1 25 3 Creating the controllers... is legal 306 Index 321 [ vi ] www.it-ebooks.info Preface Welcome to Creating Mobile Apps with Sencha Touch 2 The goal of this book is to help you learn the Sencha Touch mobile development platform by guiding you through a series of complete applications Each application will focus on a different aspect of the language and show off many of the capabilities of Sencha Touch The Sencha Touch language is... form Creating the data entry form Creating the AddTag view Creating the config form Creating the DataEntry controller Defining the models and stores Meanwhile, back in the controllers Config.js Getting started with Sencha Touch Charts 95 95 97 97 101 103 105 109 1 12 114 118 121 Creating the overview chart 121 Creating the details view 130 Adding the axes Creating the series The interactions section 123 ... 123 124 127 Creating the goalChart view Creating the word chart 130 134 Homework Summary Chapter 5: On Deck: Using Sencha. io The basic application Creating the models and stores Creating the views Getting started with Sencha. io The sign-up process Downloading and installing the Sencha. io SDK Registering your application and Auth group Updating the application for Sencha. io Updating the stores Creating. .. game This can be used as a basis for creating your own turn-based games What you need for this book The tools required are as follows: • Sencha Touch 2. 1 (Commercial or GPL) • Sencha Cmd 3 • Sencha Architect 2. 1 (used in Chapter 1, A Simple Task List and Chapter 2, A Feed Reader) • Touch Charts (used in Chapter 4, Weight Weight This is included in Sencha Touch 2. 1 GPL or available as a separate commercial... between Ext JS and Sencha Touch Both ExtJ S and Sencha Touch are products created by the company Sencha Inc Where Sencha Touch is used to develop mobile applications for various devices, Ext JS is used to create web applications for desktop browsers such as Firefox, Chrome, or Internet Explorer For this book, we'll stick with Sencha Touch Once you have chosen your new project type, the Sencha Architect... Generated with Sencha Architect > Chapter1 ... but for now let's take a look at how Sencha Architect is set up When you first launch Sencha Architect, you are presented with a dialog box where you can choose to work on a new Ext JS project or a new Sencha Touch project, or you can choose from a list of existing projects: Since we are concerned with Sencha Touch in this book, you should select a new Sencha Touch 2. 1 project [8] www.it-ebooks.info . view 22 1 Creating the restaurant list, store, and details 22 3 Creating the restaurant store and model 22 5 Creating the details view 22 7 Finishing the main view controller 22 8 Homework 23 2 Summary. 199 Summary 20 0 Chapter 7: The Decider: External APIs 20 1 Using an external API 20 2 The API key 20 2 API functions 20 2 External APIs and Sencha Touch 20 5 The basic application 20 7 Creating the. game 318 Summary 320 Index 321 www.it-ebooks.info Preface Welcome to Creating Mobile Apps with Sencha Touch 2. The goal of this book is to help you learn the Sencha Touch mobile development