widget-examples

Jump to: navigation, search

Contents

Widget examples

This page needs to be split into widget-examples which are actual examples of widgets themselves published in the real world on the Web, and widget-formats which describes previous widget formats such as Apple's Dashboard etc. - Tantek

Contributor(s)

Apple's Dashboard

Dashboard Example (plist)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
        <key>AllowNetworkAccess</key>
        <true/>
        <key>CFBundleDisplayName</key>
        <string>AIM Fighter</string>
        <key>CFBundleIdentifier</key>
        <string>com.aimfight.widget</string>
        <key>CFBundleName</key>
        <string>AOL Fighter</string>
        <key>CFBundleShortVersionString</key>
        <string>2.0</string>
        <key>CFBundleVersion</key>
        <string>2.0</string>
        <key>CloseBoxInsetX</key>
        <integer>5</integer>
        <key>CloseBoxInsetY</key>
        <integer>5</integer>
        <key>MainHTML</key>
        <string>fight.html</string>
</dict>
</plist>

AOL's Channel Content Modules - AOL Sports example

Example

<div class="module themedList">
    <div class="header"><h3>Kevin's List Of Fruit</h3></div>
    <div class="body">
        <ul>
            <li>Apples</li>
            <li>Oranges</li>
        </ul>
    </div>
</div>

Konfabulator

WSRP

Module Response Example

<urn:getMarkupResponse xmlns:urn="urn:oasis:names:tc:wsrp:v1:types">
  <urn:markupContext> 
    <urn:mimeType>text/html; charset=UTF-8</urn:mimeType>
    <urn:markupString><![CDATA[ 
      <form method="post" 
        action="wsrp_rewrite?wsrp-urlType=blockingAction/wsrp_rewrite"
        id="wsrp_rewrite_stockForm">
        <table border="0" width="100%">
          <tr>
            <td>Enter Stock Symbol</td>
            <td><input name="symbol"></td>
          </tr> 
          <tr>
            <td><input type="submit" value="Submit"></td>
          </tr> 
        </table>
      </form> 
    ]]></urn:markupString>
    <urn:locale>en-US</urn:locale>
    <urn:requiresUrlRewriting>true</urn:requiresUrlRewriting>
    <urn:preferredTitle>Portfolio Manager</urn:preferredTitle>
  </urn:markupContext> 
  <urn:sessionContext> 
    <urn:sessionID>sessionID_1</urn:sessionID> 
    <urn:expires>300</urn:expires> 
  </urn:sessionContext> 
</urn:getMarkupResponse>


XBL

XBL (Extensible Binding Language) is technology developed Mozilla. Although often used with XUL for making widgets, it can also be used with HTML. XBL somewhat serves the same role as CSS or XSL, but much much more powerful!

For example, I could create a new HTML (or XUL or whatever) element/tag; let's say I create the new element: <shake>. The way the new <shake> element would work is that what the user puts the mouse over the element (on the page) it shakes whatever is in it. So for example, we might have the following HTML snipped with the <shake> element:

   
    <html>
        <head>
            <style type="text/css">
            <!--

                shake {
                    -moz-binding : url("myxbl.xml#shake-it-baby")
                }

            -->
            </style>
        </head>

        <body>
            I want you to <shake>shake this</shake>.
        </body>

    </html>
    

Note the -moz-binding CSS code. This is NOT standard CSS but a Mozilla extension. (CSS extensions have a prepending hyphen.)

Also note that the -moz-binding refers to an XBL file named "myxbl.xml". Here's how it could look:

   
    <?xml version="1.0"?>

    <bindings xmlns="http://www.mozilla.org/xbl">
        <binding id="shake-it-baby">
            <content>
                <children />
            </content>
            <handlers>
                <handler event="mouseover" action="a_javascript_function_that_shakes_it();" />
            </handlers>
        </binding>
    </bindings>
    

Here's another example. I'll create a new element/tag that draws a circle around the text inside of it. I'll call the new element/tag <incircle>. For, this we might have the HTML code:

   
    <html>
        <head>
            <style type="text/css">
            <!--

                shake {
                    -moz-binding : url("somexbl.xml#put-it-in-a-circle")
                }

            -->
            </style>
        </head>

        <body>
            <incircle>I'm in a circle</incircle>
        </body>

    </html>
    

For this example, the "somexbl.xml" file could look like:

   
    <?xml version="1.0"?>

    <bindings xmlns="http://www.mozilla.org/xbl"
              xmlns:svg="http://www.w3.org/2000/svg"
    >
        <binding id="put-it-in-a-circle">
            <content>
                <svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
                <children />
            </content>
        </binding>
    </bindings>
    

Notice that I used SVG to draw circle. (OK, that SVG code is probably really bad. And if you use that XBL code it won't look good. In real life, I'd want to use JavaScript to figure out the radius of the circle, where the x and y coordinates of the circle should be, etc. But this is just an example to show you how the XBL <content> element could be used. I could have probably use the HTML <canvas> element to do this too.)

Microsoft "Gadgets"

WordPress Widgets

See Also

widget-examples was last modified: Sunday, April 7th, 2013

Views