widget-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
m (Reverted edits by ABIDEEN10 (Talk) to last version by Brian)
 
(23 intermediate revisions by 10 users not shown)
Line 1: Line 1:
<h1>Widget examples</h1>
'''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.''' - [[User:Tantek|Tantek]]
== Contributor(s) ==
* [http://lawver.net Kevin Lawver]
* [http://changelog.ca Charles Iliya Krempeaux]
* [[User:ChrisMessina Chris Messina]]
* ...
== Apple's Dashboard ==
== Apple's Dashboard ==
* Uses an XML Manifest file to specify data about the "widget" (width, height, thumbnail image, title and version).
* Uses an XML Manifest file to specify data about the "widget" (width, height, thumbnail image, title and version).
* No requirements for markup around widgets.
* No requirements for markup around widgets.
Line 6: Line 15:
=== Dashboard Example (plist) ===
=== Dashboard Example (plist) ===


<pre><code>&lt;?xml version=&#34;1.0&#34; encoding=&#34;UTF-8&#34;?&gt;
<pre>&lt;?xml version=&#34;1.0&#34; encoding=&#34;UTF-8&#34;?&gt;
&lt;!DOCTYPE plist PUBLIC &#34;-//Apple Computer//DTD PLIST 1.0//EN&#34; &#34;http://www.apple.com/DTDs/PropertyList-1.0.dtd&#34;&gt;
&lt;!DOCTYPE plist PUBLIC &#34;-//Apple Computer//DTD PLIST 1.0//EN&#34; &#34;http://www.apple.com/DTDs/PropertyList-1.0.dtd&#34;&gt;
&lt;plist version=&#34;1.0&#34;&gt;
&lt;plist version=&#34;1.0&#34;&gt;
Line 29: Line 38:
         &lt;string&gt;fight.html&lt;/string&gt;
         &lt;string&gt;fight.html&lt;/string&gt;
&lt;/dict&gt;
&lt;/dict&gt;
&lt;/plist&gt;</code></pre>
&lt;/plist&gt;</pre>


== AOL's Channel Content Modules - [[http://sports.aol.com|AOL Sports example]] ==
== AOL's Channel Content Modules - [http://sports.aol.com AOL Sports example] ==


* Each module (widget) has a markup envelope and some required elements that make it a module and allow for consistent styles across products.
* Each module (widget) has a markup envelope and some required elements that make it a module and allow for consistent styles across products.
Line 37: Line 46:
=== Example ===
=== Example ===


<nowiki><pre><code>&lt;div class=&#34;module themedList&#34;&gt;
<pre>&lt;div class=&#34;module themedList&#34;&gt;
     &lt;div class=&#34;header&#34;&gt;&lt;h3&gt;Kevin&#39;s List Of Fruit&lt;/h3&gt;&lt;/div&gt;
     &lt;div class=&#34;header&#34;&gt;&lt;h3&gt;Kevin&#39;s List Of Fruit&lt;/h3&gt;&lt;/div&gt;
     &lt;div class=&#34;body&#34;&gt;
     &lt;div class=&#34;body&#34;&gt;
Line 45: Line 54:
         &lt;/ul&gt;
         &lt;/ul&gt;
     &lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;</code></pre></nowiki>
&lt;/div&gt;</pre>


== Konfabulator ==
== Konfabulator ==
Line 53: Line 62:
== WSRP ==
== WSRP ==


* [http://www.oasis-open.org/committees/tc_home.php?wg_abbrev=wsrp|WSRP Spec]
* SOAP envelopes to transport modules, but there is no specific formatting required for the actual content of the "portlet" (module or widget).
* SOAP envelopes to transport modules, but there is no specific formatting required for the actual content of the "portlet" (module or widget).
=== Module Response Example ===
<pre>&lt;urn:getMarkupResponse xmlns:urn=&#34;urn:oasis:names:tc:wsrp:v1:types&#34;&gt;
  &lt;urn:markupContext&gt;
    &lt;urn:mimeType&gt;text/html; charset=UTF-8&lt;/urn:mimeType&gt;
    &lt;urn:markupString&gt;&lt;![CDATA[
      &lt;form method=&#34;post&#34;
        action=&#34;wsrp_rewrite?wsrp-urlType=blockingAction/wsrp_rewrite&#34;
        id=&#34;wsrp_rewrite_stockForm&#34;&gt;
        &lt;table border=&#34;0&#34; width=&#34;100%&#34;&gt;
          &lt;tr&gt;
            &lt;td&gt;Enter Stock Symbol&lt;/td&gt;
            &lt;td&gt;&lt;input name=&#34;symbol&#34;&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;input type=&#34;submit&#34; value=&#34;Submit&#34;&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/form&gt;
    ]]&gt;&lt;/urn:markupString&gt;
    &lt;urn:locale&gt;en-US&lt;/urn:locale&gt;
    &lt;urn:requiresUrlRewriting&gt;true&lt;/urn:requiresUrlRewriting&gt;
    &lt;urn:preferredTitle&gt;Portfolio Manager&lt;/urn:preferredTitle&gt;
  &lt;/urn:markupContext&gt;
  &lt;urn:sessionContext&gt;
    &lt;urn:sessionID&gt;sessionID_1&lt;/urn:sessionID&gt;
    &lt;urn:expires&gt;300&lt;/urn:expires&gt;
  &lt;/urn:sessionContext&gt;
&lt;/urn:getMarkupResponse&gt;</pre>
== XBL ==
'''XBL''' ('''Extensible Binding Language''') is technology developed [http://mozilla.org 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:
    <nowiki>
    <html>
        <head>
            <style type="text/css">
            <!--
                shake {
                    </nowiki>'''<nowiki>-moz-binding : url("myxbl.xml#shake-it-baby")</nowiki>'''<nowiki>
                }
            -->
            </style>
        </head>
        <body>
            I want you to </nowiki>'''<nowiki><shake>shake this</shake>.</nowiki>'''<nowiki>
        </body>
    </html>
    </nowiki>
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:
    <nowiki>
    <?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>
    </nowiki>
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:
    <nowiki>
    <html>
        <head>
            <style type="text/css">
            <!--
                shake {
                    </nowiki>'''<nowiki>-moz-binding : url("somexbl.xml#put-it-in-a-circle")</nowiki>'''<nowiki>
                }
            -->
            </style>
        </head>
        <body>
            </nowiki>'''<nowiki><incircle>I'm in a circle</incircle></nowiki>'''<nowiki>
        </body>
    </html>
    </nowiki>
For this example, the "somexbl.xml" file could look like:
    <nowiki>
    <?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>
    </nowiki>
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" ==
* Look a little like Dashboard Widgets, all proprietary XML and Javascript. 
* XML Manifest much like Dashboard's plist file.
* All functionality and appearance is controlled by javascript.
* [http://microsoftgadgets.com/  More info]
== WordPress Widgets ==
* [http://widgets.wordpress.com/ Blog]
* [http://automattic.com/code/widgets/ Widget Code]
* [http://automattic.com/code/widgets/themes Themes]
* [http://automattic.com/code/widgets/plugins Plugins]
* [http://automattic.com/code/widgets/ API]
== See Also ==
* [[widget]]
* [[widget-examples]]
* [[widget-formats]]
* [[widget-brainstorming]]

Latest revision as of 04:52, 7 April 2013

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

  • Uses an XML Manifest file to specify data about the "widget" (width, height, thumbnail image, title and version).
  • No requirements for markup around widgets.

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

  • Each module (widget) has a markup envelope and some required elements that make it a module and allow for consistent styles across products.

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

  • (need someone else to fill this in, have never built one or taken them apart)

WSRP

  • Spec
  • SOAP envelopes to transport modules, but there is no specific formatting required for the actual content of the "portlet" (module or widget).

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"

  • Look a little like Dashboard Widgets, all proprietary XML and Javascript.
  • XML Manifest much like Dashboard's plist file.
  • All functionality and appearance is controlled by javascript.
  • More info

WordPress Widgets

See Also

Retrieved from "http://microformats.org/wiki/index.php?title=widget-examples&oldid=52398"