Home Sign Up!

Browse Community Submit
All Art Craft Food Games Green Home Kids Life Music Offbeat Outdoors Pets Photo Ride Science Tech

Create your very own widget
by hunter890 on December 29, 2007 Table of Contents Create your very own widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Intro: Create your very own widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 1: Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 2: Creating Folder Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 3: Creating all of the necessary files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . File Downloads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 4: Rejoyce! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 5: Adding Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . File Downloads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 6: Summing it all up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Related Instructables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 2 3 3 4 4 5 5 5 5 6

http://www.instructables.com/id/Create-your-very-own-widget/

.An image editing program. By the end of this tutorial.) .Yahoo Widgets . you are ready to move on to step two.Intro: Create your very own widget This Instructable will teach you how to create a basic Yahoo! Widget . Step 1: Getting Started Some tools you will need to make a widget are: . http://www.Widget Converter Widget Once you have these programs and widgets.A computer with Mac OS X or Windows Xp/Vista .) . you will have learned some JavaScript and XML.Patience and time. (Microsoft Paint is fine.com/id/Create-your-very-own-widget/ . (Notepad is perfect.A text editing program.instructables.

color blue. and continue to step four.xml file.com/id/Create-your-very-own-widget/ .a x) -vOffset (a.k. y) -width -height With that said. which tells the widget engine information about your widget. <widget> Then you declare your settings. Add the following code to the kon file.kon file is just an XML file with a renamed extension. The first line signifies that the file is an XML file created with the UTF-8 encoding. like debug. Download a template a have created for you to use. http://www.<text . that displays "Hello World!" in font Arial. Change the preferences of Structure to the following: root: Navigate to your widget folder. Download link below.k. this sets up a text object named myText..kon file and also place it in the 'Contents' folder. and click on preferences. Open the file with the text editor of you choice and replace YourNameHere with your name. Again. Next we will create the . The . asking you for the name of the widget. <window>.kon Main. Widgets have multiple objects that do certain things and have certain properties. For example the text object.instructables. Save your kon file. The structure looks like this: -Widget Name | Contents | Widget. let's start coding. Step 3: Creating all of the necessary files We will start with creating the widget. Now you are ready to add your window elements. (Located in 'My Documents' on Windows) Now you can click on the widget and a dialog box will pop up. and size 12.js Resources | All of the images the widget will use You can download this widget to automatically create the folder structure Structure . The next tag to add is the widget tag.. open up the file with a text editor. in the <window> tags: <text> <name>myText</name> <data>Hello World!</data> <color>blue</color> <font>Arial</font> <size>18</size> <alignment>left</alignment> <vOffset>25</vOffset> <hOffset>2</hOffset> </text> In english. Save and close. Download this basic widget.Reinier Kaper Set the preferences of a widget by right-clicking on any part of it.. <settings><setting name="debug" value="on"/></settings>. Here are a list of some of the properties of the text object: -name (self-explanitory) -window (depreciated) -data (text to display) -color (self-explanitory) -size -font -hOffset (a.kon file which is the main file that tells the widget what to do./>. creates text. Place the file in the 'Contents' folder located in the folder titled the name you chose earlier.Step 2: Creating Folder Structure Now you will need to create the folder structure to house all the files that make up a widget.a.

