1. Sencha Touch on BlackBerry 10 Bootcamp
Naveenan Murugesu Adam Stanley
nmurugesu@blackberry.com astanley@blackberry.com
@naveenan5 @n_adam_stanley

2. Agenda
 Introduction to BlackBerry WebWorks
 Environment setup
 Build a simple Sencha Touch app
 Code sign your app
 Package, deploy and test the app on a simulator
 Deploy the app to BlackBerry Dev Alpha B
 Publish in BlackBerry World

3. Bookmark this page
http://developer.blackberry.com/html5

4. Signing Keys
http://developer.blackberry.com/html5/signingkey

5. Many roads lead to BlackBerry 10 apps
HTML5 BlackBerry®
WebWorks™
C/C++
Native SDK
C++/Qt
Cascades

6. BlackBerry Web Platform
 Driven by strong Web
standards support
 Powered by WebKit
 HTML5 and CSS3
 Flash 11 and WebGL

7. WebWorks?
HTML5 app that runs natively on BlackBerry 10

8. Application development
What if you could build a
BlackBerry application
using Web technologies?JavaScript
HTML5
CSS3

9. Native UX powered by HTML5
Achieve that BlackBerry 10 “look & feel” [BFB]
Use popular community frameworks.
bbUI.jsSencha TouchjQuery Mobile

10. HTML5 powered by native capabilities
HTML5, CSS3, JavaScript
WebKit engine
WebWorks platform
BlackBerry Developer APIs
https://developer.blackberry.com/html5/apis

11. BlackBerry 10 WebWorks Examples
NY Rangers
Official App
USA Today Flixster

12. Sencha Touch Examples
Air Asia Mail Online PC Plus

13. BlackBerry 10 Services
13
BlackBerry Push Service BBM Social Platform
Invocation Framework
BlackBerry Payment Service
Locate Service

14. Environment Setup
14

15. Step 1: Browser & WebServer
 A web server running locally
 A modern web browser, Chrome is recommended
 If you are running IIS on Windows
 Add application/x-json as MIME Type
 For more info,
http://bit.ly/177ogCw

16.  Windows: Enable Internet Information Services (IIS)
 XP : Control Panel  Add / remove programs  Windows Components
 Win7: Control Panel  Programs  Windows Features
Setting up a web server

17.  Mac: Enable Web sharing
 System Preferences Sharing  Web Sharing
Setting up a web server

18.  http://www.oracle.com
Step 2: Download the JRE?

19.  http://developer.blackberry.com/html5/download
Step 3: Download the SDK

20. Step 4: Install the SDK

21. Step 5: Download the VMWare Player
 http://www.vmware.com/products/player

22. Step 6: Install the VMWare Player
 Follow the Installation Wizard

23.  http://developer.blackberry.com/html5/download
Step 7: Download the simulator

24. Step 8: Install the Simulator
 Follow the Installation Wizard

25. Step 9: Download BlackBerry Link
 http://bit.ly/YqRLJu

26. Step 10: Install the BlackBerry Link
 Follow the Installation Wizard

27. Step 11: Sample Code
 Copy the folder BB10_Startercode.zip
 Includes the Sencha Touch SDK directory
 Sencha Touch 2.3 Beta

28.  Extract BB10_Startercode.zip folder into web server “working” folder
 Windows default: C:inetpubwwwrootBB10_Startercode
 Mac default: ~/Sites/BB10_Startercode
Step 12: Extract the zip file

29. Lets do a sample…

30. Sencha Touch Project Structure
30

31. Run the sample in Chrome
31
 http://localhost/BB10_startercode/

32. Coding time…

33. Coding….
33

34. Testing it in Chrome again…
34
 Now, it looks like a BB 10 Action Bar

35. More info…
35
 For detailed and more info about the BlackBerry 10 Theme
Porting Sencha Apps for an Astonishing BlackBerry Experience
Speaker: Shikhir Singh
Location: Northern Hemisphere E-3
Date: Thursday, July 18th, 9:30 AM to 10:20 AM

36. Packaging Apps for BlackBerry 10
using WebWorks

37. BlackBerry WebWorks
Config.xml

38. Config.xml
 What is it?
 It is a configuration file.
 It provides general app information.
 It specifies the features and functionality of the app.
 It is located in the root folder of the app

39. Config.xml

40. Config.xml

41. Config.xml

42. Modify the Config.xml
 C:inetpubwwwrootBB10_Startercodeconfig.xml

43. BlackBerry WebWorks
Code Signing Setup

44. Code Signing
 Apps must be signed to run on a live device
 Required in order to deploy to BlackBerry App World
 Register for keys
 https://www.blackberry.com/SignedKeys
 Install keys
 http://bit.ly/Z2cdki

45. Code signing key setup
 Open command prompt and navigate to
 C:Program FilesResearch In MotionBlackBerry 10
WebWorks SDK <version>dependenciestoolsbin
 Install the keys:
blackberry-signer -register -csjpin <csj pin>
-storepass <KeystorePassword> <client-RDK-xxxxxx.csj file>
<client-PBDT-xxxxx.csj file>

46. BlackBerry WebWorks
Package the application

47. Package your application: bbwp
 Open command prompt and navigate to
 C:Program FilesResearch In MotionBlackBerry 10
WebWorks SDK <version>
 Run this command:
<root_folder> : The full path to your project folder
<KeystorePassword> : Your signing key password
<output_location> : The folder where you want the signed bar file to be created
bbwp <root_folder > -g <KeystorePassword> -o <output_location>

48. Package your application: bbwp
 Open command prompt and navigate to
 C:Program FilesResearch In MotionBlackBerry 10
WebWorks SDK <version>
 Run this command:
bbwp C:inetpubwwwrootBB10_Startercode -g ashmi26 -o C:inetpubwwwrootOutput

49. Package your application: bbwp

50. BlackBerry WebWorks
Deploying the application on Simulator

51. Deployment
 Start the simulator
 Start VMWare Player
 Open the BlackBerry10
Simulator.vmx

52. Deployment
 Use blackberry-deploy
 Command line tool found in
 C:Program FilesResearch In MotionBlackBerry 10 WebWorks
SDK <version>dependenciestoolsbin
 Deploy to
 a simulator (app does not have to be signed)
blackberry-deploy -installApp -device <Simulator IP> -package
<path to the bar file in simulator folder>

53. C:UsersnmurugesuDesktopBB10BB10-WebWorks-SDK-
1.0.4.11dependenciestoolsbin blackBerry-deploy –installApp
–device 192.168.86.128 –package
C:inetpubwwwrootOutputsimulatorBB10_Startercode.bar
Sending Install request...
Info: Action: Install
Info: File size: 40731
Info: Installing ...
actual_dname::DEV8281a833da63a6b7e2098dae6d0662e1.MjA5OG
RhZTZkMDY2MmUxICAgICA
actual_id::MjA5OGRhZTZkMDY2MmUxICAgICA
actual_version::1.0.0.0
result::success
Deployment

54. Deployment

55. BlackBerry WebWorks
Deploying the application on a device

56. BlackBerry ID
 Create BlackBerry ID
 Settings
 BlackBerry ID
 Create New
 Fill in the fields
 Submit

57. Deployment
 Enable development mode
 Settings
 Security and Privacy
 Development Mode
 IP Address

58. Deployment
 Use blackberry-deploy to side-load a signed app
 Command line tool found in
 C:Program FilesResearch In MotionBlackBerry 10 WebWorks
SDK <version>dependenciestoolsbin
 Deploy to
 a live device (app must be signed)
blackberry-deploy -installApp -device <Device IP> -package
<Compiled BAR> -password <Device PWD>

59. C:UsersnmurugesuDesktopBB10BB10-WebWorks-SDK-
1.0.4.11dependenciestoolsbin blackBerry-deploy –installApp
–device 192.168.86.128 –password pass –package
C:inetpubwwwrootOutputdeviceBB10_Startercode.bar
Sending Install request...
Info: Action: Install
Info: File size: 40731
Info: Installing ...
actual_dname::DEV8281a833da63a6b7e2098dae6d0662e1.MjA5OG
RhZTZkMDY2MmUxICAgICA
actual_id::MjA5OGRhZTZkMDY2MmUxICAgICA
actual_version::1.0.0.0
result::success
Deployment

60. Publishing the app in the
BlackBerry World

61. BlackBerry App World Vendor Portal
61

62. For More Information…
 Vendor Support Site
 https://bdsc.webapps.blackberry.com/devzone/appworld
 Vendor Portal Documentation
 http://bbry.lv/I7P5Z7
 Vendor FAQ
 https://bdsc.webapps.blackberry.com/devzone/appworld/faq
62

63. https://github.com/blackberry/BB10-WebWorks-Samples
Exercise: Github Samples

64. Exercise: Github Samples
Download BB10-WebWorks-Samples samples from Github
Extract invoke/invoker sample
Copy to working folder of your local web server
Example: C:inetpubwwwrootinvoker

65. Exercise: Github Samples
Code Review: invocation.js
Contains methods used to invoke other applications
Open using any text editor
Task(s):
Find the code snippet that opens the clock’s stopwatch
Change invokeBrowserUri() method to invoke
http://senchacon.com

66. Exercise: Github Samples
Package & sign Invoke/invoker sample using WebWorks SDK
 Reminder: navigate to C:Program FilesResearch In
MotionBlackBerry 10 WebWorks SDK 1.0.4.11
 Reminder: run bbwp command:
bbwp C:inetpubwwwrootinvoker -g mypass123
-o c:tempoutput

67. Exercise: Github Samples
Deploy the sample to the device
 Navigate to C:Program FilesResearch In
MotionBlackBerry 10 WebWorks SDK
1.0.4.11dependenciestoolsbin
 Run blackberry-deploy command:
blackberry-deploy -installApp -device 169.254.0.1
-package C:tempoutputdeviceinvoker.bar
-password 1234

68. Advanced: Package your Sencha app
Package & sign your app(s) using WebWorks
Reminder: Must have a config.xml
Deploy BAR file to simulator or device (signed)

69. Thank You
Naveenan Murugesu Adam Stanley
nmurugesu@blackberry.com astanley@blackberry.com
@naveenan5 @n_adam_stanley