O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Sencha Touch 2 Up and Running

Sencha Touch 2 Up and Running

by Adrian Kosmaczewski
Publisher: O'Reilly Media, Inc.
Release Date: February 2013
ISBN: 9781449339371
View table of contents
Start reading

Book Description

Launch into Sencha Touch 2 with this hands-on book, and quickly learn how to develop robust mobile web apps that look and behave like native applications. Using numerous code samples, author Adrian Kosmaczewski guides you every step of the way through this touchscreen-enabled JavaScript framework—from creating your first basic app to debugging, testing, and deploying a finished product.

Learn how to craft user interfaces, build forms, and manage data, then deploy as either an HTML5 offline app or as a native app for Android, iOS, or Blackberry.

  • Define classes and create instances with Sencha Touch’s object-oriented abstraction
  • Build user interfaces with the framework’s extensive set of high-level components
  • Develop apps that consume complex data, whether it’s stored locally or on remote servers
  • Organize your application code in a consistent, predictable, and maintainable way
  • Use Sass stylesheets to craft a personalized look and feel for your app
  • Debug, test, and document your app with WebKit Web Inspector, Jasmine, Siesta, and JSDuck
  • Use the Sencha Architect UI designer and IDE to simplify complex project development

Table of Contents

  1. Dedication
  2. Preface
    1. Intended Audience
    2. Structure of this Book
    3. Code of the Book
    4. Conventions Used in This Book
    5. Using Code Examples
    6. Safari® Books Online
    7. How to Contact Us
    8. Acknowledgments
  3. 1. Getting Started
    1. What Is Sencha Touch?
      1. What Kind of Applications Can You Build with It?
      2. A Bit of History
      3. Main Features
      4. Device and Browser Support
      5. Licensing
    2. Installing the Developer Environment
    3. Sencha Touch Distribution
      1. Installing Sencha Cmd
    4. Creating a New Application
      1. Bare-Bones App
      2. The Ext.application() Function
      3. Using Sencha Cmd
      4. Overview of the Class Library
      5. Embedding Components
      6. Layouts
      7. Intro to Events
    5. Sencha Touch Documentation System
    6. Conclusion
  4. 2. The Class System
    1. Architectural Considerations
      1. Folder Organization
    2. Understanding the Class System
      1. Using xtypes
      2. Overview of the Class Library
    3. Foundation Utilities
      1. Ext
        1. emptyFn
        2. version
        3. application()
        4. bind()
        5. clone()
        6. create(), define(), and widget()
        7. decode() and encode()
        8. defer()
        9. destroy()
        10. each()
        11. getBody(), getDoc(), and getHead()
        12. getClass() and getClassName()
        13. getCmp() and getStore()
        14. id()
        15. isArray(), isBoolean(), isDate(), isDefined(), isElement(), and others
        16. iterate()
        17. namespace()
        18. typeOf()
      2. Ext.Array
        1. clean()
        2. contains()
        3. difference()
        4. erase()
        5. every() and some()
        6. filter()
        7. flatten()
        8. from()
        9. include()
        10. indexOf()
        11. insert()
        12. intersect()
        13. map() and pluck()
        14. max(), mean(), min(), and sum()
        15. merge() and union()
        16. remove()
        17. replace() and splice()
        18. slice()
        19. sort()
        20. toArray()
        21. unique()
      3. Ext.ComponentQuery
        1. Component Query Syntax
      4. Ext.DateExtras
        1. add()
        2. between()
        3. clearTime()
        4. format()
        5. getDayOfYear(), getWeekOfYear(), isLeapYear()
        6. getDaysInMonth(), getFirstDateOfMonth(), getFirstDayOfMonth(), getLastDateOfMonth(), getLastDayOfMonth()
        7. getElapsed()
        8. getGMTOffset(), getTimezone(), isDST()
        9. getMonthNumber(), getShortDayName(), getShortMonthName(), getSuffix()
        10. isValid()
        11. parse()
      5. Ext.DomHelper and Ext.DomQuery
        1. select() and selectNode()
        2. append(), insertBefore(), insertAfter(), overwrite(), insertHtml()
      6. Ext.env.Feature
      7. Ext.Function
        1. createDelayed()
        2. createInterceptor()
        3. createSequence()
        4. createThrottled()
        5. defer()
        6. flexSetter()
        7. pass()
      8. Ext.JSON
      9. Ext.Logger
        1. deprecate(), error(), log(), and warn()
      10. Ext.Number
        1. constrain()
        2. from()
        3. snap()
        4. toFixed()
      11. Ext.Object
        1. each()
        2. fromQueryString() and toQueryString()
        3. getKey(), getKeys(), getSize(), getValues()
        4. merge()
        5. toQueryObjects()
      12. Ext.String
        1. capitalize()
        2. ellipsis()
        3. escape() and escapeRegex()
        4. format()
        5. htmlDecode() and htmlEncode()
        6. leftPad(), repeat(), and trim()
        7. toggle()
        8. urlAppend()
      13. Ext.Version
      14. Ext.mixin.Observable
      15. Ext.util.DelayedTask
      16. Ext.util.HashMap
        1. add(), clear(), remove(), removeByKey(), replace()
        2. contains(), containsKey()
        3. each()
        4. get(), getCount(), getKeys(), getValues()
      17. Ext.util.Inflector
        1. isTransnumeral()
        2. ordinalize()
        3. pluralize(), singularize()
    4. Conclusion
  5. 3. Views
    1. Components, Containers, and Panels
      1. Events
      2. Layouts
      3. Templates
    2. Component Library Catalog
      1. Components
        1. Button
        2. Label
      2. Containers
        1. Carousel
        2. Navigation view
        3. Segmented button
        4. Tab panel
        5. Title bars and toolbars
        6. Viewport
      3. Panels
        1. Action sheet
        2. Message box
        3. Picker
        4. Sheet
      4. Multimedia Views
        1. Image
        2. Audio
        3. Video
        4. Charts
        5. Map
    3. Creating Views
      1. Choosing a Base Class
      2. Creating the Class Skeleton
      3. Adding Configuration Options
      4. Providing Initialization
      5. Firing Custom Events
      6. Implement Private Methods
    4. Conclusion
  6. 4. Data
    1. Model Classes
      1. Model Field Types
      2. Associations
      3. Validations
    2. Stores and Proxies
      1. Local Proxies
        1. Memory
        2. LocalStorage
        3. SessionStorage
      2. Remote Proxies
        1. Ajax
        2. JsonP
        3. Rest
      3. Store Types
      4. The StoreManager Singleton
        1. Linear stores
        2. Hierarchical stores
    3. Data-Bound Controls
      1. DataView
        1. DataView Events
      2. Lists
      3. Nested Lists
    4. Conclusion
  7. 5. Forms
    1. Form Panels
    2. Fieldsets
    3. Field Types
      1. Text Fields
        1. DatePicker
        2. Email
        3. Hidden
        4. Number
        5. Spinner
        6. Password
        7. Search
        8. Select
        9. TextArea
        10. Url
      2. Checkboxes and Radio Groups
        1. Radio
      3. Slider
        1. Toggle
    4. Using Data with Forms
    5. Conclusion
  8. 6. Controllers
    1. Director of the Orchestra
    2. Creating a Controller
    3. Initialization
    4. Routing and Deep-Linking
    5. Conclusion
  9. 7. Styling Applications
    1. Using the Default Sencha Styles
    2. Introduction to Sass
      1. Variables
      2. Nesting
      3. Inheritance
      4. Functions
        1. Color manipulation
      5. Mixins
    3. Using Sass in Sencha Touch
      1. Generating CSS with Compass
    4. Sencha Touch Sass Parameters
    5. Conclusion
  10. 8. Debugging, Testing, and Documenting
    1. Debugging
      1. WebKit Web Inspector
        1. Enable the WebKit Inspector
        2. Setup for mobile development
        3. Inspect the HTML of your app
        4. Log messages in the console
        5. Set breakpoints
      2. Remote Debugging
      3. Adobe Edge Inspect
    2. Testing
      1. Jasmine
      2. Siesta
    3. Documenting Your Code with JSDuck
    4. Tips for Quality Sencha Touch Apps
    5. Conclusion
  11. 9. Sencha Architect
    1. Introduction
      1. Installation
      2. User Interface
    2. Creating a Simple Application
      1. Configuring the Application
      2. Creating a Model Class
      3. Creating a Store
        1. Adding a proxy
        2. Adding sorters and groupers
      4. Creating Views and Forms
        1. Adding a CSS resource
      5. Creating Controllers
        1. Creating refs
        2. Creating control entries
        3. Populating an event handler
      6. Working with Projects
        1. Saving snapshots
        2. Adding components to the toolbox
        3. Previewing an application
        4. Publishing an application
    3. Conclusion
  12. 10. Deployment in Devices
    1. Using Profiles
      1. Adding Profiles
      2. Initialization Functions
      3. Custom MVC Classes
    2. Using Device Features
      1. Device Capabilities
      2. Accessing the Camera
      3. Native Notifications and Vibration
      4. Orientation Changes
      5. Network Connectivity
      6. Location Information
    3. Packaging with Sencha Cmd
      1. Creating Standalone Apps
      2. Creating Workspaces
      3. Packaging Applications
        1. Test package
        2. HTML5 package
        3. Native package
      4. Running Applications in the iOS Simulator
      5. Running Applications in an iOS Device
    4. Packaging with Sencha Architect
    5. Conclusion
  13. 11. Conclusion
  14. Index
  15. About the Author
  16. Colophon
  17. Copyright