"blackberry webworks : apps for the smartphone and tablet"
Post on 20-May-2015
2.349 Views
Preview:
DESCRIPTION
TRANSCRIPT
BlackBerry WebWorks: Apps for the Smartphone and Tablet
Alan Wong
Developer Relations | Asia Pacific
alawong@rim.com
November 22, 2011
Agenda
WebWorks Overview
Getting Started
Let‟s Build a WebWorks App
Ripple
@twitterhandle – 2
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
http://entanglement.gopherwoodstudios.com/light
Web Platform Powered by WebKit
• 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
Using HTML5 In Your Application
Touch optimized Web frameworks support multiple platforms
Examples: jQuery Mobile/UI, Sencha Touch, Dojo, AlphaSoftware
Improve the UI and functionality of your application
Save time and money by using existing code!
http://touchsolitaire.mobi/app/
Sencha Touch jQuery Mobile
http://jquerymobile.com/demos/
3rd Party Frameworks
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.
What is BlackBerry WebWorks?
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
BlackBerry Programming Models
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 Smartphone BlackBerry PlayBook
Web = Platform Plurality
• BlackBerry WebWorks applications are supported on
– BlackBerry PlayBook
– BlackBerry 6
– BlackBerry Device Software version 5.0
http://us.blackberry.com/developers/choosingtargetos.jsp
Market for WebWorks Applications
Superheroes Alliance
(Uken Games) Campus Party
(Contento Media)
Guitar Chords
(My App Catalog)
Hollywood Bowl
(LA Philharmonic)
Sea-Web
(Nitobi)
Loca FM
(Vanatur World Mobile)
Real World Examples
Architecture: How Does it Work?
WebKit Engine
WebWorks Platform
Security PIM
Storage
Push
Media Hardware
BBM Monetization
Compression
Background Multi-Tasking
BlackBerry Platform
…
Your app
• User interface
– Powered by Web
– HTML and CSS
• Application logic
– JavaScript®
– WebWorks APIs
– Access to Platform OS
Services & Content
GPS
WEB SERVICES
PUSH
MENUS
APPLICATION INTEGRATION
STORAGE
SYSTEM EVENTS
SQLite
File System
BROWSER ENGINE
What Can a WebWorks App Do?
• 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"/>
Live vs. Local Web Content
CSS 3 is a standardized technology
Supported consistently across different platforms and browser engines
Allows you to design great looking application UI with less code
Great learning resources available:
http://www.css3.info/preview
NetTuts: http://bit.ly/aC5yjS
border-radius: 20px;
box-shadow: .2em .2em .5em #000;
@font-face {
font-family: myCustomFont;
src: url('myCustomFont.otf');
}
Making it Look Good
Use Media Queries to target CSS against different screen sizes
Support both BlackBerry PlayBook and BlackBerry Smartphone applications with same CSS.
Easier management of multiple platforms with single code base
/* BlackBerry Playbook */
@media (min-width:480px) and (max-width:1024px) {
body {
font-family: Calibri;
font-size: 2em;
}
}
/* BlackBerry Torch 9800 */
@media (max-width:360px) and (max-height:480px) {
body {
font-family: Verdana;
font-size: 1em;
}
}
CSS3 Media Query
1024x600 360x480
http://colly.com/
CSS3 Media Query Real World Example
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
How do you build BlackBerry WebWorks Applications?
Java SDK
BlackBerry
WebWorks SDK for
smartphones
BlackBerry WebWorks
SDK for PlayBook
Adobe AIR SDK
BlackBerry Smartphone
BlackBerry PlayBook
Deploy *.bar
WebWorks
Application
Archive (ZIP)
PlayBook
Development
Smartphone
Development
BlackBerry WebWorks SDK Development Tools
Deploy *.cod
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)
@twitterhandle – 20
Download Java SDK (min version 1.6):
http://java.sun.com/javase/downloads/index.jsp#jdk
Step 1: Java SDK 1.6
Download the BlackBerry WebWorks SDK for Smartphone:
http://developer.blackberry.com/html5/download/sdk
Step 2: Set up the SDK
Step 2: Set up the SDK
Getting Started: Building “Hello World”
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>
Start Writing Code: Landing page
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 icons
http://www.orison.biz/apps/playbook-icon-maker/
Image authoring tools (e.g. PhotoShop, GIMP)
Start Writing Code: Icon
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>
Start Writing Code: Config
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
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>
Configuration Document (config.xml)
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
Start Writing Code: Folders
Ripple!
Packaging & Emulating
What is Ripple?
A multi-platform mobile emulator
Renders standardized Web content similar to a web browser
Web inspector debugging & profiling
Emulation of device specific APIs and features
Package and sign BlackBerry applications
@twitterhandle – 32
Installing Ripple
Download installer for standalone Ripple
http://developer.blackberry.com/html5
Install standalone Ripple
Suggest using recommended installation folder
Optional: Ripple extension for Chrome
Required: Google Chome browser
http://ripple.tinyhippos.com
@twitterhandle – 33
Using Ripple
Launch Ripple
Select „WebWorks-OS‟ platform
Explore features
Change platforms
Switch devices
Use Web Inspector
@twitterhandle – 35
Configure settings
SDK Path
Bbwp installer root directory
Project Root
Application source code
Archive Name
Output Folder
Different than project root @twitterhandle – 36
Build using Ripple
Open options menu
Package
Package & Sign
Package & Launch
@twitterhandle – 37
Build using Ripple
@twitterhandle – 38
Optional: BlackBerry Simulator
Simulator included in BBWP install
Launch the Simulator and Load your app using the “Package & Launch” option in Ripple
@twitterhandle – 39
For More Information…
Online resources:
http://developer.blackberry.com/html5
http://blackberry.github.com/
@twitterhandle – 40
Now Let‟s Build Again…
Target: BlackBerry PlayBook
Adobe AIR SDK
https://www.adobe.com/special/products/air/sdk/
VMware Player
http://www.vmware.com/products/player/
BlackBerry WebWorks SDK for Tablet OS
https://bdsc.webapps.blackberry.com/html5/download/sdk
Required Development Tools:
Download AIR SDK (min version 2.7):
http://www.adobe.com/products/air/sdk/
Step 1: Adobe AIR SDK
Download the BlackBerry WebWorks SDK for Tablet OS:
http://developer.blackberry.com/html5/download/sdk
Step 2: Set up the SDK
Step 2: Set up the SDK
Run the PlayBook Simulator
VMware player is available from VMware's website:
http://www.vmware.com/products/player
Open BlackBerryPlayBookSimulator.vmx virtual machine
Found in ~\bbwp\blackberry-tablet-sdk folder
Use “blackberry-deploy” from the BlackBerry Tablet OS SDK
Installed as part of the BlackBerry WebWorks SDK for PlayBook
Deploying Your Application
C:\Program Files\Research In Motion\BlackBerry WebWorks Pack
ager for PlayBook\bbwp\blackberry-tablet-sdk>blackberry-deploy -
installApp -device 192.168.198.134 -package "c:\sandbox\
web apps\helloWorld\bin\helloWorld.bar" -password pass
Sending Install request...
Info: Action: Install
Info: File size: 40731
Info: Installing ...
actual_dname::helloWorld1a833da63a6b7e2098dae6d0662e1.MjA5OG
RhZTZkMDY2MmUxICAgICA
actual_id::MjA5OGRhZTZkMDY2MmUxICAgICA
actual_version::1.0.0.0
result::success
Deploying Your Application
Installing an application:
Deleting an application:
View list of all installed applications:
Run “blackberry-deploy” without any arguments for a complete list of options.
blackberry-deploy –installApp -device 192.168.198.134
-package "c:\sandbox\web apps\helloWorld\bin\helloWorld.bar"
-password pass
blackberry-deploy –deleteApp -device 192.168.198.134
-package "c:\sandbox\web apps\helloWorld\bin\helloWorld.bar"
-password pass
blackberry-deploy –listInstalledApps -device 192.168.198.134
-password pass
BlackBerry Tablet OS SDK
Leveraging Existing Web Assets
Display live content from your Website
Define the <content> element to be a remote URL instead of a local HTML file
Enormous opportunity for Web developers
If you have a Blog, News site, Web site or any online presence, you MUST at the very least create a Tablet OS Web launcher.
Web Launcher
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" version="1.0.0.0">
<name>devBlog</name>
<icon src="icon.png"/>
<content src="http://devblog.blackberry.com/"/>
</widget>
Building a Web Launcher application:
Create folder C:\sandbox\web apps\devBlog
Create the following config.xml file in this folder:
Web Launcher
More APIs
https://developer.blackberry.com/html5/apis
@twitterhandle – 53
THANK YOU
Alan Wong
Developer Relations | Asia Pacific
alawong@rim.com
top related