Develop using the BlackBerry WebWorks SDK for BlackBerry Tablets (1 of 4)

Transcription

1 Develop using the BlackBerry WebWorks SDK for BlackBerry Tablets (1 of 4) Getting Started Adam Stanley Prosanta Bhattacherjee BlackBerry Developer Relations February 1, 20111

2 BlackBerry WebWorks Application Platform Overview 2

3 What is BlackBerry WebWorks? BlackBerry WebWorks is an application platform that enables developers to create standalone applications using modern and standardized web technologies. WebWorks applications can be fully-featured Super Apps through their ability to integrate with native BlackBerry and PlayBook features.

4 BlackBerry Programming Models Application power Simplicity of development and maintenance Hitting the sweet spot means The richness of device access and reuse of assets The simplicity of the browser programming model

5 Developer Spectrum Native-based UI Browser-based UI Functionality provided by BlackBerry OS Functionality provided by Browser Engine Native Application WebWorks Platform BlackBerry Browser Where in the spectrum do developers gravitate to? Do they create a Native application (Highly functional)? Do they create Web content for the Browser (Flexible UI and low cost)? Or a mix of the two? 5

6 Web = Platform Plurality BlackBerry Smartphone BlackBerry PlayBook It s a diverse world out there for developers! Strong Web standards offer support across multiple platforms Reuse Web assets and developer skills to create BlackBerry apps Each platform seeing growth in access to native functionality Access the richness and differentiators of each platform

7 Real World Examples Loca FM (Vanatur World Mobile) Hollywood Bowl (LA Philharmonic) Guitar Chords (My App Catalog) Superheroes Alliance (Uken Games) Sea-Web (Nitobi) Campus Party (Contento Media)

8 Features and Capabilities 8

9 What Can a WebWorks App Do? Services & Content WEB SERVICES BROWSER ENGINE APPLICATION INTEGRATION PUSH SYSTEM EVENTS MENUS GPS STORAGE File System SQLite

10 Web Platform Powered by WebKit WebKit rendering engine added to BlackBerry 6 and BlackBerry Tablet OS BlackBerry WebWorks applications benefit from strengths of WebKit Combine the power of HTML5 and CSS3 with JavaScript APIs

11 PlayBook Web Platform Improved high fidelity WebKit browser engine Better support of HTML5 and CSS3 standards Package existing Flash content into a PlayBook application Full support of Adobe Flash 10.1 Faster hardware 1Ghz dual core processor 1Gb Ram

12 WebWorks JavaScript Extensions Custom objects that can connect browser engine with underlying Java code BlackBerry WebWorks apps can be more than just web content Enables Super App functionality

13 WebWorks API Examples Application and system events onbackground, oncoveragechange, etc. Application launcher Invoke native apps with data, invoke third-party apps with data System properties Change home screen icon, background, etc. User interface System Dialogs

14 Sample Code: Application Integration <script type="text/javascript"> function openvideocamera() { var args = new blackberry.invoke.cameraarguments(); args.view = blackberry.invoke.cameraarguments.view_recorder; blackberry.invoke.invoke(blackberry.invoke.app_camera, args); } </script>

15 Architecture 15

16 Architecture: How Does it Work? User interface Powered by Web HTML and CSS Your app Application logic JavaScript WebWorks APIs WebKit Engine WebWorks Platform BlackBerry Platform Access to Platform OS BBM Monetization Media Hardware Security PIM Storage Compression Push Background Multi-Tasking

17 Open Source Community OSS Community BlackBerry WebWorks Platform Github RIM developer Contribute Participate Review OSS Code (source) Consume Participate App developer Create OS developer WebWorks Application

18 Market for WebWorks Applications BlackBerry WebWorks applications are supported on BlackBerry PlayBook BlackBerry 6 BlackBerry Device Software version 5.0

19 Development Tools 19

