Create Your Very Own Widget

8/4/2019 Create Your Very Own Widget

1/6

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

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 widgetby 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 ................................................................................................................
http://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=titlehttp://www.instructables.com/tech?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/science?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/ride?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/photography?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/pets?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/outdoors?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/offbeat?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/music?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/life?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/kids?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/home?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/green?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/games?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/food?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/craft?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/art?utm_source=pdf&utm_campaign=categorieshttp://www.instructables.com/about/submit.jsp?utm_source=pdf&utm_campaign=titlehttp://www.instructables.com/community?utm_source=pdf&utm_campaign=titlehttp://www.instructables.com/tag/type-id/?utm_source=pdf&utm_campaign=titlehttp://www.instructables.com/account/gopro?sourcea=inside_pdfhttp://www.instructables.com/?utm_source=pdf&utm_campaign=title


2/6


Intro: Create your very own widgetThis Instructable will teach you how to create a basic Yahoo! Widget . By the end of this tutorial, you will have learned some JavaScript and XML.

Step 1: Getting StartedSome tools you will need to make a widget are:- A computer with Mac OS X or Windows Xp/Vista

- A text editing program. (Notepad is perfect.)- An image editing program. (Microsoft Paint is fine.)- Patience and time.- Yahoo Widgets- Widget Converter Widget

Once you have these programs and widgets, you are ready to move on to step two.
http://widgets.yahoo.com/widgets/widget-converterhttp://widget.yahoo.com/downloadhttp://widget.yahoo.com/


3/6


Step 2: Creating Folder StructureNow you will need to create the folder structure to house all the files that make up a widget.The structure looks like this:-Widget Name|Contents|Widget.konMain.jsResources|All of the images the widget will use

You can download this widget to automatically create the folder structureStructure - Reinier Kaper

Set the preferences of a widget by right-clicking on any part of it, and click on preferences.Change the preferences of Structure to the following:root: Navigate to your widget folder. (Located in 'My Documents' on Windows)

Now you can click on the widget and a dialog box will pop up, asking you for the name of the widget.

Step 3: Creating all of the necessary filesWe will start with creating the widget.xml file, which tells the widget engine information about your widget.

Download a template a have created for you to use. Download link below. Place the file in the 'Contents' folder located in the folder titled the name you chose earlier.Open the file with the text editor of you choice and replace YourNameHere with your name. Save and close.

Next we will create the .kon file which is the main file that tells the widget what to do. The .kon file is just an XML file with a renamed extension. Download this basicwidget.kon file and also place it in the 'Contents' folder. Again, open up the file with a text editor. The first line signifies that the file is an XML file created with the UTF-8encoding. The next tag to add is the widget tag; Then you declare your settings, like debug; . Now you are ready to add your window elements; .Widgets have multiple objects that do certain things and have certain properties. For example the text object,, creates text. Here are a l ist of some of theproperties of the text object:

-name (self-explanitory)-window (depreciated)-data (text to display)-color (self-explanitory)-size -font -hOffset (a.k.a x)-vOffset (a.k.a. y)-width -height

With that said, let's start coding. Add the following code to the kon file, in the tags:

myTextHello World!blueArial18left252

In english, this sets up a text object named myText, that displays "Hello World!" in font Arial, color blue, and size 12.

Save your kon file, and continue to step four.
http://widgets.yahoo.com/widgets/structure


4/6


File Downloads

widget.xml (248 bytes)[NOTE: When saving, if you see .tmp as the file ext, rename it to 'widget.xml']

widget.kon (397 bytes)[NOTE: When saving, if you see .tmp as the file ext, rename it to 'widget.kon']

Step 4: Rejoyce!Double-Click on the kon file and your widget will load. Congratulations! You have created your first widget. But we're not done coding yet. Your probably thinking, "That'sall?", right? Continue to step 5 to add some function to your widget.
http://www.instructables.com/files/orig/FDV/97MC/FAQCIQZV/FDV97MCFAQCIQZV.tmp?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/FDV/97MC/FAQCIQZV/FDV97MCFAQCIQZV.tmp?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/FDV/97MC/FAQCIQZV/FDV97MCFAQCIQZV.tmp?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/FDV/97MC/FAQCIQZV/FDV97MCFAQCIQZV.tmp?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/FM4/A4LL/FAQCIQYI/FM4A4LLFAQCIQYI.xml?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/FM4/A4LL/FAQCIQYI/FM4A4LLFAQCIQYI.xml?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/FM4/A4LL/FAQCIQYI/FM4A4LLFAQCIQYI.xml?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/FM4/A4LL/FAQCIQYI/FM4A4LLFAQCIQYI.xml?utm_source=pdf&utm_campaign=files


5/6


6/6


Comments

14 comments Add Comment

phant0m_sp00f3ra says: Mar 20, 2009. 8:36 PM REPi was about to follow this guide, but i found that my leopard MbP has dashcode so it was fairly easi making my own widget :P

hunter890 says: Jun 26, 2009. 6:56 AM REPYeah, some people wish there was somethin like dashcode for yahoo! wid ets.

jegreene says: Dec 31, 2007. 10:24 AM REPFollowed the guide, it was extremely helpful. After I built my widget I implemented some widget analytic tools so I could track my widget across the web. Isearched around for free services that did it, and found Clearspring. Here is a document about widget analytic its quite informative. If your interested you can

just make an account and use their service.

jegreene says: Dec 31, 2007. 10:26 AM REPWidgets are a small piece of code that can be inserted into a website, similar to a youtube video. Its perfect for users who don't know how to code, butfound a simple program they want on their site.

hunter890 says: Dec 31, 2007. 10:28 AM(removed by author or community request)

jegreene says: Dec 31, 2007. 11:11 AM REPIncorrect, if read Clearspring' s site, you will see that it has implemented Desktop Support for Widgets Which shows support for windows, yahoo,and apple. I haven't implemented it yet, but from what I have read it will still be quite useful.

hunter890 says: Dec 31, 2007. 1:15 PM REPOh. I get you now. Glad you found the tutorial useful.

Megax29 says: Dec 29, 2007. 7:12 PM REPwhat is a widget for?

hunter890 says: Dec 30, 2007. 6:03 AM REPWhatever you wish it to be.

xtank5 says: Dec 29, 2007. 7:04 PM REPThis thing is for Mac right?

hunter890 says: Dec 30, 2007. 6:02 AM REPIt's for mac and pc

GorillazMiko says: Dec 29, 2007. 4:04 PM REPAwesome, great Instructable, good pictures, files and all, nice job.

hunter890 says: Dec 29, 2007. 6:24 PM REPThank you. Glad you liked it. Did you actually try it out, or did you skim through it? Hunter

GorillazMiko says: Dec 29, 2007. 9:28 PM REPSkimmed through it, might try it out soon.
http://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/GorillazMiko/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/GorillazMiko/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/GorillazMiko/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/GorillazMiko/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/xtank5/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/xtank5/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/Megax29/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/Megax29/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.clearspring.com/blog/2007/12/19/a-holiday-present-desktop-support/http://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/jegreene/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/jegreene/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/jegreene/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/jegreene/?utm_source=pdf&utm_campaign=commentshttp://www.clearspring.com/docs/reportinghttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/jegreene/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/jegreene/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/hunter890/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/phant0m_sp00f3ra/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/phant0m_sp00f3ra/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Create-your-very-own-widget/?utm_source=pdf&utm_campaign=comments#comments