The document provides an overview of web development specifically for Blackberry smartphones, focusing on the advantages and challenges of creating web applications for mobile devices. It outlines various browser options, key features of the Blackberry environment, and design considerations to optimize web applications for smaller screens and variable network speeds. Additionally, it highlights the upcoming features in the Blackberry 5.0 browser and offers resources for developers, including tools and community support.

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