Fast Track to Sencha Touch

happylandcannedSoftware and s/w Development

Jul 2, 2012 (4 years and 5 months ago)

323 views

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.
©
2010 Sencha, Inc.
1
-
1

Illustration
1
: Splash screens for the two applications

you will build during class
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.
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
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.
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
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.
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.
Illustration
2
: The mobile phone splash pages for your walkthroughs

and labs
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.
©
2010 Fig Leaf Software, Inc.
1
-
7
Illustration
3
: Pay a fine and clear your conscience!
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.
1
-
8

©
2010 Sencha, Inc.
Illustration
4
: The crime listing page. It might be

time to change neighborhoods!
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.
©
2010 Fig Leaf Software, Inc.
1
-
9
Illustration
5
: Have you seen these children?
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.
1
-
10

©
2010 Sencha, Inc.
Illustration
6
: Bad Boys...Bad Boys...Watcha gonna

do?
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..
©
2010 Fig Leaf Software, Inc.
1
-
11
Illustration
7
: .MOV video

playback
Illustration
8
: MP3 playback
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..
1
-
12

©
2010 Sencha, Inc.
Illustration
9
: Rough neighborhood? The Event

listing shows the crime details.
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
©
2010 Fig Leaf Software, Inc.
1
-
13
Illustration
10
: The marketing

pitch
Illustration
11
: Enrollment form
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.