WebWorks webinars

Listen to the 4 webinars, byt Adam Stanley and Prosanta Bhattacherjee; they will be useful. I shall summarize here for reference.
http://webcast.streamlogics.com/audience/index.asp?eventid=49950807 Many of the answers are on the developer site and in forums. I’m just leaving some notes here to help address specific points and show some of the times within the seminars.

Main developer site is http://us.blackberry.com/developers/tablet/webworks.jsp


Second webinar
The config.xml file can contain the following tags (each in angled brackets),

name – will show the title of the app on the PB screen
icon – for the app icon, usually an 82 sq png file
content src=”url” – will bring in content from a web reference, usually the developer
access uri=”devblog.blackberry.com” subdomains=”true” – allow connection to this server, can use wild cards here
feature id=”blackberry.app” required=”true” version=”1.0.0.0″ – will allow the app to access the SuperApp api object methods.

Applications don’t need an active network connection, since can cache everything needed. Reference local content with href to local:///page.html. Reference shared camera assets from file:///accounts/1000/shared/camera/image1.jpeg.

Local files are in the bar file.

CSS3 is supported to a large extent. Have a look at http://www.colly.com

We can section the style sheet for different devices,
/* Playbook */
@media (min-width:480px) and (max-width:1024px)
body {
font-family: Calibri;
font-size: 2em;
}
/* Torch */
@media (max-width:360px) and (max-height:480px)
body {
font-family: Verdana;
font-size: 1em;
}

HTML5 – refer to the supported features doc at http://docs.blackberry.com/en/developers/subcategories/?userType=21&category=BlackBerry+Browser
They showed some links to learning sites
Local and session storage – name/value pairs
WebDB as SQLite, implemented asynchronously
Application cache with manifest files
Canvas element for drawing
Device motion and orientation
Web workers are background processes, only via javascript
Form and input types for numeric keyboard and sliders (see webinar 4)

Custom objects for SuperApp functions
See this page for full information, http://www.blackberry.com/developers/docs/webworks/api/playbook/

Use 3rd party frameworks such as Sencha, jQueryMobile, Dojo, Alpha Software etc
eg http://jquerymobile.com/demos/
http://touchsolitaire.mob/app/

To start quickly, just take a site that works and reference in a content tag in the bar file and also reference the local start page. The compiler will bring in all the remote content and package into the bar file. Publish the result into the App store.

Suggested using automation tools:
Spidermonkey, JSLint to validate javascript, etc
MS batch file example (around 48.15)
Helpful links list at (52.10)

Questions/answers
Chrome better than other browsers to test with, since uses WebKit
Use media tags handle rotation of the device; there’s an example of this
Look at 6.0 Torch browser spec; they then add more
Can lock orientation with Air, not yet web works; someone may have done it
They are creating a debugging kit/plugin
Can’t invoke other applications yet, but working on it
WebWorks supports camera
No GPS yet
Java support later
Top bezel should be a custom menu
Inner HTML doesn’t take events
OpenGL not supported by WebWorks, plan is for WebGL in the future
Can bring up the keyboard types from Air
Can pair with a phone to get access to app info
Look at UserAgent to find the device being used, part of the navigator object
Air shared object, max 100k
No integrated debugging yet.

Third webinardev tools > storage can see the data
Relational DB with SQLite – http://www.w3.org/TR/webdatabase/
these are handled asynchronously
HTML5 Application cache using a minfest file
Shows what files should be cached, what we must have, fallback items.

Multimedia Audio and Video
Have programmatic access at run time
Piano example shown (19:30)
Flash 10.1 support, remote content, or local if embed the swf

Touch screen events (not easy to test with mouse?)
Can override the actions – see the SketchPad example
touchstart, touchmove, touchend events
do preventDefault first in the event handler

Accelerometer for movement – http://dev.w3.org/geo/api/spec-source-orientation.html#motion_event

Orientation event is easy, just add handler. Shows which side is UP. Also on blackberry so Torch landscape will be opposite to tablet
WebWorkers for async javascript in background (up to 4?) Create a message ype object, then invoke a worker with that object using a message (at 29:40)

Tablet custom javascript APIs. Only added if you use them and not available in the test browser. eg Application API, blackberry.app.* Need to whitelist in the config.xml file by using the feature node.

Close the app with blackberry.app.exit();

