Step 1. Placing an IMu widget on an HTML page

This is a very trivial example which does not do much but shows the basic principles of how IMu widgets can be added to an HTML page.

For this exercise we will simply place an IMu keyword-search control onto a page. The widget won't do anything yet (other than display itself).

Summary of the process

On an HTML page:

Add the imu.js library.
Add an element on the page that will hold the keyword-search control.
Make IMu fill that element with the keyword-search control.

Details of what needs to be done

You will need to know the path to the IMu library file, imu.js, relative to your page. Typically, the IMu Widget Framework is deployed in a directory called imu immediately below the top of your web tree. This means that from a top-level page the path to imu.js is typically imu/imu.js.
In the page head section, add a line like:
<script type="text/javascript" src="imu/imu.js"></script>
This adds the library.
Add a div into the page body at an appropriate spot e.g.:
```
<body>
   <p>Example Keyword Search Widget</p>
   <div id="example-keyword-search"></div>
</body>
```
This div will hold the keyword-search widget. Giving it an id will allow us to refer to it in JavaScript later.
In the head or body section of the page, add the following JavaScript:

<script>
IMu.ready(function()
  {
     var keySearch = $('#example-keyword-search').IMu('keyword-search');
  });
</script>

This will create an IMu keyword-search widget object (keySearch) and it will be displayed in the HTML element on the page that has the id attribute: example-keyword-search.

Discussion of the above steps

We need the IMu javascript library. This line imports the IMu Widget Framework library:

<script type="text/javascript" src="imu/imu.js"></script>

Obviously, you may need to adjust the path to the library as appropriate depending on where imu.js is actually placed.

The JavaScript in imu.js includes code for several third-party libraries, so there is no need to load this code separately.

The imu.js code may also load several other files, such as CSS stylesheets and other JavaScript libraries (some libraries must be loaded separately).

The IMu.ready method in:

<script>
IMu.ready(function()
{
   var keySearch = $('#example-keyword-search').IMu('keyword-search');
});
</script>

waits for IMu to load these other CSS stylesheets or JavaScript files and then calls the anonymous function which is passed as an argument. This is very similar to jQuery's ready method (in fact IMu.ready calls jQuery.ready).

IMu widgets take control of an HTML element. You create an empty element (typically a div) in a suitable spot on the HTML page

<div id="example-keyword-search"></div>

and pass its id attribute to the IMu jQuery plugin when creating the widget.

var keySearch = $('#example-keyword-search').IMu('keyword-search');

In the example code above, the anonymous function run by IMu.ready, creates a keySearch object that will install itself in the HTML element that has an id of example-keyword-search.

Complete example

For a complete example of this in a page see: example 1

What it does

Not much! :)

It simply adds a keyword-search input control to our div. We will build on this however to add more functionality as the tutorial progresses.

Do it!

At this point try and take the above information and create your own test page and deploy it on a web server. Verify it displays the widget.

Some things you can try

Change the id attribute of the div element to a different value without breaking the display.
See if you can add 2 different keyword-search widgets on a page.
Try changing the CSS of the element that holds the widget.