Dojo 2 Les ge g s e t s ionnaire ionnair s e de positionnement positionnemen

Transcription

1 Dojo 2 Les gestionnaires de positionnement

2 dijit.layout.contentpane Conteneur simple similaire à une balise html div Propriétés href : null (lien qui définit le contenu div) preload : fl false refreshonshow: false loadingmessage errormessage isloaded: true si le contenu du panneau est chargé preload: true, force le chargement du contenu même si le panneau n est pas visible Méthodes: refresh() attr(nom _ attribut,valeur) Exemple:

3 dijit.layout.contentpane <div dojotype="dijit dijit.layout.contentpane ContentPane" style="width:400px; height: 400px; top:0 ;left:0 ; backgroundcolor:#222222"> <div id="c1" dojotype="dijit.layout.contentpane" dijit.layout.contentpane style=" background- color:#c30 "> Div 1 <div id="c2" dojotype="dijit.layout.contentpane" style="background-color:#ffff00 " href="dynamic.html" refreshonshow=true> Div 2 <div id="c3" hasshadow="true" dojotype="dijit.layout.contentpane" style=" background-color:#00ff00;"> color:#00ff00; Div 3

4 dijit.layout.bordercontainer Un conteneur BorderContainer peut être réparti en 5 régions (Nord, Sud, Ouest, Est et Centre) Chaque région peut contenir au plus un élément fils Propriétés: design: headline (par défaut) ou sidebar persist: false/true (sauvegarde des dimensions des différentes régions dans un cookie) Méthodes (disponibles dans tous les widgets de type Container) addchild (widget) removechild(widget) getparent( ) getchildren( ) Attributs disponibles dans un ContentPane lorsqu il est utilisé dans un BorderLayout minsize: largeur/hauteur minimale. maxsize: largeur/hauteur minimale. splitter: barre de redimensionnement. region: (right,left,center, top, bottom).

5 dijit.layout.bordercontainer Exemple 1: <div dojotype= "dijit.layout.bordercontainer" style= " height : 600px; width :100%; background-color :#0000CC" hasshadow= "true" > <div id= "c1" dojotype= "dijit.layout.contentpane ContentPane" region= "left" style= "background-color :#0A85FF; width :100px" splitter ="true" >Gauche <div id= "c2" dojotype= "dijit.layout.contentpane" region= "right" style= "background-color :#0A85FF ; width :100px" splitter="true" > Droit <div id= "c3" dojotype= "dijit.layout.contentpane" region= "top" style= "background-color color :#00CCCC ; height :100px«splitter:"true" true > Haut <div id= "c4" dojotype= "dijit.layout.contentpane" region= "bottom" style= "background-color :#00CCCC; height :100px" splitter=«true">bas <div id= "c5" dojotype= "dijit.layout.contentpane" region= "center" style= "background-color :=#47A3FF">Centre

6 dijit.layout.bordercontainer Exemple 2: <div dojotype="dijit.layout.bordercontainer" design="headline" style="height:500px;width:500px;border:solid 3px;"> <div dojotype="dijit dijit.layout.contentpane ContentPane" region="top" style="background backgroundcolor:blue;height:100px;" splitter="true" minsize=10 maxsize=100>nord <div dojotype="dijit.layout.contentpane" region="center">centre <div dojotype="dijit.layout.contentpane" region="bottom style="backgroundcolor:red;height:100px;" splitter="true">sud <div dojotype="dijit.layout.contentpane" "dijitl tc t tp " region="left" style="backgroundcolor:yellow;width:100px;" tl splitter="true">ouest <div dojotype="dijit.layout.contentpane" region="right«style="backgroundcolor:green;width:100px;" splitter="true">est true

