Sencha Touch Mobile JavaScript Framework

By John Earl Clark , Bryan P. Johnson
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Let's Begin with Sencha Touch!

About this book

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 apps that look and feel like native apps 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 like 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 apps without the need for learning multiple arcane programing 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, 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 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 dealing 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 make 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

Publication date:
February 2012
Publisher
Packt
Pages
316
ISBN
9781849515108

 

Chapter 1. Let's Begin with Sencha Touch!

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

 

Frameworks


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:

  • Move Forward

  • Move Backward

  • Move Left

  • Move Right

  • Stop

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:

  • Layout: Determines how items in the container will be positioned

  • Listeners: Determine which events the container should pay attention to, and what to do when it hears the event

The container also has over 60 methods or things that it can do. These methods include simple things, such as:

  • Show

  • Hide

  • Enable

  • Disable

  • Set Height

  • Set Width

There are also more complex methods, such as:

  • Query: Does a search for specific items within the container

  • Update: Takes HTML or data, and updates the contents of the container

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.

Building from a foundation

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:

Building with a plan

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.

Building with a community

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 framework


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.

Native application versus web application

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.

Web-based mobile frameworks

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.

Web frameworks and touch

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:

  • Tap: A single touch on the screen

  • Double tap: Two quick touches on the screen

  • 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.

 

Designing applications for mobile and touch


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:

  • iPhone 4 and iPod Touch 4: 960 x 640

  • iPhone 4 and iPod Touch 3 : 480 x 320

  • Android 4 Phones support four general sizes:

    • xlarge screens are at least 960 x 720

    • large screens are at least 640 x 480

    • normal screens are at least 470 x 320

    • small screens are at least 426 x 320

  • iPad: 1024 x 768

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:

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.

Why touch?

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.

 

Getting started with Sencha Touch


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 API

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.

Examples

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

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.

Learn

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/.

Forums

Though mentioned before, the Sencha Forums are worth mentioning again. These community discussions provide general knowledge, bug reporting, question-and-answer sessions, examples, contests, and more. The forums are a great place to find answers from people who use the framework on a daily basis.

 

Setting up your development environment


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.

Set up web sharing on Mac OSX

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.

Install a web server on Microsoft Windows

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:

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:\xampp\htdocs. Your web server URL will be http://localhost/, and you'll want to remember this for the next step.

Download and install the Sencha Touch framework

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.

Note

Please note that all examples in this book were written using Sencha Touch version 1.1.0.

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.

 

Additional tools for developing with 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.

Safari Web Inspector

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.

Other Sencha products

Sencha offers several products that expand the capabilities of Sencha Touch.

Sencha Animator

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

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

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

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.

Third-party developer tools

You can also choose from a variety of developer tools, which you may find useful in developing your Sencha Touch apps.

Xcode 4

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

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:

YUI test

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

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/.

JSLint

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.

Weinre

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/.

 

Summary


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:

In the next chapter, we'll create our first Sencha Touch application and, in the process, learn the basics of using Sencha Touch.

About the Authors

  • John Earl Clark

    John Earl Clark holds a Master's Degree in Human Computer Interaction from Georgia Tech and an undergraduate degree in Music Engineering from Georgia State University. John and his co-author, Bryan Johnson, worked together at MindSpring and later EarthLink, starting out in Technical Support and Documentation, before moving into Application Development and finally management of a small development team. After leaving Earthlink in 2002, John began working independently as a consultant and programmer, before starting Twelve Foot Guru, LLC with Bryan in 2005. John has been working with Sencha Touch since the first early beta releases. He has also worked with Sencha’s ExtJS since the early days when it was still known as YUI-Ext. John has also written a previous book with Bryan Johnson called Sencha Touch Mobile JavaScript Framework. When he is not buried in code, John spends his time woodworking, playing guitar and brewing his own beer.

    Browse publications by this author
  • Bryan P. Johnson

    Bryan P. Johnson is a graduate of the University of Georgia. He went to work for MindSpring Enterprises in late 1995, where he met his co-author John Earl Clark. At MindSpring and later, EarthLink; Bryan served in multiple positions for over seven years, including the Director of System Administration and Director of Internal Application Development. After leaving EarthLink, he took some time off to travel before joining John to start Twelve Foot Guru. Bryan has worked with Sencha's products since the early days of YUI-Ext and has used Sencha Touch since its first betas.

    Browse publications by this author