Some days ago, we've seen together how to make a widget to launch your favorite applications on your desktop plug-in (touchwiz), and now, as promised, we will see together how to create a web bookmark like widget (some kind of shortcut to your favorite website etc)...

This time the internal composition of the wgt file will be almost the same but with a little addition like that :

- css folder that contains the css stylsheet witch holds all the CSS style rules.
- images folder that contains the application(s)/website(s) icon(s) (and possibly a few more pictures / icons / backgrounds / etc).
- js folder witch contains the widget's script (allows applications to start or whatever is needed in the widget).
- config.xml witch contains the name of the widget and its size (on the screen) etc.
- Index.html witch contains the UID of the application to launch for example.
- icon.png the icon in PNG format.

As usually, i'll try to be as brief as possible because it may sound a bit complicated, don't worry, it's exactly how we did the last time :

1- Download this widget's example : slipkornsaad.wgt and rename it to slipkornsaad.zip then unzip it !
2- Open config.xml (with the help of notepad) as shown below (click to enlarge)

Where widget id is the authentication name you'll give to the widget (put what you want...), height and width refer to the widget display size, also, you can change the widget title if you want, last but not least, access network must be changed to "true" to allow the application to connect to the network.

Once done, in the index file, click on "save" and not "save as", then, close it.

3- If you choose to modify the size of the widget you have to adapt the size of the icon.png (if you choose 70x70, your icon.png file must have the same size too)

4 - Open Index.html and you may do only one thing (click to enlarge) :



- Optionally you can change the title also, in my case "sb" (SymbianBriefs)
- But the most important task is to add the URL of the link you want to make the shortcut for, that's it !

Once done, in the index file, click on "save" and not "save as", then, close it. You are almost done !

5- On images folder put your icon file (the icon of the widget once in the touchwiz interface) and remember to keep the same size as on the index and config files...

6- Replace and overwrite the old file on the zip package (or create a new zip archive) and then rename the zip file to wgt and install it, you're done !



Ps : you can download nice high quality icons from here for example (you can search by name, thematic etc).

Tip : If you are so lazy to do all that work you can easily jump to the step 4, 5 and 6 ;)

Questions?

In the Upcoming tutorial (Part 11-3), we will see together how to create a different kind of widgets (launch your application from a web like interface or home page, something like that...) stay tuned !