Les gestionnaires de positionnement

Présentation au sujet: "Les gestionnaires de positionnement"— Transcription de la présentation:

1 Les gestionnaires de positionnement
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 : 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 data-dojo-type="dijit.layout.ContentPane" style="width:400px; height: 400px; top:0 ;left:0 ; background-color:#222222"> <div id="c1" data-dojo-type="dijit.layout.ContentPane" style=" background-color:#C30 "> Div 1 </div> <div id="c2" data-dojo-type="dijit.layout.ContentPane" style="background-color:#FFFF00 " href="dynamic.html" refreshOnShow=true> Div 2 <div id="c3" hasShadow="true" data-dojo-type="dijit.layout.ContentPane" style=" background-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 (de type ContentPane) 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 data-dojo-type= "dijit.layout.BorderContainer" style= " height : 600px; width :100%; background-color :#0000CC" hasShadow= "true" > <div id= "c1" data-dojo-type= "dijit.layout.ContentPane" region= "left" style= "background-color :#0A85FF; width :100px" splitter ="true" >Gauche</div> <div id= "c2" data-dojo-type= "dijit.layout.ContentPane" region= "right" style= "background-color :#0A85FF ; width :100px" splitter="true" > Droit</div> <div id= "c3" data-dojo-type= "dijit.layout.ContentPane" region= "top" style= "background-color :#00CCCC ; height :"100px" splitter:"true" > Haut</div> <div id= "c4" data-dojo-type= "dijit.layout.ContentPane" region= "bottom" style= "background-color :#00CCCC; height :100px" splitter=« true">Bas</div> <div id= "c5" data-dojo-type= "dijit.layout.ContentPane" region= "center" style= "background-color :=#47A3FF">Centre</div> </div>

6 dijit.layout.BorderContainer
Exemple 2 <div data-dojo-type="dijit.layout.BorderContainer" design="headline" style="height:500px;width:500px;border:solid 3px;"> <div data-dojo-type="dijit.layout.ContentPane" region="top" style="background-color:blue;height:100px;" splitter="true" minSize=10 maxSize=100>Nord</div> <div data-dojo-type="dijit.layout.ContentPane" region="center">Centre</div> <div data-dojo-type="dijit.layout.ContentPane" region="bottom“ style="background-color:red;height:100px;" splitter="true">Sud</div> <div data-dojo-type="dijit.layout.ContentPane" region="left" style="background-color:yellow;width:100px;" splitter="true">Ouest</div> <div data-dojo-type="dijit.layout.ContentPane" region="right"  style="background-color:green;width:100px;" splitter="true">Est</div> </div>

7 dijit.layout.StackContainer
Conteneur 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 data-dojo-type="dijit.layout.StackController" containerId="sc"> </span> <div id="sc" data-dojo-type="dijit.layout.StackContainer" style="width: 100%; height: 90px;"> <div id="c1" data-dojo-type="dijit.layout.ContentPane" title="Page 1" style="background-color:#0F0"> Page 1</div> <div id="c2" data-dojo-type="dijit.layout.ContentPane" title="Page 2" style="background-color:#0FF"> Page 2</div> <div id="c3" data-dojo-type="dijit.layout.ContentPane" title="Page 3" style="background-color:#FF0"> Page 3</div> </div> <button data-dojo-type="dijit.form.Button">< <script type="dojo/method" event="onClick" args="evt"> dijit.byId("sc").back( ); </script> </button> <button data-dojo-type="dijit.form.Button">> dijit.byId("sc").forward( );

8 dijit.layout.StackContainer
Ajout d’un élément fils dynamiquement <script type="text/javascript" > dojo.require("dijit.layout.StackContainer"); dojo.require("dijit.layout.ContentPane"); dojo.addOnLoad(function (){ var c=dijit.byId("sc"); var pa=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(pa); } ); </script>

9 dijit.layout.AccordionContainer
Duration: par défaut 250 ms selectChild(widget) closeChild(widget) back() forward() <div id="ac" data-dojo-type="dijit.layout.AccordionContainer" duration="1000" style="width:200px"> <div id="p1" data-dojo-type="dijit.layout.ContentPane" title="Panneau 1" style="background-color:#FF0"> <p style="padding:20px">Panneau 1</p></div> <div id="p2" data-dojo-type="dijit.layout.ContentPane" title="Panneau 2" style="background-color:#00F"> <p style="padding:20px">Panneau 2</p></div> <div id="p3" data-dojo-type="dijit.layout.ContentPane" title="Panneau 3" style="background-color:#0F0"> <p style="padding:20px">Panneau 3</p></div> </div>

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" data-dojo-type="dijit.layout.TabContainer" style="width:225px; height:100px; margin:5px; border:solid 1px;" > <div data-dojo-type="dijit.layout.ContentPane" title="Onglet 1"> Onglet 1 </div> <div data-dojo-type="dijit.layout.ContentPane" title="Onglet 2"> Onglet 2 <div data-dojo-type="dijit.layout.ContentPane" title="Onglet 3"> Onglet 3