Events happen when move to foreground or background
blackberry.app.event.onBackground(….)

Launch other apps such as Camera or Browser with blackberry.invoke.invoke(id, args)

Tablet OS info from system eg blackberry.system.hasDataCoverage()
similar to navigator.online()

blackberry.system.event for items such as battery level
blackberry.ui for standard UI dialogues, prompts, buttons

Suggested a couple of “must have” features

Check for updates (at 42.20) uses blackberry invoke
Is there a way of testing this?
Move application to background and return to foreground. Set event handlers for these.

Be social – examples for an XMLHttpRequest to read tweets, to get JSON
more robust example in the samples

Uploading files to PHP etc

Learning resources for server side
http://www.w3schools.com/PHP/php_file_upload.asp (php)
http://www.roseindia.net/jsp/file_upload/Sinle_upload.xhtml.shtml (jsp)

Questions
You can use the touch event on a website
Someone suggested there should be an API to show latest app version in the app store
Recommend 82 sq icons, but refer to manual
Playbook browser will be an extension of the Torch browser
Safari is very similar browser for showing web styles, but use the simulator browser
No simulation of blackberry.* testing in Chrome etc, but stay tuned
Orientation change on simulator – click drag on bottom right corner (next release?)
Swipe down and touch on bezel available – system api event
Piano example is slow, but just simulator problem, waiting for the codec
Recommend VMFusion for Mac, but maybe Virtual Box
Can communicate between two different apps through shared storage
Can update app in App store as often as you like, but there is 24hr cache
No web sockets yet, but will be coming
Will try and create an example for bezel events to javascript
WebGL will come later
Encryption – do it yourself or use a library
No Silverlight support
Can’t get pic from invoked camera yet
Can invoke your own app when quit the invoked one.
Can’t side load apps from web page – might use a domain filter in the app store
Maybe a corporate app world but cannot comment until decided
Someone wanted to package a pre-made SQL db – not sure

There is no access to compress/uncompress methods
They are looking at gestural events
Multiple languages through a web service, or embedded resources
Advertising SDK similar to those in Air
There will be a way to do a splash screen similar to Air options
Code signing will be needed (free certificates initially?)
Can get IP address from options screen, if there is no hammer icon

Fourth webinar – UI Guidlines, best practices
1024 x 600 resolution
4 touch points
virtual keyboards

Read the developer guidlines here, http://docs.blackberry.com/en/developers/deliverables/20957/Design_for_users_557731_11.jsp

Customise using the UserAgent, but just look for sub items such as Webkit, Blackberry, Playbook etc
var uw = navigator.userAgent.toLowerCase();
var isBlackberry = (ua.indexOf(“blackberry”) >=0);

Create adaptive content, separate content from presentation,
http://docs.blackberry.com/en/developers/deliverables/20957/Create_adaptable_content_558187_11.jsp

Use CSS files
Recommend using em not px – they are relative to real world
Use enough space around UI items
Allow to resize fonts using percentages
Don’t cram things together
Make it touch friendly
Don’t assume a particular viewport size
Reflow for orientation changes
@media (orientation:landscape) {}
Don’t use keyboard for navigation as it covers the screen
Hover not available
Use the touch events – may get several touches for one event
Use a transition image while http request is handled
rim:loadingscreen in the config file
use indicators while doing slow actions
use CSS3 instead of javascript to do animaitons (they’re native and don’t repaint)
there is no “back” button – you must handle it
maintain and display the navigation context, don’t lose them
(you could measure where they go)
Use HTML5 input types – range, input types, sliders
Use the PLaybook keyboards and UI forms/dialogues
use DHTML not http (jQuery to hide/reveal)
Try and combine multiple changes to the DOM
Use CSS not Javascript when possible
Don’t block the UI
Use webWorkers
Minimise http requests
Processing, wifi, audio all drain battery – minimise them
Suspend timers when you can – esp if go into background
Check battery life API
Don’t assume a live network connection
Be efficient with the web link
Save/restore state
Package as much content as you can

Questions
jQuery mobile should work fine with playbook; it’s being adapted for smart phone
Simulator pinch/multitouch in the simulator coming later
No Perl
No Canvas on OS5 smartphones, only 6
No standard obfuscation
VPN may cause problems w IP address confusion
Multi lingual coming, but don’t have a list
PDF viewer will be built in
missed a bit at the end here….

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s