Unit 2

Teach Your ….

Unit Objectives

After completing this unit, you should be able to:

Understand some of the design challenges that come with building mobile applications

Understand the features and capabilities of Sencha Touch Set up your development environment Develop apps using the Sencha Model-View-Controller framework Create custom classes that extend Sencha Touch visual components Visually define a mobile application graphical user interface with tabs, toolbars,

and themed buttons using Sencha Architect. Read and output JSON data from a web server Persist data using HTML5 Local Storage Accept data input from forms Integrate HTML5 video

Unit Topics

Understanding Design Challenges with Devices Introducing Sencha Touch Setting Up Your Development Environment Getting Started with Sencha Touch MVC Working with Data Adding Video

Supporting variable screen resolutions, touch input, gesture support, and variable bandwidth inevitably leads you to build applications that look very different from their desktop counterparts.

Consider the following table that illustrates the differences between some of the most popular mobile platforms:

Device Resolution Screen Size(diagonal in.)

iPhone 4 / 4S 640 x 960 3.5iPhone 5 1136 X 640 4iPad 3+ 1536 X 2048 9.7

iPad Mini 1024 x 780 7.9Kindle Fire 1024 X 600 7Droid X 480 x 854 4.3Samsung Galaxy Tab 10.1 1280 X 800 10.1"

Such a significant variance between device capabilities and, in particular, the very small screens of mobile phones necessitate that you implement new user interface paradigms. One challenge, for instance, is that the iPhone Human Interface Guidelines from Apple recommend that all of your on-screen buttons should be a minimum of 44 pixels in height. This occupies nearly 5% of the screen on an iPhone 4-series! Based on that recommendation, using desktop development paradigms (which tend to be very button and menu-centric), you would ultimately produce an application that reserved a very small portion of real-estate to display the information that you wish to convey.