Web works hol

Hands On Lab: BlackBerry WebWorks Bootcamp
Alan Wong
alawong@rim.com
February 26, 2011

TODAY’S GOAL
Building 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 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

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

Your First WebWorks Application

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

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

UI - Adding Application Details

Application Details - Preview

• These changes affect how your application appears on the
BlackBerry Home Screen and System:

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

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

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">

<img src="img/user.png" class="imgIcon"/>
</td>

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>

Step 4: Modify CSS

• 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}

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>

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

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.

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

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

Step 6: Modify JavaScript

• 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);
}

Step 6: Modify JavaScript - Preview

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

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

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

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

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

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

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

Summary

1. BlackBerry Web Plug-in for Eclipse (or Visual Studio 2008)
2. Configuration document is the backbone of a WebWorks app
3. Use JavaScript APIs to access BlackBerry features
4. Distribute your application through App World

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

Thank You
Alan Wong
alawong@rim.com
February 26, 2011

Web works hol

More Related Content

What's hot (19)

Similar to Web works hol (20)

More from momoahmedabad (14)

Web works hol