Have you ever used that cool button on your BlackBerry® PlayBook™ tablet Browser that looks like a book? It’s the icon in the top left that enables Reader Mode. This is a neat feature which takes away all the advertisements and extraneous features from the page and shows you a clean summary of the content. Today I wanted to tell you about how this feature came to be, how we optimized its performance, and how it would not have been possible without BlackBerry® Web Inspector.

Using some clever JavaScript®, we created a mechanism that extracted the page contents and stripped out unwanted HTML. The problem was that it took a really long time to parse a page and display the content — or so we thought. We knew that this would not be a good user experience and the page load time needed to be optimized, especially when compared to the better performance we observed for the same content running in a desktop browser.

As I started my investigation, I wanted to look at the JavaScript to see how it worked so I could start to tweak it, and I thought to myself, “I should use Web Inspector to profile this.” I didn’t know it yet but this idea would save me lots of time and effort to get the feature working.

After adding some profiling information to the script, I discovered that most of the code was already relatively fast. However, after it had reloaded the page in a new WebView, it was doing its removal of the unwanted tags on the live DOM. This incurred a whole page request with sub-resources and content that we were going to be stripped out as soon as the page loaded.

Instead of incurring a page load, I did a deep copy of the DOM using document.body.cloneNode(true), and then manipulated the HTML fragment off DOM. Finally I loaded the resulting HTML in a new WebView. The result of this change was an immediate gain in performance, reducing the amount of processing time from 45 seconds down to less than 5 seconds. But that wasn’t enough — no user should have to wait 5 seconds after hitting a button to see any results.

I then enlisted the help of a colleague, and we were able to optimize the script even further by making changes to our logging. If you log things in JavaScript inline via console.log(), they’re expensive. Instead, add your log message to a buffer and then print the results after the main processing is complete. The DOM was traversed several times during the algorithm’s run. We ended up using a TreeWalker instead of a for loop of document.getElementsByTagName(“*”) being used. With these simple changes and further optimizations to the script, we further reduced the page processing time from 5 seconds down to under 1.5, which in and of itself is still a gain of over 300%.

So in summary, we went from 45 seconds down to less than 1.5 seconds — an astonishing 3000% performance boost that we could not have done without Web Inspector running on device.

Lessons:

1. Add logs to your scripts for performance profiling, but buffer them and don’t print to console right away.
2. Don’t reload the page when you don’t need to. If you want to modify the DOM, use HTML fragments.
3. Profile individual methods and try different things. You’d be surprised how changing one line can make all the difference.

BlackBerry® Messenger (BBM™) is more than just chat! With the release of the BBM Social Platform, we have released a comprehensive set of tools to easily add the power of BBM to your app. This blog post is one in a series focusing on how to easily add social networking features to your app – and there’s no better time to use this knowledge to update your app so that it’s ready for submission to the 2011 BlackBerry® Developer Challenge (particularly the Most Addictive social app using the BBM Social Platform category).

People love to share their accomplishments with their peers. You can design your app to incorporate levels of recognition for various accomplishments by use of some sort of award (e.g. badge, statement, icon, trophy, et cetera). Incorporating awards in your app can be a great way to enable users to promote your app to their peers.

Awards generally consist of an icon and a text string and should convey why they were awarded. The BBM Social Platform easily enables achievement sharing as can be seen in the screenshot below, where you can specify the icon and text for the achievement. The platform then automatically groups them under your application’s custom profile box.

If achievements are not a good fit for your application, there are plenty of situations where users have content that they want to share with their friends that may be more suitable in their profile box as opposed to their status message. This could include their current location as a user travels, the current song a user is listening to, or the current book a user is reading. Other use cases include apps that leverage other platform services; for example, apps that are using BlackBerry Push Service may want to post updates for things like a win from a favorite sports team or an alert for extreme weather conditions. Apps that are using Payment Service for in-app purchase may want to allow the user to share items they bought which may encourage other users to purchase the same items. Alternatively, the achievements themselves, may not necessarily be application achievements but rather personal achievements, such as achieving a fitness or weight loss goal, a career goal, or even a financial goal. The possibilities are endless – and I’m sure you can find a way to leverage this feature in your application!

