Gratis Widget Toolkit

A web-based widget generator that creates customizable objects which can load content from any web-based application using asynchronous requests. Widgets work like miniature windows. They can be moved, shaded, locked, or hidden using mouse events.

Check out the online demo at: http://mbrooks.info/demos/gratis-widget-toolkit

Features

Extensible XHTML/CSS interface.
Compatible with Internet Explorer, Firefox, Safari, Chrome, and Opera web browsers.
Supports all types of static/dynamic web content.
Maintains position, state, and visibility between browser requests using cookies.
Easy to set-up and customize.
Creates up to 20 widgets per browser/domain.
Fast and lightweight (written in pure Javascript - only 7KB).

Installation

Download the latest sources to your computer using a web browser.
Extract the contents of the .zip into a folder on your local computer.
Upload the folder with the following files to the root directory of your web site.

Filename	Role
config.xml	This is the main configuration for your widgets.
custom.css	This style sheet will allows you to modify the "look & feel" of your widgets.
loading.gif	When the widget loads content, this image appears.
toolkit.css	The main style sheet to be included from within your HTML document.
toolkit.js	The main script to be included from within your HTML document.

Create widgets in 2 easy steps

Modify the config.xml by adding or removing widget elements.

<config>

<widget>

<name>Widget 1</name>

<id>widget1</id>

<url>http://domain.com/widget1.jpg</url>

<height>300</height>

<width>300</width>

<posx>15</posx>

<posy>15</posy>

<locked>0</locked>

</widget>

<widget>

<name>Widget 1</name>

<id>widget2</id>

<url>http://domain.com/widget2.jpg</url>

<height>300</height>

<width>300</width>

<posx>15</posx>

<posy>15</posy>

<locked>0</locked>

</widget>

</config>
Add the following Javascript between the <head></head> tags of your HTML document.

<script type="text/javascript" src="http://domain.com/path/to/toolkit.js"></script>

XML Configuration

Attribute	Value	Example
name	This is the title that will appear on the top bar of the widget.	Hello World
id	This must be a unique value to all other widgets.	hello
url	This can be either a path to a local file, URL, or remote CGI script.	http://domain.com/path/to/document
height	This is the height of your widget in pixels.	360
width	This is the width of your widget in pixels.	360
posx	This is the position starting on the left side of the browser window.	100
posy	This is the position starting on the top of the browser window.	100
locked	When set to 1, the widget is locked and the close button is removed.	0

Nested Tree View

Use the following as a guide when modifying widget object elements.

                          [widget :DIV]
                     ____________|_____________
                    |                          |
              [topbar :DIV]             [iframe :IFRAME]
            ________|________
           |                 |
     [title :SPAN]    [button :DIV]

                                     [tray :DIV]
                          ________________|________________
                         |                |                |
                  [widget1 :DIV]   [widget2 :DIV]   [widget3 :DIV]

Releases

I have included within this package a light version (packed 7KB) and developers version (unpacked 22KB).

You can always find the latest updates within this projects repository.

Code repository

This project's repository can be checked out through ''SVN'' using the command:

svn checkout https://gratis-widget.svn.sourceforge.net/svnroot/gratis-widget gratis-widget-toolkit

Maintainer

For feedback, bug reports, or other comments, please contact me at: devel at mbrooks dot info

License and warranty

This package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.

Gratis Widget Toolkit is provided under the terms of the GPLv3 license.