Today we’ll take a look at the Jo Javascript Framework. From the project’s website:
“Jo is a JavaScript framework for HTML5 capable browsers and devices. It was originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap. Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even Dashboard widgets.”
This tutorial is based on “Une Webapp en moins de 10 minutes avec Jo” http://www.k33g.org/?q=node/50
Let’s go ahead and create a quick little application called “Todo” for webOS with the Jo Javascript Framework:
Project Website: joapp.com
Download: https://github.com/davebalmer/jo/downloads (0.3.0 at the time of writing)
Documentation: http://joapp.com/docs/index.html
Download Jo and unpack it to a new directory, in our case jo_0.3.0. Let’s create a new subdirectory called projects and in that one another subdirectory for our project called todo. Copy the css folder from jo_0.3.0 and the js/jo_min.js file and put it in the root of our todo directory. Now create a new file index.html, this will be the file for our Application. Edit it to contain:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My ToDo List</title>
<!-- stylesheets -->
<link rel="stylesheet" href="css/jo.css" type="text/css">
</head>
<body onload="App.load();">
<!-- lib -->
<script src="jo_min.js"></script>
<!-- app -->
<script>
// Start "Jo"
jo.load();
var App = {
// app init
load: function() {
// create a screen and a scroller
this.screen = new joScreen([
this.stack = new joStackScroller()
]).setStyle("stretch-full");
// create a new card with a title
this.card = new joCard([
new joTitle("My ToDo List"),
]);
// push the card to the stack
this.stack.push(this.card);
},
};
</script>
</body>
</html>
As you can see, Jo uses a similar stack and card system as webOS.
Test the Application in your desktop browser first, we’ll package it for webOS later.
Let’s add a Group (that groups elements together) containing an Input Field and Button:
// create a new card with a title
this.card = new joCard([
new joTitle("My ToDo List"),
new joGroup([
new joLabel("I need to : "),
this.currentTask = new joFlexrow(this.myinput=new joInput("enter Todo")),
this.addTask = new joButton("Save").selectEvent.subscribe("none", this)
]),
]);
We’ll also add some predefined tasks. These would probably come from a database or web-service in a more refined version of this Application.
var App = {
// have some persistent entries
tasks: ["Wash the dishes", "Take out the trash", "Clean the room"],
// app init
load: function() {
Those predefined (and also the tasks we add manually) will show up in a list farther down, let’s add that:
new joGroup([
new joLabel("I need to : "),
this.currentTask = new joFlexrow(this.myinput=new joInput("enter Todo")),
this.addTask = new joButton("Save").selectEvent.subscribe("none", this)
]),
this.taskListcontrol = new joList(this.tasks).setAutoSort(true),
]);
Now lets add the functionality needed to add a new task to the list:
// push the card to the stack
this.stack.push(this.card);
},
addNewTask: function(){
//push the new task to the tasks array
this.tasks.push(this.myinput.getData());
//refresh our list
this.taskListcontrol.refresh();
//create a popup notification
this.screen.alert("New Task", "The new Task has been saved.");
},
To make it work, we also need to modify the button code:
this.addTask = new joButton("Save").selectEvent.subscribe(this.addNewTask, this)
Test it again in the desktop browser and make sure it works. To make a webOS application, we just need to change a few things:
add an appinfo.json file with the following contents:
{
"id": "com.inorbit.todo",
"version": "0.0.1",
"vendor": "ThinMachine",
"type": "web",
"main": "index.html",
"title": "Todo",
"icon": "icon.png"
}
Change the id,vendor and title values to your liking and save the file.
Since we’re not using the Mojo Framework from the webOS SDK, we need to add one statement:
// Start "Jo"
jo.load();
if (window.PalmSystem) {
window.PalmSystem.stageReady();
}
var App = {
This tells the Palm Browser that our Application is ready when it starts.
Let’s package and install our webOS App:
palm-package todo
palm-install com.inorbit.todo_0.0.1_all.ipk
Either install it to the webOS emulator or to your webOS Device.
