The reason for this is that the container housing the content isn’t hardware accelerated by default; we can fix this simply by adding the -webkit-overflow-scrolling: touch; CSS property and instantly see the improvements:

• Smoother scrolling and support for much larger content sets.
• Visual bounce effect when scrolling at the edges of the list.
• More responsive touch / tap interactions.

It’s incredible; the difference that hardware acceleration makes. With one CSS flag you can leverage the power of the GPU within your applications too!

It’s with great pleasure that we announce the inclusion of BlackBerry® 7 and BlackBerry® 10 platforms to the resource site “When can I use…”.

When can I use… features tables that detail desktop and mobile browsers support of web standards such as HTML5, CSS3, SVG and more.

The BlackBerry Website Relations team worked very closely with Alexis Deveria (founder of “When can I use…” and a developer) to ensure all supported tags and values were properly tested. Alexis used our BlackBerry simulators (BlackBerry 10 WebWorks™  SDK and the BlackBerry WebWorks Smartphone SDK to complete the testing. RIM would like to thank Alexis for his efforts. His tests validated what we already knew – this is one great browser!

The idea was conceived and implemented at the BlackBerry Jam World Tour in Toronto, where Tim Neil (@brcewane) was scheduled to present. If you didn’t know, Tim is one of the main authors of bbUI.js. During one of the breaks, an attendee approached Tim with the idea of adding an independently scrolling panel to the bbUI.js. Funny thing is, Tim thought it was a great idea and produced the initial branch over lunch! Right there in front of us, the birth of a new feature.

I have been waiting for this feature for my application: ZenLottery. With ZenLottery, you can generate lottery numbers based on your location. One feature of ZenLottery is the ability to save the sets of generated numbers. If you can save the numbers, then you should be able to delete them as well. The design called for the numbers to be displayed and a delete button at the bottom. Without the Scroll-Panel feature, the delete button may be off the bottom of the screen, if the user chooses to generate more than 8 sets of lottery numbers.

That’s not a good user experience. How do they even know the Delete button is there? The solution is to have a scrollable panel for the sets of numbers. Then, the user can scroll through the numbers without losing the Delete button off the bottom of the screen. With the new scroll-panel feature in bbUI.js, I was ready to rock n’ roll!

The code for showing the sets of numbers is pretty simple. There are two divs: the outer and the inner div. The two divs work together to make sure the numbers are centered on the screen:

<div class="centerOuter">
<div id="numberDiv" class="centerInner"></div>
</div>

For completeness, here’s the centerOuter and centerInner CSS:

.centerOuter
{
width: 100%;
text-align: center;
}

.centerInner
{
display: inline-block;
}

As with the other elements in the bbUI.js, the scroll-panel is a div that gets a special tag. The tag used is data-bb-type and the value is “scroll-panel”. I figured I would add this to the outer div and all would be grand:

<div data-bb-type=”scroll-panel” style=”height: 800px” class="centerOuter">
<div id="numberDiv" class="centerInner"></div>
</div>

Notice I also added a style tag to specify the height of the panel. This style tag limits the height of the div and helps to create the scrolling affect I wanted. Now the numbers could scroll and the delete button could stay put. However, there was an unforeseen side effect: I lost the centering of the numbers.

It turns out that the only formatting you can add to the scroll panel is style=”height: ###px”. This tag is necessary so the panel knows its boundaries. Without this style, the panel would occupy the whole screen. At first I thought: no center, bummer. But not to worry! There is a simple solution: keep the centerOuter and centerInner divs the way they were and add the scrolling panel as a wrapper:

<div data-bb-type="scroll-panel" id="scrollPanel" style="height: 800px">
<div class="centerOuter">
<div id="numberDiv" class="centerInner"></div>
</div>
</div>

Voila! I now have the centered, scrollable sets of numbers while the delete button stays right where it is. Groovy!

The BlackBerry 10 WebWorks SDK allows web developers to create first class BlackBerry applications using familiar web technologies such as HTML5, CSS, and JavaScript®, and extend their application with deep integration into the full device platform. It is the evolution of the BlackBerry WebWorks SDK, built on the foundations of the BlackBerry WebWorks SDK for smartphones and the BlackBerry WebWorks SDK for Tablet OS.

First introduced on the BlackBerry® 5 OS and supported on all OS versions and devices since, BlackBerry WebWorks allows a developer to package their web content into the native application format, leveraging all the benefits of the BlackBerry platform including security and distribution through the BlackBerry App World™ storefront. With the WebKit-based HTML5 browser environment provided by the platform, BlackBerry WebWorks developers have full access to many powerful HTML5 APIs and CSS3. Further, BlackBerry WebWorks provides a set of JavaScript APIs that allow the developer to extend their web content out of the browser with platform functionality such as BlackBerry® Messenger SDK, Payment Service, PIM (email, contacts, and calendars), file access, and so on.

For the BlackBerry smartphone, the BlackBerry WebWorks APIs were built on the native Java platform, and for Tablet OS, on top of the Adobe® AIR® SDK. With BlackBerry 10, it was obvious that BlackBerry WebWorks needed to leverage the full power of the new BlackBerry 10 Native platform built on C/C++ and Cascades™. This gave us an opportunity to look at BlackBerry WebWorks with fresh eyes and determine the best route forward. Let’s take a look at the different pieces that make up BlackBerry WebWorks and how we have been able to improve on the platform with the power of BlackBerry 10.

The Packager

This is the piece of the SDK that takes you application content and packages it up into a .BAR file for distribution in BlackBerry App World™, and is the file that is installed onto the device. For BlackBerry OS and Tablet OS, the packager was implemented in Java, which required the developer to have the JDK installed on their machine. For BlackBerry 10 WebWorks SDK, we have re-implemented the packager in pure JavaScript, which runs in an instance of Node.js included with the SDK. BlackBerry WebWorks developers have minimal external dependencies required to get their development environment setup.

One thing to note is that the packager now creates two binary outputs, one for the device and one to be used in the BlackBerry 10 simulator. This is because the BlackBerry WebWorks runtime is now backed by the native platform, and there are different instruction sets for the OS on desktop environments versus the device platform.

The Framework

The framework is the code that wraps around your web content, and is run on the device in order to orchestrate the platform and provide your runtime environment. For BlackBerry OS, the framework was in Java, and for Tablet OS it was Adobe AIR. Similar to the packager, and enabled by the underlying platform providing in essence a JavaScript runtime environment, we have re-written the framework in JavaScript.

Since the framework is in JavaScript, developers will need to include this JavaScript code into their web content for their application. Just add a very simple script tag to all your pages:

<script type=”text/javascript” src=”webworks.js”></script>

Webworks.js is the framework code that handles all of the BlackBerry WebWorks whitelisting logic and injection of allowed APIs for the current domain into the current page. The webworks.js file is included in the BlackBerry WebWorks SDK in the framework\clientfiles directory and should be copied into your application content.

Since script loading can occur asynchronously, we have provided an event that you must listen to before accessing any BlackBerry WebWorks APIs. The framework will trigger this event once it is done initializing the BlackBerry WebWorks framework and APIs. Here is an example of the webworks script file definition and webworksready event in action:

<html>
<head>
<script type=”text/javascript” src=”webworks.js”></script>
<script type=”text/javascript”>

window.addEventListener(“load”,
function() {
document.addEventListener(“webworksready”, start);
}, false);

function start() {…}

While the webworks.js file did not exist and is not required for BlackBerry OS or Tablet OS WebWorks SDKs, you can leave the script inclusion line in your application even on these platforms. If your application is not running on the BlackBerry 10 platform, the webworksready event will fire almost right away, and none of the rest of the BlackBerry 10 framework logic will execute; your app will run in the context of the standard BlackBerry OS and Tablet OS WebWorks frameworks.

Config.xml

For this first Beta of the BlackBerry 10 WebWorks SDK, we have implemented most of the existing elements of the configuration document. There are a few elements that will come in the future along with some new additions required to support some new BlackBerry 10 features. Not to worry if you use new elements or have elements that are not yet supported in BlackBerry 10 WebWorks, as the packagers for all platforms will ignore elements they don’t recognize. Please check the documentation for details on the config document.

APIs

APIs for BlackBerry WebWorks have two components to them: JavaScript that runs in the browser environment, and a “native” component that interfaces with the rest of the platform, allowing for the deep integration that provides the full power of BlackBerry WebWorks. Again: Java for smartphones, Adobe AIR for BlackBerry® PlayBook™ tablets. For BlackBerry 10, of course, native is C/C++. So we have to re-implement all the APIs, and will be delivering them incrementally with Beta refreshes over the summer.

In this initial Beta release, we have been able to provide a core sub-set of the full WebWorks API, which is documented on the BlackBerry HTML 5 site, including Identity, Application and App events, System and system events. On a monthly cadence, we will be releasing new Beta bundles of BlackBerry WebWorks with net new APIs, such as Push, File and File Transfer, Audio/Video Capture, etc.

Apache Cordova

The nature of HTML5 is that it is prevalent on most platforms and devices. Apache Cordova (which is the basis of the well-known PhoneGap) is an industry-leading cross-platform framework very similar to BlackBerry WebWorks. We are striving to bring BlackBerry WebWorks and Cordova closer together, and are actively part of the Cordova open source project providing contributions. To begin down this road, we are aligning some of our BlackBerry 10 WebWorks API signatures with Cordova API signatures. Existing WebWorks applications may require some refactoring to target BlackBerry 10, but Cordova/PhoneGap is supported on BlackBerry OS and Tablet OS, so you can take advantage of these APIs on older operating systems.

For example, event APIs have changed. For BlackBerry smartphones or Tablet OS, if you wanted to listen for battery level changes, you would do something like this:

function onBatteryLevelChange(level) {
alert("Battery Level: " + level);
}
blackberry.system.event.deviceBatteryLevelChange(
onBatteryLevelChange);

For BlackBerry 10 WebWorks SDK, we have introduced an Event API with a signature like your typical add/removeEventListener:

function onBatteryStatus(status) {
alert("Battery Level: " + status.level +
“ isPlugged: “ + status.isPlugged);
}
blackberry.event.addEventListener(“batterystatus”, onBatteryStatus);

The “blackberry.event” feature id would be used in your config.xml file for whitelisting purposes. You will notice that, if you replaced “blackberry.event” with “document” or “window”, you have the Cordova/PhoneGap API signature.

Please check out the BlackBerry WebWorks development site to learn more about how you can be part of the first wave of applications for the BlackBerry 10 OS by leveraging your web technology skills, while continuing to target our over 75 million smartphone subscribers and BlackBerry PlayBook tablet users.

“Rules can be broken, but not ignored” – a truism that most assuredly applies to mobile web design. In this post I’m going to use the BlackBerry Management Center site as an example of how we revisited the mobile user experience of one of our websites, and how (I hope) you can learn from our reorientation of BlackBerry Management Center.

First, some background: BlackBerry Management Center is a web-based mobile device management service for small businesses. It has a website for use by both an administrator and device (handheld) user. Our requirement was to design a mobile version for BlackBerry smartphone users, targeting WebKit browsers, specifically BlackBerry® 6+ OS browsers on handhelds. The following are the design heuristics and the decisions we made.

Use a Separate Mobile Theme

We approached the mobile site as a theme separate from the website, making a conscious decision to not scrape the website and directly translate UI elements to fit them into a mobile screen. Instead, we created a new, more compact CSS for the layout. We opted for minimal JavaScript® and no third-party JavaScript libraries, which resulted in a smaller client-side download.

Make it Simpler

We knew from the beginning that the BlackBerry Management Center mobile site should have a simplified design and functionality. Starting from a blank slate, we asked what goals the user needs to achieve on a mobile device, and then designed the information architecture, thought through the interactions and UI elements, created the layout, and mapped the navigation. We removed menus, eliminated graphic elements, and cut most of the verbiage. With minimal JavaScript and no third-party libraries, the UI became simpler and the user did not have to download large JavaScript libraries over a cellular connection. Short and simple was our mantra here!

Limit the Number of Links

The rule of thumb is to limit links to 10 per page since too many links make it difficult to navigate and read content. We also placed links flushed left for a better experience by ensuring that the eye scans the page in two directions (top/down) only instead of four (top/down/left/right).

Optimize Navigation

To avoid zooming in every time a user wants to click on something, we made all fonts two points bigger than the website version of BlackBerry Management Center. Trying to click on tiny, barely-visible links is a real pain, so we also added extra padding for our links to make the clickable area greater.

Limit Scrolling to One Direction

Most users find it annoying to have to scroll in multiple directions on a page when on a desktop, and it’s easy to accidentally scroll the wrong way (horizontally or vertically) when using a touchscreen or a trackpad. We eliminated this hassle by fitting the content so that the user is limited to scrolling vertically whether in portrait or landscape mode on the mobile device.

Don’t Use Pop-Ups or Open New Windows

The website uses modals to display more detail or to display confirmations to the user. Pop-ups and new windows interfere with the browsing experience, so we got rid of this completely on the mobile version. Instead, we give user feedback by providing confirmation text inline.

Minimize the Use of Images

The BlackBerry Management Center website has a very rich UI with graphics, which means more processing and rendering that could be taxing to the system. A quick test of the mobile version versus the website (with minimal images and no pop-ups) showed a 60% performance improvement. This is significant since mobile devices have smaller bandwidth on cellular networks. We decided to leave the BlackBerry logo and eliminated images that served no added purpose other than to look pretty.

Provide the Option of Visiting the Standard Site

We decided against this option because switching from mobile to the full site would limit the UI on the phone. Unlike most sites, the BlackBerry Management Center device user experience is a flow from one state to the next as the user enters information about their device. There is also no value gained by switching to the full site from the mobile version because it already covers a majority of the functionality.

Use a Separate Domain or Subdomain

We did not register a separate domain for the mobile version. Once a mobile client is detected through its user agent, it is served the mobile version within the same domain. As mentioned above, the mobile version has full user functionality and the user would not need to switch to the full site.

Conclusion and Lessons Learned

From the beginning, we should have designed for the mobile device in parallel with the standard website. If we had the mobile version in mind from the get-go, the user experience would be more seamless and less jarring. Testing was quite a challenge, despite focusing mainly on BlackBerry browsers 6 and above. Creating a flow diagram and click stream helped during the design process; prioritizing content and deciding on what is essential proved to be an important exercise as well. Finally, a clean, semantic markup, along with separation of our content and presentation with CSS provided a solid foundation for a usable mobile site. Once the framework was set, we were off to a great start.

Good luck to you on your next mobile web design project! Let us know how it goes.

Further Reading

W3C Mobile Web Best Practices
Mobile Design and Development

Jim Tobin, SVP of the Software, Services & Enterprise Markets business unit at Research In Motion® (RIM®), has a great blog post on Inside BlackBerry highlighting the benefits of our recent platform announcements for customers and developers. For your convenience, we’ve pulled out the developer-related information. Click the link at the end to read Jim’s full post!

We recently announced plans to enable developers to leverage existing assets for the BlackBerry® Java® Development Environment and Android® platforms to be easily ported to the BlackBerry® Tablet OS via ‘application players’. The application player for supported Android apps will be available this summer, followed soon after by the application player for supported BlackBerry JDE apps. Both will be available through the BlackBerry App World™ storefront.

What does this mean for Developers?

• For the majority of developers, the way to go is still the BlackBerry platform and the widened set of tools we’ve made available. Only these can ensure that the developer harnesses the full power of the BlackBerry PlayBook tablet in terms of extremely rich graphics, full multitasking, and ultrafast processing. BlackBerry smartphone development options include the BlackBerry® WebWorks™ platform. BlackBerry WebWorks offers leading HTML5, CSS3 and JavaScript support on a mobile platform. The BlackBerry WebWorks platform also supports modern web frameworks such as Sencha, PhoneGap, jQuery and Dojo.
• BlackBerry PlayBook tablet development options currently include BlackBerry WebWorks as well as Adobe® (Flash® and AIR®).
• RIM will add full tooling support for native C/C++ development for the BlackBerry PlayBook tablet over the coming months. We’re highly confident about this. The QNX team RIM acquired to develop our BlackBerry Tablet OS has won awards for its Eclipse-based native Integrated Development Environment (“IDE”).

Because of the app players we’re providing, if there are developers currently developing for the Android platform, they can now rapidly move onto our platform while they evaluate our other development paths. We can now offer such developers an on-ramp to package and distribute their apps to our growing customer base of consumers, enterprises and governments.

Going forward, we will continue to evolve our various development technologies to deliver the most powerful, flexible and open experiences for developers whether they choose to build with HTML5, Java®, Adobe Flash, Adobe AIR, or native C/C++. And for those developers using our BlackBerry platform tools, we will continue to offer access to a growing set of on-device API’s to enable best-in-class integration with core BlackBerry applications and features (which we call “Super App” experiences). We are also planning to provide a range of advanced cloud-based services including the BlackBerry Payment and Advertising Services, advanced location-based services, application analytics, and powerful Push services. Stay tuned for more details on these future release plans.

Read the entire post on the Inside BlackBerry Blog »

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.

[ YouTube link for mobile viewing ]

One of the most popular bootcamp sessions during BlackBerry Developer Day at Mobile World Congress 2011 was the BlackBerry WebWorks platform session. In the video above, I talk with fellow blogger Adam about how BlackBerry WebWorks makes it easy for web developers to make BlackBerry smartphone and BlackBerry PlayBook tablet applications quickly using HTML5 and CSS (as The Astonishing Tribe demonstrated earlier in the week). Below are some worthwhile BlackBerry WebWorks related links.

BlackBerry WebWorks SDK For BlackBerry Tablet OS
BlackBerry WebWorks Webcast Series (with Sample Code)

[ YouTube link for mobile viewing ]

Following the BlackBerry Developer Day App Circus at Mobile World Congress 2011, Director of Developer Relations, Mike Kirkup, was able to give me a brief look at a BlackBerry PlayBook application developed by The Astonishing Tribe that demonstrates the power and flexibility of BlackBerry WebWorks platform.

The “aura” application shown in the video above demonstrates rich graphics and physics engine similar to TAT’s “scrapbook” demo, but was built entirely with web technologies like HTML5 and CSS. Built in a week, “aura” demonstrates how web developers can leverage the professional grade performance of the BlackBerry PlayBook platform just like Adobe AIR and native application developers.

This is a perfect example of why developers packed the BlackBerry Developer Day WebWorks bootcamp sessions yesterday. Click the link below to download the BlackBerry WebWorks SDK and start building your own BlackBerry PlayBook Application!

BlackBerry WebWorks SDK For BlackBerry Tablet OS

If your background and skills are in using web technologies like HTML5, CSS and JavaScript®, then this is the platform for you! The platform extends some of the native device capabilities like system utilities, dialogs, and invoking other apps on the device and makes them available for you to use in your applications – helping them to become Super Apps!

Remember: this is still early access and the product team will be adding more and more capabilities from now until the launch of the device. The design and architectural principles for the BlackBerry WebWorks platform on the BlackBerry PlayBook tablet were to keep as much in common as possible with the BlackBerry WebWorks platform on BlackBerry® smartphones. This means that apps written on one will work on the other; however some modification might be needed depending on the underlying device capabilities. For example the tablet may have characteristics like bringing up a native dialog box including various options like the size and appearance of the dialog on the PlayBook’s screen that aren’t on the smartphones. However, all of your HTML5, CSS and JavaScript code should all be compatible.

Also, we’ve released the source code to the BlackBerry WebWorks SDK on the BlackBerry PlayBook tablet – please check it out and join the open source project. This is an opportunity for the larger developer community to get involved in shaping the future of this platform and tooling. So get involved!

And lastly, all BlackBerry PlayBook WebWorks applications that are submitted to BlackBerry App World™ are eligible for a FREE BlackBerry PlayBook tablet! To submit your apps, please go here, and see the terms and conditions here. To keep in touch with all the announcements and release information related to the BlackBerry PlayBook tablet, please enter your information here.

Thanks for your support!