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.

We’re very pleased to announce that Sencha has released an update to their Sencha Touch framework that brings beta support for the BlackBerry® 10 operating system. For those unfamiliar with Sencha Touch, it is an impressive JavaScript® framework based entirely on HTML5, CSS and JavaScript that is 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 it also supports the BlackBerry® PlayBook™ tablet.

Sencha Touch includes all of the core concepts around Controllers, including refs, control and routes as well as Device Profiles, which enables you to easily develop applications that can present customized UIs on BlackBerry 10 devices and BlackBerry PlayBook tablet. In terms of components, Sencha touch 2.1 supports all the major components which helps you to develop compelling application for the BlackBerry 10 Platform. Sencha Touch supports Forms, DataView, Carousel, List, TabPanel, NestedList and Navigation View, and the BlackBerry 10 specific CrossCut component.

While Sencha Touch 2.1 includes key upgrades such as significant performance improvements, a new and improved charting and data visualization package, a new infinite list component, and enhanced native support through the Sencha Mobile Packager, the most relevant upgrade to BlackBerry platform is the new BlackBerry theme and the new CrossCut component.

With over fifty built-in components, state management, and a built-in MVC system, Sencha Touch provides everything you need to create immersive applications for the BlackBerry 10 and BlackBerry PlayBook tablet platforms. Sencha Touch also provides access to local hardware services like geolocation and accelerometers as well as system services like localStorage, which allow developers to take advantage of hardware features. For more information on Sencha Touch 2.1, visit their website.

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. For the complete BlackBerry guide to Sencha Touch, refer to
http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Introducing-Sencha-Touch-2-1-on-BlackBerry10/ta-p/1976695

Last month, we looked at how to internationalize your BlackBerry® Java® application. In this post, we will look at how to internationalize your BlackBerry® WebWorks™ application. There are a few options for accomplishing this – let’s take a look.

Using JavaScript and storing all the texts locally

One common way to internationalize your web application is to remove all strings from your code and have them all in an object with key-value pairs. All the code exists locally and nothings get stored on the server side.

This looks something like:

var strings = {
	"en" : {
		"BUTTON_CANCEL" : "Cancel",
		"BUTTON_SAVE" : "Save"
	},
	nl: {
		"BUTTON_CANCEL" : "Annuleer",
		"BUTTON_SAVE" : "Opslaan"
	}
}

Now let’s assume you keep the chosen language somewhere in a variable called language. You can then access the right string for the user language, like with the cancel button text for example:

Strings[language].BUTTON_CANCEL

That will give you either ‘Cancel’ or ‘Annuleer’ depending on whether the language variable contains ‘en’ or ‘nl’.

Using JavaScript and storing all the texts on a remote server

Another way of internationalizing your application in BlackBerry WebWorks platform is to use the server side code. Unfortunately, JavaScript does not have the concept of a resource file, and strings that will be generated by JavaScript must be defined in the code.

The easiest approach to deal with this issue is to define your JavaScript strings dynamically in server-side code (Java/JSP, ASPX, PHP, etc.). The following example defines some string resources in a JavaScript script block at the top of a JSP page:

Assuming the currentLocale object is set to English (US), the resulting block should look like this:

When currentLocale is set to German (Germany) it should change to this:

There are a couple things to keep in mind with this approach. First, any strings that are embedded in the files, whether JSP/ASPX/PHP/etc. or JavaScript .js files, must be externalized, i.e. the strings should be moved into the string resource block as demonstrated above, and replaced in the code with their variable names. Second, the JavaScript string resource block should be defined before any other embedded blocks or .js file includes that make use of these externalized strings. For example, the resource block should be defined before the following function is called:

Using JavaScript Object Notation (JSON)

Finally, another way to add multi-language support to your BlackBerry WebWorks application is to use JSON objects. Here is a sample which illustrates the use of JSON objects and changes the text dynamically based on the user’s language selection:

<html>
<body>
<h2>Internationalization Sample in WebWorks</h2>
<h3>Select a language:</h3>
<p>

<select id="languagechoice" onChange="displayGreeting()" >
  <option value="1">English</option>
  <option value="2">French</option>
  <option value="3">Spanish</option>
  <option value="4">German</option>
</select>

<br/> 
<br/>
<br/>

 <span id="greetings"></span> <br/>
</p>

<script type="text/javascript">

function displayGreeting(){

 var lang = document.getElementById("languagechoice");
 var lang_value = lang.options[lang.selectedIndex].value; 

 var JSONObject_en = {"hello":"Hello, Welcome to Internalization of WebWorks Applications in English!"};
 var JSONObject_fr = {"hello":"Hello, Welcome to Internalization of WebWorks Applications in French!"};
 var JSONObject_es = {"hello":"Hello, Welcome to Internalization of WebWorks Applications in Spanish!"};
 var JSONObject_de = {"hello":"Hello, Welcome to Internalization of WebWorks Applications in German!"};

 if(lang_value == 1){
   document.getElementById("greetings").innerHTML=JSONObject_en.hello 
 }
 else if (lang_value == 2 ){
   document.getElementById("greetings").innerHTML=JSONObject_fr.hello
 }
 else if (lang_value == 3 ){
   document.getElementById("greetings").innerHTML=JSONObject_es.hello
 }
 else{
   document.getElementById("greetings").innerHTML=JSONObject_de   .hello
 }
}

