Home arrow XML arrow Page 4 - Introduction to Widgets
XML

Introduction to Widgets


I recently wrote an article for SEO Chat discussing how Konfabulator has evolved since its acquisition by Yahoo, and towards the end of the article I created a widget myself to demonstrate the ease with which this could be done. I said at the time that I would be writing a follow-up article discussing the code itself and the method of creation; this is that article.

Author Info:
By: Dan Wellman
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
August 14, 2006
TABLE OF CONTENTS:
  1. · Introduction to Widgets
  2. · Adding Your Own Code
  3. · Displaying Data
  4. · Setting the Preferences

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
XML ARTICLES

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials