Transcript Module_1_Overview_instructors

BlackBerry
HTML5/WebWorks
Applications for the
BlackBerry® PlayBook™
Tablet
BlackBerry Academic Program
Module 1 - Overview
v0.1
© 2012 Research In Motion Limited
Module 1 - Overview of
BlackBerry HTML5/WebWorks
© 2012 Research In Motion Limited
Overview of BlackBerry
WebWorks
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
© 2012 Research In Motion Limited
Course Code
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
© 2012 Research In Motion Limited
Course Code
5
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
© 2012 Research In Motion Limited
Course Code
Examples of BlackBerry HTML5/WebWorks
Applications
The Hollywood Bowl for BlackBerry
PlayBook
Guitar Chords for the BlackBerry PlayBook
Facebook for the BlackBerry PlayBook
The Hockey News for the BlackBerry PlayBook
6
© 2012 Research In Motion Limited
High Level Architecture
Course Code
7
© 2012 Research In Motion Limited
Detailed Architecture
Course Code
8
© 2012 Research In Motion Limited
Course Code
9
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)
© 2012 Research In Motion Limited
Course Code
10
How HTML5/WebWorks is Different
• 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
Course Code
Javascript Procedural Approach
<script type="text/javascript">
// 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 = "[email protected]";
attendees.push(onlyAttendee);
// Save Appointment
newAppt.attendees = attendees;
newAppt.save();
</script>
11
© 2012 Research In Motion Limited
Course Code
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>
12
© 2012 Research In Motion Limited
Course Code
13
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
© 2012 Research In Motion Limited
Course Code
14
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
© 2012 Research In Motion Limited
Course Code
15
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
© 2012 Research In Motion Limited
Course Code
16
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