20 How do you build BlackBerry WebWorks Applications? 1. Setup Development Environment 2. Write application content (HTML, CSS, JavaScript files) 3. Create a ZIP archive containing these Web assets 4. Package your application using the WebWorks SDK

21 BlackBerry WebWorks SDK Development Tools PlayBook Development BlackBerry PlayBook Adobe AIR SDK BlackBerry WebWorks SDK for PlayBook WebWorks Application Archive (ZIP) HTML CSS JavaScript

22 BlackBerry WebWorks SDK Development Tools PlayBook Development BlackBerry PlayBook Adobe AIR SDK *.bar BlackBerry WebWorks SDK for PlayBook WebWorks Application Archive (ZIP) Java SDK *.cod Smartphone Development BlackBerry WebWorks SDK BlackBerry Smartphone

23 Required Development Tools Adobe AIR SDK BlackBerry WebWorks SDK for Tablet OS VMware Player BlackBerry PlayBook Simulator

24 Installing the Adobe AIR SDK 24

25 Step 1: Installing the Adobe AIR SDK Download the AIR SDK from Adobe s website:

26 Step 1: Installing the Adobe AIR SDK Extract the contents of the AIR SDK to your computer: Recommend C:\Program Files\Adobe\AirSDK for Windows

27 Step 1: Installing the Adobe AIR SDK

28 Setting Up The WebWorks SDK For PlayBook 28

29 Step 2: Setting up the SDK Download the BlackBerry WebWorks SDK for Tablet OS:

30 Step 2: Setting up the SDK

31 Step 2: Setting up the SDK

32 Step 2: Setting up the SDK Enter the location of where you extracted the contents of the AIR SDK in Step 1

33 Step 2: Setting up the SDK C:\Program Files\Research In Motion\BlackBerry WebWorks Packager for PlayBook

34 Step 2: Setting up the SDK

35 Installing VMware Player 35

36 Step 3: Installing VMware Player Download the VMware player from VMware's website:

37 Step 3: Installing VMware Player

38 Step 3: Installing VMware Player

39 Step 3: Installing VMware Player

40 Step 3: Installing VMware Player VMware installation requires a system restart Coffee break

41 BlackBerry PlayBook Simulator 41

42 Step 4: Setting Up The Simulator Download the BlackBerry PlayBook Simulator:

43 Step 4: Setting Up The Simulator

44 Step 4: Setting Up The Simulator

45 Step 4: Setting Up The Simulator Choose a location to install simulator Installation unpacks a ISO file that will be used by the VMware player Recommend C:\device simulators\<simulator name> on Windows

46 Step 4: Setting Up The Simulator

47 Step 4: Setting Up The Simulator

48 Step 4: Setting Up The Simulator

49 Step 4: Setting Up The Simulator Browse to location where you installed simulator ISO file C:\device simulators\<simulator name>\<iso file>

50 Step 4: Setting Up The Simulator

51 Step 4: Setting Up The Simulator

52 Step 4: Setting Up The Simulator

53 Step 4: Setting Up The Simulator

54 Step 4: Setting Up The Simulator

55 Step 4: Setting Up The Simulator

56 Step 4: Setting Up The Simulator

57 Step 4: Setting Up The Simulator

58 Step 4: Setting Up The Simulator To direct input to virtual machine, press CTRL + G To return to your computer, press CTRL + ALT

59 Step 4: Setting Up The Simulator

60 Step 4: Setting Up The Simulator

61 Step 4: Setting Up The Simulator

62 Step 4: Setting Up The Simulator

63 Writing An App Hello World 63

64 Start Writing Code Open your favorite text editor Create a new file named index.html Add the following HTML content to this file: <html> <head> <style type="text/css"> body { font-size: 5em; } </style> </head> <body> <p> Hello World </p> </body> </html>

65 Start Writing Code Create a second file named config.xml Add the following XML content to this file: <?xml version="1.0" encoding="utf-8"?> <widget xmlns=" xmlns:rim=" version=" "> <name>helloworld</name> <content src="index.html"/> </widget>

