What is Sencha Touch?
What is new in Sencha Touch 2.1?
Sencha Touch 2.1 includes key upgrades such as significant performance improvements, updated charting support, a new infinite list component, and enhanced native support through the Sencha Mobile Packager the most relevant upgrade to BlackBerry platform is the performance improvements. In Sencha Touch 2.0 some of our BlackBerry developers could at times have noticed issues with complex nested layouts. Sencha Touch 2.1 addresses the issues found for these application developers and provides improved performance by providing more layout information to the browser. This improvement did not change any of the APIs, but were done with changes to the DOM structure and additional CSS rules to help the browser flow complex layouts better. Developers of applications with the custom CSS should review their selectors with this update.
BlackBerry & Sencha Touch
Sencha Touch 2.1 will support BlackBerry 10 devices as well the BlackBerry PlayBook. With the brand new BlackBerry 10 OS, and the BlackBerry PlayBook OS 2.0, Sencha features will work with ease on these platforms. Along with the Sencha Touch 2.1 SDK, a beta BlackBerry 10 theme is also available to provide the BlackBerry 10 look and feel to your application and to present customized user interface on BlackBerry 10. To learn more about the BlackBerry 10 theme, download the BlackBerry 10 theme package and refer to the documentation for guidance.
Getting started with Sencha Touch
To get started, developers should download the framework, and then check out the Sencha Touch Learning Center, where they will find code samples, videos and tutorials. To get an idea of what is possible using the framework, there are a variety of demo applications showcasing the breadth and power of the platform.
Features supported by Sencha
These are some of the features which are supported by the Sencha Touch 2.1 framework. To see the complete list of supported features, refer the following link, http://www.sencha.com/products/touch/features.
AJAX - Sencha Touch provides full AJAX support, including CORS and JSON-P. CORS stands for Cross-origin resource sharing and JSON-P provides a method to request data from a server in a different domain.
DOM manipulation - Full DOM manipulation support available which means you can manipulate your HTML and XML using the DOM related methods provided by Sencha.
Feature Detection - Automatically detects the presence of features like geolocation, canvas and orientation support.
Geolocation - Provides a simple wrapper around geolocation on devices that support it.
Icons - 300 icons included for use by developers.
Touch events - Provides a full range of touch events and gestures like tap, swipe and pinch.
UI components supported by Sencha Touch
When you are designing the UI, you can take advantage of these components which are supported by Sencha Touch.
Most apps that require user input will make use of forms. Forms in Sencha Touch are built on top of HTML5 forms, with additional options for validating and submitting data, plus an easy way to lay fields out in a pleasing visual style.
Data View makes it easy to create lots of components dynamically. It's great for rendering lots of data from your server backend or any other data source.
Sencha Touch provides a list component that is ideal for presenting an index-style list of items.
Tab Panels are a great way to allow the user to switch between several pages that are all full screen.
Nested List is a component in Sencha Touch that provides a set of lists the user can tap through to navigate between nested sets of data with a clean and easy to use interface.
Navigation View is a new component in Sencha Touch 2. At its base, it is a simple container with a card layout and a docked toolbar; however Sencha built on top of that a easy way to push (add) and pop (remove) views in stack-like fashion. When you push a view, it will add that view into the stack and animate the new title into the toolbar. It will also animate a back button into the toolbar so you can provide your users with an easy flow to move between pages in your app.
Sencha has done an excellent job with data management. The automatic translation from JSON to Model objects with typed properties is mighty nice. Thanks to the division of responsibilities, where you can easily swap in different types of data sources or destinations, this solution is clearly better than the typical “ActiveRecord” implementation you see in many other frameworks. With the option to use JSON, JSONP, AMF and SOAP out of the box, let productivity ensue.
Take your web application data offline in minutes with a simple API. SessionStorage and LocalStorage are easy Proxy types provided ‘right out of the box’ that can be used to toggle your web application into an offline state.
Documentation, Training and Support
Sencha offers a rich set of online API Documentation as well as professional training classes. From personal experience, they are quite helpful and enjoyable. More comforting than perhaps any components or feature is the fact that there is a proven successful company behind the products and frameworks offered by Sencha.
Sencha Project Structure
Below is the directory structure for a Sencha Touch 2 project, which is very similar to our BlackBerry® WebWorks™ project structure as well.
Here's a description of each file and directory:
Building the Sencha project with BlackBerry WebWorks Packager
After you created the project with Sencha Touch framework, you will have a project structure which is outlined in the previous section. Now, it is easy to convert this in to a bar file, which you can deploy to BB 10 and BB Playbook devices. Let’s see how you can build this for BlackBerry.
Creating a configuration document
The BlackBerry WebWorks configuration document is an .xml file that contains the elements to define the BlackBerry WebWorks application namespace, the name of the application, application permissions, the start page, and the icons to use for the application. It also contains the elements to define general information such as the author and description. The configuration document contains the widget element at its root. The widget element provides a container for all other elements.
The valid file name for a configuration document for a BlackBerry WebWorks application is config.xml, and it is case insensitive. Within the application archive, the configuration document must use this file name. The config.xml file must exist in the root folder of the application archive.
To see what a configuration document looks like, see Sample configuration documents.
For a list of elements that you can use in a configuration document, see Elements.
Note: In the config.xml, you need to ensure that the following elements are set correctly.
Now that you have the project with Sencha Touch framework and you have created the BlackBerry WebWorks configuration document, you are ready to package your application for the BlackBerry 10 platform. For detailed instructions on how to package your application, refer to the following link.
Deploying your application to a BlackBerry 10 device
Now that you have packaged your application with the BlackBerry WebWorks SDK and you have produced the .bar file, you are ready to deploy your application on o a BlackBerry 10 device. Here is how you do it.
A complete guideline for Sencha Touch
Getting Started with Sencha
Performance Optimization Tips