Published by Althea Elfleda Tolentino McGregor, BlackBerry Dev Alpha, January 2012, Licensed Vendor for BlackBerry World App and Development, Social Media, Digital Content by BlackBerry Laws, Copyrights, Authorship, Commercial Rights and Compliance , Health & Safety Compliance, IP Laws Pioneer for Data Encryption, Global Entrepreneur, Global Sales and Social Media Networking, Global Vending, Attributed Use for all Global Resellers of BlackBerry Products and Services, Digital Content, Patent, Global Promotion for BlackBerry Apps Development and the Foundation for a Raving Tigers BlackBerry Business Solutions as per stipulations and agreements on policies and rights over use , print and distribution to re-distribution over corporations of Global Merchandising of Communication Devices that pioneers data encryption and Social Hubs as attributions to the hallmarks of BlackBerry Dev Alpha C into the market release version of the BlackBerry Z10 and BlackBerry Q10 as separate and treated as one unit of manufactured programming,from its concept to approval which must meet Blackberry standard for its release and hacked for its vulnerability on CrackBerry exclusive to both "Gods" and Demons" of this world of the Fruit-wares, called BlackBerry and these could be coded as well. Z10 and Q10. Written by: Althea Elfleda Tolentino McGregor, Blackberry Dev Alpha A to C, 2012 to present and 10% only addicted, for the love of GOD! No mercy until I get my millions and a private jet, a school or an intellectual law institution or many. I am the Pioneer of WORK IN MOTION FOR my Raving Tigers Business Solutions which is for micro/macro economic developments and dependent on consumerism as well as the provision of scholarships to increase revenues for BlackBerry in the deliverance of its goal for mobilisation of these technologies, as an integral part of the backbone of every struggling small business owners who only needs one device, a BlackBerry. © 2013 Research In Motion Limited, 295 Phillip St., Waterloo, Ontario, Canada, N2L 3W8. All rights reserved. BlackBerry®, RIM®, Research In Motion® and related trademarks, names and logos are the property of RIM and are registered and/or used in the U.S. and countries around the world.

1. Introduction to Web
Development
Prosanta Bhattacherjee
Application Development Consultant
Adam Stanley
Application Development Consultant

2. Agenda
• Why Build Web Applications?
• Browser Options
• Web Standards & Features
• Device Software
• Designing your Web Application
• Pushing Data
• Lessons Learned
• Upcoming 5.0 Browser features

3. Web Applications
Why to build web applications
• Reuse existing development skills
• Reuse existing development tools
• Reuse existing web applications
• Established, well-known standards (HTML, JavaScript®, CSS)

4. Web Applications
Why not to create a web application
• Require access to advanced capabilities of the smartphone (i.e.
camera, SD card, address book, etc)
• Application needs to be functional regardless of coverage
availability

5. Browser Options
• Basic difference between the browsers is where the requests break
out to the internet
• Underlying engine is the exact same
• BlackBerry® Browser
– Requests routed through BlackBerry® Enterprise Server
• Internet Browser
– Requests routed through BlackBerry® Internet Service
• WAP Browser
– Requests routed through Carrier’s WAP gateway
• Hotspot (or Wi-Fi®) Browser
– Requests routed through Wi-Fi access point

6. Browser Options

7. Browser Options

8. Browser Options

9. Browser Options

10. Browser Options

11. Browser Options

12. Mobile Data System
Mobile Data System Connection Service (MDS-CS)
• Performs server side optimizations to improve device
browsing experience
• Generates image thumbnails
• Injects BlackBerry specific HTTP headers
• Pre-compiles JavaScript and sends bytecode to device
• May store user cookies (depending on service
settings)
• Component of BlackBerry Internet Service, and
BlackBerry Enterprise Server

13. Handheld Software
Version 4.5
• Upgrade for all BlackBerry 8000 Series
• Check with carrier for software availability
Version 4.6
• Entirely new browser rendering engine
• Increased support for many different web standards
Version 4.7
• Touch-based navigation
• No significant changes for developers
Version 5.0
• Gears Support
• Scriptable SVG
• HTML5 form controls

