Wow…finally got to run my very own tutorial on eclipse. Actually developing on a webos SDK is an easy task. If not for the understanding of the architecture, everything else is child’s play I suppose.
If you have a understanding of HTML, CSS and Javascript you must be able to get through. Ok, right to the basics. In a Palm Pre SDK(webos) we have a stage, this stage is the one which is the foundation. On this stage, you can run your scenes. In most cases index.html would be your default stage. So please dont try to run or add anything on the stage.
For example, I tried adding a text field to be displayed on this for nearly two hours, but then finally figured out that it was not possible. Basically, you code your application as a storyline. You go from one scene to the other.
To make it easy first install java, then virtual box from sun and then palm emulator. In eclipse first, add a mojo project. Then you can check out the folder structure as below:
Take a look at the contents of the new HelloWorld folder:
- app folder — contains the assistants, models, and views that make up the application. Later in the tutorial, you add files to this directory.
- appinfo.json — the Application Information file.
- icon.png — the image that the application presents in the Launcher on the emulator or device.
- images folder — any other images the application uses.
- index.html — the main stage on which the application’s scenes appear.
- sources.json — a list of the source files for each scene.
- stylesheets folder — contains the cascading style sheet file for the application.
I wont give you a run through of the structure since you can find it on the palm website. Now since index.html is basically a stage, and you have to add the scenes on top of this. Remember ( as far as I can see) you cant add anything to the stage.
So we go ahead and create a scene in eclipse.
[
{"source": "app\/assistants\/stage-assistant.js"},
{
"source": "app\/assistants\/myscene-assistant.js",
"scenes": "myscene"
}
]
The source.json will be as shown above. So we have the first scene. Next we goto the .html page of the scene where we need to add the display stuff. I just add a textfield as below-
//—————————-
MY ID: <div id=”myId” x-mojo-element=”TextField”></div>
//—————————–
Next we add the code to myscene-assistant.js to display this scene on the stage:
mysceneAssistant.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 from widgets */
var attributes = {
textFieldName: ‘username’,
hintText: ‘Enter Your Username’,
modelProperty: ‘value’
};
this.model = {
};
this.controller.setupWidget(‘myId’, attributes, this.model);
}
//—————————————-
Ok..finally go to the stage assistant and add this line to push the scene on the stage…
StageAssistant.prototype.setup = function() {
this.controller.pushScene(‘enter-reminder’);
}
WOWOWOWO—now you have your very own textfield displaying on the stage. Congrats..