Home arrow XML arrow Page 2 - 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 - Adding Your Own Code
(Page 2 of 4 )

Now you need to start adding code yourself. What I focused on first was the about-box, which is an element used solely to display a little window listing the program version, the creator, and anything else as a programmer that you want or need to display. As Iím using content from the BBC site, I felt it necessary to include their copyright information:

<about-box>
    <image>Resources/about-backg.png</image>   

    <about-version>
      <font>Arial</font>
      <size>12</size>
      <style>bold</style>
      <hOffset>90</hOffset>
      <vOffset>45</vOffset>
      <color>#ffffff</color>
    </about-version>
    <about-text>
      <data>BBC TechFeeder</data>
      <font>Arial</font>
      <size>18</size>
      <style>bold</style>
      <color>#ffffff</color>
      <hOffset>90</hOffset>
      <vOffset>30</vOffset>
    </about-text>   

    <about-text>
      <data>Copyright:(C)</data>
      <font>Arial</font>
      <size>12</size>
      <style>bold</style>
      <color>#ffffff</color>
      <hOffset>90</hOffset>
      <vOffset>90</vOffset>
    </about-text>
    <about-text>
      <data>British Broadcasting Corporation</data>
      <font>Arial</font>
      <size>10</size>
      <style>bold</style>
      <color>#ffffff</color>
      <hOffset>90</hOffset>
      <vOffset>105</vOffset>
    </about-text>
    <about-text>
      <data>Click here for terms and conditions</data>
      <url>http://news.bbc.co.uk/1/hi/help/rss/4498287.stm</url>
      <font>Arial</font>
      <size>10</size>
      <style>bold</style>
      <color>#ffffff</color>
      <hOffset>90</hOffset>
      <vOffset>120</vOffset>
    </about-text>
    <about-text>
      <data>of reuse.</data>
      <font>Arial</font>
      <size>10</size>
      <style>bold</style>
      <color>#ffffff</color>
      <hOffset>90</hOffset>
      <vOffset>130</vOffset>
    </about-text>   

    <about-text>
      <data>By Dan Wellman</data>
      <font>Arial</font>
      <size>14</size>
      <style>bold</style>
      <color>#ffffff</color>
      <hOffset>90</hOffset>
      <vOffset>185</vOffset>
    </about-text>
  <about-text>
      <data>2006</data>
      <font>Arial</font>
      <size>12</size>
      <style>bold</style>
      <color>#ffffff</color>
      <hOffset>90</hOffset>
    <vOffset>200</vOffset>
    </about-text>
  </about-box>  

Itís a whopping amount of code for one small window, most of which is graphic, but itís easy code and should make absolute sense at a glance. The about-version code actually pulls the version number from the main kon file at run time. The reason itís so large is that at present, text in the about-box doesnít wrap and is simply cut off at the end of the window. This is why there are so many <about-text> blocks; each line is its own separate object. The <about-version> and <about-text> blocks are listed separately, much like the <image> element above.  Note that the about box must feature an image in order to function and that the bit of the text that is a hyperlink must have the <url> attribute set in the relevant code block. Once complete, the about box will appear like this:

                 


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