With the growing popularity of mobile devices, cell phones, and tablet computers, consumers have quickly moved to embrace touch-based operating systems and applications. This popularity has given developers a wide variety of platforms to choose from Apple's iOS (iPhones, iTouch, and iPad), Google's Android, Windows Mobile 7, and many more. Unfortunately, this rich variety of platforms brings with it an equally rich variety of programming languages to choose from. Picking any single language often locks you into a specific platform or device.
Sencha Touch removes this obstacle by providing a framework based in JavaScript, HTML 5, and CSS. These standards have gained strong support across most modern browsers and mobile devices. By using a framework based on these standards, you can deploy applications to multiple platforms, without having to completely rewrite your code.
This book will help familiarize you with Sencha Touch, from the basic setup to building complex applications. We will also cover some basics about frameworks and touch applications in general, as well as provide tips on how to set up your development environment and deploy your applications in a number of different ways.
In this chapter, we will cover the following:
Frameworks
Mobile application frameworks
Designing applications for Touch
Getting started with Sencha Touch
Setting up your development environment
Additional tools for developing with Sencha Touch
A framework is a reusable set of code that provides a collection of objects and functions that you can use to get a head start on building your application. The main goal of a framework is to keep you from reinventing the wheel each time you build an application.
A well-written framework also helps by providing some measure of consistency and gently nudging you to follow standard practices. This consistency also makes the framework easier to learn. The keys to this reusability and ease of learning are two coding concepts called objects and inheritance .
Most frameworks, such as Sencha Touch, are built around an Object-Oriented Programming (OOP) style. The idea behind OOP is that the code is designed around simple base objects. A base object will have certain properties and functions that it can perform.
For example, let's say we have an object called wheeled vehicle. Our wheeled vehicle has a few properties that are listed as follows:
One or more wheels
One or more seats
A steering device
It also has a few functions:
This is our base object. Once this base object is created, we can extend it to add more functionality and properties. This allows us to create more complex objects, such as bicycles, motorcycles, cars, trucks, buses, and more. Each of these complex objects does a lot more than our basic wheeled object, but it also inherits the properties and abilities of that original object. We can even override the original functions, such as making our Move Forward function go quicker for the car than for our bicycle, if needed.
This means we can build lots of different kinds of wheeled vehicles without having to recreate our original work. We can even build more complex objects. For example, once we have a generic car, we can build everything from a Volkswagen to a Ferrari, just by adding in the new properties and functions for the specific model.
Let's take a more concrete example from Sencha Touch itself—the container object.
The container object is one of the basic building blocks of Sencha Touch. As the name implies, it is designed to hold other items, such as buttons, fields, toolbars, and more. The container object has over 40 different configuration options that control simple things such as:
Height
Width
Padding
Margin
The configuration options also control more complex behavior, such as:
The container also has over 60 methods or things that it can do. These methods include simple things, such as:
ShowHideEnableDisableSet HeightSet Width
There are also more complex methods, such as:
The container also has a number of properties that you can use and events that it can listen for.
This basic container object is used as a building block in Sencha Touch to create buttons, panels, form fields, and other more complex objects. These subobjects or child objects inherit all of the abilities and attributes of the container object (the parent object). Each will include the same configuration options for height, width, and so on. They will know how to do all the things a container can do—show, hide, and so on.
Each of these child objects will also have additional unique configurations and methods of their own. For example, buttons have an additional text property that sets their title, and buttons can also tell when a user clicks on them. By extending the container object, the person creating the button only had to write code for these extra configurations and methods.
From a coding perspective, objects and inheritance mean that we can reuse a lot of our work. It also means that, when we encounter a new language such as Sencha Touch, we can use what we learn about the basic code objects to quickly understand the more complex objects.
In addition to providing reusability, frameworks also provide you with a collection of core objects and functions, commonly used to build applications. This keeps you from starting from scratch each time you begin a new application.
These code objects typically handle most of the ways a user will input, manipulate, or view data. They also cover the common tasks that occur behind the scenes in an application, such as managing data, handling sessions, dealing with different file formats, and formatting or converting different kinds of data.
Chances are, for most frameworks, any common task you wish to perform has already been accounted for and is simply awaiting your discovery. Once you are familiar with the wide range of objects and functions provided by a framework such as Sencha Touch, you can develop your applications quickly and more efficiently:
One of the key things to look for in any framework is documentation. A framework with no documentation, or worse yet, one with bad documentation, is simply an exercise in frustration. Good documentation should provide low-level information about every object, property, method, and event in the framework. It should also provide more generalized information, such as examples of how the code is used in various situations.
Documentation and examples are two of the places where Sencha Touch excels as a framework. Extensive information is available on the main Sencha website, http://www.sencha.com, under API Docs | Sencha Touch.
A well-designed framework also maintains a set of standards and practices. These can be simple things like using camel case for variable names (for example, myVariable) or more complex practices for commenting on and documenting the code. The key to these standards and practices is consistency.
Consistency allows you to quickly learn the language and understand intuitively where to find the answers to your questions. It's a little like having a plan for a building; you understand how things are laid out and how to get where you need to go quickly.
A framework will also help you understand how to structure your own applications by providing an example for both structure and consistency in coding.
In this regard, Sencha has made every effort to encourage consistency, observe standards, and provide extensive documentation for the Sencha Touch framework. This makes Sencha Touch a very effective first language for the beginning programmer.
Frameworks seldom exist in isolation. Groups of developers tend to collect around specific frameworks and form communities. These communities are fantastic places to ask questions and learn about a new language.
As with all communities, there are a number of unwritten rules and customs. Always take the time to read through the forum before posting a question, just in case the question has already been asked and answered.
Sencha Touch has an active developer community with a forum that can be accessed from the main Sencha website: http://www.sencha.com/ (choose the Forum link at the top of the page, and then find the Sencha Touch forums).
Mobile application frameworks need to address different functionalities from a standard framework. Unlike a traditional desktop application, mobile devices deal with touches and swipes instead of mouse clicks. The keyboard is part of the screen, which can make traditional keyboard navigation commands difficult, if not impossible. In order to understand these constraints, we can begin by looking at different types of mobile frameworks and how they work.
There are two basic types of mobile application framework: one that builds native applications and one that builds web-based applications, such as Sencha Touch.
A native application is one that is installed directly on the device. It typically has more access to the device's hardware (camera, GPS, positioning hardware, and so on) and to other programs on the device, such as the address book and photo album. Updates to a native application typically require each user to download a new copy of the updated program.
Web-based applications, as the name implies, require a public web server that your users will access, to use the application. Users will navigate to your application website using the browser on their mobile device. As the application runs inside the web browser, it has less access to the local file system and hardware, but it also doesn't require the user to walk through a complex download and installation process. Updates to a web-based application can be accomplished by making a single update to the public web server. The program then updates automatically for anyone who accesses the site.
Web-based applications can also be modified to behave more like a native application or even be compiled by a separate program to become a full native application:
For example, users can navigate to the web application and then choose to save it to the desktop of their mobile device. This places an icon on the screen, just like a native application. It also removes the browser navigation from the application, making the application appear just like a full native application. A properly designed web application can use the device's built-in storage capabilities to store data locally and even function when the device is offline.
If you find that you need the full functionality of a native application, external compilers such as PhoneGap (http://www.phonegap.com/) can take your web-based application and compile it into a full native application that you can upload and sell in Apple's App Store or Google's Android Marketplace. PhoneGap also supplies programming hooks for you to access camera functionality, contact lists, and more.
A web-based mobile framework depends on the web browser to run the application. This is a critical piece of information for a couple of reasons.
First, the web browser has to be consistent across mobile platforms. If you have previously done any website development, you are familiar with the painful issue of browser compatibility. A website can look completely different, depending on the browser. JavaScript that works in one browser doesn't work in another. People also tend to hold on to older browsers without updating them. Fortunately, these problems are less of an issue with most mobile devices, and no problem at all for iOS and Android.
The web browser for both Apple's iOS and Google's Android is based on the WebKit engine. WebKit is an open source engine that basically controls how the browser displays pages, handles JavaScript, and implements web standards. What this means for you is that your application should work the same on both platforms.
However, mobile devices that do not use WebKit (such as Windows Mobile) will be unable to use your application. The good news is that, as more browsers adopt HTML5 standards, this problem may also begin to disappear.
The second consideration for a web-based application is where it lives. A native application gets installed on the user's device. A web-based application needs to be installed on a public server. Users will need to be able to type a URL into their web browser and navigate to your application. If the application only exists on your computer, then you are the only one who can use it. This is great for testing, but if you want to have other people using your application, you will need to have it hosted on a public server.
The third consideration is connectivity. If a user cannot connect to the Internet, then they won't be able to use your application. However, Sencha Touch can be configured to store your application, and all of its data, locally. At first glance, this ability seems to negate the problem of connectivity altogether, but it actually causes problems when users connect to your application with more than one device:
A web-based application can be accessed from anywhere, with a web browser. The same application can be accessed from a mobile device, a personal computer, and a cell phone. This is a huge advantage for information-rich applications. For example, in a web-based application, if I enter data into the application on my phone, I can log in from my home computer and still see that data. This is because the data is stored on the remote server with the application.
However, if I have set up my application to store everything locally, anything that I enter in my cell phone stays within the cell phone and cannot be viewed from another location, such as my home computer. If I use a computer to access the site, it will create a second separate local set of data, tied to my home computer.
Fortunately, Sencha Touch can be set up to synchronize data between the server and the various devices. When your application is connected to the Internet, it will synchronize any existing offline data and use the remote server for storage of anything done while online. This makes sure that your data is accessible to you across all of your devices, while alloing you to work offline as needed.
Standard web frameworks have previously been designed to work within a mouse and keyboard environment, but mobile web frameworks also have to understand the concept of touch for both navigation and data entry:
Most touch-based frameworks understand the following types of touch gestures:
Swipe: Moving a single finger across the screen from left to right or top to bottom
Pinch or spread: Touching the screen with two fingers and bringing them together in a pinching motion, or spreading them apart to reverse the action
Rotate: Placing two fingers on the screen and twisting them clockwise or counter clockwise, typically to rotate an object on screen
These touch interactions were initially limited to native application frameworks, but Sencha Touch and other web-based frameworks have made them available to the web browser.
Now that we can use these touches and gestures for our mobile applications, we should also consider how they change the way our users will interact with our applications. We should also talk a bit about the potential issues with mobile applications in general.
Mobile applications require some changes in thinking. The biggest consideration is one of scale. If you are used to designing an application on a 21 inch monitor, dealing with a 3.5 inch phone screen can be a painful experience. Phones and mobile devices also use a variety of screen resolutions:
When designing a mobile application, it's usually a good idea to mock up the design to get a better idea of scale and where your various application elements will go. There are a number of good layout programs available to help you with this:
Omni Graffle for the Mac (http://www.omnigroup.com/products/omnigraffle/ )
Balsamiq Mockups for Mac, Windows, and Linux (http://balsamiq.com/)
DroidDraw for Mac, Windows, and Linux (http://www.droiddraw.org/)
iMockups for the iPad (http://www.endloop.ca/imockups/)
Touch applications also have certain considerations to keep in mind. If you are coming from a typical web development background, you might be used to using events such as hover.
Hover is typically used in web applications to alert the user that an action can be performed or to provide tool tips. For example, showing that an image or text can be clicked by changing the color when the user hovers the mouse cursor. As touch applications require the user to be in contact with the screen, there really is no concept of hovering. Objects that the user can activate or interact with should be obvious and icons should be clearly labeled.
Unlike mouse-driven applications, touch applications are also typically designed to mimic real world interactions. For example, turning the page of a book within a touch application is usually accomplished by swiping your finger across the page horizontally, in much the same way you would in the real world. This encourages exploration of the application, but it also means that coders must take special care with any potentially destructive actions, such as deleting an entry.
While it may seem like programming for touch requires quite a bit of extra work and care, there are a number of advantages.
Before the advent of touch screens, applications were generally limited to input from external keyboards and the mouse. Neither of these is very desirable in a mobile platform. Even when full internal keyboards are used in non-touch based devices, they can take up a tremendous amount of space on the device, which in turn limits the available screen size. By contrast, a touch-based keyboard disappears when it isn't needed, leaving a larger screen area available for display.
Slide out keyboards on mobile devices do not adversely affect the screen size, but they can be cramped and uncomfortable to use. Additionally, a touch screen keyboard allows for application-specific keyboards and keys, such as the addition of the .com key when using a web browser.
Keyboards and mice also present a mental disconnect for some users. Using a mouse on your desk to control a tiny pointer on a separate screen often leads to a sense that you are not entirely in control over the activity. Whereas directly touching an object on the screen and moving it, places you at the center of the activity. Because we interact with the physical world by touching and moving objects by hand, a touch-based application often provides a more intuitive User Interface (UI).
Touch technology is also beginning to make inroads into the desktop computer arena. As this technology becomes cheaper and more common, the need for touch-based applications will continue to grow.
When getting started with any new programming framework, it's a good idea to understand all of the resources available to you. Buying this book is a great start, but there are additional resources that will prove invaluable to you as you explore the Sencha Touch framework.
Fortunately for us, the Sencha website provides a wealth of information to assist you at every stage of your development.
The Sencha Touch Application Programming Interface (API) documentation provides detailed information on every single object class available to you with Sencha Touch. Every class in the API includes detailed documentation for every configuration option, property, method, and event, for that particular class. The API also includes short examples and other helpful information.
The API documentation is available on the Sencha website, http://docs.sencha.com/touch/1-1/.
A copy is also included as part of the Sencha Touch framework that you will download to create your applications.
The Sencha website also includes a number of example applications for you to look at. By far, the most helpful of these is the Kitchen Sink application:
The Kitchen Sink application provides examples for:
User interface items, such as buttons, forms, toolbars, lists, and more
Animations for things such as flipping pages or sliding in a form
Touch events, such as, tap, swipe, and pinch
Data handling for JSON, YQL, and AJAX
Media handling for audio and video
Themes to change the look of your application
Each example has a Source button in the upper-right corner, that will display the code for the current example.
The Kitchen Sink application also provides an Event Recorder and an Event Simulator. These will allow you to record, store, and play back any touch events fired by the device's screen.
These simulators demonstrate how to record actions inside your own application for playback as a live demonstration or a tutorial. It can also be used for easily repeatable testing of functionality.
You can play around with the Kitchen Sink application on any mobile device or on a regular computer, using Apple's Safari web browser. The Kitchen Sink application is available on the Sencha website, http://dev.sencha.com/deploy/touch/examples/kitchensink/.
A copy of the Kitchen Sink application is also included as part of the Sencha Touch framework that you will download to create your applications.
Sencha also has a section of the site devoted to more detailed discussions of particular aspects of the Sencha Touch framework. The section is appropriately titled Learn. This section contains a number of tutorials, screencasts, and guides, available for you to use. Each section is labeled as Easy, Medium, or Hard, so that you have some idea about what you are getting into.
The Learn section is available on the Sencha Website, at http://www.sencha.com/learn/touch/.
Now that you've familiarized yourself with the available Sencha Touch resources, the next step is to set up your development environment and install the Sencha Touch libraries.
In order to start developing applications using Sencha Touch, it is highly recommended that you have a working web server where you can host your application. It's possible to develop Sencha Touch applications, viewing local folders with your web browser. Without a web server you won't be able to test your application using any mobile devices.
If you are using Mac OSX, you already have a web server installed. To enable it, launch your system preferences, choose Sharing, and enable Web Sharing. If you haven't done so already, click on Create Personal Website Folder, to set up a web folder in your home directory. By default, this folder is called Sites, and this is where we will be building our application:
The sharing panel will tell you your web server URL. Remember this for later.
If you're running Microsoft Windows, you may be running Microsoft's Internet Information Server (IIS). You can find out by going into your Control Panel and choosing either of the following options:
Program Features | Turn Windows features on or off (In Vista or Windows 7). Detailed instructions are at http://www.howtogeek.com/howto/windows-vista/how-to-install-iis-on-windows-vista/.
Add/Remove Programs | Add/Remove Windows Components (in Windows XP). Detailed instructions are at http://www.webwiz.co.uk/kb/asp-tutorials/installing-iis-winXP-pro.htm.
If you do not have IIS installed, or you are unfamiliar with its operation, we recommend installing the Apache server for use with this book. This will allow us to provide consistent instruction for both Mac and PC, in our examples.
One of the easiest ways to install Apache is to download and install the XAMPP software package (http://www.apachefriends.org/en/xampp-windows.html). This package includes Apache as well as PHP and MySQL. These additional programs can be helpful as your skills grow, allowing you to create more complex programs and data storage options.
After you've downloaded and run XAMPP, you'll be prompted to run the XAMPP Control Panel. You can also run the XAMPP Control Panel from the Windows Start menu. You should click on Start on the Apache line of the control panel to start your web server. If you receive a notice from your firewall software, you should choose the option to allow Apache to connect to the Internet:
In the folder where you installed XAMPP, is a subdirectory called htdocs. This is the web folder where we will be setting up Sencha Touch. The full path is usually C:xampphtdocs. Your web server URL will be http://localhost/, and you'll want to remember this for the next step.
In your web browser, go to http://www.sencha.com/products/touch/ and click the Download button. Save the ZIP file to a temporary directory.
Unzipping the file you downloaded will create a directory called sencha-touch-
version (in our case it was sencha-touch-1.1.0). Copy this directory to your web folder and rename it, dropping the version number and leaving just sencha-touch.
Now, open up your web browser and enter your web URL, adding sencha-touch to the end. You should see the following Sencha Touch demo page:
Congratulations! You've successfully installed Sencha Touch.
In addition to configuring a web server and installing the Sencha Touch libraries, there are some additional development tools that you may want to take a look at, before diving into your first Sencha Touch application. Sencha has several other products you may find useful to use in your Sencha Touch app, and there are quite a few third party tools that can help you develop and deploy your app. We're not going to go into a lot of detail on how to set them up and use them, but these tools are definitely worth looking into.
Bundled with the desktop version of the Safari web browser, the Safari Web Inspector allows you to debug JavaScript and CSS, inspect HTML and your browser's local storage, and much more.
We recommend using Safari to examine your Sencha Touch application during development, and the Safari Web Inspector is a huge part of that. Both Chrome and Firefox have similar tools (Chrome Developer Tools and Firebug for Firefox), but as iOS devices use Safari for their web browser, we feel that using Safari for your development helps keep things simple and provides a consistent browsing experience. You can download it at http://www.apple.com/safari/download/.
We will be using the Safari web browser for testing our examples throughout this book:
In addition to Safari and the Web Inspector, there are a number of additional packages that you can use to enhance and test your own projects.
Sencha offers several products that expand the capabilities of Sencha Touch.
Although Sencha Touch comes with a few built-in animations, with the Sencha Animator desktop application, you can create professional animations that rival Flash-based animations. Unlike Flash animations, though, Sencha Animator animations run on most mobile browsers, making them perfect for adding extra flare to your Sencha Touch application. You can download Sencha Animator at http://www.sencha.com/products/animator/.
Sencha.io is Sencha's cloud computing service offering. Their initial service is called Sencha.io Src and is a great way to incorporate images into your Sencha Touch application. Sencha.io Src handles resizing, caching, and optimizing your images across the various displays and resolutions used in mobile devices. You create a single, high-resolution image, and Sencha.io Src handles the rest. It is available at http://www.sencha.com/products/io/.
Sencha Touch Charts brings powerful charting functionality to a touch environment, with interactive functionality aimed directly at mobile devices. Create pie charts and line, stacked, bar, and radar graphs, and easily fit them into your Sencha Touch application. Sencha Touch Charts is available at http://www.sencha.com/products/touch/charts:
RemoteJS and EventRecorder are not official Sencha products, but they were developed by Sencha and released as open source tools for debugging applications running specifically on Android platforms.
RemoteJS allows you to perform remote debugging, using the Android SDK's built-in emulator or your own Android device. Then, you can execute JavaScript commands, through the RemoteJS interface, to inspect variables, and can run functions to see their output.
EventRecorder allows you to record user interactions with your application, and then play those interactions back at a later time. This allows you to test updates to your application in a repeatable, automated manner, similar to the web application testing tool Selenium.
Both RemoteJS and EventRecorder can be downloaded at https://github.com/senchalabs/android-tools.
You can also choose from a variety of developer tools, which you may find useful in developing your Sencha Touch apps.
Xcode 4 is Apple's complete development environment, designed for people writing for any Apple platform—OSX, iPhone, or iPad. As such, it comes with a lot of stuff that is not really necessary for writing Sencha Touch applications. However, one thing that is included with Xcode 4, that can be very handy for Sencha Touch developers, is the iOS Simulator. With the iOS Simulator, you can test your application on various iOS devices, without having to actually own them.
Downloading Xcode 4 requires membership in the Apple Developer program. Once you've signed up for membership, you can download Xcode 4 from http://developer.apple.com/xcode/:
Android Emulator is the Android counterpart to the iOS Simulator that comes with Xcode 4. Android Emulator is part of the free Android SDK download (http://developer.android.com/guide/developing/devices/emulator.html). Android Emulator can be configured to mimic many specific Android mobile devices, allowing you to test your application across a broad range of devices:
A common part of any kind of programming is testing. YUI test, a part of Yahoo's YUI JavaScript library, allows you to create and automate unit tests, just as JUnit for Java does. Unit tests set up test cases for specific segments of code. Then, if in the future, that code changes, the unit tests can be re-run to determine if the code still passes. This is very useful, not only for finding errors in code, but also for ensuring code quality before a release. YUI test can be found at http://yuilibrary.com/yui/docs/test/.
Jasmine is a testing framework similar to YUI test, but based on Behavioral Driven Design (BDD). In BDD testing, you start with specifications, stories about what your application should do in certain scenarios, and then write code that fits those specifications. Both YUI test and Jasmine accomplish the same goals of testing your code, just in different ways. Download Jasmine at http://pivotal.github.com/jasmine/.
Possibly the most useful JavaScript tool on this list, JSLint will examine your code for syntax errors and code quality. Written by Douglas Crockford, one of the fathers of JavaScript, JSLint will examine your code in great detail, which is great for finding errors before you deploy your code. Download it at http://www.jslint.com/lint.html.
One of the biggest problems with testing web applications on mobile devices is the lack of debugging tools. Emulators and simulators will get you most of the way there, but there are always problems that you will only encounter when you actually test on mobile devices. Weinre is an open source product from PhoneGap that provides you a debug console similar to the Safari Web Inspector, but for web applications running on mobile devices. It involves setting up a special server, but the instructions on the site are pretty straightforward, and the benefits very much outweigh the effort it takes to install. Weinre is available at http://phonegap.github.com/weinre/.
In this chapter, we've covered the fundamentals of web application frameworks and why you should use Sencha Touch. We walked through setting up a development environment and installing the Sencha Touch libraries. We also took a brief look at some of the considerations in developing touch applications and some tools to make your development life easier. You can find information at:
Sencha Touch Learning Center (http://www.sencha.com/learn/touch/)
Apple's iOS Human Interface Guidelines (http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html)—an in depth guide to developing user interfaces for iOS devices.
In the next chapter, we'll create our first Sencha Touch application and, in the process, learn the basics of using Sencha Touch.