Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,684
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Hands On Lab: BlackBerry WebWorks Bootcamp Alan Wong alawong@rim.com February 26, 2011
  • 2. TODAY’S GOALBuilding an application using the BlackBerry WebWorks App Platform
  • 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. 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. Your First WebWorks Application
  • 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. 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. UI - Adding Application Details
  • 9. Application Details - Preview • These changes affect how your application appears on the BlackBerry Home Screen and System:
  • 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. 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. Step 1: Add HTML - Preview
  • 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. Step 2: Modify HTML - Preview
  • 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. Step 3: Add CSS - Preview
  • 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. Step 4: Modify CSS - Preview
  • 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. 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. 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. 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. 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. 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. Step 6: Modify JavaScript - Preview
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Thank You Alan Wongalawong@rim.comFebruary 26, 2011