Hands-On Sencha Touch 2

Hands-On Sencha Touch 2

by Lee Boonstra
Released July 2014
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449366483

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Get hands-on experience building speedy mobile web apps with Sencha Touch 2.3, the user interface JavaScript framework built specifically for the mobile Web. With this book, you’ll learn how to build a complete touch application, called Find a Cab, that has the look and feel of a native app on Android, iOS, Windows, and BlackBerry devices.

In the process, you’ll work with Sencha’s model-view-controller (MVC) components for form handling, styling, integration with outside data, and other elements. The Sencha Touch learning curve can be steep, but if you’re familiar with JavaScript, HTML5, CSS3, and JSON, this guide will get you up to speed through real-world examples.

  • Learn the fundamentals, including the class and layout systems
  • Use the Sencha MVC architecture to structure your code
  • Implement data models and stores, and create an event controller
  • Make remote connections by implementing server proxies
  • Save data offline by implementing client proxies
  • Work with view components such as maps, lists, and floating panels
  • Implement and handle forms, and construct a custom theme
  • Create production and native build packages

Table of contents

  1. Dedication
  2. Preface
    1. Why Sencha Touch?
    2. Sencha Touch Versus jQuery Mobile
    3. Sencha Touch Versus Appcelerator Titanium
    4. Sencha Touch Versus Kendo UI Mobile
    5. About Sencha Inc.
    6. Audience and Approach
    7. Sencha Touch Releases
    8. The FindACab App
    9. Using Code Examples
    10. How This Book Is Organized
      1. Part I
        1. Chapter 1, Introduction to Sencha Touch
        2. Chapter 2, Installation
        3. Chapter 3, The Fundamentals
        4. Chapter 4, The Class System
        5. Chapter 5, The Layout System
      2. Part II
        1. Chapter 6, Structured Code
        2. Chapter 7, Data Models
        3. Chapter 8, Remote Connections (Server Proxies)
        4. Chapter 9, Data Stores
        5. Chapter 10, Offline Storage (Client Proxies)
        6. Chapter 11, View Components
        7. Chapter 12, Forms
        8. Chapter 13, Themes and Styles
        9. Chapter 14, Builds
        10. Appendix A
        11. Appendix B
    11. Conventions Used in This Book
    12. Safari® Books Online
    13. How to Contact Us
    14. Acknowledgments
  3. I. Sencha Touch Essentials
    1. 1. Introduction to Sencha Touch
      1. Licenses
      2. Bundles
      3. Touch Charts
      4. Sencha Cmd
      5. Sencha Network
        1. Sencha Try
        2. Sencha Market
        3. Sencha Devs
        4. Sencha.io Src
      6. Where to Find Help
        1. Learning Center
        2. Sencha Forums
        3. Sencha Trainings
        4. Buy Support
      7. API Documentation
        1. Kitchen Sink
      8. Required Software
      9. Supported Browsers
      10. Summary
    2. 2. Installation
      1. Install the Required Software
        1. IDE or Editor
        2. Modern Browser
        3. Ruby
        4. Java
        5. Sencha Cmd
          1. Sencha Cmd not installed?
          2. Wrong version of Sencha Cmd?
          3. Manually adding Sencha Cmd to your system variables
        6. Web Server
          1. Use the built-in web server
          2. Use a different web server
        7. Sencha Touch
      2. Install the Optional Software
        1. Sass and Compass
        2. Install NodeJS
        3. Install PhoneGap and Cordova
        4. Development SDK
      3. Summary
    3. 3. The Fundamentals
      1. Instantiating a Basic Component
      2. Implementing Templates
        1. Changing the Data at Runtime
        2. Organizing Template Snippets
        3. Implementing Advanced Templates
      3. Making References to Components
      4. Traversing Components
      5. Making References to DOM Nodes
        1. Ext.get()
        2. Ext.select()
        3. Ext.getDom()
      6. Handling Events
        1. Firing Events
        2. Removing Events
        3. Firing Custom Events
      7. Summary
    4. 4. The Class System
      1. Defining Your Own Custom Class
      2. Defining Getters and Setters
      3. Defining Singletons and Static Members
      4. Inherit from a Single Class
      5. Inherit from Multiple Classes
      6. Summary
    5. 5. The Layout System
      1. Implementing a Horizontal Layout
      2. Implementing a Vertical Layout
      3. Implementing a Full-Screen (Fit) Layout
      4. Implementing a Card Layout
      5. Implementing the Default Layout
      6. Docking Components
      7. Summary
  4. II. Building the FindACab App
    1. 6. Structured Code
      1. Design Patterns
        1. The MVC Pattern
        2. Sencha MVC
        3. What Is Sencha Cmd?
      2. Generating an Application with Sencha Cmd
      3. Generating Workspaces
      4. Generating a Model with Sencha Cmd
      5. Implementing a Data Store
      6. Implementing a View
      7. Generating a Controller with Sencha Cmd
      8. Referencing a Component from a Controller
      9. Listening to Events from a Controller
      10. Implementing the MVC Entry Point
      11. Loading External Classes
      12. Summary
    2. 7. Data Models
      1. Validating a Model
      2. Saving a Model to the Server
      3. Cross-Domain Restrictions
      4. Implementing a Model Association
      5. Remote Associations
      6. Summary
    3. 8. Remote Connections (Server Proxies)
      1. Saving or Retrieving Data from the Same Domain with AJAX
        1. Implementing AJAX Proxies
        2. Implementing an AJAX Request
      2. Retrieving Data from an External Domain with JSONP
        1. Implementing JSONP Proxies
        2. Implementing the JSONP Proxy for the FindACab App
        3. Implementing a JSONP Request
      3. Saving or Retrieving Data from an External Domain with AJAX
        1. Implementing CORS
      4. Summary
    4. 9. Data Stores
      1. Loading Data in a Store
      2. Sorting a Data Store Locally
      3. Sorting Data on a Server
      4. Grouping a Data Store
      5. Filtering a Data Store Locally
        1. Custom Filter Functions
        2. Stacking Filters
      6. Filtering Data on a Server
      7. Syncing Data in a Store
      8. Summary
    5. 10. Offline Storage (Client Proxies)
      1. Saving Data into Local Storage
      2. Saving Data into Session Storage
      3. Saving Data into a Web SQL Database
      4. Saving Data into a Web SQL Database for the FindACab App
      5. Saving Assets Locally by Using the Application Cache
      6. Summary
    6. 11. View Components
      1. Implementing a Messagebox
      2. Implementing Toolbars and Title Bars
      3. Implementing Buttons
      4. Implementing Lists
      5. Implementing a List for the FindACab App
      6. Implementing a Google Map
      7. Implementing Overlays
      8. Implementing Charts
      9. Summary
    7. 12. Forms
      1. Implementing a Form
        1. Implementing the FindACab App Form
        2. Implementing a Fieldset
      2. Validating a Form
      3. Validating a Form in the FindACab App
      4. Submitting a Form
      5. Implementing Form Handling
      6. Summary
    8. 13. Themes and Styles
      1. Sencha Touch Stylesheets
      2. Using Sass
      3. Using Platform-Specific, Out-of-the-Box Themes
      4. Creating Your Own Custom Theme
      5. The FindACab App Stylesheet
      6. Incorporating Custom Fonts
      7. Base64 Fonts
      8. Incorporating Custom Icons
      9. Optimizing Your Stylesheet for Best Performance
        1. Minifying Your Stylesheet
        2. Importing Only the Required Mixins in Your Stylesheet
        3. Excluding Experimental Support for Uncommon Browsers
        4. Excluding Default Fonts and Icons
      10. Summary
    9. 14. Builds
      1. Going Native
        1. Build Resources
        2. Adding Non-MVC Folders to Your Build Package
        3. Adding Extra Resources to Your Build Package
      2. Creating a Test Build with Sencha Cmd
      3. Creating a Production Build with Sencha Cmd
      4. Creating a Native Build with Sencha Cmd and Adobe PhoneGap
        1. Sencha Mobile Packager
        2. Apache Cordova
        3. Adobe PhoneGap
        4. Initialize a PhoneGap Project
        5. The PhoneGap Folder Structure
        6. The phonegap.local.properties File
        7. The config.xml Settings
        8. Building the Native Build Package
        9. Testing a Native Build
      5. Summary
    10. A. Help with iOS Certificates and Provisioning
      1. Certificates
        1. Identifiers
        2. Devices
        3. Provisioning Profile
      2. iOS Provisioning and PhoneGap
    11. B. Custom Stylesheet for the FindACab App
  5. Index
  6. Colophon
  7. Copyright

Product information

  • Title: Hands-On Sencha Touch 2
  • Author(s): Lee Boonstra
  • Release date: July 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449366483