Palm Pre
Palm Pre is mobile technology and it mainly includes the following functionality
- Move and open multiple applications very easily.
- Palm Services like Backup and restore important data and erase data remotely if phone is stolen or misplace.
- Palm web OS™ platform are integrated with other apps on the phone
What is webOS?
Palm webOS is an embedded operating system developed by Palm, Inc. for a range of devices. It includes many features like designing, coding and debugging.
What is Mojo?
Mojo is “an application framework based on the HTML5, CSS, and JavaScript standards”. Applications built with Mojo “are installed and run directly on the device at native speeds and have access to a wide range of device services”.
While Mojo should be sufficient for developing a wide range of applications, other graphics-intensive programs such as games would probably require a lower-level webOS API. There has been some speculation that Palm will release a second API that enables developers to access the hardware more directly for these types of applications.
Scene:
Scenes are mutually exclusive views of the application within a stage. Most applications provide different kinds of scenes within the same stage, while simple applications (such as Calculator) only have a single scene. Typically, a new scene is pushed after a user action, such as a tap on a UI widget, and the old scene can return with a “back” gesture. Scenes are managed by a scene stack, with new scenes pushed onto and off of the stack with the last scene visible.
Scene assistant:
A scene assistant is a “controller” for a scene. It contains the logic behind how the scene behaves and responds to user input.
Widgets:
Widgets support webOS user interface, and Mojo definies styles for each of the widgets. The styles are available simply by declaring and using the widgets, or they can be overridden either collectively or individually with custom CSS.
The List widget is the most important in the framework, as “the webOS user experience was designed around a fast and powerful list widget, binding lists to dynamic data sources with instant filtering and embedding objects within other widgets and lists.”
Simple widgets include buttons, checkboxes, sliders, indicators, and containers.
The Text Field widget includes text entry and editing functions, including selection, cut/copy/paste, and text filtering, and can be used in conjunction with a list widget.
Menu widgets can be used with specified areas of the screen, including the view and command menus that are completely under your control. The app menu is handled by the system, but custom items can be added to the menu, as well as functions to service the help and preferences items.
Picker and viewer widgets are more complex, with pickers used for browsing and filtering files or contacts, or for selecting addresses, dates or times. Viewers are used to play or view items such as audio, pictures, video or web content within your application.
Requirement for development in Palm Pre
- WebOS Platform
- VirtualBox (Click to Download)
- Mojo SDK Framework (Click to Download)
- Eclipse 3.4.2 (Click to Download)
How to start development in Palm Pre?
Before starting development in Palm Pre you need to download VirtualBox, Mojo SDK and Eclipse 3.4.2 version. Install VirtualBox first, then only download and install Mojo SDK. It is pre-requisite for Mojo SDK installation. When you start installing Mojo SDK, make sure that VirtualBox is not running.
Now Double-click the Palm SDK Installer file.
- The Palm emulator becomes available in the Applications folder.
- The Palm command-line tools become available from the Terminal.
- Create or choose a directory to use as your application development workspace.
You can start the Palm Emulator by double clicking on its icon in the Application directory. At that time Virtual box starts up and creates virtual machine that hosts the Palm Web OS Platform. When you start VirtualBox first time there are several message will come. Just click ok on that diaglog box and continue.
In Eclipse you need to add Mojo SDK plug-ins. For that,
- Start Eclipse.
- go to Help Menu, Select Software Updates and click on Available Software tab.
- click and select Add Site button. and in the location field http://cdn.downloads.palm.com/sdkdownloads/1.1/eclipse-plugin/eclipse-3.4/site.xml and click Ok.
- check Palm Mojo SDK and click Install.
- Restart Eclipse.
After installing Mojo SDK add plugins in the Eclipse,
Selecting the webOS Perspective
1. Select Window > Open Perspective… > Other…
2. Select webOS from the Open Perspective dialog.
3. Click OK.
Preparing webOS Application
From the New Project menu:
1. Start Eclipse.
2. Select File > New Mojo Application.
3. On the next screen, type a name in the Project Name field.
4. Enter your application info:
-
- Title
- Vendor
- ID
- Version
5. Click Finish.
From the New App toolbar menu:
1. In the Eclipse toolbar, click the Mojo Wizard icon and select New App from the drop down menu.
2. On the New Project Wizard screen, type a name in the Project Name field.
3. Enter your application info:
-
- Title
- Vendor
- ID
- Version
4. Click Finish.
Adding a scene to your webOS Application,
From the New Project Menu:
1. Select File > New > Mojo Scene.
2. On the New Mojo Scene Screen, make sure the correct project is selected.
3. Enter a name for your scene and click Finish.
From the New Scene toolbar menu:
1. In the eclipse toolbar, click the Mojo Wizard icon and select New Scene from the drop down menu.
2. On the New Mojo Scene Screen, make sure the correct project is selected.
3. Enter a name for your scene and click Finish.
Running a webOS Application
1. Select Run > Run Configurations…
2. Select Palm Application and click the New Configuration icon to create a new launch configuration.
3. Change the name.
4. Select your project from the drop-down list.
5. Select the Target:
-
- Palm Emulator if you are using the emulator.
- Palm Device if you are using a device (make sure your device is in Developer Mode).
6. Click Run to install and run the application.
Installation starting problem when you run emulator first time.
If you are running on installing the application for the first time in Palm Emulator there is a possibility of getting following error.
Error Message
To fix it you simply need to enter the following two commands in your terminal command prompt:
$ sudo chmod 644 /Library/LaunchDaemons/com.palm.novacomd
$ sudo /opt/nova/bin/post-install.sh
For more information please go through following site, you will find out more regarding this error.
http://www.ozmox.com/2009/07/25/webos-on-mac-os-x/
Tutorial of your First Palm Pre Application development:
Now how to develop first Palm Pre Application, following steps will guide you in details of Palm Pre development.
For that from New Project menu:
1. Start Eclipse.
2. Select File > New Mojo Application.
Give the name of the application.
What is a Stage?
Now in the application you need to set the stage. A stage is the platform on which you build the user interface for your application. A stage generally corresponds to a single card, or application window. Most simple applications have a single stage, contained in the file index.html. An application that lets the user perform more than one action concurrently might require more than one stage. For example, an email application might show the inbox on one stage, but launch a second stage to compose a new email message. Notification and background applications have no stages at all.
So change in the Index.html page.
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en“>
<head>
<title>PalmTest</title>
<script src=”/usr/palm/frameworks/mojo/mojo.js” type=”text/javascript” x-mojo-version=”1″ />
<script src=”app/assistants/stage-assistant.js” type=”text/javascript“></script>
<script src=”app/assistants/first-assistant.js” type=”text/javascript“></script>
<!– application stylesheet should come in after the one loaded by the framework –>
<link href=”stylesheets/main.css” media=”screen” rel=”stylesheet” type=”text/css” />
</head>
<body>
<h2> Testing Application
</h2>
<p>
One stage application
</p>
</body>
</html>
Now create new scene named “First-scene”. It will add two files and one json file.
The palm-generate command creates the view and the assistant for the first scene. It also adds a few lines to sources.json to correlate the assistants and scenes. Take a look at the following files:
- /app/views/first/first-scene.html — This is the view.
- /app/assistants/first-assistant.js — This is the assistant.
- sources.json — This file now includes JSON information that binds first-assistant.js to the first scene.
Now modify the first scene html file for adding new controls.
Open first-scene.html and replace the content with the following
<div>
<div class=”palm-header”>Header</div>
<div id=”count”>0</div>
<div id=”MyButton” x-mojo-element=”Button”></div>
</div>
Now to show the scene, you have to tell stage to push the scene.
To push the application scene
1. Open stage-assistant.js.
2. Edit the StageAssistant function to contain the following:
function StageAssistant () {
}
StageAssistant.prototype.setup = function() {
this.controller.pushScene(“first”);
}
Now how to bind and register the handler, there are two steps.
- binding the handler to the scene assistant’s scope, using bind(this)
- registering the handler as a listener, using Mojo.Event.listen()
Now open first-assistant.js and edit setup function and add following code into that.
FirstAssistant.prototype.setup = function() {
// set the initial total and display it
this.total = 0;
this.controller.get(“count”).update(this.total);
// a local object for button attributes
this.buttonAttributes = {};
// a local object for button model
this.buttonModel = {
“buttonLabel” : “CLICK HERE”,
“buttonClass” : “”,
“disabled” : false
};
// set up the button
this.controller.setupWidget(“MyButton”, this.buttonAttributes, this.buttonModel);
// bind the button to its handler
Mojo.Event.listen(this.controller.get(“MyButton”), Mojo.Event.tap, this.handleButtonPress.bind(this));
}
After creating build, run the application. It will shows the count that how many times you pressed “Click Here” button. It will increase every time you press click button.
PalmPre Sample
Same way you can add more than one scene and navigate from one scene to other scene using following script which will help you to redirect to second scene by pushing the scene.
FirstAssistant.prototype.nextScene = function(event){
if (this.textModel.value == “Testuser”)
{
Mojo.Controller.stageController.pushScene(“second”,this.textModel.value,this.Passowrdmodel.value);
}
else
{
this.labelmodel.value=”Invalid User and Password”;
}
}
And you have your first Palm Pre application ready! I hope you enjoy Palm Pre development and leverage the first mover advantage of the platform.
Following are some good references for Palm Pre development: