widget-examples-fr
Exemples de Widget
Contributeur(s)
Traduction
Le Dashboard d'Apple
- Utilise un fichier Manifest XML pour spécifier les données à propos du "widget" (largeur, hauteur, image vignette, titre et version).
- Aucune obligation de balisage autour des widgets.
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
- Chaque module (widget) a une enveloppe de balisage et quelques éléments obligatoires qui en font un module et permettent des styles cohérents à travers les produits.
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
- (besoin de quelqu'un d'autre pour remplir cela, n'en ai jamais construit un)
WSRP
- Spec
- SOAP enveloppe vers des modules de transport, mais pas de mise en forme spécifique requise pour le véritable contenu du "portlet" (module ou widget).
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"
- Ressemble un peu aux Dashboard Widgets, tous du XML propriétaire et Javascript.
- XML Manifest bien plus comme un fichier plist de Dashboard.
- Fonctionnalités et apparences sont contrôlés par javascript.
- Plus d'infos