Developing HTML5 Apps for BlackBerry 10
Upcoming SlideShare
Loading in...5
×
 

Developing HTML5 Apps for BlackBerry 10

on

  • 6,877 views

This Article describe Developing and Building HTML5 based Apps for BB10 using WebWorks, Test HTML5 Apps on Ripple Emulator, Install .bar file on BlackBerry 10 device and Install .bar file on VMware ...

This Article describe Developing and Building HTML5 based Apps for BB10 using WebWorks, Test HTML5 Apps on Ripple Emulator, Install .bar file on BlackBerry 10 device and Install .bar file on VMware Player Simulator.

Statistics

Views

Total Views
6,877
Views on SlideShare
6,869
Embed Views
8

Actions

Likes
1
Downloads
227
Comments
0

3 Embeds 8

https://si0.twimg.com 3
http://www.slashdocs.com 3
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Developing HTML5 Apps for BlackBerry 10 Developing HTML5 Apps for BlackBerry 10 Document Transcript

  • Developing HTML5 Apps for BlackBerry 10 Kamal Sharma http://www.facebook.com/BBDevIndia
  • ContentsRequirements............................................................................................................................................................... 3Installation ................................................................................................................................................................... 3Creating Your First Project (Hello World) .................................................................................................................... 4 Project Structure ...................................................................................................................................................... 4 Creating Sample Source File .................................................................................................................................... 4 Creating Sample Config File ..................................................................................................................................... 5 Creating Sample Icon File......................................................................................................................................... 5Using Ripple ................................................................................................................................................................. 5 Running Project on Ripple ....................................................................................................................................... 5 Ripple Settings for Package App File........................................................................................................................ 7 Build App File (.bar file)............................................................................................................................................ 7 Package ................................................................................................................................................................ 8 Package & Sign ..................................................................................................................................................... 8 Package & Launch ................................................................................................................................................ 8Using Simulator ............................................................................................................................................................ 8 Configure Simulator ................................................................................................................................................. 8 Adjust Simulator Size ............................................................................................................................................. 10 Adjust Simulator Orientation ................................................................................................................................. 12 Install App (.bar) file on Simulator ......................................................................................................................... 13Using Device............................................................................................................................................................... 14 Configure Device .................................................................................................................................................... 14 Sign Key for Apps ................................................................................................................................................... 14 Building Key using Command Line ..................................................................................................................... 14 Building Key using Graphical Aid Tool................................................................................................................ 15 Install App (.bar) file on Device .............................................................................................................................. 15Error Handling ............................................................................................................................................................ 18
  • RequirementsBlackBerry WebWorks 10 SDKRipple Emulator (Chrome Extension)VMware Player + BlackBerry 10 Dev Alpha SimulatorBlackBerry Graphical Aid ToolWeb Server and PuTTYInstallationRippleDownload and install the Ripple Chrome extension from BlackBerry website.https://developer.blackberry.com/html5/download/rippleWebWorksDownload and install the WebWorks SDK from BlackBerry website.https://developer.blackberry.com/html5/downloads/fetch/BB10-WebWorks-SDK-1.0.1.17.exeVMware PlayerDownload and install the VMware Player.https://www.vmware.com/tryvmware/?p=player&lp=1BlackBerry 10 Dev Alpha SimulatorDownload and Install the BlackBerry 10 Dev Alpha Simulator from BlackBerry website.https://developer.blackberry.com/native/beta/downloads/fetch/BlackBerry10Simulator-Installer-BB10_0_06-543-Win-201208070619.exeGraphical AidDownload and install the Graphical Aid Tool from BlackBerry website.http://supportforums.blackberry.com/rim/attachments/rim/Testing_and_Deployment_of_Applications@tkb/152/36/BlackBerry%20Tablet%20OS%20Graphical%20Aid%202.6.6%20-%20Windows%20Installer.zipPuTTYDownload and install the PuTTY from PuTTY website.http://www.putty.org/Web ServerWamp, Vertrigo etc.Request permission to Sign your Appshttp://developer.blackberry.com/html5/signingkey
  • Creating Your First Project (Hello World)Project StructureCreate a project in your server root (www) folder. If you are using Wamp server root is c:/wamp/www or usingVertrigo root is c:/program files/vertrigo/www.Project structure as follow: YOUR_PROJECT_FOLDER + index.html (Source File) + config.xml (Configuration file) + icon file (Icon Image File) + all others files/directoriesCreating Sample Source FileCreate index.html file in project folder, add the following code and you can add code just like HTML + JavaScript+ CSS in webpage. <!DOCTYPE html> <html> <head> <meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no/"> </head> <body> <!-- YOUR CODE --> <h1>Hello, OpenClass</h1> </body> </html>NoteViewport meta tag is used for control the zoom level. <meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no/">If you want to specify the custom width and height, value is based on pixel. Define like content="width=600, height=1000"If you want to prevent the user to control the zoom level. Define like content="user-scalable=no"
  • If you want to set how much the user can zoom in (maximum) and out (minimum). Define like <meta id="viewport" name="viewport" content="width=device-width, height=device-height, "viewport" width, height=device maximum-scale=2, minimum-scale=1 scale=1/">In BlackBerry 10 actual device resolutions are in Portrait mode 768x1280, you can define your custom size ,(aspect ratio) through viewport some sample sizes are: 640x1067, 500x833, 450x750, 300x500 etc.Creating Sample Config File <?xml version="1.0" encoding="UTF "UTF-8"?> <widget xmlns="http://www.w3.org/ns/widgets" "http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0.1" id="OpenClass" "http://www.blackberry.com/ns/widgets" "OpenClass" xml:lang="en"> <author href="url" rim:copyright rim:copyright="copyright information">Kamal Sharma</author> Kamal Sharma <icon src="icon.png"/> <name>OpenClass</name> <content src="index.html" "index.html"/> <feature id="blackberry.app" /> "blackberry.app" <feature id="blackberry.invoke" "blackberry.invoke"/> </widget>Note Version is used for versioning the Build. <name> element is used for App Name.More settings available at BlackBerry website.https://developer.blackberry.com/html5/documentation/working_with_config_xml_file_1866970_11.htmlhttps://developer.blackberry.com/html5/documentation/working_with_config_xml_file_1866Creating Sample Icon FileYou can create maximum size of 86x86 pixel image for App Icon, extension can be .PNG file.Using RippleRunning Project on RippleOpen your source file (index.html) in Chrome browser, if you are using Vertrigo Server or Wamp Server your rproject URL look like http://127.0.0.1/your_project or http://localhost/your_project.
  • After opening the URL in browser open the Ripple Emulator extension.Click Enable to start the Ripple Emulator, this will load your App in Ripp Emulator. After Ripple first launch Ripplechange the Platforms to BlackBerry 10 WebWorks using Change Platform button.Image show App running on Ripple Emulator.
  • Ripple Settings for Package App File services using start the Services button and fill the SettingsBefore performing the Packaging, start the Ripple servidetails.Where, SDK Path is your BlackBerry 10 SDK Installation path, for example installation path is C:Program FilesResearch In MotionBlackBerry 10 WebWorks SDK 1.0.0.15 BlackBerry 1.0.0.15. Project Root is where your Project folder exists. e Archive Name is your App Name; App Name match with your config.xml <name> element. element Output Folder is where your App file creates.Build App File (.bar file)Ripple Emulator provide three types of options for building App file. Package App file, Package & Sign App file andPackage & Launch App file.
  • PackageUsing Package, you can build App file for testing on Simulator and install .bar file manually on simulator usingcommand line tool.Package & SignUsing Package & Sign, you can build App file for installation in device, you need to sign the .bar file beforeinstalling on the device. In Ripple Settings provide your Singing Password as you provide when you requesting thekey in BlackBerry key request form.Package & LaunchUsing Package and Launch, you can build .bar file and install directly on Simulator if the Simulator is running byprovide the simulator IP Address.Using SimulatorConfigure SimulatorOpen VMware Player.
  • Click on Open a Virtual Machine. Windows file Browser will open, Navigate to Virtual Machine Folder (inWindows 7 Virtual Machines folder found in Libraries->Documents->Virtual Machines->BlackBerry10Simulator >BlackBerry10Simulator-BB10_VERSION).Open the BlackBerry10Simulator file, Select the Blackberry 10 Dev Alpha Simulator from the navigation in left ,panel and click on Play Virtual machine.Wait few seconds, Simulator will launch imulator launch.
  • Obtain the IP Address of the Simulator by clicking on the icon and Development Mode should be ON fortesting the App on the Simulator.Adjust Simulator SizeDue to 768x1280 resolution of the device, this size is larger than the normal monitor screen. To adjust the size of screenthe simulator you need to connect to Simulator using Telnet or SSH, Open PuTTY for setup the resolution.
  • Host Name as the Simulator IP Address and Connection type to Telnet, Click on Open.Login screen will open; requesting login username and password, by default for all the username and passwordis devuser. To control the zoom level type the following command and press enter. ves-zoom value%This command will immediate control the zoom and scroll bar will disappear; adjust zoom value according to ;your monitor screen resolution.
  • Adjust Simulator OrientationBy default Simulator start in Portrait orientation, you can change the orientation by dragging the cursor from thebottom right corner, just like in the screenshot.
  • Install App (.bar) file on SimulatorYou can install App (.bar file) in Simulator directly from Ripple using Package & Launch button or using command Simulator, usiline tool.Deploy to a Simulator Using Ripple Open Ripple Settings option; provide the Simulator IP Address and Password 12345. Use Ripple Package & Launch button for install App in Simulator.Deploy to a Simulator Using Command line tool ommand Build the App file using Ripple using Package button, Ripple will create two folders one is for Device and other is for Simulator. Choose the file from Simulator folder and place the App (.bar) file in BlackBerry 10 WebWorks SDK-> SDK dependencies->tools->bin folde Absolute path is C:Program FilesResearch In MotionBlackBerry 10 folder. Research Motion WebWorks SDK 1.0.0.15dependencies dependenciestoolsbin. [Path is depending on your installation.] installation. Open command prompt using cmd and navigate to the path BlackBerry 10 WebWorks SDK using the following DOS command. cd C:Program FilesResearch In Motion BlackBerry 10 WebWorks SDK Research MotionBlackBerry 1.0.0.15dependenciestools toolsbin Type the following command to install the file on simulator, where 192.168.61.128 is Simulator IP Address and OpenClass.bar is App file. blackberry-deploy -installApp -device 192.168.61.128 -package OpenClass.bar - installApp package password 12345App is installed and running on Simulator.
  • Using DeviceConfigure Device Connect Device to computer, install the BlackBerry Device Driver. Popup asking password for connect device to the computer. Provide Device password and Press OK. word connecting Enable Development Mode in Device from Settings option and Note down the IP Address of the Device.Sign Key for AppsBuilding Key using Command Linehttp://developer.blackberry.com/html5/signingkey ckberry.com/html5/signingkeyBefore signing the Apps (without debug token), you need to create the author.p12, barsigner.csk andbarsigner.db files. After obtaining the both .csj file , place the file somewhere on disk. For example in c: /. files, c
  • Open command prompt, and navigate to the path BlackBerry 10 WebWorks SDK- dependencies->tools- ompt, -> >bin folder. cd C:Program FilesResearch In Motion BlackBerry 10 WebWorks SDK Research MotionBlackBerry 1.0.0.15dependenciestools toolsbin Type the following command for signing. Where YOUR_PIN is your PIN which you specified in key signing form and NEW_PASSWORD is new password for the keys. blackberry-signer –register –csjpin YOUR_PIN –storepass NEW_PASSWORD C:client-RDK- register storepass C: XXX.csj C:client-PBDT-XXX.csj XXX.csjBuilding Key using Graphical Aid Tool Open the BlackBerry Graphical Aid tool, Switch to Configuration tab, Run Configuration wizard using Run Configuration button. , In the Next step provide your BlackBerry WebWorks SDK location location. After next step location, in Developer Certificate click on Create Certificate.Install App (.bar) file on DeviceDeploy to a Device Using Graphical Aid Tool Open BlackBerry Graphical Aid tool, Navigate to install tab. choose the .bar file from the Device folder and provide the device password. Click on Install.
  • Deploy to a Device Using Command line tool ommand Build App (.bar) file using Ripple Package & Sign button. Choose the file from Device folder and place the App (.bar) file in BlackBerry 10 WebWorks SDK-> SDK dependencies->tools->bin folder. Absolute path is C:Program FilesResearch In MotionBlackBerry 10 Research Motion WebWorks SDK 1.0.0.15dependencies dependenciestoolsbin. [Path is depending on your installation.] Open command prompt using cmd and navigate to the path BlackBerry 10 WebWorks SDK using the following DOS command. cd C:Program FilesResearch In Motion BlackBerry 10 WebWorks SDK Research MotionBlackBerry 1.0.0.15dependenciestools toolsbin Type the following command and press enter to install the file on Device, where 169.254.0.1 is Device IP Address and OpenClass.bar is App file. Make sure Development Mode is ON. blackberry-deploy -installApp -device 169.254.0.1 -package OpenClass.bar -password installApp package 12345
  • App is installed and running on Device.
  • Error Handling 1. When Packaging App file, getting this error from Ripple Emulator. This is due to Ripple Build and Deploy services in not running. Start the Services using Start Services button in ld Ripple 2. When Packaging App file, getting this error from Ripple Emulator. This is due to Bundle Number that used in previous package change the Bundle Number in Ripple Settings. package; For example when successfully build the Package Bundle Number was 1 then Ripple Increment the Bundle Number to 2. Check the Bundle Number and also in config.xml file. . 3. When Packaging App file, getting this error from Ripple Emulator. This is due to Network Connectivity Connectivity. 4. Unable to make author.p12 file from Command Line. nable Open the BlackBerry Graphical Tool, Navigate to Configuration tab. Run the Configuration Wizard. This process will create the certificate for signing. Then build using WebWorks.