11 dijit.layout.TabContainer
Exemple 2 <div data-dojo-type="dijit.layout.TabContainer" style="width:225px; height:100px; margin:5px; border:solid 1px;"> <div data-dojo-type="dijit.layout.ContentPane" title="o1"> Onglet 1 </div> <div data-dojo-type="dijit.layout.ContentPane" title="o2"> Onglet 2 <div data-dojo-type="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 </script> <div data-dojo-type="dijit.layout.ContentPane" title="o4"> Onglet 4

12 dijit.Dialog <script type="text/javascript">
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( ); }); </script> ………. <div id="dialog" data-dojo-type="dijit.Dialog"> Une boîte de dialogue.... </div>

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 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 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 .dijitEditorIconRightToLeft { background-position : -540px; } .tundra .dijitEditorIconBackColor { background-position : -18px; } .tundra .dijitEditorIconSave { background-position : -558px; } .tundra .dijitEditorIconBold { background-position : -36px; } .tundra .dijitEditorIconSpace { background-position : -576px; } .tundra .dijitEditorIconCancel { background-position : -54px; } .tundra .dijitEditorIconStrikethrough { background-position : -594px; } .tundra .dijitEditorIconCopy { background-position : -72px; } .tundra .dijitEditorIconSubscript { background-position : -612px; } .tundra .dijitEditorIconCreateLink { background-position : -90px; } .tundra .dijitEditorIconSuperscript { background-position : -630px; } .tundra .dijitEditorIconCut { background-position : -108px; } .tundra .dijitEditorIconUnderline { background-position : -648px; } .tundra .dijitEditorIconDelete { background-position : -126px; } .tundra .dijitEditorIconUndo { background-position : -666px; } .tundra .dijitEditorIconForeColor { background-position : -144px; } .tundra .dijitEditorIconWikiword { background-position : -684px; } .tundra .dijitEditorIconHiliteColor { background-position : -162px; } .tundra .dijitEditorIconToggleDir { background-position : -540px; } .tundra .dijitEditorIconIndent { background-position : -180px; } .tundra .dijitEditorIconTabIndent { background-position : -702px; } .tundra .dijitEditorIconInsertHorizontalRule {background-position: -198px; .tundra .dijitEditorIconSelectAll { background-position : -720px; } .tundra .dijitEditorIconInsertImage { background-position : -216px; } .tundra .dijitEditorIconUnlink { background-position : -738px; } .tundra .dijitEditorIconInsertOrderedList { background-position : -234px; .tundra .dijitEditorIconFullScreen { background-position : -756px; } .tundra .dijitEditorIconInsertTable { background-position : -252px; } .tundra .dijitEditorIconViewSource { background-position : -774px; } .tundra .dijitEditorIconInsertUnorderedList {background-position : -270px; .tundra .dijitEditorIconPrint { background-position : -792px; } .tundra .dijitEditorIconItalic { background-position : -288px; } .tundra .dijitEditorIconNewPage { background-position : -810px; } .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; }

15 dijit.Menu Exemple 1: <div data-dojo-type="dijit.Menu" >
<div data-dojo-type="dijit.MenuItem">Menu 1 <script type="dojo/method" event="onClick" args="evt"> alert('clic sur le menu: ' + this.attr('label')); </script> </div> <div data-dojo-type="dijit.MenuSeparator" > <div data-dojo-type="dijit.MenuItem">Menu 2 <div data-dojo-type="dijit.PopupMenuItem"> <span>Menu 3</span> <div data-dojo-type="dijit.Menu"> <div data-dojo-type="dijit.MenuItem" onClick="alert('clic sur le menu: ' + this.attr('label'));" iconClass="dijitEditorIcon dijitEditorIconBackColor">Menu 31</div> <div data-dojo-type="dijit.MenuItem" onClick="alert('clic sur le menu: ' + this.attr('label'));">Menu 32</div> <div data-dojo-type="dijit.MenuItem" onClick="alert('clic sur le menu: ' + this.attr('label'));">Menu 33</div>

16 dijit.Menu Exemple 2:Menu Contextuel
<div id="context2" style="background-color:#0FC; height:300px; width:300px;"></div> <div data-dojo-type="dijit.Menu" style="display:none" targetNodeIds="context2" > <div data-dojo-type="dijit.MenuItem">menu 1 <script type="dojo/method" event="onClick" args="evt"> alert("menu 1"); </script> </div> <div data-dojo-type="dijit.MenuItem">menu 2 alert("menu 2"); <div data-dojo-type="dijit.MenuItem">menu 3 alert("menu 3");