Software - Written by Felix on Sunday, June 29, 2008 13:32 - 0 Comments
Create A Simple Image Widget Easily
Today is Part 2 of How to Create Your Own Dashboard Widget. You’ll learn how to create a widget that will display an image. In a few steps, you’ll have your very own widget. This tutorial is a little bit more advanced than creating a widget with Safari, but still doable.
REQUIRED: You’ll need a PNG image for this tutorial. Resize the image so it will look good with your other widgets. We’re going to create a widget that will display this image in the dashboard.
Follow along carefully and be ready to try something new… Let’s get started!
Create a New Folder on Your Desktop
From the file menu, click “New Folder.” This will create a new folder on your desktop.
Rename the Folder
Rename the folder to: Image Widget.wdgt - then press the return key.
Click “Add” in the Pop-Up
You’ll be asked to confirm the new name of the folder. Click “Add” when you see this message.
Widget Icon Created!
Notice the folder has changed into a Dashboard Widget Icon - that’s what we want! Great job so far
Select the Image Widget.wdgt
Click on you Image Widget.wdgt once to select it.
Get Info
With the Image Widget.wdgt selected, go to “File” and then select “Get Info”
Hide The “.wdgt” Extension
In the Name & Extension section, check the box next to “Hide Extension” Then close the Info window.
Show The Widget Contents
Hold down the “Control” key on your keyboard and click the Image Widget. This will bring up a menu where you should select “Show Package Contents.”
Keep The Folder Open
Now the folder “Image Widget” should be open as shown above. Keep this folder open so you can drag & drop files into it.
Rename Your Image
Change the file name of your image to: Default.png
Drag The Default.png Into The “Image Widget” Window
Drag the Default.png image into the Image Widget folder.
Open TextEdit
Open TextEdit so we can create a required file for the Widget.
Change The TextEdit Format
Now that TextEdit is open, we have to change the format of the document so it will work with our Widget. In the Format menu, select “Make Plain Text”
Start Typing!
Copy the code below and paste into your TextEdit document:
<?xmlversion=“1.0″encoding=“UTF-8″?>
<!DOCTYPE plist PUBLIC“-//Apple//DTD PLIST 1.0//EN” “http://www.apple.com/DTDs/PropertyList-1.0.dtd”>
<plistversion=“1.0″>
<dict>
<key>AllowNetworkAccess</key>
<false/>
<key>CFBundleDevelopmentRegion</key>
<string>English</string>
<key>CFBundleDisplayName</key>
<string>ImageWidget</string>
<key>CFBundleIdentifier</key>
<string>com.my.widget.Untitled</string>
<key>CFBundleName</key>
<string>ImageWidget</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>MainHTML</key>
<string>index.html</string>
</dict>
</plist>
Save The Document As: Info.plist
In the File menu, select “Save As…” In the next screen type the name as: Info.plist
Warning!
You’ll see this warning. Click “Use .plist”
Drag Info.plist Into The Image Widget Folder
Now drag the Info.plist file into the Image Widget folder.
Create A New TextEdit File
Go back to TextEdit and open a new file. Click the File menu, then select New
Change The TextEdit Format Again
In the Format menu, select “Make Plain Text”
Type The Image Code
Type this code in the TextEdit document: <img src=Default.png>
Save As…
Select File, then Save As…
Save As Index.html
Type index.html into the Save As field
Warning!
Click Use .html
Drag The index.html File Into The Image Widget Folder
Drag the index.html file into the Image Widget folder
Double Check Your Files!
You should have 3 files in your Image Widget folder. They are:
1. Default.png
2. index.html
3. Info.plist
If you’re missing any of the files, now is the time to go back and create them.
Launch Your Widget!
If you’ve got all the files - and followed all the steps - you can now launch your widget! Just double click the Image Widget on your desktop!
Warning!
When you double click the Image Widget, you’ll get this pop-up window. Click Install to see your widget in action!
Last Step!
Now you’ll be asked to Keep or Delete your new Image Widget! Click Keep and you’re done! Ta-Dah!
Leave a Reply