Hands On Lab: BlackBerry WebWorks Bootcamp                  Alan Wong              alawong@rim.com              February 2...
TODAY’S GOALBuilding an application using the BlackBerry WebWorks App Platform
Setup• This lab will use the following developer tools:   – Oracle Java Development Kit (JDK) version 1.6   – BlackBerry W...
First Steps: Create a New Project • Open Eclipse    – Optional: Create a “blackberry” workspace    – Optional: Open BlackB...
Your First WebWorks Application
UI – Add Visual Resources • Keep Simulator Open • Back to the MyFirstApp Project in Eclipse • Add Images to the project:  ...
UI - Adding Application Details• Open the WebWorks Configuration file (config.xml)   1.   Add application details:        ...
UI - Adding Application Details
Application Details - Preview • These changes affect how your application appears on the   BlackBerry Home Screen and Syst...
Building Blocks of a WebWorks Application • HTML    – Use HTML to create the structure of a screen • CSS    – Use CSS to a...
Step 1: Add HTML• Add HTML files to the MyFirstApp project   1.   Right Click Project  Import  General  File System   2...
Step 1: Add HTML - Preview
Step 2: Modify HTML• Lets add some missing pieces• Open index.html and feedback.html and selections.html   – Remove border...
Step 2: Modify HTML - Preview
Step 3: Add CSS • Add a CSS file to the MyFirstApp project    – Right Click Project  File  Import  General  File Syste...
Step 3: Add CSS - Preview
Step 4: Modify CSS • Lets add some missing pieces • Open styles.css    – Add missing styles to the body definition:    bod...
Step 4: Modify CSS - Preview
Step 5: Add JavaScript • Add JavaScript files to the devConWidget project    – Right Click Project  Import  General  Fi...
Step 5: Add JavaScript - Review • Open and review scripts.js file • JavaScript provides application functionality    – sha...
Step 5: Add JavaScript - Adding Features • What happens if you try to run the app now?    – Error? This is expected at thi...
Step 5: Add JavaScript - Adding Features • Open Configuration file (config.xml)    – Any WebWorks JavaScript APIs used by ...
Step 5: Add JavaScript - Preview • User can now click on interactive fields    – User Icon = Share With a Friend    – Enve...
Step 6: Modify JavaScript • Lets add some missing pieces • Open scripts.js    – Complete the handleBackKey function (used ...
Step 6: Modify JavaScript - Preview
Step 7: Enable Navigation Mode• Open Configuration file (config.xml)     – Enable “Use focus-based navigation …”       che...
Step 7: Enable Navigation Mode -Preview   BEFORE:                           AFTER:   Default Navigation uses a         Foc...
Lab Complete                        Congratulations! • You have created a fully working BlackBerry application:    – Writt...
Next Steps – Keep building • Explore other WebWorksAPI features    – Revise and improve the source code created in this la...
Next Steps – Code Signing • Application must be signed before it can run on a live device    – Signature keys are files us...
Next Steps – App World Examples• Submit your WebWorks applications to App World   http://appworld.blackberry.com/webstore/...
Sneak Peek – PlayBook WebWorks• Re-Build your existing WebWorks applications for PlayBook   – SDK produces a *.bar applica...
Summary1. BlackBerry Web Plug-in for Eclipse (or Visual Studio 2008)2. Configuration document is the backbone of a WebWork...
For More Information• BlackBerry Developer Zone:   – Download BlackBerry development tools & simulators   – Developer Reso...
Thank You    Alan Wongalawong@rim.comFebruary 26, 2011
Upcoming SlideShare
Loading in...5
×

Web works hol

2,728

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,728
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web works hol"

  1. 1. Hands On Lab: BlackBerry WebWorks Bootcamp Alan Wong alawong@rim.com February 26, 2011
  2. 2. TODAY’S GOALBuilding an application using the BlackBerry WebWorks App Platform
  3. 3. Setup• This lab will use the following developer tools: – Oracle Java Development Kit (JDK) version 1.6 – BlackBerry WebWorks Packager version 1.5 – BlackBerry WebWorks Plug-in for Eclipse version 2.5• Lab Sample Code – Starter and Solution Files Source Code • Images, HTML + CSS + JavaScript – Available on site
  4. 4. First Steps: Create a New Project • Open Eclipse – Optional: Create a “blackberry” workspace – Optional: Open BlackBerry Web/Widget Perspective • Create a new BlackBerry WebWorks Project – File  New  BlackBerry Widget Project – Name the project “MyFirstApp” • Start a new debugging session – Packages and launches application in Smartphone simulator
  5. 5. Your First WebWorks Application
  6. 6. UI – Add Visual Resources • Keep Simulator Open • Back to the MyFirstApp Project in Eclipse • Add Images to the project: 1. Create “img” folder • Right Click Project  New  Other …  General  Folder  “img” 2. Import images from Lab Samples Folder • Right Click “img” folder  Import  General  File System • Browse to <lab samples folder>/ img • Select all images and Import
  7. 7. UI - Adding Application Details• Open the WebWorks Configuration file (config.xml) 1. Add application details: • Version – “1.0.0.1” • Description – “This app was created using BlackBerry WebWorks” • Author & Email & Copyright – your name & email & “2011” 2. Click Browse button next to Loading Screen  Foreground Image • Select the loading.png image • Enable “Show on First Launch” and “Show for Local Pages” checkboxes • Choose any “Transition Effect” from the “Type” drop down box • Set Background Color #: “92CD00” 3. Click Browse buttons next to Widget Configuration  Icon/Hover Icon • Select the homescreen.png image
  8. 8. UI - Adding Application Details
  9. 9. Application Details - Preview • These changes affect how your application appears on the BlackBerry Home Screen and System:
  10. 10. Building Blocks of a WebWorks Application • HTML – Use HTML to create the structure of a screen • CSS – Use CSS to apply a theme / style to your application • JavaScript – Use JavaScript to add functionality in your application • Index.html – By default a WebWorks application loads this page as its starting point – Initial launch page can be overridden in config.xml
  11. 11. Step 1: Add HTML• Add HTML files to the MyFirstApp project 1. Right Click Project  Import  General  File System 2. Browse to Lab Samples folder 3. Select all HTML files: • index.html • feedback.html • selections.html 4. Click Finish to import all of these files into the project 5. Overwrite index.html file• Start debug session to preview changes
  12. 12. Step 1: Add HTML - Preview
  13. 13. Step 2: Modify HTML• Lets add some missing pieces• Open index.html and feedback.html and selections.html – Remove borders from all tables<table style="width:100%;" cellspacing="0" cellpadding="0" border="0"> – Replace five image placeholders with corresponding <IMG> tags • Top: Left = User.png; Right = Selections.png • Bottom: Left = Feedback.png; Middle = Calendar.png; Right = Messenger.png <td id="shareIcon"> <!-- Add image here: img/user.png --> <img src="img/user.png" class="imgIcon"/> </td>
  14. 14. Step 2: Modify HTML - Preview
  15. 15. Step 3: Add CSS • Add a CSS file to the MyFirstApp project – Right Click Project  File  Import  General  File System – Browse to lab samples folder • styles.css – Import this file into the project • Open each of the 3 HTML files – Add a reference to the stylesheet at the start of the <HEAD> tag<head> <link type="text/css" rel="stylesheet" href="styles.css"/> ...</head>
  16. 16. Step 3: Add CSS - Preview
  17. 17. Step 4: Modify CSS • Lets add some missing pieces • Open styles.css – Add missing styles to the body definition: body { font-family: Helvetica, Arial; background-color: #92CD00; color: black; padding: 0.5em; } – Add missing styles to #pageTitle definition: #pageTitle { font-weight: bold; font-size: 200%; text-align: center; vertical-align: middle; background-color: #E5E4D7; border-top: solid 2px #2C6700 border-bottom: solid 2px #2C6700}
  18. 18. Step 4: Modify CSS - Preview
  19. 19. Step 5: Add JavaScript • Add JavaScript files to the devConWidget project – Right Click Project  Import  General  File System – Browse to lab samples folder and import the following files: • json2.js • scripts.js • session_data.json • Open all three HTML files (index.html, feedback.html, selections.html) and add references to these two JavaScript files:<head> <link src="style.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="json2.js"></script> <script type="text/javascript" src="scripts.js"></script> ...</head>
  20. 20. Step 5: Add JavaScript - Review • Open and review scripts.js file • JavaScript provides application functionality – shareWithFriend() • New Email screen opened in the Messages application – addMenus() • When Menu object is selected, a callback JavaScript function is invoked – showAbout() • Displays application details saved in config.xml – checkForUpdates() • Launches BlackBerry App World to a specified application page – addToCalendar() • Create a new pre-filled appointment the Calendar application
  21. 21. Step 5: Add JavaScript - Adding Features • What happens if you try to run the app now? – Error? This is expected at this point – Need to add the JavaScript APIs used to the whitelist.
  22. 22. Step 5: Add JavaScript - Adding Features • Open Configuration file (config.xml) – Any WebWorks JavaScript APIs used by application must be white listed – Add features in the Widget Permissions section of config.xml – Runtime errors may occur if features are not properly listed
  23. 23. Step 5: Add JavaScript - Preview • User can now click on interactive fields – User Icon = Share With a Friend – Envelope Icon = Feedback – Calendar Icon = Add session details to Calendar
  24. 24. Step 6: Modify JavaScript • Lets add some missing pieces • Open scripts.js – Complete the handleBackKey function (used on all screens): function handleBackKey() { if (confirm("Would you like to exit?")) { blackberry.app.exit(); } } – Complete the displaySessionInfo function (used on index.html): function displaySessionInfo(id) { currentSession = new Object(); currentSession.id = id; req = new XMLHttpRequest(); req.onreadystatechange = handleDisplaySessionInfo; req.open(GET, "local:///session_data.json", true); req.send(null); }
  25. 25. Step 6: Modify JavaScript - Preview
  26. 26. Step 7: Enable Navigation Mode• Open Configuration file (config.xml) – Enable “Use focus-based navigation …” checkbox• Open all 3 HTML files – Add focusable property to each of the interactive <td> tags<td id="shareIcon" x-blackberry-focusable="true" onclick="shareWithFriend()"> <img src="img/user.png" class="imgIcon"/></td> – index.html: shareIcon, selectIcon, feedbackIcon, calendarIcon, messengerIcon – feedback.html: shareIcon, homeIcon – selections.html: shareIcon, homeIcon
  27. 27. Step 7: Enable Navigation Mode -Preview BEFORE: AFTER: Default Navigation uses a Focus Navigation is based on pointer to interact with screen trackpad / trackball movement
  28. 28. Lab Complete Congratulations! • You have created a fully working BlackBerry application: – Written entirely using Web technologies: HTML, CSS, JavaScript – Did not write a single line of Java code
  29. 29. Next Steps – Keep building • Explore other WebWorksAPI features – Revise and improve the source code created in this lab – http://www.blackberry.com/developers/docs/widgetapi • Suggestions: – Use System API to access system level functions and attributes – Proactively send updates to your users using Push API
  30. 30. Next Steps – Code Signing • Application must be signed before it can run on a live device – Signature keys are files used by the code signing tool – Signing process is integrated into the Development tools – Purchase keys for a one-time fee from BlackBerry DevZone – Testing on a Smartphone simulator does not require code singing http://na.blackberry.com/eng/developers/javaappdev/codekeys.jsp
  31. 31. Next Steps – App World Examples• Submit your WebWorks applications to App World http://appworld.blackberry.com/webstore/search/webworks All Guitar Chords Chatmosphere IRC Hollywood Bowl
  32. 32. Sneak Peek – PlayBook WebWorks• Re-Build your existing WebWorks applications for PlayBook – SDK produces a *.bar application file instead of *.cod – Support both BlackBerry platforms with the same source code – Attend HOL6 (Tim Neil, Prosanta Bhattacherjee) for more info
  33. 33. Summary1. BlackBerry Web Plug-in for Eclipse (or Visual Studio 2008)2. Configuration document is the backbone of a WebWorks app3. Use JavaScript APIs to access BlackBerry features4. Distribute your application through App World
  34. 34. For More Information• BlackBerry Developer Zone: – Download BlackBerry development tools & simulators – Developer Resource Center – Web Community Forum – Developers Blog: http://devblog.blackberry.com – Twitter: http://twitter.com/BlackBerryDev – App World: http://www.blackberry.com/developers/appworld http://www.blackberry.com/developers/widget
  35. 35. Thank You Alan Wongalawong@rim.comFebruary 26, 2011

×