Create BlackBerry Playbook Tablet Apps with WebWorks SDK

In continuation of the last article on the development of web widgets using WebWorks SDK, we will talk about the features of creating applications for the BlackBerry Playbook tablet.
To begin, we recall that the API version for the BlackBerry Tablet OS (QNX-based Playbook tablet operating system) is severely curtailed compared to the API for BlackBerry OS 6 and 7. Information about changes is published in the developers blog , the documentation is periodically updated.

Development environment

Setting up the development environment is no different from that described earlier. But, in addition to making general settings in the Eclipse IDE, you also need to install BlackBerry WebWorks SDK for Tablet OS, VMware Player (Windows) or VMware Fusion (Mac), and BlackBerry Playbook Simulator. All necessary tools, documentation, and examples are available at us.blackberry.com/developers/tablet/webworks.jsp
During the installation of the BlackBerry WebWorks SDK for Tablet OS, you will need to specify the directory with the location of the Adobe AIR SDK, so it is also advisable to download the required package in advance. After installing WebWorks SDK, for convenience, it is desirable to add paths to the console utilities bbwp.exe (builds the application from the project) and blackberry-deploy.bat (controls the applications on the simulator) approximately as follows:

c:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK for TabletOS 2.0.0.4\bbwp;c:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK for TabletOS 2.0.0.4\bbwp\blackberry-tablet-sdk\bin


')

Building and running the HabrHelloWidget project on a tablet simulator

As an example, we compile and install the HabrHelloWidget application described in the previous article on a tablet simulator running in the VMware environment. To start, the tablet must be switched to Development Mode, you will need to enter a password:


larger

The corresponding icon appears at the top of the display. When you click on it, the device’s IP address will be displayed. Remember the password and IP address:


larger

We need to create an archive with the bar extension using the bbwp utility (Blackberry WebWorks Packager), then this archive should be installed on the simulator or physical device using the blackberry-deploy utility.
In Eclipse, open the project, call the context menu of the project, select the Build BlackBerry WebWorks Project item and build the HabrHelloWidget. Our project currently has the following structure:

build\
css\
ext\
js\
config.xml
icon.png
index.html

We need a build directory that contains the build. Suppose the directory is located at C: \ projects \ blackberry \ rim_workspace \ HabrHelloWidget \ build
Run the console. In our case, the compilation and installation process is as follows:

C:\>bbwp "C:\projects\blackberry\rim_workspace\HabrHelloWidget \build\HabrHelloWidget.zip" -o "E:\myapps\output" && blackberry-deploy -installApp -password ilab -device 192.168.137.131 -package "E:\myapps\output\HabrHelloWidget.bar"

First, bbwp builds from a zip archive (an assembly produced by Eclipse tools) a similar archive with the extension bar (BlackBerry archive) in the directory pointed to by the -o flag.
Then blackberry-deploy is called with the -installApp flag, the parameters of the network access to the device and the indication of the package to be installed.

To view all available arguments, bbwp must be called with the -h flag, the blackberry-deploy utility is invoked without arguments. A detailed description of the compilation step is available at docs.blackberry.com/en/developers/deliverables/23977/Compile_a_BlackBerry_Widget_application_834647_11.jsp


larger


larger

The Blackberry.identity object is not supported on the Playbook, so the application behaves predictably differently than on the smartphone:




There is no benefit from such a widget, so we will change the project so that it informs about all the available possibilities of the blackberry js-object. As changes are made to the WebWorks API, the behavior of the application will also change.
In the config.xml, add all the functionality of the blackberry extensions:



Markup hml (index.html):

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no" /> <link rel="stylesheet" href="css/style.css" /> <title>blackberry object | WebWorks features</title> </head> <body> <h1>js blackberry object</h1> <div id="features"></div> <script type="text/javascript" src="js/init.js"></script> </body> </html> 

Style definitions (css / style.css):

 @CHARSET "UTF-8"; body { background-color: #fff; color: #777; font: 12px Arial, Helvetica, sans-serif; } h1 { border-bottom: 1px solid #777; } #features { -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; } 

Initialization Script (js / init.js):

 /** * HabrHelloWidget init (modified) */ (function() { var $ = function (id){ return document.getElementById(id); }; var features = $('features'), str = ''; try { for ( var p in blackberry) { str += '<br /><strong>' + p + '</strong>'; for ( var pf in blackberry[p]) { str += '<br />  ' + p + '.' + pf; } } } catch (e) { str = '<em>blackberry</em> features are not supported, check your config.xml'; } features.innerHTML = str; })(); 

Result:

larger

Testing and debugging

Since the widget runs to the context of the webkit browser's executable environment, a web inspector can be used for debugging. To do this, the project must be compiled with the final -d flag:

bbwp "C:\projects\blackberry\rim_workspace\HabrHelloWidget\build\HabrHelloWidget.zip" -o "E:\myapps\output" -d

The web inspector will be available after launching the application on both the tablet and the desktop webcam browser, for which you need to contact port 1337 at http://192.168.137.131:1337 (desktop) or http: // localhost: 1337 (tablet ):


larger


larger

If the web inspector is uncomfortable for any reason, then you can connect Firebug lite.
Ripple Emulator can also become an auxiliary tool, but strictly speaking it is not a full-fledged emulator, so its debugging capabilities are limited.

Signature of the application

To publish to AppWorld, you need to register as a vendor, and the application must be signed with digital keys. Key Request Form: www.blackberry.com/SignedKeys
A bank card with online payments is required. It takes an average of 1-3 days to receive the keys by email.

Detailed instructions for signing the application with keys are available at docs.blackberry.com/en/developers/deliverables/23977/Configure_signing_for_tablet_applications_1476061_11.jsp

The application should be compiled with the bbwp utility with the -gcsk , -gp12 and -buildId . The signed application can be sent to the AppWorld for consideration and published after approval.
On this, perhaps, you can stop. Obviously, all the nuances can not be taken into account and reflected in two articles, so as questions arise, we will make explanations and clarifications where required.

Subject references

• WebWorks for Tablet OS Documentation
  docs.blackberry.com/en/developers/subcategories/?userType=21&category=BlackBerry+WebWorks+for+Tablets
• Tools
  us.blackberry.com/developers/tablet/webworks.jsp
• Developer Forum (WebWorks Development)
  supportforums.blackberry.com/t5/Web-and-WebWorks-Development/tkb-p/browser_dev%40tkb

Ps. A few words about the free BlackBerry Playbook tablet

Surely all those interested have already seen this post , but the additional link does not hurt. The comments contain up-to-date information on the situation with delivery and customs.