Book Image

Sencha Touch Cookbook

By : Ajit Kumar
Book Image

Sencha Touch Cookbook

By: Ajit Kumar

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Sencha Touch Cookbook
Ajit Kumar
Dec, 2011 | 350 pages
No titles found
Table of Contents (17 chapters)
Sencha Touch Cookbook
Sencha Touch Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Gear up for the Journey
Gear up for the Journey
Introduction
Setting up the Android-based development environment
Setting up the iOS-based development environment
Setting up the Blackberry-based development environment
Setting up the browser-based development environment
Setting up the production environment
Detecting the device
Finding information about features that are supported in the current environment
Initializing your application
Tweaking your application to configure itself using profiles
Responding to the orientation change
2
Catering to your Form Related Needs
Catering to your Form Related Needs
Introduction
Getting your form ready with FormPanel
Working with search
Putting custom validation in the e-mail field
Working with dates using DatePicker
Making a field hidden
Working with the select field
Changing the value using Slider
Spinning the number wheel using Spinner
Toggling between your two choices
Checkbox and Checkbox group
Text and TextArea
Grouping fields with FieldSet
Validating your form
3
Containers and Layouts
Containers and Layouts
Introduction
Keeping the container lightweight
Working with Panel
Adding items to a container at runtime
Building wizards using CardLayout
Panel docking using DockLayout
Fitting into the container using FitLayout
Arranging your items horizontally using HBoxLayout
Arranging your items vertically using VBoxLayout
Mixing layouts
4
Building Custom Views
Building Custom Views
Introduction
Basic HTML templating using Template
Using XTemplate for advanced templating
Conditional view rendering using XTemplate
Designing a custom view using DataView
Showing the filtered data
Responding to the user action
5
Dealing with Data and Data Sources
Dealing with Data and Data Sources
Introduction
Creating models
Loading the form using a data model
Working with Store
Converting incoming JSON data into models using JsonReader
Converting incoming XML data into models using XmlReader
Validations in models
Defining the custom validation
Relating models using association
Persisting session-specific data using SessionStorageProxy
Persisting data using LocalStorageProxy
Accessing in-memory data using MemoryProxy
Loading data through AJAX using AjaxProxy
Sorting of the data
Data grouping
Filtering data
Using a cross-domain URL in your application
6
Adding the Components
Adding the Components
Introduction
Working with Button
Creating a sheet of buttons with ActionSheet
Carousel
Managing a list of data using List
Grouping items in a List
Navigating through a list of data using indexBar
Working with a list of nested data using NestedList
Picking your choice using Picker
Switching between multiple views using SegmentedButton
Working with Tab panels
Quicker access to application features using Toolbar
Creating a new component
Extending an existing component capability
Overriding a component behavior
Adding behavior to an existing component using plugins
7
Adding Audio/Visual Appeal
Adding Audio/Visual Appeal
Introduction
Animate me!
Ding-dong! You have a message!
Working with videos
Adding the chart support to your app
Working with an area chart
Generating a bar chart
Creating a column chart
Showing a group of bars and columns
Switching between stacked and grouped orientation
Highlighting and displaying an item detail
Creating a gauge chart
Creating a line chart
Creating a pie chart
Rotating the pies
Grouping the pies
Highlighting a pie
Using a radar chart
Using a scatter chart
8
Taking your Application Offline
Taking your Application Offline
Introduction
Detecting offline mode
Storing your data offline
Storing your images offline
Application caching
9
Engaging Users by Responding to Events
Engaging Users by Responding to Events
Introduction
Handling Touch Events
Handling Scroll Events
Handling Tap Events
Handling Double Tap Events
Handling TapHold Events
Handling Swipe Events
Handling Pinch Events
Handling Drag Events
10
Increased Relevance Using Geolocation
Increased Relevance Using Geolocation
Introduction
Finding out your location
Auto-update of your location
Tracking direction and speed
Hooking up Google Maps with your application
Working with Google Maps options
Mapping Geolocation on Google Maps
Index
Index

Detecting the device

Different devices offer different capabilities and hence for an application developer, it becomes important to identify the exact device, so that it can respond to the events in the most appropriate way. This recipe describes how we can detect the device on which the application is being run.

How to do it...

Carry out the following steps:

  1. Create and open a new file ch01_02.js in the ch01 folder and paste the following code into it: 

    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!");
  }
});

  2. Remove the following line from index.html:

    <script type="text/javascript" charset="utf-8" src="ch01/ch01_01.js"></script>

  3. Include the following line in index.html:

    <script type="text/javascript" charset="utf-8" src="ch01/ch01_02.js"></script>

  4. Deploy and run the application. Based on the device on which the application is being run, you will see a corresponding message.

How it works...

The Ext.is class is instrumental in detecting the target device on which your application is being run. It uses the JavaScript's navigator object to detect the browser details, including the platform/device. For example, if the platform property in the navigator object has iPhone in it, then the target platform is iPhone, whereas if the userAgent property in the navigator object has Android, then the platform is Android.

See also

  • The recipe named Setting up the browser-based development environment in this chapter

  • The recipe named Setting up the production environment in this chapter

Previous Section
End of Section 8
Next Section