File Downloads widget.xml'] widget.kon'] Step 4: Rejoyce! Double-Click on the kon file and your widget will load. Congratulations! You have created your first widget.xml (248 bytes) [NOTE: When saving. http://www. But we're not done coding yet. rename it to 'widget.com/id/Create-your-very-own-widget/ . "That's all?". if you see .tmp as the file ext. if you see . Your probably thinking.kon (397 bytes) [NOTE: When saving.instructables. rename it to 'widget.tmp as the file ext. right? Continue to step 5 to add some function to your widget.

that will go in the 'Contents' folder. we will use "the Date object" . To setup the date object.com/id/Create-your-very-own-widget/ . grab some resources here. myText.tmp as the file ext. Open your text editor and create a file called main. theMinutes = String(theTime.js'] Step 6: Summing it all up Use the widget converter widget to convert the widget to a . and the <type>font</font> sub-tag -Add some event handlers like onClick using the <onClick> or <onMultiClick> tags. File Downloads widget.widget file. } Your widget will not show the time yet. theHour = String(theTime.getMinutes()).tmp as the file ext. download both the kon and js from below and replace with the old ones.kon (572 bytes) [NOTE: When saving. rename it to 'widget. which goes in the Kon file.js'). This will require a timer that updates every minute. To add the time.js (218 bytes) [NOTE: When saving. we need to create a timer. you create a function. It should show the time.kon'] main. If you want to go even further with your widget. we add this event handler to the Kon file.data = "The time is: "+ theHour+":"+theMinutes. in the <widget> tags but not in the <window> tags: <timer name="myTimer" interval="1" onTimerFired="updateText()" ticking="true"/> Save the files and load the widget.getHours()).js. if you see . To take care of this. Add this function to the js file: function updateText()' { theTime = new Date(). because it doesn't know what to do with the js file. print('update'). rename it to 'main. in the <widget> tags but not in the <window> tags: <action trigger="onLoad"> include('main. Here are a list of things that you can try to accomplish with your widget: -Add preferences to control the font using the <preference> tag. Hunter Related Instructables BASIC TUTORIAL ON ARTIFICIAL INTELLIGENCE MARKUP LANGUAGE (AIML) VIA NOTEPAD by theseventhsage RSS Desktop by Toshibi Control Stuff With Your iPod Touch/iPhone by PassMeTheScrewdriver Customize your Mac's "Unit Converter" Widget by LasVegas Spidering an Ajax website with a asynchronous login form by lamedust Voice controlling your computer with tips and tricks by lance_r http://www. and another file.instructables. -Display an image from a local file using the image object Hope you found this tutorial useful and you will enjoy the endless possibilities of widgets. If it doesn't work. NOTE: Drag the folder that is titled the name of your widget onto the converter. if you see . not the kon file. </action> To make the time update. The next file will be a JavaScript file.Step 5: Adding Function Now we are going to make the widget display the current time.

instructables. similar to a youtube video. some people wish there was something like dashcode for yahoo! widgets. it was extremely helpful. files and all. Glad you liked it. 2007. Dec 31. I get you now. and found Clearspring. 2007. 7:04 PM REPLY hunter890 says: It's for mac and pc Dec 30. 6:24 PM REPLY GorillazMiko says: Skimmed through it. 6:03 AM REPLY xtank5 says: This thing is for Mac right? Dec 29. hunter890 says: Oh. jegreene says: Dec 31. Here is a document about widget analytic its quite informative. Glad you found the tutorial useful. Its perfect for users who don't know how to code. 2007. Did you actually try it out. good pictures. 2007. 2007.com/id/Create-your-very-own-widget/ . might try it out soon. 2007. 10:28 AM jegreene says: Dec 31. 6:56 AM REPLY jegreene says: Dec 31. and apple. 2009. 11:11 AM REPLY Incorrect. Jun 26. yahoo. Dec 29. if read Clearspring' s site. 2007. hunter890 says: (removed by author or community request) Dec 31. 2007. great Instructable.Comments 14 comments Add Comment phant0m_sp00f3ra says: i was about to follow this guide. 1:15 PM REPLY Megax29 says: what is a widget for? Dec 29. nice job. 6:02 AM REPLY GorillazMiko says: Awesome. 4:04 PM REPLY hunter890 says: Thank you. After I built my widget I implemented some widget analytic tools so I could track my widget across the web. I haven't implemented it yet. 2007. you will see that it has implemented Desktop Support for Widgets Which shows support for windows. 8:36 PM REPLY hunter890 says: Yeah. 2009. 10:24 AM REPLY Followed the guide. or did you skim through it? Hunter Dec 29. I searched around for free services that did it. but i found that my leopard MbP has dashcode so it was fairly easi making my own widget :P Mar 20. 2007. 10:26 AM REPLY Widgets are a small piece of code that can be inserted into a website. 2007. If your interested you can just make an account and use their service. 7:12 PM REPLY hunter890 says: Whatever you wish it to be. Dec 29. 9:28 PM REPLY http://www. but found a simple program they want on their site. but from what I have read it will still be quite useful. Dec 30. 2007.