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 Mobile JavaScript Framework

Sencha Touch 2 Mobile JavaScript Framework

by Bryan P. Johnson, John Earl Clark
Publisher: Packt Publishing
Release Date: November 2013
ISBN: 9781782160748
View table of contents
Start reading

Book Description

Your knowledge of HTML and CSS is a door to the world of mobile web apps thanks to this handy guide to Sencha Touch. Through code and screenshots it gives you the practical know-how to use the framework.

  • Learn to develop web applications that look and feel native on Apple iOS, Google Android, Blackberry 10, and Windows Mobile devices using simple examples
  • Design and control the look of your application using a variety of simple style settings and themes
  • Make your application respond to the user’s touch with events like tap, double tap, swipe, tap and hold, pinch, and rotate

In Detail

Sencha Touch is a versatile HTML5-based framework for developing mobile web apps. Sencha Touch 2 has raised the bar for developing rich mobile web applications with HTML5. Using this framework you can develop mobile web apps that look and feel like native apps on iOS, Android, Blackberry, and Windows Mobile. It is built for enabling world-class user experiences.

"Sencha Touch 2 Mobile JavaScript Framework" is a step-by-step tutorial that will show you how to use Sencha Touch to produce attractive, exciting, native-quality, user friendly, easy-to-use mobile applications, that will keep your visitors coming back for more. There is sample code provided and explained with essential screenshots for better and quicker understanding.

"Sencha Touch 2 Mobile JavaScript Framework" will provide you with a hands-on approach to learning the language, taking you through the basic concepts and designs, to building a complete application from scratch.

We start with a foundation of JavaScript basics and work our way through the various components and features of Sencha Touch. We will explore how to leverage the Sencha Cmd utility to create applications quickly and cleanly. We will talk about how to get data in and out of your application, how to create new styles and themes, and even how to compile an application for sale on the various app stores.

"Sencha Touch 2 Mobile JavaScript Framework" will make you an expert application developer, using clear examples, code, and concepts.

