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: 4 stars4 stars4 stars4 stars4 stars / 3
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

TOOLS YOU CAN USE

advertisement
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

- 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
- Simple Web Syndication with RSS 2.0
- Java UI Design with an IDE

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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