In the last release of Sencha Touch 2.2, we were happy and excited to see the BlackBerry 10 theme added. This enabled developers to create visually compelling applications with the BlackBerry 10 native look and feel. Now, with the release of Sencha Touch 2.3, we are delighted to announce significant BlackBerry 10 theme enhancements! These enhancements result in a great opportunity for developers who are building applications for the first time as well as those who are looking to port a Sencha Touch app to BlackBerry 10.
If you are new to Sencha Touch, it is an impressive JavaScript® framework based entirely on HTML5, CSS and JavaScript. It’s designed to bring an incredibly powerful set of components together to create rich mobile applications. 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.
Let’s take a look at the BlackBerry 10 UI features which are available in this release.
Action Bar
An action bar is an area along the bottom of the screen that gives you a compact way to include actions and tabs that apply to the screen. Here is more information about the Action Bar.
In order to create an Action Bar in Sencha Touch, we can use the toolbar and dock it to the bottom as shown below:
Action Overflow Menu
Action Overflow Menu contains actions that are less frequently used than actions that appear in the action bar. Here is more information about the Action Overflow Menu.
We need to use the Ext.ux.ActionOverFlowMenuButton to create the Action Overflow Menu and dock it to the right as shown here:
Context Menu
Context menus give users a quick way to access the most common actions for an item. Here is more information about the Context Menu.
We need to use the Ext.ux.ContextMenu to create the Context Menu and dock it to the right. We also need to specify the width for the Context Menu, 55 is recommended. Here is the code snippet:
Application Menu (Swipe down menu)
Application menus hold important actions that are independent of context and common across the app (for example, Settings, Log out, and About). Here is more information about the Application Menu.
We need to use the Ext.ux.ApplicationMenu to create the Application Menu and pass in the items that we want to display and dock it to the top, as follows:
Tab Menu (side bar)
A tab menu is a vertically stacked, scrollable list of tabs, which can be used to hold less frequently accessed tabs. Here is more information about the Tab Menu.
We can use the Ext.ux.TabMenuButton to create the Tab Menu, pass the tab items you want to include in the Tab Menu and dock it to the left, as shown here.
BlackBerry 10 Icons
In addition to the above BlackBerry 10 native looking UI components, Sencha Touch 2.3 includes BlackBerry 10 icons, which can be used in your application to enhance the BlackBerry 10 native experience. To learn more about the BlackBerry 10 icons, refer to the “BlackBerry 10 Icons” section of the BlackBerry 10 Support document.
BlackBerry 10 Activity Indicator
You can replace the Sencha Touch’s default activity indicator with the BlackBerry 10 Activity Indicator. To learn more about this, refer to the “Using the BlackBerry loading indicator” section of the BlackBerry 10 Support document.
BlackBerry 10 Samples
You can find a BlackBerry sample included in the collections of samples provided with the Sencha Touch 2.3 SDK at <install path>/examples/blackberry. There will be more Sencha Touch sample applications leveraging the BlackBerry 10 theme coming to our BlackBerry samples repository soon. Stay tuned!
If you have a Sencha Touch application already and are looking to bring it over to BlackBerry 10, you’re in for a treat – you can bring your Sencha Touch application to BlackBerry 10 in just a few steps. Here is the complete porting guide and a developer video, which shows you step by step instructions to bring your Sencha Touch application to BlackBerry 10.
About BlackBerry
BlackBerry is an enterprise software and services company focused on securing and managing IoT endpoints.
