Hello World Widget

For creating real working widget it is required two files, these files are:

• helloworld.js - actual widget implementation
• config.xml - configuration descriptor of the widget

Under the “udw” folder create new folder and name it “helloworld”. Under the newly created folder create two files as listed above. After performing these steps you will get structure shown on the picture:

First of all we need to write widget's implementation code. Open helloworld.js file and copy and paste code shown below:

(function() {
 
    /**
     * Define widget class
     */
    function HelloWorld() {
 
        /**
         * set initial configuration
         */
        this.config = {
            name: 'helloworld',
            title: 'Hello World Widget'
        };
 
        /** 
         * disable refresh button because there is nothing to refresh
         */
        this.disableRefresh = true;
 
        this.onload = function() {
            //set content
            this.setContent('<p>Hello World!</p>');
        };
 
    }
 
    //register widget
    UDW.registerWidget('helloworld', HelloWorld);
 
})();

Now open “index.html” file under “mywebdev” folder and replace widget loading script with following code:

loadWidget(
    {
        widget: 'helloworld', 
        target: 'w1', 
        style: 'white'
    }
);

After saving file open following URL: http://localhost/mywebdev

After implementing widget, we need to specify configuration details. Open config.xml file and copy and paste following configuration code:

<?xml version="1.0" encoding="UTF-8"?>
<widget name="helloworld" icon="default" section="basic">
    <title>Hellow World</title>
    <description>
        <![CDATA[This is my first widget]]>
    </description>
    <tags>
        <![CDATA[hello, world]]>
    </tags>
</widget>

Thats it! Implementation of fully functional widget is completed. Now it is necessary to activate newly created widget through control panel. After activation navigate to the section specified in the config.xml file(in this case see “Basic Widgets” section) and add widget to the dashboard. Result is shown on the picture:

This is really simple example, but it clearly shows how easy is widget development process. With similar success you can develop widgets of any complexity. There are no limitations, only limitation is particular developer's skills and fantasy.

We hope that this example will be perfect jump-start for further development widgets of your own.