WebOS Custom Widget Example

Refer to Palm’s Documentation

Lets build a quick custom widget, nothing special, just a plain input type text widget as a learning experience.

1. Create a new javascript file on the root of the “App” directory, with the same name as your custom widget ex. myTextWidget.js

2. The file above ie myTextWidget.js, contains the code required to setup and render your widget.

3. Widgets are javascript objects defined in the Mojo.Widget namespace

Mojo.Widget.myTextWidget = Class.create({
initialize: function()
{
},
setup: function()
{
this.renderWidget();
},

renderWidget: function()
{
//all html representation of the widget including widget model & attributes parameter substitutions are handled here
//in our case we make use of Mojo.Render.View()
}
});

4. Create a directory on the root of the “app/views” directory. You can name is what ever you want! ex. app/views/myTextWidget

5. Within the newly created directory, create a new html file that will be the template file for your widget ex. app/views/myTextWidget/myTextWidget.html

<input id=”#{divPrefix}” name=”#{textFieldName}” style=”#{show}” type=”text” maxLength=”#{maxLength}”/>

6. Lets go back into app/myTextWidget.js and complete the renderWidget method

renderWidget: function()
{
//all html representation of the widget including widget model & attributes parameter substitutions are handled here
//in our case we make use of Mojo.Render.View()

//define a model with the properties required by the html template

model = {
‘divPrefix’ : ‘mytext’,
‘textFieldName’: ‘mytextfield’,
‘show’: ”,
‘maxLength’:20
};

var mytemplate = “myTextWidget/myTextWidget”;

/*

* The WidgetController sets the following standard properties on itself:
*
*         element: the widget’s div element in the DOM.
*         scene: the SceneController for the widget’s scene.
*         model: the widget’s model, if appropriate  This is the object containing the data the widget will display.
*         attributes: the widget’s attributes (like model, defines widget configuration, does not change between list items).
*/

this.controller.element.innerHTML = content;

return;

}

7. We then add the myTextWidget.js to the sources.json file,

{

“source”, “app\/myTextWidget.js”

}

8. Time to use our new Widget!  – Drag the <HTML/> widget onto the ~-chrome.js file (canvas), add

<div id=”widget1″ x-mojo-element=”myTextWidget”></div>

on to the content input box. (right hand side -> settings -> common)

9. setupWidget in the sceneAssistant setup method:

this.controller.setupWidget(“widget1”, {}, {});

Thats it!

Video Capture Part One

Video Capture Part Two