v0.1

BlackBerry HTML5/WebWorks Applications for the BlackBerry® PlayBook™ Tablet BlackBerry Academic Program

Module 1 - Overview

© 2012 Research In Motion Limited

Module 1 - Overview of BlackBerry HTML5/WebWorks

© 2012 Research In Motion Limited

Objectives In this module the learner will be introduced to:

•What is BlackBerry HTML5/WebWorks?

•Some examples of HTML5/WebWorks applications

•Why develop HTML5/WebWorks applications

•The high-level architecture of HTML5/WebWorks applications

•The detailed architecture of HTML5/WebWorks applications

•Why HTML5/WebWorks is important

•How is HTML5/WebWorks different from other development approaches?

3Overview of BlackBerry WebWorks

© 2012 Research In Motion Limited

Prerequisites For this module, the recommended prerequisite skills and areas of knowledge are:

• Basic knowledge of Web standards such as HTML, CSS and JavaScript®

• Familiarity with:

Model-View Controller (MVC) Pattern and business logic

Javascript libraries such as JQuery™, Dojo™ and Sencha

Webkit browser engine

Java and web (browser) development approaches

Basic knowledge of java programming

4Course Code

© 2012 Research In Motion Limited

What is BlackBerry HTML5/WebWorks?•BlackBerry HTML5/WebWorks is an application platform that enables developers to create standalone applications using modern and standardized web technologies

•Leverages industry web technologies such as Javascript, CSS and HTML5

•HTML5/WebWorks applications are fully-featured “Super Apps” through their ability to integrate with native BlackBerry smartphone and PlayBook features

5Course Code

© 2012 Research In Motion Limited

Examples of BlackBerry HTML5/WebWorks Applications

6Course Code

Facebook for the BlackBerry PlayBook

The Hockey News for the BlackBerry PlayBook Guitar Chords for the BlackBerry PlayBook

The Hollywood Bowl for BlackBerry PlayBook

© 2012 Research In Motion Limited

High Level Architecture

7Course Code

© 2012 Research In Motion Limited

Detailed Architecture

8Course Code

© 2012 Research In Motion Limited

Why is HTML5/WebWorks Important?• It’s a diverse world out there for developers

• Multiple smartphones and operating systems leveraging web technologies

•Strong Web standards supported across multiple platforms

• Reuse Web assets and developer skills to create BlackBerry apps

•The only technology that allows you to target them all is the Web

• Many reusable assets and skills thanks to strong standards

•But allows you to access the richness and differentiators of each platform

• Write-once-run-everywhere approach may not be appropriate or unrealistic (lowest common denominator effect)

9Course Code

© 2012 Research In Motion Limited

How HTML5/WebWorks is Different

10Course Code

• HTML5/WebWorks is a mixed programming environment that:• Is dominantly browser-based• Can make use of Java modules (for business logic for

example)• Can mash up local resources and remote resources alike

© 2012 Research In Motion Limited

Javascript Procedural Approach

11Course Code

<script type="text/javascript">

// Create our Appointmentvar newAppt = new blackberry.pim.Appointment();newAppt.location = "Your office";"Talk about new project";newAppt.summary = // Create our hour time slotvar start = new Date();newAppt.start = start;var end = start.setHours(start.getHours() + 1);newAppt.end= end;

// Create Attendeevar attendees = new Array();var onlyAttendee = new blackberry.pim.Attendee();onlyAttendee.address = "john@foo.com";attendees.push(onlyAttendee);

// Save Appointment newAppt.attendees = attendees;newAppt.save();

</script>

© 2012 Research In Motion Limited

HTML and Service Approach <form id=“form1” method=“POST” action=“device://Calendar/New”

onSubmit =“return XHR.submit (‘form1’, MyCallback) ;”>Location : <input type= “text” name= “location” ><BR>Summary : <input type= “text” name= “summary” > <BR>Start : <input type= “datetime” name=“ start” >,End : <input type= “datetime” name= “end” ><BR>Mandatory : <input type= “text” name= “mandatory”><BR>Optional : <input type=“ atext” name=“ optional” ><BR></form>

<script>function MyCallBack (code, message){if (code==0)alert(‘Calendar entry created successfully’);else alert (‘Woops: ‘+message+’\n(error code: ’+code+’) ’ ); }</script>

12Course Code

© 2012 Research In Motion Limited

SummaryIn this module, the following topics were covered:

• What is HTML5/WebWorks

• Some examples of HTML5/WebWorks applications

• Why develop HTML5/WebWorks applications

• The high-level architecture of HTML5/WebWorks applications

• The detailed architecture of HTML5/WebWorks applications

• Why HTML5/WebWorks is important

• How is HTML5/WebWorks different from other development approaches

• The continuum and where HTML5/WebWorks fits and the procedural versus service approach

13Course Code

© 2012 Research In Motion Limited

Further Learning •Next steps include becoming familiar with the HTML5/WebWorks development tools and downloading & installing the tools

•Next modules in the series include:

• BlackBerry HTML5/WebWorks development tools and installation

•Creating your First BlackBerry HTML5/WebWorks application

•Testing, signing and deploying an application

•Creating Custom API Extensions

14Course Code

© 2012 Research In Motion Limited

Additional Resources Additional Resources

•BlackBerry at GitHub

•BlackBerry HTML5/WebWorks Micro Site

•University of Guelph Center for Mobile Education and Research (CMER)

Video Tutorials

•HTML5 WebWorks Boot Camp Explanation – Mobile World Congress 2011

•Building your first BlackBerry Application using HTML5/WebWorks

•PhoneGap and Ripple Demo

15Course Code

© 2012 Research In Motion Limited

Legal Disclaimer© 2012 Research In Motion Limited. All rights reserved. BlackBerry®, RIM®, Research In Motion® and related trademarks, names and logos are the property of Research In Motion Limited and are registered and/or used in the U.S. and countries around the world. JavaScript is a trademark of Oracle America, Inc.; jQuery is a trademark of the jQuery Project; Dojo is a trademark of The Dojo Foundation. All other trademarks are the property of their respective owners. All other trademarks are the property of their respective owners. This documentation is provided "AS IS" and without condition, endorsement, guarantee, representation or warranty, or liability of any kind by Research In Motion Limited and its affiliated companies, all of which are expressly disclaimed to the maximum extent permitted by applicable law in your jurisdiction.

16Course Code

16