</script>

</body>
</html>

• Multiple language support
• Localization of currency
• Localization of addresses
• Detecting which country the user is located in (in the event that you have certain content that you only have license to serve in certain geographies)

In this blog post, we will look at the multiple language support in detail – the rest of the above topics will be covered in upcoming blog posts here on the Inside BlackBerry Developer’s Blog.

All commercial applications these days should be localized, and BlackBerry uses net.rim.device.api.i18n package to enable seamless localization.

If your application is localized, it will be displayed in the local language out of the box. So if the default locale settings on one device are set to English and French on the other, the application will be displayed in the correct language on both devices without any need for interaction from the user.

Setting up a New BlackBerry Project

This blog post assumes that you should already know how to set up and configure a new BlackBerry project in Eclipse™. If you need a reminder, refer to this link.

Here is a sample code to show how to localize a simple application:

package com.rim.samples.local;

public LocalScreen() {
super();
title = new LabelField(_res.getString(FIELD_TITLE), LabelField.ELLIPSIS| LabelField.USE_ALL_WIDTH);
setTitle(title);
rtf = new RichTextField(_res.getString(MESSAGE));
add(rtf);
}

If you read the code carefully, you will notice that our LocalScreen class implements LocalDemoResource. Also new is the ResourceBundle variable _res which is used when creating our fields. To be able to use and explain them, we will first create our resource files.

Creating resource files

To be able to localize your application, you need to create .rrc and .rrh files. It is quite easy to create these files in Eclipse. Click on File->New->BlackBerry Resource File and browse to the location of your package. You will need to name your header file here — let’s call this file LocalDemo.rrh (make sure you include the extension). Pressing Finish on this screen will now allow you to implement LocalDemoResource interface.

If you called your .rrh file “exampleResource.rrh”, then the interface name would be exampleResource. Now we need to create resource files for each language:

For default language: LocalDemo.rrc
French: LocaLDemo_fr.rrc
Spanish: LocalDemo_es.rrc.

The parts of the name _fr and _es are default endings for those languages and cannot be changed.
If you did everything correctly, you should have 4 resource files just under your Local.java file. Now we need to edit these files. Double click on the LocalDemo.rrh file — this is the one which contains all the keys. Select the ‘Add Key’ Button and add the following fields:

CLOSE, ENGLISH, FIELD_TITLE, FRENCH, GOODBYE, MESSAGE, SPANISH.

You do not need to enter the values on this page. When you double-click on the LocalDemo.rcc file, it will open the screen where you can fill in the values. You can access the values for French and Spanish locales by clicking on the tab on the bottom of the window (marked fr or es), or by double-clicking on the file name.

As you can see, special characters used in these languages such as ‘ó’ in word “adios” or ‘ñ’ in “Español” were used. The system will use those characters and display them when needed. You can use any Unicode characters here, which means you can support languages such as Chinese or Arabic.

And that’s it! That’s all you have to do add multiple language support to your BlackBerry application. For more info and to see a full working demo, refer to this link:

http://supportforums.blackberry.com/t5/Java-Development/Introduction-to-Resource-Bundles/ta-p/507362

The topic of battery management on BlackBerry® smartphones seems to come up time and time again. I decided to take some time and write this blog post on the topic to share some of the tips, tricks and best practices which will make your BlackBerry application a good citizen on the BlackBerry smartphone. Hopefully, you’ll learn some simple techniques to improve battery life and to get some vital stats about the cost of certain actions in an application.

Generally, there are three main states that your BlackBerry application will go through in the device:

1. App is in the foreground, backlight is on, and device is unlocked (i.e. user is in theory interacting with the app)
2. App is in the foreground, and either the backlight is off or the device is locked (i.e. user was using the app but has since let the device go dormant)
3. App is running in the background (backlight and device lock state don’t matter)

We will not worry too much about the first state, since your application can use as much as battery power it needs, but we will focus on the second and third states, looking at possible ways to prevent the battery from draining too quickly. Here are some of the tips that you can use to make your application be a good citizen on the device.

Tip #1: If your application is running in the background, then only run what needs to be run. For example, when your application is in the background, threads such as UI, animation and media should be paused. Your application should treat itself as being in the background when the backlight is out or the lock screen is up. One way of identifying whether device is locked or not, is to use the net.rim.device.api.system.ApplicationManager. IsSystemLocked () method. You can also use the net.rim.device.api.ui.UiApplication.getUiApplication ().isForeground () method to determine if the application is in the foreground or not.

Finally, you can use net.rim.device.api.system.Display.getProperties () & Display.DISPLAY_PROPERTY_REQUIRES_BACKLIGHT to see whether the backlight is on or not.