14. Development Environment
Use any standard web IDE
• Same development and debugging environment as a desktop
web application
MDS Services Simulator
• Simulators server component of BlackBerry solution
• Bundled with BlackBerry® JDE or available as a separate
download
BlackBerry Device Simulator
• Each simulator package represents a publicly available device
software version
• Simulates almost any facet of a real device (user interface,
keyboard / trackball interaction, network conditions, GPS, etc.)

15. BlackBerry® smartphone simulator
Simulator
• Available for download
• Public Smartphone models
• Simulates behaviours
• User interface
• Network conditions
• Application
• User input interaction
• Test different device models
and software versions

16. Development Environment
• BlackBerry Plug-in for Microsoft Visual Studio
• BlackBerry Web Development Plug-in for Eclipse
• Debugging
• Support for debugging web projects with the
BlackBerry Smartphone
• Profiling
• Visibility into the content of XMLHttpRequest
requests and response data
• Visibility into data traffic for web-based content,

17. Web Development Tools
BlackBerry® Plug-in for Microsoft® Visual Studio® 1.2
www.blackberry.com/developers/webvisualstudio

18. Web Development Tools
BlackBerry® Web Development Plug-in for Eclipse™ 1.0
www.blackberry.com/developers/webeclipse

19. Web Development Tools
Features
• Debugging from the BlackBerry® smartphone
simulator
• Set breakpoints in JavaScript code
• Remote website debugging
• Integrated watch windows
• Improved visibility of XMLHttpRequest data
• Reporting on time-to-load of web resources

20. Features
• Remote Website Debugging
• Production Support
• XmlHttpRequest
• Request, Response
• Profiling
• Images, CSS, HTML, JavaScript

21. Breakpoints in JavaScript
Debug JavaScript code directly
from the BlackBerry®
smartphone simulator
Step through code using
development environment
controls

22. Supported Features - Markup
Content Type Component Partial Support Full Support
HTML 4.01 3.2.1 4.6
Tables 3.8 4.6
Image maps 3.8 4.6
Frames 4.2 4.6
HTML 5 5.0 -
CSS 2.1 3.8 4.6
SVG 3.7 -
XHTML-MP - 3.6
WML - 3.2
Gears Support 5.0 -

23. Supported Features - Markup
Content Type Component Partial Support Full Support
DOM L2 4.6 -
Core - 4.6
HTML - 4.6
Style - 4.6
Events - 4.6
AJAX - 4.6
Javascript 1.5 3.8 4.6
EcmaScript 262 3rd Edition - 3.8
WMLScript 3.2.1 -

24. Supported Features - Markup
Content Type Component Partial Support Full Support
Video
WMV - 4.3
h.263 - 4.6
Audio
MP3 - 4.2
MP4 - 4.2
WAV - 4.2
MIDI - 3.7

25. Supported Features - Markup
Content Type Component Partial Support Full Support
Images
Animated GIF - 3.8
TIFF - 3.7
BMP - 3.7
JPEG - 3.7
PNG - 3.2.1
GIF - 3.2.1

26. Supported Features
BlackBerry smartphones have added functionality
that isn’t typically available in a browser
• Push Content
• Offline forms
• Web Feeds
• GPS
• Content auto-matching

27. Push Content
BlackBerry Enterprise Server
• Channel Push
• Icon pushed to home screen
• Launches browser to selected URL
• Message Push
• Item sent to messages application
• Launches browser to selected URL
• Cache Push
• Content added directly to the browser cache

28. Offline submission queues
Users can submit forms when out-of-coverage
• Submissions get stored in a queue
• Device automatically submits form data when back in
coverage
Uses custom RIM HTTP headers
<input type="hidden" name="x-rim-queue-id” value="ExampleID" />
<input type="hidden" name="x-rim-request-title" value=”Example" />

29. Web Feeds
The BlackBerry Browser has
a Web Feed reader built-in
• Supported formats are:
• RSS 0.9
• RSS 1.0
• RSS 2.0
• ATOM

30. Location Based Services
• GPS
• Browser integrated with device GPS
• “Location” JavaScript API
var lat;
var lon;
if (blackberry.location.GPSSupported) {
lat = blackberry.location.latitude;
lon = blackberry.location.longitude;
}

