Dev:IWidgets

iWidgets is a tweak that displays HTML/CSS widgets on the Springboard. Because of it's usage of HTML, creating a widget is very simple so long as the developer understands the basics of HTML and CSS.

Components of an iWidget
There are three basic files required to make an iWidget: Widget.html, Widget.plist, and Options.plist. Even if you have never worked with plists, it's not very hard to figure out. The easiest way to learn is by looking at what other developers have created. Install some iWidgets and see how it's done.

Widget.html
This is the main html file that is loaded by iWidgets. This is where you should include your basic html and links to your CSS and Javascript (If you have any).

Widget.plist
This plist (Property List) is used to set the height and width of your widget.

Options.plist
This plist is used to configure the user settings that are shown when selecting the widget to be used.

Creating a Simple iWidget
First off, all iWidgets are stored in /private/var/mobile/Library/iWidgets/ on the iDevice. Each directory is the name of the widget that will be displayed in the iWidgets access menu. Create a new directory and name it whatever you want. I'm just going to use the name "TestWidget".



Next we create our three files in the TestWidget directory. Now we can get to the fun stuff. Let's first start with our Widget.plist. Like previously stated, this file tells iWidgets the height and width of the widget. Below is an example.

Widget.plist

As you get a sense of what your widget will look like, you will probably need to change the values. You want to keep the widget size just big enough to fit the widget your are displaying. That way it isn't take up extra space in the user's display.

Now we come to the HTML part. All widgets should follow the standard html page structure.

Widget.html

To be continued... If anyone has anything to add who have worked with iWidgets, please do so!