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

Furthermore, an additional advantage to all developers is the ability to use our favorite FireBug Plugin as Ares has a “Launch on Browser” option alongside the two traditional Launch on Device Or Launch on Emulator Options.

After building a couple of apps the Palm Ares way, I have to say I was impressed with its debugging and log viewer functionality.

The ability to restart the emulator is really sweet too

Consequently, developers have to resort to the old method of including debug code within the App Code itself.

Mojo.Log.* api provides various methods to capture user defined debug statements.

The Logged statements are then viewable by running palm-log -f com.mydomain.app on a command prompt.

As Mojo.Log.* expect all parameters to be strings, use prototype’s Object.inspect(obj) or Object.toJSON(obj) methods to convert any objects to strings.

Ex.
Mojo.Log.Info(“The returned fetch user result object “, Object.toJSON(result));