31. Device Integration
Built in Auto-matching
• Text recognition of
• Phone numbers
• Email addresses
• Web page links
• Can invoke corresponding
application
• x-rim-auto-match

32. Design Considerations
Smaller display size
• Optimize for a reduced screen resolution
• Images are scaled to fit on the screen
Wireless network
• Variable download speeds
Keep it Simple!!
• Avoid excessive download and rendering times
• Only use JavaScript® when required
• Complex pages can be hard to navigate

33. Push Content
• Alert users that new content is available for viewing
• BlackBerry Enterprise Server
– Initiated by posting a request to the BlackBerry Enterprise
Server
– Channel Push
• Icon placed on homescreen
• Launches browser to selected url
• Option for read / unread icon
– Message Push
• Item added to Messages application
• Launches browser to selected url
– Cache Push
• Content added directly to browser cache

34. Widgets
• Leverage web technologies
• Web applications packaged as native apps
• JavaScript API’s
– Access device functionality (camera, media player,
etc)
– Access PIM information (contact book, calendar, etc)
• Deploy through App World

35. Lessons Learned
How do I identify web requests that originate from a
BlackBerry smartphone?
– “Profile” HTTP header
• Identifies a request originating from a BlackBerry
smartphone
• Headers provide location of UAProf file which describe
the capabilities of a mobile device
• URL contains model and device software version
• “http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.5.0.rdf”

36. Lessons Learned
What are emulation modes?
• Allows user to choose the type of content they wish to
view
• Modifies the user-agent to emulator other common
browsers
• Also called “Browser Identification” in device software
4.6
• Sample user-agent values
• Browser Identification: BlackBerry
– “BlackBerry9000/4.6.0.89 Profile/MIDP-2.0
Configuration/CLDC-1.1 VendorID/179”
• Browser Identification: Firefox
– “Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.8.1.14)
Gecko/20080404 Firefox/2.0.0.14”

37. Lessons Learned
How can I determine which browser transport
initiated the request?
• Examine the “Via” HTTP header
• BlackBerry Enterprise Server – starts with “MDS”
– “MDS_4.1.5.32”
• BlackBerry Internet Service – starts with “BISB”
– “BISB_3.3.0.45, 1.1 ….”
• WAP – variable, value set by the carrier
– “1.1 to5magproxy2.int.gprs.rogers.com”
• Hotspot – “Via” header not set

38. Lessons Learned
How do I know if JavaScript is enabled?
• Determine if “Accept” header contains “application:x-
javascript”
• Only reliable if requests routed through BlackBerry
MDS
How do I know if CSS is enabled?
• Determine if “Accept” header contains “text/css”

39. Lessons Learned
How can I control the initial zoom in the 4.6
browser?
• HandheldFriendly meta tag
• Automatically sets page width equal to device width
• <meta name="HandheldFriendly" content="True">
• Viewport meta tag
• Allows developer to explicitly set the width of the
page
• <meta name="viewport" content="width=device-
width"/>

40. Looking Ahead to 5.0
The new 5.0 Browser will support:
• Gears
• Full support excluding localhost
• HTML5 Forms
• Inputmode
• Limit text boxes to only numbers
• Performance enhancements
• Speed enhancements
• JavaScript

41. Summary
• Benefits of developing a web application
• An understanding of various browser options
• Capabilities of the BlackBerry Browser
• Useful tips when developing web applications
• Upcoming 5.0 browser features

42. BlackBerry® Developer Zone
http://www.BlackBerry.com/developers
Resources
• BlackBerry Developer Tools
• BlackBerry Smartphone and
MDS simulators
• Developer Documentation and
Sample Code
• Developer Video Library
• Knowledge Base
• Bug Tracking Database

43. BlackBerry Web Developer Community
Developer Newsletter
• Webcast announcements
• Tools, Tips and Tricks
Web Development Forum
• Discussion topics
• How-to
BlackBerry Developer Blog
• www.Blackberry.com/developers/blog
• Technical Discussions
• Market Insight
• Developer Engagement

44. Thank You
Prosanta Bhattacherjee, Application
Development Consultant
Adam Stanley, Application
Development Consultant