Cover image for Sencha Touch Mobile JavaScript Framework

Sencha Touch Mobile JavaScript Framework

Author Bryan Patrick Johnson , John Earl Clark
Release Date: 2012/02/01
ISBN: 9781849515108
Topic:
0%
15
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Build web applications for Apple iOS and Google Android touchscreen devices with this first HTML5 mobile framework book.

  • Learn to develop web applications that look and feel native on Apple iOS and Google Android touchscreen devices using Sencha Touch through examples
  • Design resolution-independent and graphical representations like buttons, icons, and tabs of unparalleled flexibility
  • Add custom events like tap, double tap, swipe, tap and hold, pinch, and rotate
  • Plenty of well-explained sample code with the essential screenshots added in for thorough understanding

In Detail

Since its initial launch, Sencha Touch has quickly become the gold standard for developing rich mobile web applications with HTML5. Sencha Touch is the first HTML5 mobile JavaScript framework that allows you to develop mobile web apps that look and feel like native apps on both iPhone and Android touchscreen devices. Sencha Touch is the world's first application framework built specifically to leverage HTML5, CSS3 and JavaScript for the highest level of power, flexibility and optimization. It makes specific use of HTML5 to deliver components like audio and video, as well as a localStorage proxy for saving data offline. Sencha Touch also makes extensive use of CSS3 in its components and themes to provide an incredibly robust styling layer, giving you total control over the look of your application.

Sencha Touch enables you to design both Apple iOS and Google Android apps without the need for learning multiple arcane programing languages. Instead you can leverage your existing knowledge of HTML and CSS to quickly create rich web applications for mobile devices in JavaScript. This book will show you how you can use Sencha Touch to efficiently produce attractive, exciting, easy-to-use web applications that keep your visitors coming back for more.

Sencha Touch 1.0 Mobile JavaScript Framework teaches you all you need to get started with Sencha Touch and build awesome mobile web applications. Beginning with an overview of Sencha Touch, this book will guide you through creating a complete simple application followed by styling the user interface and the list of Sencha Touch components explained through comprehensive examples. Next, you will learn about the essential touch and component events, which will help you create rich dynamic animations. The book follows this up with information about core data packages and dealing with data and wraps it up with building another simple but powerful Sencha Touch application.

In short, this book has the step by step approach and extensive content to make a beginner to Sencha Touch into an ace quickly and easily.

Exploit Sencha Touch – a cross-platform library aimed at next generation, touch-enabled devices

