Dreamboard Theming

Welcome to the Dreamboard theming tutorial! This document is designed for those who have little or no previous coding experience. If you are already familiar with Dreamboard theming, feel free to check out the complete reference wiki at: http://code.google.com/p/dreamboard/wiki/Introduction?tm=6

What you will need

And iPod Touch / iPhone (preferably 3rd or 4th generation models) Dreamboard (available from cydia) SSH (Google some tutorials if you dont know how) A computer (windows/mac) A text editor (notepad/textedit is fine)

Formatting
This document will contain 10 tutorials, starting from basic to being more advanced. Each tutorial includes code explanations, sample code, and templates for you to start your own theme. Project files are also includedthey contain resources (such as images) and the finished product of each project.

1. Hello Dreamboard!
As with all tutorials, we start with the simple Hello World! example (with a slight twist). The project files can be downloaded here: http://dreamboard.googlecode.com/files/1-HelloDreamboard.zip

Creating the theme

Create a new folder named: Hello! This folder will hold the contents of your theme

Then, open your text editor and add the following code:
<?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>Plist</key> <string>Hello Dreamboard</string> <key>Description</key> <string>My first Dreamboard theme!</string> <key>NoneEditable</key> <true/> </dict> </plist>

Save this file as Info.plist inside the Hello! folder. If you cannot save it with a plist extension, just save it as txt and then rename it to plist (make sure you enable file extensions on your OS)

A plist file is short for a Property List file. A plist can have all sorts of information attached to it; in this case, the Info.plist you just created tells Dreamboard information about your theme. Notice in a plist, every opening <tag> has a complementary closing </tag>. There are some exceptions however, such as the <true/> tag shown above.

Explanation:

Now that we have declared our theme plist in the Info.plist file, we have to create the actual theme plist. Create a new document in your text editor and add following code:
<?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>MainView</key> <array> <dict> <key>ViewType</key> <string>Button</string> <key>Frame</key> <string>110,190,100,100</string> <key>Image</key> <string>$ROOT/Hello.png</string> <key>Actions</key> <array> <string>launch com.wynd.dreamboard</string> </array> </dict> </array> </dict> </plist>

Save this file to Hello Dreamboard.plist inside the Hello! folder.

Explanation:

Now copy the Hello.png and Hello@2x.png files from the downloaded Project Resources folder to your Hello! folder. The @2x image is twice the resolution of the regular one and is designed for the retina display. Your Hello! folder should now look something like this:

Installing your theme

Now that you have created your theme, you can install it through your SSH client. Launch it and navigate to /private/var/mobile/Library/DreamBoard. It may look something like this:

Then, take your Hello! folder and drag it into the DreamBoard folder. Press copy if you are prompted to.

You should now have the Hello! folder on your device:

Launch Dreamboard and you will see the Hello! theme, feel free to apply it:

Notice that we are missing a preview image, lets create one now. Apply the Hello! theme and press the home and power buttons simultaneously; your screen should flash signifying that a screenshot was taken. Now, in your SSH client, navigate to: /private/var/mobile/Media/DCIM/XXXAPPLE (XXX may be different).

Select the last image and drag it to the Hello! folder on your computer.

Rename the image to Preview.png (lowercase png)

Drag this folder inside /private/var/mobile/Library/DreamBoard/Hello!/ on your SSH client. Launch Dreamboard again, and you should now see your preview!

End of tutorial 1, more to come!