Discover millions of ebooks, audiobooks, and so much more with a free trial

Only $11.99/month after trial. Cancel anytime.

Sencha Touch Cookbook
Sencha Touch Cookbook
Sencha Touch Cookbook
Ebook977 pages3 hours

Sencha Touch Cookbook

Rating: 0 out of 5 stars

()

Read preview

About this ebook

The book is written in a cookbook style, presenting examples in the style of recipes, allowing you to go directly to your topic of interest, or follow topics throughout a chapter to gain in-depth knowledge. This book is ideal for anyone who wants to gain the practical knowledge involved in using Sencha Touch mobile web application framework to make attractive web apps for mobiles. If you have some familiarity with HTML and CSS, then this book is for you. This book will give designers the skills they need to implement their ideas, and provide developers with creative inspiration through practical examples. It is assumed that you know how to use touch screens, touch events, WebKit on mobile systems, Apple iOS, and Google Android for Mobiles.
LanguageEnglish
Release dateDec 20, 2011
ISBN9781849515450
Sencha Touch Cookbook

Read more from Ajit Kumar

Related to Sencha Touch Cookbook

Related ebooks

Information Technology For You

View More

Related articles

Reviews for Sencha Touch Cookbook

Rating: 0 out of 5 stars
0 ratings

0 ratings0 reviews

What did you think?

Tap to rate

