Multi-Card Applications
From WebOS101
Need to create a dashboard in enyo, or have the ability to open different windows depending on app launch parameters?
Start by adding a function in your main index.html to create an applicationRelaunchHandler. This function will be called when your application is relaunched (i.e. by an alarm timer or JustType).
The launcher will be the myAppLaunch enyo kind defined in the next section below, which will handle launching and relaunching the app, creating cards, dashboards, etc as necessary. The relaunch handler is a method of the myAppLaunch kind that handles any app relaunch requests.
<!doctype html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>MyAwesomeApp</title>
<script src="../../../../opt/PalmSDK/Current/share/refcode/framework/enyo/1.0/framework/enyo.js" type="text/javascript" launch="nobridge">
</script>
</head>
<body>
<script type="text/javascript">
(function () {
console.log("My awesome app headless index.html loaded");
var launcher = enyo.application.launcher = new myAppLaunch();
enyo.applicationRelaunchHandler = function (params) {
enyo.application.launcher.relaunch(params);
};
launcher.startup();
})();
</script>
</body>
</html>
You'll need a separate enyo kind (in applaunch.js or similar) to handle the launching/relaunching of your app. For those familiar with Mojo multi-stage apps, this plays a role similar to the AppAssistant.
enyo.kind({
name: "myAppLaunch",
kind: "Component",
components: [
// Application events handlers
{kind: "ApplicationEvents",
// we want to be able to save prefs or
// something when the app is close
onUnload: "cleanup"
},
],
create: function (inSender, inEvent) {
this.inherited(arguments);
// here you can do any app initialization stuff - prefs, intitialize database, etc.
// for this example, we'll just get some app preferences
this.getPrefs();
},
// this is but one way of many for handling app preferences
getPrefs: function () {
//set up default prefs
enyo.application.appPrefs = {
pref1: "someSavedPrefSetting",
pref2: 0,
}
//get prefs from the cookie if they exist
var cookie = enyo.getCookie("myAppPrefs");
this.log(cookie);
if (cookie) {
// mixin will use the cookie value of the pref
// if it exists, else use the default
enyo.application.appPrefs = enyo.mixin(enyo.application.appPrefs, enyo.json.parse(cookie));
}
},
savePrefs: function () {
//this.log("Saving Prefs");
enyo.setCookie("myAppPrefs", enyo.json.stringify(enyo.application.appPrefs));
},
constructor: function() {
this.inherited(arguments);
},
startup: function () {
this.log("Startup in myAppLaunch");
// Get the initial launch parameters to pass to the relaunch handler
// since this is the first time the window is opened
// subsequent launches will call relaunch() directly through
// the applicationRelaunchHandler defined in index.html
var params = enyo.windowParams;
this.log(params);
launcher.relaunch(params);
},
relaunch: function (params) {
this.log("Relaunch in myAppLaunch", params);
// check to see if main app window is already open
var appWindow = enyo.windows.fetchWindow("mainApp");
// check to see if a special param has been sent to the app
// in this case, we may have defined a params.action property in
// JustType to tell the app to do something. Let's assume that our
// params are either: {action: "addData", data: "Some data"} or
// {action: "doSomething"}
if (params.action) {
switch (params.action) {
case "addData":
// open the main window and pass the params along
this.openCard("mainApp", params, false);
break;
case "doSomething":
// if the main app is already open, do one thing
// if not, do something else
if (notesWindow) {
this.openCard("mainApp", params, false);
}
else {
this.something();
}
break;
}
}
else {
this.openCard("mainApp", params, false);
}
},
openCard: function (type, windowParams, forceNewCard) {
var name, path, basePath, existingWin;
name = type;
this.log(arguments);
basePath = enyo.fetchAppRootPath() + "/";
// this assumes a /mainApp folder under the applications root
// path with a separate index.html to launch the mainApp window
if (type === "mainApp") {
path = basePath + "mainApp/index.html";
}
// or if we wanted to launch a different window
else if (type === "somethingElse") {
path = basePath + "somethingElse/index.html";
}
else {
console.error("unknown launch type " + type);
return; // bail out
}
// open the window
var window = enyo.windows.activate(path, name, windowParams);
return window;
},
something: function () {
this.log("We're gonna do something without an app window! (better hope it's quick)");
},
// cleanup was defined above as the onUnload handler for application events
// we'll use it to save any changes to our appPrefs
cleanup: function () {
this.log("Cleanup in appLaunch");
this.savePrefs();
}
});
The index.html for your mainApp window will also set any launchParams for your mainApp kind, in case it's interested in that sort of thing.
<!doctype html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>MyAwesomeApp</title>
<script src="../../../../../../opt/PalmSDK/Current/share/refcode/framework/enyo/1.0/framework/enyo.js" type="text/javascript" launch="nobridge">
</script>
</head>
<body>
<script type="text/javascript">
var theApp = new mainApp();
if (window.PalmSystem && enyo.windowParams){
theApp.setLaunchParams(enyo.windowParams);
}
theApp.renderInto(document.body);
</script>
</body>
</html>
enyo.kind({
name: "mainApp",
kind: enyo.VFlexBox,
published: {
launchParams: null,
},
components: [
// Application events handlers
{kind: "ApplicationEvents", onWindowParamsChange: "handleWinParamsChanged"},
// you might need some stuff here!
],
handleWinParamsChanged: function (inSender, inEvent) {
this.log(enyo.windowParams);
if (enyo.windowParams && enyo.windowParams.action) {
switch (enyo.windowParams.action) {
case "addData":
this.addData({
data: enyo.windowParams.data
});
break;
case "doSomething":
this.something();
}
}
},
addData: function (data) {
this.log("We got some data!", data);
},
something: function () {
this.log("We're gonna do something in the app window!");
}
});
Your directory structure will be something like this, with the depends.js set to load the appropriate files. The paths in depends.js are relative to the corresponding index.html.
App Root
[mainApp]
mainApp.js
depends.js
index.html
[noWindow]
applaunch.js
depends.js
index.html
