1. v0.1 BlackBerry HTML5/WebWorks Applications for the BlackBerry ® PlayBook™ Tablet BlackBerry Academic Program Module 1 - Overview

2. © 2012 Research In Motion Limited Module 1 - Overview of BlackBerry HTML5/WebWorks

3. © 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? 3 Overview of BlackBerry WebWorks

4. © 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 4 Course Code

5. © 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 5 Course Code

6. © 2012 Research In Motion Limited Examples of BlackBerry HTML5/WebWorks Applications 6 Course 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

7. © 2012 Research In Motion Limited High Level Architecture 7 Course Code

8. © 2012 Research In Motion Limited Detailed Architecture 8 Course Code

9. © 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) 9 Course Code

10. © 2012 Research In Motion Limited How HTML5/WebWorks is Different 10 Course 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

11. © 2012 Research In Motion Limited Javascript Procedural Approach 11 Course Code // Create our Appointment var newAppt = new blackberry.pim.Appointment(); newAppt.location = "Your office"; "Talk about new project"; newAppt.summary = // Create our hour time slot var start = new Date(); newAppt.start = start; var end = start.setHours(start.getHours() + 1); newAppt.end= end; // Create Attendee var attendees = new Array(); var onlyAttendee = new blackberry.pim.Attendee(); onlyAttendee.address = "john@foo.com"; attendees.push(onlyAttendee); // Save Appointment newAppt.attendees = attendees; newAppt.save();

12. © 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 : Summary : Start :, End : Mandatory : Optional : function MyCallBack (code, message) { if (code==0) alert(‘Calendar entry created successfully’); else alert (‘Woops: ‘+message+’\n(error code: ’+code+’) ’ ); } 12 Course Code

13. © 2012 Research In Motion Limited Summary In 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 13 Course Code

14. © 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 14 Course Code

15. © 2012 Research In Motion Limited 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 2011HTML5 WebWorks Boot Camp Explanation – Mobile World Congress 2011 Building your first BlackBerry Application using HTML5/WebWorks PhoneGap and Ripple Demo 15 Course Code

16. © 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. 16 Course Code 16