Multi-Stage Applications
From WebOS101
Contents |
Introduction
Note: There is a separate page for this topic in regards to the Enyo framework: Multi-Card Applications.
So, you want to add a dashboard stage to your app. Or respond to Alarms. To do either of these, you need a multi-stage application.
Edit your appinfo.json
The first step is to add the following line to your appinfo.json:
"noWindow": true
This tells the framework not to create a default stage for your app - you'll have to do that yourself in your AppAssistant's handleLaunch() method.
Create an AppAssistant.prototype.handleLaunch()
Your handleLaunch() method needs to handle at least three scenarios:
- Create a stage and scene on the app's initial launch
- Activate an existing stage if the app has already been launched (i.e. it was minimized and the user taps on the app icon in the launcher)
- Respond to any launch parameters (i.e. from an Alarm or other source)
You will first get a reference to the stageController for your default stage (if it exists). In the example below, the default stage is called "myStage".
If there are no launchParams and cardStageController is defined, the app was previously launched and we just need to activate the existing stage.
If there are no launchParams and cardStageController is undefined, we have scenario 1: the app has just been launched. We need to create a stage named "myStage" and have it push a scene named "myScene", using createStageWithCallback().
If launchParams are defined, then we know the launch is in response to some other event, such as an Alarm serviceRequest. You can take whatever action is appropriate here, for example creating or activating a dashboard stage, updating the app's icon (see Code Snippets), or whatever you'd like to do.
AppAssistant.prototype.handleLaunch = function(launchParams){
var cardStageController = this.controller.getStageController('myStage');
Mojo.Log.info("controller is: " + cardStageController);
if (!launchParams) {
// FIRST LAUNCH or TAP on Icon when minimized
if (cardStageController) {
// Application already running (scenario 2)
Mojo.Log.info("Relaunch!");
cardStageController.activate();
}
else {
// Need to launch the stage and scene (scenario 1)
Mojo.Log.info("Launch new stage!");
var pushMainScene = function(stageController){
stageController.pushScene('myScene');
};
var stageArgs = {
name: 'myStage',
lightweight: true
};
this.controller.createStageWithCallback(stageArgs, pushMainScene.bind(this), 'card');
}
}
else {
Mojo.Log.info(" Launch Parameters: %j", launchParams)
switch (launchParams.action) {
case 'myParams':
// do other stuff here (scenario 3)
}
}
Scenario 3
So far you've seen how to change what happens when you click on the application icon from the launcher. This section will show how to use scenario 3 in your app. Remember that scenario 3 is when you use launch parameters. This is the code you can use to specifically launch something:
new Mojo.Service.Request('palm://com.palm.applicationManager',
{
method: 'open',
parameters: {
id: Mojo.appInfo.id,
'params': {
action: 'dashAlarm', //<---which case you want to launch
//extra parameters
dashInfo: dashInfo
}
}
}
);
Add a dashboard stage
If, in the above example, scenario 3 is launching a dashboard stage, you can do something like this in your app assistant:
switch (launchParams.action) {
case 'dashAlarm':
dashboardStage = this.controller.getStageController("dashalarm");
if (dashboardStage) {
// Dashboard stage is already open
Mojo.Log.info("DELEGATING TO SCENE ASST");
dashboardStage.delegateToSceneAssistant("displayDashboard", launchParams.dashInfo);
} else {
Mojo.Log.info("No dashboardStage found.");
pushDashboard = function (stageController) {
stageController.pushScene('dashalarm', launchParams.dashInfo);
};
this.controller.createStageWithCallback({name: "dashalarm", lightweight: true},
pushDashboard, 'dashboard');
}
break;
dashalarm-assistant.js:
function DashalarmAssistant(dashInfo) {
if (dashInfo) {
this.dashInfo = dashInfo;
}
}
DashalarmAssistant.prototype.setup = function () {
this.switchHandler = this.launchMain.bindAsEventListener(this);
this.displayDashboard(this.dashInfo);
};
DashalarmAssistant.prototype.displayDashboard = function (dashInfo) {
var renderedInfo, infoElement;
renderedInfo = Mojo.View.render({object: dashInfo,
template: "dashalarm/dashitem-info"});
infoElement = this.controller.get("dashalarminfo");
infoElement.innerHTML = renderedInfo;
Mojo.Controller.getAppController().playSoundNotification("alerts", "");
this.switchHandler = this.launchMain.bindAsEventListener(this);
this.controller.listen("dashalarmmessage", Mojo.Event.tap, this.switchHandler);
this.snoozeHandler = this.launchSnooze.bindAsEventListener(this);
this.controller.listen("dashalarmicon", Mojo.Event.tap, this.snoozeHandler);
};
DashalarmAssistant.prototype.launchSnooze = function () {
Mojo.Log.info("Tap on Snoozer!!!", this.dashInfo.timer);
Miles.setTimer(this.dashInfo.id, this.dashInfo.timer);
this.controller.window.close();
};
DashalarmAssistant.prototype.launchMain = function () {
Mojo.Log.info("Tap on DashAlarm!!!");
this.controller.serviceRequest('palm://com.palm.applicationManager',
{
method: 'open',
parameters: {
id: Mojo.appInfo.id,
params: null
}
}
);
this.controller.window.close();
};
DashalarmAssistant.prototype.activate = function (event) {};
DashalarmAssistant.prototype.deactivate = function (event) {};
DashalarmAssistant.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("dashalarminfo", Mojo.Event.tap, this.switchHandler);
this.controller.stopListening("dashalarmmessage", Mojo.Event.tap, this.switchHandler);
this.controller.stopListening("dashalarmicon", Mojo.Event.tap, this.snoozeHandler);
};
dashalarm-scene.html:
<div id="dashalarminfo" class="dashalarminfo"></div>
dashitem-info.html:
<div class="dashboard-notification-module">
<div id ="dashalarmicon" class="palm-dashboard-icon-container">
<div id="dashboard-icon" class="palm-dashboard-icon dashboard-icon-miles"></div>
</div>
<div id="dashalarmmessage" class="palm-dashboard-text-container">
<div class="dashboard-title">
#{title}
</div>
<div id="dashboard-text" class="palm-dashboard-text">#{message}</div>
</div>
</div>