Review must be at least 10 words

    Book preview

    Sencha Touch Cookbook - Ajit Kumar

    Table of Contents

    Sencha Touch Cookbook

    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

    What this book covers

    What you need for this book

    Who this book is for

    Conventions

    Reader feedback

    Customer support

    Downloading the example code for this book

    Errata

    Piracy

    Questions

    1. Gear up for the Journey

    Introduction

    Setting up the Android-based development environment

    Getting ready

    How to do it...

    How it works...

    Setting up the iOS-based development environment

    Getting ready

    How to do it...

    How it works...

    See also

    Setting up the Blackberry-based development environment

    Getting ready

    How to do it...

    How it works...

    See also

    Setting up the browser-based development environment

    Getting ready

    How to do it...

    How it works...

    See also

    Setting up the production environment

    Getting ready

    How to do it...

    How it works...

    See also

    Detecting the device

    How to do it...

    How it works...

    See also

    Finding information about features that are supported in the current environment

    How to do it...

    How it works...

    See also

    Initializing your application

    How to do it...

    How it works...

    See also

    Tweaking your application to configure itself using profiles

    How to do it...

    How it works...

    There's more...

    Do not apply the profile at the time of application launch

    Do not apply the profile on the components, by default

    Ignoring the profile change

    Deferred application of profile

    See also

    Responding to the orientation change

    How to do it...

    How it works...

    There's more...

    Stopping the orientation change

    See also

    2. Catering to your Form Related Needs

    Introduction

    Getting your form ready with FormPanel

    Getting ready

    How to do it...

    How it works...

    There's more...

    Standard submit

    Do not submit on field action

    Post-submission handling

    See also

    Working with search

    Getting ready

    How to do it...

    How it works...

    There's more...

    Using a placeholder

    See also

    Putting custom validation in the e-mail field

    Getting ready

    How to do it...

    How it works...

    See also

    Working with dates using DatePicker

    Getting ready

    How to do it...

    How it works...

    There's more...

    Setting the default date to the current date

    Setting the default date to a particular date

    Changing the slot order

    Setting the picker date range

    See also

    Making a field hidden

    Getting ready

    How to do it...

    How it works...

    There's more...

    Showing/Hiding a field at runtime

    See also

    Working with the select field

    Getting ready

    How to do it...

    How it works...

    There's more...

    Using the custom display value

    See also

    Changing the value using Slider

    Getting ready

    How to do it...

    How it works...

    See also

    Spinning the number wheel using Spinner

    Getting ready

    How to do it...

    How it works...

    There's more...

    Recycling the values

    See also

    Toggling between your two choices

    Getting ready

    How to do it...

    How it works...

    See also

    Checkbox and Checkbox group

    Getting ready

    How to do it...

    How it works...

    See also

    Text and TextArea

    Getting ready

    How to do it...

    How it works...

    There's more...

    Limiting the number of input characters

    See also

    Grouping fields with FieldSet

    Getting ready

    How to do it...

    How it works...

    There's more...

    Adding instructions

    See also

    Validating your form

    Getting ready

    How to do it...

    How it works...

    See also

    3. Containers and Layouts

    Introduction

    Keeping the container lightweight

    Getting ready

    How to do it...

    How it works...

    There's more...

    Using layout

    See also

    Working with Panel

    Getting ready

    How to do it...

    How it works...

    There's more...

    Docking items

    Using layouts

    See also

    Adding items to a container at runtime

    Getting ready

    How to do it...

    How it works...

    There's more...

    Inserting at a specific position

    Removing an item

    Hiding/Showing

    See also

    Building wizards using CardLayout

    Getting ready

    How to do it...

    How it works...

    There's more...

    Changing the default active item

    See also

    Panel docking using DockLayout

    Getting ready

    How to do it...

    How it works...

    See also

    Fitting into the container using FitLayout

    Getting ready

    How to do it...

    How it works...

    See also

    Arranging your items horizontally using HBoxLayout

    Getting ready

    How to do it...

    How it works...

    There's more...

    Component vertical alignment

    Lay out items in reverse order

    See also

    Arranging your items vertically using VBoxLayout

    Getting ready

    How to do it...

    How it works...

    See also

    Mixing layouts

    Getting ready

    How to do it...

    How it works...

    See also

    4. Building Custom Views

    Introduction

    Basic HTML templating using Template

    Getting ready

    How to do it...

    How it works...

    There's more...

    Compiling the template

    Formatting values

    See also

    Using XTemplate for advanced templating

    Getting ready

    How to do it...

    How it works...

    There's more...

    Compiling the template

    Formatting values

    See also

    Conditional view rendering using XTemplate

    Getting ready

    How to do it...

    How it works...

    See also

    Designing a custom view using DataView

    Getting ready

    How to do it...

    How it works...

    There's more...

    Orientation change

    See also

    Showing the filtered data

    Getting ready

    How to do it...

    How it works...

    See also

    Responding to the user action

    Getting ready

    How to do it...

    How it works...

    See also

    5. Dealing with Data and Data Sources

    Introduction

    Creating models

    Getting ready

    How to do it...

    How it works...

    There's more...

    Adding methods to a model

    Extending a model

    See also

    Loading the form using a data model

    Getting ready

    How to do it...

    How it works...

    There's more...

    Saving form data using the associated model

    See also

    Working with Store

    Getting ready

    How to do it...

    How it works...

    There's more...

    Adding records to a store at runtime

    See also

    Converting incoming JSON data into models using JsonReader

    Getting ready

    How to do it...

    How it works...

    There's more...

    Fetching a record from a nested data

    Working with response metadata

    See also

    Converting incoming XML data into models using XmlReader

    Getting ready

    How to do it...

    How it works...

    See also

    Validations in models

    Getting ready

    How to do it...

    How it works...

    There's more...

    Inclusion

    Exclusion

    Format

    Changing the default message

    See also

    Defining the custom validation

    Getting ready

    How to do it...

    How it works...

    See also

    Relating models using association

    Getting ready

    How to do it...

    How it works...

    There's more...

    Many-to-one association

    See also

    Persisting session-specific data using SessionStorageProxy

    Getting ready

    How to do it...

    How it works...

    There's more...

    Working through the store

    See also

    Persisting data using LocalStorageProxy

    Getting ready

    How to do it...

    How it works...

    See also

    Accessing in-memory data using MemoryProxy

    Getting ready

    How to do it...

    How it works...

    See also

    Loading data through AJAX using AjaxProxy

    Getting ready

    How to do it...

    How it works...

    See also

    Sorting of the data

    Getting ready

    How to do it...

    How it works...

    There's more...

    Sending the sorting information to the server

    Customizing the sort information being sent to the server

    See also

    Data grouping

    Getting ready

    How to do it...

    How it works...

    See also

    Filtering data

    Getting ready

    How to do it...

    How it works...

    See also

    Using a cross-domain URL in your application

    Getting ready

    How to do it...

    How it works...

    See also

    6. Adding the Components

    Introduction

    Working with Button

    Getting ready

    How to do it...

    How it works...

    There's more...

    Using badge

    Using icon

    See also

    Creating a sheet of buttons with ActionSheet

    Getting ready

    How to do it...

    How it works...

    There's more...

    Change the position and animation

    See also

    Carousel

    Getting ready

    How to do it...

    How it works...

    There's more...

    Changing the direction

    See also

    Managing a list of data using List

    Getting ready

    How to do it...

    How it works...

    There's more...

    Sorting entries

    See also

    Grouping items in a List

    Getting ready

    How to do it...

    How it works...

    See also

    Navigating through a list of data using indexBar

    Getting ready

    How to do it...

    How it works...

    See also

    Working with a list of nested data using NestedList

    Getting ready

    How to do it...

    How it works...

    There's more...

    Using a property other than text

    Showing the Back button

    No toolbar, please!

    See also

    Picking your choice using Picker

    Getting ready

    How to do it...

    How it works...

    There's more...

    Changing the position and animation

    Aligning the slot text

    See also

    Switching between multiple views using SegmentedButton

    Getting ready

    How to do it...

    How it works...

    There's more...

    Multiple pressed buttons

    See also

    Working with Tab panels

    Getting ready

    How to do it...

    How it works...

    There's more...

    Positioning the tab bar at the bottom

    Card switch animation

    See also

    Quicker access to application features using Toolbar

    Getting ready

    How to do it...

    How it works...

    There's more...

    Adding non-button components

    See also

    Creating a new component

    Getting ready

    How to do it...

    How it works...

    See also

    Extending an existing component capability

    Getting ready

    How to do it...

    How it works...

    See also

    Overriding a component behavior

    Getting ready

    How to do it...

    How it works...

    See also

    Adding behavior to an existing component using plugins

    Getting ready

    How to do it...

    How it works...

    See also

    7. Adding Audio/Visual Appeal

    Introduction

    Animate me!

    Getting ready

    How to do it...

    How it works...

    There's more...

    Working with different animation durations

    Direction of animation

    Reversing the animation

    Postponing animation

    See also

    Ding-dong! You have a message!

    Getting ready

    How to do it...

    How it works...

    See also

    Working with videos

    Getting ready

    How to do it...

    How it works...

    See also

    Adding the chart support to your app

    Getting ready

    How to do it...

    How it works...

    See also

    Working with an area chart

    Getting ready

    How to do it...

    How it works...

    There's more...

    Showing legend

    Changing the legend text

    See also

    Generating a bar chart

    Getting ready

    How to do it...

    How it works...

    There's more...

    Changing the spacing between the bars

    See also

    Creating a column chart

    Getting ready

    How to do it...

    How it works...

    See also

    Showing a group of bars and columns

    Getting ready

    How to do it…

    See also

    Switching between stacked and grouped orientation

    Getting ready

    How to do it...

    How it works...

    There's more...

    Changing gesture

    Resetting the chart state

    See also

    Highlighting and displaying an item detail

    Getting ready

    How to do it...

    How it works...

    See also

    Creating a gauge chart

    Getting ready

    How to do it...

    How it works...

    There's more...

    Showing a needle

    The donut effect

    See also

    Creating a line chart

    Getting ready

    How to do it...

    How it works...

    There's more...

    Filling the area

    Smooth curves

    See also

    Creating a pie chart

    Getting ready

    How to do it...

    How it works...

    There's more...

    The donut effect

    Pie length derived from the data

    See also

    Rotating the pies

    Getting ready

    How to do it...

    How it works...

    See also

    Grouping the pies

    Getting ready

    How to do it...

    How it works...

    See also

    Highlighting a pie

    Getting ready

    How it works...

    See also

    Using a radar chart

    Getting ready

    How to do it...

    How it works...

    There's more...

    Using a different marker

    See also

    Using a scatter chart

    Getting ready

    How to do it...

    How it works...

    See also

    8. Taking your Application Offline

    Introduction

    Detecting offline mode

    Getting ready

    How to do it...

    How it works...

    There's more...

    Using aggressive timeout

    See also

    Storing your data offline

    Getting ready

    How to do it...

    How it works...

    See also

    Storing your images offline

    Getting ready

    How to do it...

    How it works...

    See also

    Application caching

    Getting ready

    How to do it...

    How it works...

    See also

    9. Engaging Users by Responding to Events

    Introduction

    Handling Touch Events

    Getting ready

    How to do it...

    Handling Scroll Events

    Getting ready

    How to do it...

    Handling Tap Events

    Getting ready

    How to do it...

    Handling Double Tap Events

    Getting ready

    How to do it...

    Handling TapHold Events

    Getting ready

    How to do it...

    Handling Swipe Events

    Getting ready

    How to do it...

    Handling Pinch Events

    Getting ready

    How to do it...

    Handling Drag Events

    Getting ready

    How to do it...

    10. Increased Relevance Using Geolocation

    Introduction

    Finding out your location

    Getting ready

    How to do it...

    How it works...

    See also

    Auto-update of your location

    Getting ready

    How to do it...

    How it works...

    See also

    Tracking direction and speed

    Getting ready

    How to do it...

    How it works...

    See also

    Hooking up Google Maps with your application

    Getting ready

    How to do it...

    How it works...

    See also

    Working with Google Maps options

    Getting ready

    How to do it...

    How it works...

    See also

    Mapping Geolocation on Google Maps

    Getting ready

    How to do it...

    How it works...

    See also

    Index

    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 ( <shejwal.rakesh@gmail.com >)

    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 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?

    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.

    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:

    Sun JDK Version 1.5 or above

    Eclipse 3.3 or above

    PhoneGap 1.0.0

    Sencha Touch 1.1.0 library

    Sencha Touch Charts 1.0 library

    Android SDK

    ADT Plugin

    XCode 4

    Blackberry SDK

    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:

    Ext.setup({

      onReady: function() {

        if (Ext.is.Android)

          Ext.Msg.alert(INFO, Welcome Android user!);

         

        if (Ext.is.Blackberry)

          Ext.Msg.alert(INFO, Welcome Blackberry user!);

         

        if (Ext.is.iPad)

          Ext.Msg.alert(INFO, Welcome iPad user!);

      }

    });

    When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

    layout: {

              type: 'hbox',

             

    direction: 'reverse'

     

    }

    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: "

    Enjoying the preview?
    Page 1 of 1