Table of Contents

  1. Sencha Touch Mobile JavaScript Framework
  2. Credits
  3. About the Authors
  4. About the Reviewer
  5. www.PacktPub.com
    1. Support files, eBooks, discount offers and more
      1. Why Subscribe?
      2. Free Access for Packt account holders
  6. 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
  7. 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 framework
      1. Native application versus web application
      2. Web-based mobile frameworks
      3. Web frameworks and touch
    3. Designing applications for mobile and touch
      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. Set up web sharing on Mac OSX
      2. Install a web server on Microsoft Windows
      3. Download and install the Sencha Touch framework
    6. Additional tools for developing with Sencha Touch
      1. Safari Web Inspector
      2. Other Sencha products
        1. Sencha Animator
        2. Sencha.io
        3. Sencha Touch Charts
        4. RemoteJS and EventRecorder
      3. Third-party developer tools
        1. Xcode 4
        2. Android Emulator
        3. YUI test
        4. Jasmine
        5. JSLint
        6. Weinre
    7. Summary
  8. 2. Creating a Simple Application
    1. Setting up your folder structure
      1. Setting up your application folder
      2. Creating the HTML application file
    2. Starting from scratch with TouchStart.js
    3. Controlling the container with layout
    4. The panel
    5. The TabPanel component
    6. The list component
    7. Testing and debugging the application
      1. Parse errors
      2. Case sensitivity
      3. Missing files
      4. Web Inspector console
    8. Updating the application for production
      1. Point to production library files
      2. Remove debugging code
      3. Going that extra mile
    9. Putting the application into production
    10. Summary
  9. 3. Styling the User Interface
    1. Styling components versus themes
    2. UI styling for toolbars and buttons
      1. Styling buttons
      2. The tab bar
    3. Sencha Touch themes
      1. An introduction to 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
      2. Installing SASS and Compass
    5. Creating a custom theme
      1. Base color
      2. Mixins and the UI configuration
      3. Adding new icon masks
      4. Variables
      5. More SASS resources
    6. Designing for multiple devices
    7. Images on multiple devices with Sencha.io Src
      1. Specifying sizes with Sencha.io Src
        1. Sizing by formula
        2. Sizing by percentage
        3. Changing file types
    8. Summary
  10. 4. Components and Configurations
    1. The base component class
      1. The Ext object and Ext.getCmp()
    2. Layouts revisited
      1. The card layout
      2. The hbox layout
      3. The vbox layout
      4. The fit layout
      5. Adding complexity
    3. The TabPanel and Carousel components
      1. TabPanel
      2. Carousel
    4. FormPanel
      1. DatePicker
      2. Sliders, spinners, and toggles
    5. MessageBox and Sheet
      1. MessageBox
      2. Sheet
      3. ActionSheet
    6. Map
    7. Lists
      1. Grouped lists
      2. Nested lists
    8. Finding more information with the Sencha API
      1. Finding a component
      2. Understanding the component page
    9. Summary
  11. 5. Events
    1. What are events?
      1. Asynchronous versus synchronous
    2. Listeners and handlers
      1. Adding listeners and events dynamically
      2. Custom events
      3. Listener options
      4. Scope
      5. Removing listeners
      6. Managed listeners
      7. Handlers and buttons
      8. Suspending and queuing events
      9. Common events
      10. Ext.util.Observable
      11. Centralizing event handling with Observe
      12. Capture: a tool for debugging
    3. Event delegation
      1. Events and memory
      2. Delegating events
    4. Touch-specific events
    5. Additional information on events
    6. Summary
  12. 6. Getting Data In
    1. Models
      1. The basic model
      2. Model validations
      3. Model methods
      4. Proxies and readers
    2. Introduction to data formats
      1. Arrays
      2. XML
      3. JSON
      4. JSONP
    3. Introduction to stores
      1. A simple store
      2. Forms and stores
        1. Specialty text fields
      3. Mapping fields to the model
      4. Clearing store data
      5. Editing with forms
        1. Switching handlers
    4. Deleting from the Data Store
    5. Summary
  13. 7. Getting 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. Data manipulation
      2. Looping through data
        1. Numbering within the loop
        2. Parent data in the loop
      3. Conditional display
      4. Arithmetic
      5. Inline JavaScript
      6. XTemplate member functions
        1. isEmpty
      7. Changing a panel's content with XTemplate.overwrite
    3. Sencha Touch Charts
      1. Installing Touch Charts
      2. A simple pie chart
      3. A bar chart
    4. Summary
  14. 8. The Flickr Finder Application
    1. The basic application
    2. Introduction to Model View Controller (MVC)
    3. Building the foundation
      1. Splitting up the pieces
      2. Using the Flickr API
    4. The SearchPhotos component
      1. The SearchPhotos model
      2. The SearchPhotos view
      3. The SearchPhotos controller
      4. Adding the PhotoDetails view
    5. The savedphoto component
      1. The SavedPhoto model
      2. The SavedPhoto views
      3. The SavedPhotos controller
      4. Adding SavedPhotos to the viewport
      5. Adding the Save button
    6. Polishing your application
      1. Animated transitions
      2. Application icons
    7. Try it yourself
    8. Summary
  15. 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 offline mode
    3. Getting into a marketplace
      1. Compiling your application
        1. PhoneGap
        2. NimbleKit
        3. Other options
    4. Registering for developer accounts
      1. Becoming an Apple developer
      2. Becoming an Android Developer
    5. Summary