More Web OS programming - Adding Models, Views, Controllers to your project.


In WebOS programming everything is about conventions, you create a  certain assistant in the predefined folder with a predefined name. The same for models, views, stylesheets, etc.
This makes the app structure very simple ;)

This is the continuation of the last post so here I go again...

Creating Assistant (or Controllers), Scenes (Views) and Models

In WebOS each scene needs an assistant. Hence creating a scene creates a view and its controller at the same time:

$pwd
/Users/nacho4d/Documents/palmWorkspace
$palm-generate -t new_scene -p "name=myView" Superapp

which means: generate a new scene for Superapp project using the template new_scene and its name is going to be myView.

palm-generate will create a myView-assistant.js file inside Superapp/app/assistants directory and a myView-scene.html file inside a new myView directory inside app, like so:
Superapp/app/myView/myView-scene.html
and finally will add the path of both new files to Superapp/sources.json file. If you prefer it, you can do this process manually and everything will work and give you the possibility of customizing names and places of your new files ;) But that is beyond this post.

There are 4 templates for palm-generate (-t option) and the default is new_app

hello_app        Generates a new application containing a "Hello World" scene.
hello_scene     Generates a "Hello World" scene.
new_app         Generates a new (empty) application.
new_scene      Generates a new (empty) scene.

We do the same process for Models, but manually since there is no template in palm-generate for this.

Create a directory models inside app.
Create a myModel.js and add its path to sources.json file.

So if you create a boxView and its assistant (or controller):
$palm-generate -t new_scene -p "name=boxView" Superapp

and created a box model:
$cd Superapp/app
$mkdir models
$cd models
$touch box.js
$cd ../../
$open sources.json -a Coda.app
then add box.js path like so:

[
    {
     "source": "app/assistants/stage-assistant.js"
    },
    {
        "scenes": "boxView",
        "source": "app/assistants/boxView-assistant.js"
    },
    {
     "source": "app/models/box.js"
    }
]

finally your project should have the following structure:

Be carefull and not make mistakes specially in the paths. (It took me one hour to realize the reason my app was not loading correctly was I missed adding the ','  after the second element of the array in sources.json!! lol)