Embed Size (px)
DESCRIPTION
BlackBerry WebWorks Workshop By: Bhasker Thapan 10-Oct-2012 Noida - India
Citation preview
Topics
Introduction : BlackBerry WebWorks
HTML5
Web App Vs Native App
Why BlackBerry WebWorks
BlackBerry WebWorks App Development
Introduction to BlackBerry WebWorks
Mission….
To create, as a community, a simple to use cross platform SDK for Web Developers to package their Web assets as a
mobile application which has Secure access to deeply integrated system level APIs.
Using HTML5 In Your Application
HTML5 is a standardized technology • Supported consistently across different platforms and engines • Enhancements to existing standard allow integration with
platform
See “HTML reference – BlackBerry browser” documentation • Complete list of BlackBerry supported HTML5 elements • http://bit.ly/aGFoub
Many great HTML5 learning resources available online • http://diveintohtml5.org/ • http://html5demos.com • http://www.w3schools.com/html5/default.asp • http://www.html5test.com
Web App Vs Native App
Native App Web App
Internet Access Not Required Required
Performance Yes No
Hardware Access Yes No
OS Access Yes No
Hardware & Platform
Dependent
Yes No
Installation Must be Installed URL link
Updates Reinstallation Simple
Why 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.
Why BlackBerry WebWorks ?
The richness of device access and reuse of assets . The simplicity of the browser programming model. 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
BlackBerry WebWorks applications are supported on
All BlackBerry PlayBook All BlackBerry 6 onwards including
BlackBerry 10 More than 60 Million Users
What Can a WebWorks App Do?
Live vs. Local Web Content
A WebWorks application does not need an active network connection
Created using Web technologies, but designed to function offline
Web assets of your application can be local: <a href="local:///index.html">Home</a> <a href="file:///accounts/1000/shared/camera/IMG_01.jpg"> Camera Pic</a>
Can also use live resources to populate content dynamically
<img src="http://www.mysite.com/image1.png"/>
How to build BlackBerry WebWorks Applications?
1. Create your application web files.
2. Test and debug your application with the Ripple emulator.
3. Create a BlackBerry WebWorks configuration document (config.xml)
4. Package your application using the Ripple emulator.
5. Deploy your application to a BlackBerry device or simulator.
Let’s Build a WebWorks Application
Target: BlackBerry Smartphone
Dev environment setup Required to package WebWorks file assets into a
BlackBerry application BlackBerry WebWorks SDK for Smartphone
Java SDK 1.6 BlackBerry WebWorks SDK Optional: BlackBerry Smartphone simulator
(Windows Only) Step 1 . Download and Setup Java SDK (min version 1.6): http://java.sun.com/javase/downloads/index.jsp#jdk
Step 2. Download and Setup the BlackBerry WebWorks SDK for Smartphone: http://developer.blackberry.com/html5/download/sdk Step 3. Download and Setup Ripple (Standalone) http://developer.blackberry.com/html5
Hello World
my first app
1. Start Writing Code: Landing page
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>
2. Start Writing Code: Icon
① Create a home screen icon named icon.png Recommended dimensions: 92 x 92 pixels Recommended file format: PNG
② Use existing assets: Re-use images from your own Web site Royalty free images online
③ Create your own icon http://www.orison.biz/apps/playbook-icon-
maker/ Image authoring tools (e.g. PhotoShop,
GIMP)
3. Start Writing Code: Config
Create a second file named config.xml
Add the following XML content to this file:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0.0"> <name>Hello World</name> <icon src="icon.png"/> <content src="index.html"/> </widget>
4. Configuration Document (config.xml) XML document based on W3C spec
http://www.w3.org/TR/widgets/#configuration-document0
Used to define system properties and application permissions
Application name, description, version and icon Maintains a list of domain and feature permissions
See “Code sample: Creating a BlackBerry WebWorks configuration document” for full details
http://bit.ly/fdOiO6
4. Configuration Document (config.xml) Define visual characteristics for your application
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" version="1.0.0.0">
<name>helloWorld</name>
<icon src="icon.png"/>
<content src="index.html"/>
</widget>
5. Start Writing Code: Folders
Keeping your application files organized and well structured.
No IDEs or project files
Steps:
1. Create folder C:\sandbox\web apps
2. Create folder C:\sandbox\web apps\helloWorld
3. Save index.html and config.xml in the helloWorld folder
6. Ripple! : Packaging & Emulating
Launch Ripple : Select ‘WebWorks-OS’ platform
Configure Settings
SDK Path: Bbwp installer root directory
Project Root: Application Source Code
Archive Name
Output Folder
Different than project root.
6. Ripple! : Packaging & Emulating
Build Using Ripple : Open options Menu
Package
Package & Sign
Package & Launch
Thank you.
