Dev:iWidgets

From The Apple Wiki
IWidgets
Cydia Package
Latest Version1.1.2

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 /private/var/mobile/Library/iWidgets/) 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 /private/var/mobile/Library/iWidgets/ 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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>size</key>
    <dict>
        <key>height</key>
        <integer>200</integer>
        <key>width</key>
        <integer>320</integer>
    </dict>
</dict>
</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

<html>
    <head>
        <script type="text/javascript" src="Library/script.js"></script> <!-- Link to your JavaScript file -->
        <link rel="stylesheet" type="text/css" href="Library/stylesheet.css"> <!-- Link to your CSS file -->
    </head>
    <body onload="init()"> <!-- When the page loads, start the init function in script.js -->
        <div id="content">
            <!-- Basic HTML stuff goes here -->
        </div>
    </body>
</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!