Book Image

Sencha Touch Mobile JavaScript Framework

By : John Earl Clark, Bryan P. Johnson
Book Image

Sencha Touch Mobile JavaScript Framework

By: John Earl Clark, Bryan P. Johnson

Overview of this book

<p>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.<br /><br />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.<br /><br />Sencha Touch 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.<br /><br />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.<br /><br />Exploit Sencha Touch &ndash; a cross-platform library aimed at next generation, touch-enabled devices</p>

Related Content you might be interested in

Current Title:

Small book image
Sencha Touch Mobile JavaScript Framework
John Earl Clark | Bryan P. Johnson
Feb, 2012 | 316 pages
No titles found
Table of Contents (16 chapters)
Sencha Touch Mobile JavaScript Framework
Sencha Touch Mobile JavaScript Framework
Credits
Credits
About the Authors
About the Authors
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Let's Begin with Sencha Touch!
Let's Begin with Sencha Touch!
Frameworks
Mobile application framework
Designing applications for mobile and touch
Getting started with Sencha Touch
Setting up your development environment
Additional tools for developing with Sencha Touch
Summary
2
Creating a Simple Application
Creating a Simple Application
Setting up your folder structure
Starting from scratch with TouchStart.js
Controlling the container with layout
The panel
The TabPanel component
The list component
Testing and debugging the application
Updating the application for production
Putting the application into production
Summary
3
Styling the User Interface
Styling the User Interface
Styling components versus themes
UI styling for toolbars and buttons
Sencha Touch themes
Setting up SASS and Compass
Creating a custom theme
Designing for multiple devices
Images on multiple devices with Sencha.io Src
Summary
4
Components and Configurations
Components and Configurations
The base component class
Layouts revisited
The TabPanel and Carousel components
FormPanel
MessageBox and Sheet
Map
Lists
Finding more information with the Sencha API
Summary
5
Events
Events
What are events?
Listeners and handlers
Event delegation
Touch-specific events
Additional information on events
Summary
6
Getting Data In
Getting Data In
Models
Introduction to data formats
Introduction to stores
Deleting from the Data Store
Summary
7
Getting Data Out
Getting Data Out
Using data stores for display
XTemplates
Sencha Touch Charts
Summary
8
The Flickr Finder Application
The Flickr Finder Application
The basic application
Introduction to Model View Controller (MVC)
Building the foundation
The SearchPhotos component
The savedphoto component
Polishing your application
Try it yourself
Summary
9
Advanced Topics
Advanced Topics
Talking to your own server
Going offline
Getting into a marketplace
Registering for developer accounts
Summary
Index
Index

UI styling for toolbars and buttons

Let's take another look at the simple application we created in the previous chapter and use it to start our exploration of styles with toolbars and buttons.

To begin our exploration of styling, we are going to add a second upper toolbar to our application. Locate the dockedItems section of our code from the previous example:

dockedItems: [
{
dock: 'top',
xtype: 'toolbar',
title: 'About TouchStart'
}
]

After the trailing curly brace for our first toolbar, let's add a second toolbar as follows:

{
dock: 'top',
xtype: 'toolbar',
title: 'About TouchStart'
}, {
dock: 'top',
xtype: 'toolbar',
items: [
{text: 'My Button'}
]
}

Don't forget to add a comma between the two tolbars.

Tip

Extra or missing commas

When working in Sencha Touch, one of the most common causes of parse errors is an extra or missing comma. When you are moving code around, always make sure you have accounted for any stray or missing commas. Fortunately for us, the Safari Error Console will usually...

Previous Section
End of Section 3
Next Section