jMaki for Widgets Developers

This document covers all the jMaki Client Services that you may use and covers Configuring jMaki the config.json to use 3rd party libraries. This document assumes that you understand the Model Widget Model.

jMaki Client Services

The jmaki.js does more than load script dependencies and boot-strapper widget instances. It can also be used to make XMLHttpRequests, load additional resources, provide inter-widget communication using publish and subscribe, and store widget instances to be shared across an application.

Loading Script/Style/Resource Dependencies

Some widgets may require additional scripts or styles to be loaded. jMaki provides widgets the necessary APIs to do so through the loadScript and loadStyle APIs that are functions in the jmaki namespace. The usage is as follows:

// load library dependency
jmaki.loadScript(jmaki.resourcesRoot + "/libs/yahoo/calendar/calendar.js");
// load a style dependency
jmaki.loadStyle(jmaki.resourcesRoot + "/libs/yahoo/calendar/assets/calendar.css");

This function makes a synchronous call to load the defined script. This function is useful if later portions of your bootstrap script require functionality defined in the provided scripts. The "/" is used to specify the web root of the web application. If you are bunndling scripts with your widget consider using the widget property widget.widgetDir to specify the location of the script relative to the widget.

Accessing Widget Instances and Sharing Properties

There may come a time to access other widget instances. This can be done using publish subscribe or you can look up the instance in a map object called jmaki.getWidget passing in the id of the widget. Each widget instance is placed in this map automatically using the widgets uuid after it is created and instantiated.

Following is an example of a component that uses the jmaki properties map (jmaki.attributes) to store a reference to the instance for later use. = function(wargs) {
  this.calendar = new YAHOO.widget.Calendar("cal1", wargs.uuid);

The a link from the template HTML can now access this instance with the following code:

<div id="${uuid}"></div>

<a href="javascript:alert(jmaki.getWidget('${uuid}').calendar.getSelectedDates())">Show Selected Data</a>

In this case the attributes are accessed by the same component. Keep in mind that if you try to share attributes across widget instances that the widgets defined earlier in the page may not have been initialized yet. Widgets are loaded asynchronously.

Creating XMLHttpRequests in the component.js

Use thejmaki.doAjaxin to make XMLHttpRequests. The following example shows the usage of the API.

function sendMessage() {
    var messageText = document.getElementById(uuid + "_messageText");
    var url = service + "?action=add-message&message=" + messageText.value + "&userid=" + userId;
    jmaki.doAjax({url: url,
                  callback: function(req) {
                      // do post processing
    // clear the message field
    messageText.value = "";
    return false;

Publish/Subscribe Communication

If you need to communicate across components consider using "topic" based communication which allows you to communicate anonymously across components. See: Publish Subscribe Communication in jMaki for more details.


JavaScript Recommendations for AJAX Component Writers

- Essential if you are going to write widgets.

Events For JavaScript Components

- Essential for providing communication across widgets.