7 dijit.layout.stackcontainer Conteur qui permet d afficher une page parmi un ensemble de pages, le contrôle de l affichage des pages est géré par un widget de type dijit.layout.stackcontroller. Le contrôleur est associé à un StackContainer à l aide de sa propriété containerid Méthodes/propriétés selectedchildwidget selectchild(/*object*/ page) forward( ) back( ) <span dojotype="dijit.layout.stackcontroller" containerid="sc"> </span> <div id="sc" dojotype="dijit.layout.stackcontainer" style="width: 100%; height: 90px;"> <div id="c1" dojotype="dijit.layout.contentpane" title="page 1" style="background-color:#0f0"> Page 1 <div id="c2" dojotype="dijit.layout.contentpane" title="page 2" style="background-color:#0ff"> Page 2 <div id="c3" dojotype="dijit dijit.layout.contentpane ContentPane" title="page 3" style="background background-color:#ff0 color:#ff0"> Page 3 <button dojotype="dijit.form.button">< <script type="dojo/method" event="onclick" args="evt"> dijit.byid( byid("sc") ).back( back(); </button> <button dojotype="dijit.form.button">> <script type="dojo/method" event="onclick" args="evt"> dijit.byid( byid("sc") ).forward( forward(); </button>

8 dijit.layout.stackcontainer Ajout d un élément fils dynamiquement <script type="text/javascript" > dj dojo.require("dijit.layout.stackcontainer"); t t i ") dojo.require("dijit.layout.contentpane"); dojo.addonload(function (){ var c=dijit.byid("sc"); var p=new dijit.layout.contentpane({id:p,content: "Panneau créé dynamiquement",style:" background-color:#ffffff;", title:"panneau 4"}); // ajout du nouveau panneau dans le panneau c1 c.addchild(p); } );

9 dijit.layout.accordioncontainer Duration: par défaut 250 ms selectchild(widget) closechild(widget) back() forward() <div id="ac" dojotype="dijit.layout.accordioncontainer" duration="1000" style="width:200px"> <div id="p1" dojotype="dijit.layout.contentpane" title="panneau 1" style="background-color:#ff0"> <p style="padding:20px">panneau ">P 1</p> > <div id="p2" dojotype="dijit.layout.contentpane" title="panneau 2" style="background-color:#00f"> <p style="padding:20px">panneau 2</p> <div id="p3" dojotype="dijit.layout.contentpane" title="panneau 3" style="background-color:#0f0"> <p style="padding:20px">panneau 3</p>

10 dijit.layout.tabcontainer Affichage d onglets Possède les mêmes fonctionnalités qu un widget de type StackContainer avec les caractéristiques suivantes: Le contrôleur est intégré dans le widget Les boutons sont affichés sous la forme d onglets <div id="tc" dojotype="dijit.layout.tabcontainer" style="width:225px; height:100px; margin:5px; border:solid 1px;" > <div djt dojotype="dijit.layout.contentpane" " title="onglet il l 1"> Onglet 1 <div dojotype="dijit.layout.contentpane" title="onglet 2"> Onglet 2 <div dojotype="dijit.layout.contentpane" title="onglet 3"> Onglet 3

11 dijit.layout.tabcontainer Exemple 2 <div dojotype="dijit.layout.tabcontainer" style="width:225px; height:100px; margin:5px; border:solid 1px;"> <div dojotype="dijit.layout.contentpane" title="o1"> Onglet 1 <div dojotype="dijit.layout.contentpane" title="o2"> Onglet 2 <div dojotype="dijit.layout.contentpane" title="o3" closable="true">onglet 3 <script type="dojo/method" event="onclose" args="evt"> alert("fermeture:" + this.title); return true; //on doit retourner true pour permettre la fermeture <div dojotype="dijit.layout.contentpane" title="o4"> Onglet 4

12 dijit.dialog Widget qui représente une boîte de dialogue modale. Propriétés open: vaut true si la boîte de dialogue est affichée. duration: durée d affichage de la boîte de dialogue en ms (400 par défaut). title content closable:false par défaut. Voir Aussi: dijit.tooltipdialog <script type="text/javascript"> dojo.require("dijit.dialog"); dojo.addonload(function( ) { dijit.byid("dialog").show( ); });. <div id="dialog" dojotype="dijit.dialog"> Une boîte de dialogue...

13 dijit.menu Le fichier dijit.menu contient la définition des classes suivantes: dijit.menu: Conteneur pour les éléments d un menu dijit.menuitem: une commande de menu dijit.menuseparator: un séparateur de commandes dans un menu. dijit.popupmenu: Pour créer un sous menu Les widgets Menu et PopupMenu peuvent contenir les widgets suivants: dijit.menuitem dijit.menuseparator dijit.popupmenu p Menu Propriétés: popupdelay: délai d affichage du menu en ms (par défaut 500) targetnodeids: liste des id des zones dans lesquelles le menu sera affiché à l aide du clic droit. parentmenu MenuItem Propriétés: label: titre du menu. iconclass: classe css qui décrit l icône qui sera associée à la commande. L icône est extraite à partir d une position bien déterminée dans une image. exemple: disabled Evénement: onclick

14 Icônes associées au widget Editor Image contenant les icônes: Classe de l image contenant les icônes.tundra.dijiteditoricon { background-image: url('images/editor.gif') ; background-repeat : no-repeat; width: 18px; height: 18px; text-align: center; } Icônes définies dans l image.tundra.dijiteditoriconsep { background-position : 0px; }.tundra.dijiteditoriconbackcolor { background-position : -18px; }.tundra.dijiteditoriconbold { background-position : -36px; }.tundra.dijiteditoriconcancel { background-position : -54px; }.tundra.dijiteditoriconcopy { background-position : -72px; }.tundra.dijiteditoriconcreatelink { background-position : -90px; }.tundra.dijiteditoriconcut { background-position : -108px; }.tundra.dijiteditoricondelete { background-position : -126px; }.tundra.dijiteditoriconforecolor { background-position : -144px; }.tundra.dijiteditoriconhilitecolor { background-position : -162px; }.tundra.dijiteditoriconindent { background-position : -180px; }.tundra.dijiteditoriconinserthorizontalrule {background-position: -198px;.tundra.dijitEditorIconInsertImage { background-position : -216px; }.tundra.dijiteditoriconinsertorderedlist { background-position : -234px;.tundra.dijitEditorIconInsertTable { background-position : -252px; }.tundra.dijiteditoriconinsertunorderedlist {background-position : -270px;.tundra.dijitEditorIconItalic { background-position : -288px; }.tundra.dijiteditoriconjustifycenter { background-position : -306px; }.tundra.dijiteditoriconjustifyfull { background-position : -324px; }.tundra.dijiteditoriconjustifyleft { background-position : -342px; }.tundra.dijiteditoriconjustifyright { background-position : -360px; }.tundra.dijiteditoriconlefttoright { background-position : -378px; }.tundra.dijiteditoriconlistbulletindent { background-position : -396px;.tundra.dijitEditorIconListBulletOutdent { background-position : -414px;.tundra.dijitEditorIconListNumIndent { background-position : -432px; }.tundra.dijiteditoriconlistnumoutdent { background-position : -450px; }.tundra.dijiteditoriconoutdent { background-position : -468px; }.tundra.dijiteditoriconpaste { background-position : -486px; }.tundra.dijiteditoriconredo { background-position : -504px; }.tundra.dijiteditoriconremoveformat { background-position : -522px; }.tundra.dijiteditoriconrighttoleft { background-position : -540px; }.tundra.dijiteditoriconsave { background-position : -558px; }.tundra.dijiteditoriconspace { background-position : -576px; }.tundra.dijiteditoriconstrikethrough { background-position : -594px; }.tundra.dijiteditoriconsubscript { background-position : -612px; }.tundra.dijiteditoriconsuperscript { background-position : -630px; }.tundra.dijiteditoriconunderline { background-position : -648px; }.tundra.dijiteditoriconundo { background-position : -666px; }.tundra.dijiteditoriconwikiword { background-position : -684px; }.tundra.dijiteditoricontoggledir { background-position : -540px; }.tundra.dijiteditoricontabindent { background-position : -702px; }.tundra.dijiteditoriconselectall { background-position : -720px; }.tundra.dijiteditoriconunlink { background-position : -738px; }.tundra.dijiteditoriconfullscreen { background-position : -756px; }.tundra.dijiteditoriconviewsource { background-position : -774px; }.tundra.dijiteditoriconprint { background-position : -792px; }.tundra.dijiteditoriconnewpage d to { background-position o : -810px; }

15 dijit.menu Exemple 1: <div dojotype="dijit.menu" > <div dojotype="dijit dijit.menuitem MenuItem">Menu 1 <script type="dojo/method" event="onclick" args="evt"> alert('clic sur le menu: ' + this.attr('label')); <div djt dojotype="dijit.menuseparator" t " > <div dojotype="dijit.menuitem">menu 2 <script type="dojo/method" event="onclick" args="evt"> alert('clic sur le menu: ' + this.attr('label')); <div dojotype="dijit.popupmenuitem"> <span>menu 3</span> <div dojotype="dijit dijit.menu Menu"> <div dojotype="dijit.menuitem" onclick="alert('clic sur le menu: ' + this.attr('label'));" iconclass="dijiteditoricon dijiteditoriconbackcolor">menu 31 <div dojotype="dijit.menuitem" onclick="alert('clic sur le menu: ' + this.attr('label'));">menu 32 <div dojotype="dijit.menuitem" onclick="alert('clic sur le menu: ' + this.attr('label'));">menu 33

16 dijit.menu Exemple 2:Menu Contextuel <div id="context2" t2" style="background-color:#0fc; tl l height:300px; ht width:300px;"> <div dojotype="dijit.menu" style="display:none" targetnodeids="context2" > <div dojotype="dijit.menuitem">menu 1 <script type="dojo/method" th d" event="onclick" args="evt"> alert("menu 1"); <div dj dojotype="dijit.menuitem">menu " 2 <script type="dojo/method" event="onclick" args="evt"> alert("menu 2"); <div dojotype="dijit.menuitem">menu 3 <script type="dojo/method" event="onclick" args="evt"> alert("menu 3");

17 dijit.tree Source de données JSOM { label: 'nom', identifier: 'nom', items: [ { 'nom':'fruit', 'type':'categorie' }, { 'nom':'l\u00e9gumes', 'type': 'categorie', 'children' : [ { 'nom':'tomates', 'type':'produit' }, { 'nom':'pommes de terre', 'type':'produit' }, { 'nom':'oignon', 'type':'produit' } ] }, { 'nom':'boissons', o s 'type': 'categorie' e } ] } Exemple 1: le modèle ForestStoreModel <script type="text/javascript" language="javascript"> dojo.require("dojo.data.itemfilereadstore" ); dojo.require("dijit.tree" ); //// <div dojotype="dojo.data.itemfilereadstore" url="donnees.json" jsid="dstore"/> <div dojotype="dijit.tree.foreststoremodel" store="dstore" jsid="modele" query="{nom:'*'}" rootid="racine" rootlabel="liste des produits" /> <div dojotype="dijit.tree" model="modele" > <script type="dojo/method" event="onclick" args="elt,anoeud" > alert( dstore.getlabel(elt));

18 dijit.tree Exemple 2: TreeStoreModel <div dojotype="dojo.data.itemfilereadstore" url="donnees.json" jsid="dstore"/> <div dojotype="dijit.tree.treestoremodel" store="dstore" jsid="modele" query="{nom:'*mes'}" /> <div dojotype="dijit.tree" model="modele" > <script type="dojo/method" event="onclick" args="elt,anoeud" > alert(dstore.getlabel(elt));

19 dijit.tooltip connectid :liste des ids des widgets dans les quels l info info bulle sera affichée. label: texte à afficher dans l info bulle. showdelay (400): délai en ms avant l affichage de l info bulle. position: valeurs possibles: Démo bf before after above Below <div dojotype= "dijit.form.button" id= "b1" >Bouton 1 <div dojotype= "dijit.form.button Button" id= "b2" >Bouton 2 <div dojotype= "dijit.tooltip" connectid= "b1" label= "Affichage" > Mouse Over Bouton 1 <div dojotype= "dijit.tooltip" connectid= "b2" position= "below" > Mouse Over Bouton 2

20 Autres Contrôles dijit.colorpalette dijit.toolbar dijit.progressbar dijit.inlineeditbox Dijit.TitlePane