Table of Contents

  1. Sencha Touch 2 Mobile JavaScript Framework
    1. Table of Contents
    2. Sencha Touch 2 Mobile JavaScript Framework
    3. Credits
    4. About the Authors
    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
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Let's Begin with Sencha Touch
      1. Frameworks
        1. Building from a foundation
        2. Building with a plan
        3. Building with a community
      2. Mobile application frameworks
        1. Native application versus web application
        2. Web-based mobile frameworks
        3. Web frameworks and touch technology
      3. Designing applications for mobile devices and touch technology
        1. Why touch?
      4. Getting started with Sencha Touch
        1. The API
        2. Examples
          1. The Kitchen Sink application
        3. Learn
        4. Forums
      5. Setting up your development environment
        1. Setting up web sharing on Mac OS X
        2. Installing a web server on Microsoft Windows
        3. Download and install the Sencha Touch framework
      6. Additional tools for developing with Sencha Touch
        1. Safari and Chrome Developer Tools
          1. JavaScript Console
          2. The Network tab
          3. The web inspector
          4. The Resources tab
        2. Other Sencha products
          1. Sencha Cmd
          2. Sencha Architect
          3. Sencha Animator
        3. Third-party developer tools
          1. Notepad++
          2. WebStorm
          3. Xcode 5
          4. Android Emulator
          5. YUI test
          6. Jasmine
          7. JSLint
      7. Summary
    9. 2. Creating a Simple Application
      1. Setting up the application
        1. Getting started with Sencha Cmd
        2. Creating the app.js file
        3. Creating the Main.js file
        4. Exploring the tab panel
          1. Adding a panel
      2. Controlling the look with layouts
        1. Using a fit layout
        2. Using a vbox layout
        3. Using an hbox layout
      3. Testing and debugging the application
        1. Parse errors
        2. Case sensitivity
        3. Missing files
        4. The web inspector console
      4. Updating the application for production
      5. Putting the application into production
      6. Summary
    10. 3. Styling the User Interface
      1. Styling components versus themes
      2. UI styling for toolbars and buttons
        1. Adding the toolbar
        2. Styling buttons
        3. The tab bar
      3. Sencha Touch themes
        1. Introducing Sass and Compass
          1. Variables in Sass
          2. Mixins in Sass
          3. Nesting in Sass
          4. Selector inheritance in Sass
          5. Compass
          6. Sass + Compass = themes
      4. Setting up Sass and Compass
        1. Installing Ruby on Windo
      5. Creating a custom theme
        1. Base color
        2. Mixins and the UI configuration
        3. Adding new icons
        4. Variables
        5. More Sass resources
      6. Default themes and theme switching
      7. Images on multiple devices with Sencha.io Src
        1. Specifying sizes with Sencha.io Src
          1. Sizing by formula
          2. Sizing by percentage
        2. Changing file types
      8. Summary
    11. 4. Components and Configurations
      1. The base component class
      2. Taking another look at layouts
        1. Creating a card layout
        2. Creating an hbox layout
        3. Creating a vbox layout
        4. Creating a fit layout
        5. Adding complexity
      3. The TabPanel and Carousel components
        1. Creating a TabPanel component
        2. Creating a Carousel component
      4. Creating a FormPanel component
        1. Adding a DatePicker component
        2. Adding sliders, spinners, and toggles
      5. The MessageBox and Sheet components
        1. Creating a MessageBox component
        2. Creating a Sheet component
        3. Creating an ActionSheet component
      6. Creating a Map component
      7. Creating lists
        1. Adding grouped lists
        2. Adding nested lists
      8. Finding more information with the Sencha Docs
        1. Finding a component
        2. Understanding the component page
      9. Summary
    12. 5. Events and Controllers
      1. Exploring events
        1. Asynchronous versus synchronous actions
      2. Adding listeners and handlers
      3. Controllers
        1. Refs and control
        2. Referencing multiple items with ComponentQuery
      4. Getting more out of events
        1. Custom events
        2. Exploring listener options
        3. Taking a closer look at scope
        4. Removing listeners
        5. Using handlers and buttons
        6. Exploring common events
      5. Additional information
      6. Summary
    13. 6. Getting the Data In
      1. Models
        1. The basic model
        2. Model validations
        3. Model methods
        4. Proxies and readers
      2. Introducing data formats
        1. Arrays
        2. XML
        3. JSON
        4. JSONP
      3. Introducing stores
        1. A simple store
        2. Forms and stores
          1. Specialty text fields
        3. Mapping fields to the model
        4. Clearing the store data
        5. Editing with forms
          1. Switching handlers
      4. Deleting from the data store
      5. Summary
    14. 7. Getting the Data Out
      1. Using data stores for display
        1. Directly binding a store
        2. Sorters and filters
        3. Paging a data store
        4. Loading changes in a store
        5. Data stores and panels
      2. XTemplates
        1. Manipulating data
        2. Looping through data
          1. Numbering within the loop
          2. Parent data in the loop
        3. Conditional display
        4. Arithmetic functionality
        5. Inline JavaScript
        6. XTemplate member functions
          1. The isEmpty function
        7. Changing a panel's content with XTemplate.overwrite
      3. Sencha Touch Charts
        1. Installing Sencha Touch Charts
        2. A simple pie chart
        3. A bar chart
      4. Summary
    15. 8. Creating the Flickr Finder Application
      1. Generating the basic application
      2. Introducing the Model View Controller
        1. Splitting up the pieces
      3. Building the foundation with Sencha Cmd
        1. Installing Sencha Cmd
        2. Using the Flickr API
      4. Adding to the basic application
        1. Generating controllers with Sencha Cmd
        2. A brief word about including files
        3. Creating the Photo data model
      5. Making the SearchPhotos components
        1. Creating the SearchPhotos store
        2. Creating the SearchPhotos list
        3. Creating the Navigation view
        4. Creating the SearchPhotoDetails view
        5. Creating the SearchPhotos controller
          1. Setting up the launch function
          2. Using Ext.util.Geolocation
          3. Listening to the list
      6. Building the SavedPhotos components
        1. Creating the SavedPhotos store
        2. Creating the SavedPhoto views
        3. Finishing up the Add button in SearchPhotos
        4. Updating the SavedPhotos controller
      7. Polishing your application
        1. Adding application icons and startup screens
      8. Improving the application
      9. Summary
    16. 9. Advanced Topics
      1. Talking to your own server
        1. Using your own API
        2. REST
        3. Designing your API
        4. Creating the model and store
        5. Making a request
        6. Ajax requests in an API
      2. Going offline
        1. Syncing local and remote data
        2. Manifests
        3. Setting up your web server
          1. Updating your cached application
        4. Interface considerations
          1. Alerting your users
          2. Updating your UI
        5. Alternate methods of detecting the offline mode
      3. Getting into the marketplace
        1. Compiling your application
          1. Sencha Cmd
          2. PhoneGap
          3. Other options
        2. Registering for developer accounts
          1. Becoming an Apple developer
          2. Becoming an Android developer
      4. Summary
    17. Index