Tip #2: Use the Profiler in the BlackBerry Java IDE to confirm that you contribute as close to 0% extra CPU usage when in the background. Every few % CPU used equals about 5 mA above device idle. Read more information about the Profiler and its usage.

Tip #3: Watch the repaint () operations, regardless of whether application is in the background or foreground, repaint the screen only if and when needed. Especially, if you are rendering OpenGL, it is very battery intensive.

Tip #4: Retrieving an autonomous GPS (aGPS) fix is one of the most expensive battery operations on the device. Alternatively, you can use BlackBerry Criteria to specify the type of fix you need and also you can choose the level of accuracy you need. The details on this subject can be found here.

Tip #5: If you detect low battery, consider notifying the user or stopping battery intensive functions such as LBS, excessive logging, active cellular radio and garbage collection.

For logging, you can the log level to minimum in the Event Logger. This can be achieved using net.rim.device.api.system.EventLogger. getMinimumLevel ().

For cellular radio, you can use push instead of poll. Pushing is vastly more efficient than polling. Whenever you see your application polling regularly for data you should seriously consider implementing the BlackBerry Push service.

For garbage collection, you can use the BB JDE’s Memory Stats or Objects tools to monitor your garbage.

I hope you found these tips useful. If you have your own, I’d like to see them – please share in the comments section below.

For all you hard-working developers out there, the BlackBerry® Smartphone Simulator is an essential tool: it enables you to run BlackBerry® smartphone applications on your computer. The BlackBerry Smartphone Simulator includes the BlackBerry native applications that are typically available on BlackBerry smartphones, and enables you to load and test your own applications. You can even simulate and test various connectivity and state changes – definitely useful when you’re trying out a new app! When you use the BlackBerry Smartphone Simulator to perform testing, you might need to simulate additional BlackBerry services; the BlackBerry® Email and MDS Services Simulator Package are available for this purpose.

In short, the BlackBerry Smartphone Simulator allows you simulate all the aspects of the BlackBerry smartphone including battery conditions, network conditions, SD Card, GPS capabilities and more. In this post, I will briefly describe how to simulate some of the functionalities of the BlackBerry smartphone. Before we go further, let’s quickly recap where you can find the latest BlackBerry Smartphone Simulators. All the most up-to-date BlackBerry simulators can be found at the BlackBerry Smartphone Simulators page under the Developer Resources section of the website. You can also head here for the complete instructions on installation details, and you can find more detailed information on the BlackBerry Smartphone Simulators at the BlackBerry Documentation site.

How to Simulate Battery Conditions

1. On the Simulate menu, click Battery Properties.
2. Set one of the following options:

How to Simulate Network Coverage

The BlackBerry Smartphone Simulator can simulate various states of network coverage, from a strong signal to a very weak signal. The BlackBerry Smartphone Simulator can also simulate a loss of network coverage.

Add a network

1. On the Simulate menu, click Network Properties.
2. Click Add.
3. Type the network properties in the dialog.
4. Click OK.

Set the network signal strength

1. On the Simulate menu, click Network Properties.
2. Select the network you want to simulate from the Networks list.
3. If you want to edit the network properties, click Edit and type new values. Click OK.
4. Select or clear the In coverage check box.
5. Move the Signal strength (RSSI) slide bar to set a value. The signal strength can be between -120 dBm and -40dBm.

How to Simulate a Media Card

The BlackBerry Smartphone Simulator loads and saves the media card image to < session_name >*.sdcard in the working directory, unless you have set the /sdcard=< path > option. When the simulator starts, it loads the media card image for the BlackBerry smartphone profile. If no image exists or you have specified /clear-sdcard, the BlackBerry Smartphone Simulator will create a new media card image when the simulator starts. The size of the media card image is 32MB, unless you specify otherwise using /sdcardsize=< size >. In this case, you must clear the existing card image using /clear-sdcard to create a new card with the specified size. If a media card image exists, its size will be retained even if you specify a different size using the /sdcard-size command.

The BlackBerry Smartphone Simulator inserts the media card within the BlackBerry Smartphone Simulator unless you specify /no-sdcard-inserted.

Change the media card

1. On the Simulate menu, click Change SD Card.
2. Complete one of the following tasks:

How to Use Hotswap with the BlackBerry Simulator

Hotswap, the ability to reload an application on to a running simulator without having to stop and start the simulator, is now part of the 5.0 BlackBerry Simulator.

BlackBerry Smartphone JDE 5.0

In JDE 5.0, you need to change your Simulator preferences. Toggle the “Reuse Simulator” checkbox to on. (If the Reuse Simulator checkbox is grayed out, that simulator is not compatible with Hotswap.) Then, when debugging your application, you can change the code at any time and redeploy it without restarting the simulator by going to Debug > Restart or pressing Shift-F9.

BlackBerry® Java® Plug-in or BlackBerry® Web Plug-in

No changes are needed – you no longer need to close your simulator. While the simulator is open, simply make changes to your code and press debug – it will automatically redeploy the change to the running simulator.

Do you have any questions or comments about using the BlackBerry Smartphone Simulators? Please leave a comment and let us know!