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 applications that look and feel like native applications 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 such as 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 applications without the need for learning multiple arcane programming 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, and easy-to-use web applications that keep your visitors coming back for more.
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, which are 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 how to deal 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 turn 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.
Chapter 1, Let's Begin with Sencha Touch!: This chapter provides an overview of Sencha Touch and a walkthrough of the basics of setting up the library for development. We will also talk about programming frameworks and how they can help you develop touch-friendly applications quickly and easily.
Chapter 2, Creating a Simple Application: This chapter starts out by creating a simple application and using it to discover the basic elements of Sencha Touch. We will also explore some of the more common components, such as lists and panels, and we will show you how to find common errors and fix them when they occur.
Chapter 3, Styling the User Interface: Once we have our simple application, we will explore ways to change the look and feel of individual components, using CSS styles. Then, we will dive into using Sencha Touch themes to control the look of your entire application, using SASS and Compass.
Chapter 4, Components and Configurations: Here, we will examine the individual components for Sencha Touch in greater detail. We will also cover the use of layouts in each component, and how they are used to arrange the different pieces of your application.
Chapter 5, Events: Following our look at the individual components, we will take a look at the Sencha Touch events system, which allows these components to respond to the user's touch and communicate with each other. We will cover the use of listeners and handlers, and explore ways to monitor and observe events, so that we can see what each part of our application is doing.
Chapter 6, Getting Data In: Data is a critical part of any application. Here, we will look at the different methods for getting data into our application, using forms to gather information from the user, and ways to verify and store the data. We will also talk about the different data formats that are used by Sencha Touch and how we can manipulate that data using Sencha Touch's models and stores.
Chapter 7, Getting Data Out: Once we have data in our application, we need to be able to get it back out for display to the user. Here, we will discuss the use of panels and xTemplates to display the data. We will also take a look at using our data to create colorful charts and graphs, using Sencha Touch Charts.
Chapter 8, The Flickr Finder Application: Using the information we have learned about Sencha Touch, we will create a more complex application that grabs photos from Flickr, based on our current location. We will also use this as an opportunity to talk about best practices for structuring your application and its files.
Chapter 9, Advanced Topics: For our final chapter, we will explore ways to synchronize your data with a database server by creating your own API. Additionally, we will look at ways to synchronize data between the mobile device and a database server, compiling your application with PhoneGap and NimbleKit, as well as ways to get started as an Apple iOS or Google Android developer.
To accomplish the tasks in the book, you will need a computer with the following software:
Sencha Touch 1.1
Sencha Touch Charts 1.0
A programming editor such as BBEdit, Text Wrangler, UltraEdit, TextMate, Aptana, Eclipse, or others
A local web server, such as the built-in Apple OS X web server, Microsoft's built-in IIS server, or the downloadable WAMP server and software package.
Links to these items are provided in Chapter 1, Let's Begin with Sencha Touch!, under the section Setting up your development environment. Other optional, but helpful, software will be linked in specific sections when needed.
This book is ideal for anyone who wants to gain the practical knowledge involved in using the Sencha Touch mobile web application framework to make attractive web applications for mobiles. If you have some familiarity with HTML and CSS, this book is for you. This book will give designers the skills they need to implement their ideas, and provide developers with creative inspiration through practical examples. It is assumed that you know how to use touchscreens, touch events, WebKit on mobile systems, Apple iOS, and Google Android for mobiles.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "let's say we have an object called wheeled vehicle."
A block of code is set as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TouchStart Application – My Sample App</title>When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
var complexTest = new Ext.Container({
layout: {
type: 'vbox',Any command-line input or output is written as follows:
C:\Ruby192>ruby -v
ruby 1.9.2p180 (2011-02-18) [i386-mingw32]New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "choose the Forum link at the top of the page and then find the Sencha Touch forums".
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title through the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.