As a developer, all you need to do is pass an optional (but highly recommended) icon and a string to the platform and, provided that the user has given your app permission to post, the profile box will appear under your app for that user. The profile box is visible to all BBM users whether they have the app or not. Any user who clicks the box without having the app installed will be prompted to download it, expanding your user base through viral distribution. Users who already have the app installed will be prompted to launch it, increasing user engagement.

In the screenshot above, you can see that Nicole has a profile box entitled “Always Happy!” letting everyone know that the application (in this case the BBM SDK Demo) has seen fit to award her with this achievement. The code to accomplish this is seen below in Java® and BlackBerry® WebWorks™.

Java

UserProfile userProfile = platformContext.getUserProfile();
UserProfileBox profileBox = userProfile.getProfileBox();
if (profileBox.isAccessible()) // Ensure that we have permission to access the box
{
	// Each icon used by your application must have a unique ID
int iconId = 1;
EncodedImage icon = EncodedImage.getEncodedImageResource("smiley.png");
profileBox.registerIcon(iconId, icon);
profileBox.addItem(iconId, “Always Happy!");
// A third parameter, cookie (String), can be added to give your app context when launched via the BBMPlatformContextListener listener.
}

BlackBerry WebWorks

To access the tools and get information about other features of the BBM Social Platform, visit our BlackBerry Messenger Developer site. To access the complete sample app demonstrating the code shown here, check out the Knowledge Base article “BBM Social Platform – Drawing Users in with the Profile Box”.

Want to allow your app’s users to chat with their contacts without having to leave your app? Add BlackBerry® Messenger (BBM™) Chat! By integrating BBM chat directly into your app, you have the opportunity to create a community of BlackBerry® smartphone users who can get together to socialize and communicate. Adding this social aspect can help increase your app’s reach and maintain its presence, thereby increasing its “stickiness.” (A sticky app is one that users find so useful and engaging that they come back to it over and over again!)

Adding BBM Chat may also increase the discoverability of your app – when people like something, they want to share it with others. Because BlackBerry device users can communicate with any or all of their BBM contacts from within your app, you have a built-in advertising system.

Let’s take a look at a couple of examples:

• While viewing the latest sports scores in a sports news app, a user starts a BBM chat with fellow fan(s) in his contact list to discuss game highlights.
• While looking through house listings in a real estate app, a user starts a chat with their real estate agent about a listing that interests them.

You can create a full-screen BBM chat session or embed it into your app’s UI – in the lower half of the screen, for example – allowing users to continue to interact with your app as they chat. Chat messages can be sent from application to application or from application to BBM.

Here are some code samples for Java® and BlackBerry® WebWorks™ to help get you started:

Java

Full screen:

This line of Java code opens a BBM conversation window with the specified message in the ReplyField and opens a Contact Picker UI field populated with the user’s BBM contacts. The user can select one or several contacts to add to the conversation.

platformContext.getUIService().startBBMChat("Let's chat!");

Embedded chat:

The following code sample demonstrates how to create an embedded chat screen.

public class ChatFieldScreen extends MainScreen
{
	private ChatField _chatField; 

	public ChatFieldScreen()
	{
		// Create a field that uses the full height of the manager that contains it.

		Field firstField = null; 

		/* The BottomUpManager allocates space for the bottom fields first, and
		 then allocates the rest of the space to the first field. */

		BottomUpManager bottomUpManager = new BottomUpManager();

		/* Create a chat field that groups messages from the same sender,
		 displays the sender's name, and wraps the messages in bubbles. */

		_chatField = new ChatField(
				MessageListManager.MESSAGE_STYLE_GROUP_MESSAGES_SAME_SENDER |
				MessageListManager.MESSAGE_STYLE_SHOW_SENDER_DISPLAY_NAME,
				MessageListManager.BORDER_STYLE_BUBBLE);

// Add the field that uses the full height of the container, and then the chat                                                                    field.

		bottomUpManager.add (firstField);
		bottomUpManager.add (_chatField);

		add (bottomUpManager);
	}

	// Look for a press of the Enter key, then processes the text in the chat field

	protected boolean keyChar(char key, int status, int time)
	{
        Field fieldWithFocus = getLeafFieldWithFocus();
        ReplyField replyField =  _chatField.getReplyField();

        if (fieldWithFocus == replyField && key == Characters.ENTER)
        	{
            // handle the ENTER key from the embedded chat field
            String msg = replyField.getText().trim();
            	if (msg.length() > 0)
            	{	/* add code to send the message, for example:
            			try {
							sendMessage(msg);
						}
            			catch (DataOverflowException e) {
							 // message cannot be sent
							e.printStackTrace();
					} catch (ContactUnreachableException e) {
							// contact is not reachable
							e.printStackTrace();
							}
				*/
            	}

            replyField.setText(null);  // clear the reply field
            _chatField.toggle();       // hide the reply field
            return true;
        	}
        return super.keyChar(key, status, time);
    }

	/* Create a class to send the message over an existing connection, for example:

private void sendMessage (String msg) throws DataOverflowException, ContactUnreachableException
		{
		BBMPlatformContactList contactList = connection.getContactList();
    		if( connection.getContactList().size() > 0 ) {
       	 	BBMPlatformData data = new BBMPlatformData( msg );
       		connection.sendData( data, contactList );
     		}
		}
	*/
}

BlackBerry WebWorks

HTML chat window elements:

<div id="chatWindow"></div>
<div id="inputArea">
                <textarea id="txtMessage" rows="1"></textarea>
</div>

Styling chat window elements using CSS:

.receive-chatBubble
{
	margin: 4px 20px 0px 4px;
	padding: 0;
	position: relative;
}

#inputArea
{
	border: 1px solid #A5A2A5;
	border-right: 1px solid #A5A2A5;
	background: black;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#1E1B14));
	padding: 5px 3px;
	overflow:auto;
}

Sending an outgoing BBM message via JavaScript:

//Attempt to read the current user's display name from the BBM Client
if ((window.blackberry !== undefined) && (blackberry.bbm.platform !== undefined))
{
	displayName = blackberry.bbm.platform.self.displayName;
}	

//Display the message in the current user's chat window
addMessageToChatWindow(MESSAGE_TYPE_SEND, message, displayName, dt);

if (connType === "session")
{
	conn.broadcast(message);
}
else {
	conn.send(message);
}

Listening for incoming BBM messages via JavaScript:

connection.onBroadcastData = function(user, data)
{
	//Another user in the session has broadcasted a message.
	var displayName = "Unknown", dt = new Date();
	if (user)
	{
		displayName = user.displayName;
	}
	addMessageToChatWindow(MESSAGE_TYPE_RECEIVE, data, displayName, dt);
};

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 »

Following this week’s BlackBerry WebWorks announcement, I thought it would be a good idea to speak with fellow Inside BlackBerry Developer’s Blog bloggers, Adam and Prosanta about WebWorks and the open source community initiative. Check out the links below to visit the webpages mentioned in the video and to download the (free!) Hollywood Bowl app demoed. REMINDER: We need your help to name our github community! Post your suggestions in the comments.

BlackBerry github Community
BlackBerry WebWorks Developer Page
Hollywood Bowl app

The BlackBerry® Browser documentation page has been recently updated to include developer manuals and reference guides for the new browser on BlackBerry® 6.

The following documents are now online:

• Feature and Technical Overview – detailed overview of the key features of the browser on BlackBerry 6, as well as the architecture and supported content types of the new web platform.
• HTML Reference Guide – includes information about supported HTML elements (including HTML5), attributes and input type modes.
• JavaScript Reference Guide – contains technical details about the various supported JavaScript® APIs, such as Core, Events, Canvas, Geolocation, XmlHTTPRequest, etc.
• CSS Reference Guide – a robust guide that organizes the supported CSS properties (including CSS3) into logical categories such as text, tables, backgrounds, etc.

Please let us know if you find these developer guides helpful, as well as what else you might like to see!

Here at Research In Motion® (RIM), we’re incredibly excited about this development. The support of WebKit and HTML5 in BlackBerry® 6 – along with the recent introduction of BlackBerry® Widgets – shows the way the platform is changing and growing for web developers looking to make rich, compelling apps that have the same look, feel and features as a native application.

HTML5 contains lots of new elements for developers to leverage, including elements to help make web content easier to index and optimize for search engines; elements that enable you to play media in your application; elements that let you take it offline; and a plethora of other features to make your application a thing of beauty. The BlackBerry implementation of WebKit and HTML5 will be no different – going forward with the BlackBerry 6 Browser and Widget engines, you’ll be able to leverage all of the same elements that you would for any desktop browsers with virtually no limitations.

These elements include:

• Canvas
• Parsing
• Video
• Audio
• Forms (partial implementation)
• Geolocation
• Workers
• Timers

With the added capabilities of HTML5 to the BlackBerry® Browser, web developers will be able to create content that they would have never been able to run through the mobile web before – compelling games, interactive media, 3D graphics, and the list goes on. HTML5 looks to be an invaluable tool for web developers around the world!

Here’s a few blogs and websites with some examples of the compelling features of HTML5:

• HTML5Demos
• HTML5Gallery
• YouTube
• VisionWidget

Please feel free to post your HTML5 experiences so far, and share with us how you plan to leverage this exciting new technology!

Over the past year, the team responsible for the new BlackBerry® Browser in BlackBerry 6 has been challenged with identifying what makes a great mobile web browsing experience, and then building it. In addition to the new experts that have come on board through the acquisition of Torch Mobile, many of Research In Motion’s (RIM) brightest engineers have collaborated to set a new course for the BlackBerry Browser. As the senior product manager responsible for BlackBerry Browser development, I can personally attest that we’re extremely excited to see how customers will respond to this new direction when they fire up BlackBerry 6 for the first time.

At the core of the new BlackBerry Browser is the WebKit rendering engine. WebKit is a high quality open source rendering engine, which is used in many desktop and mobile web browsers. Our Browser development team not only has the WebKit expertise of Torch Mobile (a leading contributor in the WebKit community), but also years of RIM mobile expertise to help ensure that the WebKit engine is optimized for mobile. What does this mean? Click the link below and I’ll show you!

Rendering Speed and Web Standards Support

Our development team made it a priority to ensure that new BlackBerry Browser supports web standards both now and going forward. Below are few examples of where we stand today with some important web standards — including HTML5, an emerging web standard and a key focus in future versions of the BlackBerry Browser.

• Our Acid 3 test score: Perfect (100 of 100)
• Our CSS3 Selectors test score: Perfect (574 of 574)
• Our HTML5 test score: 208 of 300 – note that total compliance is not yet possible

The combination of the WebKit engine, web standards support, and our efforts to optimize for the mobile environment means that the new BlackBerry Browser is designed to provide a significant improvement to HTML rendering speed, and JavaScript® execution. Combined, these two performance improvements will drive the most obvious and customer-facing metric of all performance metrics – page load performance!

New UI and Features

Encapsulating the core rendering engine is an all-new user interface. The BlackBerry Browser UI in BlackBerry 6 has been designed to help users get to their desired content quickly, with minimal latency and required steps. New features we’ve added to the BlackBerry Browser include: a redesigned start page, unified URL and search entry box, tabbed browsing, pinch to zoom, and automatic content adjustment. Check out my post on Inside BlackBerry for a thorough overview of these new features.

While many things have changed in the BlackBerry Browser, one key element has stayed the same: The BlackBerry platform optimizes, but does not compromise the web content and application experience. We are the only platform that uses WebKit while also reducing the data consumed to render most sites significantly. BlackBerry 6 is designed to allow users to access desktop and premium mobile web content while using significantly less data, making it easier for them to stay within the confines of their service plans. This is also great news for developers, because the BlackBerry platform will not compromise your web content while reducing data consumption for consumers. It’s a win-win!

We have a lot of great BlackBerry Developer’s Blog posts in the coming weeks discussing WebKit and HTML5 in more detail. BlackBerry developers, please leave us a comment and let us know what you’re looking forward to the most in the new BlackBerry 6 platform!

There’s been no shortage of excitement about BlackBerry® 6 lately – I am thrilled by the response to our latestBlackBerry 6 video and Inside BlackBerry blog posts. We wanted to find a way to outline for you, our developer community, some of the opportunities that BlackBerry 6 will bring.

One thing we want to do is differentiate the way BlackBerry 6 will affect Java® development versus Web development. Over the coming weeks, we will share tips, tricks and more information about developing for BlackBerry 6 through two separate paths. For our Java developers, we’ll work to highlight the new APIs being introduced, including a new powerful set of new User Interface controls, Universal Search integration, and a Barcode Capture API. For our web developers, we’ll start to redefine BlackBerry® Widgets and talk about the completely revamped BlackBerry Browser powered by a Webkit engine. We will cover HTML5, CSS3, and concrete steps for how you can bring your mobile site to BlackBerry® smartphones.

On top of that, we are going to continue our series covering Super Apps and how you can create an amazing user experience on the BlackBerry platform. We are now less than eight weeks away from the final deadline for the BlackBerry Partners Fund Super Apps Developer Challenge. With over $1.5 million in prizing, this is a challenge you don’t want to watch from the sidelines.

So bookmark the Inside BlackBerry Developer’s Blog (if you haven’t already!) and be sure to check back frequently for all the latest content!

Using menu items effectively within your application is one of many ways to create a positive application experience, and helps to improve the overall engagement and usage of your application.

The BlackBerry® Widget API collection includes JavaScript® objects that can enhance the functionality of an application created using the BlackBerry Widget SDK. This collection includes the MenuItem object, which can be used to easily create contextual menus within your BlackBerry Widget application.

Creating MenuItem objects

As shown in the following example, adding a new menu item involves these two steps:

1. Create an instance of the MenuItem JavaScript object;
2. Use the Widget Menu API to add the object to the menu.

The keywords “Hello” and “World” are displayed as captions in the menu, and corresponding JavaScript functions named “callBackHello” and “callBackWorld” are called when the user selects the respective menu items.
This example also demonstrates how to create a menu item separator. Note the first parameter of the constructor is a Boolean value, indicating whether or not the MenuItem is a separator:

function createMenu(setDefault)
{
//Define Menu Item objects:
var mi_hello = new blackberry.ui.menu.MenuItem(false, 0, “Hello”, callBackHello);
var mi_separator = new blackberry.ui.menu.MenuItem(true, 1);
var mi_world = new blackberry.ui.menu.MenuItem(false, 2, “World”, callBackWorld);

//Clear existing menu items:
blackberry.ui.menu.clearMenuItems();

//Add a separator between two menu item objects:
blackberry.ui.menu.addMenuItem(mi_hello);
blackberry.ui.menu.addMenuItem(mi_separator);
blackberry.ui.menu.addMenuItem(mi_world);

//Optionally set default focus to a specified menu item:
if (setDefault)
{
blackberry.ui.menu.setDefaultMenuItem(mi_hello);
}
}

When to create the menu

The most straightforward way to add menu items in your Widget application is to call the “createMenu()” method from the “onload” event which occurs immediately after the browser rendering engine loads the page. This ensures that all required JavaScript has been loaded into memory, and that when the user is ready to interact with your application, the menu has been created:

<body onload=”createMenu()”>
You can also re-build the menu at any time by calling the createMenu function elsewhere on the page:
<button id=”btnMenu” onclick=”createMenu(1)”>
Re-build menu </button>
</body>

Menu and Super Apps

One of the key principles of the Super App concept is being able to provide a contextual user experience. This means allowing your application to make use of any conditional information in order to deliver content and services that are relevant within the current context.

The Widget Menu API provides an easy dynamic user interface you can adjust to the current context of the application. By displaying menu items that are relevant to what the user is currently doing, you can increase engagement and optimize the user experience by making it easier for your users to access the information they need within your application.

The best example of effective use of a contextual menu is one that most BlackBerry users are familiar with: the Messages application. The initial context of the Messages application provides a list of messages, and the menu on this screen includes items such as “Open” and “Search By.” When a message is opened, the context of the application changes – and so does the menu, becoming relevant to the user viewing a message. The “Open” menu item is removed, and the “More” and “Add to Contacts” menu items are added. This allows the user to easily access the application functionality that is most important to them at that point in time.

Another example of how you can contextualize the menu is having your application perform an automatic check for updates on startup. If a new version of your application is available, an “Update Now” item can be added to the menu. When selected, the menu item can redirect the user to either an over-the-air download page, or launch BlackBerry App World™ to your product download page.

Another final example of effective menu usage could be to use the Widget System API to detect whether the current BlackBerry smartphone has Wi-Fi® capability, and to provide an “Enable Wi-Fi” menu item in advance of your user accessing a high-bandwidth feature of your application.

Super App Developer Challenge

By making your apps context-aware, you can easily increase the usefulness and relevance of your services and deliver the Super App experience. Effective use of Menu items in your application is a great way to provide a highly contextualized user experience.

As a reminder, BlackBerry Widget applications can qualify for the BlackBerry Super Apps Developer Challenge. If you have or are building an application that you think meets the requirements for being a Super App, please don’t hesitate to submit it to the Developer Challenge before September 6, 2010.