Posts Tagged ‘Mojo.Widget.ImageView’

Mojo.Widget.ImageView

Using the ImageView widget is somewhat perplexing. The documentation states:

This widget is designed to view an image full screen with support for zooming and panning…

You would assume that you could simply create the ImageView widget and it would be full screen and handle orientation changes (something very essential and common when viewing photos) out of the box. Unfortunately, this is not the case and some additional code is necessary to get it to function as such.

dotspott photo view

I’ll present some code here, but much of what I did was based on the code at webOS 101.

First, a few additions to the assistant’s activate function:

  • We setup full-screen mode
  • Set “free” orientation (allows the system to rotate the display)
  • Manually size the ImageView widget (id=photoView)
ViewPhotoAssistant.prototype.activate = function(event) {

    
this.controller.enableFullScreenMode(true);
    
this.controller.stageController.setWindowOrientation('free');
$(
'photoView').mojo.manualSize(Mojo.Environment.DeviceInfo.screenWidth, Mojo.Environment.DeviceInfo.screenHeight);

    
/* set images here */
    
};

To actually respond to orientation changes we need to setup an event listener for the “resize” event. This is dealt with in the assistant’s setup function:

ViewPhotoAssistant.prototype.setup = function() {
    
    
var photoViewerAttributes = { noExtractFS: true };
var photoViewerModel = {};

    
this.controller.setupWidget('photoView', photoViewerAttributes, photoViewerModel);
    
    
// setup handler for resize event ...
    
this.handleWindowResizeHandler = this.handleWindowResize.bindAsEventListener(this);
    
this.controller.listen(this.controller.window, 'resize', this.handleWindowResizeHandler);

/* other setup code... */

};

Within the resize event handler, we manually resize the ImageView widget based on the new dimensions of the window:

ViewPhotoAssistant.prototype.handleWindowResize = function (event){
if ($('photoView') && $('photoView').mojo) {
        $(
'photoView').mojo.manualSize(this.controller.window.innerWidth, this.controller.window.innerHeight);
}
}

Finally, in the assistant’s cleanup function, we stop listening on the event:

ViewPhotoAssistant.prototype.cleanup = function(event) {

    
this.controller.stopListening(this.controller.window, 'resize', this.handleWindowResizeHandler);    

};