29,99 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Sencha touch is a versatile HTML5-based framework for developing mobile web apps that look and feel native on touch screen devices, and with it you can write your code once and deploy it to both iOS and Android saving you both time and money. The Sencha touch cookbook has a comprehensive selection of recipes covering everything from installation right through to HTML5 geo location. The Sencha Touch Cookbook really is your one stop resource for cross platform HTML5 application development. It covers the basics such as setting up an iOS and Android development environment right through to much more complex development issues such as touch gestures, animation, rich media and geo location. Every recipe is practically focused. Maximum action. Minimum theory.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 326
Veröffentlichungsjahr: 2011
Ähnliche
Table of Contents
Sencha Touch Cookbook
Sencha Touch Cookbook
Copyright © 2011 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 author, 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: December 2011
Production Reference: 1081211
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84951-544-3
www.packtpub.com
Cover Image by Rakesh Shejwal ( <[email protected] >)
Credits
Author
Ajit Kumar
Reviewers
Kristian Kristensen
Matthew Makai
Acquisition Editor
Usha Iyer
Development Editor
Meeta Rajani
Technical Editor
Azharuddin Sheikh
Project Coordinator
Kushal Bhardwaj
Proofreaders
Bernadette Watkins
Neha Shetty
Indexer
Hemangini Bari
Graphics
Conidon Miranda
Production Coordinator
Alwin Roy
Cover Work
Alwin Roy
About the Author
Ajit Kumar started his IT career with Honeywell, Bangalore, in embedded systems and moved on to Enterprise Business Applications (such as ERP) in his 11 years of journey. From day one, he has been a staunch supporter and promoter of open source and strongly believes that open source is the way for a liberal, diversified, and democratic setup, like India.
He dreams and continuously endeavors that the architecture, frameworks, and tools must facilitate the software development—at the speed of thought.
Ajit holds B.E. in Computer Science and Engineering from Bihar Institute of Technology and has co-founded Walking Tree, which is based out of Hyderabad, India. This is the place where he plays a role of CTO and works to fulfill his vision.
I would like to thank my wife, Priti, my sons, Pratyush and Piyush, who were very patient and supportive; my business partners, Alok and Pradeep, who, relentlessly, talk about the book; friends who always encouraged me; the reviewers and all the people behind the Sencha Touch project and other open source projects.
About the Reviewers
Kristian Kristensen is an independent software development consultant. Through his company, Whiz IT, he takes on the role of a teacher, coach, facilitator, and anything in between to help software shops improve their processes and skills. He is particularly interested in languages and the way they shape our thoughts and problem-solving abilities.
Kristian worked as a consultant for Microsoft before embarking on the journey of freelance consulting. He holds a Master's degree in software engineering from Aalborg University and currently lives in Brooklyn, NY with his wife.
Matthew Makai is a software development consultant with Excella Consulting in Arlington, Virginia. He works on application development with Python and Java using the Django, JQuery Mobile, Sencha Touch, and PhoneGap frameworks. He is interested in enhancing personal and business decisions with mobile applications and data visualization. Matthew earned his Computer Science B.S. at James Madison University, his Computer Science M.S. at Virginia Tech, and his Management of Information Technology M.S. at the University of Virginia.
Matthew writes about consulting and solutions to technical problems on his blog at http://mmakai.com/.
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.
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?
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.
Preface
Sencha Touch is a HTML5-compliant framework for development of touch-based applications. An application written using this framework can be run—without any change—on iOS, Android, and Blackberry-based touch devices. The framework comes along with numerous built-in UI components similar to the ones that we see on different mobile platforms, nicely designed with efficient data package to work with varied client-side or server-side data sources. In addition to this, the framework also offers APIs to work with DOM and it brings in the extensibility to every aspect of it, which is a bingo combination that every enterprise looks for and expects from a framework.
What this book covers
Chapter 1, Gear up for the Journey. This chapter is all about setting up the right development environment for iOS, Android, and Blackberry. It covers the detailed step to set up the environment using which we can build and test our application, either on a browser or on an emulator or a real device. The latter half of the chapter covers the Sencha Touch APIs that can be used to detect what device our application is running, what platform the application is running, what features are offered by a platform, how to handle orientation change, and build profiles for different platforms or devices and let our application configure itself using those profiles.
Chapter 2, Catering to your Form Related Needs. This chapter covers every aspect of a form, including the different form fields offered by Sencha Touch, configuring each one of them for the user in a form, and configuring ways by which a typical form validation can be done. Fields such as Search, E-mail, DatePicker, Select, Slider, Checkbox, TextArea, FieldSet, and so on are covered in this chapter along with their detailed usage.
Chapter 3, Containers and Layouts. Containers contain one or more child items, and layouts help us position our content properly on the screen, and this chapter is all about them. It covers what are the different types of containers and layouts available with the framework and their behavior, which is a key point in developing an application where we would have nested containers, each one of them having their own layout to position their children on the screen.
Chapter 4, Building Custom Views. If the components offered by Sencha Touch is not sufficient to achieve the layout and look-n-feel that we are looking for, then custom views is the way to go. In this chapter, we cover Template, XTemplate, and DataView classes of Sencha Touch to see how to build custom views and how to handle events on it to build interactive custom views.
Chapter 5, Dealing with Data and Data Sources. This chapter is all about working with different data sources, storing data on the client side and using it in the most effective way. It shows how to work with the local data source, as well as remote data source. The chapter also covers how to associate data with different components, including form, and validating, filtering, grouping, and sorting data.
Chapter 6, Adding the Components. This chapter covers various other components of Sencha Touch such as Button, ActionSheet, List, IndexBar, NestedList, Picker, Toolbar, and so on. It demonstrates how to configure each of these components.
Chapter 7, Adding Audio/Visual Appeal. This chapter covers how to work with media—audio and video—and different graphs and charts to present our data, graphically. As charts don't come with Sencha Touch, this chapter explains the steps to configure the charts framework with Sencha Touch and then use it to build interactive charts.
Chapter 8, Taking your Application Offline. In this chapter, we will see how to detect the offline mode on a device or a platform and how to model our application to make it work even in the offline mode.
Chapter 9, Engaging Users by Responding to Events. In browsers, we have mouse events whereas a touch device raises events specific to touch actions such as tab, Double tap, drag, swipe, and so on. In this chapter, we will look at the list of touch events the framework offers and the ways to handle them to respond to those events.
Chapter 10, Increased Relevance Using Geolocation. This chapter shows how to fetch the GeoLocation information on a device/platform and work with it. We will cover various aspects such as how to find out the direction and speed at which the device is moving, and how to integrate the Geolocation information with Google map to show interesting and relevant information to the user.
What you need for this book
In order to follow this book, you would need the Sencha Touch framework and good knowledge of JavaScript and some knowledge of HTML and CSS. The following list shows the software needed:
If you want to try out the recipes on your touch device, you may have to have one.
Who this book is for
This book is for someone who wants to learn about a framework which can be used to develop HTML5-compliant mobile applications, and can work on various different platforms—Android, iOS, and BlackBerry. This cookbook provides numerous recipes for the developers to understand Sencha Touch functionalities, in general, and use them to address practical needs in particular.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "Copy phonegap.1.0.0.js from your PhoneGap downloaded earlier to assets/www."
A block of code is set as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: " Launch Eclipse, click on the File menu, and select New | Android Project".
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code for this book
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. Gear up for the Journey
In this chapter, we will cover:
Introduction
Like any other development, the first and foremost thing which is required, before we embark on our journey, is setting up the right environment so that the development, deployment, and testing becomes easy and effective. Moreover, this calls for a list of tools which are appropriate in this context. In this chapter, we will cover the topics related to setting up the environment using the right set of tools. Sencha Touch works on Android, iOS, and Blackberry platforms. For each of these platforms, we will see what steps we need to follow to set up the complete development and deployment environment. We will be packaging our Sencha Touch-based application using PhoneGap. PhoneGap is another JavaScript framework which provides the following two important capabilities:
Throughout the book, we will be using the following software:
Before we get any further, you should download and install the following, which will act as a common base for all our discussions:
After downloading the Sencha Touch library, extract it to a folder, say c:\sencha-touch. When you extract the folder, you would see the folders as shown in the following screenshot:
There are many files, however, which are not required for development and testing.
Note
The docs folder contains the documentation for the library and is very handy when it comes to referring to the properties, configs, methods, and events supported by different classes. You may want to copy it to a different folder, so that you can refer to the documentation whenever needed.
Delete the files and folders which are enclosed within the rectangles as shown in the following screenshot:
This prepares us to get started. As Sencha Touch is a JavaScript library, you may want to configure your Eclipse installation for JavaScript development. You may install the Spket plug-in and configure it for Sencha Touch development. Steps to do so are detailed on the Spket website (http://spket.com/) and hence have been excluded from this book.
Setting up the Android-based development environment
This recipe describes the detailed steps we shall follow to set up the environment for the Android-based development. The steps do not include setting up the production environment, which are detailed in a different recipe.
Getting ready
Before you begin, check that JDK is installed and the following environment variables are set correctly:
How to do it...
Carry out the following steps:
Tip
Downloading the example code for this book
You can download the example code files for all Packt books you have purchased from your account at www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
With the preceding steps, you will be able to develop and test your application.
How it works...
In steps 1 through 3, we downloaded and installed Android SDK, its Eclipse plugin, and PhoneGap, which are required for the development of the Android-based application. The SDK contains the Android platform-specific files, an Android emulator, and various other tools required for the packaging, deployment, and running of Android-based applications. The ADT plugin for Eclipse allows us to create Android-based applications, build, test, and deploy them using Eclipse.
In step 4, we created an Android 2.2 project by using the ADT plugin.
In steps 5 through 12, we created the required folders and kept the files in those folders, and updated some of the files to make this Android project a PhoneGap-based Android project. In step 5, we created two folders: libs and assets\www. The libs folder is where the PhoneGap and other third party libraries (JAR files) need to be kept. In our case, we only had to put in the PhoneGap JAR file (step 7). This JAR contains the PhoneGap implementation, which takes care of packaging the application for the target device (in this case, Android). The www folder is where the complete application code needs to be kept. PhoneGap will use this folder to create the deployment package.
In step 6, we copied the PhoneGap's JavaScript file which contains the implementation of the PhoneGap APIs. You will do this if you intend to use the PhoneGap APIs in your application (for example, to get the contacts list in your application).
Note
For this book, this is an optional step. However, interested readers may find details about the API at the following URL: http://docs.phonegap.com/en/1.0.0/index.html.
In steps 8 and 9, we added the PhoneGap JAR file to our project's Build Path, so that it becomes available for the application development (and takes care of the compilation errors).
Then, in steps 10 through 13, we made changes to the manifest file to add the required application privileges, for example, access to the phone book, access to the phone status, and so on, when it is run on the Android 2.2 platform. You may learn more about the content of the manifest file and each of the elements that we added to it by referring to http://developer.android.com/guide/topics/manifest/manifest-intro.html.
In step 14, we moved the Sencha Touch library files to the www folder, so that they are included in the package. This is required to run Touch-based applications.
In step 15, we created the ch01_01.js JavaScript file, which contains the entry point for our Sencha Touch application. We have used the Ext.setup API. The important property is onReady, which is a function that Ext.setup registers to invoke as soon as the document is ready.
In step 16, we modified the index.html to include the Sencha Touch library related JavaScript: sencha-touch-debug.js and CSS file: sencha-touch.css, and our application specific JavaScript file: ch01_01.js. The sencha-touch-debug.js file is very useful during development as it contains the nicely formatted code which can be used to analyze the application errors during development. You also need to include the PhoneGap JS file, if you intend to use its APIs in your application. The order of inclusion of the JavaScript and CSS files is PhoneGap | Sencha Touch | Application specific files.
In step 17, we created an Android Virtual Device (an emulator), and deployed and tested the application on it.
Finally, in step 18 we deployed the application on a real Android 2.2 compatible device.
Setting up the iOS-based development environment
This recipe outlines the steps to set up the environment for the iOS-based (for example, iPhone, iPad, iPod) development.
Getting ready
JDK is installed and the following environment variables are set correctly:
You should have created the ch01_01.js file as mentioned in the previous recipe.
How to do it...
Carry out the following steps:
