You are previewing Sencha Touch Cookbook.
O'Reilly logo
Sencha Touch Cookbook

Book Description

Over 100 recipes for creating HTML5-based cross-platform apps for touch devices

  • Master cross platform application development

  • Incorporate geo location into your apps

  • Develop native looking web apps

  • In Detail

    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.

    Table of Contents

    1. Sencha Touch Cookbook
      1. Table of Contents
      2. Sencha Touch Cookbook
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code for this book
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Gear up for the Journey
        1. Introduction
        2. Setting up the Android-based development environment
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Setting up the iOS-based development environment
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Setting up the Blackberry-based development environment
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Setting up the browser-based development environment
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Setting up the production environment
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Detecting the device
          1. How to do it...
          2. How it works...
          3. See also
        8. Finding information about features that are supported in the current environment
          1. How to do it...
          2. How it works...
          3. See also
        9. Initializing your application
          1. How to do it...
          2. How it works...
          3. See also
        10. Tweaking your application to configure itself using profiles
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Do not apply the profile at the time of application launch
            2. Do not apply the profile on the components, by default
            3. Ignoring the profile change
            4. Deferred application of profile
          4. See also
        11. Responding to the orientation change
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Stopping the orientation change
          4. See also
      9. 2. Catering to your Form Related Needs
        1. Introduction
        2. Getting your form ready with FormPanel
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Standard submit
            2. Do not submit on field action
            3. Post-submission handling
          5. See also
        3. Working with search
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using a placeholder
          5. See also
        4. Putting custom validation in the e-mail field
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Working with dates using DatePicker
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Setting the default date to the current date
            2. Setting the default date to a particular date
            3. Changing the slot order
            4. Setting the picker date range
          5. See also
        6. Making a field hidden
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Showing/Hiding a field at runtime
          5. See also
        7. Working with the select field
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using the custom display value
          5. See also
        8. Changing the value using Slider
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        9. Spinning the number wheel using Spinner
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Recycling the values
          5. See also
        10. Toggling between your two choices
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        11. Checkbox and Checkbox group
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        12. Text and TextArea
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Limiting the number of input characters
          5. See also
        13. Grouping fields with FieldSet
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding instructions
          5. See also
        14. Validating your form
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      10. 3. Containers and Layouts
        1. Introduction
        2. Keeping the container lightweight
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using layout
          5. See also
        3. Working with Panel
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Docking items
            2. Using layouts
          5. See also
        4. Adding items to a container at runtime
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Inserting at a specific position
            2. Removing an item
            3. Hiding/Showing
          5. See also
        5. Building wizards using CardLayout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing the default active item
          5. See also
        6. Panel docking using DockLayout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Fitting into the container using FitLayout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. Arranging your items horizontally using HBoxLayout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Component vertical alignment
            2. Lay out items in reverse order
          5. See also
        9. Arranging your items vertically using VBoxLayout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        10. Mixing layouts
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      11. 4. Building Custom Views
        1. Introduction
        2. Basic HTML templating using Template
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Compiling the template
            2. Formatting values
          5. See also
        3. Using XTemplate for advanced templating
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Compiling the template
            2. Formatting values
          5. See also
        4. Conditional view rendering using XTemplate
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Designing a custom view using DataView
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Orientation change
          5. See also
        6. Showing the filtered data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Responding to the user action
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      12. 5. Dealing with Data and Data Sources
        1. Introduction
        2. Creating models
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding methods to a model
            2. Extending a model
          5. See also
        3. Loading the form using a data model
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Saving form data using the associated model
          5. See also
        4. Working with Store
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding records to a store at runtime
          5. See also
        5. Converting incoming JSON data into models using JsonReader
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Fetching a record from a nested data
            2. Working with response metadata
          5. See also
        6. Converting incoming XML data into models using XmlReader
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Validations in models
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Inclusion
            2. Exclusion
            3. Format
            4. Changing the default message
          5. See also
        8. Defining the custom validation
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        9. Relating models using association
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Many-to-one association
          5. See also
        10. Persisting session-specific data using SessionStorageProxy
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Working through the store
          5. See also
        11. Persisting data using LocalStorageProxy
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        12. Accessing in-memory data using MemoryProxy
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        13. Loading data through AJAX using AjaxProxy
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        14. Sorting of the data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Sending the sorting information to the server
            2. Customizing the sort information being sent to the server
          5. See also
        15. Data grouping
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        16. Filtering data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        17. Using a cross-domain URL in your application
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      13. 6. Adding the Components
        1. Introduction
        2. Working with Button
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using badge
            2. Using icon
          5. See also
        3. Creating a sheet of buttons with ActionSheet
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Change the position and animation
          5. See also
        4. Carousel
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing the direction
          5. See also
        5. Managing a list of data using List
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Sorting entries
          5. See also
        6. Grouping items in a List
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Navigating through a list of data using indexBar
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. Working with a list of nested data using NestedList
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using a property other than text
            2. Showing the Back button
            3. No toolbar, please!
          5. See also
        9. Picking your choice using Picker
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing the position and animation
            2. Aligning the slot text
          5. See also
        10. Switching between multiple views using SegmentedButton
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Multiple pressed buttons
          5. See also
        11. Working with Tab panels
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Positioning the tab bar at the bottom
            2. Card switch animation
          5. See also
        12. Quicker access to application features using Toolbar
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding non-button components
          5. See also
        13. Creating a new component
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        14. Extending an existing component capability
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        15. Overriding a component behavior
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        16. Adding behavior to an existing component using plugins
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      14. 7. Adding Audio/Visual Appeal
        1. Introduction
        2. Animate me!
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Working with different animation durations
            2. Direction of animation
            3. Reversing the animation
            4. Postponing animation
          5. See also
        3. Ding-dong! You have a message!
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Working with videos
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Adding the chart support to your app
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Working with an area chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Showing legend
            2. Changing the legend text
          5. See also
        7. Generating a bar chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing the spacing between the bars
          5. See also
        8. Creating a column chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        9. Showing a group of bars and columns
          1. Getting ready
          2. How to do it…
          3. See also
        10. Switching between stacked and grouped orientation
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing gesture
            2. Resetting the chart state
          5. See also
        11. Highlighting and displaying an item detail
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        12. Creating a gauge chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Showing a needle
            2. The donut effect
          5. See also
        13. Creating a line chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Filling the area
            2. Smooth curves
          5. See also
        14. Creating a pie chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. The donut effect
            2. Pie length derived from the data
          5. See also
        15. Rotating the pies
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        16. Grouping the pies
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        17. Highlighting a pie
          1. Getting ready
          2. How it works...
          3. See also
        18. Using a radar chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using a different marker
          5. See also
        19. Using a scatter chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      15. 8. Taking your Application Offline
        1. Introduction
        2. Detecting offline mode
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using aggressive timeout
          5. See also
        3. Storing your data offline
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Storing your images offline
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Application caching
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      16. 9. Engaging Users by Responding to Events
        1. Introduction
        2. Handling Touch Events
          1. Getting ready
          2. How to do it...
        3. Handling Scroll Events
          1. Getting ready
          2. How to do it...
        4. Handling Tap Events
          1. Getting ready
          2. How to do it...
        5. Handling Double Tap Events
          1. Getting ready
          2. How to do it...
        6. Handling TapHold Events
          1. Getting ready
          2. How to do it...
        7. Handling Swipe Events
          1. Getting ready
          2. How to do it...
        8. Handling Pinch Events
          1. Getting ready
          2. How to do it...
        9. Handling Drag Events
          1. Getting ready
          2. How to do it...
      17. 10. Increased Relevance Using Geolocation
        1. Introduction
        2. Finding out your location
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Auto-update of your location
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Tracking direction and speed
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Hooking up Google Maps with your application
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Working with Google Maps options
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Mapping Geolocation on Google Maps
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      18. Index