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
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,
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