ImageView
From WebOS101
To get a full screen imageView with orientation. The only thing this scene does is display a fullscreen image. Nothing else, but it should be enough to give you more ideas.
function PictureViewAssistant(url) {
/* this is the creator function for your scene assistant object. It will be passed all the
additional parameters (after the scene name) that were passed to pushScene. The reference
to the scene controller (this.controller) has not be established yet, so any initialization
that needs the scene controller should be done in the setup function below. */
this.url = url;
}
PictureViewAssistant.prototype.setup = function() {
/* this function is for setup tasks that have to happen when the scene is first created */
/* use Mojo.View.render to render view templates and add them to the scene, if needed */
/* setup widgets here */
/* add event handlers to listen to events widgets */
this.handleWindowResizeHandler = this.handleWindowResize.bindAsEventListener(this); //Handler function for handling the window resize event (when the orientation has changed
this.controller.listen(this.controller.window, 'resize', this.handleWindowResizeHandler);
this.imageViewer = this.controller.get('divImageViewer'); //Saves a reference to the dom element (the imageView widget)
this.controller.setupWidget('divImageViewer',
this.attributes = {
noExtractFS: true
},
this.model = {
onLeftFunction: function (){
//Put code for grabbing images
},
onRightFunction: function (){
}
}
);
};
PictureViewAssistant.prototype.handleWindowResize = function (event){
if (this.imageViewer && this.imageViewer.mojo) { // Makes sure there is an image viewer and that it is a setup widget
this.imageViewer.mojo.manualSize(this.controller.window.innerWidth, this.controller.window.innerHeight); //Sets the new width and height of the imageViewer to the width and height of the full screen window
}
}
PictureViewAssistant.prototype.activate = function(event) {
/* put in event handlers here that should only be in effect when this scene is active. For
example, key handlers that are observing the document */
this.controller.enableFullScreenMode(true);
this.controller.stageController.setWindowOrientation('free');
this.imageViewer.mojo.centerUrlProvided(this.url); //A url, path to a local image, etc.
this.imageViewer.mojo.manualSize(Mojo.Environment.DeviceInfo.screenWidth, Mojo.Environment.DeviceInfo.screenHeight); // Defaults to the full width and height
};
PictureViewAssistant.prototype.deactivate = function(event) {
/* remove any event handlers you added in activate and do any other cleanup that should happen before
this scene is popped or another scene is pushed on top */
this.controller.stageController.setWindowOrientation('up'); // Not sure if it's needed, but doesn't hurt
};
PictureViewAssistant.prototype.cleanup = function(event) {
/* this function should do any cleanup needed before the scene is destroyed as
a result of being popped off the scene stack */
this.controller.stopListening(this.controller.window, 'resize', this.handleWindowResizeHandler);
};
Here is the view for the scene
