Dev:IWidgets

iWidgets is a tweak that displays HTML/CSS widgets on SpringBoard. Creating a widget can be simple if you understand the basics of HTML and CSS.

Components of an iWidget
There are three files required to make an iWidget: Widget.html, Widget.plist, and Options.plist. Even if you have never worked with plists, you can probably figure out how this works. The easiest way to learn is by looking at what other developers have created. Install some iWidgets and look at them (located in ) to see how they work.

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  on the device. 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 doesn'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

Next, you'll need to create a folder called Library, and create two files inside it: script.js and stylesheet.css

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