Friday, January 14, 2011

Monday, January 10, 2011

Creating scrollable divs on a Mobile device

On mobile devices the scroll property cannot be set for divs on the page since the page itself is scrollable. Google has released a possible workaround that I am trying to get working. It involves disabling the scroll property of the document and animating the div in response to touch events:

http://code.google.com/mobile/articles/webapp_fixed_ui.html

Update: I just found the YUI Scrollview and (after figuring out a critical step to get the scrollbars to work) its awesome!

http://developer.yahoo.com/yui/3/scrollview/

The problem I ran into was how to get the scrollbars to show up. It turns out that the documentation does not include the need to attach a "yui-skin-sam" style to the container that holds the scrollable div. So in order to make it work here is a very simple example:

http://pastie.org/1454114

Friday, January 7, 2011

Getting local HTML file to load in the Blackberry Playbook

I've been trying out the SDK for the Blackberry Playbook and one thing that was stumping me was how to load a local HTML file using the StageWebView in AIR 2.5.

I placed the local HTML file in the root folder (in the same folder as the .mxml file) and tried to load it this way:

**************

import flash.media.StageWebView;

private var webView:StageWebView = null;

private function init():void{
// get the file location
var f:File = new File("app:/map-simple.html");

webView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.loadURL( f.url );

}

**************

...but it didn't work. Fortunately, I stumbled on this post by Mike Chambers that explains a workaround and recoded the app this way:

**************

import flash.media.StageWebView;

private var webView:StageWebView = null;

private function init():void{

var fPath:String = new File(new File("app:/map-simple.html").nativePath).url;

webView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.loadURL( f.url );
}

***************

This works great!

By the way, I also tried to use the QNXStageWebView in the latest Blackberry SDK but the FlashBuilder (Burrito) compiler gave me the following error:

A file found in a source-path must have an externally visible definition. If a definition in the file is meant to be externally visible, please put the definition in a package.

This apparently has been faced by other developers (see here) using the QNXStageWebView and the Blackberry support boards indicate that this is a beta Class and has numerous issues -- so I decided not to try to find a workaround (which seems to involve digging up an older swc file).

One caution, the AIR StageWebView is also still in beta and does not currently allow for communicating between the base app and the StageWebView object. In my case however, I am just trying to get a fully working HTML app to run on the Playbook.