66 Start Writing Code Create an archive (ZIP) named helloworld.zip containing the index.html and config.xml files

67 Start Writing Code Using the BlackBerry WebWorks Packager (bbwp.exe) Command line tool used to package the ZIP file From a command prompt navigate to the WebWorks SDK installation folder: C:\Program Files\Research In Motion\BlackBerry WebWorks Packager for PlayBook\bbwp bbwp [drive:][path]archive [/s [dir]] [/o dir] archive Specifies the.zip file to compile /s Save source. The default behavior is to not save the source files. If dir is specified then creates dir\src\ directory structure. If no dir specified then the path of archive is assumed /o Redirects output file location to dir. If both /o and dir are not specified then the path of archive is assumed /v Turn on verbose messages /h Display this usage information

68 Start Writing Code Run the BlackBerry WebWorks Packager (bbwp.exe) Packages the helloworld.zip file into a helloworld.bar PlayBook application C:\Program Files\Research In Motion\BlackBerry WebWorks Pack ager for PlayBook\bbwp>bbwp "c:\sandbox\web apps\helloworld\ helloworld.zip" [INFO] Parsing command line options [INFO] Parsing bbwp.properties [INFO] Validating WebWorks archive [INFO] Parsing config.xml [WARNING] Failed to find a <feature> element [WARNING] Failed to find the <author> element [INFO] Populating application source [INFO] Compiling WebWorks application [INFO] Packaging the bar file [INFO] Bar packaging complete [INFO] WebWorks application packaging complete

69 Start Writing Code

70 Deploying An Application 70

71 Deploying Your Application

72 Deploying Your Application

73 Deploying Your Application

74 Deploying Your Application

75 Deploying Your Application

76 Deploying Your Application

77 Deploying Your Application

78 Deploying Your Application Use the BlackBerry Tablet OS SDK Installed as part of the WebWorks SDK for PlayBook Open a command prompt and navigate to: C:\Program Files\Research In Motion\BlackBerry WebWorks Packager for PlayBook\bbwp\blackberry-tablet-sdk Contains developer tools for BlackBerry Tablet OS: bin\blackberry-packager bin\blackberry-deploy bin\blackberry-signer

79 Deploying Your Application blackberry-deploy -installapp -device <device IP> -package <BAR file path> -password <device password> C:\Program Files\Research In Motion\BlackBerry WebWorks Pack ager for PlayBook\bbwp\blackberry-tablet-sdk>blackberry-deploy -installapp -device package "c:\sandbox\ web apps\helloworld\bin\helloworld.bar" -password pass Sending Install request... Info: Action: Install Info: File size: Info: Installing... actual_dname::helloworld1a833da63a6b7e2098dae6d0662e1.mja5og RhZTZkMDY2MmUxICAgICA actual_id::mja5ogrhztzkmdy2mmuxicagica actual_version:: result::success

80 Deploying Your Application

81 Deploying Your Application

82 Getting Help 82

83 Where To Find Help? BlackBerry WebWorks SDK for Tablet OS: Getting started guides for Windows and Mac Developer tools and sample code downloads Development and API reference guides BlackBerry Development Community Developers Blog: Twitter: Community Web Forum:

84 Where To Find Help? SketchPad Weather RSS Reader Download sample code from the BlackBerry Development Knowledge Base:

85 Webcast Series Developing using BlackBerry WebWorks SDK for BlackBerry Tablets February 1, 2011: Getting Started February 3, 2011: My First App February 8, 2011: BlackBerry PlayBook Integration February 10, 2011: User Interface Guidelines and Best Practices

86 Summary BlackBerry and PlayBook WebWorks Application Platform Create standalone applications using Web technologies Extensions can provide integration with device functionality Use Command Line Tools to build and deploy applications to PlayBook

87 Questions and Answers Free BlackBerry PlayBook tablet offer Next webcast on Feb 3 at 2:00 pm EST My First App 87