widget-examples-fr

(Difference between revisions)

Jump to: navigation, search
(Contributeur(s))
(Microsoft "Gadgets")
Line 193: Line 193:
* Fonctionnalités et apparences sont contrôlés par javascript.
* Fonctionnalités et apparences sont contrôlés par javascript.
* [http://microsoftgadgets.com/  Plus d'infos]
* [http://microsoftgadgets.com/  Plus d'infos]
 +
* [http://www.gadgetsdotcom.com Gadgets] [http://asbestosisweb.blogspot.com]
== WordPress Widgets ==
== WordPress Widgets ==

Revision as of 11:23, 6 October 2011

Contents

Exemples de Widget

Contributeur(s)

Traduction

Le Dashboard d'Apple

Exemple Dashboard (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>

Modules de Canaux de Contenus chez AOL - exemple AOL Sports

Exemple

<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

Exemple de Module Réponse

<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) est une technologie développée par Mozilla. Bien que souvent utilisé avec XUL pour fabriquer des widgets, elle peut être aussi utilisée avec HTML. XBL sert en quelque sorte le même rôle que CSS ou XSL, mais bien plus puissant !

Par exemple, je pourrais créer un nouvel élément/tag HTML (ou XUL ou quoi que ce soit) ; disons que je crée le nouvel élément : <shake>. La façon dont fonctionnerait le nouvel élément <shake> est ce que l'utilisateur place la souris sur l'élément sur l'élément (sur la page) il secoue tout ce qui est dedans. Ainsi par exemple, nous pourrions avoir le HTML suivant emballé dans l'élément <shake> :

   
    <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 le code CSS -moz-binding. Ce n'est pas du CSS standard mais une extension Mozilla. (les extensions CSS on un trait d'union précédent.)

Remarquez aussi que le -moz-binding fait référence à un fichier XBL appelé "myxbl.xml". Voici à quoi ça pourrait ressembler :

   
    <?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>
    

Voici un autre exemple. Je créerai un nouvel élément/tag qui dessine un cercle autour du texte à l'intérieur. J'appellerai le nouvel élément/tag <incircle>. Pour faire ça, nous pourrions avoir le code HTML suivant :

   
    <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>
    

Pour cet exemple, le fichier "somexbl.xml" pourrait ressembler à :

   
    <?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>
    

Remarquez que j'ai utilisé SVG pour dessiner le cercle. (Bon, ce code SVG est probablement mauvais. Et si vous utiliser ce code XBL ça ne s'affichera pas bien. Dans la vraie vie, je voudrais utiliser JavaScript pour calculer le rayon du cercle, où les coordonnées x et y du cercle devraient être, etc. Mais c'est juste un exemple pour vous montrer comment l'élément XBL <content> pourrait être utilisé. Je pourrais avoir aussi probalement utilisé l'élément HTML <canvas> pour faire ça.)

Microsoft "Gadgets"

WordPress Widgets

widget-examples-fr was last modified: Wednesday, December 31st, 1969

Views