List Component

The list is an essential UI component for almost all applications and Sencha Touch provides a list component that is ideal for presenting an index-style list of items. With the release of Sencha Touch 2.2, the scrolling of the list component has been greatly optimized and improved. The scrolling performance of the list averages about 35-40 frames per seconds on the BlackBerry 10 web platform. Here is a short video demonstrating the scrolling performance of a list with 60 items, with each item containing texts and images.

Tab Panels

Tab Panels are a great way to allow the user to switch between several pages. The touch responsiveness has been tuned specifically for the BlackBerry 10 platform and the transition between screens has been optimized as well. Here is a short video of the tab panels in action.

Navigation View

Navigation View is a great way to switch views within an application, which provides a stack of UI containers that you can push in and pop off. In Sencha Touch 2.2, additional work was done to make these perform even better in the BlackBerry 10 environment. Users can switch views of an application and move between screens without any delays. The transitions between views and screens are smooth and provide a great user experience. Here is the video clip of an application which uses the navigation view.

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. Today’s Sencha Touch release not only brings support for BlackBerry 10, but continues Sencha’s support for the BlackBerry® PlayBook™ tablet. 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.

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.

If you have an application which was created using Sencha Touch 2.0 or Sencha Touch 2.1, upgrading to Sencha Touch 2.2 is as easy as changing the CSS and Java Script references. This way you can leverage and take advantage of the performance optimization that this release provides. For more information on updates and changes that might impact your upgrade, see the What’s New guide.

We’ve been working the last few months with the team at Sencha to bring the support for BlackBerry 10 out of beta and ready to be used by developers.  We’re glad to announce with Sencha that the wait is over! Performance and a full BlackBerry 10 theme are here for BlackBerry 10.  Now, you can develop visually compelling applications using components in Sencha Touch 2.1.1 without worrying about the performance. The Webkit rendering optimization from the BlackBerry 10 Web platform combined with the Sencha’s performance optimization resulted in great venue for the developers who are developing this application for the first time. Additionally, these optimizations will also help developers who have already developed a Sencha Touch application and are looking to bring it to the BlackBerry 10 platform.

If that wasn’t enough by itself, we are very happy and excited to announce that the latest Sencha Touch release has the full support for BlackBerry 10 theme.  As mentioned at BlackBerry Jam 2012, Sencha is committed to supporting BlackBerry 10 and we’ve been working together with their team to bring these new visuals to their product. With this theme support you can start building BlackBerry 10 themed HTML5 applications using Sencha Touch to give your application the BlackBerry 10 native look and feel. Sencha and BlackBerry are committed to delivering the best platform for building BlackBerry 10 applications with open web standards. The latest Sencha Touch release delivers the BlackBerry 10 native look and feel to most of the UI components such as Forms, DataView, Carousel, List, TabPanel, NestedList and Navigation View. Let’s take a closer look at some of these UI components, styled for BlackBerry 10.

Form Elements

Form Elements are one of the most common mobile UI elements, and a building block for many applications, and Sencha has given that native BlackBerry 10 look and feel to them. So, if you want your application to look and feel like a BlackBerry 10 application, you should definitely take advantage of these form elements.  The input adapts to the virtual keyboard as well.  If you have an input type of password or email, keyboard changes configuration to match the input type using standard HTML5 integrated elements.

Action Bar

Sencha Touch also includes BlackBerry 10 specific components. The first one we’ll look at is the action bar at the bottom.  The action bar is a styled Sencha Tab Panel and it’s designed in a way that you can switch between pages very easily and this is the same type of design you see in the BlackBerry 10 native applications. You can see this same sort of design with other frameworks, and Sencha has brought the same design to be used for BlackBerry 10 developers.  As you can see, it adapts whether you are in portrait or landscape.

CrossCut Menu

In addition to above, the BlackBerry 10 CrossCut menu is also supported by the BlackBerry 10 theme as a new Sencha Touch component. As a developer, you can leverage the CrossCut menu component to create compelling BlackBerry 10 style application using just web technologies and give the native BlackBerry 10 look and feel to the app.  If you’re interested in using the component, it’s the new Ext.bb.CrossCut component (xtype: crosscut). Here is the code snippet, which shows how to use the CrossCut component with in the Sencha Touch framework. The complete reference for the CrossCut menu is available here.

To enable the BlackBerry 10 theme, refer to the Sencha blog post for instructions.

If you are new to Sencha Touch, it is an impressive JavaScript® framework based entirely on HTML5, CSS and JavaScript, and designed to bring an incredibly powerful set of components to create rich mobile applications. Today’s Sencha Touch release not only brings support for BlackBerry 10, but continues Sencha’s support for the BlackBerry® PlayBook™ tablet.  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.

If you have a Sencha Touch application already and looking to bring it over to BlackBerry 10, stop worrying.  You can bring your Sencha Touch application to BlackBerry 10 in few steps.  Here is the complete porting guide and the developer video, which shows you step by step instructions to bring your Sencha Touch application to BlackBerry 10.

At BlackBerry® DEVCON 2010, we were honored to have the CEO of Sencha, Abe Elias, join us on stage during the keynote to showcase their new CSS3 tool: Sencha Animator. As part of our work with the great folks at Sencha, they pledged to bring the Sencha Touch Mobile JavaScript Framework to the BlackBerry platform.

I am very pleased to announce today that Sencha has released an update to their Sencha Touch Mobile JavaScript Framework that brings support for the BlackBerry® 6 operating system. For those unfamiliar with Sencha Touch Mobile JavaScript Framework, it is an impressive web framework based entirely on HTML5, CSS and JavaScript® that is designed to bring an incredibly powerful set of components to help create web apps that look and feel like native applications. The Sencha Touch Mobile JavaScript Framework 1.1 release today not only brings support for BlackBerry 6-enabled touch devices such as the BlackBerry® Torch™ 9800 smartphone, but it also supports the upcoming BlackBerry® PlayBook™ tablet.

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.

To help encourage our developer community to adopt the Sencha Touch web framework, I am pleased to offer a free BlackBerry Torch 9800 smartphone to the first ten developers that submit an application to BlackBerry App World™ storefront using the new framework for either the BlackBerry Torch 9800 smartphone or the BlackBerry PlayBook tablet. Restrictions apply. See the Terms and Conditions for complete offer details.