1. Unit 1:
Unit 1: Introducing the Course
About the Course
Fast Track to Sencha Touch is designed to teach experienced web
developers and designers how to design and implement web applications
for the iPhone, iPad, and Android devices. The course is task-based, with
students learning by doing. Over the next day, you will create and update a
web application designed for citizens of the District of Columbia to
research and report crimes in their neighborhoods.
Along with covering the basics of Sencha Touch, the course focuses on
best practices and design, stressing the importance of usability,
optimization, and maintainability of cross-device compatible applications.
Illustration 1: Splash screens for the two applications
you will build during class
©2010 Sencha, Inc. 1-1

2. Fast Track to Sencha Touch
Reviewing the Course Objectives
After completing this course, you should be able to:
• Develop applications for multiple form factors
• Implement effective layouts for your application
• Create data entry forms that submit to an application server
• Request JSON and JSON-P data from an application server
• Output hierarchically structured information using data drill-down
• Integrate Google Maps and geolocation into your applications
• Deploy audio and video
Reviewing the Course Prerequisites
The knowledge prerequisites for this course are:
• Prior experience with HTML 5
• A casual understanding of CSS
• Intermediate JavaScript coding skills and, in particular, familiarity with
JavaScript Object Notation
Required Software
The following software is REQUIRED to be installed on each student
workstation:
• Adobe ColdFusion 9
https://www.adobe.com/cfusion/tdrc/index.cfm?product=coldfusion
• Apache HTTP Web Server
http://httpd.apache.org/
• MySQL Community Server 5.1+
http://dev.mysql.com/downloads
• Safari (http://www.apple.com/safari/)
• Komodo Edit (http://www.activestate.com/komodo-edit)
• Sencha Touch
• Fast Track to Sencha Touch student files
http://training.figleaf.com/courses/errata/senchatouch.cfm
1-2 ©2010 Sencha, Inc.

3. Unit 1: Introducing the Course
Optional Software
The following software may be optionally installed on student
workstations:
• Android SDK (http://developer.android.com/sdk/index.html)
(optional)
• ibdemo2 Cross Platform iPhone and iPad Web Browser Simulator
http://code.google.com/p/ibbdemo2/
• iOS SDK (optional)
http://developer.apple.com/devcenter/ios/index.action
Complete installation instructions are covered in Appendix A of this guide.
©2010 Fig Leaf Software, Inc. 1-3

4. Fast Track to Sencha Touch
Reviewing the Course Format
This course is divided into ten units, each of which presents new
information and contains demonstrations, walkthroughs, and a lab. At the
end of each unit, you will find a summary and a short review to test your
knowledge of the unit’s content.
The following icons are used throughout the guide:
Concepts introduce new information.
Demonstrations illustrate new concepts.
Walkthroughs guide you, with the instructor’s assistance, through
procedures in a hands-on context.
Labs let you practice new skills on your own.
Summaries provide a brief synopsis of the unit’s content.
Reviews test how well you remember the concepts from the unit.
Best Practices provide you with helpful insights and information.
1-4 ©2010 Sencha, Inc.

5. Unit 1: Introducing the Course
Outlining the Course Content
• Unit 1: Introducing the Course
• Unit 2: Getting Started with Sencha Touch
• Introducing Sencha Touch
• Setting up the development environment
• Developing your first Sencha Touch application
• Unit 3: Designing a Layout
• Using Panels
• Using Toolbars, Icons, and Buttons
• Using Box Layouts
• Using the Card layout
• Deploying Tabs
• Unit 4: Working with Forms
• Using the FormPanel
• Handling Text
• Grouping content with Field Sets
• Using checkboxes and radio buttons
• Working with sliders, spinners, and toggles
• Specifying a URL for posting, submitting, or loading
• Unit 5: Making Data Requests
• Defining a connection to a server
• Working with JSON / JSON-P
• Defining a custom data model
• Unit 6: Advanced GUI techniques
• Displaying Audio and Video
• Integrating Google Maps
©2010 Fig Leaf Software, Inc. 1-5

6. Fast Track to Sencha Touch
Demonstration 1-1: Viewing the Applications
Observe as your instructor introduces the applications that you will be
building during the walkthroughs and labs of this course.
Illustration 2: The mobile phone splash pages for your walkthroughs
and labs
Reviewing the CrimeFinder Application
You will build the CrimeFinder DC mobile application during your
instructor-led walkthroughs. You will build the application in the following
order:
• Confess to a Crime form
• Crime Listing
• FBI RSS Missing Children News Feed
• FBI Most Wanted News Feeds
• Video of Traffic Accident
• FBI Podcast
• Google Map displaying crimes
1-6 ©2010 Sencha, Inc.

7. Unit 1: Introducing the Course
Confess to a Crime Form
The Confess feature enables you to report a crime and be judged. The form
features data validation, submits to an application server, and uses several
HTML 5-specific form elements.
Illustration 3: Pay a fine and clear your conscience!
©2010 Fig Leaf Software, Inc. 1-7

8. Fast Track to Sencha Touch
Listing Crimes
The crime listing feature pulls data from an application server via AJAX
into a data model and displays it within a panel using a template. You have
complete control of the output and will learn how to re-sort and
automatically refresh information being displayed.
Illustration 4: The crime listing page. It might be
time to change neighborhoods!
1-8 ©2010 Sencha, Inc.

9. Unit 1: Introducing the Course
FBI Missing Children
You will fetch the FBI missing children RSS feed using AJAX and display
it using a Sencha Touch list component. Pressing the blue arrow button
displays detailed information about the case, a common technique used
data drill-down scenarios.
Illustration 5: Have you seen these children?
©2010 Fig Leaf Software, Inc. 1-9

10. Fast Track to Sencha Touch
FBI Most Wanted
You will fetch the FBI 10 fugitive and terrorist news feeds using AJAX
and display it using a Sencha Touch nested list component. Nested lists are
a method of rendering hierarchical, tree-based data.
Illustration 6: Bad Boys...Bad Boys...Watcha gonna
do?
1 - 10 ©2010 Sencha, Inc.

11. Unit 1: Introducing the Course
Working with Audio and Video
You will display a video of a traffic accident and enable users to play an
MP3 podcast of an ongoing FBI investigation..
Illustration 7: .MOV video Illustration 8: MP3 playback
playback
©2010 Fig Leaf Software, Inc. 1 - 11

12. Fast Track to Sencha Touch
Working with Google Maps
During this course you will learn how to display a Google map and display
markers based on information fetched from a web service via AJAX..
Illustration 9: Rough neighborhood? The Event
listing shows the crime details.
1 - 12 ©2010 Sencha, Inc.

13. Unit 1: Introducing the Course
Reviewing the SubGenius University Web Site
You will build the SubGenius University web site during your lab
exercises. The application consists of the following panels:
• A Welcome Page containing a marketing pitch for the university
• A list of professors fetched from an AJAX request
• A Google Map, displaying campus locations
• A list of courses, fetched from an AJAX request
• A schedule of upcoming classes, fetched from an AJAX request
• An online enrollment form
Illustration 10: The marketing Illustration 11: Enrollment form
pitch
©2010 Fig Leaf Software, Inc. 1 - 13

14. Fast Track to Sencha Touch
Unit Summary
• The course is presented through a combination of lectures,
demonstrations, walkthrpughs, and labs.
• The course has been designed assuming that you already understand
JavaScript, Javascript Object Notation, and HTML 5.
• The course consists of 6 units.
• The course focuses on developing applications for the iOS, and
Android devices.
• You will build a web application to check out neighborhood crime in
Washington, DC.
• You will also build a mobile web site for the fictional SubGenius
University
• This course teaches the fundamentals of using Sencha Touch.
1 - 14 ©2010 Sencha, Inc.