Introduction to Widgets - Setting the Preferences

(Page 4 of 4 )

Next, I tackled the preferences. The widget engine will draw the preferences box for you and include the common options such as locking the widget's position and setting the opacity. All you have to do is specify any additional options, and write the JavaScript to make them work:

<preference>
    <name>textfontpref</name>
    <defaultValue>Arial</defaultValue>
    <title>Text Font:</title>
    <type>font</type>
    <description>Select a font for the news text.</description>
</preference> 

<preference>
    <name>textcolorpref</name>
    <defaultvalue>#000000</defaultvalue>
    <title>Text Color:</title>
    <type>color</type>
    <defaultValue>#000000</defaultValue>
    <description>Select a colour for the news text.</description>
</preference>
<preference>
    <name>textsizepref</name>
    <defaultvalue>12</defaultvalue>
    <title>Text Size:</title>
    <type>popup</type>
    <option>8</option>
    <option>10</option>
    <option>12</option>
    <option>14</option>
    <description>Select a font size for the news text.</description>
</preference> 

<preference>
    <name>textstylepref</name>
    <defaultvalue>Bold</defaultvalue>
    <title>Text Color:</title>
    <type>popup</type>
    <option>Bold</option>
    <option>Italic</option>
    <option>Narrow</option>
    <option>Expanded</option>
    <option>Condensed</option>
    <option>Smallcap</option>
    <option>Poster</option>
    <option>Compressed</option>
    <option>Fixed</option>
    <option>No Style</option>
    <description>Select a text style for the news text (it will only be applied if
supported by the font).</description>
</preference>

Widgets should be as customizable as possible; therefore, I’ve given the user control over everything that isn’t an image, which in this case is just the text from the BBC news feed. Each property you are able to change has its own segment of code. The <type> attributes of the first two preferences are used by the engine to automatically create a font chooser that previews all of your installed fonts, and a color picker, as seen in other applications.

In part two of this article I’ll show you how to wire up these preferences with a little bit of script to actually make them work. We’ll also work on the main script that makes the whole thing tick, and look at packaging and preparing the widget for upload to the online gallery.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: Introduction to Widgets

· Hi, I hope you'l find this article informative and that you work through the...   >>> Post your comment now!