From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- .../mozilla/xul/attributs/acceltext/index.html | 18 - .../mozilla/xul/attributs/accesskey/index.html | 26 - .../archive/mozilla/xul/attributs/align/index.html | 36 -- .../mozilla/xul/attributs/allowevents/index.html | 19 - .../attributs/allownegativeassertions/index.html | 17 - .../xul/attributs/buttondisabledaccept/index.html | 18 - .../mozilla/xul/attributs/checked/index.html | 24 - .../archive/mozilla/xul/attributs/class/index.html | 15 - .../xul/attributs/coalesceduplicatearcs/index.html | 17 - .../mozilla/xul/attributs/collapsed/index.html | 17 - .../mozilla/xul/attributs/command/index.html | 23 - .../mozilla/xul/attributs/container/index.html | 17 - .../mozilla/xul/attributs/containment/index.html | 19 - .../mozilla/xul/attributs/context/index.html | 17 - .../mozilla/xul/attributs/contextmenu/index.html | 17 - .../archive/mozilla/xul/attributs/crop/index.html | 26 - .../mozilla/xul/attributs/datasources/index.html | 21 - .../xul/attributs/datepicker.type/index.html | 40 -- .../xul/attributs/datepicker.value/index.html | 18 - .../archive/mozilla/xul/attributs/dir/index.html | 32 -- .../mozilla/xul/attributs/disabled/index.html | 21 - .../archive/mozilla/xul/attributs/empty/index.html | 15 - .../mozilla/xul/attributs/equalsize/index.html | 18 - .../xul/attributs/firstdayofweek/index.html | 17 - .../archive/mozilla/xul/attributs/flags/index.html | 20 - .../archive/mozilla/xul/attributs/flex/index.html | 14 - .../mozilla/xul/attributs/height/index.html | 15 - .../mozilla/xul/attributs/helpuri/index.html | 18 - .../mozilla/xul/attributs/hidden/index.html | 15 - .../mozilla/xul/attributs/hidechrome/index.html | 15 - .../mozilla/xul/attributs/hideseconds/index.html | 18 - .../fr/archive/mozilla/xul/attributs/id/index.html | 38 -- .../archive/mozilla/xul/attributs/image/index.html | 18 - .../mozilla/xul/attributs/increment/index.html | 21 - files/fr/archive/mozilla/xul/attributs/index.html | 281 ----------- .../mozilla/xul/attributs/insertafter/index.html | 17 - .../mozilla/xul/attributs/insertbefore/index.html | 17 - .../mozilla/xul/attributs/instantapply/index.html | 17 - .../mozilla/xul/attributs/inverted/index.html | 17 - .../archive/mozilla/xul/attributs/label/index.html | 33 -- .../archive/mozilla/xul/attributs/left/index.html | 15 - .../archive/mozilla/xul/attributs/max/index.html | 21 - .../mozilla/xul/attributs/maxheight/index.html | 15 - .../mozilla/xul/attributs/maxwidth/index.html | 15 - .../archive/mozilla/xul/attributs/menu/index.html | 15 - .../archive/mozilla/xul/attributs/min/index.html | 21 - .../mozilla/xul/attributs/minheight/index.html | 15 - .../mozilla/xul/attributs/minwidth/index.html | 15 - .../mozilla/xul/attributs/mousethrough/index.html | 25 - .../archive/mozilla/xul/attributs/name/index.html | 14 - .../mozilla/xul/attributs/noautofocus/index.html | 17 - .../mozilla/xul/attributs/observes/index.html | 17 - .../mozilla/xul/attributs/onchange/index.html | 17 - .../mozilla/xul/attributs/oncommand/index.html | 21 - .../mozilla/xul/attributs/onpaneload/index.html | 18 - .../mozilla/xul/attributs/onpopuphidden/index.html | 15 - .../mozilla/xul/attributs/onpopuphiding/index.html | 15 - .../xul/attributs/onpopupshowing/index.html | 15 - .../mozilla/xul/attributs/onpopupshown/index.html | 15 - .../archive/mozilla/xul/attributs/open/index.html | 16 - .../mozilla/xul/attributs/ordinal/index.html | 15 - .../mozilla/xul/attributs/orient/index.html | 21 - .../archive/mozilla/xul/attributs/pack/index.html | 22 - .../mozilla/xul/attributs/pageincrement/index.html | 21 - .../mozilla/xul/attributs/persist/index.html | 15 - .../mozilla/xul/attributs/popup.left/index.html | 17 - .../xul/attributs/popup.position/index.html | 30 -- .../mozilla/xul/attributs/popup.top/index.html | 17 - .../archive/mozilla/xul/attributs/popup/index.html | 22 - .../mozilla/xul/attributs/position/index.html | 17 - .../xul/attributs/preference-editable/index.html | 16 - .../xul/attributs/preference.name/index.html | 18 - .../xul/attributs/preference.type/index.html | 13 - .../mozilla/xul/attributs/preference/index.html | 15 - .../xul/attributs/prefpane.selected/index.html | 24 - .../mozilla/xul/attributs/prefpane.src/index.html | 25 - .../mozilla/xul/attributs/properties/index.html | 15 - .../mozilla/xul/attributs/querytype/index.html | 15 - .../mozilla/xul/attributs/readonly/index.html | 15 - .../archive/mozilla/xul/attributs/ref/index.html | 15 - .../mozilla/xul/attributs/removeelement/index.html | 17 - .../archive/mozilla/xul/attributs/rows/index.html | 15 - .../mozilla/xul/attributs/screenx/index.html | 15 - .../mozilla/xul/attributs/screeny/index.html | 17 - .../mozilla/xul/attributs/selected/index.html | 19 - .../mozilla/xul/attributs/seltype/index.html | 26 - .../mozilla/xul/attributs/sizemode/index.html | 21 - .../mozilla/xul/attributs/sortdirection/index.html | 21 - .../mozilla/xul/attributs/sortresource/index.html | 17 - .../mozilla/xul/attributs/sortresource2/index.html | 17 - .../archive/mozilla/xul/attributs/src/index.html | 34 -- .../mozilla/xul/attributs/statustext/index.html | 39 -- .../archive/mozilla/xul/attributs/style/index.html | 15 - .../xul/attributs/suppressonselect/index.html | 22 - .../mozilla/xul/attributs/tabindex/index.html | 15 - .../mozilla/xul/attributs/template/index.html | 15 - .../xul/attributs/timepicker.increment/index.html | 18 - .../xul/attributs/timepicker.value/index.html | 18 - .../archive/mozilla/xul/attributs/title/index.html | 17 - .../mozilla/xul/attributs/tooltip/index.html | 15 - .../mozilla/xul/attributs/tooltiptext/index.html | 15 - .../archive/mozilla/xul/attributs/top/index.html | 17 - .../archive/mozilla/xul/attributs/type/index.html | 21 - .../archive/mozilla/xul/attributs/uri/index.html | 19 - .../archive/mozilla/xul/attributs/value/index.html | 22 - .../mozilla/xul/attributs/wait-cursor/index.html | 15 - .../archive/mozilla/xul/attributs/width/index.html | 30 -- .../mozilla/xul/attributs/windowtype/index.html | 17 - files/fr/archive/mozilla/xul/box/index.html | 100 ---- files/fr/archive/mozilla/xul/button/index.html | 287 ----------- .../index.html" | 27 - files/fr/archive/mozilla/xul/checkbox/index.html | 194 -------- files/fr/archive/mozilla/xul/command/index.html | 81 --- files/fr/archive/mozilla/xul/datepicker/index.html | 231 --------- .../fr/archive/mozilla/xul/description/index.html | 150 ------ files/fr/archive/mozilla/xul/dropmarker/index.html | 88 ---- .../index.html" | 74 --- .../mozilla/xul/guide_des_popups/index.html | 69 --- .../ouverture_et_fermeture/index.html | 174 ------- .../mozilla/xul/guide_des_popups/panels/index.html | 128 ----- files/fr/archive/mozilla/xul/hbox/index.html | 98 ---- .../ic\303\264nes_de_fen\303\252tre/index.html" | 17 - files/fr/archive/mozilla/xul/index.html | 116 ----- .../xul/introduction_\303\240_xul/index.html" | 46 -- files/fr/archive/mozilla/xul/label/index.html | 183 ------- .../xul/les_contr\303\264les_xul/index.html" | 550 --------------------- .../mozilla/xul/les_joies_de_xul/index.html | 142 ------ files/fr/archive/mozilla/xul/listbox/index.html | 276 ----------- files/fr/archive/mozilla/xul/listitem/index.html | 265 ---------- files/fr/archive/mozilla/xul/menu/index.html | 196 -------- files/fr/archive/mozilla/xul/menubar/index.html | 77 --- files/fr/archive/mozilla/xul/menuitem/index.html | 293 ----------- files/fr/archive/mozilla/xul/menulist/index.html | 276 ----------- files/fr/archive/mozilla/xul/menupopup/index.html | 229 --------- .../archive/mozilla/xul/menuseparator/index.html | 242 --------- .../index.html | 98 ---- .../modifications_xul_pour_firefox_1.5/index.html | 59 --- .../mozilla/xul/m\303\251thodes/blur/index.html" | 14 - .../mozilla/xul/m\303\251thodes/click/index.html" | 14 - .../xul/m\303\251thodes/decrease/index.html" | 26 - .../xul/m\303\251thodes/decreasepage/index.html" | 17 - .../xul/m\303\251thodes/docommand/index.html" | 14 - .../mozilla/xul/m\303\251thodes/focus/index.html" | 14 - .../getelementsbyattribute/index.html" | 14 - .../xul/m\303\251thodes/getrowcount/index.html" | 14 - .../xul/m\303\251thodes/hasuservalue/index.html" | 16 - .../xul/m\303\251thodes/hidepopup/index.html" | 15 - .../xul/m\303\251thodes/increase/index.html" | 29 -- .../xul/m\303\251thodes/increasepage/index.html" | 17 - .../mozilla/xul/m\303\251thodes/index.html" | 186 ------- .../mozilla/xul/m\303\251thodes/moveto/index.html" | 14 - .../xul/m\303\251thodes/openpopup/index.html" | 21 - .../m\303\251thodes/openpopupatscreen/index.html" | 15 - .../mozilla/xul/m\303\251thodes/reset/index.html" | 17 - .../mozilla/xul/m\303\251thodes/select/index.html" | 16 - .../xul/m\303\251thodes/selectall/index.html" | 14 - .../xul/m\303\251thodes/selectitem/index.html" | 14 - .../m\303\251thodes/selectitemrange/index.html" | 14 - .../m\303\251thodes/setselectionrange/index.html" | 18 - .../xul/m\303\251thodes/showpane/index.html" | 16 - .../xul/m\303\251thodes/showpopup/index.html" | 20 - .../mozilla/xul/m\303\251thodes/sizeto/index.html" | 14 - .../mozilla/xul/m\303\251thodes/stop/index.html" | 19 - .../xul/m\303\251thodes/syncsessions/index.html" | 19 - .../xul/m\303\251thodes/timedselect/index.html" | 14 - .../toggleitemselection/index.html" | 14 - files/fr/archive/mozilla/xul/panel/index.html | 222 --------- files/fr/archive/mozilla/xul/popup/index.html | 19 - files/fr/archive/mozilla/xul/preference/index.html | 219 -------- .../fr/archive/mozilla/xul/preferences/index.html | 95 ---- files/fr/archive/mozilla/xul/prefpane/index.html | 135 ----- files/fr/archive/mozilla/xul/prefwindow/index.html | 144 ------ .../accessible/index.html" | 16 - .../accessibletype/index.html" | 58 --- .../propri\303\251t\303\251s/accesskey/index.html" | 16 - .../xul/propri\303\251t\303\251s/align/index.html" | 14 - .../allowevents/index.html" | 16 - .../amindicator/index.html" | 16 - .../propri\303\251t\303\251s/boxobject/index.html" | 16 - .../propri\303\251t\303\251s/builder/index.html" | 16 - .../propri\303\251t\303\251s/classname/index.html" | 14 - .../propri\303\251t\303\251s/collapsed/index.html" | 14 - .../contextmenu/index.html" | 14 - .../controllers/index.html" | 14 - .../xul/propri\303\251t\303\251s/crop/index.html" | 14 - .../currentitem/index.html" | 14 - .../propri\303\251t\303\251s/database/index.html" | 14 - .../datasources/index.html" | 14 - .../xul/propri\303\251t\303\251s/date/index.html" | 17 - .../dateleadingzero/index.html" | 17 - .../datepicker.open/index.html" | 17 - .../datepicker.value/index.html" | 17 - .../propri\303\251t\303\251s/datevalue/index.html" | 17 - .../defaultvalue/index.html" | 16 - .../xul/propri\303\251t\303\251s/dir/index.html" | 14 - .../propri\303\251t\303\251s/disabled/index.html" | 14 - .../xul/propri\303\251t\303\251s/flex/index.html" | 16 - .../propri\303\251t\303\251s/height/index.html" | 14 - .../propri\303\251t\303\251s/hidden/index.html" | 14 - .../hideseconds/index.html" | 17 - .../xul/propri\303\251t\303\251s/hour/index.html" | 17 - .../hourleadingzero/index.html" | 17 - .../xul/propri\303\251t\303\251s/id/index.html" | 16 - .../xul/propri\303\251t\303\251s/image/index.html" | 14 - .../propri\303\251t\303\251s/increment/index.html" | 17 - .../xul/propri\303\251t\303\251s/index.html" | 224 --------- .../propri\303\251t\303\251s/inverted/index.html" | 16 - .../is24hourclock/index.html" | 17 - .../xul/propri\303\251t\303\251s/ispm/index.html" | 17 - .../xul/propri\303\251t\303\251s/label/index.html" | 14 - .../xul/propri\303\251t\303\251s/left/index.html" | 16 - .../listboxobject/index.html" | 14 - .../propri\303\251t\303\251s/locked/index.html" | 16 - .../xul/propri\303\251t\303\251s/max/index.html" | 16 - .../propri\303\251t\303\251s/maxheight/index.html" | 14 - .../propri\303\251t\303\251s/maxwidth/index.html" | 14 - .../xul/propri\303\251t\303\251s/menu/index.html" | 14 - .../xul/propri\303\251t\303\251s/min/index.html" | 16 - .../propri\303\251t\303\251s/minheight/index.html" | 16 - .../propri\303\251t\303\251s/minute/index.html" | 17 - .../minuteleadingzero/index.html" | 17 - .../propri\303\251t\303\251s/minwidth/index.html" | 14 - .../xul/propri\303\251t\303\251s/month/index.html" | 17 - .../monthleadingzero/index.html" | 17 - .../xul/propri\303\251t\303\251s/name/index.html" | 16 - .../propri\303\251t\303\251s/observes/index.html" | 14 - .../xul/propri\303\251t\303\251s/open/index.html" | 14 - .../propri\303\251t\303\251s/ordinal/index.html" | 16 - .../propri\303\251t\303\251s/orient/index.html" | 14 - .../xul/propri\303\251t\303\251s/pack/index.html" | 14 - .../pageincrement/index.html" | 16 - .../propri\303\251t\303\251s/persist/index.html" | 16 - .../pmindicator/index.html" | 17 - .../popupboxobject/index.html" | 14 - .../propri\303\251t\303\251s/position/index.html" | 14 - .../preference.preferences/index.html" | 16 - .../propri\303\251t\303\251s/readonly/index.html" | 21 - .../xul/propri\303\251t\303\251s/ref/index.html" | 14 - .../propri\303\251t\303\251s/resource/index.html" | 14 - .../propri\303\251t\303\251s/second/index.html" | 17 - .../secondleadingzero/index.html" | 17 - .../propri\303\251t\303\251s/selected/index.html" | 14 - .../selectedindex/index.html" | 14 - .../selecteditem/index.html" | 14 - .../propri\303\251t\303\251s/seltype/index.html" | 22 - .../xul/propri\303\251t\303\251s/state/index.html" | 20 - .../statustext/index.html" | 14 - .../xul/propri\303\251t\303\251s/style/index.html" | 14 - .../suppressonselect/index.html" | 20 - .../propri\303\251t\303\251s/tabindex/index.html" | 14 - .../timepicker.value/index.html" | 17 - .../propri\303\251t\303\251s/tooltip/index.html" | 14 - .../tooltiptext/index.html" | 24 - .../xul/propri\303\251t\303\251s/top/index.html" | 16 - .../xul/propri\303\251t\303\251s/type/index.html" | 17 - .../xul/propri\303\251t\303\251s/value/index.html" | 14 - .../xul/propri\303\251t\303\251s/width/index.html" | 16 - .../xul/propri\303\251t\303\251s/year/index.html" | 17 - .../yearleadingzero/index.html" | 17 - .../index.html" | 484 ------------------ .../fr/archive/mozilla/xul/richlistbox/index.html | 268 ---------- .../fr/archive/mozilla/xul/richlistitem/index.html | 128 ----- .../xul/r\303\251f\303\251rence_xul/index.html" | 165 ------- files/fr/archive/mozilla/xul/scale/index.html | 255 ---------- files/fr/archive/mozilla/xul/spacer/index.html | 100 ---- .../fr/archive/mozilla/xul/spinbuttons/index.html | 93 ---- files/fr/archive/mozilla/xul/stack/index.html | 93 ---- files/fr/archive/mozilla/xul/tabpanels/index.html | 126 ----- files/fr/archive/mozilla/xul/textbox/index.html | 348 ------------- files/fr/archive/mozilla/xul/timepicker/index.html | 264 ---------- .../index.html" | 127 ----- files/fr/archive/mozilla/xul/toolbars/index.html | 72 --- files/fr/archive/mozilla/xul/toolbox/index.html | 127 ----- files/fr/archive/mozilla/xul/tooltip/index.html | 225 --------- files/fr/archive/mozilla/xul/tree/index.html | 313 ------------ files/fr/archive/mozilla/xul/treecell/index.html | 83 ---- .../fr/archive/mozilla/xul/treechildren/index.html | 101 ---- files/fr/archive/mozilla/xul/treecol/index.html | 187 ------- files/fr/archive/mozilla/xul/treecols/index.html | 112 ----- files/fr/archive/mozilla/xul/treeitem/index.html | 87 ---- files/fr/archive/mozilla/xul/treerow/index.html | 108 ---- .../archive/mozilla/xul/treeseparator/index.html | 107 ---- .../index.html" | 153 ------ .../index.html" | 139 ------ .../index.html" | 140 ------ .../ajout_de_m\303\251thodes/index.html" | 194 -------- .../ajout_de_propri\303\251t\303\251s/index.html" | 168 ------- .../tutoriel_xul/ajouter_des_boutons/index.html | 106 ---- .../ajouter_des_feuilles_de_style/index.html | 107 ---- .../index.html" | 64 --- .../index.html" | 73 --- .../mozilla/xul/tutoriel_xul/arbres/index.html | 105 ---- .../xul/tutoriel_xul/arbres_et_gabarits/index.html | 93 ---- .../assistant_avan\303\247\303\251/index.html" | 66 --- .../index.html" | 109 ---- .../barres_de_d\303\251filement/index.html" | 39 -- .../barres_de_menus_simples/index.html | 127 ----- .../index.html" | 103 ---- .../broadcasters_et_observateurs/index.html | 86 ---- .../xul/tutoriel_xul/cadres_de_contenu/index.html | 86 ---- .../index.html" | 76 --- .../mozilla/xul/tutoriel_xul/commandes/index.html | 119 ----- .../xul/tutoriel_xul/contenu_anonyme/index.html | 214 -------- .../cr\303\251ation_d'un_assistant/index.html" | 141 ------ .../index.html" | 115 ----- .../index.html" | 152 ------ .../cr\303\251er_un_th\303\250me/index.html" | 205 -------- .../cr\303\251er_une_fen\303\252tre/index.html" | 104 ---- .../tutoriel_xul/document_object_model/index.html | 138 ------ .../donn\303\251es_persistantes/index.html" | 51 -- .../index.html" | 92 ---- .../index.html" | 298 ----------- .../xul/tutoriel_xul/exemple_xbl/index.html | 205 -------- .../xul/tutoriel_xul/exemples_xpcom/index.html | 157 ------ .../xul/tutoriel_xul/focus_et_selection/index.html | 122 ----- .../index.html | 72 --- .../mozilla/xul/tutoriel_xul/gabarits/index.html | 205 -------- .../mozilla/xul/tutoriel_xul/grilles/index.html | 200 -------- .../h\303\251ritage_d'attributs_xbl/index.html" | 100 ---- .../tutoriel_xul/h\303\251ritage_xbl/index.html" | 60 --- .../fr/archive/mozilla/xul/tutoriel_xul/index.html | 179 ------- .../indicateurs_de_progression/index.html | 48 -- .../xul/tutoriel_xul/interfaces_xpcom/index.html | 190 ------- .../xul/tutoriel_xul/introduction/index.html | 52 -- .../introduction_\303\240_rdf/index.html" | 147 ------ .../introduction_\303\240_xbl/index.html" | 78 --- .../xul/tutoriel_xul/l'url_chrome/index.html | 45 -- .../xul/tutoriel_xul/la_structure_xul/index.html | 158 ------ .../le_mod\303\250le_de_bo\303\256te/index.html" | 146 ------ .../les_bo\303\256tes_de_groupe/index.html" | 101 ---- .../tutoriel_xul/les_champs_de_saisie/index.html | 126 ----- .../les_contr\303\264les_de_listes/index.html" | 134 ----- .../index.html" | 63 --- .../index.html" | 81 --- .../tutoriel_xul/les_fichiers_manifest/index.html | 108 ---- .../les_objets_bo\303\256tes/index.html" | 159 ------ .../index.html" | 193 -------- .../les_scripts_d'installation/index.html | 147 ------ .../xul/tutoriel_xul/localisation/index.html | 328 ------------ .../tutoriel_xul/manipulation_de_listes/index.html | 132 ----- .../menus_d\303\251filants/index.html" | 47 -- .../xul/tutoriel_xul/menus_surgissants/index.html | 214 -------- .../mise_\303\240_jour_de_commandes/index.html" | 98 ---- .../modification_d'une_interface_xul/index.html | 167 ------- .../index.html" | 50 -- .../mozilla/xul/tutoriel_xul/onglets/index.html | 107 ---- .../overlays_inter-paquetage/index.html | 96 ---- .../xul/tutoriel_xul/piles_et_paquets/index.html | 97 ---- .../index.html" | 107 ---- .../index.html" | 93 ---- .../index.html" | 129 ----- .../positionnement_dans_une_pile/index.html | 36 -- .../index.html" | 253 ---------- .../xul/tutoriel_xul/raccourcis_clavier/index.html | 377 -------------- .../index.html" | 213 -------- .../sources_de_donn\303\251es_rdf/index.html" | 296 ----------- .../xul/tutoriel_xul/styler_un_arbre/index.html | 79 --- .../s\303\251lection_dans_les_arbres/index.html" | 60 --- .../tutoriel_xul/s\303\251parateurs/index.html" | 80 --- .../utilisation_des_spacers/index.html | 143 ------ .../vues_d'arbre_personnalis\303\251es/index.html" | 143 ------ .../xul/utilisation_de_nsixulappinfo/index.html | 109 ---- .../xul/utilisation_de_plusieurs_dtd/index.html | 41 -- .../index.html | 36 -- files/fr/archive/mozilla/xul/vbox/index.html | 100 ---- .../mozilla/xul/vulgarisation_xul/index.html | 33 -- .../xul/vulgarisation_xul/introduction/index.html | 102 ---- .../l'essentiel_d'une_extension/index.html | 412 --------------- .../index.html | 132 ----- files/fr/archive/mozilla/xul/window/index.html | 179 ------- 370 files changed, 25605 deletions(-) delete mode 100644 files/fr/archive/mozilla/xul/attributs/acceltext/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/accesskey/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/align/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/allowevents/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/allownegativeassertions/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/buttondisabledaccept/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/checked/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/class/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/coalesceduplicatearcs/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/collapsed/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/command/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/container/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/containment/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/context/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/contextmenu/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/crop/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/datasources/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/datepicker.type/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/datepicker.value/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/dir/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/disabled/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/empty/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/equalsize/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/firstdayofweek/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/flags/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/flex/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/height/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/helpuri/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/hidden/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/hidechrome/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/hideseconds/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/id/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/image/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/increment/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/insertafter/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/insertbefore/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/instantapply/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/inverted/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/label/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/left/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/max/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/maxheight/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/maxwidth/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/menu/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/min/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/minheight/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/minwidth/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/mousethrough/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/name/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/noautofocus/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/observes/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/onchange/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/oncommand/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/onpaneload/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/onpopuphidden/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/onpopuphiding/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/onpopupshowing/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/onpopupshown/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/open/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/ordinal/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/orient/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/pack/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/pageincrement/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/persist/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/popup.left/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/popup.position/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/popup.top/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/popup/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/position/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/preference-editable/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/preference.name/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/preference.type/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/preference/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/prefpane.selected/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/prefpane.src/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/properties/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/querytype/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/readonly/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/ref/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/removeelement/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/rows/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/screenx/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/screeny/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/selected/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/seltype/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/sizemode/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/sortdirection/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/sortresource/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/sortresource2/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/src/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/statustext/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/style/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/suppressonselect/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/tabindex/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/template/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/timepicker.increment/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/timepicker.value/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/title/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/tooltip/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/tooltiptext/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/top/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/type/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/uri/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/value/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/wait-cursor/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/width/index.html delete mode 100644 files/fr/archive/mozilla/xul/attributs/windowtype/index.html delete mode 100644 files/fr/archive/mozilla/xul/box/index.html delete mode 100644 files/fr/archive/mozilla/xul/button/index.html delete mode 100644 "files/fr/archive/mozilla/xul/caract\303\250res_internationaux_dans_du_javascript_xul/index.html" delete mode 100644 files/fr/archive/mozilla/xul/checkbox/index.html delete mode 100644 files/fr/archive/mozilla/xul/command/index.html delete mode 100644 files/fr/archive/mozilla/xul/datepicker/index.html delete mode 100644 files/fr/archive/mozilla/xul/description/index.html delete mode 100644 files/fr/archive/mozilla/xul/dropmarker/index.html delete mode 100644 "files/fr/archive/mozilla/xul/faq_et_r\303\250gles_pour_les_accesskeys_en_xul/index.html" delete mode 100644 files/fr/archive/mozilla/xul/guide_des_popups/index.html delete mode 100644 files/fr/archive/mozilla/xul/guide_des_popups/ouverture_et_fermeture/index.html delete mode 100644 files/fr/archive/mozilla/xul/guide_des_popups/panels/index.html delete mode 100644 files/fr/archive/mozilla/xul/hbox/index.html delete mode 100644 "files/fr/archive/mozilla/xul/ic\303\264nes_de_fen\303\252tre/index.html" delete mode 100644 files/fr/archive/mozilla/xul/index.html delete mode 100644 "files/fr/archive/mozilla/xul/introduction_\303\240_xul/index.html" delete mode 100644 files/fr/archive/mozilla/xul/label/index.html delete mode 100644 "files/fr/archive/mozilla/xul/les_contr\303\264les_xul/index.html" delete mode 100644 files/fr/archive/mozilla/xul/les_joies_de_xul/index.html delete mode 100644 files/fr/archive/mozilla/xul/listbox/index.html delete mode 100644 files/fr/archive/mozilla/xul/listitem/index.html delete mode 100644 files/fr/archive/mozilla/xul/menu/index.html delete mode 100644 files/fr/archive/mozilla/xul/menubar/index.html delete mode 100644 files/fr/archive/mozilla/xul/menuitem/index.html delete mode 100644 files/fr/archive/mozilla/xul/menulist/index.html delete mode 100644 files/fr/archive/mozilla/xul/menupopup/index.html delete mode 100644 files/fr/archive/mozilla/xul/menuseparator/index.html delete mode 100644 files/fr/archive/mozilla/xul/modification_dynamique_d'interfaces_utilisateur_en_xul/index.html delete mode 100644 files/fr/archive/mozilla/xul/modifications_xul_pour_firefox_1.5/index.html delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/blur/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/click/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/decrease/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/decreasepage/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/docommand/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/focus/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/getelementsbyattribute/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/getrowcount/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/hasuservalue/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/hidepopup/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/increase/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/increasepage/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/moveto/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/openpopup/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/openpopupatscreen/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/reset/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/select/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/selectall/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/selectitem/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/selectitemrange/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/setselectionrange/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/showpane/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/showpopup/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/sizeto/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/stop/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/syncsessions/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/timedselect/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/m\303\251thodes/toggleitemselection/index.html" delete mode 100644 files/fr/archive/mozilla/xul/panel/index.html delete mode 100644 files/fr/archive/mozilla/xul/popup/index.html delete mode 100644 files/fr/archive/mozilla/xul/preference/index.html delete mode 100644 files/fr/archive/mozilla/xul/preferences/index.html delete mode 100644 files/fr/archive/mozilla/xul/prefpane/index.html delete mode 100644 files/fr/archive/mozilla/xul/prefwindow/index.html delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accessible/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accessibletype/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accesskey/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/align/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/allowevents/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/amindicator/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/boxobject/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/builder/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/classname/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/collapsed/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/contextmenu/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/controllers/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/crop/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/currentitem/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/database/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datasources/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/date/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/dateleadingzero/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datepicker.open/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datepicker.value/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datevalue/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/defaultvalue/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/dir/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/disabled/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/flex/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/height/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hidden/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hideseconds/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hour/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hourleadingzero/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/id/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/image/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/increment/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/inverted/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/is24hourclock/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ispm/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/label/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/left/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/listboxobject/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/locked/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/max/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/maxheight/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/maxwidth/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/menu/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/min/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minheight/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minute/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minuteleadingzero/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minwidth/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/month/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/monthleadingzero/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/name/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/observes/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/open/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ordinal/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/orient/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pack/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pageincrement/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/persist/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pmindicator/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/popupboxobject/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/position/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/preference.preferences/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/readonly/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ref/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/resource/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/second/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/secondleadingzero/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selected/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selectedindex/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selecteditem/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/seltype/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/state/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/statustext/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/style/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/suppressonselect/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tabindex/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/timepicker.value/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tooltip/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tooltiptext/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/top/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/type/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/value/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/width/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/year/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/propri\303\251t\303\251s/yearleadingzero/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/recommandations_accessibilit\303\251_pour_xul/index.html" delete mode 100644 files/fr/archive/mozilla/xul/richlistbox/index.html delete mode 100644 files/fr/archive/mozilla/xul/richlistitem/index.html delete mode 100644 "files/fr/archive/mozilla/xul/r\303\251f\303\251rence_xul/index.html" delete mode 100644 files/fr/archive/mozilla/xul/scale/index.html delete mode 100644 files/fr/archive/mozilla/xul/spacer/index.html delete mode 100644 files/fr/archive/mozilla/xul/spinbuttons/index.html delete mode 100644 files/fr/archive/mozilla/xul/stack/index.html delete mode 100644 files/fr/archive/mozilla/xul/tabpanels/index.html delete mode 100644 files/fr/archive/mozilla/xul/textbox/index.html delete mode 100644 files/fr/archive/mozilla/xul/timepicker/index.html delete mode 100644 "files/fr/archive/mozilla/xul/toolbars/cr\303\251ation_de_boutons_de_barre_d'outils/index.html" delete mode 100644 files/fr/archive/mozilla/xul/toolbars/index.html delete mode 100644 files/fr/archive/mozilla/xul/toolbox/index.html delete mode 100644 files/fr/archive/mozilla/xul/tooltip/index.html delete mode 100644 files/fr/archive/mozilla/xul/tree/index.html delete mode 100644 files/fr/archive/mozilla/xul/treecell/index.html delete mode 100644 files/fr/archive/mozilla/xul/treechildren/index.html delete mode 100644 files/fr/archive/mozilla/xul/treecol/index.html delete mode 100644 files/fr/archive/mozilla/xul/treecols/index.html delete mode 100644 files/fr/archive/mozilla/xul/treeitem/index.html delete mode 100644 files/fr/archive/mozilla/xul/treerow/index.html delete mode 100644 files/fr/archive/mozilla/xul/treeseparator/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/ajout_d'\303\251l\303\251ments_html/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_gestionnaire_d_\303\251v\303\250nements/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_gestionnaires_d'\303\251v\303\250nements/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_m\303\251thodes/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_propri\303\251t\303\251s/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_boutons/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_feuilles_de_style/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_libell\303\251s_et_des_images/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_plus_d'\303\251l\303\251ments/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/arbres/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/arbres_et_gabarits/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/assistant_avan\303\247\303\251/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/autres_caract\303\251ristiques_des_arbres/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/barres_de_d\303\251filement/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/barres_de_menus_simples/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/bo\303\256te_de_dialogue_de_fichier/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/broadcasters_et_observateurs/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/cadres_de_contenu/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/caract\303\251ristiques_d'une_fen\303\252tre/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/commandes/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/contenu_anonyme/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251ation_d'un_assistant/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251ation_d'un_programme_d'installation/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_des_bo\303\256tes_de_dialogue/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_un_th\303\250me/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_une_fen\303\252tre/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/document_object_model/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/donn\303\251es_persistantes/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/d\303\251tails_sur_le_mod\303\250le_de_bo\303\256te/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/d\303\251tails_sur_les_vues_d'arbres/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/exemple_xbl/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/exemples_xpcom/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/focus_et_selection/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/fonctions_additionnelles_d'installation/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/gabarits/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/grilles/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/h\303\251ritage_d'attributs_xbl/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/h\303\251ritage_xbl/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/indicateurs_de_progression/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/interfaces_xpcom/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/introduction/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/introduction_\303\240_rdf/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/introduction_\303\240_xbl/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/l'url_chrome/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/la_structure_xul/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/le_mod\303\250le_de_bo\303\256te/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/les_bo\303\256tes_de_groupe/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/les_champs_de_saisie/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/les_contr\303\264les_de_listes/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/les_contr\303\264les_num\303\251riques/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/les_fichiers_de_propri\303\251t\303\251s/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/les_fichiers_manifest/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/les_objets_bo\303\256tes/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/les_objets_bo\303\256tes_des_arbres/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/les_scripts_d'installation/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/localisation/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/manipulation_de_listes/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/menus_d\303\251filants/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/menus_surgissants/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/mise_\303\240_jour_de_commandes/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/modification_d'une_interface_xul/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/modification_du_th\303\250me_par_d\303\251faut/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/onglets/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/overlays_inter-paquetage/index.html delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/piles_et_paquets/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/plus_de_caract\303\251ristiques_sur_les_boutons/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/plus_de_fonctionnalit\303\251s_de_menu/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/plus_sur_les_gestionnaires_d'\303\251v\303\250nements/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/positionnement_dans_une_pile/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/positionnement_des_\303\251l\303\251ments/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/raccourcis_clavier/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/r\303\250gles_avan\303\247\303\251es/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/sources_de_donn\303\251es_rdf/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/styler_un_arbre/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/s\303\251lection_dans_les_arbres/index.html" delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/s\303\251parateurs/index.html" delete mode 100644 files/fr/archive/mozilla/xul/tutoriel_xul/utilisation_des_spacers/index.html delete mode 100644 "files/fr/archive/mozilla/xul/tutoriel_xul/vues_d'arbre_personnalis\303\251es/index.html" delete mode 100644 files/fr/archive/mozilla/xul/utilisation_de_nsixulappinfo/index.html delete mode 100644 files/fr/archive/mozilla/xul/utilisation_de_plusieurs_dtd/index.html delete mode 100644 files/fr/archive/mozilla/xul/utilisation_du_correcteur_orthographique_dans_xul/index.html delete mode 100644 files/fr/archive/mozilla/xul/vbox/index.html delete mode 100644 files/fr/archive/mozilla/xul/vulgarisation_xul/index.html delete mode 100644 files/fr/archive/mozilla/xul/vulgarisation_xul/introduction/index.html delete mode 100644 files/fr/archive/mozilla/xul/vulgarisation_xul/l'essentiel_d'une_extension/index.html delete mode 100644 files/fr/archive/mozilla/xul/vulgarisation_xul/premiers_pas_avec_les_extensions_firefox/index.html delete mode 100644 files/fr/archive/mozilla/xul/window/index.html (limited to 'files/fr/archive/mozilla/xul') diff --git a/files/fr/archive/mozilla/xul/attributs/acceltext/index.html b/files/fr/archive/mozilla/xul/attributs/acceltext/index.html deleted file mode 100644 index c48e829509..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/acceltext/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: acceltext -slug: Archive/Mozilla/XUL/Attributs/acceltext -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/acceltext ---- -
- « Accueil de la référence XUL
-
-
- acceltext
-
- Type : chaîne de caractères
-
- Texte qui apparaîtra à côté du label d'un menu pour indiquer la touche de raccourci (accélérateur) à utiliser pour invoquer la commande. Si cette valeur est définie, elle écrase une clé assignée dans l'attribut key. Cet attribut ne s'applique pas aux menus directement sur la Barre de menus (menubar).
-
diff --git a/files/fr/archive/mozilla/xul/attributs/accesskey/index.html b/files/fr/archive/mozilla/xul/attributs/accesskey/index.html deleted file mode 100644 index 4b89962e66..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/accesskey/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: accesskey -slug: Archive/Mozilla/XUL/Attributs/accesskey -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/accesskey ---- -
« Accueil de la référence XUL
-
accesskey
-
Attribut de : button, checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio, toolbarbutton, textbox (autocomplétion de Firefox)
-
Type : caractère -
Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut label de l'élément.
Elle sera généralement affichée soulignée, mais ce comportement est spécifique à la plateforme et au thème. Lorsque l'utilisateur appuie sur ALT (ou une touche similaire variant d'une plateforme à l'autre) et la touche d'accès, l'élément sera activé depuis n'importe où dans la fenêtre. Bien que la valeur ne soit pas sensible à la casse, la lettre correspondant à la casse de l'attribut accesskey sera utlisée si les deux casses existent dans le label. -
-

Exemple

-
Image:XUL_ref_accesskey_attr.png
-
<vbox>
-  <label value="Entrez votre nom" accesskey="e" control="myName"/>
-  <textbox id="myName"/>
-  <button label="Annuler" accesskey="n"/>
-  <button label="OK" accesskey="O"/>
-</vbox>
-
-

Voir également

-

Les attributs label et acceltext -

diff --git a/files/fr/archive/mozilla/xul/attributs/align/index.html b/files/fr/archive/mozilla/xul/attributs/align/index.html deleted file mode 100644 index 46e84c1900..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/align/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: align -slug: Archive/Mozilla/XUL/Attributs/align -tags: - - Attributs_XUL - - Référence_XUL - - XUL -translation_of: Archive/Mozilla/XUL/Attribute/align ---- -
- « Accueil de la référence XUL
-
-
- align
-
- Type : - - une des valeurs ci-dessous -
-
- L'attribut align spécifie la manière dont les éléments enfants de la boîte sont alignés lorsque la taille de celle-ci est plus grande que la taille totale de ses enfants. Pour les boîtes orientées horizontalement, il spécifie la manière dont les enfants seront alignés verticalement. Pour les boîtes dont l'orientation est verticale, il est utilisé pour indiquer la manière dont ils seront alignés horizontalement. L'attribut pack est lié à l'alignement mais est utilisé pour spécifier la position dans la direction opposée. Il est également possible de spécifier la valeur d'align à l'aide de la propriété de style -moz-box-align.
-
- -
-

Voir également

-

L'attribut pack.

-
diff --git a/files/fr/archive/mozilla/xul/attributs/allowevents/index.html b/files/fr/archive/mozilla/xul/attributs/allowevents/index.html deleted file mode 100644 index 79ccf6cd21..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/allowevents/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: allowevents -slug: Archive/Mozilla/XUL/Attributs/allowevents -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/allowevents ---- -
« Accueil de la référence XUL
-
allowevents -
Type : booléen -
Si défini à true, les évènements sont passés aux enfants de l'élément. Dans le cas contraire, ils ne sont passés qu'à l'élément lui-même. -
-
-

Sur les éléments listitem et titlebar, les évènements souris ne sont normalement pas envoyés aux enfants ; ils sont plutôt redirigés vers les éléments listitem et titlebar eux-mêmes. Cela signifie que les éléments placés dans un listitem ne répondent pas aux évènements, et qu'un clic de la souris sélectionne simplement cet objet dans la liste. En définissant l'attribut allowevents à true, ce comportement particulier est désactivé, et les évènements sont dirigés de la même manière que pour les autres éléments. -

Pour les éléments menu, menuseparator, menuitem et treecol, ainsi que les boutons de menus et le popup datepicker, les évènements souris sont également redirigés vers l'élément lui-même. Cependant, l'attribut allowevents est traité d'une manière différente. Il peut alors être défini à true sur un descendant à la place. C'est ce qui permet aux évènements d'être ciblés normalement, mais d'être différents pour chaque descendant. -

Ce comportement est notamment utilisé pour des menus, afin de permettre à un bouton de menu de se comporter comme un menu lors d'un clic, tandis qu'une partie du menu pourra se comporter comme un bouton. Pour cette dernière, l'attribut allowevents est défini à true pour qu'un clic sur le bouton enfant reçoive les évènements plutôt qu'il soient tous dirigés vers le menu. -

-
diff --git a/files/fr/archive/mozilla/xul/attributs/allownegativeassertions/index.html b/files/fr/archive/mozilla/xul/attributs/allownegativeassertions/index.html deleted file mode 100644 index f45b88d10c..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/allownegativeassertions/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: allownegativeassertions -slug: Archive/Mozilla/XUL/Attributs/allownegativeassertions -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/allownegativeassertions ---- -
« Accueil de la référence XUL
-
allownegativeassertions -
Type : booléen -
Valide sur tout élément disposant d'un attribut datasources. Lorsque plusieurs sources de données sont utilisées, l'une d'entre-elles peut écraser une assertion provenant d'une autre. Si cet attribut est à true, ce qui est sa valeur par défaut, une source de données peut contredire une assertion précédente. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/buttondisabledaccept/index.html b/files/fr/archive/mozilla/xul/attributs/buttondisabledaccept/index.html deleted file mode 100644 index 0e465ffa3a..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/buttondisabledaccept/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: buttondisabledaccept -slug: Archive/Mozilla/XUL/Attributs/buttondisabledaccept -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/buttondisabledaccept ---- -
« Accueil de la référence XUL
-
buttondisabledaccept -
Type : booléen -
Si défini à true, le bouton d'acceptation est initialement désactivé. -
-


-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/checked/index.html b/files/fr/archive/mozilla/xul/attributs/checked/index.html deleted file mode 100644 index 688f898817..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/checked/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: checked -slug: Archive/Mozilla/XUL/Attributs/checked -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/checked ---- -
- « Accueil de la référence XUL
-
-
- checked
-
- Type : - - booléen -
-
- Indique si l'élément est coché ou non.
-
- Utilisez hasAttribute() pour déterminer si cet attribut est défini plutôt que getAttribute().
- Pour les boutons, l'attribut type doit etre mis à checkbox ou à radio pour qu'un effet soit perceptible.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/class/index.html b/files/fr/archive/mozilla/xul/attributs/class/index.html deleted file mode 100644 index 04ee6410f4..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/class/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: class -slug: Archive/Mozilla/XUL/Attributs/class -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/class ---- -
« Accueil de la référence XUL
-
class -
Type : chaîne de caractères -
La classe de style de l'élément. Plusieurs classes peuvent être spécifiées en les séparant par des espaces. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/coalesceduplicatearcs/index.html b/files/fr/archive/mozilla/xul/attributs/coalesceduplicatearcs/index.html deleted file mode 100644 index 83dff23276..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/coalesceduplicatearcs/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: coalesceduplicatearcs -slug: Archive/Mozilla/XUL/Attributs/coalesceduplicatearcs -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/coalesceduplicatearcs ---- -
« Accueil de la référence XUL
-
coalesceduplicatearcs -
Type : booléen -
Valide sur tout élément disposant d'un attribut datasources. Lorsque plusieurs sources de données sont utilisées, l'une d'entre-elles peut écraser une assertion provenant d'une autre. Si cet attribut est à true, ce qui est sa valeur par défaut, une source de données peut contredire une assertion précédente. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/collapsed/index.html b/files/fr/archive/mozilla/xul/attributs/collapsed/index.html deleted file mode 100644 index c6b879a729..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/collapsed/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: collapsed -slug: Archive/Mozilla/XUL/Attributs/collapsed -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/collapsed ---- -
« Accueil de la référence XUL
-
collapsed -
Type : booléen -
Si défini à true, l'élément est réduit et n'est pas visible. C'est l'équivalent de définir la propriété CSS visibility à « collapse ». -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/command/index.html b/files/fr/archive/mozilla/xul/attributs/command/index.html deleted file mode 100644 index e240ec9f15..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/command/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: command -slug: Archive/Mozilla/XUL/Attributs/command -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/command ---- -
« Accueil de la référence XUL
-
command -
Type : id d'élément -
Défini à la valeur de l'id d'un élément command observé par l'élément. -
-
-

Exemple

-
<command id="cmd_openhelp" oncommand="alert('Aide');"/>
-<button label="Aide" command="cmd_openhelp"/>
-<button label="Plus d'aide" command="cmd_openhelp"/>
-
-

Voir également

-

L'élément command, l'attribut oncommand et l'élément commandset. -

-
diff --git a/files/fr/archive/mozilla/xul/attributs/container/index.html b/files/fr/archive/mozilla/xul/attributs/container/index.html deleted file mode 100644 index da385d1751..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/container/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: container -slug: Archive/Mozilla/XUL/Attributs/container -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/container ---- -
« Accueil de la référence XUL
-
container -
Type : booléen -
Défini à true si l'élément doit agir comme un conteneur pouvant avoir des éléments enfants. Ceci peut être utilisé pour des dossiers. Cet attribut sera défini par le constructeur de template si nécessaire. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/containment/index.html b/files/fr/archive/mozilla/xul/attributs/containment/index.html deleted file mode 100644 index 47d917f06b..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/containment/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: containment -slug: Archive/Mozilla/XUL/Attributs/containment -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/containment ---- -
« Accueil de la référence XUL
-
containment -
Type : URI d'un prédicat RDF -
Cet attribut spécifie des propriétés RDF indiquant qu'ne ressource est un conteneur. Lors de la génération de contenu depuis un template, ceci est utilisé pour déterminer quelles ressources de la source de données sont des conteneurs et peuvent donc avoir des nœuds enfants, et lesquelles ne le sont pas. -
-
Cet attribut doit être placé sur le même élément que les attributs datasources et ref. Il peut être défini comme une liste de propriétés ou ressources RDF séparées par des espaces. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/context/index.html b/files/fr/archive/mozilla/xul/attributs/context/index.html deleted file mode 100644 index 13e130ea04..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/context/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: context -slug: Archive/Mozilla/XUL/Attributs/context -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/context ---- -
« Accueil de la référence XUL
-
context -
Type : id de l'élément popup -
Doit être défini à la valeur de l'id de l'élément popup devant apparaître lorsque l'utilisateur fait un clic contextuel sur l'élément. La manière de réaliser un clic contextuel diffère selon la plateforme. Habituellement il s'agira d'un clic droit. La valeur spéciale « _child » peut être utilisée pour indiquer le premier menupopup enfant de l'élément. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/contextmenu/index.html b/files/fr/archive/mozilla/xul/attributs/contextmenu/index.html deleted file mode 100644 index 9f11c2f1d6..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/contextmenu/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: contextmenu -slug: Archive/Mozilla/XUL/Attributs/contextmenu -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/contextmenu ---- -
« Accueil de la référence XUL
-
contextmenu -
Type : id d'un élément popup -
Nom alternatif pour l'attribut context, mais dispose également d'une propriété de script correspondante « contextmenu ». -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/crop/index.html b/files/fr/archive/mozilla/xul/attributs/crop/index.html deleted file mode 100644 index 6ee6cd1d52..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/crop/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: crop -slug: Archive/Mozilla/XUL/Attributs/crop -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/crop ---- -
« Accueil de la référence XUL
-
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- -
-
Selon la plateforme et le thème utilisé, certains éléments auront une largeur maximale définie de sorte qu'ils seront toujours tronqués. Si vous décidez d'utiliser la valeur none et que le texte est plus grand que cette valeur maximale, vous pouvez faire usage de la propriété CSS max-width (ou de l'attribut maxwidth) pour agrandir cette taille. Par exemple, pour un élément de menu vous pouvez ajouter la règle CSS suivante lorsque vous désirez utiliser la valeur none : -
-
menupopup > menuitem, menupopup > menu { max-width: none; }
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/datasources/index.html b/files/fr/archive/mozilla/xul/attributs/datasources/index.html deleted file mode 100644 index 98dd93bbe1..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/datasources/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: datasources -slug: Archive/Mozilla/XUL/Attributs/datasources -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/datasources ---- -
« Accueil de la référence XUL
-
datasources -
Type : liste d'URI datasource séparées par des espaces -
Une liste séparée par des espaces de sources de données que le template d'un élément utilisera pour la génération de contenu. Il peut s'agir tant de sources de données internes comme rdf:bookmarks que de l'URL d'un fichier RDF. L'attribut datasources peut être placé sur la plupart des éléments, bien qu'il se trouve le plus souvent sur des arbres (tree) et menupopups. L'élément doit avoir un élément de template comme enfant. -
-
Les sources de données spécifiées sont combinées en une source de données composite unique qui conserve les données de toutes les sources. Cette source composite est accessible via un script au travers de la propriété database. -
-
Si vous envisagez d'ajouter une source de données à un élément mais ne désirez pas l'ajouter immédiatement, définissez cette propriété à « rdf:null ». Cela préparera l'élément à ce que son contenu soit généré depuis une source de données. Autrement, il ne sera pas possible d'en ajouter une par la suite. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/datepicker.type/index.html b/files/fr/archive/mozilla/xul/attributs/datepicker.type/index.html deleted file mode 100644 index 6046455950..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/datepicker.type/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: datepicker.type -slug: Archive/Mozilla/XUL/Attributs/datepicker.type -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/datepicker.type ---- -
- « Accueil de la référence XUL
-
-
- type
-
- Type : une des valeurs suivantes
-
- L'attribut type peut avoir l'une des valeurs ci-dessous afin de spécifier le type de sélecteur de date à utiliser :
-
- -
-
-
- Type normal
-
- Image:Controlsguide-datepicker.png
-
- Type grid
-
- Image:Controlsguide-datepicker-grid.png
-
- Type popup
-
- Image:Controlsguide-datepicker-popup.png
-
-
-

 

diff --git a/files/fr/archive/mozilla/xul/attributs/datepicker.value/index.html b/files/fr/archive/mozilla/xul/attributs/datepicker.value/index.html deleted file mode 100644 index a05c4e5b51..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/datepicker.value/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: datepicker.value -slug: Archive/Mozilla/XUL/Attributs/datepicker.value -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/datepicker.value ---- -
- « Accueil de la référence XUL
-
-
- value
-
- Type : chaîne
-
- La valeur initiale du sélecteur de date sous la forme AAAA/MM/JJ.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/dir/index.html b/files/fr/archive/mozilla/xul/attributs/dir/index.html deleted file mode 100644 index a2f4cce3d4..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/dir/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: dir -slug: Archive/Mozilla/XUL/Attributs/dir -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/dir ---- -
- « Accueil de la référence XUL
-
-
- dir
-
- Type : - - une des valeurs ci-dessous -
-
- La direction dans laquelle les éléments enfants de l'élément seront placés.
-
- -
-

Voir également

- -
-

 

diff --git a/files/fr/archive/mozilla/xul/attributs/disabled/index.html b/files/fr/archive/mozilla/xul/attributs/disabled/index.html deleted file mode 100644 index a397863950..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/disabled/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: disabled -slug: Archive/Mozilla/XUL/Attributs/disabled -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/disabled ---- -
« Accueil de la référence XUL
-
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
L'élément répondra cependant encore aux évènements souris. Pour activer l'élément, ne spécifiez simplement pas cet attribut plutôt que de définir sa valeur à false. -
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
diff --git a/files/fr/archive/mozilla/xul/attributs/empty/index.html b/files/fr/archive/mozilla/xul/attributs/empty/index.html deleted file mode 100644 index 0dc77fd889..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/empty/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: empty -slug: Archive/Mozilla/XUL/Attributs/empty -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/empty ---- -
« Accueil de la référence XUL
-
empty -
Type : booléen -
Défini à true si l'élément est un conteneur qui ne contient aucun enfant. Il sera défini par le constructeur de template si nécessaire. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/equalsize/index.html b/files/fr/archive/mozilla/xul/attributs/equalsize/index.html deleted file mode 100644 index c9af38b1aa..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/equalsize/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: equalsize -slug: Archive/Mozilla/XUL/Attributs/equalsize -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/equalsize ---- -
« Accueil de la référence XUL
-
equalsize -
Type : une des valeurs ci-dessous -
Cet attribut peut être utilisé pour rendre les enfants d'un élément égaux en taille. -
- -
-
diff --git a/files/fr/archive/mozilla/xul/attributs/firstdayofweek/index.html b/files/fr/archive/mozilla/xul/attributs/firstdayofweek/index.html deleted file mode 100644 index c94dc80095..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/firstdayofweek/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: firstdayofweek -slug: Archive/Mozilla/XUL/Attributs/firstdayofweek -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/firstdayofweek ---- -
« Accueil de la référence XUL
-
firstdayofweek -
Type : entier -
Indique le jour de la semaine à afficher comme premier jour dans la grille. Les valeurs vont de 0 à 6, où 0 est dimanche et 6 est samedi. La valeur par défaut est déterminée par la locale, n'utilisez donc cet attribut que si vous désirez l'écraser. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/flags/index.html b/files/fr/archive/mozilla/xul/attributs/flags/index.html deleted file mode 100644 index 28e4635cac..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/flags/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: flags -slug: Archive/Mozilla/XUL/Attributs/flags -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/flags ---- -
« Accueil de la référence XUL
-
flags -
Type : liste de valeurs (voir ci-dessous) séparées par des espaces -
Un ensemble de drapeaux destinés à différentes utilisations. Deux sont définis, et peuvent être la valeur de cet attribut. -
- -


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/flex/index.html b/files/fr/archive/mozilla/xul/attributs/flex/index.html deleted file mode 100644 index cd561f66c1..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/flex/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: flex -slug: Archive/Mozilla/XUL/Attributs/flex -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/flex ---- -
« Accueil de la référence XUL
-
flex -
Type : chaîne de caractères (représentant un entier) -
Indique la flexibilité de l'élément, c'est-à-dire la façon dont le conteneur d'un élément distribue l'espace libre restant parmi ses enfants. Les éléments flexibles s'étendent et rétrécissent pour remplir leur espace donné. Les éléments qui ont les plus grandes valeurs pour flex seront plus grands que ceux qui ont des valeurs plus petites, selon un rapport déterminé par les valeurs données par chaque élément. La valeur réelle n'est pas indicative, à moins qu'il y ait d'autres éléments flexibles dans le même conteneur. Une fois que les tailles par défaut des éléments dans une boîte ont été calculées, l'espace restant est divisé entre les éléments flexibles, selon leurs coefficients pour flex. Indiquer une valeur de 0 pour flex équivaut à ne pas préciser du tout d'attribut flex.
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/height/index.html b/files/fr/archive/mozilla/xul/attributs/height/index.html deleted file mode 100644 index 967d50b72f..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/height/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: height -slug: Archive/Mozilla/XUL/Attributs/height -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/height ---- -
« Accueil de la référence XUL
-
height -
Type : chaîne de caractères (représentant un entier) -
La hauteur préférée de l'élément en pixels. La hauteur réellement affichée peut être différentes si l'élément ou son contenu ont une hauteur minimum ou maximum. La propriété CSS height peut également être utilisée. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/helpuri/index.html b/files/fr/archive/mozilla/xul/attributs/helpuri/index.html deleted file mode 100644 index e168011f5e..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/helpuri/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: helpURI -slug: Archive/Mozilla/XUL/Attributs/helpURI -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/helpURI ---- -
- « Accueil de la référence XUL
-
-
- helpURI
-
- Type : URI
-
- L'URI de la page d'aide associée avec un panneau de préférences. Celle-ci sera ouverte dans une fenêtre d'aide lors de l'appui sur le bouton d'aide.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/hidden/index.html b/files/fr/archive/mozilla/xul/attributs/hidden/index.html deleted file mode 100644 index ad1afbfed5..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/hidden/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: hidden -slug: Archive/Mozilla/XUL/Attributs/hidden -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/hidden ---- -
« Accueil de la référence XUL
-
hidden -
Type : booléen -
Si défini à true, l'élément n'est pas affiché. Cet attribut est similaire à la valeur « none » de la propriété CSS display. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/hidechrome/index.html b/files/fr/archive/mozilla/xul/attributs/hidechrome/index.html deleted file mode 100644 index 9793b3aced..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/hidechrome/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: hidechrome -slug: Archive/Mozilla/XUL/Attributs/hidechrome -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/hidechrome ---- -
« Accueil de la référence XUL
-
hidechrome -
Type : booléen -
Définissez cet attribut à true pour que le chrome, en ce compris la barre de titre, soit caché. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/hideseconds/index.html b/files/fr/archive/mozilla/xul/attributs/hideseconds/index.html deleted file mode 100644 index 1ba80accbe..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/hideseconds/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: hideseconds -slug: Archive/Mozilla/XUL/Attributs/hideseconds -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/hideseconds ---- -
- « Accueil de la référence XUL
-
-
- hideseconds
-
- Type : booléen
-
- Indique si le champ des secondes doit être masqué.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/id/index.html b/files/fr/archive/mozilla/xul/attributs/id/index.html deleted file mode 100644 index 5c27d4d48d..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/id/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: id -slug: Archive/Mozilla/XUL/Attributs/id -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/id ---- -
« Accueil de la référence XUL
-
id -
Type : id d'élément, doit être unique dans la fenêtre -
Un identifiant unique permettant d'identifier l'élément. Celui-ci peut être utilisé comme paramètre pour getElementById() et d'autres fonctions DOM et pour référencer l'élément dans des feuilles de style. -
-
-

Exemple

-
<button id="foo" label="Cliquez ici" oncommand="doSomething()"/>
-
-<script>
-function doSomething(){
-    var myButton = document.getElementById('foo');
-    myButton.setAttribute('label','On a cliqué sur le bouton');
-}
-</script>
-
-

Une version plus abstraite de ce code serait un -

-
<button id="foo" label="Cliquez ici" oncommand="setWidgetLabel(this, 'On m\' a cliqué dessus')"/>
-<script>
-function setWidgetLabel(idName, newCaption){
-   document.getElementById( idName.id ).setAttribute('label',newCaption)
-}
-
-</script>
-
-

Voir également

-

name -

-
diff --git a/files/fr/archive/mozilla/xul/attributs/image/index.html b/files/fr/archive/mozilla/xul/attributs/image/index.html deleted file mode 100644 index b9e988be89..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/image/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: image -slug: Archive/Mozilla/XUL/Attributs/image -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/image ---- -
« Accueil de la référence XUL
-
image -
Type : URL d'une image -
L'URL de l'image devant apparaître sur l'élément. Si cet attribut est vide ou omis, aucune image n'apparaîtra. La position de l'image est déterminée par les attributs dir et orient. -
-
-

Voir également

- -
diff --git a/files/fr/archive/mozilla/xul/attributs/increment/index.html b/files/fr/archive/mozilla/xul/attributs/increment/index.html deleted file mode 100644 index 7c279c8953..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/increment/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: increment -slug: Archive/Mozilla/XUL/Attributs/increment -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/increment ---- -
- « Accueil de la référence XUL
-
-
- increment
-
- Type : - - entier -
-
- La quantité dont l'attribut value (pour les boîtes numériques et les échelles) or curpos<magic name="\"PAGENAME\"/"> (pour les barres de défilement) </magic> change lorsque l'on clique sur les flèches. La valeur par défaut est 1.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/index.html b/files/fr/archive/mozilla/xul/attributs/index.html deleted file mode 100644 index ca4be7d5ed..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: Attributs -slug: Archive/Mozilla/XUL/Attributs -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute ---- -

« Accueil de la référence XUL

- -
- -
- -
 
diff --git a/files/fr/archive/mozilla/xul/attributs/insertafter/index.html b/files/fr/archive/mozilla/xul/attributs/insertafter/index.html deleted file mode 100644 index 8c5d0db612..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/insertafter/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: insertafter -slug: Archive/Mozilla/XUL/Attributs/insertafter -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/insertafter ---- -
« Accueil de la référence XUL
-
insertafter -
Type : id d'élément -
Lorsqu'un élément est un overlay, l'attribut insertafter spécifie l'id de l'élément dans la fenêtre de base après lequel l'élément overlay doit apparaitre. Cet attribut a priorité sur l'attribut insertbefore. Cette valeur peut être une liste d'id séparés par des virgules, et c'est alors le premier d'entre-eux trouvé dans la fenêtre qui sera utilisé. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/insertbefore/index.html b/files/fr/archive/mozilla/xul/attributs/insertbefore/index.html deleted file mode 100644 index ad0d6731d2..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/insertbefore/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: insertbefore -slug: Archive/Mozilla/XUL/Attributs/insertbefore -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/insertbefore ---- -
« Accueil de la référence XUL
-
insertbefore -
Type : id d'élément -
Lorsqu'un élément est un overlay, l'attribut insertafter spécifie l'id de l'élément dans la fenêtre de base avant lequel l'élément overlay doit apparaitre. Cette valeur peut être une liste d'id séparés par des virgules, et c'est alors le premier d'entre-eux trouvé dans la fenêtre qui sera utilisé. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/instantapply/index.html b/files/fr/archive/mozilla/xul/attributs/instantapply/index.html deleted file mode 100644 index 2b4c0b74bf..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/instantapply/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: instantApply -slug: Archive/Mozilla/XUL/Attributs/instantApply -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/instantApply ---- -
« Accueil de la référence XUL
-
instantApply -
Type : booléen -
Si sa valeur est true, la préférence sera modifiée dès que l'élément d'interface utilisateur est modifié. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/inverted/index.html b/files/fr/archive/mozilla/xul/attributs/inverted/index.html deleted file mode 100644 index 0b5241236e..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/inverted/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: inverted -slug: Archive/Mozilla/XUL/Attributs/inverted -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/inverted ---- -
« Accueil de la référence XUL
-
inverted -
Type : booléen -
Pour les préférences booléennes, l'indication de cet attribut à true indique que la valeur de la préférence est l'inverse de celle de l'élément d'interface utilisateur qui y est attaché. Par exemple, elle fait en sorte que cocher une case désactive la préférence associée au lieu de l'activer. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/label/index.html b/files/fr/archive/mozilla/xul/attributs/label/index.html deleted file mode 100644 index afe9b0ed31..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/label/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: label -slug: Archive/Mozilla/XUL/Attributs/label -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/label ---- -
« Accueil de la référence XUL
-
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
-
-

Voir également

- -

Exemples en JavaScript

-
<label value="Whaw" id="the-big-label" command="the-big-button"/>
-<button id="the-big-button" label="Cliquez ici"
-	oncommand="alert(document.getElementById('the-big-label').value)"/>
-
-<label id="myLabel" value="Mon label"/>
-<button label="Cliquez ici"
-	oncommand="document.getElementById('myLabel').setAttribute('value','Valeur modifiée');" />
-
-<checkbox label="ma case à cocher" id="myCheckboX"/>
-<button label="Un autre clic"
-	oncommand="document.getElementById('myCheckboX').setAttribute('label','Toujours pas cochée');"/>
-<button label="Afficher le label de la checkbox"
-	oncommand="alert( document.getElementById('myCheckboX').getAttribute('label') )"/>
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/left/index.html b/files/fr/archive/mozilla/xul/attributs/left/index.html deleted file mode 100644 index 1a4529d526..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/left/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: left -slug: Archive/Mozilla/XUL/Attributs/left -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/left ---- -
« Accueil de la référence XUL
-
left -
Type : chaîne de caractères (représentant un entier) -
Pour les éléments placés directement dans un stack, spécifie la distance en pixels du bord gauche de l'élément par rapport au bord gauche du stack. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/max/index.html b/files/fr/archive/mozilla/xul/attributs/max/index.html deleted file mode 100644 index 5d671a265e..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/max/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: max -slug: Archive/Mozilla/XUL/Attributs/max -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/max ---- -
- « Accueil de la référence XUL
-
-
- max
-
- Type : - - entier -
-
- La valeur maximum que peut prendre l'élément scale ou number box. La valeur par défaut est 100 pour les éléments scale et Infinity pour les boîtes numériques
-
diff --git a/files/fr/archive/mozilla/xul/attributs/maxheight/index.html b/files/fr/archive/mozilla/xul/attributs/maxheight/index.html deleted file mode 100644 index 57b9480a9a..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/maxheight/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: maxheight -slug: Archive/Mozilla/XUL/Attributs/maxheight -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/maxheight ---- -
« Accueil de la référence XUL
-
maxheight -
Type : chaîne de caractères (représentant un entier) -
La hauteur maximum de l'élément. Ceci correspond à la propriété CSS max-height. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/maxwidth/index.html b/files/fr/archive/mozilla/xul/attributs/maxwidth/index.html deleted file mode 100644 index 3bb415967d..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/maxwidth/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: maxwidth -slug: Archive/Mozilla/XUL/Attributs/maxwidth -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/maxwidth ---- -
« Accueil de la référence XUL
-
maxwidth -
Type : chaîne de caractères (représentant un entier) -
La largeur maximum de l'élément. Ceci correspond à la propriété CSS max-width. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/menu/index.html b/files/fr/archive/mozilla/xul/attributs/menu/index.html deleted file mode 100644 index d1c01d2937..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/menu/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: menu -slug: Archive/Mozilla/XUL/Attributs/menu -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/menu ---- -
« Accueil de la référence XUL
-
menu -
Type : id d'un élément popup -
Nom alternatif pour l'attribut popup, mais dispose également d'une propriété de script « menu ». -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/min/index.html b/files/fr/archive/mozilla/xul/attributs/min/index.html deleted file mode 100644 index 4bdf8e4479..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/min/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: min -slug: Archive/Mozilla/XUL/Attributs/min -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/min ---- -
- « Accueil de la référence XUL
-
-
- min
-
- Type : - - entier -
-
- La valeur minimum que peut prendre l'élément. La valeur par défaut est 0.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/minheight/index.html b/files/fr/archive/mozilla/xul/attributs/minheight/index.html deleted file mode 100644 index 95ea9f8ffb..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/minheight/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: minheight -slug: Archive/Mozilla/XUL/Attributs/minheight -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/minheight ---- -
« Accueil de la référence XUL
-
minheight -
Type : chaîne de caractères (représentant un entier) -
La hauteur minimum de l'élément. Ceci correspond à la propriété CSS min-height. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/minwidth/index.html b/files/fr/archive/mozilla/xul/attributs/minwidth/index.html deleted file mode 100644 index d1984bdb6b..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/minwidth/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: minwidth -slug: Archive/Mozilla/XUL/Attributs/minwidth -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/minwidth ---- -
« Accueil de la référence XUL
-
minwidth -
Type : chaîne de caractères (représentant un entier) -
La largeur minimum de l'élément. Ceci correspond à la propriété CSS min-width. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/mousethrough/index.html b/files/fr/archive/mozilla/xul/attributs/mousethrough/index.html deleted file mode 100644 index c178218f19..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/mousethrough/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: mousethrough -slug: Archive/Mozilla/XUL/Attributs/mousethrough -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/mousethrough ---- -
« Accueil de la référence XUL
-
mousethrough -
Type : une des valeurs ci-dessous -
Détermine si les évènements souris sont passés à l'élément. Si cet attribut n'est pas spécifié, la valeur est héritée du parent de l'élément. Si aucun ancêtre n'a d'attribut mousethrough défini, la valeur par défaut est never. -
- -
-

L'attribut mousethrough est typiquement utilisé en conjonction avec un stack pour permettre aux éléments d'être empilés au dessus d'autres tout en permettant aux évènements souris d'être envoyés aux éléments les plus bas. Dans l'exemple suivant, l'image apparait au dessus du bouton, cependant l'attribut mousethrough spécifié sur l'image permet aux évènements souris d'être ignorés sur celle-ci et d'être plutôt renvoyés vers le bouton. Si cet attribut n'avait pas été utilisé, l'image aurait reçu tous les évènements souris et il n'aurait pas été possible d'appuyer sur le bouton. -

-
<stack>
-  <button label="En dessous"/>
-  <image src="happy.png" mousethrough="always"/>
-</stack>
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/name/index.html b/files/fr/archive/mozilla/xul/attributs/name/index.html deleted file mode 100644 index 04b80a0c2c..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/name/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: name -slug: Archive/Mozilla/XUL/Attributs/name -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/name ---- -
« Accueil de la référence XUL -

Voir également

- -
diff --git a/files/fr/archive/mozilla/xul/attributs/noautofocus/index.html b/files/fr/archive/mozilla/xul/attributs/noautofocus/index.html deleted file mode 100644 index 307a2db967..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/noautofocus/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: noautofocus -slug: Archive/Mozilla/XUL/Attributs/noautofocus -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/noautofocus ---- -
« Accueil de la référence XUL
-
noautofocus -
Type : booléen -
Si mis à false, la valeur par défaut, l'élément ayant actuellement le focus le perdra si le popup est ouvert ou fermé. Si mis à true, le focus ne sera pas modifié. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/observes/index.html b/files/fr/archive/mozilla/xul/attributs/observes/index.html deleted file mode 100644 index 7d50606f14..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/observes/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: observes -slug: Archive/Mozilla/XUL/Attributs/observes -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/observes ---- -
« Accueil de la référence XUL
-
observes -
Type : id d'un élément diffuseur -
Défini à l'id d'un élément diffuseur (broadcaster) observé par l'élément. Si un attribut du broadcaster est modifié, il sera également modifié dans l'observateur. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/onchange/index.html b/files/fr/archive/mozilla/xul/attributs/onchange/index.html deleted file mode 100644 index 003e5162cb..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/onchange/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: onchange -slug: Archive/Mozilla/XUL/Attributs/onchange -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/onchange ---- -
« Accueil de la référence XUL
-
onchange -
Type : code de script -
Le code figurant dans l'attribut onchange est appelé lorsque la valeur de l'élément est modifiée. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/oncommand/index.html b/files/fr/archive/mozilla/xul/attributs/oncommand/index.html deleted file mode 100644 index 947dae79d8..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/oncommand/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: oncommand -slug: Archive/Mozilla/XUL/Attributs/oncommand -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/oncommand ---- -
« Accueil de la référence XUL
-
oncommand -
Type : code de script -
Ce gestionnaire d'évènement est appelé lorsque la commande est activée. Cela se produit quand un utilisateur sélectionne un élément de menu ou active un raccourci clavier attaché à la commande. -
-
-

Exemple

-
<button label="Cliquez ici" oncommand="alert('Salut')"/>
-
-

Voir également

-

L'élément command. -

-
diff --git a/files/fr/archive/mozilla/xul/attributs/onpaneload/index.html b/files/fr/archive/mozilla/xul/attributs/onpaneload/index.html deleted file mode 100644 index edaf560356..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/onpaneload/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: onpaneload -slug: Archive/Mozilla/XUL/Attributs/onpaneload -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/onpaneload ---- -
- « Accueil de la référence XUL
-
-
- onpaneload
-
- Type : code de script
-
- Le code défini ici est appelé après le chargement du panneau, de manière similaire à l'évènement load pour une fenêtre.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/onpopuphidden/index.html b/files/fr/archive/mozilla/xul/attributs/onpopuphidden/index.html deleted file mode 100644 index 83e7d64685..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/onpopuphidden/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: onpopuphidden -slug: Archive/Mozilla/XUL/Attributs/onpopuphidden -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/onpopuphidden ---- -
« Accueil de la référence XUL
-
onpopuphidden -
Type : code de script -
Cet évènement est envoyé à un popup après qu'il a été caché. http://www.langue-fr.net/index/A/apres-que.htm -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/onpopuphiding/index.html b/files/fr/archive/mozilla/xul/attributs/onpopuphiding/index.html deleted file mode 100644 index 454023d1a0..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/onpopuphiding/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: onpopuphiding -slug: Archive/Mozilla/XUL/Attributs/onpopuphiding -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/onpopuphiding ---- -
« Accueil de la référence XUL
-
onpopuphiding -
Type : code de script -
Cet évènement est envoyé à un popup lorsqu'il est sur le point d'être masqué. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/onpopupshowing/index.html b/files/fr/archive/mozilla/xul/attributs/onpopupshowing/index.html deleted file mode 100644 index 42f6d71edb..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/onpopupshowing/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: onpopupshowing -slug: Archive/Mozilla/XUL/Attributs/onpopupshowing -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/onpopupshowing ---- -
« Accueil de la référence XUL
-
onpopupshowing -
Type : code de script -
Cet évènement est envoyé à un popup juste avant son ouverture. On l'utilise généralement pour définir dynamiquement le contenu lorsque l'utilisateur demande son affichage. Si ce gestionnaire d'évènement renvoie false, le popup ne s'affichera pas. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/onpopupshown/index.html b/files/fr/archive/mozilla/xul/attributs/onpopupshown/index.html deleted file mode 100644 index 07314e2894..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/onpopupshown/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: onpopupshown -slug: Archive/Mozilla/XUL/Attributs/onpopupshown -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/onpopupshown ---- -
« Accueil de la référence XUL
-
onpopupshown -
Type : code de script -
Cet évènement est envoyé à un popup après son ouverture, de la même manière qu'un évènement onload est envoyé à une fenêtre à son ouverture. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/open/index.html b/files/fr/archive/mozilla/xul/attributs/open/index.html deleted file mode 100644 index fe008056f6..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/open/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: open -slug: Archive/Mozilla/XUL/Attributs/open -tags: - - Attributs_XUL - - Référence_XUL - - needsattention -translation_of: Archive/Mozilla/XUL/Attribute/open ---- -
« Accueil de la référence XUL
-
open -
Type : booléen -
Pour les boutons de type menu, l'attribut open est défini à true lorsque le menu est ouvert. L'attribut open n'est pas présent si le menu est fermé. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/ordinal/index.html b/files/fr/archive/mozilla/xul/attributs/ordinal/index.html deleted file mode 100644 index a9b8b0facc..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/ordinal/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: ordinal -slug: Archive/Mozilla/XUL/Attributs/ordinal -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/ordinal ---- -
« Accueil de la référence XUL
-
ordinal -
Type : chaîne de caractères (représentant un entier) -
Un entier spécifiant la position de l'élément au sein de son parent. Par défaut, les éléments sont affichés dans leur ordre d'apparition dans le code XUL. L'attribut ordinal peut être utilisé pour modifier cet ordre. Notez que la valeur par défaut d'ordinal pour les éléments est 1. L'ordre d'affichage peut être retrouvé à l'aide des propriétés de l'objet boxObject du conteneur. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/orient/index.html b/files/fr/archive/mozilla/xul/attributs/orient/index.html deleted file mode 100644 index 0313690837..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/orient/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: orient -slug: Archive/Mozilla/XUL/Attributs/orient -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/orient ---- -
« Accueil de la référence XUL
-
orient -
Type : une des valeurs ci-dessous -
Utilisé pour spécifier si les enfants de l'élément sont orientés horizontalement ou verticalement. La valeur par défaut dépend de l'élément. Il est également possible d'utiliser la propriété de style -moz-box-orient. -
- -
-

Voir également

- -
diff --git a/files/fr/archive/mozilla/xul/attributs/pack/index.html b/files/fr/archive/mozilla/xul/attributs/pack/index.html deleted file mode 100644 index 08f444a3f3..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/pack/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: pack -slug: Archive/Mozilla/XUL/Attributs/pack -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/pack ---- -
« Accueil de la référence XUL
-
pack -
Type : une des valeurs ci-dessous -
L'attribut pack spécifie où les éléments enfants de la boîte box sont placés lorsque celle-ci est plus grande que la taille de ses enfants. Pour les boîtes dont l'orientation est horizontale, il est utilisé pour indiquer la position verticale des enfants. Pour les boîtes dont l'orientation est verticale, il est utilisé pour indiquer la position horizontale des enfants. L'attribut align est utilisé pour spécifier la position dans la direction opposée. Il est également possible de spécifier la valeur de pack à l'aide de la propriété de style -moz-box-pack. -
- -
-

Voir également

-

Plus de détails sur l'empaquetage des boîtes dans le Tutoriel XUL -

-
diff --git a/files/fr/archive/mozilla/xul/attributs/pageincrement/index.html b/files/fr/archive/mozilla/xul/attributs/pageincrement/index.html deleted file mode 100644 index 17c3a22c10..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/pageincrement/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: pageincrement -slug: Archive/Mozilla/XUL/Attributs/pageincrement -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/pageincrement ---- -
- « Accueil de la référence XUL
-
-
- pageincrement
-
- Type : - - entier -
-
- La quantité de laquelle la valeur de l'attribut curpos ou value change lorsque l'utilisateur clique dans la colonne de la barre de défilement (la zone dans laquelle le curseur de la barre se déplace), ou lorsque les touches PgUp ou PgDown sont utilisées. La valeur par défaut est 10.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/persist/index.html b/files/fr/archive/mozilla/xul/attributs/persist/index.html deleted file mode 100644 index 9fe5feb99a..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/persist/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: persist -slug: Archive/Mozilla/XUL/Attributs/persist -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/persist ---- -
« Accueil de la référence XUL
-
persist -
Type : liste de noms d'attributs séparés par des espaces -
Une liste séparée par des espaces d'attributs à maintenir lorsque la fenêtre est fermée. À sa réouverture, les valeurs des attributs persistants sont restaurées. Dans Mozilla, les attributs persistants sont conservés dans le fichier localstore.rdf du profil. La persistance peut également être stockée à l'aide de la fonction document.persist. Afin qu'elle puisse fonctionner, l'élément doit également avoir un id. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/popup.left/index.html b/files/fr/archive/mozilla/xul/attributs/popup.left/index.html deleted file mode 100644 index bf6ab7d045..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/popup.left/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: popup.left -slug: Archive/Mozilla/XUL/Attributs/popup.left -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/popup.left ---- -
« Accueil de la référence XUL
-
left -
Type : entier -
Remplace la position horizontale du popup spécifiée par la méthode showPopup. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/popup.position/index.html b/files/fr/archive/mozilla/xul/attributs/popup.position/index.html deleted file mode 100644 index bcaf43a628..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/popup.position/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: popup.position -slug: Archive/Mozilla/XUL/Attributs/popup.position -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/popup.position ---- -
« Accueil de la référence XUL
-
position -
Type : une des valeurs ci-dessous -
L'attribut position détermine où le popup apparaît par rapport à l'élément sur lequel l'utilisateur a cliqué pour l'invoquer. C'est ce qui permet de placer le popup sur le bord d'un bouton. -
- -
-

Voir également

- -
diff --git a/files/fr/archive/mozilla/xul/attributs/popup.top/index.html b/files/fr/archive/mozilla/xul/attributs/popup.top/index.html deleted file mode 100644 index a451ed325b..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/popup.top/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: popup.top -slug: Archive/Mozilla/XUL/Attributs/popup.top -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/popup.top ---- -
« Accueil de la référence XUL
-
top -
Type : entier -
Remplace la position verticale du popup spécifiée par la méthode showPopup. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/popup/index.html b/files/fr/archive/mozilla/xul/attributs/popup/index.html deleted file mode 100644 index eccbe7f03e..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/popup/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: popup -slug: Archive/Mozilla/XUL/Attributs/popup -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/popup ---- -
« Accueil de la référence XUL
-
popup -
Type : id d'élément popup -
Doit être défini à la valeur de l'id de l'élément popup devant apparaitre lorsque l'utilisateur clique sur l'élément. -
-
-

Voir également

-

Plus d'informations sur l'élément popup dans le tutoriel XUL -

-
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/position/index.html b/files/fr/archive/mozilla/xul/attributs/position/index.html deleted file mode 100644 index 2d59e59231..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/position/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: position -slug: Archive/Mozilla/XUL/Attributs/position -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/position ---- -
« Accueil de la référence XUL
-
position -
Type : chaîne de caractères (représentant un entier) -
Lorsqu'un élément est un overlay, la position est un indice où l'enfant sera inséré. Les indices commencent à 1, utilisez donc une valeur de 1 pour placer un élément au début. Cet attribut est ignoré si un attribut insertbefore ou insertafter correspond à un élément. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/preference-editable/index.html b/files/fr/archive/mozilla/xul/attributs/preference-editable/index.html deleted file mode 100644 index d81a8aae06..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/preference-editable/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: preference-editable -slug: Archive/Mozilla/XUL/Attributs/preference-editable -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/preference-editable ---- -
« Accueil de la référence XUL
-
preference-editable -
Mozilla 1.8 -
Type : booléen -
Si défini à true, l'élément peut être utilisé pour modifier une préférence dans une prefwindow. L'attribut preference peut être utilisé pour se connecter à un élément preference. Cela peut servir aux éléments personnalisés implémentés en XBL. L'élément doit déclencher des évènements change ou select lorsque la valeur est modifiée afin que la préférence soit mise à jour en conséquence. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/preference.name/index.html b/files/fr/archive/mozilla/xul/attributs/preference.name/index.html deleted file mode 100644 index 1fd04497a2..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/preference.name/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: preference.name -slug: Archive/Mozilla/XUL/Attributs/preference.name -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/preference.name ---- -
« Accueil de la référence XUL
-
name -
Type : chaîne de caractères -
Le nom de la préférence à modifier. Par exemple, la page d'accueil du navigateur est définie par la préférence browser.startup.homepage. -
-
-

Voir également

- -
diff --git a/files/fr/archive/mozilla/xul/attributs/preference.type/index.html b/files/fr/archive/mozilla/xul/attributs/preference.type/index.html deleted file mode 100644 index 06e0ae3242..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/preference.type/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: preference.type -slug: Archive/Mozilla/XUL/Attributs/preference.type -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/preference.type ---- -
« Accueil de la référence XUL
-
type
Type : une des valeurs ci-dessous
Le type de préférence qui doit être une des valeurs suivantes.
-
- diff --git a/files/fr/archive/mozilla/xul/attributs/preference/index.html b/files/fr/archive/mozilla/xul/attributs/preference/index.html deleted file mode 100644 index f4be11503a..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/preference/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: preference -slug: Archive/Mozilla/XUL/Attributs/preference -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/preference ---- -
« Accueil de la référence XUL
-
preference -
Type : id d'élément -
Connecte l'élément à une préférence (élément preference) correspondante. Cet attribut n'a d'effet qu'utilisé au sein d'un prefwindow. La valeur de la préférence sera mise à jour pour correspondre à la propriété value de l'élément. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/prefpane.selected/index.html b/files/fr/archive/mozilla/xul/attributs/prefpane.selected/index.html deleted file mode 100644 index ddb5f5de30..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/prefpane.selected/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: prefpane.selected -slug: Archive/Mozilla/XUL/Attributs/prefpane.selected -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/prefpane.selected ---- -
- « Accueil de la référence XUL
-
-
- selected
-
- Type : booléen
-
- Cet attribut sera défini à true pour l'élément prefpane actuellement sélectionné. Pour changer le panneau sélectionné, utilisez la méthode showPane de prefwindow.
-
-
-

Voir également

- -
diff --git a/files/fr/archive/mozilla/xul/attributs/prefpane.src/index.html b/files/fr/archive/mozilla/xul/attributs/prefpane.src/index.html deleted file mode 100644 index f51cb011d3..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/prefpane.src/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: prefpane.src -slug: Archive/Mozilla/XUL/Attributs/prefpane.src -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/prefpane.src ---- -
- « Accueil de la référence XUL
-
-
- src
-
- Type : URL d'un overlay
-
- L'URL du contenu du panneau de préférences. Si cet attribut n'est pas spécifié, le contenu de l'élément prefpane sera utilisé.
-
- -
-

Voir également

- -
diff --git a/files/fr/archive/mozilla/xul/attributs/properties/index.html b/files/fr/archive/mozilla/xul/attributs/properties/index.html deleted file mode 100644 index 9939e0557f..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/properties/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: properties -slug: Archive/Mozilla/XUL/Attributs/properties -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/properties ---- -
« Accueil de la référence XUL
-
properties -
Type : liste de noms de propriétés séparés par des espaces -
Définit les propriétés de l'élément, qui peuvent être utilisées pour le styler. Pour plus d'informations, consultez Styler un arbre. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/querytype/index.html b/files/fr/archive/mozilla/xul/attributs/querytype/index.html deleted file mode 100644 index a1be9285d1..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/querytype/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: querytype -slug: Archive/Mozilla/XUL/Attributs/querytype -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/querytype ---- -
« Accueil de la référence XUL
-
querytype -
Type : chaîne de caractères -
Indique le type de source de données (datasource) utilisé dans un template. Firefox 3 fournit les types de données intégrés suivants : 'rdf', default, 'xml' et 'storage'. Des extensions peuvent ajouter une gestion d'autres types de données. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/readonly/index.html b/files/fr/archive/mozilla/xul/attributs/readonly/index.html deleted file mode 100644 index b9c4ee4a7a..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/readonly/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: readonly -slug: Archive/Mozilla/XUL/Attributs/readonly -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/readonly ---- -
« Accueil de la référence XUL
-
readonly -
Type : booléen -
Si défini à true, l'utilisateur ne peut pas modifier la valeur de l'élément. Cependant, celle-ci peut toujours être modifiée par un script. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/ref/index.html b/files/fr/archive/mozilla/xul/attributs/ref/index.html deleted file mode 100644 index 33ad444997..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/ref/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: ref -slug: Archive/Mozilla/XUL/Attributs/ref -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/ref ---- -
« Accueil de la référence XUL
-
ref -
Type : URI d'une ressource RDF -
Pour les éléments générés par des templates, cet attribut est utilisé pour indiquer le nœud racine RDF où la génération de contenu commence. Ceci correspondra à la valeur d'un attribut about sur un conteneur RDF. Cet attribut doit être placé en même temps que l'attribut datasources. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/removeelement/index.html b/files/fr/archive/mozilla/xul/attributs/removeelement/index.html deleted file mode 100644 index e818afecba..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/removeelement/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: removeelement -slug: Archive/Mozilla/XUL/Attributs/removeelement -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/removeelement ---- -
« Accueil de la référence XUL
-
removeelement -
Type : id d'élément -
Lorsque cet attribut est placé sur un élément dans un overlay, il indique que l'élément du fichier de base doit être retiré de la fenêtre. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/rows/index.html b/files/fr/archive/mozilla/xul/attributs/rows/index.html deleted file mode 100644 index 5f871bd6bc..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/rows/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: rows -slug: Archive/Mozilla/XUL/Attributs/rows -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/rows ---- -
« Accueil de la référence XUL
-
rows -
Type : entier -
Le nombre de lignes à afficher dans l'élément. Si l'élément contient plus que ce nombre de lignes, une barre de défilement apparaitra afin que l'utilisateur puisse consulter les autres lignes. Pour obtenir le nombre réel de lignes dans l'élément, utilisez la méthode getRowCount. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/screenx/index.html b/files/fr/archive/mozilla/xul/attributs/screenx/index.html deleted file mode 100644 index 3ec8680474..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/screenx/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: screenX -slug: Archive/Mozilla/XUL/Attributs/screenX -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/screenX ---- -
« Accueil de la référence XUL
-
screenX -
Type : entier -
La position horizontale à laquelle la fenêtre apparaît à l'écran. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/screeny/index.html b/files/fr/archive/mozilla/xul/attributs/screeny/index.html deleted file mode 100644 index 1cc65ea6d2..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/screeny/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: screenY -slug: Archive/Mozilla/XUL/Attributs/screenY -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/screenY ---- -
« Accueil de la référence XUL
-
screenY -
Type : entier -
La position verticale à laquelle la fenêtre apparaît à l'écran. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/selected/index.html b/files/fr/archive/mozilla/xul/attributs/selected/index.html deleted file mode 100644 index a1b6c466f8..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/selected/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: selected -slug: Archive/Mozilla/XUL/Attributs/selected -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/selected ---- -
« Accueil de la référence XUL
-
selected -
Type : booléen -
Indique si l'élément est sélectionné ou non. Cette valeur est en lecture seule. Pour changer la sélection, utilisez la propriété selectedIndex ou selectedItem de l'élément conteneur. -
-
-

Voir également

- -
diff --git a/files/fr/archive/mozilla/xul/attributs/seltype/index.html b/files/fr/archive/mozilla/xul/attributs/seltype/index.html deleted file mode 100644 index fcb9957382..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/seltype/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: seltype -slug: Archive/Mozilla/XUL/Attributs/seltype -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/seltype ---- -
- « Accueil de la référence XUL
-
-
- seltype<magic name="\"PAGENAME\"/"></magic>
-
- Type : - - une des valeurs ci-dessous -
-
- Utilisé pour indiquer si les sélections multiples sont permises.
-
- -

<magic name="\"PAGENAME\"/">Des cellules individuelles peuvent être sélectionnées.</magic><magic name="\"PAGENAME\"/"> Des lignes sont sélectionnées, cependant, l'indicateur de sélection n'est visible que sur le texte de la colonne principale.</magic>

diff --git a/files/fr/archive/mozilla/xul/attributs/sizemode/index.html b/files/fr/archive/mozilla/xul/attributs/sizemode/index.html deleted file mode 100644 index 552e358e5f..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/sizemode/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: sizemode -slug: Archive/Mozilla/XUL/Attributs/sizemode -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/sizemode ---- -
« Accueil de la référence XUL
-
sizemode -
Type : une des valeurs ci-dessous -
L'état de la fenêtre (window). Les valeurs suivantes peuvent être utilisées : -
- -


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/sortdirection/index.html b/files/fr/archive/mozilla/xul/attributs/sortdirection/index.html deleted file mode 100644 index c563a7b193..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/sortdirection/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: sortDirection -slug: Archive/Mozilla/XUL/Attributs/sortDirection -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/sortDirection ---- -
« Accueil de la référence XUL
-
sortDirection -
Type : une des valeurs ci-dessous -
Cet attribut indique la direction dans laquelle le contenu généré par un template est trié. Utilisez l'attribut sortResource pour spécifier la clé de tri. -
- -


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/sortresource/index.html b/files/fr/archive/mozilla/xul/attributs/sortresource/index.html deleted file mode 100644 index ac33419cef..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/sortresource/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: sortResource -slug: Archive/Mozilla/XUL/Attributs/sortResource -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/sortResource ---- -
« Accueil de la référence XUL
-
sortResource -
Type : URI d'un prédicat RDF -
Pour du contenu généré par un template, spécifie la clé de tri si le contenu doit être trié. La clé doit être l'URI complète de la ressource par laquelle trier, par exemple « http://home.netscape.com/NC-rdf#Name ». Placez cet attribut sur le même élément que l'attribut datasources. Utilisez sortResource2 pour spécifier une clé de tri secondaire. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/sortresource2/index.html b/files/fr/archive/mozilla/xul/attributs/sortresource2/index.html deleted file mode 100644 index e1e156e2fd..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/sortresource2/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: sortResource2 -slug: Archive/Mozilla/XUL/Attributs/sortResource2 -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/sortResource2 ---- -
« Accueil de la référence XUL
-
sortResource2 -
Type : URI d'un prédicat RDF -
Une clé secondaire de tri pour le contenu. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/src/index.html b/files/fr/archive/mozilla/xul/attributs/src/index.html deleted file mode 100644 index adabab20d0..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/src/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: src -slug: Archive/Mozilla/XUL/Attributs/src -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/src ---- -
- « Accueil de la référence XUL
-
-
- src
-
- Type : URL
-
- L'adresse URL du contenu devant apparaître dans l'élément.
-
-
-

Exemples

- 
<iframe id="content-body" src="http://www.mozilla.org/"/>
-<browser src="http://www.mozilla.org" flex="1"/>
-<image src="Firefoxlogo.png" width="135" height="130"/>
-
-

Voir également

- -
diff --git a/files/fr/archive/mozilla/xul/attributs/statustext/index.html b/files/fr/archive/mozilla/xul/attributs/statustext/index.html deleted file mode 100644 index dcbd921f3a..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/statustext/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: statustext -slug: Archive/Mozilla/XUL/Attributs/statustext -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/statustext ---- -
« Accueil de la référence XUL
-
statustext -
Type : chaîne de caractères -
Utilisé pour définir le texte apparaissant dans la barre d'état lorsque l'utilisateur passe le pointeur par dessus l'élément. Mozilla ne mettra cependant pas à jour la barre d'état automatiquement. Cet attribut sert juste à conserver le texte. Dans Firefox, celui-ci sera automatiquement placé dans l'élément statusbar pour les éléments menuitem de la barre de menus. -
-
-

Exemple

-
<!-- change le message d'état lorsque la souris survole les boutons -->
-<button label="Connexion" statustext="Se connecter au serveur distant"
-      onmouseover="setStatusMessage(this)" onmouseout="clearStatusMessage()"/>
-<button label="Ping" statustext="Envoyer un ping au serveur"
-      onmouseover="setStatusMessage(this)" onmouseout="clearStatusMessage()"/>
-
-<statusbar>
-  <statusbarpanel id="myStatusPanel" label="" flex="1"/>
-  <spacer flex="1"/>
-</statusbar>
-
-<script>
-function setStatusMessage(obj){
-  document.getElementById('myStatusPanel').label = obj.getAttribute('statustext');
-}
-function clearStatusMessage(obj){
-  document.getElementById('myStatusPanel').label = '';
-}
-</script>
-
-

Voir également

-

statusbar et statusbarpanel -

-
diff --git a/files/fr/archive/mozilla/xul/attributs/style/index.html b/files/fr/archive/mozilla/xul/attributs/style/index.html deleted file mode 100644 index 60fa847962..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/style/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: style -slug: Archive/Mozilla/XUL/Attributs/style -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/style ---- -
« Accueil de la référence XUL
-
style -
Type : style CSS inline -
Règles de style CSS à appliquer à l'élément. La syntaxe est identique à celle de l'attribut HTML style. Il est préférable de placer les règles de style dans des feuilles de style séparées. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/suppressonselect/index.html b/files/fr/archive/mozilla/xul/attributs/suppressonselect/index.html deleted file mode 100644 index 5f8cb6b1d5..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/suppressonselect/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: suppressonselect -slug: Archive/Mozilla/XUL/Attributs/suppressonselect -tags: - - Attributs_XUL - - Référence_XUL - - XUL -translation_of: Archive/Mozilla/XUL/Attribute/suppressonselect ---- -
- « Accueil de la référence XUL
-
-
- suppressonselect
-
- Type : - - booléen -
-
- Si cet attribut n'est pas spécifié, un évènement select est déclenché dès qu'un élément est sélectionné, que ce soit par l'utilisateur ou par l'appel d'une des méthodes de sélection. Si la valeur de l'attribut est true, l'évènement select n'est jamais déclenché.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/tabindex/index.html b/files/fr/archive/mozilla/xul/attributs/tabindex/index.html deleted file mode 100644 index 16d1e7e367..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/tabindex/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: tabindex -slug: Archive/Mozilla/XUL/Attributs/tabindex -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/tabindex ---- -
« Accueil de la référence XUL
-
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/template/index.html b/files/fr/archive/mozilla/xul/attributs/template/index.html deleted file mode 100644 index 8b88020822..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/template/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: template -slug: Archive/Mozilla/XUL/Attributs/template -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/template ---- -
« Accueil de la référence XUL
-
template -
Type : id d'élément -
Pour les éléments générés par des templates, cet attribut peut éventuellement être placé sur le nœud racine (l'élément disposant de l'attribut datasources) pour faire référence à un template existant autre part dans le code XUL. L'attribut template doit être défini à l'id de l'élément template. Celui-ci peut être utilisé pour partager un même template entre différents arbres ou menus. Si cet attribut n'est pas spécifié, il doit y avoir un élément template directement dans le nœud. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/timepicker.increment/index.html b/files/fr/archive/mozilla/xul/attributs/timepicker.increment/index.html deleted file mode 100644 index 53d622d39f..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/timepicker.increment/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: timepicker.increment -slug: Archive/Mozilla/XUL/Attributs/timepicker.increment -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/timepicker.increment ---- -
- « Accueil de la référence XUL
-
-
- increment
-
- Type : entier
-
- Indique le nombre de minutes à passer chaque fois que les flèches sont actionnées. Cet attribut est à utiliser en combinaison avec une définition de hideseconds à true.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/timepicker.value/index.html b/files/fr/archive/mozilla/xul/attributs/timepicker.value/index.html deleted file mode 100644 index 4cc2d5f336..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/timepicker.value/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: timepicker.value -slug: Archive/Mozilla/XUL/Attributs/timepicker.value -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/timepicker.value ---- -
- « Accueil de la référence XUL
-
-
- value
-
- Type : chaîne
-
- La valeur initiale du sélecteur de date au format HH:MM:SS ou HH:MM.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/title/index.html b/files/fr/archive/mozilla/xul/attributs/title/index.html deleted file mode 100644 index 2f123af87d..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/title/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: title -slug: Archive/Mozilla/XUL/Attributs/title -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/title ---- -
« Accueil de la référence XUL
-
title -
Type : chaîne de caractères -
Le texte qui doit apparaître dans la barre de titre de la fenêtre ou boîte de dialogue. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/tooltip/index.html b/files/fr/archive/mozilla/xul/attributs/tooltip/index.html deleted file mode 100644 index 8eb387f689..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/tooltip/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: tooltip -slug: Archive/Mozilla/XUL/Attributs/tooltip -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/tooltip ---- -
« Accueil de la référence XUL
-
tooltip -
Type : id d'un élément tooltip -
Doit être défini à la valeur de l'id de l'élément popup à utiliser comme fenêtre tooltip (bulle d'information) lorsque l'élément est survolé un certain temps par le pointeur de la souris. Le tooltip disparaîtra automatiquement lors d'un nouveau déplacement de la souris. Si cet attribut est défini à « _child », le premier élément tooltip enfant de l'élément sera utilisé. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/tooltiptext/index.html b/files/fr/archive/mozilla/xul/attributs/tooltiptext/index.html deleted file mode 100644 index f719b5b76a..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/tooltiptext/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: tooltiptext -slug: Archive/Mozilla/XUL/Attributs/tooltiptext -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/tooltiptext ---- -
« Accueil de la référence XUL
-
tooltiptext -
Type : chaîne de caractères -
Utilisé pour définir le texte qui apparaîtra dans la bulle d'information lorsque l'utilisateur place le pointeur de la souris sur l'élément. Ceci peut être utilisé à la place de la définition d'un tooltip vers un popup pour le cas habituel où celui-ci contient uniquement du texte. Le texte est par défaut affiché dans un simple label. Pour modifier le type de tooltip par défaut, définissez l'attribut default sur un élément tooltip. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/top/index.html b/files/fr/archive/mozilla/xul/attributs/top/index.html deleted file mode 100644 index 994e4a27e2..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/top/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: top -slug: Archive/Mozilla/XUL/Attributs/top -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/top ---- -
« Accueil de la référence XUL
-
top -
Type : chaîne de caractères (représentant un entier) -
Pour les éléments placés directement dans un stack, spécifie la distance en pixels entre le bord supérieur de l'élément et le bord supérieur du stack. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/type/index.html b/files/fr/archive/mozilla/xul/attributs/type/index.html deleted file mode 100644 index a2d6628e11..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/type/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: type -slug: Archive/Mozilla/XUL/Attributs/type -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/type ---- -
-

Voir

- -
-

 

diff --git a/files/fr/archive/mozilla/xul/attributs/uri/index.html b/files/fr/archive/mozilla/xul/attributs/uri/index.html deleted file mode 100644 index 2879d1f18c..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/uri/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: uri -slug: Archive/Mozilla/XUL/Attributs/uri -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/uri ---- -
« Accueil de la référence XUL
-
uri -
Type : chaîne de caractères -
Pour du contenu généré par un template, l'attribut doit être placé sur l'élément où la génération de contenu doit commencer. Donc, il doit être placé sur un élément qui est le descendant d'un template. La valeur doit être définie à rdf:*. -
-
Les éléments qui apparaissent à l'intérieur de l'élément portant cet attribut seront répétés pour chaque nœud dans la source de données RDF. Les éléments qui sont à l'extérieur n'apparaîtront qu'une seule fois. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/value/index.html b/files/fr/archive/mozilla/xul/attributs/value/index.html deleted file mode 100644 index 86904f020b..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/value/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: value -slug: Archive/Mozilla/XUL/Attributs/value -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/value ---- -
« Accueil de la référence XUL
-
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
-
-

Voir également

- -

.value]] -

-
diff --git a/files/fr/archive/mozilla/xul/attributs/wait-cursor/index.html b/files/fr/archive/mozilla/xul/attributs/wait-cursor/index.html deleted file mode 100644 index 23677d8118..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/wait-cursor/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: wait-cursor -slug: Archive/Mozilla/XUL/Attributs/wait-cursor -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/wait-cursor ---- -
« Accueil de la référence XUL
-
wait-cursor -
Type : booléen -
Définissez cet attribut à true pour que le curseur devienne un curseur d'attente lorsqu'il survole l'élément. Habituellement, on ne l'utilisera que sur l'élément window ou d'autres éléments de premier plan. -
-
-
diff --git a/files/fr/archive/mozilla/xul/attributs/width/index.html b/files/fr/archive/mozilla/xul/attributs/width/index.html deleted file mode 100644 index bee18c2365..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/width/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: width -slug: Archive/Mozilla/XUL/Attributs/width -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/width ---- -
« Accueil de la référence XUL
-
width -
Type : chaîne de caractères (représentant un entier) -
La largeur préférée de l'élément. La valeur ne doit pas préciser d'unité car elle est toujours exprimée en pixels. La largeur réellement affichée peut être différente si l'élément ou son contenu ont une largeur minimum ou maximum, ou que la taille est ajustée selon la flexibilité ou l'alignement de son parent. La propriété CSS width peut également être utilisée. -
-
-

Dans cet exemple, la largeur préférée de la boîte hbox intérieure sera de 40 pixels. La largeur affichée est également 40 pixels puisqu'aucun ajustement de flexibilité ou d'alignement ne s'applique. -

-
<hbox>
-  <hbox width="40" style="background-color: red;">
-    <label value="40"/>
-  </hbox>
-</hbox>
-
-

Cependant, dans l'exemple qui sit, malgré une largeur préférée de 30 pixels pour la boîte, sa largeur affichée sera plus grande pour prendre en compte le label plus grand. -

-
<vbox width="30" align="start" style="background-color: red;">
-  <label value="vbox xul width 10px red"/>
-</vbox>
-
-
Note : Lorsqu'il est utilisé sur des objets treecol l'attribut width peut permettre à ceux-ci d'être défilables horizontalement si la largeur additionnée des colonnes est supérieure à celle de l'objet conteneur.
-
diff --git a/files/fr/archive/mozilla/xul/attributs/windowtype/index.html b/files/fr/archive/mozilla/xul/attributs/windowtype/index.html deleted file mode 100644 index 6eb500663d..0000000000 --- a/files/fr/archive/mozilla/xul/attributs/windowtype/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: windowtype -slug: Archive/Mozilla/XUL/Attributs/windowtype -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Attribute/windowtype ---- -
« Accueil de la référence XUL
-
windowtype -
Type : chaîne de caractères -
Définit une chaîne pouvant être utilisée pour identifier le type de fenêtre. Celle-ci peut être utilisée, par exemple, pour faire la distinction entre une fenêtre de navigation et une fenêtre d'édition. Certaines des fonctions de gestion de fenêtres de Mozilla utilisent cet attribut pour grouper les fenêtres du même type. -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/box/index.html b/files/fr/archive/mozilla/xul/box/index.html deleted file mode 100644 index a2b2cc6dd4..0000000000 --- a/files/fr/archive/mozilla/xul/box/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: box -slug: Archive/Mozilla/XUL/box -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/box ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -
-

Un élément conteneur qui peut contenir n'importe quel nombre d'éléments enfants. Si l'élément box a un attribut orient défini à horizontal, les éléments enfants sont disposés de gauche à droite dans l'ordre de leur apparition dans l'élément box. Si orient est défini à vertical, ils seront positionnés de haut en bas. Les éléments enfants ne se superposent pas. L'orientation par défaut est horizontal.

-

Vous trouverez plus d'informations dans le Tutoriel XUL.

-

Exemples

-
Image:XUL_ref_box.png
-
<box orient="horizontal">
-  <label value="Zéro"/>
-  <box orient="vertical">
-    <label value="Un"/>
-    <label value="Deux"/>
-  </box>
-  <box orient="horizontal">
-    <label value="Trois"/>
-    <label value="Quatre"/>
-  </box>
-</box>
-
-

Attributs

- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
-

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
-

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
-

Sujets liés

-
Éléments
vbox, hbox
diff --git a/files/fr/archive/mozilla/xul/button/index.html b/files/fr/archive/mozilla/xul/button/index.html deleted file mode 100644 index adce204aab..0000000000 --- a/files/fr/archive/mozilla/xul/button/index.html +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: button -slug: Archive/Mozilla/XUL/button -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/button ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un bouton qui peut être activé par l'utilisateur. Des gestionnaires d'évènements peuvent être utilisés pour capturer des évènements souris, claviers ou autres. Un bouton est typiquement affiché sous la forme d'un rectangle gris en relief. Le label d'un bouton peut être spécifié à l'aide de l'attribut label ou en plaçant du contenu dans l'élément button. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
accesskey, autoCheck, checkState, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type -
-
Propriétés -
accessKey, accessibleType, autoCheck, checkState, checked, command, crop, dir, disabled, dlgType, group, image, label, open, orient, tabIndex, type -
-

Exemples

-
Image:XUL_ref_button.png
-
<button label="Appuyez"
-        oncommand="alert('Vous avez appuyé.');"/>
-
-

Attributs

-

-

- -
accesskey
-
Type : caractère -
Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut label de l'élément.
-

Exemple

-
Image:XUL_ref_accesskey_attr.png
-
<vbox>
-  <label value="Entrez votre nom" accesskey="e" control="myName"/>
-  <textbox id="myName"/>
-  <button label="Annuler" accesskey="n"/>
-  <button label="OK" accesskey="O"/>
-</vbox>
-
-

Voir également

-

Les attributs label et acceltext -

-
-
- -
-
- -
-
- -
-
- checked
-
- Type : - - booléen -
-
- Indique si l'élément est coché ou non.
-
- Utilisez hasAttribute() pour déterminer si cet attribut est défini plutôt que getAttribute().
- Pour les boutons, l'attribut type doit etre mis à checkbox ou à radio pour qu'un effet soit perceptible.
-
-
-
- -
command -
Type : id d'élément -
Défini à la valeur de l'id d'un élément command observé par l'élément. -
- - -
-
- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
-
- dir
-
- Type : - - une des valeurs ci-dessous -
-
- La direction dans laquelle les éléments enfants de l'élément seront placés.
-
- - -

 

-
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
-
- -
-
- -
-
- -
image -
Type : URL d'une image -
L'URL de l'image devant apparaître sur l'élément. Si cet attribut est vide ou omis, aucune image n'apparaîtra. La position de l'image est déterminée par les attributs dir et orient. -
- - -
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
open -
Type : booléen -
Pour les boutons de type menu, l'attribut open est défini à true lorsque le menu est ouvert. L'attribut open n'est pas présent si le menu est fermé. -
- - -
-
- -
orient -
Type : une des valeurs ci-dessous -
Utilisé pour spécifier si les enfants de l'élément sont orientés horizontalement ou verticalement. La valeur par défaut dépend de l'élément. Il est également possible d'utiliser la propriété de style -moz-box-orient. -
- - - -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
- -

Propriétés

-

-

-
accessKey -
Type : caractère -
Obtient et définit la valeur de l'attribut accesskey. -
-


-

- -
-
-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
-
-
-
-
crop -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut crop. -
- -
-
-
dir -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut dir. -
- -
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
-
-
image -
Type : URL d'image -
Obtient et définit la valeur de l'attribut image. -
- -
-
-
label -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut label. -
- -
-
-
open -
Type : booléen -
Obtient et définit la valeur de l'attribut open. -
- -
-
-
orient -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut orient. -
- -
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
type -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut type. -
- -
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Interfaces -
nsIAccessibleProvider, nsIDOMXULButtonElement -
diff --git "a/files/fr/archive/mozilla/xul/caract\303\250res_internationaux_dans_du_javascript_xul/index.html" "b/files/fr/archive/mozilla/xul/caract\303\250res_internationaux_dans_du_javascript_xul/index.html" deleted file mode 100644 index 756592e74b..0000000000 --- "a/files/fr/archive/mozilla/xul/caract\303\250res_internationaux_dans_du_javascript_xul/index.html" +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Caractères internationaux dans du JavaScript XUL -slug: Archive/Mozilla/XUL/Caractères_internationaux_dans_du_JavaScript_XUL -tags: - - Internationalisation - - JavaScript -translation_of: Archive/Mozilla/XUL/International_characters_in_XUL_JavaScript ---- -

 

-

Introduction

-

Gecko 1.8, qui est utilisé dans Firefox 1.5 et d'autres applications, a ajouté un support pour les caractères non-ASCII dans les fichiers JavaScript chargés depuis des fichiers XUL.

-

Cela signifie que de tels fichiers de script sont capables d'utiliser virtuellement tous les caractères de n'importe quelle langue dans le monde. Par exemple, ils pourraient contenir une ligne :

-
var text = "Ein schönes Beispiel eines mehrsprachigen Textes: 日本語";
-
-

Celle-ci mélange des caractères allemands et japonais.

-

Les versions précédentes interprétaient toujours les fichiers JS chargés depuis XUL en ISO-8859-1 (Latin-1) aussi bien en local qu'en fichiers distants. Les échappements Unicode, comme expliqué ci-dessous, ont toujours fonctionné.

-

Comment l'encodage des caractères est déterminé depuis Gecko 1.8

-

Lorsque le fichier JavaScript est chargé depuis une URL chrome://, un Byte Order Mark) est utilisé pour déterminer l'encodage des caractères du script. Autrement, l'encodage sera le même que celui utilisé par le fichier XUL (et spécifié par l'attribut encoding dans la balise <?xml?>). Par défaut, l'encodage sera l'UTF-8 qui peut représenter virtuellement l'ensemble des caractères dans le monde.

-

Si le fichier de script est chargé via HTTP, l'en-tête HTTP peut contenir une déclaration d'encodage de caractères comme faisant partie de Content-Type, par exemple :

-
Content-Type: application/x-javascript; charset=UTF-8
-
-

Si aucun paramètre charset n'est spécifié, les mêmes règles que précédemment sont appliquées.

-

Compatibilité inter-versions

-

Si vous voulez que le même code fonctionne à la fois avec Gecko 1.8 et ses versions antérieures, vous devez vous limiter à l'ASCII. Toutefois, vous pouvez employer les échappements unicode. Le précédent exemple réécrit deviendrait :

-
var text = "Ein sch\u00F6nes Beispiel eines mehrsprachigen Textes: \u65E5\u672C\u8A9E";
-
-

Une alternative serait d'utiliser des fichiers de propriétés via nsIStringBundle ou l\'élément XUL <stringbundle> ; ils permettent la localisation du XUL. Ce n'est toutefois pas permis dans des fichiers XUL chargés depuis le Web mais seulement dans un code avec privilèges, c'est-à-dire dans des extensions.

diff --git a/files/fr/archive/mozilla/xul/checkbox/index.html b/files/fr/archive/mozilla/xul/checkbox/index.html deleted file mode 100644 index cdb848ef56..0000000000 --- a/files/fr/archive/mozilla/xul/checkbox/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: checkbox -slug: Archive/Mozilla/XUL/checkbox -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/checkbox ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément qui peut être activé ou non. Il est le plus généralement affiché sous la forme d'une case vide lorsque l'élément est désactivé et une case avec une coche lorsqu'il est activé. L'utilisateur peut changer l'état de la case à cocher en la sélectionnant avec la souris. Un label, spécifié avec l'attribut label, peut être ajouté à côté de la case à cocher. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
accesskey, checked, command, crop, disabled, src, label, preference, tabindex -
-
Propriétés -
accessKey, accessibleType, checked, command, crop, disabled, src, label, tabIndex -
-

Exemples

-
Image:XUL_ref_checkbox.png
-
<checkbox label="Activer JavaScript" checked="true"/>
-<checkbox label="Activer Java" checked="false"/>
-
-

Attributs

-

-

- -
accesskey
-
Type : caractère -
Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut label de l'élément.
-

Exemple

-
Image:XUL_ref_accesskey_attr.png
-
<vbox>
-  <label value="Entrez votre nom" accesskey="e" control="myName"/>
-  <textbox id="myName"/>
-  <button label="Annuler" accesskey="n"/>
-  <button label="OK" accesskey="O"/>
-</vbox>
-
-

Voir également

-

Les attributs label et acceltext -

-
-
- -
-
- checked
-
- Type : - - booléen -
-
- Indique si l'élément est coché ou non.
-
- Utilisez hasAttribute() pour déterminer si cet attribut est défini plutôt que getAttribute().
- Pour les boutons, l'attribut type doit etre mis à checkbox ou à radio pour qu'un effet soit perceptible.
-
-
-
- -
command -
Type : id d'élément -
Défini à la valeur de l'id d'un élément command observé par l'élément. -
- - -
-
- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
preference -
Type : id d'élément -
Connecte l'élément à une préférence (élément preference) correspondante. Cet attribut n'a d'effet qu'utilisé au sein d'un prefwindow. La valeur de la préférence sera mise à jour pour correspondre à la propriété value de l'élément. -
- - -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
- -

Propriétés

-

-

-
accessKey -
Type : caractère -
Obtient et définit la valeur de l'attribut accesskey. -
-


-

- -
-
-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
-
-
crop -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut crop. -
- -
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
-
label -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut label. -
- -
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Interfaces
nsIAccessibleProvider, nsIDOMXULCheckboxElement -
-
-
diff --git a/files/fr/archive/mozilla/xul/command/index.html b/files/fr/archive/mozilla/xul/command/index.html deleted file mode 100644 index 73dcad8053..0000000000 --- a/files/fr/archive/mozilla/xul/command/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: command -slug: Archive/Mozilla/XUL/command -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/command ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément command peut être utilisé pour invoquer une opération pouvant provenir de plusieurs sources différentes. Par exemple, une opération Coller depuis le Presse-papiers peut venir du menu Édition, d'un menu contextuel, ou d'un raccourci clavier. Le code s'attache à une commande avec l'attribut oncommand. Il sera appelé quelle que soit la manière dont la commande est invoquée par l'utilisateur. De plus, la désactivation de la commande désactivera automatiquement les éléments de menus et raccourcis clavier associés. -

Les commandes sont identifiées par leur attribut id. Si le script chrome://global/content/globalOverlay.js est inclus dans votre fenêtre, vous pouvez utiliser la fonction goDoCommand pour invoquer la commande. L'avantage est que la commande sera envoyée à la partie de l'interface utilisateur qui y répondra. Typiquement, il s'agira de l'élément ayant actuellement le focus. -

Comme avec un broadcaster, les commandes envoient des attributs à d'autres éléments. -

Vous trouverez plus d'informations dans le Tutoriel XUL. Voir également : l'attribut command, l'élément commandset. -

-
Attributs -
disabled, label, oncommand -
-

Exemples

-

Le code suivant enverra une commande Coller (cmd_paste) à l'élément détenant actuellement le focus : -

-
 // Inclure d'abord chrome://global/content/globalOverlay.js
- goDoCommand("cmd_paste");
-
-

Exemple avec deux boutons -

-
<command id="cmd_openhelp" oncommand="alert('Aide');"/>
-<button label="Aide" command="cmd_openhelp"/>
-<button label="Plus d'aide" command="cmd_openhelp"/>
-
-

Attributs

-

-

- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
oncommand -
Type : code de script -
Ce gestionnaire d'évènement est appelé lorsque la commande est activée. Cela se produit quand un utilisateur sélectionne un élément de menu ou active un raccourci clavier attaché à la commande. -
- - -
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

- diff --git a/files/fr/archive/mozilla/xul/datepicker/index.html b/files/fr/archive/mozilla/xul/datepicker/index.html deleted file mode 100644 index 0425ec07fb..0000000000 --- a/files/fr/archive/mozilla/xul/datepicker/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: datepicker -slug: Archive/Mozilla/XUL/datepicker -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/datepicker ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément datepicker permet à l'utilisateur d'entrer une date. Trois types sont disponibles, ce qui peut être spécifié à l'aide de l'attribut type. -

- -

Plusieurs manières de définir le jour sélectionné existent. En XUL, l'attribut value peut être défini à une valeur de la forme AAAA/MM/JJ pour initialiser le sélecteur de date à une certaine date. S'il n'est pas spécifié, il affichera par défaut le jour actuel. -

Pour changer la date sélectionnée, la propriété value peut être utilisée pour définir une nouvelle valeur de la forme AAAA/MM/JJ. La propriété dateValue peut être utilisée pour obtenir et définir la date à l'aide d'un objet Date. En outre, les propriétés date, month et year peuvent être utilisées pour obtenir et modifier chaque composant de la date séparément. -

-
Attributs -
disabled, firstdayofweek, readonly, type, tabindex, value -
-
Propriétés -
date, dateLeadingZero, dateValue, disabled, month, monthLeadingZero, open, readOnly, tabIndex, value, year, yearLeadingZero -
-

Exemples

-

Image:Controlsguide-datepicker-grid.png -

-
<datepicker type="grid" value="2007/03/26"/>
-
-

Attributs

-

-

- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
firstdayofweek -
Type : entier -
Indique le jour de la semaine à afficher comme premier jour dans la grille. Les valeurs vont de 0 à 6, où 0 est dimanche et 6 est samedi. La valeur par défaut est déterminée par la locale, n'utilisez donc cet attribut que si vous désirez l'écraser. -
-


-

- - -
-
- -
readonly -
Type : booléen -
Si défini à true, l'utilisateur ne peut pas modifier la valeur de l'élément. Cependant, celle-ci peut toujours être modifiée par un script. -
- - -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
-
- type
-
- Type : une des valeurs suivantes
-
- L'attribut type peut avoir l'une des valeurs ci-dessous afin de spécifier le type de sélecteur de date à utiliser :
-
- - -

 

-
-
- -
-
- value
-
- Type : chaîne
-
- La valeur initiale du sélecteur de date sous la forme AAAA/MM/JJ.
-
-
- -

Propriétés

-

-

-
-
- date
-
- Type : entier
-
- Le jour du mois actuellement sélectionné, entre 1 et 31. Modifiez cette propriété pour changer la date sélectionnée.
-
-
-
-
- dateLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro doit être affiché avant la date lorsqu'elle est inférieure à 10.
-
-
-
-
- dateValue
-
- Type : Date
-
- La date actuellement entrée ou sélectionnée dans le sélecteur de date sous la forme d'un objet Date.
-
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
-
- month
-
- Type : entier
-
- Le mois actuellement sélectionné entre 0 (janvier) et 11 (décembre). Définissez cette propriété pour changer le mois sélectionné.
-
-
-
-
- monthLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro doit être affiché devant le mois s'il est inférieur à 10.
-
-
-
-
- open
-
- Type : booléen
-
- Pour les sélecteurs de date de type popup, spécifie si celui-ci est ouvert. Définissez cette propriété pour ouvrir ou fermer le popup. Pour les autres types de sélecteurs de date, cette propriété est toujours à false.
-
-
-
-
- readonly
-
- Type : booléen
-
- Si définie à true, l'utilisateur ne peut pas modifier la valeur de l'élément.
-
-
- Cette propriété toute en minuscules n'est utilisée qu'avec l'élément preference et sera peut-être renommée en readOnly dans des versions ultérieures. D'autres éléments utilisent la propriété readOnly. L'attribut correspondant est cependant readonly en minuscules.
-
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
-
- value
-
- Type : chaîne
-
- La date actuellement sélectionnée au format AAAA/MM/JJ. Contrairement à la propriété month, les mois varient ici dans l'intervalle 01 à 12. Définissez cette propriété pour changer la date sélectionnée.
-
-
-
-
- year
-
- Type : entier
-
- L'année actuellement sélectionnée entre 1 et 9999. Définissez cette propriété pour changer la date sélectionnée.
-
-
-
-
- yearLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro doit être affiché devant l'année si elle est inférieure à 1000.
-
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Interfaces -
nsIDOMXULControlElement -
-
-
diff --git a/files/fr/archive/mozilla/xul/description/index.html b/files/fr/archive/mozilla/xul/description/index.html deleted file mode 100644 index 2895ae7922..0000000000 --- a/files/fr/archive/mozilla/xul/description/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: description -slug: Archive/Mozilla/XUL/description -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/description ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Cet élément sert à créer un bloc de texte. Celui-ci peut être défini soit avec l'attribut value, soit en plaçant le texte entre les balises d'ouverture et de fermeture de l'élément description. L'attribut value sert à définir du texte apparaissant sur une seule ligne. Si du texte apparait comme enfant de l'élément description, il s'étalera éventuellement sur plusieurs lignes. Il peut contenir du balisage arbitraire, qui peut être stylé le cas échéant. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
crop, disabled, tabindex value -
-
Propriétés -
accessibleType, crop, disabled, tabIndex, value -
-
Classes de style -
header, indent, monospace, plain, small-margin -
-

Exemples

-
Image:XUL_ref_description.png
-
<description>
-  Ceci est une longue section de texte qui sera affichée.
-</description>
-
-

Attributs

-

-

- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

-

-

-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
crop -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut crop. -
- -
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Classes de style

-
-
header
-
A class used for headings. Typically, this will cause the text to appear bold.
-
-
-
indent
-
This class causes the text to be indented on its left side.
-
-
-
monospace
-
This class causes the text to be displayed in a monospace font.
-
-
-
plain
-
This class causes the element to be displayed with no border or margin.
-
-
-
small-margin
-
This class causes the text to be displayed with a smaller margin.
-
- -

Sujets liés

-

À faire. -

diff --git a/files/fr/archive/mozilla/xul/dropmarker/index.html b/files/fr/archive/mozilla/xul/dropmarker/index.html deleted file mode 100644 index 88f32fb59d..0000000000 --- a/files/fr/archive/mozilla/xul/dropmarker/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: dropmarker -slug: Archive/Mozilla/XUL/dropmarker -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/dropmarker ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un dropmarker est un bouton avec une flèche qui révèle plus de détails lorsque l'on appuie dessus. Il n'est pas prévu pour être utilisé comme un élément séparé, mais comme partie d'un autre élément. Par exemple, l'élément menulist et le type « popup » d'un sélecteur de date utilisent un dropmarker qui, lorsqu'on clique dessus, fera apparaître un menu popup. -

-

Attributs

- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -
-
diff --git "a/files/fr/archive/mozilla/xul/faq_et_r\303\250gles_pour_les_accesskeys_en_xul/index.html" "b/files/fr/archive/mozilla/xul/faq_et_r\303\250gles_pour_les_accesskeys_en_xul/index.html" deleted file mode 100644 index 12a2836539..0000000000 --- "a/files/fr/archive/mozilla/xul/faq_et_r\303\250gles_pour_les_accesskeys_en_xul/index.html" +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: FAQ et règles pour les accesskeys en XUL -slug: Archive/Mozilla/XUL/FAQ_et_règles_pour_les_accesskeys_en_XUL -tags: - - XUL -translation_of: Archive/Mozilla/XUL/XUL_Accesskey_FAQ_and_Policies ---- -

-

-

Qu'est-ce qu'une accesskey ?

-

Une accesskey ou touche mnémonique est une lettre soulignée dans une page Web, un menu ou un dialogue qui indique à l'utilisateur un raccourci clavier rapide simulant un clic sur cet élément. Par exemple, un bouton « Appliquer » peut avoir la lettre « A » soulignée. Sous Windows et UNIX, appuyer sur les touches <kbd>ALT+A</kbd> est une façon pratique de pousser le bouton. Sous Macintosh, les accesskeys ne sont disponibles qu'en HTML et pas en XUL, et elles sont activées en utilisant la touche <kbd>CTRL+</kbd> lettre au lieu de <kbd>ALT</kbd>. -

-

Comment une accesskey est-elle ajoutée à un contrôle de formulaire ?

-

Une accesskey peut être ajoutée à un contrôle ou libellé de formulaire HTML ou XUL en utilisant l'attribut accesskey. Par exemple, voici comment on peut ajouter une accesskey à un bouton XUL : -

- - - - -
<button label="Appliquer maintenant" accesskey="A" /> -Appliquer maintenant -
- ou - -
<button label="Appliquer maintenant" accesskey="a" /> -Appliquer maintenant -
-

Dans Mozilla, nous utilisons des DTD pour rajouter une autre couche d'abstraction à des fins d'internationalisation. L'exemple ci-dessus devrait donner : -

<button label="Appliquer maintenant" accesskey="&applyInstantly.accesskey" /> -

(Utilisez toujours accesskey au lieu de akey). -

Si des méthodes comme confirm(), confirmEx() ou prompt() sont utilisées pour créer un dialogue, utilisez un « & » devant le texte du bouton ou de la case à cocher fait du caractère qui suit une accesskey. Par exemple, &Maintenant transforme « M » en accesskey soulignée. Pour insérer un véritable caractère esperluète, utilisez &&. -

-

Comment choisir une lettre d'accesskey ?

- -

Y a-t-il des bogues critiques que je devrais connaître ?

- -

Où les accesskeys doivent-elles être ajoutées ?

-

Recherchez les dépendances du bug 129179 (le méta bogue de gestion des accesskeys XUL), ou recherchez les bogues avec « accesskey » ou « mnemonic » dans le résumé, ou recherchez les dialogues où il n'y a pas d'éléments avec des lettres soulignées. -

Ouvrez les bogues sous le composant « Keyboard Navigation », et rendez le méta bug 129179 dépendant de ceux-ci. -

-
-
diff --git a/files/fr/archive/mozilla/xul/guide_des_popups/index.html b/files/fr/archive/mozilla/xul/guide_des_popups/index.html deleted file mode 100644 index aaebd62a1b..0000000000 --- a/files/fr/archive/mozilla/xul/guide_des_popups/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Guide des popups -slug: Archive/Mozilla/XUL/Guide_des_popups -translation_of: Archive/Mozilla/XUL/PopupGuide ---- -

-

-

Popups et menus

-

Différents types de popups et menus peuvent être créés. Un popup est un menu ou une fenêtre flottante sans barre de titre, bordures ou autres décorations de fenêtre qui peut s'étendre au-delà des limites de la fenêtre principale. -

-

Types de popups

-

XUL fournit un certain nombre de types d'éléments différents qui peuvent être utilisés pour créer des menus popups ou d'autres types de widgets popups, qui varient selon la manière dont ils sont attachés à un élément et de s'ouvrir. Un aperçu rapide de chaque type est donné ici ; plus de détails pour chacun des types peuvent être obtenus en suivant les liens correspondants. -

Dans ce guide, le terme « popup » fait référence à tous les types de popups, tandis que le terme « menu » fait référence à un type particulier de popup. En particulier, les deux premiers types de la liste ci-dessous sont des menus. -

-
Menus -
Un menu s'utilise lorsque l'on désire avoir une série de commandes pouvant être activées par l'utilisateur, mais sans devoir utiliser la place que prendrait un bouton pour chaque commande. Un menu est normalement masqué, et lorsqu'il est activé un popup contenant la liste des commandes apparaît. L'utilisateur peut sélectionner une commande et le menu disparaît à nouveau. -
On crée un menu avec l'élément menupopup. Il affiche des éléments dans une liste, peut afficher des sous-menus et fournit une navigation au clavier entre les différents éléments. Un menu ne doit contenir que des éléments liés aux menus. -
Menus contextuels -
Un menu contextuel est comme un menu normal, sauf que les commandes qu'il contient s'appliquent à ce sur quoi l'utilisateur a cliqué pour ouvrir le menu. Souvent, selon l'élément sur lequel on a cliqué, certaines commandes seront masquées si elles ne sont pas applicables à cet élément.
Panels -
Un panel peut contenir tout type de contenu. Il est utile lorsque l'on veut afficher certains contrôles temporairement par dessus l'interface utilisateur existante. Par exemple, un champ de recherche dans un popup peut être utilisé pour permettre une recherche et disparaître dès qu'un terme de recherche a été entré. -
Un panel se crée à l'aide de l'élément panel. -
Tooltips -
Lorsque le pointeur de la souris est positionné au dessus d'un contrôle d'interface utilisateur, un tooltip fournit une bulle d'aide ou d'information, une petite boîte avec un texte descriptif concernant ce contrôle. Lorsque le pointeur est déplacé en dehors du contrôle, le tooltip disparaît automatiquement. -
Un tooltip peut être créé en définissant l'attribut tooltiptext sur un élément ou à l'aide de l'élément tooltip. -
-

Utilisation de popups

-

Les informations complémentaires suivantes sont disponibles concernant la manipulation de menus et de popups. -

-
Ouverture d'un menu ou d'un popup -
La plupart des menus et des popups sont ouverts automatiquement lorsqu'ils sont associés avec un élément. Pour ouvrir un popup à l'aide d'un script, utilisez les méthodes openPopup ou openPopupAtScreen. Pour des informations détaillées sur la manière d'ouvrir un popup, consultez Ouverture d'un popup ou Ouverture d'un menu. -
-
Fermeture d'un menu ou d'un popup -
Pour des informations sur la fermeture d'un popup, consultez Fermeture d'un popup ou Fermeture d'un menu. -
-
Comment sont placés les popups -
Pour en savoir plus sur la manière dont la position d'un popup à l'écran est déterminée, et comment aligner des popups sur d'autres éléments, consultez Positionnement des popups. -
-
Determiner si un popup est ouvert -
Pour déterminer si un popup ou un menu est ouvert, consultez Déterminer si un popup est ouvert. -
-
Déplacement d'un popup -
Les popups peuvent être déplacés à l'aide de la méthode moveTo. Consultez Déplacement d'un popup. -
-
Redimensionnement d'un popup -
La taille d'un popup peut être ajustée à l'aide de la méthode sizeTo. Consultez Redimensionnement d'un popup. -
-
Attacher des menus à un bouton -
Pour en savoir plus sur l'ouverture d'un menu lorsqu'un bouton est enfoncé, consultez Boutons de menus. -
-
Fonctionnalités des éléments d'un menu -
Pour en savoir plus sur les diverses fonctionnalités des éléments d'un menu, consultez Fonctionnalités de l'élément menuitem -
-
Modification des éléments d'un menu -
Pour ajouter, insérer et retirer des éléments d'un menu, consultez Modification d'un menu. -
-
Évènements d'ouverture ou fermeture de popups -
Les évènements popupshowing et popupshown se déclenchent lorsqu'un menu ou un popup s'ouvre. Les évènements popuphiding et popuphidden se déclenchent lorsqu'un menu ou un popup se ferme. Pour plus d'informations sur ces évènements, consultez Évènements des popups. -
-
Gestion des touches du clavier dans les popups -
Pour des informations sur la manière dont les touches du clavier sont gérées au sein des menus et panels, consultez Gestion des touches du clavier dans les popups. -
-
Considérations liées à la plateforme -
Consultez les considérations spéciales des menus par plateforme pour quelques notes concernant la gestion des menus sur certaines plateformes, par exemple la création d'un menu Application sur un Macintosh. -
-

Utilisation des popups dans des extensions

-

Les extensions peuvent ajouter des éléments de menus supplémentaires à un menu de la barre de menus ou au menu contextuel. De plus une extension peut ajouter un tout nouveau menu complet. Par exemple, une extension peut vouloir ajouter une nouvelle commande dans le menu Outils pour ouvrir un dialogue spécifique à l'extension. Une autre tâche courante est de créer une extension ajoutant un élément au menu contextuel du navigateur. Consultez Utilisation de menus et popups dans des extensions pour plus de détails. -

-
-
diff --git a/files/fr/archive/mozilla/xul/guide_des_popups/ouverture_et_fermeture/index.html b/files/fr/archive/mozilla/xul/guide_des_popups/ouverture_et_fermeture/index.html deleted file mode 100644 index ee61ae1e5f..0000000000 --- a/files/fr/archive/mozilla/xul/guide_des_popups/ouverture_et_fermeture/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Ouverture et fermeture -slug: Archive/Mozilla/XUL/Guide_des_popups/Ouverture_et_fermeture -tags: - - Guide Popup XUL - - XUL -translation_of: Archive/Mozilla/XUL/PopupGuide/OpenClose ---- -

Ouverture et fermeture de popups

- -

Les popups et menus peuvent être ouverts et fermés depuis un script.

- -

Ouverture d'un menu

- -

Les menus s'afficheront d'eux-mêmes automatiquement dès que nécessaire sans aucun travail supplémentaire. Par exemple, le popup d'un menu s'ouvrira lors d'un clic sur le label de menu, et un sous-menu s'ouvrira lors du passage de la souris sur l'élément du menu parent.

- -

Cependant, vous pourrez vouloir ouvrir un menu manuellement dans certaines situations. L'élement menu a une propriété open qui peut être définie à true pour ouvrir le menu, ou false pour le fermer. Un exemple simple :

- -
un_menu.open = true;
-
- -

Cette unique ligne de code ouvrira un menu référencé par la variable « un_menu ». Notez que la propriété open s'applique au menu ou au bouton, pas à l'élément menupopup. Voici un exemple complet utilisant un bouton pour ouvrir un menu :

- -
<button label="Ouvrir un menu"
-        oncommand="document.getElementById('editMenu').open = true;"/>
-
-<menu id="editMenu" label="Édition">
-  <menupopup>
-    <menuitem label="Couper"/>
-    <menuitem label="Copier"/>
-    <menuitem label="Coller"/>
-  </menupopup>
-</menu>
-
- -

Cette technique peut être utilisée pour les menupopups qui utilisent la balise menu tant que pour ceux qui utilisent les balises button et toolbarbutton. Pour les menupopups attachés à d'autres éléments à l'aide des attributs popup ou context, consultez Ouverture d'un popup plus bas.

- -

Comme avec les autres manières d'ouvrir un menu, l'évènement popupshowing sera déclenché pour permettre de personnaliser les commandes apparaissant dans le menu.

- -

Dans certaines situations, il n'est pas permis d'ouvrir un menu :

- - - -

Fermeture d'un menu

- -

Un menu se fermera automatiquement une fois que l'utilisateur a fait une sélection depuis celui-ci. Lorsqu'un élément de menu est sélectionné, il déclenche un évènement de commande afin que du code puisse être utilisé pour effectuer une action. L'utilisateur peut annuler la sélection d'une commande en appuyant sur la touche Échap. Ceci fermera un menu simple, mais s'il avait un menu parent, celui-ci restera ouvert. Un utilisateur peut également annuler la sélection en cliquant end ehors du menu. Dans ce cas, non seulement le menu sera fermé, mais tous les menus parents le seront également.

- -

Un menu peut être fermé par un script en définissant la propriété open à false, le contraire de ce qu'on ferait pour ouvrir le menu. La propriété open s'applique au menu ou au bouton, mais pas au menupopup.

- -
un_menu.open = false;
-
- -

Cette commande fermera uniquement un seul niveau de menus, de sorte que tout menu parent devra être fermé avec une commande semblable si nécessaire. Cependant, les éventuels menus enfants de « un_menu » dans cet exemple seront fermé puisque celui-ci ne sera plus ouvert. Par exemple, disons qu'un menu Fichier a un sous-menu contenant une liste de fichiers récemment utilisés. Si les deux menus sont ouverts et que l'on met la propriété open du sous-menu à false, celui-ci sera fermé mais le menu Fichier parent restera ouvert. D'un autre côté, si c'est la propriété open du menu Fichier qui est mise à false, les deux menus se fermeront.

- -

Cette technique peut être utilisée tant pour les menupopups qui utilisent les balises menu et button que toolbarbutton. Pour les menupopups attachés à d'autres éléments à l'aide des attributs popup ou context, consultez Fermeture d'un popup plus bas.

- -

Lorsqu'un menu est fermé, l'évènement popuphiding est déclenché sur celui-ci. On peut donc attacher un écouteur sur cet évènement pour retirer toute commande qui avait été ajoutée au cours de l'évènement popupshowing.

- -

Les menus et popups seront également fermés lorsque le document ou la fenêtre dans lesquels ils sont contenus seront fermés, ou si l'élément menupopup est retiré du document. Ce sont des situations dans lesquelles les évènements popuphiding et popuphidden peuvent ne pas se déclencher étant donné que les éléments concernés ne sont plus disponibles. Si des actions spécifiques doivent être effectués à ce moment-là, il vaut mieux utiliser un évènement unload.

- -

Test de l'état d'ouverture d'un menu

- -

Pour vérifier si un menu est ouvert, vérifiez l'état de sa propriété open. Si celle-ci vaut true, le menu est ouvert, sinon il est fermé.

- -
var open = un_menu.open;
-
- -

Ouverture d'un popup

- -

Pour ouvrir des popups de menu utilisant les balises menu, button et toolbarbutton, consultez Ouverture d'un menu plus haut.

- -

Les popups attachés à l'aide de l'attribut popup sont ouverts lors d'un clic gauche de la souris par l'utilisateur. Il n'y a pas moyen d'effectuer la même action à partir du clavier, vous devrez donc toujours fournir une manière alternative d'accéder aux fonctionnalités du menu. Cela peut se faire soit en plaçant des commandes alternatives ailleurs dans l'interface, ou en fournissant un raccourci clavier permettant d'ouvrir le menu. Une fois que celui-ci est ouvert, le clavier peut être utilisé pour y naviguer et sélectionner des éléments de la manière habituelle.

- -

Les popups attachés à l'aide de l'attribut context sont ouvert lorsque l'utilisateur effectue une action essayant d'ouvrir un menu contextuel. Cette action diffère selon la plateforme, mais en général il s'agit de cliquer sur l'élément avec le bouton de droite de la souris. Sur les systèmes Macintosh avec un seul bouton, un menu contextuel peut être ouvert soit en maintenant le bouton de la souris enfoncé, soit en appuyant sur la touche Control lors du clic sur le bouton. Sous Windows, le menu contextuel peut également être ouvert à l'aide de la touche menu sur le clavier (Il s'agit de la touche figurant sur de nombreux claviers à côté de la touche Ctrl de droite avec une image de menu) ou en appuyant sur Shift+F10. Pour cette raison, il ne faut pas supposer que l'utilisateur a forcément utilisé la souris pour ouvrir le menu contextuel.

- -
La méthode openPopup
- -

Quel que soit le type de popup, il peut être nécessaire de l'ouvrir programmatiquement. Pour ce faire, utilisez la méthode openPopup du popup. Cette méthode peut être utilisée pour tout type de popup, qu'il s'agisse d'un menupopup, d'un panel ou un tooltip, même ceux qui peuvent être ouverts par d'autres moyens, par exemple un popup attaché par l'attribut context.

- -

La méthode openPopup peut recevoir six paramètres qui sont utilisés pour indiquer comment et où le popup doit être positionné. Ils seront décrits plus loin. La méthode openPopup est définie comme suit :

- -
void openPopup(in DOMElement anchorElement,
-               in String position,
-               in long x,
-               in long y,
-               in boolean estMenuContextuel,
-               in boolean ecraserAttributs);
-
- -

Tout d'abord, un exemple :

- -
un_popup.openPopup(ancre, "after_start", 0, 0, false, false);
-
- -

Cet exemple ouvrira un popup situé juste sous un autre élément référencé par « ancre ». Ceci émula la façon dont s'ouvre un menu, où « ancre » serait l'élément menu. Il est possible d'utiliser la méthode openPopup avec un menu, cependant il est plus facile de définir simplement l'attribut open du menu à true, ce qui gèrera le positionnement du menu à votre place. Notez que si l'attribut open s'applique au menu ou bouton parent, la méthode openPopup s'applique à l'élément menupopup.

- -

L'ancre d'un popup est le nœud élément à côté duquel le popup sera affiché. Par exemple, pour qu'un popup apparaisse à côté d'un bouton, passez une référence au bouton comme premier paramètre de la méthode openPopup. Dans cet exemple, le popup sera ouvert relativement à l'élément du document.

- -
un_popup.openPopup(document.documentElement, "end_before", 0, 0, false, false);
-
- -

Le second paramètre d'openPopup est la position par rapport à l'ancre, qui indique de quel côté de celle-ci le popup sera positionné. Par exemple, la valeur « end_before » utilisée dans l'exemple précédent indique de placer le côté gauche du popup le long du bord droit de l'élément d'ancrage, avec les deux bords supérieurs alignés. Cela peut être compliqué à comprendre, consultez alors Positionnement d'un popup qui décrit ce processus plus en détail et fournit des images montrant les valeurs possibles et la façon dont serait aligné un popup pour chacune des valeurs.

- -

Les troisième et quatrième paramètres d'openPopup sont des décalages x et y. Après le positionnement initial du popup, il est possible de l'ajuster en spécifiant des valeurs non nulles pour ces décalages. Ceci permet de contrôler précisément le popup tout en étant toujours ancré à un élément particulier. Des valeurs positives peuvent être utilisées pour ajuster le popup vers la droite ou vers le bas et des valeurs négatives pour l'ajuster vers la gauche ou le haut.

- -

Dans l'exemple qui suit, le popup est ancré sous un élément, tout en étant décalé de 10 pixels vers la droite et de 2 pixels vers le haut.

- -
un_popup.openPopup(ancre, "after_start", 10, -2, false, false);
-
- -

Notez que l'ancre et les décalages spécifient uniquement la position lors de l'ouverture du popup. Si l'ancre est déplacée ou supprimée tandis que le popup est ouvert, le popup ne suivra pas. Cependant, il est possible de déplacer un popup pendant qu'il est ouvert, consultez Déplacement et redimensionnement d'un popup.

- -

Le cinquième paramètre d'openPopup, isContextMenu, indique si le popup est ouvert comme un menu contextuel. Passez true si c'est le cas et false dans le cas contraire. Le valeur à passer devrait être évidente selon l'endroit dont vous appelez openPopup. Notez que le même menu peut être ouvert des deux manières, ce paramètre n'influe donc pas sur la manière dont le popup apparaît. Ce qu'il modifie est la manière dont le focus et la sélection du menu sont gérés. Tant que vous passez la bonne valeur par rapport à la situation, il n'est pas très important de connaître les différences particulières entre les deux cas.

- -

Cependant, vous pouvez voir l'effet de ce paramètre en utilisant les marque-pages de Firefox. Essayez d'ouvrir un sous-menu des marque-pages et notez comme la sélection change toujours lorsque la souris est déplacé vers d'autres menus, et la manière dont le sous-menu est fermé lorsque la souris le quitte. Ouvrez à présent un menu contextuel sur le même marque-page et remarquez que les autres menus ne sont pas affectés par le mouvement de la souris. C'est cette différence qui est gérée par le paramètre isContextMenu.

- -

Enfin, le dernier paramètre de la méthode openPopup, ecraserAttributs indique si les attributs placés sur l'élément popup écrasent les paramètres fournis. Ceci permet à un popup d'utiliser un comportement particulier de positionnement avec les attributs position, left et top à la place. Plus de détails sur ces attributs peuvent être trouvés dans la section Positionnement d'un popup.

- -
Popups non ancrés avec openPopup
- -

Si le premier paramètre de la méthode openPopup vaut null, un popup non ancré est créé. Dans ce cas, le deuxième argument de positionnement n'est pas utilisé et une chaîne vide peut être utilisée. Voici un exemple :

- -
un_popup.openPopup(null, "", 60, 50, false, false);
-
- -

Un popup non ancré utilise les décalages x et y, dans ce cas 60 et 50 sont des décalages depuis le coin de la fenêtre ou du cadre. De cette manière, un popup peut être positionné relativement à la fenêtre plutôt qu'à un nœud spécifique. Par exemple, il peut être intéressant d'ouvrir un popup à la position courante de la souris au moment du clic. Voici un exemple de gestionnaire d'évènement de clic de souris :

- -
function mouseClicked(event)
-{
-  var panel = document.getElementById("un-panel");
-  panel.openPopup(null, "", event.clientX, event.clientY, false, false);
-}
-
- -
La méthode openPopupAtScreen
- -

Une seconde méthode, openPopupAtScreen, peut être utilisée pour ouvrir un popup et le placer à des coordonnées précise sur l'écran. Dans ce cas, le popup n'est pas ancré à un élément et apparaît simplement à l'emplacement spécifié par les paramètres x et y passés à cette méthode.

- -
void openPopupAtScreen(in long x, in long y, in boolean estMenuContextuel);
-
- -

Le paramètre ecraserAttributs indique qu'un menu contextuel est ouvert et fonctionne de la même façon que pour la méthode openPopup. Dans l'exemple qui suit, le popup est ouvert à la position horizontale 100 et à la position verticale 200 :

- -
popup.openPopupAtScreen(100, 200, false);
-
- -

Notez que si les coordonnées fournies auraient conduit à un popup situé partiellement ou totalement hors de l'écran, celui-ci sera déplacé de manière à être totalement visible, et pourra être redimensionné si nécessaire.

- -

Fermeture d'un popup avec la méthode hidePopup

- -

Un menu popup est fermé par l'utilisateur en appuyant sur la touche Échap ou en cliquant quelque part en dehors du popup.

- -

Pour fermer des menupopups utilisant les balises menu, button et toolbarbutton, consultez Fermeture d'un menu plus haut.

- -

Pour fermer un menu depuis un script utilisez sa méthode hidePopup. Elle ne prend aucun paramètre.

- -
popup.hidePopup();
-
- -

Déterminer si un popup est ouvert

- -

Pour les menus, il est possible de vérifier la propriété open de l'élément menu, button ou toolbarbutton. Si celle-ci vaut true, le menu est ouvert.

- -

Pour les autres types de popups, la propriété state peut être examinée à cette fin. Elle est disponible pour tous les types de popups, qu'il s'agisse de menus, panels ou de tooltips. Lorsqu'un menu est fermé, la propriété state aura la valeur closed, tandis que pour un popup visible, elle aura la valeur open. Cette propriété est en lecture seule et s'applique aux éléments menupopup, panel ou tooltip.

- -

La propriété state peut également avoir deux autres valeurs, utilisées lorsqu'un popup est en train de passer de l'état ouvert à l'état fermé et vice versa. Lorsqu'un popup est en train de s'ouvrir, la propriété state a une valeur de showing tandis qu'elle aura une valeur hiding au cours de de sa fermeture. La première se rencontrera au cours de l'évènement popupshowing, tandis que la seconde se rencontrera au cours de l'évènement popuphiding.

- -

Par exemple, la propriété state pourrait être utilisée pour déterminer si un panel est déjà ouvert. Si c'est le cas, vous pouvez vouloir éviter de manipuler l'interface utilisateur de la fenêtre principale, étant donné que l'utilisateur ne sera plus directement en train d'interagir avec elle.

- -
 
diff --git a/files/fr/archive/mozilla/xul/guide_des_popups/panels/index.html b/files/fr/archive/mozilla/xul/guide_des_popups/panels/index.html deleted file mode 100644 index 8ebe7d2ea8..0000000000 --- a/files/fr/archive/mozilla/xul/guide_des_popups/panels/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Panneaux (panels) -slug: Archive/Mozilla/XUL/Guide_des_popups/Panels -tags: - - Guide Popup XUL - - XUL -translation_of: Archive/Mozilla/XUL/PopupGuide/Panels ---- -

Un panneau est une fenêtre contextuelle pouvant gérer n'importe quel type de contenu. On l'utilise notamment comme support d'affichage temporaire pour la sélection ou la saisie de données.

- -

L'élément panel

- -

L'élément panel sert à créer des panneaux permettant d'afficher une série d'éléments quelconques, placés comme enfants de l'élément "panel". Par exemple, le "panel" suivant affichera une boîte de texte pour entrer un nom. Notez que le panneau n'est pas placé dans un fichier distinct et est placé à l'intérieur d'une autre fenêtre.

- -
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
-<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<button label="Details" type="panel">
-  <panel id="search-panel">
-    <label control="name" value="Name:"/>
-    <textbox id="name"/>
-  </panel>
-</button>
-
-</window>
- -

De nombreux panneaux seront associés à un bouton, comme dans cet exemple. Lorsque vous appuyez sur le bouton, le panneau est ouvert. En cliquant à l'extérieur du panneau ou en appuyant sur "Escape" (échappe), le panneau se ferme. Vous pouvez également placer un bouton de fermeture dans le panneau qui le fermera avec un script, si vous le souhaitez. Lorsque vous voulez associer un panneau à un bouton, placez l'élément <panel> directement à l'intérieur de l'élément button .  Vous devez aussi déterminer un attribut "type" avec la valeur "panel", ou le bouton se comportera comme un bouton régulier.

- -

Le panneau contextuel apparaît par défaut dans le coin en haut à gauche, juste sous le bord inférieur du bouton, comme le ferait un menu. Toutefois, la position peut être modifiée. Pour plus d'informations sur la position du panneau contextuel, voir Positioning Popups (en).

- -

Seuls les boutons (et les boutons de la barre d'outils) ont ce comportement automatique d'ouverture de la fenêtre contextuelle lorsqu'ils sont pressés. Pour d'autres types d'éléments, vous devrez utiliser une technique différente comme dans l'exemple suivant :

- -
label value="Search" popup="search-panel"/>
-
-<panel id="search-panel">
-  <label control="search" value="Terms:"/>
-  <textbox id="search"/>
-</panel>
- -

Image:Popupguide-panel.png

- -

Pour attacher un panneau à un élément qui n'est pas un bouton, par exemple pour qu'il s'ouvre lors de l'appui sur une étiquette, utilisez l'attribut popup. Celui-ci doit être défini comme l'id d'un "panel" au sein du même document. Lors d'un clic gauche sur l'élément portant l'attribut popup, le panneau correspondant s'affichera. Par exemple, pour attacher le panneau contextuel défini plus haut à une étiquette, utilisez le code qui suit :

- -
<label value="Rechercher" popup="search-panel"/>
-
- -

Le résultat est un bouton de recherche ouvrant un panneau permettant d'entrer des termes de recherche. Celui-ci apparaîtra avec son coin supérieur gauche à la position de la souris. Dans ce cas, il serait sans doute préférable qu'il apparaisse plutôt en dessous de l'étiquette. L'attribut position peut être utilisé afin de contrôler le placement du panneau contextuel. Voici un exemple complet :

- -
<panel id="search-panel" position="after_start">
-  <label control="search" value="Termes :"/>
-  <textbox id="search"/>
-</panel>
-
-<label value="Recherche" popup="search-panel"/>
-
- -

L'attribut position a été ajouté à l'élément "panel" avec la valeur « after_start ». Le résultat en est que le panel n'est plus affiché là où l'on a cliqué, mais le long du bord inférieur de l'étiquette. Pour plus d'informations concernant cet attribut et les autres valeurs possibles, consultez Positionnement des popups (en).

- -

Il est également possible d'ouvrir un panneau comme un menu contextuel à l'aide de l'attribut context à la place de l'attribut "popup". Celui-ci fonctionne de la même manière qu'un menu contextuel, à part qu'on utilise un élément "panel" à la place d'un élément "menupopup". Consultez Menus contextuels (en) pour plus de détails à ce sujet.

- -

Ouverture d'un panneau par script

- -

Un panneau, comme toutes les fenêtres contextuelles, dispose d'une méthode openPopup pouvant être utilisée pour son ouverture à partir d'un script. Par exemple, le code suivant ouvrirait un panneau sous un bouton :

- -
panel.openPopup(button, "after_start", 0, 0, false, false);
- -

De manière similaire, la méthode openPopupAtScreen ouvrira un panneau à une position précise de l'écran. Pour plus de détails concernant ces deux méthodes, consultez Ouverture et fermeture de fenêtres contextuelles.

- -

Fermeture d'un panneau

- -

Un panneau est fermé automatiquement lorsque l'utilisateur clique en dehors de celui-ci. Il est cependant courant d'avoir un élément comme un bouton de fermeture dans le panneau. Par exemple, dans le panneau de recherche présenté plus haut, nous pourrions ajouter un bouton fermant le panneau lorsqu'il est utilisé :

- -
<script>
-function doSearch() {
-  document.getElementById("search-panel").hidePopup();
-}
-</script>
-
-<toolbarbutton label="Rechercher" type="panel">
-  <panel id="search-panel" position="after_start">
-    <textbox id="search"/>
-    <button label="Rechercher" oncommand="doSearch();"/>
-  </panel>
-</toolbarbutton>
- -

Dans cet exemple, la fonction doSearch est appelée lors d'un clic sur le bouton "Rechercher". La fonction identifie le panneau contextuel et appelle sa méthode hidePopup. Naturellement, cette fonction devrait également comprendre des instructions pour lancer l'opération de recherche proprement dite.

- -

Interdiction de fermeture automatique des panneaux

- -

Un panneau contextuel est fermé  par un clic de l'utilisateur en-dehors de celui-ci ou l'appui sur la touche Échap. C'est la manière habituelle, pour un utilisateur, d'annuler l'opération. Il peut également être utile de placer un bouton d'annulation ou de fermeture dans le panneau, en particulier si celui-ci est grand et contient un grand nombre de contrôles.

- -

Cependant parfois, vous voudrez peut-être que le panneau reste ouvert même si l'utilisateur clique en dehors de celui-ci. C'est notamment utile pour créer des panneaux d'outils flottants. Pour ce faire, positionnez son attribut noautohide sur "true" (vrai).

- -
<panel id="search-panel" noautohide="true">
-  <textbox id="search"/>
-  <button label="Rechercher" oncommand="doSearch();"/>
-  <button label="Annuler" oncommand="this.parentNode.hidePopup();"/>
-</panel>
-
- -

Comme le panneau ne peut plus être fermé en cliquant ailleurs, il doit toujours fournir un moyen de le faire. Dans cet exemple, on a ajouté un bouton Annuler.

- -

Focus sur les panneaux

- -

Les éléments se trouvant dans des panneaux peuvent recevoir le focus de la souris, et l'élément ayant le focus peut changer en appuyant sur la touche Tab. Lors de l'ouverture d'un panneau contextuel, si un élément de la fenêtre principale a le focus, il le perd et reçoit un évènement blur. Bien qu'aucun élément du panneau ne reçoive le focus par défaut, l'utilisateur peut le donner à son premier élément en appuyant sur la touche Tab. Si vous désirez qu'il se trouve sur un élément particulier par défaut, lors de l'ouverture de panneau, modifiez le focus dans le gestionnaire d'évènement popupshown. Par exemple, pour que la boîte de texte de l'exemple précédent reçoive le focus initial :

- -
<panel id="search-panel" onpopupshown="document.getElementById('search').focus()">
-
- -

Pour désactiver l'ajustement du focus à l'ouverture d'un panneau, définissez l'attribut noautofocus à true :

- -
<panel noautofocus="true">
-
- -

Dans ce cas, le focus restera sur l'élément de la fenêtre principale qui avait le focus à l'ouverture du panneau. Notez que cela maintient également le focus à l'intérieur du panneau quand celui-ci est fermé.

- -

Lors de la fermeture d'un panneau, l'élément au sein de celui-ci, qui avait éventuellement le focus, le perd. L'élément qui avait le focus avant l'ouverture de la fenêtre contextuelle, quel qu'il soit, le récupère. Vous pouvez empêcher la suppression du focus avec l'attribut noautofocus  défini à true. De plus, l'attribut XULAttr("norestorefocus") }}  positionné sur true empêche le retour du focus sur l'élément qui l'avait avant. Normalement, seul ce dernier sera défini si besoin.

- -

Ce processus de perte du focus à l'ouverture et à la fermeture d'un popup se déroule après le déclenchement des évènements popupshowing ou popuphiding, ce qui signifie que si ces évènements sont annulés, le focus ne sera pas perdu.

- -
-

Letting panels be dragged by grabbing the background

- Requires Gecko 7.0(Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) -
(faire glisser les panneaux sur l'arrière-plan) - -

À partir de Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), vous pouvez utiliser l'attribut backdrag pour créer des panneaux que l'utilisateur peut faire glisser (cliquer/glisser) n'importe où sur l'arrière-plan. C'est un simple attribut  booléen, avec lequel vous pouvez activer cette fonctionnalité comme ceci :

- -
panel backdrag="true">
diff --git a/files/fr/archive/mozilla/xul/hbox/index.html b/files/fr/archive/mozilla/xul/hbox/index.html deleted file mode 100644 index f0168f08d0..0000000000 --- a/files/fr/archive/mozilla/xul/hbox/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: hbox -slug: Archive/Mozilla/XUL/hbox -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/hbox ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément conteneur pouvant contenir un nombre illimité d'éléments enfants. C'est l'équivalent de l'élément box. -

Vous trouverez plus d'informations dans le Tutoriel XUL.

-

Exemple

-
<!-- Deux boutons à droite -->
-<hbox>
-  <spacer flex="1"/>
-  <button label="Connection"/>
-  <button label="Ping" />
-</hbox>
-
-

Attributs

- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
box, vbox -
diff --git "a/files/fr/archive/mozilla/xul/ic\303\264nes_de_fen\303\252tre/index.html" "b/files/fr/archive/mozilla/xul/ic\303\264nes_de_fen\303\252tre/index.html" deleted file mode 100644 index f851d2c685..0000000000 --- "a/files/fr/archive/mozilla/xul/ic\303\264nes_de_fen\303\252tre/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Icônes de fenêtre -slug: Archive/Mozilla/XUL/Icônes_de_fenêtre -tags: - - API_du_toolkit - - Extensions - - XPInstall - - XUL -translation_of: Archive/Mozilla/XUL/Window_icons ---- -

-

À partir de Firefox 1.5, Thunderbird 1.5 et XULRunner 1.8, il est possible de spécifier une icône pour une fenêtre XUL en plaçant des fichiers nommés <tt>mafenetre.ico</tt> (pour Windows) et <tt>mafenetre.xpm</tt> (Linux), où mafenetre est l'id de l'élément <window> de la fenêtre à laquelle vous voulez attacher l'icône, dans le sous-dossier <tt>chrome/icons/default</tt> de votre paquet installable. -

Ces icônes prendront le pas sur les fichiers d'icônes globaux, qui sont situés dans <tt>app_dir/chrome/icons/default</tt>. -

-

Anciennes versions

-

Pour gérer les anciennes applications comme Firefox 1.0, vous devrez copier manuellement les icônes dans <tt>app_dir/chrome/icons/default</tt> au premier démarrage (exemple de code). -

diff --git a/files/fr/archive/mozilla/xul/index.html b/files/fr/archive/mozilla/xul/index.html deleted file mode 100644 index 14c9dad0bd..0000000000 --- a/files/fr/archive/mozilla/xul/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: XUL -slug: Archive/Mozilla/XUL -tags: - - XUL -translation_of: Archive/Mozilla/XUL ---- -
Tutoriel XUL
-Ce tutoriel vous guidera dans vos premiers pas avec XUL. Il est tiré de la version anglaise de XULPlanet.
- -
XUL est le langage d'interface utilisateur pour Mozilla basé sur XML. Il permet de construire des applications multiplatesformes riches en fonctionnalités, pouvant être ou non connectées à Internet. Ces applications peuvent facilement être personnalisées au niveau du texte, des graphiques et de leur mise en page et peuvent ainsi être facilement rhabillées selon leur destination et être fournies en plusieurs langues. Les développeurs Web qui sont déjà familiarisés avec le HTML dynamique peuvent apprendre le XUL rapidement et être opérationnels immédiatement.
- -

Vous pouvez essayer une démonstration XUL grâce à cette table périodique des éléments XUL.

- - - - - - - - -
-

Documentation

- -
-
Référence des éléments XUL
-
Consultez également la documentation en français sur xulfr ainsi que la documentation de MDC sur prefwindow.
-
- -
-
Les contrôles XUL
-
Une liste rapide de tous les contrôles XUL disponibles.
-
- -
-
Vulgarisation XUL
-
Un tutoriel clair sur le développement de modules complémentaire Mozilla.
-
- -
-
Présentation de XUL
-
Décrit les fonctionnalités et composants clés de XUL.
-
- -
-
Guide sur les menus et popups
-
Un guide sur l'utilisation des menus et panneaux popup.
-
- -
-
Comment réussir vos gabarits
-
Un guide détaillé sur les gabarits XUL (templates), qui sont un moyen de générer du contenu depuis une source de données. (à migrer vers XUL:Réussir vos gabarits)
-
- -
-
Adaptation des applications XUL pour Firefox 3.0
-
Une liste des changements dans Firefox 3 qui affectent les développeurs XUL.
-
- -
-
Adaptation des applications XUL pour Firefox 2.0
-
Une liste des changements dans Firefox 2 qui affectent les développeurs XUL.
-
- -
-
Adaptation des applications XUL pour Firefox 1.5
-
Une liste des changements dans Firefox 1.5 qui affectent les développeurs XUL.
-
- -

Tous les articles…

- -
-
- 		-

Communauté

- -
    -
  • Voir les forums de Mozilla…
    • -
- -

- - - -

Outils

- - - -

Tous les outils…

- -

Sujets liés

- -
-
JavaScript, XBL, CSS, RDF, Extensions, XULRunner
-
-
- -

Categories

- -

Interwiki Language Links

diff --git "a/files/fr/archive/mozilla/xul/introduction_\303\240_xul/index.html" "b/files/fr/archive/mozilla/xul/introduction_\303\240_xul/index.html" deleted file mode 100644 index 27d8f9b784..0000000000 --- "a/files/fr/archive/mozilla/xul/introduction_\303\240_xul/index.html" +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Introduction à XUL -slug: Archive/Mozilla/XUL/Introduction_à_XUL -tags: - - Aide_pour_les_éditeurs_de_MDC - - Traduction_en_cours - - XUL -translation_of: Archive/Mozilla/XUL/Introduction_to_XUL ---- -

Introduction

- -

Mozilla possède des "chromes" configurables et téléchargeables, ce qui veut dire que la position et même la présence ou l'absence d'un contrôle dans la fenêtre principale n'est pas figé dans l'application, mais chargé à partir de fichier d'interface IU (IU = Interface utilisateur). En effet, la plupart des fenêtres (principale et/ou dialogue) de Mozilla sont décrites en utilisant ce mécanisme. XUL, pour "XML User Interface Language" (Langage d'Interface Utilisateur format XML), est le nom pour le langage dans lequel ces descriptions d'interface sont faites.

- -

Les fichiers de "chrome" sont affichés et gérés par le même moteur que celui qui affiche les pages HTML dans le navigateur. Les description d'IU font très bon ménage avec le HTML 4. Le XUL est une application de XML. En effet, c'est juste du XML avec des éléments spécifiques qui peuvent être implémentés dans du HTML.

- -

Termes

- -

"XPFE" est le terme qu'utilise l'organisation Mozilla pour décrire la Cross Platform Front End du Navigateur de Mozilla, car X et C semblent être semblables si on les tape longtemps et fortement avec un marteau (humour américain...). Le but est de construire des applications cross-platform  comme des navigateurs et des clients de courrier électronique à partir d'un kit d'outils créés pour cet usage. L'intention n'est pas d'implanter un framework générique pour application toutes plateformes confondues. Cela a déjà été fait, et au prix d'un grand travail. Nous voulons fournir un sous-ensemble de fonctionnalités inter-plateformes approprié pour construire des applications réseau comme les navigateurs, améliorant les fonctionnalités inter-plateformes déjà inclues dans Gecko, le moteur de rendu HTML de Mozilla.

- -

Le terme de "cross-platform UI" est quelque peu trompeur. Les créateurs d'interface devront être capable de créer des IU qui marcheront sur des multiples plate-formes. Mais des descriptions claires d'UI, qui prennent en considération de nombreuses plateformes, diffèrent sur l'idée de la place correcte des divers contrôles comme les boutons de dialogue qui nécessitent des spécifications par rapport à chaque système. Un spécification XUL est seulement compatible à hauteur d'un "degree". Les designers d'UI ainsi que les ingénieurs doivent maintenir séparément les versions spécifiques à chaque plateforme.

- -

"XPToolkit" est plutôt synonyme de XPFE. Même si l'ancien terme parait plus expressif que l'autre, et pourtant ce n'est pas son remplaçant ; personne ne sais pourquoi il existe les deux.

- -

"XUL" déjà présenté, est une application du XML utilisé pour décrire la présentation de la plupart des fenêtres dans le navigateur Mozilla, incluant aussi la fenêtre principale, la fenêtre du navigateur.

- -

Portée

- -

Cet article n'est pas une tentative d'expliquer les exigences systèmes. Nous n'avons pas de document actuel sur les "exigences" . XPToolkit Architecture est un meilleur moyen pour comprendre de telles choses. Cet article contient une courte introduction à l'architecture Mozilla front-end , en se concentrant sur la tache de construire des UIs. Il est, comme toujours, incomplet.

- -

Les applications Mozilla seront construites de "petits" composants comme des boutons "dialogue" et des dossiers de boite de réception mail, que l'on appelle couramment "widgets." Avec un widget, le dessin et les interactions utilisateur sont complètement sous le contrôle d'un widget indépendant, et faites quand le widget est construit. Le placement relatif des widgets, leurs interactions entre les uns les autres, et en option une partie de leur configuration, sera contrôlé par un UI layout spécifié dans un script dont la structure est définie dans les documents connexes et présents.

- -

Les widgets sont des morceaux of the application largely self-contained, generally corresponding to a rectangle of window real estate. Widgets will generally live grouped in separate, dynamically loaded libraries. A widget may expect to own a piece of a window (a toolbar or toolbar set), or it may be expected to work within or without a window (menubars, depending on the platform). It may not be a part of the application UI at all.

- -

Widgets will have predefined behaviour, set at compilation. Buttons will respond to the mouse; toolbars will act as containers for buttons. The effect a widget will have on its application will be defined as a combination of predefined application behaviour and linkage between the widgets. This linkage can be accomplished by including JavaScript in the XUL, or by application code which walks the content model after it has been built from XUL, and hooks up event listeners. Generally a real application will use some combination of the two.

- -

Applications, for instance, will have preconceived notions of what to do when they receive an "open file" command. An "open" button is simply a button. It will send its command to the application for processing, generally using some simple JavaScript for linkage.

- -

We are at first primarily concerned with the obvious UI components: toolbars, menus and dialogs. Conceptually, the XUL language will allow someone with a text editor, given a package of components which can work together, the ability to put together an application by specifying something like this (for an application on an OS using menubars across the top of its applications' windows):

- -
main window containing
-  menubar area at top across width of window containing
-    menubar (and its contents)
-  toolbar area below menubar across width of window containing
-    main toolbar (and its contents)
-  application-specific content area below toolbar area
-
diff --git a/files/fr/archive/mozilla/xul/label/index.html b/files/fr/archive/mozilla/xul/label/index.html deleted file mode 100644 index fab098ae82..0000000000 --- a/files/fr/archive/mozilla/xul/label/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: label -slug: Archive/Mozilla/XUL/label -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/label ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Cet élément est utilisé pour fournit un label pour un élément de contrôle. Si l'utilisateur clique sur le label, le focus se placera sur le contrôle associé, tel que spécifié avec l'attribut control. -

Pour plus d'informations, consultez le Tutoriel XUL. -

-
Attributs -
accesskey, control, crop, disabled, href, value -
-
Propriétés -
accessKey, accessibleType, control, crop, disabled, value -
-
Classes de style -
header, indent, monospace, plain, small-margin, text-link
-

Exemples

-
Image:XUL_ref_label.png
-
<label value="Email address" control="email"/>
-<textbox id="email"/>
-
-

Attributs

-

-

- -
accesskey
-
Type : caractère -
Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut label de l'élément.
-

Exemple

-
Image:XUL_ref_accesskey_attr.png
-
<vbox>
-  <label value="Entrez votre nom" accesskey="e" control="myName"/>
-  <textbox id="myName"/>
-  <button label="Annuler" accesskey="n"/>
-  <button label="OK" accesskey="O"/>
-</vbox>
-
-

Voir également

-

Les attributs label et acceltext -

-
-
- -
-
- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
-
- -
- -

Propriétés

-

-

-
accessKey -
Type : caractère -
Obtient et définit la valeur de l'attribut accesskey. -
-


-

- -
-
-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
-
crop -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut crop. -
- -
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Classes de style

-

Les classes suivantes peuvent être utilisées pour styler l'élément. Ces classes doivent être utilisées plutôt que de changer directement le style de l'élément, car elles s'intègreront plus naturellement dans le thème sélectionné par l'utilisateur. -

-
header
-
A class used for headings. Typically, this will cause the text to appear bold.
-
-
-
indent
-
This class causes the text to be indented on its left side.
-
-
-
monospace
-
This class causes the text to be displayed in a monospace font.
-
-
-
plain
-
This class causes the element to be displayed with no border or margin.
-
-
-
small-margin
-
This class causes the text to be displayed with a smaller margin.
-
-
-
text-link
-
Labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or Enter key press. Labels will appear like a link (blue and underlined).
-
- -

Sujets liés

-
Éléments -
description -
-
Attributs -
label -
-
Interfaces
nsIAccessibleProvider, nsIDOMXULLabelElement -
-

Notes d'utilisation

-

N'oubliez pas que l'élément label a un attribut « value », contrairement au HTML où les boutons et cases à cocher utilisent label="valeur" comme attribut. -

-
<label label="Une légende"/> <-- incorrect -->
-<label value="Une légende"/>
-
-<label value="Cliquez sur le bouton"/>
-<button label="Un bouton"/>
-<checkbox label="Une décision" value="1"/>
-
-
-
diff --git "a/files/fr/archive/mozilla/xul/les_contr\303\264les_xul/index.html" "b/files/fr/archive/mozilla/xul/les_contr\303\264les_xul/index.html" deleted file mode 100644 index 0277692977..0000000000 --- "a/files/fr/archive/mozilla/xul/les_contr\303\264les_xul/index.html" +++ /dev/null @@ -1,550 +0,0 @@ ---- -title: Les contrôles XUL -slug: Archive/Mozilla/XUL/Les_contrôles_XUL -tags: - - XUL -translation_of: Archive/Mozilla/XUL/XUL_controls ---- -

Le tableau suivant propose le listing des contrôles utilisateurs mis à disposition par XUL. Reportez-vous à la section Tutoriel XUL pour un guide pas-à-pas sur leurs utilisations et Référence XUL pour les informations de référence.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<button> - -

Un bouton pouvant être pressé par l'utilisateur.

- - 
-<button label="Save" accesskey="S"/>
-
- -

 

- - - 		Image:Controlsguide-button.png
<button type="menu"> -

Un bouton ayant un menu déroulant attaché. Appuyez sur le bouton pour ouvrir le menu.

- - 
-<button type="menu" label="View">
-  <menupopup>
-    <menuitem label="List"/>
-    <menuitem label="Details"/>
-  </menupopup>
-</button>
-
- - - 		Image:Controlsguide-button-menu.png
<button type="menu-button"> -

Un bouton associé à un bouton-flèche qui ouvre un menu déroulant. Le bouton-flèche est séparé du bouton principal. Contrairement au le type 'menu', des actions différentes peuvent être effectués en cliquant sur le bouton ou sur le bouton-flèche.

- - 
-<button type="menu-button" label="New">
-  <menupopup>
-    <menuitem label="New Document"/>
-    <menuitem label="New Image"/>
-  </menupopup>
-</button>
-
- - - 		Image:Controlsguide-button-menu-button.gif
<checkbox> -

Un contrôle pouvant être coché ou non ; typiquement utilisé pour créer des options pouvant être activées ou désactivées.

- - 
-<checkbox label="Show Toolbar Labels" checked="true"/>
-
- - - 		Image:Controlsguide-checkbox.png
<colorpicker> -

Un sélectionneur de couleurs pouvant être utilisé pour sélectionner une couleur.

- - 
-<colorpicker color="#FF0000"/>
-
- - - 		Image:Controlsguide-colorpicker.png
<colorpicker type="button"> -

Un bouton qui affiche la couleur sélectionnée. Lorsqu'on clique sur le bouton, un sélecteur de couleurs spécialisé s'affiche.

- - 
-<colorpicker type="button" color="#CC0080"/>
-
- - - 		Image:Controlsguide-colorpicker-button.png
<datepicker> - - -

Une série de boîtes de texte qui peuvent être utilisées pour saisir une date.

- - 
-<datepicker value="2007/03/26"/>
-
- - - 		Image:Controlsguide-datepicker.png
<datepicker type="grid"> - - -

Un sélecteur de date qui affiche un calendrier pour la sélection.

- - 
-<datepicker type="grid" value="2007/02/20"/>
-
- - - 		Image:Controlsguide-datepicker-grid.png
<datepicker type="popup" > - - -

Un sélecteur de date qui affiche une série de boîtes de texte pour la saisie et un bouton pour afficher un sélecteur de date sous forme de calendrier.

- - 
-<datepicker type="popup" value="2008/08/24"/>
-
- - - 		 
<description> -

L'élément description permet d'ajouter un texte descriptif.

- - 
-<description>
-  Sélectionner l'heure du début de l'évènement
-</description>
-
- - - 		Image:Controlguide-description.png
<groupbox> -

Un élément groupbox regroupe plusieurs contrôles d'interface usager et affiche une étiquette à l'aide de l'élément caption.

- - 
-<groupbox>
-  <caption label="Network"/>
-</groupbox>
-
- - - 		Image:Controlguide-groupbox.png
<image> -

Une image spécifiée par une URL.

- - 
-<image src="start.png"/>
-
- - - 		Image:Controlguide-image.png
<label> -

L'élément label permet d'ajouter une étiquette à côté d'un champ de saisie.

- - 
-<label control="volume" value="Volume:"/>
-
- - - 		Image:Controlguide-label.png
<listbox> -

Une liste permet la sélection d'items textuels.

- - 
-<listbox>
-  <listitem label="Chocolat"/>
-  <listitem label="Bonbon"/>
-</listbox>
-
- - - 		Image:Controlguide-listbox.png
<menulist> -

Une zone combinée est un contrôle texte attaché à une liste déroulante. La valeur est sélectionnée à l'aide de la liste déroulante. Aussi connu sous les noms de menulist, combobox et <select> en HTML.

- - 
-<menulist>
-  <menupopup>
-    <menuitem label="Lions" value="l"/>
-    <menuitem label="Tigres" value="t"/>
-    <menuitem label="Ours" value="o"/>
-  </menupopup>
-</menulist>
-
- - - 		Image:Controlguide-menulist.png
<menulist editable="true"> -

Une zone combinée éditable est comme une zone combinée standard, excepté que la valeur actuellement sélectionnée est affichée dans une zone de saisie où l'on peut  sélectionner directement une valeur, ou l'on peut entrer des valeurs absentes de la liste.

- - 
-<menulist editable="true">
-  <menupopup>
-    <menuitem label="Elephants" value="Elephants"/>
-    <menuitem label="Kangaroos" value="Kangaroos"/>
-    <menuitem label="Bats" value="Bats"/>
-  </menupopup>
-</menulist>
-
- - - 		Image:Controlguide-menulist-editable.png
<progressmeter> -

Une barre de progression est utilisée pour montrer la progression d'une tâche lente.

- - 
-<progressmeter value="40"/>
-
- - - 		Image:Controlguide-progressmeter.png
<radio> -

Un bouton radio est utilisé pour sélectionner uniquement une seule valeur d'une liste d'options à la fois.

- - 
-<radiogroup>
-  <radio label="Light" value="light"/>
-  <radio label="Heavy" value="heavy"/>
-</radiogroup>
-
- - - 		Image:Controlguide-radio.png
<richlistbox> -

The richlistbox displays a list of items where one or more may selected. Unlike the listbox which is designed to display only text, the richlistbox may display any type of content.

- - 
-<richlistbox>
-  <richlistitem>
-    <image src="happy.png"/>
-  </richlistitem>
-  <richlistitem>
-    <image src="sad.png"/>
-  </richlistitem>
-  <richlistitem>
-    <image src="angry.png"/>
-  </richlistitem>
-</richlistbox>
-
- - - 		Image:Controlguide-richlistbox.png
<scale> - - -

A scale displays a bar with a thumb that may be slid across the bar to select between a range of values.

- - 
-<scale min="1" max="10"/>
-
- - - 		Image:Controlguide-scale.png
<textbox> -

A textbox which allows a single line of text to be entered.

- - 
-<textbox value="firefox"/>
-
- - - 		Image:Controlguide-textbox.png
<textbox multiline="true"> -

A textbox which allows multiple lines of text to be entered.

- - 
-<textbox multiline="true"/>
-
- - - 		Image:Controlguide-textbox-multiline.png
<textbox type="autocomplete"> -

A textbox which provides a dropdown showing matches that would complete what the user types. The user can select one to have it filled into the textbox.

- - 
-<textbox type="autocomplete" autocompletesearch="history"/>
-
- - - 		 
<textbox type="number"> - - -

A textbox for entering numbers. Two arrow buttons are displayed for cycling through values.

- - 
-<textbox type="number" min="1" max="20"/>
-
- - - 		Image:Controlguide-textbox-number.png
<textbox type="password"> -

A textbox that hides the characters typed, used for entering passwords.

- - 
-<textbox type="password"/>
-
- - - 		Image:Controlguide-textbox-password.png
<timepicker> - - -

A timepicker displays a set of textboxes for entering a time.

- - 
-<timepicker value="12:05"/>
-
- - - 		Image:Controlguide-timepicker.png
<toolbarbutton> -

A button that is displayed on a toolbar.

- - 
-<toolbarbutton label="Reload"/>
-
- - - 		Image:Controlguide-toolbarbutton.png
<toolbarbutton type="menu"> -

A button that is displayed on a toolbar with a drop down menu attached to it.

- - 
-<toolbarbutton type="menu" label="Show">
-  <menupopup>
-    <menuitem label="Toolbars"/>
-    <menuitem label="Status Bar"/>
-  </menupopup>
-</toolbarbutton>
-
- - - 		 
<toolbarbutton type="menu-button"> -

A button on a toolbar that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.

- - 
-<toolbarbutton type="menu-button" label="Open">
-  <menupopup>
-    <menuitem label="Open Changed Files"/>
-    <menuitem label="Open All"/>
-  </menupopup>
-</toolbarbutton>
-
- - - 		 
<tree> -

A tree displays a hierarchy of items in multiple columns.

- - 
-<tree>
-  <treecols>
-    <treecol label="Name" flex="1"/>
-    <treecol label="Size" flex="1"/>
-  </treecols>
-  <treechildren>
-    <treeitem>
-      <treerow>
-        <treecell label="Popcorn"/>
-        <treecell label="Large"/>
-      </treerow>
-    </treeitem>
-    <treeitem>
-      <treerow>
-        <treecell label="Root Beer"/>
-        <treecell label="Small"/>
-      </treerow>
-    </treeitem>
-  </treechildren>
-</tree>
-
- - - 		Image:Controlguide-tree.png
diff --git a/files/fr/archive/mozilla/xul/les_joies_de_xul/index.html b/files/fr/archive/mozilla/xul/les_joies_de_xul/index.html deleted file mode 100644 index 0d713c2334..0000000000 --- a/files/fr/archive/mozilla/xul/les_joies_de_xul/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Les joies de XUL -slug: Archive/Mozilla/XUL/Les_joies_de_XUL -tags: - - XUL -translation_of: Archive/Mozilla/XUL/The_Joy_of_XUL ---- -

Public visé : Les développeurs d'application et les chefs développeurs qui cherchent à mieux comprendre XUL et pourquoi il est à la base de la plate-forme Mozilla.

- -

Introduction

- -

XUL (prononcez « zoul ») est le langage d'interface utilisateur de Mozilla basé sur XML permettant de développer des applications multiplate-formes riches en fonctionnalités et pouvant tourner connectée ou non à Internet. Ces applications sont facilement modifiables avec des textes, graphismes, et mises en page alternatifs, de telle manière qu'elles peuvent être facilement marquées ou localisées pour différents marchés. Les développeurs Web déjà familiers avec le HTML Dynamique (DHTML) pourront développer tout des suite des applications .

- -

Ce document décrira les irrésistibles raisons pour les développeurs d'application de choisir XUL et la technologie Mozilla pour développer des applications multiplate-formes. Cette même enquête donnera des explications suffisantes des motivations de Mozilla dans le développement XUL et pourquoi la plate-forme de Mozilla est basée dessus. Les fonctionnalités clé et les avantages de XUL seront explorés suivis d'un tour d'horizon des technologies soutenues par Mozilla. Enfin, une petite étude de cas d'un logiciel calendrier écrit avec XUL montrera les avantages de développer une application avec Mozilla.

- -

Fonctionnalités clés et avantages

- - - - - - - - - - - - - - - - - - - - - - - - -
Langage de balisage puissant basé sur les widgetsLe but de XUL est de construire des applications multiplate-formes, a contrario du DHTML qui est conçu pour développer des pages Web. C'est pour cela que XUL est orienté vers des artefacts présents dans les applications comme les fenêtres, les labels et les boutons, au lieu d'être orienté vers les pages, niveaux de titre, et liens hypertextes. -

En fait, beaucoup de développeurs investissent des efforts considérables pour obtenir un résultat comparable dans leurs applications Web DHTML au prix de la complexité, des performances, et du respect des standards.

-
Basé sur des standards existantsXUL est un langage basé sur le standard XML 1.0 du W3C. Les applications écrites en XUL aussi sont basées sur d'autres standards du W3C tels que HTML 4.0; les Feuilles de Style en Cascade (CSS) 1 et 2; le modèle de document objet (DOM) niveaux 1 et 2; JavaScript 1.5, incluant ECMA-262 Edition 3 (ECMAscript); XML 1.0. -

Mozilla.org va plus loin en cherchant à obtenir une standardisation du W3C pour l'eXtensible Binding Language (XBL) (voir Technologies supportées, ci-dessous).

-
Portabilité de la plate-forme -

À l'instar du HTML, XUL est conçu pour être indépendant de la plate-forme, rendant ainsi les applications facilement portables à tous les systèmes d'exploitation sur lesquels Mozilla tourne. Si l'on considère le large éventail de plate-formes qui supportent actuellement Mozilla, cela peut être une des caractéristiques intéressantes de XUL en tant que technologie pour développer des applications.

- -

Puisque XUL donne une abstraction des composants de l'interface utilisateur, il tient la promesse d'écrire une fois, exécuter partout (NdT : write-once, run anywhere pour les anglophones). L'interface de toutes les applications phares de Mozilla (navigateur, client de messagerie, carnet d'adresse, etc.) est écrite en XUL avec un seul code fonctionnant sur toutes les plate-formes Mozilla.

-
Séparation de l'aspect et de la logique de l'applicationL'un des inconvénients majeurs de la plupart des application Web est le lien étroit entre les éléments de l'interface et la logique de l'application. Cela pose un problème qui n'est pas insignifiant lorsque que l'on travaille en équipe, parce que les compétences requises pour développer ces deux aspects appartiennent souvent à des personnes différentes. -

XUL donne une séparation clair entre la définition de l'application et la logique de programmation ("contenu" constitué de XUL, XBL, et JavaScript), la présentation (« skin » constitué de CSS et d'images), et les labels spécifiques au langage (« locale » constitué de DTDs, paquets de chaînes de caractères dans des fichiers .properties). La mise en page et l'apparence des applications XUL peuvent être transformées indépendamment de la définition de l'application et de sa logique. Encore mieux, l'application peut être localisée en différentes langues et régions indépendamment de sa logique ou de sa présentation.

- -

Ce degré de séparation permet d'avoir des applications plus faciles à maintenir par les programmeurs et rapidement modifiables pour les designers et les localisateurs.

- -

La superposition de ces deux activités indépendantes est plus facilement coordonnée qu'avec des applications basées sur du HTML, avec un impact moindre sur la stabilité générale et la qualité du système.

-
Modification, localisation ou marquage facilesUn autre bénéfice très pratique de la séparation entre ce que XUL fournit et la logique, la présentation, et le « texte du langage » est la facilité d'adaptation pour différents clients ou groupes d'utilisateurs. -

Un développeur peut maintenir une base de code primaire pour son application et adapter le logo et l'appellation pour chacun de ses clients en distribuant plusieurs skins. Une application qui est écrite et déployée avec une interface utilisateur en anglais peut être traduite en français pour le même client. Bien que ces changements soit extensifs et affectent la plus grande partie (sinon la totalité) de l'application, ils sont aussi isolés les uns des autres par la définition même de XUL et le partage de la logique de l'application entre toutes les versions personnalisées.

-
- -

Technologies supportées

- -

Il y a beaucoup d'autres technologies introduites par Mozilla qui complètent XUL pour développer des applications web multiplate-formes.

- - - - - - - - - - - - - - - - - - - - -
XBL -

L'eXtensible Bindings Language (XBL) est un langage de balisage qui définit de nouveaux éléments spéciaux, ou bindings pour les widgets XUL. Avec XBL, les développeurs peuvent définir du contenu nouveau pour les widgets XUL, ajouter des gestionnaires d'événement additionnel à un widget XUL, et ajouter aussi de nouvelles propriétés et méthodes d'interface. En bref, XBL octroie au développeur la capacité d'étendre XUL en modifiant des balises existantes ou en créant ses propres balises.

- -

En utilisant XBL, les développeurs peuvent facilement façonner des interfaces utilisateur de widgets personnalisées, comme des compteurs de progression, des menus pop-up fantaisistes, et même des barres d'outils et des formulaires de recherche. Ces composants personnalisés sont utilisable dans les applications XUL en spécifiant la balise personnalisée et les attributs qui y sont associés.

-
OverlaysLes overlays sont des fichiers XUL utilisés pour décrire un contenu supplémentaire pour l'interface utilisateur. Ils sont un mécanisme général pour ajouter des composants additionnels à l'interface, remplacer des portions de code XUL, sans avoir à modifier toute l'interface, et réutiliser des parties spécifiques de l'interface utilisateur. -

Ils fournissent un mécanisme puissant de personnalisation et d'extension des applications existantes parce qu'ils fonctionnent de deux manières complémentaires mais très différentes. Dans un sens, les overlays sont identiques aux fichiers include qu' on trouve dans d'autres langages parce qu'une application peut spécifier qu'un overlay est présent dans sa définition. Mais les overlays peuvent également être spécifié extérieurement, permettant à un concepteur de le superposer à une application sans modifier le code source original.

- -

En pratique, cela permet aux développeurs de maintenir un code unique pour une application donnée, puis d'y appliquer une marque particulière ou pour inclure des fonctionnalités spécifiques pour un client particulier, le tout dans un code complètement indépendant. Cela conduit à une solution globale qui est plus facile et moins coûteux de maintenir à long terme.

- -

Un bénéfice supplémentaires des overlays pour les développeurs de logiciels qui désirent ajouter des fonctionnalités aux logiciels Mozilla qu'ils désirent garder sous licence propriétaire. La Netscape Public License (NPL) et la Mozilla Public License (MPL) exige des développeurs qui modifie le code original (le code source fournit pas Mozilla) de fournir le code source de ces modifications à leurs clients. Les overlays peuvent être utilisés pour ajouter des fonctionnalités aux logiciels Mozilla sans contaminer le code source libre original avec des portions de code propriétaire.

-
XPCOM/XPConnectXPCOM et XPConnect sont des technologies complémentaires qui permettent l'intégration de bibliothèques externes dans les applications XUL. -

XPCOM, qui signifie Cross Platform Component Object Model, est un framework d'écriture de logiciels multiplate-forme et modulaires. Les composants XPCOM peuvent être écrit en C, C++ et JavaScript, et ils peuvent être utilisés avecs C, C++, JavaScript, Python, Java et Perl.

- -

XPConnect est une technologie qui autorise des interactions entre XPCOM et JavaScript. XPConnect permet aux objets JavaScript d'accéder de façon transparente aux objets XPCOM et de les manipuler. Elle permet également aux objets JavaScript de présenter des interfaces conformes à XPCOM qui pourront être appelées par des objets XPCOM.

- -

Ensemble, XPCOM et XPConnect permettent aux développeurs de créer des applications XUL qui applications exigent la puissance de traitement brut de langages compilés (C/C++) ou l'accès au système d'exploitation sous-jacent.

-
XPInstallXPInstall, l'utilitaire d'installation multiplate-forme de Mozilla, fournit un moyen standard d'empaquetage des composants d'un application XUL avec un script d'installation que Mozilla peut télécharger et exécuter. -

XPInstall permet aux utilisateurs d'installer sans effort une nouvelle applications XUL depuis Internet ou depuis des serveurs intranet d'entreprises. Pour installer une nouvelle application, l'utilisateur n'a besoin que de cliquer sur un lien hypertexte dans une page Web ou dans un courriel et d'accepter l'installation du nouveau paquetage.

-
- -

todo: describe cool toolkit and xul runner features

- -

Étude de cas : Un logiciel de calendrier pour Mozilla

- -

This mini case study describes how OEone Corporation (http://www.oeone.com) integrated its Calendar application with the core Mozilla product. The Calendar application is comprised of a XUL front end and an XPCOM component that leverages libical, a native library written in C, for date operations and calendar data storage. The Calendar was initially developed exclusively for Linux but was successfully ported to both Macintosh and Windows within a week.

- -

XUL provides a rich set of UI components. The user interface for the Calendar is written entirely in XUL, JavaScript, and CSS, which is a testament to the power and flexibility of this application building framework. It uses simple XUL components like boxes, grids, and stacks to compose views for the weeks, days, and months. The initial implementation of Calendar did not exploit XBL because the developers involved were not experienced with this complementary technology. But future plans for the Calendar include converting many of these UI components to XBL widgets to further simplify their implementation.

- -

XPCOM/XPConnect enables integration of native code. A fully-featured open source calendar library, libical (http://www.softwarestudio.org/libical/), was harvested for the Calendar project. Libical is an Open Source implementation of the IETF's iCalendar Calendaring and Scheduling protocols. (RFC 2445, 2446, and 2447). It parses iCal components and provides a C API for manipulating the component properties, parameters, and subcomponents. The library was initially integrated by writing an XPCOM wrapper to adapt its interface. To improve performance a greater proportion of application logic was migrated from JavaScript to the XPCOM component.

- -

Separation of presentation from logic makes applications resilient to change. The original UI implementation made extensive use of graphics for rendering the month and week views. Later, as the developers learned more about XUL and the implementation of the basic components matured, better ways were identified to simplify the composition of the UI. This lead to increased screen drawing performance and reduced memory and disk footprint requirements of the application. The UI for the month and week views was practically rewritten while the application logic remained virtually unchanged.

- -

Porting XUL applications to other platforms is trivial. The Calendar originated as a Linux application with no consideration given to porting it to other platforms. But later, when the original developer (OEone Corporation) contributed the source to the Mozilla project, the Calendar had to be migrated to the Windows and Macintosh platforms. The UI for the XUL application required zero porting effort because it worked with almost no alteration on both new platforms. Similarly, since the UI code is written in JavaScript, the interaction logic worked with no effort. However, since the libical library is written in C, more significant effort was required to migrate this component to the other platforms.

- -

Fortunately an implementation of the libical library was already available for Macintosh so, with the cross platform nature of XPCOM, a Macintosh calendar implementation was working within a few days. However, there was no existing Win32 port available, so developers had to undertake a porting effort to migrate libical to Windows. Within a week this too was complete and Mozilla had a working calendar for all three primary platforms: Linux, Macintosh, and Windows.

- -

XPInstall is easy for developers and for users. The Calendar is not a planned deliverable for the Mozilla 1.0 release, and therefore is not included as a standard component in regular nightly and milestone release builds. Developers who are equipped with the software and knowledge required to compile Mozilla can set an optional environment variable and build the Calendar themselves. But many Mozilla users who want to try out the Calendar can't afford this luxury. Using XPInstall it was easy for the developers to package a version of Calendar that could be installed directly over the Internet by clicking a link.

- -

Conclusion

- -

Mozilla, grâce à XUL, fournit une technologie irrésistible pour le développement d'applications multiplate-forme avec une même interface utilisateur riche et une expérience utilisateur identique aux applications natives. Les designers ayant l'expérience de la conception d'applications Web basées sur les technologies standard du W3C peuvent tirer parti de cette expérience directement du navigateur au bureau.

- -

Avant qu'Internet ne devienne le moyen privilégié de distribution des applications aux utilisateurs utilisant des architectures matérielles et logicielles disparates, ce problème était réglé à l'aide d'outils client-serveur multiplate-forme. Mais ces offres, invariablement propriétaires, coûtaient très cher en développeurs et le montant des licences vous liait solidement pour un certain temps au vendeur. Mozilla fournit much of the same value que ces outils multiplate-forme, mais avec des licences libres.

- -

As a rapidly maturing cross platform technology, XUL peut combler un vide intéressant pour des technologies telles que Java J2EE et Microsoft. Net qui sont axés sur l'activation de l'accès au réseau pour les objets distribués. La logique d'application dynamique peut bénéficier largement d'un niveau de présentation de l'interface utilisateur qui est basée sur des normes, des scripts, extensibles et de même distribuables sur Internet.

- -

XUL réduit la distinction entre les applications de bureau et le navigateur Internet, car il est bien implanté dans deux mondes. Certaines applications Web bénéficieront d'une migration vers XUL du fait de l'accroissement des capacités de l'interface utilisateur, d'une implémentation cohérente de la spécification à travers les plate-formes supportées et de l'accès aux ressources natives telles que les bibliothèques partagées et les fichiers locaux du système.

- -

Que vous désiriez migrer une application Web existante vers une application desktop, que cherchiez une technologie qui vous permettra facilement de porter vos applications sur différentes plate-formes ou que vous vouliez intégrer vos propres fonctionnalités au navigateur, XUL mérite d'être sérieusement considéré.

- -

Références

- -
    -
  1. Documentation XUL sur MDC, comprenant Tutoriel XUL et la Référence XUL
    2. -
  2. Overlays XUL
    3. -
  3. Documentation XBL: XBL introduction, XBL reference
    4. -
  4. Documentation XPCOM
    5. -
  5. Documentation XPConnect (Composants scriptables). Voir également XPConnect (Scriptable Components) (en)
    6. -
  6. Documentation sur les Extensions, comprenant un tutoriel de prise en main Construire une extension
    7. -
  7. Projet Calendar sur Mozilla .org (en)
    8. -
diff --git a/files/fr/archive/mozilla/xul/listbox/index.html b/files/fr/archive/mozilla/xul/listbox/index.html deleted file mode 100644 index 7f793d544a..0000000000 --- a/files/fr/archive/mozilla/xul/listbox/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: listbox -slug: Archive/Mozilla/XUL/listbox -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/listbox ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Cet élément est utilisé pour créer une liste d'éléments dont l'un ou plusieurs d'entre-eux peuvent être sélectionnés. Une listbox peut contenir plusieurs colonnes. Différentes méthodes permettent aux éléments de la liste d'êtres récupérés et modifiés. -

Vous pouvez spécifier le nombre de lignes à afficher dans la liste à l'aide de l'attribut rows. Les lignes supplémentaires peuvent être consultées avec une barre de défilement. Une listbox est supposée contenir des éléments listitem. Toutes les lignes dans la listbox ont la même hauteur, qui est la hauteur du plus grand élément de la liste. Si vous désirez créer une liste dont les hauteurs de lignes sont variables, ou avec du contenu non textuel, utilisez plutôt l'élément richlistbox. -

Consultez le Tutoriel XUL pour plus d'informations.

-
Attributs -
disabled, disableKeyNavigation, preference, rows, seltype, suppressonselect, tabindex, value -
-
Propriétés -
accessibleType, currentIndex, currentItem, disabled, disableKeyNavigation, itemCount, listBoxObject, selectedCount, selectedIndex, selectedItem, selectedItems, selType, tabIndex, value -
-
Méthodes -
addItemToSelection, appendItem, clearSelection, ensureElementIsVisible, ensureIndexIsVisible, getIndexOfFirstVisibleRow, getIndexOfItem, getItemAtIndex, getNumberofVisibleRows, getRowCount, getSelectedItem, insertItemAt, invertSelection, moveByOffset, removeItemAt, removeItemFromSelection, scrollToIndex, selectAll, selectItem, selectItemRange, suppressOnSelect, timedSelect, toggleItemSelection -
-

Exemple

-
Image:XUL_ref_listbox.png
-
 <listbox id="theList">
-   <listitem label="Rubis"/>
-   <listitem label="Émeraude"/>
-   <listitem label="Saphir" selected="true"/>
-   <listitem label="Diamant"/>
- </listbox>
-
-

Attributs

-

-

- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
-
- -
preference -
Type : id d'élément -
Connecte l'élément à une préférence (élément preference) correspondante. Cet attribut n'a d'effet qu'utilisé au sein d'un prefwindow. La valeur de la préférence sera mise à jour pour correspondre à la propriété value de l'élément. -
- - -
-
- -
rows -
Type : entier -
Le nombre de lignes à afficher dans l'élément. Si l'élément contient plus que ce nombre de lignes, une barre de défilement apparaitra afin que l'utilisateur puisse consulter les autres lignes. Pour obtenir le nombre réel de lignes dans l'élément, utilisez la méthode getRowCount. -
- - -
-
- -
-
- seltype<magic name="\"PAGENAME\"/"></magic>
-
- Type : - - une des valeurs ci-dessous -
-
- Utilisé pour indiquer si les sélections multiples sont permises.
-
- -

<magic name="\"PAGENAME\"/">Des cellules individuelles peuvent être sélectionnées.</magic><magic name="\"PAGENAME\"/"> Des lignes sont sélectionnées, cependant, l'indicateur de sélection n'est visible que sur le texte de la colonne principale.</magic>

-
-
- -
-
- suppressonselect
-
- Type : - - booléen -
-
- Si cet attribut n'est pas spécifié, un évènement select est déclenché dès qu'un élément est sélectionné, que ce soit par l'utilisateur ou par l'appel d'une des méthodes de sélection. Si la valeur de l'attribut est true, l'évènement select n'est jamais déclenché.
-
-
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

-

-

-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
-
currentItem -
Type : élément listitem -
Renvoie le dernier élément sélectionné dans la liste de sélection, ce qui n'est utile que dans une liste à sélection multiple. -
- -
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
-
-
listBoxObject -
Type : nsIListBoxObject -
L'objet nsIListBoxObject derrière la liste de sélection. Cette propriété est en lecture seule. La plupart des fonctionnalités de la liste de sélection sont déjà disponibles directement dans l'élément listbox, il sera donc rarement nécessaire d'utiliser cet objet de boîte directement. -
- -
-
-
-
selectedIndex -
Type : entier -
Renvoie l'indice de l'élément actuellement sélectionné. Un élément peut être sélectionné en assignant son indice à cette propriété. En lui assignant -1, tous les éléments seront désélectionnés. -
- -
-
-
selectedItem -
Type : élément -
Conserve l'élément actuellement sélectionné. Si aucun élément n'est sélectionné, sa valeur sera null. Vous pouvez sélectionner un élément en définissant cette valeur. Un évènement select sera envoyé à cet élément lorsqu'il est sélectionné en modifiant cette propriété, la propriété selectedIndex, ou par l'utilisateur. -
- -
-
-
-
-
- selType<magic name="\"PAGENAME\"/"></magic>
-
- Type : - - chaîne de caractères -
-
- Obtient et définit la valeur de l'attribut seltype.
-
- -
-
-
-
- suppressOnSelect
-
- Type : - - booléen -
-
- Obtient et définit la valeur de l'attribut suppressonselect.
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

- - - - - - -
-

Héritées de XUL element
- blur, click, doCommand, focus, getElementsByAttribute getElementsByAttributeNS

Héritées de DOM element
- addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

- -
- - - - - - - - - -
getRowCount() -
Type de retour : entier -
Renvoie le nombre total de lignes dans l'élément, quel que soit le nombre de lignes affichées. -
- - - - - - - -
selectAll() -
Type de retour : aucune valeur renvoyée -
Sélectionne tous les éléments. Un évènement de sélection est envoyé après l'exécution de la sélection. -
-
selectItem( item ) -
Type de retour : aucune valeur renvoyée -
Désélectionne tous les éléments actuellement sélectionnés, puis sélectionne l'élément donné en argument. Un évènement de sélection est envoyé après l'exécution de la sélection. -
-
selectItemRange( startItem, endItem) -
Type de retour : aucune valeur renvoyée -
Sélectionne tous les éléments compris entre les deux éléments donnés en paramètre, y compris les éléments de début et de fin. Tous les autres éléments sont désélectionnés. Cette méthode n'a aucun effet sur les listes en mono-sélection. Un évènement de sélection est envoyé après l'exécution de la sélection. -
-
timedSelect( item, timeout ) -
Type de retour : aucune valeur renvoyée -
Sélectionne un élément spécifié par l'argument item après un nombre de millisecondes définit par l'argument timeout. Tous les autres éléments sont désélectionnés. -
-
toggleItemSelection( item ) -
Type de retour : aucune valeur renvoyée -
Modifie l'état de sélection de l'élément spécifié. S'il est sélectionné, il devient désélectionné. S'il est désélectionné, il devient sélectionné. Les autres éléments de la liste ne sont pas affectés et ils conservent leur état de sélection. -
- -

Sujets liés

-
Éléments -
listcell, listcol, listcols, listhead, listheader, listitem -
-
Interfaces -
nsIAccessibleProvider, nsIDOMXULMultiSelectControlElement -
-
-
diff --git a/files/fr/archive/mozilla/xul/listitem/index.html b/files/fr/archive/mozilla/xul/listitem/index.html deleted file mode 100644 index cf28e6472b..0000000000 --- a/files/fr/archive/mozilla/xul/listitem/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: listitem -slug: Archive/Mozilla/XUL/listitem -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/listitem ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Une ligne unique dans un élément listbox. Le texte de la ligne est généralement spécifié soit en utilisant des éléments listcell, soit en plaçant un attribut label directement sur l'élément listitem. Par défaut, contient un seul élément listcell du type et de la classe appropriées pour le listitem. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value -
-
Propriétés -
accessKey, accessible, checked, control, crop, current, disabled, image, label, selected, tabIndex, value -
-
Classes de style -
listitem-iconic
-

Exemples

-
Image:XUL_ref_listbox.png
-
 <listbox id="laListe">
-   <listitem label="Rubis"/>
-   <listitem label="Émeraude"/>
-   <listitem label="Saphir" selected="true"/>
-   <listitem label="Diamant"/>
- </listbox>
-
-

Attributs

-

-

- -
accesskey
-
Type : caractère -
Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut label de l'élément.
-

Exemple

-
Image:XUL_ref_accesskey_attr.png
-
<vbox>
-  <label value="Entrez votre nom" accesskey="e" control="myName"/>
-  <textbox id="myName"/>
-  <button label="Annuler" accesskey="n"/>
-  <button label="OK" accesskey="O"/>
-</vbox>
-
-

Voir également

-

Les attributs label et acceltext -

-
-
- -
-
- checked
-
- Type : - - booléen -
-
- Indique si l'élément est coché ou non.
-
- Utilisez hasAttribute() pour déterminer si cet attribut est défini plutôt que getAttribute().
- Pour les boutons, l'attribut type doit etre mis à checkbox ou à radio pour qu'un effet soit perceptible.
-
-
-
- -
command -
Type : id d'élément -
Défini à la valeur de l'id d'un élément command observé par l'élément. -
- - -
-
- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
image -
Type : URL d'une image -
L'URL de l'image devant apparaître sur l'élément. Si cet attribut est vide ou omis, aucune image n'apparaîtra. La position de l'image est déterminée par les attributs dir et orient. -
- - -
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
preference -
Type : id d'élément -
Connecte l'élément à une préférence (élément preference) correspondante. Cet attribut n'a d'effet qu'utilisé au sein d'un prefwindow. La valeur de la préférence sera mise à jour pour correspondre à la propriété value de l'élément. -
- - -
-
- -
selected -
Type : booléen -
Indique si l'élément est sélectionné ou non. Cette valeur est en lecture seule. Pour changer la sélection, utilisez la propriété selectedIndex ou selectedItem de l'élément conteneur. -
- - -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

-

-

-
accessKey -
Type : caractère -
Obtient et définit la valeur de l'attribut accesskey. -
-


-

- -
-
-
accessible -
Type : nsIAccessible -
Renvoie l'objet d'accessibilité pour l'élément. -
-


-

- -
-
-
-
-
crop -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut crop. -
- -
-
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
image -
Type : URL d'image -
Obtient et définit la valeur de l'attribut image. -
- -
-
-
label -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut label. -
- -
-
- -
-
selected
-
Type : booléen
-
La valeur de cette propriété est true si cet élément est sélectionné, ou false s'il ne l'est pas. Cette propriété est en lecture seule.
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Classes de style

-

Les classes suivantes peuvent être utilisées pour styler l'élément. Il convient de les utiliser plutôt que de changer le style de l'élément directement afin de s'intégrer plus naturellement dans le thème choisi par l'utilisateur. -

-
listitem-iconic
-
Use this class to have an image appear on the listitem. Specify the image using the image attribute.
-
- -

Sujets liés

-
Éléments -
listbox, listcell, listcol, listcols, listhead, listheader -
-
Interfaces -
nsIAccessibleProvider, nsIDOMXULSelectControlItemElement -
-
-
diff --git a/files/fr/archive/mozilla/xul/menu/index.html b/files/fr/archive/mozilla/xul/menu/index.html deleted file mode 100644 index 2a78b15497..0000000000 --- a/files/fr/archive/mozilla/xul/menu/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: menu -slug: Archive/Mozilla/XUL/menu -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/menu ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément, tout à fait semblable à un élément button, qui est placé dans un élément menubar. Lorsque l'utilisateur clique sur l'élément menu, le menupopup enfant du menu sera affiché. Cet élément est également utilisé pour créer des sous-menus. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value -
-
Propriétés -
accessibleType, accessKey, command, control, crop, disabled, image, itemCount, label, labelElement, menupopup, open, parentContainer, selected, tabIndex, value -
-
Méthodes -
appendItem, getIndexOfItem, getItemAtIndex, insertItemAt, removeItemAt -
-

Exemple

-
  <menubar id="sample-menubar">
-    <menu id="file-menu" label="Fichier">
-      <menupopup id="file-popup">
-        <menuitem label="Nouveau"/>
-        <menuitem label="Ouvrir"/>
-        <menuitem label="Enregistrer"/>
-        <menuseparator/>
-        <menuitem label="Quitter"/>
-      </menupopup>
-    </menu>
-    <menu id="edit-menu" label="Édition">
-      <menupopup id="edit-popup">
-        <menuitem label="Annuler"/>
-        <menuitem label="Rétablir"/>
-      </menupopup>
-    </menu>
-  </menubar>
-
-

Attributs

-

-

- -
-
- acceltext
-
- Type : chaîne de caractères
-
- Texte qui apparaîtra à côté du label d'un menu pour indiquer la touche de raccourci (accélérateur) à utiliser pour invoquer la commande. Si cette valeur est définie, elle écrase une clé assignée dans l'attribut key. Cet attribut ne s'applique pas aux menus directement sur la Barre de menus (menubar).
-
-
-
- -
accesskey
-
Type : caractère -
Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut label de l'élément.
-

Exemple

-
Image:XUL_ref_accesskey_attr.png
-
<vbox>
-  <label value="Entrez votre nom" accesskey="e" control="myName"/>
-  <textbox id="myName"/>
-  <button label="Annuler" accesskey="n"/>
-  <button label="OK" accesskey="O"/>
-</vbox>
-
-

Voir également

-

Les attributs label et acceltext -

-
-
- -
allowevents -
Type : booléen -
Si défini à true, les évènements sont passés aux enfants de l'élément. Dans le cas contraire, ils ne sont passés qu'à l'élément lui-même. -
- - -
-
- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
-
- -
open -
Type : booléen -
Pour les boutons de type menu, l'attribut open est défini à true lorsque le menu est ouvert. L'attribut open n'est pas présent si le menu est fermé. -
- - -
-
- -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

-

-

-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
-
-
-
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

- - - - - - -
-

Héritées de XUL element
- blur, click, doCommand, focus, getElementsByAttribute getElementsByAttributeNS

Héritées de DOM element
- addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

- -
- - - - - - -

Sujets liés

-
Éléments -
menubar, menuitem, menulist, menupopup, menuseparator -
-
Interfaces -
nsIAccessibleProvider, nsIDOMXULContainerElement, nsIDOMXULContainerItemElement, nsIDOMXULSelectControlItemElement -
diff --git a/files/fr/archive/mozilla/xul/menubar/index.html b/files/fr/archive/mozilla/xul/menubar/index.html deleted file mode 100644 index 2d8a8d5660..0000000000 --- a/files/fr/archive/mozilla/xul/menubar/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: menubar -slug: Archive/Mozilla/XUL/menubar -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/menubar ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un conteneur généralement destiné à des éléments menu. Sur les ordinateurs Macintosh, la barre de menus est affichée en haut de l'écran, et tous les éléments non liés à un menu dans l'élément menubar seront ignorés. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
grippyhidden, statusbar -
-
Propriétés -
accessibleType, statusbar -
-

Exemples

-
Image:XUL_ref_menu.png
-
<menubar id="sample-menubar">
-  <menu id="action-menu" label="Action">
-    <menupopup id="action-popup">
-      <menuitem label="Nouvelle"/>
-      <menuitem label="Enregistrer" disabled="true"/>
-      <menuitem label="Fermer"/>
-      <menuseparator/>
-      <menuitem label="Quitter"/>
-    </menupopup>
-  </menu>
-  <menu id="edit-menu" label="Édition">
-    <menupopup id="edit-popup">
-      <menuitem label="Annuler"/>
-      <menuitem label="Rétablir"/>
-    </menupopup>
-  </menu>
-</menubar>
-
-

Attributs

-

-

- -
-
- -
- -

Propriétés

-
-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
menu, menuitem, menulist, menupopup, menuseparator -
-
Interfaces -
nsIAccessibleProvider -
-
-
diff --git a/files/fr/archive/mozilla/xul/menuitem/index.html b/files/fr/archive/mozilla/xul/menuitem/index.html deleted file mode 100644 index 813096fdc4..0000000000 --- a/files/fr/archive/mozilla/xul/menuitem/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: menuitem -slug: Archive/Mozilla/XUL/menuitem -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/menuitem ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un choix particulier dans un élément menupopup. Il agit de manière semblable à un élément button, mais est affiché dans un menu. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
acceltext, accesskey, allowevents, autocheck, checked, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value -
-
Propriétés -
accessibleType, accessKey, command, control, crop, disabled, image, label, labelElement, parentContainer, selected, tabIndex, value -
-
Classes de style -
menuitem-iconic, menuitem-non-iconic -
-

Exemple

-
<menu id="edit-menu" label="Edit">
-  <menupopup id="edit-popup">
-     <menuitem label="Undo"/>
-     <menuitem label="Redo"/>
-  </menupopup>
-</menu>
-
-

Attributs

-

-

- -
-
- acceltext
-
- Type : chaîne de caractères
-
- Texte qui apparaîtra à côté du label d'un menu pour indiquer la touche de raccourci (accélérateur) à utiliser pour invoquer la commande. Si cette valeur est définie, elle écrase une clé assignée dans l'attribut key. Cet attribut ne s'applique pas aux menus directement sur la Barre de menus (menubar).
-
-
-
- -
accesskey
-
Type : caractère -
Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut label de l'élément.
-

Exemple

-
Image:XUL_ref_accesskey_attr.png
-
<vbox>
-  <label value="Entrez votre nom" accesskey="e" control="myName"/>
-  <textbox id="myName"/>
-  <button label="Annuler" accesskey="n"/>
-  <button label="OK" accesskey="O"/>
-</vbox>
-
-

Voir également

-

Les attributs label et acceltext -

-
-
- -
allowevents -
Type : booléen -
Si défini à true, les évènements sont passés aux enfants de l'élément. Dans le cas contraire, ils ne sont passés qu'à l'élément lui-même. -
- - -
-
- -
-
- -
-
- checked
-
- Type : - - booléen -
-
- Indique si l'élément est coché ou non.
-
- Utilisez hasAttribute() pour déterminer si cet attribut est défini plutôt que getAttribute().
- Pour les boutons, l'attribut type doit etre mis à checkbox ou à radio pour qu'un effet soit perceptible.
-
-
- -
Note : si l'attribut checked est défini à true, et que sa valeur est rendue persistante avec l'attribut persist, Mozilla ne pourra pas conserver cette valeur lorsque l'élément menuitem est désélectionné suite au bug 15232. Pour contourner ceci, définissez l'attribut autocheck à false, puis définissez programmatiquement l'attribut checked lorsque l'utilisateur clique sur l'élément, et définissez-le à false au lieu de retirer l'attribut (c'est-à-dire qu'il faut faire menuitem.setAttribute("checked", "false") au lieu de menuitem.removeAttribute("checked")) lorsque l'utilisateur désélectionne le menuitem, car une valeur à false masquera correctement la marque cochée et conservera son état invisible.
-
- -
command -
Type : id d'élément -
Défini à la valeur de l'id d'un élément command observé par l'élément. -
- - -
-
- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
image -
Type : URL d'une image -
L'URL de l'image devant apparaître sur l'élément. Si cet attribut est vide ou omis, aucune image n'apparaîtra. La position de l'image est déterminée par les attributs dir et orient. -
- - -
-
- -
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
-
- -
selected -
Type : booléen -
Indique si l'élément est sélectionné ou non. Cette valeur est en lecture seule. Pour changer la sélection, utilisez la propriété selectedIndex ou selectedItem de l'élément conteneur. -
- - -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
-
- -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

-
-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
accessKey -
Type : caractère -
Obtient et définit la valeur de l'attribut accesskey. -
-


-

- -
-
-
-
-
crop -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut crop. -
- -
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
image -
Type : URL d'image -
Obtient et définit la valeur de l'attribut image. -
- -
-
-
label -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut label. -
- -
-
-
-
- -
-
selected
-
Type : booléen
-
La valeur de cette propriété est true si cet élément est sélectionné, ou false s'il ne l'est pas. Cette propriété est en lecture seule.
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Classes de style

-
-
menuitem-iconic
-
Use this class to have an image appear on the menuitem. Specify the image using the image attribute.
-
-
-
menuitem-non-iconic
-
Normally, menuitems have a margin to the left for an image or checkmark. This class may be used to remove this margin so that the menuitem appears on the left edge of the menupopup.
-
- -

Sujets liés

-
Éléments -
menu, menubar, menulist, menupopup, menuseparator
-
Interfaces -
nsIAccessibleProvider, nsIDOMXULContainerItemElement, nsIDOMXULSelectControlItemElement -
-


-

-
-
diff --git a/files/fr/archive/mozilla/xul/menulist/index.html b/files/fr/archive/mozilla/xul/menulist/index.html deleted file mode 100644 index 1f88ef35db..0000000000 --- a/files/fr/archive/mozilla/xul/menulist/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: menulist -slug: Archive/Mozilla/XUL/menulist -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/menulist ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément pouvant être utilisé pour des listes de choix déroulantes. L'utilisateur peut sélectionner l'un des éléments affichés dans la liste menulist. Le choix actuellement sélectionné est affiché sur l'élément menulist lui-même. Pour créer la liste déroulante, ajoutez un élément menupopup dans l'élément menulist, avec les différents choix comme éléments menuitem. L'évènement command peut être utilisé pour exécuter du code lorsque la sélection change dans la liste. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value -
-
Propriétés -
accessibleType, crop, description, disableautoselect, disabled, editable, editor, image, inputField, itemCount, label, menuBoxObject, menupopup, open, selectedIndex, selectedItem, tabIndex, value -
-
Méthodes -
appendItem, contains, getIndexOfItem, getItemAtIndex, insertItemAt, removeAllItems, removeItemAt, select -
-

Exemples

-
  <menulist>
-    <menupopup>
-      <menuitem label="option 1" value="1"/>
-      <menuitem label="option 2" value="2"/>
-      <menuitem label="option 3" value="3"/>
-      <menuitem label="option 4" value="4"/>
-    </menupopup>
-  </menulist>
-
-

Attributs

-

-

- -
accesskey
-
Type : caractère -
Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut label de l'élément.
-

Exemple

-
Image:XUL_ref_accesskey_attr.png
-
<vbox>
-  <label value="Entrez votre nom" accesskey="e" control="myName"/>
-  <textbox id="myName"/>
-  <button label="Annuler" accesskey="n"/>
-  <button label="OK" accesskey="O"/>
-</vbox>
-
-

Voir également

-

Les attributs label et acceltext -

-
-
- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
-
- -
-
- -
image -
Type : URL d'une image -
L'URL de l'image devant apparaître sur l'élément. Si cet attribut est vide ou omis, aucune image n'apparaîtra. La position de l'image est déterminée par les attributs dir et orient. -
- - -
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
oncommand -
Type : code de script -
Ce gestionnaire d'évènement est appelé lorsque la commande est activée. Cela se produit quand un utilisateur sélectionne un élément de menu ou active un raccourci clavier attaché à la commande. -
- - -
-
- -
open -
Type : booléen -
Pour les boutons de type menu, l'attribut open est défini à true lorsque le menu est ouvert. L'attribut open n'est pas présent si le menu est fermé. -
- - -
-
- -
preference -
Type : id d'élément -
Connecte l'élément à une préférence (élément preference) correspondante. Cet attribut n'a d'effet qu'utilisé au sein d'un prefwindow. La valeur de la préférence sera mise à jour pour correspondre à la propriété value de l'élément. -
- - -
-
- -
readonly -
Type : booléen -
Si défini à true, l'utilisateur ne peut pas modifier la valeur de l'élément. Cependant, celle-ci peut toujours être modifiée par un script. -
- - -
-
- -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

-

-

-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
crop -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut crop. -
- -
-
-
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
-
-
-
-
-
label -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut label. -
- -
-
-
-
-
open -
Type : booléen -
Obtient et définit la valeur de l'attribut open. -
- -
-
-
selectedIndex -
Type : entier -
Renvoie l'indice de l'élément actuellement sélectionné. Un élément peut être sélectionné en assignant son indice à cette propriété. En lui assignant -1, tous les éléments seront désélectionnés. -
- -
-
-
selectedItem -
Type : élément -
Conserve l'élément actuellement sélectionné. Si aucun élément n'est sélectionné, sa valeur sera null. Vous pouvez sélectionner un élément en définissant cette valeur. Un évènement select sera envoyé à cet élément lorsqu'il est sélectionné en modifiant cette propriété, la propriété selectedIndex, ou par l'utilisateur. -
- -
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

- - - - - - -
-

Héritées de XUL element
- blur, click, doCommand, focus, getElementsByAttribute getElementsByAttributeNS

Héritées de DOM element
- addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

- -
- - - - - - - - - -

Sujets liés

-
Éléments -
menu, menubar, menuitem, menupopup, menuseparator -
-
Interfaces -
nsIAccessibleProvider, nsIDOMXULMenuListElement -
-
-
diff --git a/files/fr/archive/mozilla/xul/menupopup/index.html b/files/fr/archive/mozilla/xul/menupopup/index.html deleted file mode 100644 index b71b919590..0000000000 --- a/files/fr/archive/mozilla/xul/menupopup/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: menupopup -slug: Archive/Mozilla/XUL/menupopup -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/menupopup ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un conteneur utilisé pour afficher le contenu d'un menu popup. Lorsqu'un menupopup est ouvert, il flotte par dessus la fenêtre et peut s'étendre en dehors de celle-ci. Les menupopups peuvent être utilisés de plusieurs manières : -

-
  1. On peut les placer dans un élément menu, menulist ou button avec l'attribut type défini à « menu » pour créer un popup qui s'ouvrira lors d'un clic sur le bouton ou menu. -
  2. On peut les attacher à n'importe quel élément à l'aide de l'attribut popup. Lors d'un clic gauche sur l'élément, le menupopup sera affiché. -
  3. On peut les attacher à n'importe quel élément à l'aide de l'attribut context. Lors de l'ouverture d'un menu contextuel, le menupopup sera affiché. Un menu contextuel peut être ouvert par un clic droit sur l'élément ou l'appui sur la touche menu du clavier.
-

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
ignorekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top -
-
Propriétés -
accessibleType, popupBoxObject, popup, state -
-
Méthodes -
hidePopup, moveTo, openPopup, openPopupAtScreen, showPopup, sizeTo -
-

Exemples

-

L'exemple suivant montre l'attachement d'un menupopup à un élément menulist. -

-
<menulist>
-  <menupopup>
-    <menuitem label="Mozilla" value="http://mozilla.org"/>
-    <menuitem label="Slashdot" value="http://slashdot.org"/>
-    <menuitem label="Sourceforge" value="http://sf.net"/>
-    <menuitem label="Freshmeat" value="http://freshmeat.net"/>
-  </menupopup>
-</menulist>
-
-

L'exemple qui suit montre l'utilisation d'un menupopup comme menu contextuel d'un élément. Lors d'un clic droit sur le label, le menu sera affiché. -

-
Image:XUL_ref_popup.png
-
<menupopup id="clipmenu">
-  <menuitem label="Couper"/>
-  <menuitem label="Copier"/>
-  <menuitem label="Coller"/>
-</menupopup>
-<label value="Clic droit pour ouvrir un popup" context="clipmenu"/>
-
-

Attributs

-

-

- -
-
- -
left -
Type : entier -
Remplace la position horizontale du popup spécifiée par la méthode showPopup. -
-


-

- - -
-
- -
onpopuphidden -
Type : code de script -
Cet évènement est envoyé à un popup après qu'il a été caché. http://www.langue-fr.net/index/A/apres-que.htm -
- - -
-
- -
onpopuphiding -
Type : code de script -
Cet évènement est envoyé à un popup lorsqu'il est sur le point d'être masqué. -
- - -
-
- -
onpopupshowing -
Type : code de script -
Cet évènement est envoyé à un popup juste avant son ouverture. On l'utilise généralement pour définir dynamiquement le contenu lorsque l'utilisateur demande son affichage. Si ce gestionnaire d'évènement renvoie false, le popup ne s'affichera pas. -
- - -
-
- -
onpopupshown -
Type : code de script -
Cet évènement est envoyé à un popup après son ouverture, de la même manière qu'un évènement onload est envoyé à une fenêtre à son ouverture. -
- - -
-
- -
position -
Type : une des valeurs ci-dessous -
L'attribut position détermine où le popup apparaît par rapport à l'élément sur lequel l'utilisateur a cliqué pour l'invoquer. C'est ce qui permet de placer le popup sur le bord d'un bouton. -
- - - -
-
- -
top -
Type : entier -
Remplace la position verticale du popup spécifiée par la méthode showPopup. -
-


-

- - -
- -

Propriétés

-

-

-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
popupBoxObject -
Type : nsIPopupBoxObject -
Cette propriété en lecture seule conserve le nsIPopupBoxObject qui implémente le popup. Il n'est normalement pas nécessaire d'utiliser cette propriété étant donné que toutes ses fonctions sont disponibles via le popup lui-même. -
- -
-
-
position -
Type : chaîne -
Obtient et définit la valeur de l'attribut position. -
- -
-
-
state -
Type : chaîne -
Cette propriété en lecture seule indique si le popup est ouvert ou non. Quatre valeurs sont possibles : -
- - -
- -

Méthodes

- - - - - - -
-

Héritées de XUL element
- blur, click, doCommand, focus, getElementsByAttribute getElementsByAttributeNS

Héritées de DOM element
- addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

- -
-
hidePopup()
-
Type de retour : pas de valeur de retour -
Ferme le popup immédiatement. -
-
moveTo( x, y ) -
Type de retour : pas de valeur de retour -
Déplace le popup vers un nouvel emplacement. -
-
openPopup( anchor , position , x , y , isContextMenu, attributesOverride ) -
Type de retour : pas de valeur de retour -
-

Ouvre le popup relativement à un nœud spécifié à un emplacement spécifique. -

Le popup peut soit être ancré à un autre nœud ou ouvert librement. Pour ancrer un popup à un nœud, fournissez un nœud d'accrochage dans le paramètre anchor et définissez la position par une chaîne indiquant la manière dont le popup doit être ancré. -

Les valeurs possibles pour le paramètre position sont : before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, after_pointer -

Le nœud d'accrochage ne doit pas nécessairement être dans le même document que le popup. -

Si le paramètre attributesOverride vaut true, l'attribut position sur le nœud popup a priorité sur la valeur du paramètre position. Si attributesOverride vaut false, l'attribut n'est utilisé que si le paramètre position est vide. -

Pour un popup ancré, les paramètres x et y peuvent être utilisés pour décaler le popup de sa position d'ancrage de quelques pixels (mesurés en pixels CSS). -

Les popups non ancrés peuvent être créés en fournissant null comme paramètre anchor. Un popup non ancré apparait à la position spécifiée par x et y relativement à la zone visible (viewport) du document contenant le nœud popup. Dans ce cas, les paramètres position et attributesOverride sont ignorés. -

-
openPopupAtScreen( x, y, isContextMenu ) -
Type de retour : pas de valeur de retour -
-

Ouvre le popup à une position spécifique sur l'écran spécifiée par x et y. Cette position peut être ajustée s'il s'avère qu'elle provoquerait l'apparition du popup en dehors de l'écran. Les coordonnées x et y sont mesurées en pixels CSS. -

-
showPopup( element, x, y, popupType, anchor, align ) Déprécié dans Mozilla 1.9 -
Type de retour : aucune valeur de retour -
Ouvre un élément popup. Deux moyens de spécifier l'emplacement où s'affichera la fenêtre popup existent, soit en spécifiant une position spécifique de l'écran, soit par rapport à un autre élément de la fenêtre. Si x ou y sont définies par une valeur, le popup apparaîtra aux coordonnées (x,y) de l'écran. Si x et y sont définies à -1, le popup sera positionné par rapport à l'element spécifié dans le premier paramètre. C'est cette dernière méthode qu'il faut utiliser, par exemple, pour afficher un popup sous un bouton. Dans ce cas, les paramètres anchor et align peuvent être utilisés pour contrôler plus avant l'endroit où apparaîtra le popup par rapport à l'élément. Le paramètre anchor correspond à l'attribut popupanchor de l'élément et le paramètre align correspond à l'attribut popupalign. Les paramètres anchor et align sont ignorés si ni x ni y ne valent -1. -
-
Pour qu'un popup apparaisse à une position relative à un autre élément tout en étant décalé de quelques pixels, déterminez la position réelle de l'élément à l'aide de ses propriétés boxObject.screenX et boxObject.screenY, et utilisez celles-ci comme paramètres x et y en y ajoutant les décalages souhaités. -
-
Le paramètre popupType doit être une des chaînes popup, context ou tooltip. Chaque type de popup est destiné à être affiché temporairement ; ils ne sont pas censés être affichés de façon permanente. On ne peut afficher qu'un popup à la fois. -
-
sizeTo( <i>largeur</i>, <i>hauteur</i> ) -
Type de retour : aucune valeur de retour -
Modifie la taille actuelle de la fenêtre popup avec les nouvelles dimensions largeur et hauteur. -
- -

Sujets liés

-
Éléments
menu, menubar, menuitem, menulist, menuseparator
-
Interfaces -
nsIAccessibleProvider, nsIDOMXULPopupElement -
-
-
diff --git a/files/fr/archive/mozilla/xul/menuseparator/index.html b/files/fr/archive/mozilla/xul/menuseparator/index.html deleted file mode 100644 index 59a1fe1dda..0000000000 --- a/files/fr/archive/mozilla/xul/menuseparator/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: menuseparator -slug: Archive/Mozilla/XUL/menuseparator -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/menuseparator ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Utilisé pour créer un séparateur entre des éléments de menu. Typiquement affiché sous la forme d'une fine ligne. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
acceltext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value -
-
Propriétés -
accessibleType, accessKey, command, control, crop, disabled, image, label, labelElement, parentContainer, selected, tabIndex, value -
-

Exemples

-
<menu label="Aide">
-  <menupopup>
-    <menuitem label="Rubriques d'aide"/>
-    <menuseparator/>
-    <menuitem label="Notes de version"/>
-  </menupopup>
-</menu>
-
-

Attributs

-

-

- -
-
- acceltext
-
- Type : chaîne de caractères
-
- Texte qui apparaîtra à côté du label d'un menu pour indiquer la touche de raccourci (accélérateur) à utiliser pour invoquer la commande. Si cette valeur est définie, elle écrase une clé assignée dans l'attribut key. Cet attribut ne s'applique pas aux menus directement sur la Barre de menus (menubar).
-
-
-
- -
accesskey
-
Type : caractère -
Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut label de l'élément.
-

Exemple

-
Image:XUL_ref_accesskey_attr.png
-
<vbox>
-  <label value="Entrez votre nom" accesskey="e" control="myName"/>
-  <textbox id="myName"/>
-  <button label="Annuler" accesskey="n"/>
-  <button label="OK" accesskey="O"/>
-</vbox>
-
-

Voir également

-

Les attributs label et acceltext -

-
-
- -
allowevents -
Type : booléen -
Si défini à true, les évènements sont passés aux enfants de l'élément. Dans le cas contraire, ils ne sont passés qu'à l'élément lui-même. -
- - -
-
- -
command -
Type : id d'élément -
Défini à la valeur de l'id d'un élément command observé par l'élément. -
- - -
-
- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
image -
Type : URL d'une image -
L'URL de l'image devant apparaître sur l'élément. Si cet attribut est vide ou omis, aucune image n'apparaîtra. La position de l'image est déterminée par les attributs dir et orient. -
- - -
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
selected -
Type : booléen -
Indique si l'élément est sélectionné ou non. Cette valeur est en lecture seule. Pour changer la sélection, utilisez la propriété selectedIndex ou selectedItem de l'élément conteneur. -
- - -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

-

-

-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
accessKey -
Type : caractère -
Obtient et définit la valeur de l'attribut accesskey. -
-


-

- -
-
-
-
-
crop -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut crop. -
- -
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
image -
Type : URL d'image -
Obtient et définit la valeur de l'attribut image. -
- -
-
-
label -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut label. -
- -
-
-
-
- -
-
selected
-
Type : booléen
-
La valeur de cette propriété est true si cet élément est sélectionné, ou false s'il ne l'est pas. Cette propriété est en lecture seule.
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
menu, menubar, menuitem, menulist, menupopup -
-
Interfaces -
nsIAccessibleProvider, nsIDOMXULContainerItemElement, nsIDOMXULSelectControlItemElement -
-
-
diff --git a/files/fr/archive/mozilla/xul/modification_dynamique_d'interfaces_utilisateur_en_xul/index.html b/files/fr/archive/mozilla/xul/modification_dynamique_d'interfaces_utilisateur_en_xul/index.html deleted file mode 100644 index 5275b8d97f..0000000000 --- a/files/fr/archive/mozilla/xul/modification_dynamique_d'interfaces_utilisateur_en_xul/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Modification dynamique d'interfaces utilisateur en XUL -slug: Archive/Mozilla/XUL/Modification_dynamique_d'interfaces_utilisateur_en_XUL -tags: - - DOM - - Extensions - - NeedsUpdate - - XUL -translation_of: Archive/Mozilla/XUL/Dynamically_modifying_XUL-based_user_interface ---- -

Cet article traite de la manipulation d'interfaces en XUL, à l'aide du DOM et d'autres API. Il explique le concept desdocuments DOM, présente quelques exemples simples d'appels DOM utilisés pour effectuer des manipulations basiques sur un document, et ensuite la façon de travailler avec ducontenu XBL anonyme à l'aide de méthodes spécifiques à Mozilla.

- -

Il est écrit pour des développeurs XUL débutants et de niveau moyen. Nous supposons que le lecteur a des connaissances de base à la fois en XUL et en JavaScript. Il peut également être intéressant de consulter quelques documents d'introduction relatifs au DOM, comme l'article À propos du Document Object Model ou la page d'introduction de la Référence du DOM Gecko.

- -

Introduction

- -

Comme vous le savez, XUL est un langage XML utilisé dans plusieurs applications basées sur Mozilla, comme Firefox et Thunderbird, pour décrire l'interface utilisateur. Dans les applications XUL, JavaScript définit le comportement, à l'aide des API DOM pour accéder au document XUL.

- -

En quoi consistent ces API DOM ?

- -

Ce sont les interfaces utilisées dans toute interaction entre un script et un document. Si vous avez écrit n'importe quel script interagissant avec un document XUL (ou HTML), vous avez déjà utilisé des appels DOM. La méthode DOM la plus connue est probablement document.getElementById(), qui renvoie un élément depuis son id. Vous avez peut-être utilisé d'autres appels, comme element.setAttribute(), ou, si vous avez écrit une extension, la méthode addEventListener(). Toutes celles-ci sont définies dans le DOM.

- -

D'autres méthodes DOM permettent également de créer, déplacer ou supprimer des éléments d'un document. Celles-ci seront présentées dans une section ultérieure. Pour l'instant, préoccupons-nous de ce qu'est undocument .

- -

Définition d'un document

- -

Un document est une structure de données manipulée à l'aide des API DOM. Une structure logique de tout élément est un arbre, dont les nœuds sont les éléments, attributes, instructions de traitement, commentaires, etc. Utilisez l'outil Inspecteur DOM pour voir la représentation sous forme d'arbre de n'importe quel document. Todo: simple example of a XUL document and a tree

- -

Vous pouvez penser à un document comme à une représentation en mémoire de HTML valide ou de XML bien formé (en ce compris du XUL).

- -

Il est important de se souvenir de différentes pages Web (et même différentes instances de la même page Web) correspondent à différents documents. Chaque fenêtre XUL possède son propre document distinct, et il peut même y avoir un certain nombre de documents différents dans une même fenêtre, lorsqu'uil y a des élements <iframe>, <browser>, ou encore <tabbrowser>. Vous devez vous assurer de toujours manipuler le bon document. (Consultez Travailler avec des fenêtres dans le chrome pour en savoir plus.) Lorsque votre script est inclus à l'aide d'une balise <script>, la propriété document référence le document DOM dont le script fait partie.

- -

Exemples : utilisation de méthodes DOM

- -

Cette section présente l'utilisation des méthodes DOM appendChild(), createElement(), insertBefore(), et removeChild().

- -

Suppression de tous les enfants d'un élément

- -

Cet exemple supprime tous les enfants d'un élément dont l'id est "unCertainElement" du document courant, en appelant la méthode removeChild() pour supprimer le premier enfant et ce jusqu'à ce que plus aucun d'entre-eux ne reste.

- -

Notez que hasChildNodes() et firstChild font également partie de l'API DOM.

- -
var element = document.getElementById("unCertainElement");
-while(element.hasChildNodes())
-  element.removeChild(element.firstChild);
-
- -

Insertion d'éléments de menu dans un menu

- -

Cet exemple ajoute deux nouveaux élements de menu à un <menupopup>, au début et à la fin de celui-ci. Il utilise la méthode document.createElementNS() pour créer les éléments, et insertBefore() avec appendChild() pour insérer les éléments créés dans le document.

- -

Notes :

- - - -
function createMenuItem(aLabel) {
-  const XUL_NS = "http://www.mozilla.org/keymaster/gat...re.is.only.xul";
-  var item = document.createElementNS(XUL_NS, "menuitem"); // crée un nouvel élément de menu XUL
-  item.setAttribute("label", aLabel);
-  return item;
-}
-var popup = document.getElementById("myPopup"); // un élément <menupopup>
-var first = createMenuItem("Premier choix");
-var last = createMenuItem("Dernier choix");
-popup.insertBefore(first, popup.firstChild);
-popup.appendChild(last);
-
- -

Il est également possible d'utiliser appendChild() et insertBefore() pour déplacer des éléments existants. Par exemple, vous pouvez déplacer l'élément nommé « First item » vers la fin du menu en ajoutant cette ligne à la fin du bout de code ci-dessus :

- -
popup.appendChild(first);
-
- -

Cette instruction supprimerait le nœud de sa position courante dans le document et le réinsèrerait à la fin du menu.

- -

Contenu anonyme (XBL)

- -

XBL est le langage utilisé dans Mozilla pour définir de nouveaux éléments d'interface. Ces outils définis en XBL peuvent choisir de définir un certain contenu qui sera inséré dans l'élément conteneur lorsque la liaison (binding) est attachée. Ce contenu, appelécontenu anonyme , n'est pas accessible à travers les méthodes DOM normales.

- -

Il est nécessaire d'utiliser les méthodes de l'interface nsIDOMDocumentXBL à la place. Par exemple :

- -
// récupère le premier enfant anonyme du nœud donné
-document.getAnonymousNodes(node)[0];
-
-// renvoie une NodeList d'éléments anonymes dont l'attribut anonid vaut el1
-document.getAnonymousElementByAttribute(node, "anonid", "el1");
-
- -

Une fois que vous avez une référence à un nœud anonyme, vous pouvez utiliser les méthodes DOM normales pour naviguer et manipuler les autres nœuds de cette liaison XBL.

- -

Voir aussi

- - diff --git a/files/fr/archive/mozilla/xul/modifications_xul_pour_firefox_1.5/index.html b/files/fr/archive/mozilla/xul/modifications_xul_pour_firefox_1.5/index.html deleted file mode 100644 index 851dd7ae7a..0000000000 --- a/files/fr/archive/mozilla/xul/modifications_xul_pour_firefox_1.5/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Modifications XUL pour Firefox 1.5 -slug: Archive/Mozilla/XUL/Modifications_XUL_pour_Firefox_1.5 -tags: - - XUL -translation_of: Archive/Mozilla/XUL/XUL_Changes_for_Firefox_1.5 ---- -

-

Cette page répertorie les modifications les plus remarquables au XUL dans Firefox 1.5 (Gecko 1.8). Pour les autres changements à connaître, voir Adaptation des applications XUL pour Firefox 1.5. -

-

<scrollcorner>

-

Un nouvel élément <scrollcorner> sert à créer une petite boîte à l'intersection entre les ascenseurs horizontal et vertical. -

-

<richlistbox> et <richlistitem>

-

Les éléments <richlistbox> et <richlistitem> sont utilisés pour la création de liste avec du contenu arbitraire. Cet élément fonctionne de manière similaire à <listbox> qui est principalement dédié aux listes de texte. Le <richlistbox> supporte presque la même API que le <listbox> et des items uniques créés avec l'élément <richlistitem> peuvent y être sélectionnés. Consultez XUL:Richlistbox pour plus d'information. -

-

Système de préférences

-

Plusieurs éléments ont été ajoutés pour la création de fenêtre de gestion des préférences. Ces fenêtres sont des types spéciaux de boîtes de dialogues supportant plusieurs panneaux qui peuvent être contenus dans le même fichier ou des fichiers séparés. Une série d'icônes apparaîtront en haut de la boîte de dialogue pour permettre à l'utilisateur de changer de panneaux. En plus de ces nouveaux éléments, quelques attributs supplémentaires pour des éléments existants ont été ajoutés pour rendre plus simple la configuration de préférences sans avoir à utiliser de code. Pour plus d'information, consultez Système de préférences. -

-

bfcache

-

Mozilla mémorise maintenant les résultats du DOM d'une page, afin de ne pas avoir à recharger la page en navigant vers l'arrière ou vers l'avant, ce qui rend la navigation beaucoup plus efficace. Les évènements pageshow et pagehide sont utilisés lors du basculement vers une page dans le cache, tandis que les évènements load et unload servent uniquement lorsqu'une page est chargée ou déchargée. -

Pour plus d'information, consultez Utilisation du cache de Firefox 1.5 -

-

tabIndex

-

La propriété tabIndex s'applique maintenant à plus d'éléments. -

-

<radiogroup>

-

L'affectation de la propriété value sur un élément <radiogroup> sélectionne directement l'élément <radio> du groupe ayant la valeur correspondante. -

-

Boîte de dialogue : propriété defaultButton

-

La liaison <dialog> supporte maintenant la propriété defaultButton. L'affectation de cette propriété modifie le bouton par défaut de la boîte de dialogue. Il peut être défini soit à l'un des boutons de la liaison <dialog> (en utilisant leurs noms) ou soit à none auquel cas aucun bouton ne sera défini par défaut. -

-

Bouton : propriété icon

-

La propriété icon d'un bouton peut servir à définir un stock d'icônes prédéfinies sur un bouton et utilisées sur certaines plateformes. Par exemple, <button icon="help"> va créer un bouton avec une icône d'aide. Les systèmes GNOME utilisent habituellement cette pratique où les valeurs possibles sont : -

accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network. -

-

<menulist>

-

Les items dans un <menulist> supporte l'attribut description permettant d'inclure du texte descriptif à côté du libellé d'un item. Les méthodes appendItem et insertItemAt utilisées pour pour la création d'items dans un menulist prennent un argument supplémentaire pour cette description. -

-

<stringbundle>

-

L'élément <stringbundle> a une propriété strings servant à récupérer une énumération de toutes les chaînes de caractères dans le bundle. -

-

Onglets repositionnables

-

L'utilisateur peut maintenant réarranger les onglets de navigation en les faisant glisser. -

-

<tabbox>

-

L'élément <tabbox> supporte maintenant l'attribut selectedIndex pour définir l'onglet sélectionné par défaut. -

-

Chargement dynamique des overlays

-

XUL supporte maintenant le chargement dynamique des overlays grâce à la fonction document.loadOverlay. -

-
-

Informations sur le document d'origine

- -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/blur/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/blur/index.html" deleted file mode 100644 index c8078d98c9..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/blur/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: blur -slug: Archive/Mozilla/XUL/Méthodes/blur -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/blur ---- -
« Accueil de la référence XUL
-
blur() -
Type de retour : aucune valeur de retour -
Si le focus est sur l'élément, il sera retiré. Le focus n'est placé automatiquement sur aucun autre élément. Utilisé essentiellement pour appeler le gestionnaire d'évènement onblur. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/click/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/click/index.html" deleted file mode 100644 index ef23173bfb..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/click/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: click -slug: Archive/Mozilla/XUL/Méthodes/click -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/click ---- -
« Accueil de la référence XUL
-
click() -
Type de retour : aucune valeur de retour -
Appelle le gestionnaire d'évènement onclick pour l'élément. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/decrease/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/decrease/index.html" deleted file mode 100644 index 7e3bc38bfd..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/decrease/index.html" +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: decrease -slug: Archive/Mozilla/XUL/Méthodes/decrease -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/decrease ---- -
- « Accueil de la référence XUL
-
-
-
- Méthode de : scale, textbox
-
-
-
-
- decrease()
-
- Type de retour : - - aucune valeur de retour -
-
- Diminue la valeur de<magic name="\"PAGENAME\"/"> la boîte numérique l'échelle, l'échelle ou la boîte numérique</magic> de la valeur de l'incrément.
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/decreasepage/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/decreasepage/index.html" deleted file mode 100644 index 3d83d6c860..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/decreasepage/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: decreasePage -slug: Archive/Mozilla/XUL/Méthodes/decreasePage -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/decreasePage ---- -
« Accueil de la référence XUL
-
decreasePage()
-
Méthode de : scale
-
Type de retour : aucune valeur de retour -
Diminue la valeur de l'échelle de la valeur de pageIncrement. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/docommand/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/docommand/index.html" deleted file mode 100644 index 362e53a578..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/docommand/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: doCommand -slug: Archive/Mozilla/XUL/Méthodes/doCommand -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/doCommand ---- -
« Accueil de la référence XUL
-
doCommand() -
Type de retour : aucune valeur renvoyée -
Exécute l'évènement command pour l'élément. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/focus/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/focus/index.html" deleted file mode 100644 index 9f936eba19..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/focus/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: focus -slug: Archive/Mozilla/XUL/Méthodes/focus -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/focus ---- -
« Accueil de la référence XUL
-
focus() -
Type de retour : aucune valeur de retour -
Assigne le focus à l'élément, si celui-ci peut l'accepter. Le gestionnaire d'évènement onfocus est appelé. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/getelementsbyattribute/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/getelementsbyattribute/index.html" deleted file mode 100644 index 1eceb74073..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/getelementsbyattribute/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: getElementsByAttribute -slug: Archive/Mozilla/XUL/Méthodes/getElementsByAttribute -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/getElementsByAttribute ---- -
« Accueil de la référence XUL
-
getElementsByAttribute( attrib, value ) -
Type de retour : liste de nœuds DOM (NodeList) -
Renvoie un tableau contenant tous les éléments enfants de l'élément disposant de l'attribut donné comme premier paramètre avec la valeur donnée comme second paramètre. Si le second paramètre est « * », l'attribut peut avoir n'importe quelle valeur. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/getrowcount/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/getrowcount/index.html" deleted file mode 100644 index 3ffe5f059b..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/getrowcount/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: getRowCount -slug: Archive/Mozilla/XUL/Méthodes/getRowCount -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/getRowCount ---- -
« Accueil de la référence XUL
-
getRowCount() -
Type de retour : entier -
Renvoie le nombre total de lignes dans l'élément, quel que soit le nombre de lignes affichées. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/hasuservalue/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/hasuservalue/index.html" deleted file mode 100644 index e0c2b8202f..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/hasuservalue/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: hasUserValue -slug: Archive/Mozilla/XUL/Méthodes/hasUserValue -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/hasUserValue ---- -
« Accueil de la référence XUL
-
hasUserValue() -
Type de retour : booléen -
Renvoie true si la préférence a été modifiée par rapport à sa valeur par défaut. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/hidepopup/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/hidepopup/index.html" deleted file mode 100644 index d900d650db..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/hidepopup/index.html" +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: hidePopup -slug: Archive/Mozilla/XUL/Méthodes/hidePopup -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/hidePopup ---- -
« Accueil de la référence XUL
-
hidePopup()
-
Méthode de : popup, menupopup, tooltip
-
Type de retour : pas de valeur de retour -
Ferme le popup immédiatement. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/increase/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/increase/index.html" deleted file mode 100644 index c2308982af..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/increase/index.html" +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: increase -slug: Archive/Mozilla/XUL/Méthodes/increase -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/increase ---- -
- « Accueil de la référence XUL
-
-
-
- Méthode de : scale textbox
-
-
-
-
- increase()
-
- Type de retour : - - aucune valeur de retour -
-
- Augmente la valeur de <magic name="\"PAGENAME\"/">la boîte numérique, XUL:scale = l'échelle, l'échelle ou la boîte numérique</magic> de la valeur de l'incrément.
-
-

 

-
-  
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/increasepage/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/increasepage/index.html" deleted file mode 100644 index 9d3cbac780..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/increasepage/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: increasePage -slug: Archive/Mozilla/XUL/Méthodes/increasePage -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/increasePage ---- -
« Accueil de la référence XUL
-
increasePage()
-
Méthode de : scale
-
Type de retour : aucune valeur de retour -
Augmente la valeur de l'échelle de la valeur de pageIncrement. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/index.html" deleted file mode 100644 index 72e3cb3146..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/index.html" +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Méthodes -slug: Archive/Mozilla/XUL/Méthodes -tags: - - Aide_pour_les_éditeurs_de_MDC - - Méthodes_XUL - - Traduction_en_cours -translation_of: Archive/Mozilla/XUL/Method ---- -

« Accueil de la référence XUL

- - - diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/moveto/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/moveto/index.html" deleted file mode 100644 index af8c9b8a47..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/moveto/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: moveTo -slug: Archive/Mozilla/XUL/Méthodes/moveTo -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/moveTo ---- -
« Accueil de la référence XUL
-
moveTo( x, y ) -
Type de retour : pas de valeur de retour -
Déplace le popup vers un nouvel emplacement. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/openpopup/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/openpopup/index.html" deleted file mode 100644 index 0dbebe88b9..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/openpopup/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: openPopup -slug: Archive/Mozilla/XUL/Méthodes/openPopup -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/openPopup ---- -
« Accueil de la référence XUL
-
openPopup( anchor , position , x , y , isContextMenu, attributesOverride ) -
Type de retour : pas de valeur de retour -
-

Ouvre le popup relativement à un nœud spécifié à un emplacement spécifique. -

Le popup peut soit être ancré à un autre nœud ou ouvert librement. Pour ancrer un popup à un nœud, fournissez un nœud d'accrochage dans le paramètre anchor et définissez la position par une chaîne indiquant la manière dont le popup doit être ancré. -

Les valeurs possibles pour le paramètre position sont : before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, after_pointer -

Le nœud d'accrochage ne doit pas nécessairement être dans le même document que le popup. -

Si le paramètre attributesOverride vaut true, l'attribut position sur le nœud popup a priorité sur la valeur du paramètre position. Si attributesOverride vaut false, l'attribut n'est utilisé que si le paramètre position est vide. -

Pour un popup ancré, les paramètres x et y peuvent être utilisés pour décaler le popup de sa position d'ancrage de quelques pixels (mesurés en pixels CSS). -

Les popups non ancrés peuvent être créés en fournissant null comme paramètre anchor. Un popup non ancré apparait à la position spécifiée par x et y relativement à la zone visible (viewport) du document contenant le nœud popup. Dans ce cas, les paramètres position et attributesOverride sont ignorés. -

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/openpopupatscreen/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/openpopupatscreen/index.html" deleted file mode 100644 index 56e83bb9c6..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/openpopupatscreen/index.html" +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: openPopupAtScreen -slug: Archive/Mozilla/XUL/Méthodes/openPopupAtScreen -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/openPopupAtScreen ---- -
« Accueil de la référence XUL
-
openPopupAtScreen( x, y, isContextMenu ) -
Type de retour : pas de valeur de retour -
-

Ouvre le popup à une position spécifique sur l'écran spécifiée par x et y. Cette position peut être ajustée s'il s'avère qu'elle provoquerait l'apparition du popup en dehors de l'écran. Les coordonnées x et y sont mesurées en pixels CSS. -

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/reset/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/reset/index.html" deleted file mode 100644 index 2e573454aa..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/reset/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: reset -slug: Archive/Mozilla/XUL/Méthodes/reset -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/reset ---- -
« Accueil de la référence XUL
-
reset() -
Type de retour : aucune valeur renvoyée -
Réinitialise la préférence à sa valeur par défaut. -
Pour un élément textbox, la liste de transactions d'annulation est également vidée (Gecko 1.9). -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/select/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/select/index.html" deleted file mode 100644 index 79d85de4e9..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/select/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: select -slug: Archive/Mozilla/XUL/Méthodes/select -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/select ---- -
« Accueil de la référence XUL
-
select() -
Type retourné : aucune valeur retournée -
Sélectionne l'intégralité du texte d'une boîte texte. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/selectall/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/selectall/index.html" deleted file mode 100644 index ff10b60952..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/selectall/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: selectAll -slug: Archive/Mozilla/XUL/Méthodes/selectAll -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/selectAll ---- -
« Accueil de la référence XUL
-
selectAll() -
Type de retour : aucune valeur renvoyée -
Sélectionne tous les éléments. Un évènement de sélection est envoyé après l'exécution de la sélection. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/selectitem/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/selectitem/index.html" deleted file mode 100644 index 2131fd8738..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/selectitem/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: selectItem -slug: Archive/Mozilla/XUL/Méthodes/selectItem -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/selectItem ---- -
« Accueil de la référence XUL
-
selectItem( item ) -
Type de retour : aucune valeur renvoyée -
Désélectionne tous les éléments actuellement sélectionnés, puis sélectionne l'élément donné en argument. Un évènement de sélection est envoyé après l'exécution de la sélection. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/selectitemrange/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/selectitemrange/index.html" deleted file mode 100644 index 36913d700c..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/selectitemrange/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: selectItemRange -slug: Archive/Mozilla/XUL/Méthodes/selectItemRange -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/selectItemRange ---- -
« Accueil de la référence XUL
-
selectItemRange( startItem, endItem) -
Type de retour : aucune valeur renvoyée -
Sélectionne tous les éléments compris entre les deux éléments donnés en paramètre, y compris les éléments de début et de fin. Tous les autres éléments sont désélectionnés. Cette méthode n'a aucun effet sur les listes en mono-sélection. Un évènement de sélection est envoyé après l'exécution de la sélection. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/setselectionrange/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/setselectionrange/index.html" deleted file mode 100644 index 6a527b231f..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/setselectionrange/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: setSelectionRange -slug: Archive/Mozilla/XUL/Méthodes/setSelectionRange -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/setSelectionRange ---- -

« Accueil de la référence XUL -

-
setSelectionRange( début, fin ) -
Type retourné : aucune valeur retournée -
Cette méthode sélectionne une portion de texte dans une zone de texte (textbox ou textarea) où l'argument début est le premier caractère de la sélection et l'argument fin le dernier caractère de la sélection.
Renseigner les deux arguments avec la même valeur équivaut à déplacer le curseur d'écriture sans rien sélectionner. -
-


-Interwiki Language Links -

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/showpane/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/showpane/index.html" deleted file mode 100644 index fdb76134d5..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/showpane/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: showPane -slug: Archive/Mozilla/XUL/Méthodes/showPane -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/showPane ---- -
« Accueil de la référence XUL
-
showPane( <i>prefpane</i> ) -
Type retourné : aucune valeur retournée -
Bascule vers un panneau en particulier. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/showpopup/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/showpopup/index.html" deleted file mode 100644 index f320227bdb..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/showpopup/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: showPopup -slug: Archive/Mozilla/XUL/Méthodes/showPopup -tags: - - Méthodes_XUL - - NeedsRewrite - - NeedsTechnicalReview -translation_of: Archive/Mozilla/XUL/Method/showPopup ---- -
« Accueil de la référence XUL
-
showPopup( element, x, y, popupType, anchor, align ) Déprécié dans Mozilla 1.9 -
Type de retour : aucune valeur de retour -
Ouvre un élément popup. Deux moyens de spécifier l'emplacement où s'affichera la fenêtre popup existent, soit en spécifiant une position spécifique de l'écran, soit par rapport à un autre élément de la fenêtre. Si x ou y sont définies par une valeur, le popup apparaîtra aux coordonnées (x,y) de l'écran. Si x et y sont définies à -1, le popup sera positionné par rapport à l'element spécifié dans le premier paramètre. C'est cette dernière méthode qu'il faut utiliser, par exemple, pour afficher un popup sous un bouton. Dans ce cas, les paramètres anchor et align peuvent être utilisés pour contrôler plus avant l'endroit où apparaîtra le popup par rapport à l'élément. Le paramètre anchor correspond à l'attribut popupanchor de l'élément et le paramètre align correspond à l'attribut popupalign. Les paramètres anchor et align sont ignorés si ni x ni y ne valent -1. -
-
Pour qu'un popup apparaisse à une position relative à un autre élément tout en étant décalé de quelques pixels, déterminez la position réelle de l'élément à l'aide de ses propriétés boxObject.screenX et boxObject.screenY, et utilisez celles-ci comme paramètres x et y en y ajoutant les décalages souhaités. -
-
Le paramètre popupType doit être une des chaînes popup, context ou tooltip. Chaque type de popup est destiné à être affiché temporairement ; ils ne sont pas censés être affichés de façon permanente. On ne peut afficher qu'un popup à la fois. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/sizeto/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/sizeto/index.html" deleted file mode 100644 index 162f0dab6a..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/sizeto/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: sizeTo -slug: Archive/Mozilla/XUL/Méthodes/sizeTo -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/sizeTo ---- -
« Accueil de la référence XUL
-
sizeTo( <i>largeur</i>, <i>hauteur</i> ) -
Type de retour : aucune valeur de retour -
Modifie la taille actuelle de la fenêtre popup avec les nouvelles dimensions largeur et hauteur. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/stop/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/stop/index.html" deleted file mode 100644 index 673344cdcf..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/stop/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: stop -slug: Archive/Mozilla/XUL/Méthodes/stop -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/stop ---- -
-

« Accueil de la référence XUL -

-
-
stop() -
Type retourné : aucune valeur retournée -
Équivalent au clic sur le bouton Stop, cette méthode arrête le chargement en cours du document. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/syncsessions/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/syncsessions/index.html" deleted file mode 100644 index de76541536..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/syncsessions/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: syncSessions -slug: Archive/Mozilla/XUL/Méthodes/syncSessions -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/syncSessions ---- -
-

« Accueil de la référence XUL -

-
-
syncSessions( autoCompleteElement ) -
Type retourné : ??? -
Copie les sessions depuis un autre élément autocomplété. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/timedselect/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/timedselect/index.html" deleted file mode 100644 index 2a30e67317..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/timedselect/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: timedSelect -slug: Archive/Mozilla/XUL/Méthodes/timedSelect -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/timedSelect ---- -
« Accueil de la référence XUL
-
timedSelect( item, timeout ) -
Type de retour : aucune valeur renvoyée -
Sélectionne un élément spécifié par l'argument item après un nombre de millisecondes définit par l'argument timeout. Tous les autres éléments sont désélectionnés. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/m\303\251thodes/toggleitemselection/index.html" "b/files/fr/archive/mozilla/xul/m\303\251thodes/toggleitemselection/index.html" deleted file mode 100644 index d6dac62e00..0000000000 --- "a/files/fr/archive/mozilla/xul/m\303\251thodes/toggleitemselection/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: toggleItemSelection -slug: Archive/Mozilla/XUL/Méthodes/toggleItemSelection -tags: - - Méthodes_XUL -translation_of: Archive/Mozilla/XUL/Method/toggleItemSelection ---- -
« Accueil de la référence XUL
-
toggleItemSelection( item ) -
Type de retour : aucune valeur renvoyée -
Modifie l'état de sélection de l'élément spécifié. S'il est sélectionné, il devient désélectionné. S'il est désélectionné, il devient sélectionné. Les autres éléments de la liste ne sont pas affectés et ils conservent leur état de sélection. -
-
-
diff --git a/files/fr/archive/mozilla/xul/panel/index.html b/files/fr/archive/mozilla/xul/panel/index.html deleted file mode 100644 index 64daec52df..0000000000 --- a/files/fr/archive/mozilla/xul/panel/index.html +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: panel -slug: Archive/Mozilla/XUL/panel -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/panel ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un panel est une fenêtre popup pouvant contenir n'importe quel type de contenu. Il n'a aucune décoration de fenêtre. Lorsqu'il est ouvert, il flotte par dessus la fenêtre et peut déborder même de la fenêtre principale. Typiquement, il sera attaché à un élément à l'aide de l'attribut popup afin d'apparaitre lorsque l'on clique avec le bouton de gauche de la souris sur l'élément. Un panel peut également être ouvert via un script à l'aide de la méthode openPopup. -

Le panel sera fermé lorsque l'utilisateur cliquera en dehors de celui-ci ou que sa méthode hidePopup sera appelée. -

-
Attributs -
left, noautofocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top -
-
Propriétés -
accessible, popupBoxObject, popup, state -
-
Méthodes -
hidePopup, moveTo, openPopup, openPopupAtScreen, sizeTo -
-

Exemples

-

L'exemple qui suit montre comment un panel peut être attaché à un label. -

-
<panel id="thepanel">
-  <hbox align="start">
-    <image src="warning.png"/>
-    <vbox>
-      <description value="Vous avez 6 nouveaux messages."/>
-      <hbox>
-        <button label="Lire le courrier"/>
-        <button label="Nouveau message"/>
-      </hbox>
-    </vbox>
-  </hbox>
-</panel>
-<description value="6 nouveaux messages" popup="thepanel"/>
-
-

Attributs

-

-

- -
left -
Type : entier -
Remplace la position horizontale du popup spécifiée par la méthode showPopup. -
-


-

- - -
-
- -
noautofocus -
Type : booléen -
Si mis à false, la valeur par défaut, l'élément ayant actuellement le focus le perdra si le popup est ouvert ou fermé. Si mis à true, le focus ne sera pas modifié. -
-


-

- - -
-
- -
onpopuphidden -
Type : code de script -
Cet évènement est envoyé à un popup après qu'il a été caché. http://www.langue-fr.net/index/A/apres-que.htm -
- - -
-
- -
onpopuphiding -
Type : code de script -
Cet évènement est envoyé à un popup lorsqu'il est sur le point d'être masqué. -
- - -
-
- -
onpopupshowing -
Type : code de script -
Cet évènement est envoyé à un popup juste avant son ouverture. On l'utilise généralement pour définir dynamiquement le contenu lorsque l'utilisateur demande son affichage. Si ce gestionnaire d'évènement renvoie false, le popup ne s'affichera pas. -
- - -
-
- -
onpopupshown -
Type : code de script -
Cet évènement est envoyé à un popup après son ouverture, de la même manière qu'un évènement onload est envoyé à une fenêtre à son ouverture. -
- - -
-
- -
position -
Type : une des valeurs ci-dessous -
L'attribut position détermine où le popup apparaît par rapport à l'élément sur lequel l'utilisateur a cliqué pour l'invoquer. C'est ce qui permet de placer le popup sur le bord d'un bouton. -
- - - -
-
- -
top -
Type : entier -
Remplace la position verticale du popup spécifiée par la méthode showPopup. -
-


-

- - -
- -

Propriétés

-

-

-
accessible -
Type : nsIAccessible -
Renvoie l'objet d'accessibilité pour l'élément. -
-


-

- -
-
-
popupBoxObject -
Type : nsIPopupBoxObject -
Cette propriété en lecture seule conserve le nsIPopupBoxObject qui implémente le popup. Il n'est normalement pas nécessaire d'utiliser cette propriété étant donné que toutes ses fonctions sont disponibles via le popup lui-même. -
- -
-
-
position -
Type : chaîne -
Obtient et définit la valeur de l'attribut position. -
- -
-
-
state -
Type : chaîne -
Cette propriété en lecture seule indique si le popup est ouvert ou non. Quatre valeurs sont possibles : -
- - -
- -

Méthodes

- - - - - - -
-

Héritées de XUL element
- blur, click, doCommand, focus, getElementsByAttribute getElementsByAttributeNS

Héritées de DOM element
- addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

- -
-
hidePopup()
-
Type de retour : pas de valeur de retour -
Ferme le popup immédiatement. -
-
moveTo( x, y ) -
Type de retour : pas de valeur de retour -
Déplace le popup vers un nouvel emplacement. -
-
openPopup( anchor , position , x , y , isContextMenu, attributesOverride ) -
Type de retour : pas de valeur de retour -
-

Ouvre le popup relativement à un nœud spécifié à un emplacement spécifique. -

Le popup peut soit être ancré à un autre nœud ou ouvert librement. Pour ancrer un popup à un nœud, fournissez un nœud d'accrochage dans le paramètre anchor et définissez la position par une chaîne indiquant la manière dont le popup doit être ancré. -

Les valeurs possibles pour le paramètre position sont : before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, after_pointer -

Le nœud d'accrochage ne doit pas nécessairement être dans le même document que le popup. -

Si le paramètre attributesOverride vaut true, l'attribut position sur le nœud popup a priorité sur la valeur du paramètre position. Si attributesOverride vaut false, l'attribut n'est utilisé que si le paramètre position est vide. -

Pour un popup ancré, les paramètres x et y peuvent être utilisés pour décaler le popup de sa position d'ancrage de quelques pixels (mesurés en pixels CSS). -

Les popups non ancrés peuvent être créés en fournissant null comme paramètre anchor. Un popup non ancré apparait à la position spécifiée par x et y relativement à la zone visible (viewport) du document contenant le nœud popup. Dans ce cas, les paramètres position et attributesOverride sont ignorés. -

-
openPopupAtScreen( x, y, isContextMenu ) -
Type de retour : pas de valeur de retour -
-

Ouvre le popup à une position spécifique sur l'écran spécifiée par x et y. Cette position peut être ajustée s'il s'avère qu'elle provoquerait l'apparition du popup en dehors de l'écran. Les coordonnées x et y sont mesurées en pixels CSS. -

-
sizeTo( <i>largeur</i>, <i>hauteur</i> ) -
Type de retour : aucune valeur de retour -
Modifie la taille actuelle de la fenêtre popup avec les nouvelles dimensions largeur et hauteur. -
- -

Sujets liés

-
Interfaces -
nsIAccessibleProvider, nsIDOMXULPopupElement -
-
-
diff --git a/files/fr/archive/mozilla/xul/popup/index.html b/files/fr/archive/mozilla/xul/popup/index.html deleted file mode 100644 index 4ee85f8e85..0000000000 --- a/files/fr/archive/mozilla/xul/popup/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: popup -slug: Archive/Mozilla/XUL/popup -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/popup ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

L'élément popup est équivalent à l'élément menupopup qu'il vaut mieux utiliser. Consultez la documentation sur l'élément menupopup pour plus d'informations. -


-

-
-
diff --git a/files/fr/archive/mozilla/xul/preference/index.html b/files/fr/archive/mozilla/xul/preference/index.html deleted file mode 100644 index ba56b6bb08..0000000000 --- a/files/fr/archive/mozilla/xul/preference/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: preference -slug: Archive/Mozilla/XUL/preference -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/preference ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Déclare une préférence qui peut être ajustée dans un prefpane. Cet élément doit être placé à l'intérieur d'un élément preferences. Chaque élément preference correspond à une préférence qui est stockée dans le fichier de préférences de l'utilisateur. Il est possible de connecter un élément d'interface utilisateur comme une case à cocher à un élément de préférence à l'aide de l'attribut preference de l'élément d'interface utilisateur. -

Pour plus d'informations, consultez l'article Système de préférences. -

-
Attributs -
disabled, instantApply, inverted, name, onchange, readonly, tabindex, type -
-
Propriétés -
disabled, inverted, locked, name, preferences, readonly, tabIndex, type, value -
-
Méthodes -
hasUserValue, reset -
-

Exemples

-

(exemple nécessaire) -

-

Attributs

-

-

- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
instantApply -
Type : booléen -
Si sa valeur est true, la préférence sera modifiée dès que l'élément d'interface utilisateur est modifié. -
-


-

- - -
-
- -
inverted -
Type : booléen -
Pour les préférences booléennes, l'indication de cet attribut à true indique que la valeur de la préférence est l'inverse de celle de l'élément d'interface utilisateur qui y est attaché. Par exemple, elle fait en sorte que cocher une case désactive la préférence associée au lieu de l'activer. -
-


-

- - -
-
- -
name -
Type : chaîne de caractères -
Le nom de la préférence à modifier. Par exemple, la page d'accueil du navigateur est définie par la préférence browser.startup.homepage. -
- - -
-
- -
onchange -
Type : code de script -
Le code figurant dans l'attribut onchange est appelé lorsque la valeur de l'élément est modifiée. -
-


-

- - -
-
- -
readonly -
Type : booléen -
Si défini à true, l'utilisateur ne peut pas modifier la valeur de l'élément. Cependant, celle-ci peut toujours être modifiée par un script. -
- - -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
type
Type : une des valeurs ci-dessous
Le type de préférence qui doit être une des valeurs suivantes.
-
- - - -
- -

Propriétés

-

-

-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
inverted -
Type : booléen -
Obtient et définit la valeur de l'attribut inverted. -
-


-

- -
-
-
locked -
Type : booléen -
Si définie à true, la préférence a été verrouillée et désactivée dans la configuration système, ce qui empêche de changer sa valeur. Cette propriété est en lecture seule. -
-


-

- -
-
-
name -
Type : chaîne de caractères -
Le nom de la préférence (élément preference) à modifier. Par exemple, la page d'accueil du navigateur est définie par la préférence browser.startup.homepage. -
-


-

- -
-
-
preferences -
Type : élément -
Référence à l'élément preferences conteneur. -
-


-

- -
-
-
-
- readonly
-
- Type : booléen
-
- Si définie à true, l'utilisateur ne peut pas modifier la valeur de l'élément.
-
-
- Cette propriété toute en minuscules n'est utilisée qu'avec l'élément preference et sera peut-être renommée en readOnly dans des versions ultérieures. D'autres éléments utilisent la propriété readOnly. L'attribut correspondant est cependant readonly en minuscules.
-
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
type -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut type. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

-
hasUserValue() -
Type de retour : booléen -
Renvoie true si la préférence a été modifiée par rapport à sa valeur par défaut. -
-


-

-
reset() -
Type de retour : aucune valeur renvoyée -
Réinitialise la préférence à sa valeur par défaut. -
Pour un élément textbox, la liste de transactions d'annulation est également vidée (Gecko 1.9). -
-


-

- - -

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-

À faire -

-
-
- diff --git a/files/fr/archive/mozilla/xul/preferences/index.html b/files/fr/archive/mozilla/xul/preferences/index.html deleted file mode 100644 index ac1884d0eb..0000000000 --- a/files/fr/archive/mozilla/xul/preferences/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: preferences -slug: Archive/Mozilla/XUL/preferences -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/preferences ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Utilisé pour regrouper un ensemble d'éléments preference. -

Pour plus d'informations, consultez l'article Système de préférences. -

-

Exemples

-

(example needed) -

-

Attributs

- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-

À faire -

-
-
diff --git a/files/fr/archive/mozilla/xul/prefpane/index.html b/files/fr/archive/mozilla/xul/prefpane/index.html deleted file mode 100644 index eb01688a7a..0000000000 --- a/files/fr/archive/mozilla/xul/prefpane/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: prefpane -slug: Archive/Mozilla/XUL/prefpane -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/prefpane ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un seul panneau de préférences dans une prefwindow. Un prefpane est constitué de deux parties, les descriptions de préférences qui spécifient l'ensemble des préférences à modifier, et l'interface utilisateur permettant d'ajuster ces préférences. La première est spécifiée à l'aide d'un élément preferences tandis que la seconde peut être spécifiée avec d'autres éléments XUL. -

Chacune de ces parties peut être spécifiée directement comme enfant de l'élément prefpane, ou l'attribut src peut être utilisé pour placer un panneau dans un fichier séparé. Dans ce dernier cas, le fichier séparé doit utiliser une balise overlay comme racine, étant donné qu'il sera chargé comme overlay de la fenêtre de préférences principale. -

Pour plus d'informations, consultez l'article Système de préférences. -

-
Attributs -
helpURI, image, label, onpaneload, selected, src -
-
Propriétés -
image, label, preferenceElements, preferences, selected, src -
-
Méthodes -
preferenceForElement
-

Exemples

-

(exemple nécessaire) -

-

Attributs

-

-

- -
-
- helpURI
-
- Type : URI
-
- L'URI de la page d'aide associée avec un panneau de préférences. Celle-ci sera ouverte dans une fenêtre d'aide lors de l'appui sur le bouton d'aide.
-
-
-
- -
image -
Type : URL d'une image -
L'URL de l'image devant apparaître sur l'élément. Si cet attribut est vide ou omis, aucune image n'apparaîtra. La position de l'image est déterminée par les attributs dir et orient. -
- - -
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
-
- onpaneload
-
- Type : code de script
-
- Le code défini ici est appelé après le chargement du panneau, de manière similaire à l'évènement load pour une fenêtre.
-
-
-
- -
-
- selected
-
- Type : booléen
-
- Cet attribut sera défini à true pour l'élément prefpane actuellement sélectionné. Pour changer le panneau sélectionné, utilisez la méthode showPane de prefwindow.
-
- -
-
- -
-
- src
-
- Type : URL d'un overlay
-
- L'URL du contenu du panneau de préférences. Si cet attribut n'est pas spécifié, le contenu de l'élément prefpane sera utilisé.
-
- - -
- -

Propriétés

-

-

-
image -
Type : URL d'image -
Obtient et définit la valeur de l'attribut image. -
- -
-
-
label -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut label. -
- -
-
-
-
- -
-
selected
-
Type : booléen
-
La valeur de cette propriété est true si cet élément est sélectionné, ou false s'il ne l'est pas. Cette propriété est en lecture seule.
-
-
- -

Méthodes

-

- -

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-

À faire -

-
-
diff --git a/files/fr/archive/mozilla/xul/prefwindow/index.html b/files/fr/archive/mozilla/xul/prefwindow/index.html deleted file mode 100644 index 970f7c07a7..0000000000 --- a/files/fr/archive/mozilla/xul/prefwindow/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: prefwindow -slug: Archive/Mozilla/XUL/prefwindow -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/prefwindow ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Une fenêtre spécialisée utilisée pour les dialogues de préférences. Cet élément devrait être utilisé à la place de la balise window et contenir un ou plusieurs éléments prefpane. Une rangée de boutons apparait dans tout le dialogue de préférences, un par prefpane. Chaque panneau servira généralement à regrouper un ensemble de préférences liées. Si il n'y a qu'un prefpane, la zone de navigation n'apparaitra pas. -

Sur les plateformes où la convention est d'appliquer les changements immédiatement, les préférences sont ajustées dès que l'élément d'interface utilisateur a changé. Sur les autres plateformes, les préférences ne sont pas appliquées tant que le dialogue n'est pas fermé. -

Il est possible d'ouvrir une fenêtre de préférences à l'aide de la méthode openDialog d'une fenêtre comme pour d'autres dialogues. L'id d'un panneau particulier peut être passé comme quatrième paramètre de openDialog pour ouvrir un panneau particulier par défaut. Il est également possible de définir l'attribut lastSelected sur la balise prefwindow en lui donnant l'id du panneau avec lequel démarrer. Cet attribut n'est normalement pas défini, comme il sera positionné automatiquement afin que le panneau par défaut soit le dernier que celui qui était affiché la dernière fois que le dialogue a été fermé. -

Pour plus d'informations, consultez l'article Système de préférences. -

-
Attributs -
buttonalign, buttondir, buttonorient, buttonpack, buttons, defaultButton, lastSelected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onpanelload, title, type -
-
Propriétés -
buttons, currentPane, defaultButton, lastSelected, preferencePanes, type -
-
Méthodes -
acceptDialog, addPane, cancelDialog, centerWindowOnScreen, getButton, openSubDialog, openWindow, showPane -
-

Exemples

-
   <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-     <prefpane id="saveoptions" label="Backups">
-       <preferences>
-         <preference id="pref-backup" name="myapp.mybackups" type="bool"/>
-         <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/>
-       </preferences>
-       <checkbox label="Automatically Save Backups" preference="pref-backup"/>
-       <textbox label="Duration:" preference="pref-backupduration"/>
-     </prefpane>
-   </prefwindow>
-
-

Attributs

-

-

- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
title -
Type : chaîne de caractères -
Le texte qui doit apparaître dans la barre de titre de la fenêtre ou boîte de dialogue. -
-


-

- - -
-
- -

 

-
- -

Propriétés

-

-

-
-
-
-
-
-
type -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut type. -
- -
- -

Méthodes

- - - - - - -
-

Héritées de XUL element
- blur, click, doCommand, focus, getElementsByAttribute getElementsByAttributeNS

Héritées de DOM element
- addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

- -
- - - - - - - -
showPane( <i>prefpane</i> ) -
Type retourné : aucune valeur retournée -
Bascule vers un panneau en particulier. -
-


-

- -

Sujets liés

-

À faire -

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accessible/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accessible/index.html" deleted file mode 100644 index 8a78202c56..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accessible/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: accessible -slug: Archive/Mozilla/XUL/Propriétés/accessible -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/accessible ---- -
« Accueil de la référence XUL
-
accessible -
Type : nsIAccessible -
Renvoie l'objet d'accessibilité pour l'élément. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accessibletype/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accessibletype/index.html" deleted file mode 100644 index 5a9527e78d..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accessibletype/index.html" +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: accessibleType -slug: Archive/Mozilla/XUL/Propriétés/accessibleType -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/accessibleType ---- -
« Accueil de la référence XUL
-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-

Les valeurs possibles sont : -

- -
ConstanteValeur -
XULAlert1001 -
XULButton1002 -
XULCheckbox1003 -
XULColorPicker1004 -
XULColorPickerTile1005 -
XULCombobox1006 -
XULDropmarker1007 -
XULGroupbox1008 -
XULImage1009 -
XULLink100A -
XULListbox100B -
XULListCell1026 -
XULListHead1024 -
XULListHeader1025 -
XULListitem100C -
XULMenubar100D -
XULMenuitem100E -
XULMenupopup100F -
XULMenuSeparator1010 -
XULPane1011 -
XULProgressMeter1012 -
XULScale1013 -
XULStatusBar1014 -
XULRadioButton1015 -
XULRadioGroup1016 -
XULTab1017 -
XULTabBox1018 -
XULTabs1019 -
XULText101A -
XULTextBox101B -
XULThumb101C -
XULTree101D -
XULTreeColumns101E -
XULTreeColumnItem101F -
XULToolbar1020 -
XULToolbarSeparator1021 -
XULTooltip1022 -
XULToolbarButton1023 -
-

</div> -

diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accesskey/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accesskey/index.html" deleted file mode 100644 index 18c8cb6110..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/accesskey/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: accessKey -slug: Archive/Mozilla/XUL/Propriétés/accessKey -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/accessKey ---- -
« Accueil de la référence XUL
-
accessKey -
Type : caractère -
Obtient et définit la valeur de l'attribut accesskey. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/align/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/align/index.html" deleted file mode 100644 index ade556771a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/align/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: align -slug: Archive/Mozilla/XUL/Propriétés/align -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/align ---- -
« Accueil de la référence XUL
-
align -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut align. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/allowevents/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/allowevents/index.html" deleted file mode 100644 index 3a89398e48..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/allowevents/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: allowEvents -slug: Archive/Mozilla/XUL/Propriétés/allowEvents -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/allowEvents ---- -
« Accueil de la référence XUL
-
allowEvents -
Type : booléen -
Obtient et définit la valeur de l'attribut allowevents. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/amindicator/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/amindicator/index.html" deleted file mode 100644 index 3118629abd..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/amindicator/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: amIndicator -slug: Archive/Mozilla/XUL/Propriétés/amIndicator -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/amIndicator ---- -
« Accueil de la référence XUL
-
amIndicator -
Type : chaîne -
La valeur chaîne affichée pour les heures entre minuit et midi, par défaut « AM ». Cette valeur est déterminée selon la locale de l'utilisateur. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/boxobject/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/boxobject/index.html" deleted file mode 100644 index 68284b25f9..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/boxobject/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: boxObject -slug: Archive/Mozilla/XUL/Propriétés/boxObject -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/boxObject ---- -
« Accueil de la référence XUL
-
boxObject -
Type : nsIBoxObject -
Cette propriété est disponible pour les éléments dérivés de boîtes, ce qui est le cas de la plupart des éléments XUL visibles. L'objet boxObject pour les éléments non-XUL peut être obtenu à l'aide de la méthode getBoxObjectFor. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/builder/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/builder/index.html" deleted file mode 100644 index 78acdbec0d..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/builder/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: builder -slug: Archive/Mozilla/XUL/Propriétés/builder -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/builder ---- -
« Accueil de la référence XUL
-
builder -
Type : nsIXULTemplateBuilder -
Pour le contenu généré depuis un template, il s'agit de l'objet XPCOM responsable de la génération du contenu. Pour les scripts il est uniquement nécessaire dans le cas où vous voulez forcer le contenu du template à être régénéré. Vous pouvez en avoir besoin si vous avez ajusté les règles manuellement. Pour reconstruire le contenu, appelez la méthode rebuild du builder. -
-
Par exemple, à partir d'une référence à un arbre myTree, ce code reconstruira son contenu : myTree.builder.rebuild(); -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/classname/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/classname/index.html" deleted file mode 100644 index af031bec76..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/classname/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: className -slug: Archive/Mozilla/XUL/Propriétés/className -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/className ---- -
« Accueil de la référence XUL
-
className -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut class. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/collapsed/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/collapsed/index.html" deleted file mode 100644 index 95dd04a07a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/collapsed/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: collapsed -slug: Archive/Mozilla/XUL/Propriétés/collapsed -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/collapsed ---- -
« Accueil de la référence XUL
-
collapsed -
Type : booléen -
Obtient et définit la valeur de l'attribut collapsed. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/contextmenu/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/contextmenu/index.html" deleted file mode 100644 index 611425d9c8..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/contextmenu/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: contextMenu -slug: Archive/Mozilla/XUL/Propriétés/contextMenu -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/contextMenu ---- -
« Accueil de la référence XUL
-
contextMenu -
Type : id d'élément popup -
Obtient et définit la valeur de l'attribut contextmenu. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/controllers/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/controllers/index.html" deleted file mode 100644 index 28ca9b2f5e..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/controllers/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: controllers -slug: Archive/Mozilla/XUL/Propriétés/controllers -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/controllers ---- -
« Accueil de la référence XUL
-
controllers -
Type : nsIControllers -
Une liste de contrôleurs attachés à l'élément. Les contrôleurs servent à répondre à des commandes. Le répartiteur de commandes du document identifiera les contrôleurs pour gérer une commande à l'aide de la liste de l'élément ayant le focus. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/crop/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/crop/index.html" deleted file mode 100644 index 01aa418b56..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/crop/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: crop -slug: Archive/Mozilla/XUL/Propriétés/crop -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/crop ---- -
« Accueil de la référence XUL
-
crop -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut crop. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/currentitem/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/currentitem/index.html" deleted file mode 100644 index 66ca8b4596..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/currentitem/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: currentItem -slug: Archive/Mozilla/XUL/Propriétés/currentItem -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/currentItem ---- -
« Accueil de la référence XUL
-
currentItem -
Type : élément listitem -
Renvoie le dernier élément sélectionné dans la liste de sélection, ce qui n'est utile que dans une liste à sélection multiple. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/database/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/database/index.html" deleted file mode 100644 index a8ef04ee8b..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/database/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: database -slug: Archive/Mozilla/XUL/Propriétés/database -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/database ---- -
« Accueil de la référence XUL
-
database -
Type : nsIRDFCompositeDataSource -
Renvoie la source de données composite créée lorsque toutes les sources de données de l'élément sont combinées. Défini à null pour les éléments qui n'ont pas d'attribut datasources. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datasources/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datasources/index.html" deleted file mode 100644 index 567dd397fe..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datasources/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: datasources -slug: Archive/Mozilla/XUL/Propriétés/datasources -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/datasources ---- -
« Accueil de la référence XUL
-
datasources -
Type : liste d'URIs de sources de données séparée par des espaces -
Lit et définit la valeur de l'attribut datasources. Dans les nouvelles versions de Mozilla (>1.7), les sources de données seront rechargées et le gabarit reconstruit. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/date/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/date/index.html" deleted file mode 100644 index b82437977f..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/date/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: date -slug: Archive/Mozilla/XUL/Propriétés/date -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/date ---- -
- « Accueil de la référence XUL
-
-
- date
-
- Type : entier
-
- Le jour du mois actuellement sélectionné, entre 1 et 31. Modifiez cette propriété pour changer la date sélectionnée.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/dateleadingzero/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/dateleadingzero/index.html" deleted file mode 100644 index 2de143aeaa..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/dateleadingzero/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: dateLeadingZero -slug: Archive/Mozilla/XUL/Propriétés/dateLeadingZero -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/dateLeadingZero ---- -
- « Accueil de la référence XUL
-
-
- dateLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro doit être affiché avant la date lorsqu'elle est inférieure à 10.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datepicker.open/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datepicker.open/index.html" deleted file mode 100644 index bd302b35f1..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datepicker.open/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: datepicker.open -slug: Archive/Mozilla/XUL/Propriétés/datepicker.open -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/datepicker.open ---- -
- « Accueil de la référence XUL
-
-
- open
-
- Type : booléen
-
- Pour les sélecteurs de date de type popup, spécifie si celui-ci est ouvert. Définissez cette propriété pour ouvrir ou fermer le popup. Pour les autres types de sélecteurs de date, cette propriété est toujours à false.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datepicker.value/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datepicker.value/index.html" deleted file mode 100644 index 0342ffd158..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datepicker.value/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: datepicker.value -slug: Archive/Mozilla/XUL/Propriétés/datepicker.value -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/datepicker.value ---- -
- « Accueil de la référence XUL
-
-
- value
-
- Type : chaîne
-
- La date actuellement sélectionnée au format AAAA/MM/JJ. Contrairement à la propriété month, les mois varient ici dans l'intervalle 01 à 12. Définissez cette propriété pour changer la date sélectionnée.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datevalue/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datevalue/index.html" deleted file mode 100644 index 4872d60184..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/datevalue/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: dateValue -slug: Archive/Mozilla/XUL/Propriétés/dateValue -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/dateValue ---- -
- « Accueil de la référence XUL
-
-
- dateValue
-
- Type : Date
-
- La date actuellement entrée ou sélectionnée dans le sélecteur de date sous la forme d'un objet Date.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/defaultvalue/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/defaultvalue/index.html" deleted file mode 100644 index cd6be12cb3..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/defaultvalue/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: defaultValue -slug: Archive/Mozilla/XUL/Propriétés/defaultValue -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/defaultValue ---- -
« Accueil de la référence XUL
-
defaultValue -
Type : chaîne de caractères -
Définit et obtient la valeur par défaut d'une boîte de texte. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/dir/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/dir/index.html" deleted file mode 100644 index 440727c354..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/dir/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: dir -slug: Archive/Mozilla/XUL/Propriétés/dir -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/dir ---- -
« Accueil de la référence XUL
-
dir -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut dir. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/disabled/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/disabled/index.html" deleted file mode 100644 index 03a25bf5ba..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/disabled/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: disabled -slug: Archive/Mozilla/XUL/Propriétés/disabled -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/disabled ---- -
« Accueil de la référence XUL
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/flex/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/flex/index.html" deleted file mode 100644 index 5514de566a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/flex/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: flex -slug: Archive/Mozilla/XUL/Propriétés/flex -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/flex ---- -
« Accueil de la référence XUL
-
flex -
Type : entier -
Obtient et définit la valeur de l'attribut flex. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/height/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/height/index.html" deleted file mode 100644 index db9a532281..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/height/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: height -slug: Archive/Mozilla/XUL/Propriétés/height -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/height ---- -
« Accueil de la référence XUL
-
height -
Type : entier -
Obtient et définit la valeur de l'attribut height. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hidden/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hidden/index.html" deleted file mode 100644 index d05bc8715b..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hidden/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: hidden -slug: Archive/Mozilla/XUL/Propriétés/hidden -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/hidden ---- -
« Accueil de la référence XUL
-
hidden -
Type : booléen -
Obtient et définit la valeur de l'attribut hidden. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hideseconds/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hideseconds/index.html" deleted file mode 100644 index f5711a3e24..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hideseconds/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: hideSeconds -slug: Archive/Mozilla/XUL/Propriétés/hideSeconds -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/hideSeconds ---- -
- « Accueil de la référence XUL
-
-
- hideSeconds
-
- Type : booléen
-
- Indique si le champ des secondes doit être masqué.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hour/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hour/index.html" deleted file mode 100644 index 0b8d5607d6..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hour/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: hour -slug: Archive/Mozilla/XUL/Propriétés/hour -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/hour ---- -
- « Accueil de la référence XUL
-
-
- hour
-
- Type : entier
-
- La valeur de l'heure actuellement sélectionnée entre 0 et 23. Modifiez cette propriété pour changer l'heure sélectionnée.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hourleadingzero/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hourleadingzero/index.html" deleted file mode 100644 index 88ac335836..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/hourleadingzero/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: hourLeadingZero -slug: Archive/Mozilla/XUL/Propriétés/hourLeadingZero -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/hourLeadingZero ---- -
- « Accueil de la référence XUL
-
-
- hourLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro initial doit être affiché avant l'heure lorsque celle-ci est inférieure à 10.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/id/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/id/index.html" deleted file mode 100644 index d5e6613076..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/id/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: id -slug: Archive/Mozilla/XUL/Propriétés/id -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/id ---- -
« Accueil de la référence XUL
-
id -
Type : id d'élément, doit être unique dans la fenêtre -
Obtient et définit la valeur de l'attribut id. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/image/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/image/index.html" deleted file mode 100644 index b180fa1bff..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/image/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: image -slug: Archive/Mozilla/XUL/Propriétés/image -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/image ---- -
« Accueil de la référence XUL
-
image -
Type : URL d'image -
Obtient et définit la valeur de l'attribut image. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/increment/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/increment/index.html" deleted file mode 100644 index ee048522a2..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/increment/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: increment -slug: Archive/Mozilla/XUL/Propriétés/increment -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/increment ---- -
- « Accueil de la référence XUL
-
-
- increment
-
- Type : entier
-
- Obtient et définit la valeur de l'attribut increment.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/index.html" deleted file mode 100644 index 046b0478cc..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/index.html" +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: Propriétés -slug: Archive/Mozilla/XUL/Propriétés -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property ---- -

« Accueil de la référence XUL -

- -

Propriétés de DOM element liées

- diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/inverted/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/inverted/index.html" deleted file mode 100644 index 658135805f..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/inverted/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: inverted -slug: Archive/Mozilla/XUL/Propriétés/inverted -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/inverted ---- -
« Accueil de la référence XUL
-
inverted -
Type : booléen -
Obtient et définit la valeur de l'attribut inverted. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/is24hourclock/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/is24hourclock/index.html" deleted file mode 100644 index 74e27b6c04..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/is24hourclock/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: is24HourClock -slug: Archive/Mozilla/XUL/Propriétés/is24HourClock -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/is24HourClock ---- -
- « Accueil de la référence XUL
-
-
- is24HourClock
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si l'heure est affichée à l'aide d'une horloge à 24 ou 12 heures. Avec une horloge à 12 heures, un champ supplémentaire permet à l'utilisateur de choisir entre AM et PM.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ispm/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ispm/index.html" deleted file mode 100644 index 37be41eafc..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ispm/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: isPM -slug: Archive/Mozilla/XUL/Propriétés/isPM -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/isPM ---- -
- « Accueil de la référence XUL
-
-
- isPM
-
- Type : booléen
-
- Si cette propriété est à false, l'heure est entre 0 et 11. Si elle est à true, l'heure est supérieure ou égale à 12.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/label/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/label/index.html" deleted file mode 100644 index c913db90bc..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/label/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: label -slug: Archive/Mozilla/XUL/Propriétés/label -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/label ---- -
« Accueil de la référence XUL
-
label -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut label. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/left/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/left/index.html" deleted file mode 100644 index eca1301f70..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/left/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: left -slug: Archive/Mozilla/XUL/Propriétés/left -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/left ---- -
« Accueil de la référence XUL
-
left -
Type : entier -
Obtient et définit la valeur de l'attribut left. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/listboxobject/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/listboxobject/index.html" deleted file mode 100644 index 4d5b75170a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/listboxobject/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: listBoxObject -slug: Archive/Mozilla/XUL/Propriétés/listBoxObject -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/listBoxObject ---- -
« Accueil de la référence XUL
-
listBoxObject -
Type : nsIListBoxObject -
L'objet nsIListBoxObject derrière la liste de sélection. Cette propriété est en lecture seule. La plupart des fonctionnalités de la liste de sélection sont déjà disponibles directement dans l'élément listbox, il sera donc rarement nécessaire d'utiliser cet objet de boîte directement. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/locked/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/locked/index.html" deleted file mode 100644 index 5c097897c0..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/locked/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: locked -slug: Archive/Mozilla/XUL/Propriétés/locked -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/locked ---- -
« Accueil de la référence XUL
-
locked -
Type : booléen -
Si définie à true, la préférence a été verrouillée et désactivée dans la configuration système, ce qui empêche de changer sa valeur. Cette propriété est en lecture seule. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/max/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/max/index.html" deleted file mode 100644 index d8fd66793d..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/max/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: max -slug: Archive/Mozilla/XUL/Propriétés/max -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/max ---- -
« Accueil de la référence XUL
-
max -
Type : entier -
Obtient et définit la valeur de l'attribut max. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/maxheight/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/maxheight/index.html" deleted file mode 100644 index 5a36481266..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/maxheight/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: maxHeight -slug: Archive/Mozilla/XUL/Propriétés/maxHeight -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/maxHeight ---- -
« Accueil de la référence XUL
-
maxHeight -
Type : entier -
Obtient et définit la valeur de l'attribut maxheight. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/maxwidth/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/maxwidth/index.html" deleted file mode 100644 index 48d245dac9..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/maxwidth/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: maxWidth -slug: Archive/Mozilla/XUL/Propriétés/maxWidth -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/maxWidth ---- -
« Accueil de la référence XUL
-
maxWidth -
Type : entier -
Obtient et définit la valeur de l'attribut maxwidth. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/menu/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/menu/index.html" deleted file mode 100644 index a9dbbade7f..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/menu/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: menu -slug: Archive/Mozilla/XUL/Propriétés/menu -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/menu ---- -
« Accueil de la référence XUL
-
menu -
Type : id d'élément popup -
Obtient et définit la valeur de l'attribut menu. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/min/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/min/index.html" deleted file mode 100644 index cc96380d54..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/min/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: min -slug: Archive/Mozilla/XUL/Propriétés/min -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/min ---- -
« Accueil de la référence XUL
-
min -
Type : entier -
Obtient et définit la valeur de l'attribut min. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minheight/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minheight/index.html" deleted file mode 100644 index fc67f0823a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minheight/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: minHeight -slug: Archive/Mozilla/XUL/Propriétés/minHeight -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/minHeight ---- -
« Accueil de la référence XUL
-
minHeight -
Type : entier -
Obtient et définit la valeur de l'attribut minheight. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minute/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minute/index.html" deleted file mode 100644 index f9a70a888a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minute/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: minute -slug: Archive/Mozilla/XUL/Propriétés/minute -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/minute ---- -
- « Accueil de la référence XUL
-
-
- minute
-
- Type : entier
-
- Les minutes de l'heure actuellement sélectionnée entre 0 et 59. Modifiez cette propriété pour changer la minute sélectionnée.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minuteleadingzero/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minuteleadingzero/index.html" deleted file mode 100644 index 47911a397d..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minuteleadingzero/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: minuteLeadingZero -slug: Archive/Mozilla/XUL/Propriétés/minuteLeadingZero -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/minuteLeadingZero ---- -
- « Accueil de la référence XUL
-
-
- minuteLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro initial doit être affiché avant la valeur des minutes lorsque celle-ci est inférieure à 10.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minwidth/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minwidth/index.html" deleted file mode 100644 index 384dc60350..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/minwidth/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: minWidth -slug: Archive/Mozilla/XUL/Propriétés/minWidth -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/minWidth ---- -
« Accueil de la référence XUL
-
minWidth -
Type : integer -
Obtient et définit la valeur de l'attribut minwidth. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/month/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/month/index.html" deleted file mode 100644 index 2bca180dc7..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/month/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: month -slug: Archive/Mozilla/XUL/Propriétés/month -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/month ---- -
- « Accueil de la référence XUL
-
-
- month
-
- Type : entier
-
- Le mois actuellement sélectionné entre 0 (janvier) et 11 (décembre). Définissez cette propriété pour changer le mois sélectionné.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/monthleadingzero/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/monthleadingzero/index.html" deleted file mode 100644 index 942edc6094..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/monthleadingzero/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: monthLeadingZero -slug: Archive/Mozilla/XUL/Propriétés/monthLeadingZero -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/monthLeadingZero ---- -
- « Accueil de la référence XUL
-
-
- monthLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro doit être affiché devant le mois s'il est inférieur à 10.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/name/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/name/index.html" deleted file mode 100644 index 879ae4a5a0..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/name/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: name -slug: Archive/Mozilla/XUL/Propriétés/name -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/name ---- -
« Accueil de la référence XUL
-
name -
Type : chaîne de caractères -
Le nom de la préférence (élément preference) à modifier. Par exemple, la page d'accueil du navigateur est définie par la préférence browser.startup.homepage. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/observes/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/observes/index.html" deleted file mode 100644 index 642fd59922..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/observes/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: observes -slug: Archive/Mozilla/XUL/Propriétés/observes -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/observes ---- -
« Accueil de la référence XUL
-
observes -
Type : id d'élément broadcaster -
Obtient et définit la valeur de l'attribut observes. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/open/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/open/index.html" deleted file mode 100644 index 4d8deac2fb..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/open/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: open -slug: Archive/Mozilla/XUL/Propriétés/open -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/open ---- -
« Accueil de la référence XUL
-
open -
Type : booléen -
Obtient et définit la valeur de l'attribut open. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ordinal/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ordinal/index.html" deleted file mode 100644 index df77eb113a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ordinal/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: ordinal -slug: Archive/Mozilla/XUL/Propriétés/ordinal -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/ordinal ---- -
« Accueil de la référence XUL
-
ordinal -
Type : entier -
Obtient et définit la valeur de l'attribut ordinal. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/orient/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/orient/index.html" deleted file mode 100644 index f965b07278..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/orient/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: orient -slug: Archive/Mozilla/XUL/Propriétés/orient -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/orient ---- -
« Accueil de la référence XUL
-
orient -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut orient. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pack/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pack/index.html" deleted file mode 100644 index fd555d4c49..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pack/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: pack -slug: Archive/Mozilla/XUL/Propriétés/pack -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/pack ---- -
« Accueil de la référence XUL
-
pack -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut pack. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pageincrement/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pageincrement/index.html" deleted file mode 100644 index 17ccd723cd..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pageincrement/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: pageIncrement -slug: Archive/Mozilla/XUL/Propriétés/pageIncrement -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/pageIncrement ---- -
« Accueil de la référence XUL
-
pageIncrement -
Type : entier -
Obtient et définit la valeur de l'attribut pageincrement. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/persist/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/persist/index.html" deleted file mode 100644 index bdc1c330db..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/persist/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: persist -slug: Archive/Mozilla/XUL/Propriétés/persist -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/persist ---- -
« Accueil de la référence XUL
-
persist -
Type : liste de noms d'attributs séparés par des espaces -
Obtient et définit la valeur de l'attribut persist. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pmindicator/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pmindicator/index.html" deleted file mode 100644 index e35b07ba7b..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/pmindicator/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: pmIndicator -slug: Archive/Mozilla/XUL/Propriétés/pmIndicator -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/pmIndicator ---- -
- « Accueil de la référence XUL
-
-
- pmIndicator
-
- Type : chaîne
-
- La valeur chaîne affichée pour les heures entre midi et minuit, par défaut « PM ». Cette valeur est déterminée selon la locale de l'utilisateur.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/popupboxobject/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/popupboxobject/index.html" deleted file mode 100644 index 73c7b44900..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/popupboxobject/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: popupBoxObject -slug: Archive/Mozilla/XUL/Propriétés/popupBoxObject -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/popupBoxObject ---- -
« Accueil de la référence XUL
-
popupBoxObject -
Type : nsIPopupBoxObject -
Cette propriété en lecture seule conserve le nsIPopupBoxObject qui implémente le popup. Il n'est normalement pas nécessaire d'utiliser cette propriété étant donné que toutes ses fonctions sont disponibles via le popup lui-même. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/position/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/position/index.html" deleted file mode 100644 index a48b08003e..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/position/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: position -slug: Archive/Mozilla/XUL/Propriétés/position -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/position ---- -
« Accueil de la référence XUL
-
position -
Type : chaîne -
Obtient et définit la valeur de l'attribut position. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/preference.preferences/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/preference.preferences/index.html" deleted file mode 100644 index 04e39427d6..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/preference.preferences/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: preference.preferences -slug: Archive/Mozilla/XUL/Propriétés/preference.preferences -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/preference.preferences ---- -
« Accueil de la référence XUL
-
preferences -
Type : élément -
Référence à l'élément preferences conteneur. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/readonly/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/readonly/index.html" deleted file mode 100644 index f6fd6c6c5a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/readonly/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: readonly -slug: Archive/Mozilla/XUL/Propriétés/readOnly -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/readOnly ---- -
- « Accueil de la référence XUL
-
-
- readonly
-
- Type : booléen
-
- Si définie à true, l'utilisateur ne peut pas modifier la valeur de l'élément.
-
-
- Cette propriété toute en minuscules n'est utilisée qu'avec l'élément preference et sera peut-être renommée en readOnly dans des versions ultérieures. D'autres éléments utilisent la propriété readOnly. L'attribut correspondant est cependant readonly en minuscules.
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ref/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ref/index.html" deleted file mode 100644 index 68f38ce84b..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/ref/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: ref -slug: Archive/Mozilla/XUL/Propriétés/ref -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/ref ---- -
« Accueil de la référence XUL
-
ref -
Type : URI d'une ressource RDF -
Obtient et définit la valeur de l'attribut ref. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/resource/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/resource/index.html" deleted file mode 100644 index d791d97a80..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/resource/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: resource -slug: Archive/Mozilla/XUL/Propriétés/resource -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/resource ---- -
« Accueil de la référence XUL
-
resource -
Type : nsIRDFResource -
Renvoie une ressource RDF avec la valeur de l'attribut ref de l'élément. Si cet élément ref n'est pas spécifié, l'attribut id sera utilisé à la place. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/second/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/second/index.html" deleted file mode 100644 index ae2c271580..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/second/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: second -slug: Archive/Mozilla/XUL/Propriétés/second -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/second ---- -
- « Accueil de la référence XUL
-
-
- second
-
- Type : entier
-
- La valeur des secondes de l'heure actuellement sélectionnée, entre 0 et 59. Modifiez cette propriété pour changer la seconde sélectionnée.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/secondleadingzero/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/secondleadingzero/index.html" deleted file mode 100644 index 72d843df5d..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/secondleadingzero/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: secondLeadingZero -slug: Archive/Mozilla/XUL/Propriétés/secondLeadingZero -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/secondLeadingZero ---- -
- « Accueil de la référence XUL
-
-
- secondLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro initial doit être affiché avant la valeur des secondes si celle-ci est inférieure à 10.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selected/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selected/index.html" deleted file mode 100644 index 680f617876..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selected/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: selected -slug: Archive/Mozilla/XUL/Propriétés/selected -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/selected ---- -
« Accueil de la référence XUL
- -
-
selected
-
Type : booléen
-
La valeur de cette propriété est true si cet élément est sélectionné, ou false s'il ne l'est pas. Cette propriété est en lecture seule.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selectedindex/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selectedindex/index.html" deleted file mode 100644 index 6d9e555cf2..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selectedindex/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: selectedIndex -slug: Archive/Mozilla/XUL/Propriétés/selectedIndex -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/selectedIndex ---- -
« Accueil de la référence XUL
-
selectedIndex -
Type : entier -
Renvoie l'indice de l'élément actuellement sélectionné. Un élément peut être sélectionné en assignant son indice à cette propriété. En lui assignant -1, tous les éléments seront désélectionnés. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selecteditem/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selecteditem/index.html" deleted file mode 100644 index 221bd2cf1a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/selecteditem/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: selectedItem -slug: Archive/Mozilla/XUL/Propriétés/selectedItem -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/selectedItem ---- -
« Accueil de la référence XUL
-
selectedItem -
Type : élément -
Conserve l'élément actuellement sélectionné. Si aucun élément n'est sélectionné, sa valeur sera null. Vous pouvez sélectionner un élément en définissant cette valeur. Un évènement select sera envoyé à cet élément lorsqu'il est sélectionné en modifiant cette propriété, la propriété selectedIndex, ou par l'utilisateur. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/seltype/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/seltype/index.html" deleted file mode 100644 index 7c2cb97223..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/seltype/index.html" +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: selType -slug: Archive/Mozilla/XUL/Propriétés/selType -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/selType ---- -
- « Accueil de la référence XUL
-
-
- selType<magic name="\"PAGENAME\"/"></magic>
-
- Type : - - chaîne de caractères -
-
- Obtient et définit la valeur de l'attribut seltype.
-
-
-  
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/state/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/state/index.html" deleted file mode 100644 index 0539f20aea..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/state/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: state -slug: Archive/Mozilla/XUL/Propriétés/state -tags: - - Attributs_XUL - - Référence_XUL -translation_of: Archive/Mozilla/XUL/Property/state ---- -
« Accueil de la référence XUL
-
state -
Type : chaîne -
Cette propriété en lecture seule indique si le popup est ouvert ou non. Quatre valeurs sont possibles : -
- -
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/statustext/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/statustext/index.html" deleted file mode 100644 index e8d0c5f93c..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/statustext/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: statusText -slug: Archive/Mozilla/XUL/Propriétés/statusText -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/statusText ---- -
« Accueil de la référence XUL
-
statusText -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut statustext. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/style/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/style/index.html" deleted file mode 100644 index 2ac332eb3b..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/style/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: style -slug: Archive/Mozilla/XUL/Propriétés/style -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/style ---- -
« Accueil de la référence XUL
-
style -
Type : style CSS inline -
Obtient et définit la valeur de l'attribut style. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/suppressonselect/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/suppressonselect/index.html" deleted file mode 100644 index fb43cec3fe..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/suppressonselect/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: suppressOnSelect -slug: Archive/Mozilla/XUL/Propriétés/suppressOnSelect -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/suppressOnSelect ---- -
- « Accueil de la référence XUL
-
-
- suppressOnSelect
-
- Type : - - booléen -
-
- Obtient et définit la valeur de l'attribut suppressonselect.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tabindex/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tabindex/index.html" deleted file mode 100644 index cb59c74840..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tabindex/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: tabIndex -slug: Archive/Mozilla/XUL/Propriétés/tabIndex -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/tabIndex ---- -
« Accueil de la référence XUL
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/timepicker.value/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/timepicker.value/index.html" deleted file mode 100644 index 2629a7774d..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/timepicker.value/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: timepicker.value -slug: Archive/Mozilla/XUL/Propriétés/timepicker.value -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/timepicker.value ---- -
- « Accueil de la référence XUL
-
-
- value
-
- Type : chaîne
-
- L'heure actuellement entrée sous la forme HH:MM:SS. Modifiez cette propriété pour changer cette heure.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tooltip/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tooltip/index.html" deleted file mode 100644 index 0b2a5e95e3..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tooltip/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: tooltip -slug: Archive/Mozilla/XUL/Propriétés/tooltip -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/tooltip ---- -
« Accueil de la référence XUL
-
tooltip -
Type : id d'élément tooltip -
Obtient et définit la valeur de l'attribut tooltip. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tooltiptext/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tooltiptext/index.html" deleted file mode 100644 index 0ad5b618ee..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/tooltiptext/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: tooltipText -slug: Archive/Mozilla/XUL/Propriétés/tooltipText -tags: - - Propriétés_XUL - - XUL -translation_of: Archive/Mozilla/XUL/Property/tooltipText ---- -
- « Accueil de la référence XUL
-
-
- tooltipText
-
- Type : - - chaîne de caractères -
-
- Obtient et définit la valeur de l'attribut tooltiptext.
-
-
-  
-

 

diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/top/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/top/index.html" deleted file mode 100644 index 204e928123..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/top/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: top -slug: Archive/Mozilla/XUL/Propriétés/top -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/top ---- -
« Accueil de la référence XUL
-
top -
Type : entier -
Obtient et définit la valeur de l'attribut top. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/type/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/type/index.html" deleted file mode 100644 index 450c40e124..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/type/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: type -slug: Archive/Mozilla/XUL/Propriétés/type -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/type ---- -
« Accueil de la référence XUL
-
type -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut type. -
-
-

Voir également

- -
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/value/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/value/index.html" deleted file mode 100644 index ff5257202b..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/value/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: value -slug: Archive/Mozilla/XUL/Propriétés/value -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/value ---- -
« Accueil de la référence XUL
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/width/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/width/index.html" deleted file mode 100644 index 9b58bd9c1a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/width/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: width -slug: Archive/Mozilla/XUL/Propriétés/width -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/width ---- -
« Accueil de la référence XUL
-
width -
Type : entier -
Obtient et définit la valeur de l'attribut width. -
-


-

-
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/year/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/year/index.html" deleted file mode 100644 index 0c01e08e7a..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/year/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: year -slug: Archive/Mozilla/XUL/Propriétés/year -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/year ---- -
- « Accueil de la référence XUL
-
-
- year
-
- Type : entier
-
- L'année actuellement sélectionnée entre 1 et 9999. Définissez cette propriété pour changer la date sélectionnée.
-
diff --git "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/yearleadingzero/index.html" "b/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/yearleadingzero/index.html" deleted file mode 100644 index ef949e53e4..0000000000 --- "a/files/fr/archive/mozilla/xul/propri\303\251t\303\251s/yearleadingzero/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: yearLeadingZero -slug: Archive/Mozilla/XUL/Propriétés/yearLeadingZero -tags: - - Propriétés_XUL -translation_of: Archive/Mozilla/XUL/Property/yearLeadingZero ---- -
- « Accueil de la référence XUL
-
-
- yearLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro doit être affiché devant l'année si elle est inférieure à 1000.
-
diff --git "a/files/fr/archive/mozilla/xul/recommandations_accessibilit\303\251_pour_xul/index.html" "b/files/fr/archive/mozilla/xul/recommandations_accessibilit\303\251_pour_xul/index.html" deleted file mode 100644 index 000f7b13c8..0000000000 --- "a/files/fr/archive/mozilla/xul/recommandations_accessibilit\303\251_pour_xul/index.html" +++ /dev/null @@ -1,484 +0,0 @@ ---- -title: Recommandations d'accessibilité pour XUL -slug: Archive/Mozilla/XUL/Recommandations_accessibilité_pour_XUL -tags: - - Accessibilité - - XUL -translation_of: Archive/Mozilla/XUL/XUL_accessibility_guidelines ---- -

Introduction

- -

Bienvenue dans les recommandations d'accessibilité pour XUL. En suivant ces principes et pratiques, vous pourrez écrire des applications XUL de manière à ce que tous les utilisateurs, même ceux souffrant de handicaps physiques, sensoriels ou communicatifs puissent l'utiliser et l'apprécier. L'accessibilité n'a rien de difficile, mais nécessite une compréhension basique des différents types de handicaps, des technologies assistives courantes et des fonctionnalités spéciales d'accessibilité fournies par le langage XUL. Plus que tout, l'accessibilité a besoin d'un effort conscient de votre part, et d'un désir d'intégrer tout le monde.

- -

Nous espérons que ces recommandations seront suffisamment claires et détaillées pour que tout le monde — même ceux qui n'ont aucune expérience dans le domaine de l'accessibilité — puisse les comprendre. Il existe également une communauté de développeurs spécialisés dans l'accessibilité au sein du projet Mozilla qui n'hésiteront pas à vous aider pour toutes les inquiétudes et questions suscitées par le fait de rendre vos applications XUL entièrement accessibles.

- - - - - - - - - - - - - - - -
Pour en savoir plus
AccessibilitéFonctionnalités de la plateformeCommunauté Mozilla
Software Accessibility - Where Are We Today? Introduction à l'accessibilité, aux technologies assistives et ressources concernant Mozilla. -

Introduction to Web Accessibility. Aperçu de l'accessibilité Web de WebAIM.

- -

Dive Into Accessibility. Livre téléchargeable sur l'accessibilité Web avec astuces et mises en situation.

- -

Technology Compatibility. Liste de technologies assistives courantes et de leurs niveaux de compatibilité respectifs avec XUL.

- #accessibility. Canal IRC sur l'accessibilité pour des discussions générales autour de l'accessibilité sur Internet. Utile lors de conférences.		Apple Accessibility. Portail d'accessibilité d'Apple. -

LARS (Linux Accessibility Resource Site). Portail sur l'accessibilité générale sous Linux.

- Microsoft Accessibility. Portail pour l'accessibilité chez Microsoft.		Accessibilité - MDC. Centre d'accessibilité sur le Mozilla Developer Center. -

mozilla.support.accessibility. Newsgroup sur l'accessibilité dans Mozilla.

- #accessibility. Canal sur l'accessibilité sur le serveur IRC de Mozilla.
- -

 

- -

Recommandations

- -

Accès au clavier

- -

L'accès au clavier est important pour les utilisateurs ne pouvant pas utiliser de souris. Beaucoup d'utilisateurs de lecteurs d'écran et de handicapés physiques s'appuient sur le clavier comme outil d'entrée principal. Ces utilisateurs ont besoin d'un contrôle au clavier aisé, prévisible et bien documenté.

- -

Ordre de tabulation

- -

Fournissez un ordre de tabulation logique et assurez-vous que les utilisateurs puissent naviguer parmi tout le contenu à l'aide d'un clavier. Par défaut, l'ordre de tabulation est déterminé par l'ordre des éléments dans le code sous-jacent. Il peut également être redéfini programmatiquement à l'aide de l'attribut tabindex si nécessaire, mais cela doit se faire avec modération et être testé en profondeur lorsqu'on l'utilise. L'ordre de navigation doit être logique, généralement de gauche à droite et de haut en bas. L'ordre de navigation peut varier selon la nature de l'application ou le sens de lecture de la langue utilisée.

- -

Assurez-vous que l'ordre de tabulation est logique et que l'on puisse accéder à tous les éléments interactifs simplement sans utiliser de souris. Vous devriez arriver à effectuer toutes les tâches possibles, que ce soit directement dans l'application ou depuis des éléments du menu ou de menus contextuels.

- -

Arbres

- -

Fournissez une manière alternative d'effectuer les opérations inaccessibles. Le sélecteur de colonne et les en-têtes de colonne dans les arbres XUL ne sont pas accessibles au clavier, pour respecter le comportement standard des arbres sur la plupart des systèmes d'exploitations actuels. Il est donc nécessaire de fournir une alternative accessible au clavier pour accéder à ces fonctions.

- -
Aperçu du menu Affichage de la gestion des marque-pages de Firefox.
- -

Un exemple d'arbre plus accessible est visible dans le gestionnaire de marque-pages de Firefox. Celui-ci permet aux utilisateurs de trier les marque-pages selon une certaine colonne d'information et de choisir les colonnes à afficher. Comme les en-têtes de colonne et le sélecteur de colonne, dans le coin supérieur droit de l'arbre, ne peuvent pas recevoir le focus, ils ne sont pas accessibles au clavier. Dans le gestionnaire de marque-pages, cette fonctionnalité est rendue accessible au clavier via le menu Affichage.

- -

Boutons de barres d'outils

- -

Par défaut, les boutons de barres d'outils ne peuvent pas recevoir le focus depuis le clavier. La manière conseillée de remédier à ce problème est de dupliquer toute fonctionnalité associée avec une barre d'outils ailleurs dans l'application, via un élément de menu principal ou contextuel par exemple. Dans les cas où cette duplication n'est pas possible (comme dans une fenêtre sans barre de menus), il est possible de permettre aux boutons de barres d'outils d'obtenir le focus en ajoutant la règle CSS spéciale -moz-user-focus: normal. (La fenêtre d'aperçu avant impression de Firefox utilise cette technique de secours.) Cela ne doit se faire qu'en dernier ressort, et être cohérent au sein d'une même fenêtre (c'est-à-dire que soit tous les boutons sont accessibles au clavier, soit aucun ne l'est).

- -

Raccourcis clavier

- -

Les raccourcis clavier sont très utiles pour les utilisateurs devant naviguer au clavier. Il existe de nombreuses manières d'en fournir. Celles-ci sont bien documentées dans le Tutoriel XUL:Raccourcis clavier.

- -

Il convient de faire particulièrement attention lors du choix des raccourcis clavier. Lors de la création d'une extension (que ce soit pour Firefox ou une autre application XUL), assurez-vous que les raccourcis clavier que vous définissez n'interfèrent pas avec ceux déjà définis par l'application de base. Reportez-vous aux ressources suivantes lors de la définition de raccourcis clavier.

- -
- - - - - - - - - - -
En savoir plus
Raccourcis clavier et touches d'accès rapides
Mozilla Keyboard Planning FAQ and Cross Reference. Un excellent guide pour déterminer les combinaisons de touches non utilisées et les problèmes dépendant de la plateforme. -

Mozilla Keyboard Shortcuts. Une liste complète des raccourcis clavier des diverses applications Mozilla.

- Mozilla's accesskey FAQ. Une courte référence sur l'utilisation de l'attribut accesskey.
-
- - - -

Le menu contextuel est le petit menu activé par un clic droit de la souris sur une zone de contenu ou un élément (ou à l'aide de Shift + F10 ou VK_APPS sous Windows et Ctrl + Click ou Ctrl + Espace sur un Mac). Utilisez le gestionnaire d'évènement oncontextmenu ou l'attribut context pour créer des menus contextuels. Ne les codez pas pour s'ouvrir spécifiquement lors d'un clic-droit. L'évènement oncontextmenu et l'attribut context fonctionnent avec les déclencheurs de menus spécifiques à chaque plateforme, que ce soient les touches du clavier ou les clics de souris appropriés.

- -

Scripts dépendant de la souris

- -

Les fonctions associées aux évènements souris comme onmouseover, onmousemove et ondrag peuvent uniquement être activés à l'aide de la souris. Fournissez des points d'accès alternatifs au clavier pour ces fonctions. Envisagez d'utiliser des éléments de menus contextuels ou d'autres éléments XUL parallèlement aux raccourcis clavier.

- -

Défilement

- -

Assurez-vous que le défilement est possible au clavier. Beaucoup d'éléments XUL peuvent être rendus défilables à l'aide de CSS. D'autres éléments, comme arrowscrollbox et listbox, sont conçus pour défiler automatiquement. En règle générale, les éléments prévus pour défiler sont inaccessibles si l'utilisateur ne peut pas faire défiler tout le contenu à l'aide du clavier. L'élément arrowscrollbox, par exemple, ne peut pas recevoir le focus ni défiler à l'aide du clavier. Un élément listbox, par contre, peut recevoir le focus et son contenu peut défiler. À peu près tous les éléments XUL peuvent être rendus défilables en définissant un style "overflow: auto" ou "overflow: scroll". Cette flexibilité doit être utilisée de manière réfléchie.

- -

Maintien du focus

- -

L'utilisateur doit typiquement pouvoir contrôler l'endroit où se trouve le focus actuel. Évitez de changer le focus automatiquement. Cependant, désactiver, masquer ou détruire l'élément qui a le focus (ou l'un de ses éléments parents) peut provoquer la perte du focus. Pour empêcher cela, déplacez le focus à l'élément suivant avant de désactiver, masquer ou détruire l'élément qui a le focus.

- -

L'exemple qui suit montre une fonction JavaScript qui peut être appelée avant de détruire un élément pour vérifier s'il a le focus et le déplacer si nécessaire.

- -
function moveFocus(element)
-{
-    if(element == document.commandDispatcher.focusedElement)
-    {
-        document.commandDispatcher.advanceFocus();
-        return true;
-    }
-
-    return false;
-}
-
- -


- Les changements de focus inattendus peuvent embrouiller ou désorienter les utilisateurs. Un exemple récurrent concerne les numéros de téléphones à entrer dans des champs de formulaire. Les numéros de téléphone aux États-Unis sont souvent affichés dans un format XXX-XXX-XXXX ou (XXX) XXX-XXXX. Pour conserver ce format, certains formulaires contiennent trois champs différents. Le problème se pose lorsqu'un développeur décide d'ajouter une fonctionnalité sautant vers le second champ du formulaire dès que 3 chiffres ont été entrés dans le premier champ de formulaire. Ce comportement se répète pour le champ suivant du formulaire. Les utilisateurs qui ont l'habitude de se déplacer eux-mêmes dans les champs de formulaire se retrouvent souvent à répéter l'opération de passage au champ suivant et passent donc au dessus d'un des champs du formulaire.

- -

Focus initial dans un dialogue

- -

Le focus initial dans une fenêtre de dialogue XUL (c'est-à-dire le focus à l'ouverture de la fenêtre) devrait toujours se trouver sur un contrôle spécifique et non sur le dialogue lui-même. Dans un dialogue comportant des onglets, le focus doit généralement commencer au premier contrôle de l'onglet sélectionné. Dans tous les autres dialogues, le focus doit commencer au premier contrôle (bien qu'il puisse s'agir de n'importe quel autre contrôle s'il y a une bonne raison de le faire, du moment que ce n'est pas le dialogue lui-même).

- -

Test de l'accès au clavier

- -

Pour tester l'accessibilité au clavier débranchez ou désactivez simplement votre souris et essayez d'utiliser votre application uniquement avec le clavier. Vérifiez que l'ordre de tabulation est logique. Assurez-vous de pouvoir accéder à toutes les fonctions soit directement, soit par des moyens alternatifs comme des choix de menus ou des menus contextuels. Assurez-vous également que l'utilisateur puisse lire tout le contenu.

- -

Informations assistives

- -

Les utilisateurs de technologies assistives ont souvent besoin d'un balisage supplémentaire pour comprendre des significations et associations qui peuvent être intuitives pour les utilisateurs valides. Ce balisage supplémentaire est appelé information assistive. Il est aisé de fournir ces informations, mais on l'oublie souvent car elles ne produisent que très peu de changements visuels, voire aucun.

- -

Texte alternatif

- -

Fournissez un texte alternatif pour les images significatives. Il n'est pas nécessaire d'ajouter un texte alternatif lorsqu'une image assure une fonction purement décorative. Utilisez l'attribut alt pour décrire les images HTML et l'attribut tooltiptext pour les éléments XUL utilisant des images (c'est-à-dire les éléments image et les boutons avec images). Pour les boutons de barres d'outils avec images, on recommande d'utiliser à la fois une étiquette textuelle dans l'attribut label et un texte alternatif pour l'image dans l'attribut tooltiptext. Voyez les exemples de code ci-dessous.

- -
<image src="stop.png" tooltiptext="Stop" />
-
-<html:img src="stop.jpg" alt="Stop" />
-<html:img src="image_decorative.jpg" alt="" /> <!-- En HTML, l'attribut alt est obligatoire. -->
-
-<toolbarbutton label="Stop" image="stop.png" tooltiptext="Arrêter le chargement de la page" />
-
- -

Titres

- -

Fournissez des titres uniques aux éléments conteneurs des fenêtres, assistants et dialogues. Les titres fournissent aux utilisateurs les informations les informations les plus basiques concernant l'application. Le titre est souvent la première chose qui est prononcée par un lecteur d'écran lorsqu'une application est ouverte ou activée. Les utilisateurs peuvent également se référer au titre pour comprendre où ils se situent. Les titres sont affichés dans la barre supérieure d'une application. Voyez les exemples de code ci-dessous.

- -
<dialog id="print_dialog" title="Imprimer"                  ...>
-<window id="mywindow"     title="Mon application"           ...>
-<wizard id="reg_window"   title="Enregistrer le logiciel"   ...>
-
- -

Labels de formulaires

- -

Les labels ne sont pas automatiquement associés aux éléments de formulaires. Utilisez l'attribut control pour lier une étiquette texte (d'un élément label ou de description) à un élément de formulaire. Les lecteurs d'écran liront alors le label lors du remplissage d'un champ de forumlaire.

- -
<label control="login-username" value="Utilisateur :"/>
-<textbox id="login-username"/>
-
-<description control="login-password">Mot de passe :</description>
-<textbox id="login-password" type="password"/>
-
- -

Les formulaires plus grand peuvent être difficiles à mettre en page et à structurer. Bien qu'il y ait toujours de nombreuses manières de structurer un formulaire visuellement, fournissez toujours un label texte pour chaque élément de formulaire. Il ne faut pas utiliser des éléments de formulaire pour en décrire d'autres.

- -
Capture d'écran du panneau Vie privé des options de Firefox.
- -

Lorsque des éléments de formulaire sont intégrés dans un groupbox avec une étiquette, les technologies assistives comme les lecteurs d'écran liront cette étiquette suivie du label de l'élément de formulaire. Par exemple, dans la section Vie privée des options, il y a trois groupes appelés Historique, Cookies et Vie privée. Si l'utilisateur se déplace avec la tabulation vers le bouton « Exceptions... », il entendra « cookies {pause} exceptions {pause} bouton. » L'élément suivant dira « cookies {pause} les conserver jusqu'à {pause} leur expiration {pause} un sur trois {pause} liste déroulante ». Si le lecteur d'écran lisait uniquement le label, l'utilisateur devrait deviner à quoi se référait le bouton « exceptions » ou la liste déroulante « les conserver jusqu'à ».

- -

Les groupes de contrôles sont essentiels pour les boutons radios ou groupes de cases à cocher concernant un thème similaire (c'est-à-dire où il faut cocher toutes celles qui s'appliquent). Si vous trouvez que des groupes de contrôles imbriqués sont peu agréables visuellement, utilisez CSS pour cacher la bordure du groupe interne afin qu'il reste visible dans le code pour servir aux utilisateurs de technologies assistives.

- -

Les formulaires complexes ont souvent besoin d'un système d'étiquetage plus avancé que ce qui est possible avec les attributs XUL standards. Par exemple, le premier élément du panneau Vie privée des options de Firefox (montré et décrit plus haut) est [case à cocher] Se souvenir des pages visitées lors des [textbox] derniers jours. La difficulté ici provient du fait que le label correct pour la case à cocher (« Se souvenir des pages visitées lors des x derniers jours ») est composé de trois pièces différentes, dont la seconde est la valeur actuellement entrée dans la boîte de texte. Le label correct pour la boîte de texte est en fait le même, mais on ne voudrait pas que les technologies assistives le lisent ou le montrent deux fois de suite. Ce qu'il faut, c'est une manière de spécifier dans le code source que la case à cocher, le champ d'édition et les labels textuels autour font tous partie d'une seule entité, et qu'ils s'étiquettent en quelque sorte l'un l'autre.

- -

Pour résoudre ce problème, on entourera d'abord tous ces contrôles dans un seul élément conteneur, comme (dans ce cas-ci) un hbox. On importe ensuite ce qu'on appelle « l'Accessible, Adaptable Applications Module » (du groupe WAI-ARIA du WC3) en ajoutant xmlns:aaa="http://www.w3.org/2005/07/aaa" comme attribut sur l'élément conteneur. Ceci nous permet d'utiliser l'attribut labelledby (notez le double L — aaa utilise l'orthographe anglaise du Royaume-Uni) pour spécifier que la case à cocher et la boîte de texte sont toutes deux décrites par l'ensemble du groupe de composants. Dans XUL, cela ressemblera à ce qui suit.

- -
<hbox id="historyBox" xmlns:aaa="http://www.w3.org/2005/07/aaa">
-  <checkbox id="rememberHistoryDays" aaa:labelledby="historyBox" label="Se souvenir des pages visitées lors des"/>
-  <textbox  id="historyDays"         aaa:labelledby="historyBox"/>
-  <label>derniers jours.</label>
-</hbox>
-
- -

Test des informations assistives

- -

La meilleure manière de tester est pour de nombreuses raisons de faire le test avec un lecteur d'écran, car la navigation au clavier et la structure sémantique sous-jacente de l'interface utilisateur peuvent être testées simultanément. C'est un excellent indicateur concernant l'accessibilité d'une interface utilisateur, mais en aucun cas un test complet. En fin de compte, pour les applications qui doivent être entièrement accessibles, il est préférable que l'application soit testée par un large panel d'utilisateurs disposant de différentes configurations logicielles et de différentes technologies assistives.

- -

Si vous ne disposez pas d'un logiciel lecteur d'écran (et ne connaissez personne dont c'est le cas), votre meilleure option est de vérifier attentivement le code source pour vous assurer que toutes les règles ci-dessus ont été suivies, et ensuite que les utilisateurs ont un moyen de vous contacter en retour sur l'accessibilité (et d'autres aspects) de votre application.

- -

Affichage

- -

On entend souvent que « la présentation fait tout ». Bien qu'il soit vrai que la présentation est quelque chose d'essentiel, les documents doivent également être structurés de manière à ce que l'utilisateur puisse appeler des préférences d'affichage qui peuvent être nécessaires pour l'accessibilité. La présentation doit aussi être flexible pour s'adapter au redimensionnement des fenêtres et polices. Les applications coopératives s'adaptent bien à l'environnement de l'utilisateur.

- -

Paramètres par défaut du système

- -

Respectez les réglages par défaut du système. Beaucoup d'utilisateurs configurent leur ordinateur pour utiliser des polices plus grandes et/ou des thèmes de couleur particuliers. Par défaut, les menus XUL, labels et autres contrôles obtiennent leur police, taille et paramètres de couleur des réglages de l'utilisateur spécifiés par le système d'exploitation. Respectez ces réglages à moins d'avoir une raison particulière et inévitable de les changer. Le cas échéant, utilisez CSS pour dimensionner les éléments par rapport à leurs tailles par défaut (par exemple, utilisez des tailles en % ou em plutôt que des tailles spécifiques en points ou en pixels).

- -

Couleurs

- -

La couleur est un outil important. Des couleurs différentes peuvent donner des significations différentes aux objets et au texte. Cependant, la couleur seule est inadéquate pour communiquer un sens ou une information particulière à l'utilisateur. Certains, principalement ceux qui sont aveugles ou ne voient pas les couleurs, n'arriveront pas à discerner certaines couleurs. Certains utilisateurs peuvent modifier le schéma de couleurs par défaut de votre application. La couleur doit uniquement être utilisée pour souligner la signification d'un objet ou d'un texte après avoir donné cette signification à l'utilisateur d'une autre manière.

- -

Tailles flexibles

- -

Un des avantages d'XUL est que l'apparence visuelle est très facile à contrôler. Sur le Web, la mise en page est souvent contrainte dans une taille spécifique. Avec XUL, vous pouvez permettre aux éléments de s'étendre lorsque la fenêtre de l'application est redimensionnée. Utilisez l'attribut flex pour fournir cette fonctionnalité.

- -

Test de l'affichage

- -

Vérifiez que votre application est fonctionnelle et que son apparence est plaisante en utilisant des polices et couleurs définies par l'utilisateur. Pour cela, changez les paramètres d'affichage du système en un thème accessible (comme le thème Contraste élevé sous Windows, disponible par Alt-Gauche + Maj-Gauche + Impr. Écran). Assurez-vous que le texte est mis en évidence correctement que que la couleur n'est pas utilisée comme seule manière de communiquer une signification. Assurez-vous également que lorsque les fenêtres sont redimensionnées, votre application s'adapte de bonne grâce.

- -

Interaction entre l'homme et la machine

- -

Lorsque vous utilisez une application, vous vous attendez à disposer d'un certain contrôle et d'un retour sur ce qui se passe. Fournissez aux utilisateurs des instructions et indications claires, et permettez-leur de corriger leurs erreurs. Certains utilisateurs handicapés ont des difficultés lorsqu'on leur demande une réponse rapide. Donnez-leur un temps adéquat pour effectuer leurs tâches.

- -

Instructions

- -

Fournissez une documentation d'aide aux utilisateurs. Même des applications très simples devraient contenir un document d'aide ou un manuel de référence pour l'utilisateur. Décrivez les raccourcis claver et toutes autres considérations concernant l'accessibilité. Les utilisateurs doivent avoir la possibilité de consulter une description complète de toutes les fonctionnalités majeures d'une application. Fournissez également des détails sur l'utilisation de la documentation d'aide lorsqu'elle est longue ou complexe.

- -

Avertissements

- -

Utilisez des avertissements accessibles pour présenter des informations importantes à l'utilisateur. Utilisez des scripts ou l'élément notificationbox pour déclencher des alertes.

- -

Évitez d'utiliser uniquement des alertes audio ou visuelles pour signaler des évènements urgents. Les utilisateurs qui ont réduit ou coupé le son, ou qui sont sourds ou malentendants ne pourront pas reconnaître des alertes uniquement sonores. Les utilisateurs souffrant de déficiences visuelles ne verront pas non plus les alertes qui sont purement visuelles (à moins que celles-ci soient présentées dans un texte fonctionnel également accessible à un lecteur d'écran).

- -

Éléments interactifs

- -

Évitez les petites cibles, qui sont difficiles à voir et à atteindre avec un clic de souris. Vérifiez que la mise en page et le contraste sont suffisants pour distinguer les éléments interactifs les un des autres et par rapport aux parties statiques de l'application.

- -

Récupération en cas d'erreur

- -

Lorsque l'utilisateur provoque une erreur dans une application, permettez une récupération aisée. Par exemple, si l'utilisateur entre des lettres là où un nombre est attendu dans un formulaire, cela ne doit pas faire planter l'application. L'utilisateur doit être averti du problème et pouvoir corriger l'erreur.

- -

Temps de réponse

- -

Le cas échéant, avertissez l'utilisateur des limites de temps et permettez-lui d'ajuster la limite ou de demander plus de temps. Un des miracles de la technologie moderne est qu'elle permet aux personnes souffrant même des plus sévères limitations physiques d'utiliser des ordinateurs. Certains utilisent des contrôles à la bouche ou des périphériques de détection de mouvements comme des capteurs oculaires pour entrer des informations. Ce processus peut être lent. D'autres utilisateurs ont simplement besoin de temps pour comprendre ce qui se produit dans l'application.

- -

Test de l'interaction homme machine

- -

Assurez-vous que la documentation d'aide est à jour. Vérifiez que les avertissements sont affichés à l'aides des éléments XUL appropriés. Assurez-vous que l'utilisateur est informé de toutes ses erreurs et que des instructions et la possibilité d'effectuer à nouveau l'opération correcte sont fournies. Assurez-vous également que les utilisateurs ont le contrôle de leur temps de réponse.

- -

Médias

- -

Audio

- -

Des fichiers audio d'information comme des podcasts peuvent être rendus accessibles en fournissant une transcription mot-à-mot. Les transcriptions doivent identifier correctement les intervenants et décrire les autres sons significatifs comme les rires ou les chansons. Ces transcriptions peuvent prendre du temps à réaliser, mais c'est la seule manière de rendre du contenu sonore accessible.

- -

Vidéos

- -

Un fichier vidéo peut être rendu accessible en ajoutant des sous-titres synchronisés. La plupart des formats vidéo fournissent un moyen d'afficher des sous-titres. Les vidéos devraient également être accompagnées de transcriptions descriptives. En général, ces deux opérations vont ensemble, une fois que vous avez l'une, il est facile de produire l'autre.

- - - - - - - - - - - -
En savoir plus
Sous-titrage
Article de WebAIM : Web Captioning Overview
-
- WebAIM : Captioning Resources
- -

Animations

- -

Les animations, le mouvement et les sons peuvent être dérangeantes pour certains utilisateurs souffrants de troubles de l'attention. Fournissez un mécanisme pour désactiver les médias et les mouvements.

- -

Les tremblements ou clignotements ne sont pas uniquement ennuyeux pour tout le monde, mais à une vitesse de plus de 3 cycles par seconde, ils peuvent provoquer un malaise chez les utilisateurs souffrant d'épilepsie photosensible. Si des tremblement ou clignotements sont nécessaires, avertissez l'utilisateur au préalable avant de les provoquer.

- -

Test de médias

- -

Assurez-vous que des alternatives aux médias sont disponibles dans un format accessible.

- -

Autres problèmes

- -

Contrôles personnalisés

- -

Évitez de recréer des fonctionnalités qui existent déjà. Assurez-vous que vos composants personnalisés sont construits en pensant à l'accessibilité. Utilisez les couleurs système CSS pour vous assurer que les nouveaux contrôles interagiront bien avec les autres contrôles ainsi qu'avec les thèmes et couleurs définis par l'utilisateur.

- - - - - - - - - - - -
En savoir plus
Contrôles personnalisés accessibles
ARIA : Applications riches Internet accessibles
-
- Réalisation de composants personnalisés accessibles en XUL
- -

Liste de contrôle d'accessibilité pour XUL

- -

Utilisez la liste de contrôle suivante pour vérifier rapidement l'accessibilité d'une nouvelle application XUL, ou comme point de départ pour régler les problèmes d'accessibilité dans une application existante.

- -

Accès au clavier

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Point à vérifierCorrectIncorrect
Ordre de tabulationUn ordre de tabulation logique est fourni.L'ordre de tabulation saute de manière inattendue.
ArbresUn accès au clavier est fourni pour les fonctions inaccessibles comme le sélecteur de colonnes ou le tri par colonnes.Aucun accès au clavier n'est fourni pour le choix des colonnes ou d'autres fonctionnalités.
Boutons de barres d'outilsDes alternatives au clavier sont fournies pour les fonctionnalités des boutons de barres d'outils.Aucune alternative au clavier n'est fournie pour les fonctionnalités des boutons de barres d'outils.
Raccourcis clavierDes raccourcis clavier sont présents pour les fonctionnalités importantesAucun raccourci clavier n'est fourni.
Menus contextuelsLes menus contextuels sont déclenchés par le gestionnaire d'évènement oncontextmenu.Les menus contextuels sont déclenchés directement par un clic droit de la souris ou un autre déclencheur spécifique.
Scripts dépendants de la sourisToutes les opérations à la souris ont des équivalents accessibles au clavier.Certaines opérations ne peuvent être réalisées qu'avec une souris.
DéfilementTous les éléments défilables peuvent être contrôlés au clavier.Le défilement ne peut pas se faire au clavier.
FocusLe focus clavier est conservé et ne se déplace pas de manière inattendue.Le focus se déplace ou est désactivé de manière inattendue.
- -

Informations assistives

- - - - - - - - - - - - - - - - - - - - - - - - -
Point à vérifierCorrectIncorrect
Texte alternatifUn texte alternatif est fourni pour les images significatives.Le texte alternatif est manquant sur des images significatives, o n'est pas approprié pour la fonction d'une image.
TitresToutes les fenêtres, y compris les dialogues et les assistants, ont un titre descriptif.Des fenêtres n'ont pas de titre ou un titre incorrect.
Labels de formulairesChaque élément de formulaire a un label associé et les boutons radios sont intégrés dans un groupbox.Des éléments de formulaire n'ont pas de label ou ces labels ne sont pas connectés programmatiquement, ou des boutons radios ne font pas partie d'un groupbox.
- -

Affichage

- - - - - - - - - - - - - - - - - - - - - - - - -
Point à vérifierCorrectIncorrect
Réglages par défaut du systèmeLes paramètres systèmes sont respectés.Les paramètres systèmes ne sont pas respectés.
CouleursLa couleur seule n'est pas utilisée pour donner une signification, et le contraste entre le texte et la couleur de fond est suffisant.La couleur seule est utilisée pour donner une signification, ou le contraste entre le texte et la couleur de fond est insuffisant.
FlexibilitéLes éléments visuels et leurs conteneurs se redimensionnent.Les éléments visuels et leurs conteneurs ne se redimensionnent pas.
- -

Interaction homme-machine

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Point à vérifierCorrectIncorrect
InstructionsUne documentation d'aide est fournie, avec une description des raccourcis clavier.Aucune documentation d'aide n'est fournie, ou celle-ci est incomplète.
AvertissementsLes alertes sont affichées à l'aide de la fonction de script alert() ou l'élément notificationbox.Les alertes sont uniquement visuelles ou audifives, ou utilisent une autre méthode que la fonction de script alert() ou l'élément notificationbox.
Éléments interactifsLes éléments interactifs sont suffisamment grands et visibles.Les éléments interactifs sont trop petits ou insuffisamment contrastés par rapport aux autres parties de l'application.
Récupération en cas d'erreurDes avertissements sont affichés lorsque l'utilisateur commet une erreur. Il reçoit ensuite la possibilité et des instructions pour la corriger.Aucun message d'erreur n'existe, ou des instructions inadéquates sont fournies.
Temps de réponseL'utilisateur est informé des limites des temps et a le contrôle de cette limite lorsque c'est possible.L'utilisateur n'est pas informé des limites de temps et/ou n'a aucun contrôle sur celles-ci.
- -

Médias

- - - - - - - - - - - - - - - - - - - - - - - - -
Point à vérifierCorrectIncorrect
AudioDes transcriptions sont fournies pour les pistes sonores.Aucune transcription n'est fournie.
VidéosLes vidéos sont sous-titrées et une transcription est fournie.Aucun sous-titre ou transcription n'est fourni.
AnimationsL'utilisateur peut contrôler les animations et est prévenu lorsque le contenu va clignoter.Il n'existe pas de contrôle pour les animations ni d'avertissements pour les clignotements.
- -

Autres

- - - - - - - - - - - - - - -
Point à vérifierCorrectIncorrect
Contrôles personnalisésLes contrôles personnalisés sont accessibles.Les contrôles personnalisés ne sont pas accessibles.
diff --git a/files/fr/archive/mozilla/xul/richlistbox/index.html b/files/fr/archive/mozilla/xul/richlistbox/index.html deleted file mode 100644 index db0f4dacc7..0000000000 --- a/files/fr/archive/mozilla/xul/richlistbox/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: richlistbox -slug: Archive/Mozilla/XUL/richlistbox -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/richlistbox ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Cet élément est utilisé pour créer une liste d'éléments, de manière semblable à une listbox, mais est conçu pour être utilisé lorsque les éléments ne contiennent pas du simple contenu texte.

Note : Dans les versions de Firefox antérieures à Firefox 3, les richlistbox supportaient uniquement les sélections simples. Firefox 3 y permet les sélections multiples.
- -
Attributs -
disabled, disableKeyNavigation, preference, rows, seltype, suppressonselect, tabindex, value -
-
Propriétés -
accessibleType, currentIndex, currentItem, disabled, disableKeyNavigation, itemCount, selectedCount, selectedIndex, selectedItem, selectedItems, selType, suppressOnSelect, tabIndex, value -
-
Méthodes -
addItemToSelection, appendItem, clearSelection, ensureElementIsVisible, ensureIndexIsVisible, getIndexOfFirstVisibleRow, getIndexOfItem, getItemAtIndex, getNumberofVisibleRows, getRowCount, getSelectedItem, insertItemAt, invertSelection, moveByOffset, removeItemAt, removeItemFromSelection, scrollToIndex, selectAll, selectItem, selectItemRange, timedSelect, toggleItemSelection -
-

Exemples

-
<richlistbox>
-  <richlistitem>
-    <description>Une description XUL !</description>
-  </richlistitem>
-  <richlistitem>
-    <button label="Un bouton XUL"/>
-  </richlistitem>
-</richlistbox>
-
-

L'élément richlistbox contient plusieurs éléments richlistitem, qui peuvent contenir tout type de contenu. On peut cliquer sur n'importe quel élément richlistitem et utiliser le clavier pour déplacer la sélection. -

-

Attributs

-

-

- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
-
- -
preference -
Type : id d'élément -
Connecte l'élément à une préférence (élément preference) correspondante. Cet attribut n'a d'effet qu'utilisé au sein d'un prefwindow. La valeur de la préférence sera mise à jour pour correspondre à la propriété value de l'élément. -
- - -
-
- -
rows -
Type : entier -
Le nombre de lignes à afficher dans l'élément. Si l'élément contient plus que ce nombre de lignes, une barre de défilement apparaitra afin que l'utilisateur puisse consulter les autres lignes. Pour obtenir le nombre réel de lignes dans l'élément, utilisez la méthode getRowCount. -
- - -
-
- -
-
- seltype<magic name="\"PAGENAME\"/"></magic>
-
- Type : - - une des valeurs ci-dessous -
-
- Utilisé pour indiquer si les sélections multiples sont permises.
-
- -

<magic name="\"PAGENAME\"/">Des cellules individuelles peuvent être sélectionnées.</magic><magic name="\"PAGENAME\"/"> Des lignes sont sélectionnées, cependant, l'indicateur de sélection n'est visible que sur le texte de la colonne principale.</magic>

-
-
- -
-
- suppressonselect
-
- Type : - - booléen -
-
- Si cet attribut n'est pas spécifié, un évènement select est déclenché dès qu'un élément est sélectionné, que ce soit par l'utilisateur ou par l'appel d'une des méthodes de sélection. Si la valeur de l'attribut est true, l'évènement select n'est jamais déclenché.
-
-
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

-

-

-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
-
currentItem -
Type : élément listitem -
Renvoie le dernier élément sélectionné dans la liste de sélection, ce qui n'est utile que dans une liste à sélection multiple. -
- -
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
-
-
-
selectedIndex -
Type : entier -
Renvoie l'indice de l'élément actuellement sélectionné. Un élément peut être sélectionné en assignant son indice à cette propriété. En lui assignant -1, tous les éléments seront désélectionnés. -
- -
-
-
selectedItem -
Type : élément -
Conserve l'élément actuellement sélectionné. Si aucun élément n'est sélectionné, sa valeur sera null. Vous pouvez sélectionner un élément en définissant cette valeur. Un évènement select sera envoyé à cet élément lorsqu'il est sélectionné en modifiant cette propriété, la propriété selectedIndex, ou par l'utilisateur. -
- -
-
-
-
-
- selType<magic name="\"PAGENAME\"/"></magic>
-
- Type : - - chaîne de caractères -
-
- Obtient et définit la valeur de l'attribut seltype.
-
- -
-
-
-
- suppressOnSelect
-
- Type : - - booléen -
-
- Obtient et définit la valeur de l'attribut suppressonselect.
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

- - - - - - -
-

Héritées de XUL element
- blur, click, doCommand, focus, getElementsByAttribute getElementsByAttributeNS

Héritées de DOM element
- addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

- -
- - - - - - - - - -
getRowCount() -
Type de retour : entier -
Renvoie le nombre total de lignes dans l'élément, quel que soit le nombre de lignes affichées. -
- - - - - - - -
selectAll() -
Type de retour : aucune valeur renvoyée -
Sélectionne tous les éléments. Un évènement de sélection est envoyé après l'exécution de la sélection. -
-
selectItem( item ) -
Type de retour : aucune valeur renvoyée -
Désélectionne tous les éléments actuellement sélectionnés, puis sélectionne l'élément donné en argument. Un évènement de sélection est envoyé après l'exécution de la sélection. -
-
selectItemRange( startItem, endItem) -
Type de retour : aucune valeur renvoyée -
Sélectionne tous les éléments compris entre les deux éléments donnés en paramètre, y compris les éléments de début et de fin. Tous les autres éléments sont désélectionnés. Cette méthode n'a aucun effet sur les listes en mono-sélection. Un évènement de sélection est envoyé après l'exécution de la sélection. -
-
timedSelect( item, timeout ) -
Type de retour : aucune valeur renvoyée -
Sélectionne un élément spécifié par l'argument item après un nombre de millisecondes définit par l'argument timeout. Tous les autres éléments sont désélectionnés. -
-
toggleItemSelection( item ) -
Type de retour : aucune valeur renvoyée -
Modifie l'état de sélection de l'élément spécifié. S'il est sélectionné, il devient désélectionné. S'il est désélectionné, il devient sélectionné. Les autres éléments de la liste ne sont pas affectés et ils conservent leur état de sélection. -
- -

Sujets liés

-
Interfaces -
nsIAccessibleProvider, nsIDOMXULMultiSelectControlElement -
-
-
diff --git a/files/fr/archive/mozilla/xul/richlistitem/index.html b/files/fr/archive/mozilla/xul/richlistitem/index.html deleted file mode 100644 index ee24a5cf8e..0000000000 --- a/files/fr/archive/mozilla/xul/richlistitem/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: richlistitem -slug: Archive/Mozilla/XUL/richlistitem -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/richlistitem ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément individuel dans une richlistbox. -

-
Attributs -
disabled, selected, tabindex, value -
-
Propriétés -
accessible, control, disabled, label, selected, tabIndex, value -
-

Exemples

-

(exemple nécessaire) -

-

Attributs

-

-

- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
selected -
Type : booléen -
Indique si l'élément est sélectionné ou non. Cette valeur est en lecture seule. Pour changer la sélection, utilisez la propriété selectedIndex ou selectedItem de l'élément conteneur. -
- - -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

-

-

-
accessible -
Type : nsIAccessible -
Renvoie l'objet d'accessibilité pour l'élément. -
-


-

- -
-
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
label -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut label. -
- -
-
- -
-
selected
-
Type : booléen
-
La valeur de cette propriété est true si cet élément est sélectionné, ou false s'il ne l'est pas. Cette propriété est en lecture seule.
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Interfaces -
nsIAccessibleProvider, nsIDOMXULSelectControlItemElement -
-
-
diff --git "a/files/fr/archive/mozilla/xul/r\303\251f\303\251rence_xul/index.html" "b/files/fr/archive/mozilla/xul/r\303\251f\303\251rence_xul/index.html" deleted file mode 100644 index 0ab0677e2f..0000000000 --- "a/files/fr/archive/mozilla/xul/r\303\251f\303\251rence_xul/index.html" +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Référence XUL -slug: Archive/Mozilla/XUL/Référence_XUL -tags: - - Aide_pour_les_éditeurs_de_MDC - - Référence_XUL - - Traduction_en_cours - - XUL -translation_of: Archive/Mozilla/XUL/XUL_Reference ---- -

« XUL Reference «Consultez également la Référence XUL du wiki XULfr.org.

- - - - - - - - - - - - -
Tous les éléments XUL
-

action (en, xulfr)
- arrowscrollbox (en, xulfr)
- assign (en)
- bbox (en, xulfr)
- binding (en, xulfr)
- bindings (en, xulfr)
- box (en, xulfr)
- broadcaster (en, xulfr)
- broadcasterset (en, xulfr)
- button (en, xulfr)
- browser (, xulfr)
- checkbox (en, xulfr)
- caption (en, xulfr)
- colorpicker (en, xulfr)
- column (en, xulfr)
- columns (en, xulfr)
- commandset (en, xulfr)
- command (en, xulfr)
- conditions (en, xulfr)
- content (en, xulfr)
- datepicker
- deck (en, xulfr)
- description (en, xulfr)
- dialog (en, xulfr)
- dialogheader (en)
- dropmarker
- editor (en, xulfr)
- grid (en, xulfr)
- grippy (en, xulfr)
- groupbox (en, xulfr)
- hbox (en, xulfr)
- iframe (en, xulfr)
- image (en, xulfr)
- key (en, xulfr)
- keyset (en, xulfr)
- label (en, xulfr)
- listbox (en, xulfr)
- listcell (en, xulfr)
- listcol (en, xulfr)
- listcols (en, xulfr)
- listhead (en, xulfr)
- listheader (en)
- listitem (en, xulfr)

- 		-

member (en, xulfr)
- menu (en, xulfr)
- menubar (en, xulfr)
- menuitem (en, xulfr)
- menulist (en, xulfr)
- menupopup (en, xulfr)
- menuseparator (en, xulfr)
- notification (en)
- notificationbox (en)
- observes (en, xulfr)
- overlay (en, xulfr)
- page (en, xulfr)
- panel
- param (en)
- popup (en, xulfr)
- popupset (en, xulfr)
- preference
- preferences
- prefpane
- prefwindow
- progressmeter (en, xulfr)
- query (en)
- queryset (en)
- radio (en, xulfr)
- radiogroup (en, xulfr)
- resizer (en)
- richlistbox
- richlistitem
- row (en, xulfr)
- rows (en, xulfr)
- rule (en, xulfr)
- scale
- script (en, xulfr)
- scrollbar (en, xulfr)
- scrollbox (en, xulfr)
- scrollcorner (en)
- separator (en, xulfr)
- spacer (en, xulfr)
- spinbuttons
- splitter (en, xulfr)
- stack (en, xulfr)
- statusbar (en, xulfr)

- 		-

statusbarpanel (en, xulfr)
- stringbundle (en, xulfr)
- stringbundleset (en, xulfr)
- tab (en, xulfr)
- tabbrowser (en, xulfr) (Firefox uniquement
- à partir de Firefox 3/Gecko 1.9)
- tabbox (en, xulfr)
- tabpanel (en, xulfr)
- tabpanels (en, xulfr)
- tabs (en, xulfr)
- template (en, xulfr)
- textnode (en, xulfr)
- textbox (en, xulfr)
- textbox (autocomplétion de Firefox) (en)
- textbox (autocomplétion de Mozilla) (en)
- timepicker
- titlebar (en, xulfr)
- toolbar (en, xulfr)
- toolbarbutton (en, xulfr)
- toolbargrippy (en, xulfr)
- toolbaritem (en, xulfr)
- toolbarpalette (en, xulfr)
- toolbarseparator (en, xulfr)
- toolbarset (en, xulfr)
- toolbarspacer ({en)
- toolbarspring (en)
- toolbox (en, xulfr)
- tooltip ({en, xulfr)
- tree (en, xulfr)
- treecell ({en, xulfr)
- treechildren (en, xulfr)
- treecol (en, xulfr)
- treecols (en, xulfr)
- treeitem ({en, xulfr)
- treerow (en, xulfr)
- treeseparator (en, xulfr)
- triple ({en, xulfr)
- vbox (en, xulfr)
- where (en)
- window (en, xulfr)
- wizard (en, xulfr)
- wizardpage (en, xulfr)

-
- -

Autres listes sur XUL

- - diff --git a/files/fr/archive/mozilla/xul/scale/index.html b/files/fr/archive/mozilla/xul/scale/index.html deleted file mode 100644 index a4ae7e44e9..0000000000 --- a/files/fr/archive/mozilla/xul/scale/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: scale -slug: Archive/Mozilla/XUL/scale -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/scale ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément scale (parfois appelé slider) permet à l'utilisateur de sélectionner une valeur dans un intervalle. Une barre affichée horizontalement ou verticalement lui permet de choisir une valeur en glissant une poignée sur la barre. -

Utilisez l'attribut orient pour spécifier l'orientation de l'échelle. La valeur par défaut est <tt>horizontal</tt> qui affiche une barre horizontale. Les valeurs inférieures sont à gauche et les valeurs supérieurs à droite. Pour utiliser une échelle verticale, définissez l'attribut orient à <tt>vertical</tt>. -

L'utilisateur peut utiliser les touches fléchées du clavier pour incrémenter ou décrémenter la valeur d'une unité, ou les touches PagePréc et PageSuiv pour incrémenter ou décrémenter la valeur d'une page, telle que spécifiée par l'attribut pageincrement. Les touches Origine et Fin définissent respectivement la valeur au minimum et au maximum. Un évènement change sera déclenché par l'élément chaque fois que sa valeur est modifiée. -

-
Attributs -
dir, disabled, increment, max, min, pageincrement, tabindex, value -
-
Propriétés -
disabled, max, min, increment, pageIncrement, tabIndex, value,
-
Méthodes -
decrease, decreasePage, increase, increasePage, -
-

Exemples

-

Échelle horizontale : -

-
<scale min="1" max="10"/>
-
-

Image:Controlguide-scale.png -

Échelle verticale : -

-
<scale min="1" max="10" orient="vertical"/>
-
-

Attributs

-

-

- -
-
- dir
-
- Type : - - une des valeurs ci-dessous -
-
- La direction dans laquelle les éléments enfants de l'élément seront placés.
-
- - -

 

-
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
-
- increment
-
- Type : - - entier -
-
- La quantité dont l'attribut value (pour les boîtes numériques et les échelles) or curpos<magic name="\"PAGENAME\"/"> (pour les barres de défilement) </magic> change lorsque l'on clique sur les flèches. La valeur par défaut est 1.
-
-
-
- -
-
- min
-
- Type : - - entier -
-
- La valeur minimum que peut prendre l'élément. La valeur par défaut est 0.
-
-
-
- -
-
- max
-
- Type : - - entier -
-
- La valeur maximum que peut prendre l'élément scale ou number box. La valeur par défaut est 100 pour les éléments scale et Infinity pour les boîtes numériques
-
-
-
- -
-
- pageincrement
-
- Type : - - entier -
-
- La quantité de laquelle la valeur de l'attribut curpos ou value change lorsque l'utilisateur clique dans la colonne de la barre de défilement (la zone dans laquelle le curseur de la barre se déplace), ou lorsque les touches PgUp ou PgDown sont utilisées. La valeur par défaut est 10.
-
-
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

-

-

-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
-
- increment
-
- Type : entier
-
- Obtient et définit la valeur de l'attribut increment.
-
-
-
min -
Type : entier -
Obtient et définit la valeur de l'attribut min. -
-


-

- -
-
-
max -
Type : entier -
Obtient et définit la valeur de l'attribut max. -
-


-

- -
-
-
pageIncrement -
Type : entier -
Obtient et définit la valeur de l'attribut pageincrement. -
-


-

- -
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
value -
Type : chaîne -
Obtient et définit la valeur de l'attribut value. -
- -
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
-
-
- decrease()
-
- Type de retour : - - aucune valeur de retour -
-
- Diminue la valeur de<magic name="\"PAGENAME\"/"> la boîte numérique l'échelle, l'échelle ou la boîte numérique</magic> de la valeur de l'incrément.
-
-
decreasePage()
-
Type de retour : aucune valeur de retour -
Diminue la valeur de l'échelle de la valeur de pageIncrement. -
-


-

-
-
- increase()
-
- Type de retour : - - aucune valeur de retour -
-
- Augmente la valeur de <magic name="\"PAGENAME\"/">la boîte numérique, XUL:scale = l'échelle, l'échelle ou la boîte numérique</magic> de la valeur de l'incrément.
-
-

 

- - -
increasePage()
-
Type de retour : aucune valeur de retour -
Augmente la valeur de l'échelle de la valeur de pageIncrement. -
-


-

- -

Sujets liés

-
Interfaces -
nsIDOMXULControlElement -
-
-
diff --git a/files/fr/archive/mozilla/xul/spacer/index.html b/files/fr/archive/mozilla/xul/spacer/index.html deleted file mode 100644 index 259c7f355f..0000000000 --- a/files/fr/archive/mozilla/xul/spacer/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: spacer -slug: Archive/Mozilla/XUL/spacer -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/spacer ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément qui occupe de l'espace mais n'affiche rien. On l'utilise généralement pour occuper de la place dans un conteneur. Si l'on ne spécifie pas de taille ou de flexibilité à cet élément, le spacer n'occupe aucune place. Si vous voulez créer un léger espacement, pensez à utiliser plutôt un élément separator. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-

Exemples

-
<box>
-  <button label="Gauche"/>
-  <spacer flex="1"/>
-  <button label="Droite"/>
-</box>
-
-

Attributs

- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
separator, splitter -
-
-
diff --git a/files/fr/archive/mozilla/xul/spinbuttons/index.html b/files/fr/archive/mozilla/xul/spinbuttons/index.html deleted file mode 100644 index e493ea9919..0000000000 --- a/files/fr/archive/mozilla/xul/spinbuttons/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: spinbuttons -slug: Archive/Mozilla/XUL/spinbuttons -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/spinbuttons ---- -

-

-
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -
-


-Les spinbuttons sont constitués de deux flèches, une pour augmenter une valeur et une autre pour la diminuer. Ils ne sont pas utilisés comme des éléments distincts, mais en combinaison avec d'autres éléments pour créer un contrôle dont la valeur peut être augmentée et diminuée. -

Par exemple, on utilise les spinbuttons pour les boîtes texte (textbox) de type numérique, ainsi qu'avec les éléments timepicker et datepicker. -

-

Attributs

- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -
-
diff --git a/files/fr/archive/mozilla/xul/stack/index.html b/files/fr/archive/mozilla/xul/stack/index.html deleted file mode 100644 index ac42647df3..0000000000 --- a/files/fr/archive/mozilla/xul/stack/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: stack -slug: Archive/Mozilla/XUL/stack -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/stack ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément qui affiche ses enfants en pile les uns au dessus des autres. Le premier élément est placé en bas et chacun des enfants successifs est placé au dessus du précédent. Tous les éléments sont affichés en une fois. Des éléments enfants peuvent également être placés à des positions absolues dans la pile. -

Les attributs left et top sur un enfant de l'élément stack spécifient la position de cet élément.

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-

Exemples

-

(exemple nécessaire) -

-

Attributs

- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-

deck -

diff --git a/files/fr/archive/mozilla/xul/tabpanels/index.html b/files/fr/archive/mozilla/xul/tabpanels/index.html deleted file mode 100644 index 9c55a5f6dc..0000000000 --- a/files/fr/archive/mozilla/xul/tabpanels/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: tabpanels -slug: Archive/Mozilla/XUL/tabpanels -translation_of: Archive/Mozilla/XUL/tabpanels ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -
- -

Conteneur pour maintenir l'ensemble des pages dans tabbox. tabpanels doit être placé dans tabbox bien qu'il n'a pas besoin d'être un enfant direct. Les enfants de tabpanels deviennent les panneaux de tabbox. Dans la plupart des cas vous pouvez utilisez vbox, mais ils peuvent être des éléments quelconques. En cliquant sur le premier onglet, le premier panneau sera affiché. En cliquant sur le deuxième onglet, le deuxième panneau sera affiché et ainsi de suite. Il devrait y avoir le même nombre de panneaux que d'onglets. Les panneaux ne doivent jamais être cachés; le masquage d'un onglet suffit pour rendre son panneau inaccessible.

- -

Plus d'informations sont disponibles dans le tutoriel XUL .

- -
-
Attributs
-
selectedIndex
-
- -
-
Propriétés
-
selectedIndex, selectedPanel
-
- -

Exemples

- -

(Exemple nécessaire)

- -

Attributs

- -
- -
- - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

-
accessible -
Type : nsIAccessible -
Renvoie l'objet d'accessibilité pour l'élément. -
-


-

- -
-
selectedIndex -
Type : entier -
Renvoie l'indice de l'élément actuellement sélectionné. Un élément peut être sélectionné en assignant son indice à cette propriété. En lui assignant -1, tous les éléments seront désélectionnés. -
- -
- -

Méthodes

- -

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- - - -
-
Elements
-
tabbox, tabs, tab, tabpanel.
-
diff --git a/files/fr/archive/mozilla/xul/textbox/index.html b/files/fr/archive/mozilla/xul/textbox/index.html deleted file mode 100644 index 7511b915f2..0000000000 --- a/files/fr/archive/mozilla/xul/textbox/index.html +++ /dev/null @@ -1,348 +0,0 @@ ---- -title: textbox -slug: Archive/Mozilla/XUL/textbox -tags: - - Méthodes_XUL - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/textbox ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un champ dans lequel l'utilisateur peut entrer du texte. Il est similaire à l'élément HTML input. Par défaut, une seule ligne de texte est affichée. L'attribut multiline peut être spécifié pour afficher un champ multiligne. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
cols, decimalplaces, disabled, empty, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onchange, oninput, preference, readonly, rows, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound -
-
Propriétés -
accessibleType, clickSelectsAll, decimalPlaces, decimalSymbol, defaultValue, disabled, editor, emptyText, increment, inputField, label, max, maxLength, min, readOnly, selectionEnd, selectionStart, size, spinButtons, tabIndex, textLength, timeout, type, value, valueNumber, wrapAround -
-
Méthodes -
decrease, increase, reset, select, setSelectionRange -
-
Classes de style -
plain -
-

Exemples

-
Image:XUL_ref_textbox.png
-
<vbox>
-<label control="your-name" value="Enter your name:"/>
-<textbox id="your-name" value="John"/>
-</vbox>
-
-

Attributs

-

-

- -
-
- -
-
- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
-
- -
-
- -
-
- -
-
- increment
-
- Type : - - entier -
-
- La quantité dont l'attribut value (pour les boîtes numériques et les échelles) or curpos<magic name="\"PAGENAME\"/"> (pour les barres de défilement) </magic> change lorsque l'on clique sur les flèches. La valeur par défaut est 1.
-
-
-
- -
-
- -
-
- max
-
- Type : - - entier -
-
- La valeur maximum que peut prendre l'élément scale ou number box. La valeur par défaut est 100 pour les éléments scale et Infinity pour les boîtes numériques
-
-
-
- -
-
- -
-
- min
-
- Type : - - entier -
-
- La valeur minimum que peut prendre l'élément. La valeur par défaut est 0.
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
preference -
Type : id d'élément -
Connecte l'élément à une préférence (élément preference) correspondante. Cet attribut n'a d'effet qu'utilisé au sein d'un prefwindow. La valeur de la préférence sera mise à jour pour correspondre à la propriété value de l'élément. -
- - -
-
- -
readonly -
Type : booléen -
Si défini à true, l'utilisateur ne peut pas modifier la valeur de l'élément. Cependant, celle-ci peut toujours être modifiée par un script. -
- - -
-
- -
rows -
Type : entier -
Le nombre de lignes à afficher dans l'élément. Si l'élément contient plus que ce nombre de lignes, une barre de défilement apparaitra afin que l'utilisateur puisse consulter les autres lignes. Pour obtenir le nombre réel de lignes dans l'élément, utilisez la méthode getRowCount. -
- - -
-
- -
-
- -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
-
- -
-
- -
-
- -
-
- -
- -

Propriétés

-

-

-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
-
-
-
defaultValue -
Type : chaîne de caractères -
Définit et obtient la valeur par défaut d'une boîte de texte. -
-


-

- -
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
-
-
-
- increment
-
- Type : entier
-
- Obtient et définit la valeur de l'attribut increment.
-
-
-
-
-
max -
Type : entier -
Obtient et définit la valeur de l'attribut max. -
-


-

- -
-
-
-
min -
Type : entier -
Obtient et définit la valeur de l'attribut min. -
-


-

- -
-
-
-
- readonly
-
- Type : booléen
-
- Si définie à true, l'utilisateur ne peut pas modifier la valeur de l'élément.
-
-
- Cette propriété toute en minuscules n'est utilisée qu'avec l'élément preference et sera peut-être renommée en readOnly dans des versions ultérieures. D'autres éléments utilisent la propriété readOnly. L'attribut correspondant est cependant readonly en minuscules.
-
-
-
-
-
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
-
-
type -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut type. -
- -
-
-
-
- -

Méthodes

-
-
- decrease()
-
- Type de retour : - - aucune valeur de retour -
-
- Diminue la valeur de<magic name="\"PAGENAME\"/"> la boîte numérique l'échelle, l'échelle ou la boîte numérique</magic> de la valeur de l'incrément.
-
-
-
- increase()
-
- Type de retour : - - aucune valeur de retour -
-
- Augmente la valeur de <magic name="\"PAGENAME\"/">la boîte numérique, XUL:scale = l'échelle, l'échelle ou la boîte numérique</magic> de la valeur de l'incrément.
-
-

 

- - -
reset() -
Type de retour : aucune valeur renvoyée -
Réinitialise la préférence à sa valeur par défaut. -
Pour un élément textbox, la liste de transactions d'annulation est également vidée (Gecko 1.9). -
-


-

-
select() -
Type retourné : aucune valeur retournée -
Sélectionne l'intégralité du texte d'une boîte texte. -
-


-

-

« Accueil de la référence XUL -

-
setSelectionRange( début, fin ) -
Type retourné : aucune valeur retournée -
Cette méthode sélectionne une portion de texte dans une zone de texte (textbox ou textarea) où l'argument début est le premier caractère de la sélection et l'argument fin le dernier caractère de la sélection.
Renseigner les deux arguments avec la même valeur équivaut à déplacer le curseur d'écriture sans rien sélectionner. -
-


-Interwiki Language Links -

- - -

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Classes de style

-

Les classes suivantes peuvent être utilisées pour styler l'élément. Ces classes devraient être utilisées au lieu de changer le style de l'élément directement, car elles s'accorderont plus naturellement avec le thème sélectionné par l'utilisateur. -

-
plain
-
This class causes the element to be displayed with no border or margin.
-
- -

Sujets liés

-
Interfaces -
nsIAccessibleProvider, nsIDOMXULTextboxElement -
-
-
- diff --git a/files/fr/archive/mozilla/xul/timepicker/index.html b/files/fr/archive/mozilla/xul/timepicker/index.html deleted file mode 100644 index 7dda702b6b..0000000000 --- a/files/fr/archive/mozilla/xul/timepicker/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: timepicker -slug: Archive/Mozilla/XUL/timepicker -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/timepicker ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

L'élément timepicker est utilisé pour permettre à l'utilisateur d'entrer une heure. Il contient trois champs pour entrer les heures, les minutes et les secondes. Des boutons fléchés à côté de ces champs permettent d'ajuster les valeurs à la souris. Une quatrième boîte de texte apparaît pour les horloges à 12 heures, permettant de sélectionner AM ou PM. -

Pour spécifier la valeur initiale, utilisez l'attribut value sous une forme HH:MM:SS ou HH:MM. La valeur peut être obtenue et modifiée à l'aide des propriétés value ou dateValue. La première spécifie l'heure sous la forme d'une chaîne de la forme HH:MM:SS tandis que la seconde le fait sous la forme d'un objet Date. En outre, les propriétés hour, minute et second peuvent être utilisées pour obtenir ou modifier chaque composante individuellement. -


-

-
Attributs -
disabled, hideseconds, increment, readonly, tabindex, value -
-
Propriétés -
amIndicator, dateValue, disabled, hideSeconds, hour, hourLeadingZero, increment, is24HourClock, isPM, minute, minuteLeadingZero, pmIndicator, readOnly, second, secondLeadingZero, tabIndex, value -
-

Exemples

-
<timepicker value="12:05"/>
-
-

Image:Controlguide-timepicker.png -

-

Attributs

-

-

- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
-
- hideseconds
-
- Type : booléen
-
- Indique si le champ des secondes doit être masqué.
-
-
-
- -
readonly -
Type : booléen -
Si défini à true, l'utilisateur ne peut pas modifier la valeur de l'élément. Cependant, celle-ci peut toujours être modifiée par un script. -
- - -
-
- -
-
- increment
-
- Type : entier
-
- Indique le nombre de minutes à passer chaque fois que les flèches sont actionnées. Cet attribut est à utiliser en combinaison avec une définition de hideseconds à true.
-
-
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
-
- -
-
- value
-
- Type : chaîne
-
- La valeur initiale du sélecteur de date au format HH:MM:SS ou HH:MM.
-
-
- -

Propriétés

-

-

-
amIndicator -
Type : chaîne -
La valeur chaîne affichée pour les heures entre minuit et midi, par défaut « AM ». Cette valeur est déterminée selon la locale de l'utilisateur. -
-


-

- -
-
-
-
- dateValue
-
- Type : Date
-
- La date actuellement entrée ou sélectionnée dans le sélecteur de date sous la forme d'un objet Date.
-
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
-
- hideSeconds
-
- Type : booléen
-
- Indique si le champ des secondes doit être masqué.
-
-
-
-
- hour
-
- Type : entier
-
- La valeur de l'heure actuellement sélectionnée entre 0 et 23. Modifiez cette propriété pour changer l'heure sélectionnée.
-
-
-
-
- hourLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro initial doit être affiché avant l'heure lorsque celle-ci est inférieure à 10.
-
-
-
-
- increment
-
- Type : entier
-
- Obtient et définit la valeur de l'attribut increment.
-
-
-
-
- is24HourClock
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si l'heure est affichée à l'aide d'une horloge à 24 ou 12 heures. Avec une horloge à 12 heures, un champ supplémentaire permet à l'utilisateur de choisir entre AM et PM.
-
-
-
-
- isPM
-
- Type : booléen
-
- Si cette propriété est à false, l'heure est entre 0 et 11. Si elle est à true, l'heure est supérieure ou égale à 12.
-
-
-
-
- minute
-
- Type : entier
-
- Les minutes de l'heure actuellement sélectionnée entre 0 et 59. Modifiez cette propriété pour changer la minute sélectionnée.
-
-
-
-
- minuteLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro initial doit être affiché avant la valeur des minutes lorsque celle-ci est inférieure à 10.
-
-
-
-
- pmIndicator
-
- Type : chaîne
-
- La valeur chaîne affichée pour les heures entre midi et minuit, par défaut « PM ». Cette valeur est déterminée selon la locale de l'utilisateur.
-
-
-
-
- readonly
-
- Type : booléen
-
- Si définie à true, l'utilisateur ne peut pas modifier la valeur de l'élément.
-
-
- Cette propriété toute en minuscules n'est utilisée qu'avec l'élément preference et sera peut-être renommée en readOnly dans des versions ultérieures. D'autres éléments utilisent la propriété readOnly. L'attribut correspondant est cependant readonly en minuscules.
-
-
-
-
-
- second
-
- Type : entier
-
- La valeur des secondes de l'heure actuellement sélectionnée, entre 0 et 59. Modifiez cette propriété pour changer la seconde sélectionnée.
-
-
-
-
- secondLeadingZero
-
- Type : booléen
-
- Une valeur en lecture seule indiquant si un zéro initial doit être affiché avant la valeur des secondes si celle-ci est inférieure à 10.
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
-
- value
-
- Type : chaîne
-
- L'heure actuellement entrée sous la forme HH:MM:SS. Modifiez cette propriété pour changer cette heure.
-
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Interfaces -
nsIDOMXULControlElement -
-
-
diff --git "a/files/fr/archive/mozilla/xul/toolbars/cr\303\251ation_de_boutons_de_barre_d'outils/index.html" "b/files/fr/archive/mozilla/xul/toolbars/cr\303\251ation_de_boutons_de_barre_d'outils/index.html" deleted file mode 100644 index 0b38c79357..0000000000 --- "a/files/fr/archive/mozilla/xul/toolbars/cr\303\251ation_de_boutons_de_barre_d'outils/index.html" +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Création de boutons de barre d'outils -slug: Archive/Mozilla/XUL/Toolbars/Création_de_boutons_de_barre_d'outils -tags: - - Extensions -translation_of: Archive/Mozilla/XUL/Toolbars/Creating_toolbar_buttons ---- -

 

-

Cet article explique comment ajouter un bouton à la barre d'outils d'une application (comme Firefox, Thunderbird, Nvu, etc.) en utilisant la technique des overlays. Cet article s'adresse aux développeurs d'extensions connaissant les bases de XUL et CSS.

-

Le lecteur est supposé être familiarisé avec les bases de la création d'extensions pour Firefox et avoir fait fonctionner sa première extension. Un tutoriel vous guidant à travers le processus depuis le début est également disponible.

-

 

-

Création d'un overlay

-

Avant tout, vous devez créer un overlay pour le document qui contient la barre d'outils que vous souhaitez améliorer. Le but de ce tutoriel n'est pas d'expliquer les overlays — vous pouvez trouver de précieuses informations à ce sujet dans le Tutoriel XUL.

-

Pour créer un overlay sur un document, vous devez connaître son URI. Vous trouverez en bas de cette page la liste des documents où les overlays sont créés le plus fréquemment.

-
- Note : certains placent un overlay sur - - chrome://messenger/content/mailWindowOverlay.xul - . Cela devrait faire apparaitre le bouton sur toutes les fenêtres auxquelles mailWindowOverlay.xul s'applique (c'est-à-dire la fenêtre principale et la fenêtre de messages). Cela doit être vérifié.
-

Ajout d'un bouton à la barre d'outils

-

Les applications toolkit ont une barre d'outils personnalisable. La méthode la plus pratique dans une extension est donc d'ajouter les boutons de la barre d'outils dans la palette plutôt que de les ajouter directement dans la barre d'outils. Cette dernière option est possible mais peu recommandée et plus difficile à mettre en œuvre.

-

L'ajout d'un bouton à la palette de la barre d'outils est très simple. Il suffit d'ajouter ce code à l'overlay :

-
-<toolbarpalette id="BrowserToolbarPalette">
-  <toolbarbutton id="myextension-button" class="toolbarbutton-1"
-    label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;"
-    oncommand="MyExtension.onToolbarButtonCommand(event);"/>
-</toolbarpalette>
-
-

Notes :

- -
onclick: function(event) {
-  switch(event.button) {
-    case 0:
-      // Clic gauche
-      break;
-    case 1:
-      // Clic milieu
-      break;
-    case 2:
-      // Clic droit
-      break;
-  }
-}
-
-

Pour ajouter plus de boutons, il suffit de mettre d'autres éléments <toolbarbutton> dans l'élément <toolbarpalette>. Placez les éléments autres que des boutons de barre d'outils dans un élément <toolbaritem>.

-

Application d'un style sur le bouton

-

Le plus souvent, les boutons ont des icônes. Pour attacher une image à un bouton, on utilise une des fonctionnalités standard de Mozilla pour le personnaliser. Si vous n'êtes pas familier avec celle-ci, lisez la section skinning de l'excellent Toolbar Tutorial de Jonah Bishop (en anglais). Bien que l'article décrive la création d'une barre d'outils complètement personnalisée plutôt que d'un simple bouton, il contient une très bonne explication des techniques que nous allons employer.

-

Taille des icônes

-

Les boutons pour la barre d'outils peuvent avoir deux tailles différentes — grande et petite. Ceci implique que vous allez devoir fournir de icônes différentes pour chaque bouton de votre barre d'outils. Vous trouverez ci-dessous les dimensions des icônes dans diverses applications (n'hésitez pas à en ajouter d'autres) :

-

<tr> <td>Firefox 1.0 (Winstripe)</td> <td>24x24</td> <td>16x16</td> </tr> <tr> <td>Thunderbird 1.0 (Qute)</td> <td>24x24</td> <td>16x16</td> </tr> </table>

-

Feuille de style

-

Pour paramétrer l'image de votre bouton de barre d'outils, utilisez les règles CSS suivantes :

-
/*  skin/toolbar-button.css  */
-
-#myextension-button {
-  list-style-image: url("chrome://myextension/skin/btn_large.png");
-}
-
-toolbar[iconsize="small"] #myextension-button {
-  list-style-image: url("chrome://myextension/skin/btn_small.png");
-}
-
-

Appliquer la feuille de style

-

Souvenez-vous d'associer la feuille de style que vous avez créée à la fois à l'overlay et à la fenêtre de personnalisation de la barre d'outils.

-
<?xml-stylesheet href="chrome://myextension/skin/toolbar-button.css" type="text/css"?>
-
-

Pour l'associer à la fenêtre de personnalisation (chrome://global/content/customizeToolbar.xul), vous pouvez utiliser <tt>skin/contents.rdf</tt>, comme ceci :

-
<?xml version="1.0"?>
-<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-     xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
-
-  <Seq about="urn:mozilla:skin:root">
-    <li resource="urn:mozilla:skin:classic/1.0"/>
-  </Seq>
-
-  <Description about="urn:mozilla:skin:classic/1.0">
-    <chrome:packages>
-      <Seq about="urn:mozilla:skin:classic/1.0:packages">
-        <li resource="urn:mozilla:skin:classic/1.0:myextension"/>
-      </Seq>
-    </chrome:packages>
-  </Description>
-
-  <Seq about="urn:mozilla:stylesheets">
-    <li resource="chrome://global/content/customizeToolbar.xul"/>
-  </Seq>
-
-  <Seq about="chrome://global/content/customizeToolbar.xul">
-    <li>chrome://myextension/skin/toolbar-button.css</li>
-  </Seq>
-</RDF>
-
-

Les extensions pour Firefox et Thunderbird 1.5 doivent plutôt utiliser quelque chose de semblable à ceci dans le chrome.manifest :

-
skin	myextension	classic/1.0	chrome/skin/
-style	chrome://global/content/customizeToolbar.xul	chrome://myextension/skin/toolbar-button.css
-
-

Erreurs fréquentes

-

Voici une liste des erreurs fréquemment commises par les auteurs d'extensions, avec leurs symptômes et leurs solutions.

-

Problème : un assemblage de tous les boutons standards est dessiné à la place de votre propre icône.

-

Cause : feuille de style mal formée ou non appliquée.

-

Solution : vérifiez votre feuille de style, vérifiez si votre content.rdf (ou chrome.manifest) est correct, assurez-vous que vous n'avez pas oublié d'appliquer la feuille de style à customizeToolbar.xul.

-

Liste des fenêtres où les overlays de la barre d'outils sont fréquents

- - - - - - -
Application (nom du thème)</th> - 
-   <td class="header">Taille de la grande icône</th>
-   <td class="header">Taille de la petite icône</th>
-
-
-

URL Applications et fenêtres modifiées Id de la palette chrome://browser/content/browser.xulFirefox - Fenêtre principaleBrowserToolbarPalette chrome://messenger/content/messenger.xulThunderbird - Fenêtre principaleMailToolbarPalette chrome://messenger/content/ messengercompose/messengercompose.xulThunderbird - Fenêtre de rédaction MsgComposeToolbarPalette chrome://messenger/content/addressbo...ddressbook.xulThunderbird - Carnet d'adressesAddressBookToolbarPalette chrome://editor/content/editor.xulNvu - Fenêtre principaleNvuToolbarPalette chrome://calendar/content/calendar.xulSunbird - Fenêtre principalecalendarToolbarPalette

-

Plus d'informations

- diff --git a/files/fr/archive/mozilla/xul/toolbars/index.html b/files/fr/archive/mozilla/xul/toolbars/index.html deleted file mode 100644 index 7e4f743d2a..0000000000 --- a/files/fr/archive/mozilla/xul/toolbars/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Toolbars -slug: Archive/Mozilla/XUL/Toolbars -tags: - - TopicStub -translation_of: Archive/Mozilla/XUL/Toolbars ---- -

Les barres d'outils, implémentées à l'aide de l'élément XUL toolbar, sont des conteneurs pour les boutons de la barre d'outils et d'autres objets d'interface utilisateur. Les articles suivants fournissent des détails sur l'implémentation et l'utilisation des barres d'outils.

- - - - - - - - -
-

Documentation

- -
-
XUL School: Ajout de barres d'outils et de boutons de barre d'outils
-
Un didacticiel utile pour créer des barres d'outils et des boutons de barre d'outils.
-
Événements de personnalisation de la barre d'outils
-
Un aperçu des événements envoyés lors de la personnalisation de la barre d'outils; vous pouvez les utiliser pour être informé des modifications apportées aux barres d'outils.
-
Création de boutons de barre d'outils
-
Comment utiliser les superpositions pour ajouter des boutons de barre d'outils aux applications Mozilla.
-
Bouton de la barre d'outils personnalisée
-
Un autre exemple de création d'un bouton de barre d'outils, avec un exemple d'extension que vous pouvez télécharger et essayer.
-
Extraits de code: barre d'outils
-
Extraits de code utiles lorsque vous utilisez des barres d'outils.
-
-
- -

Afficher toutes les pages marquées avec "Barres d'outils"...

- 		-

Communauté

- - - -

Outils

- - - -

... plus d'outils ...

- - - - -
diff --git a/files/fr/archive/mozilla/xul/toolbox/index.html b/files/fr/archive/mozilla/xul/toolbox/index.html deleted file mode 100644 index 459d64989d..0000000000 --- a/files/fr/archive/mozilla/xul/toolbox/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: toolbox -slug: Archive/Mozilla/XUL/toolbox -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/toolbox ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un conteneur pour les éléments toolbar. C'est un type de boîte dont l'orientation par défaut est verticale. Si un élément toolbar est placé dans un toolbox, une poignée (élément grippy) est affichée sur son bord gauche ou supérieur. L'utilisateur peut cliquer sur le grippy pour réduire l'élément toolbar. Si plusieurs barres d'outils sont placées dans le même toolbox, elles seront toutes réduites dans la même ligne. Le navigateur Firefox n'a pas ces contrôles grippy, les barres d'outils ne peuvent donc pas y être réduites. -

Vous trouverez plus d'informations dans le Tutoriel XUL.

-
Propriétés -
accessible, customToolbarCount, palette, toolbarset -
-
Méthodes -
appendCustomToolbar, collapseToolbar, expandToolbar -
-

Exemples

-

(exemple nécessaire) -

-

Attributs

- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

-

-

-
accessible -
Type : nsIAccessible -
Renvoie l'objet d'accessibilité pour l'élément. -
-


-

- -
-
-
-
- -

Méthodes

- - - - - - -
-

Héritées de XUL element
- blur, click, doCommand, focus, getElementsByAttribute getElementsByAttributeNS

Héritées de DOM element
- addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

- -
- - - - -

Sujets liés

-
Éléments -
toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring -
-
Interfaces -
nsIAccessibleProvider -
-
-
diff --git a/files/fr/archive/mozilla/xul/tooltip/index.html b/files/fr/archive/mozilla/xul/tooltip/index.html deleted file mode 100644 index abc9a0ffbd..0000000000 --- a/files/fr/archive/mozilla/xul/tooltip/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: tooltip -slug: Archive/Mozilla/XUL/tooltip -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/tooltip ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Cet élément est utilisé pour les popups de bulles d'information. Pour les tooltip texte, il n'est pas nécessaire d'utiliser cet élément ; vous pouvez dans ce cas simplement ajouter un attribut tooltiptext à l'élément.

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
crop, default, label, noautohide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position -
-
Propriétés -
accessibleType, label, popupBoxObject, position, state -
-
Méthodes -
hidePopup, moveTo, openPopup, openPopupAtScreen, showPopup, sizeTo -
-

Exemples

-
Image:XUL_ref_tooltip.png
-
<tooltip id="moretip" orient="vertical" style="background-color: #33DD00;">
-  <label value="Cliquez ici pour obtenir plus d'infomations"/>
-  <label value="Vraiment !" style="color: red;"/>
-</tooltip>
-
-<vbox>
-  <button label="Simple" tooltiptext="Un popup simple"/>
-  <button label="Plus" tooltip="moretip"/>
-</vbox>
-
-

Attributs

-

-

- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
-
- -
onpopuphidden -
Type : code de script -
Cet évènement est envoyé à un popup après qu'il a été caché. http://www.langue-fr.net/index/A/apres-que.htm -
- - -
-
- -
onpopuphiding -
Type : code de script -
Cet évènement est envoyé à un popup lorsqu'il est sur le point d'être masqué. -
- - -
-
- -
onpopupshowing -
Type : code de script -
Cet évènement est envoyé à un popup juste avant son ouverture. On l'utilise généralement pour définir dynamiquement le contenu lorsque l'utilisateur demande son affichage. Si ce gestionnaire d'évènement renvoie false, le popup ne s'affichera pas. -
- - -
-
- -
onpopupshown -
Type : code de script -
Cet évènement est envoyé à un popup après son ouverture, de la même manière qu'un évènement onload est envoyé à une fenêtre à son ouverture. -
- - -
-
- -
position -
Type : une des valeurs ci-dessous -
L'attribut position détermine où le popup apparaît par rapport à l'élément sur lequel l'utilisateur a cliqué pour l'invoquer. C'est ce qui permet de placer le popup sur le bord d'un bouton. -
- - - -
- -

Propriétés

-

-

-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
label -
Type : chaîne de caractères -
Obtient et définit la valeur de l'attribut label. -
- -
-
-
popupBoxObject -
Type : nsIPopupBoxObject -
Cette propriété en lecture seule conserve le nsIPopupBoxObject qui implémente le popup. Il n'est normalement pas nécessaire d'utiliser cette propriété étant donné que toutes ses fonctions sont disponibles via le popup lui-même. -
- -
-
-
position -
Type : chaîne -
Obtient et définit la valeur de l'attribut position. -
- -
-
-
state -
Type : chaîne -
Cette propriété en lecture seule indique si le popup est ouvert ou non. Quatre valeurs sont possibles : -
- - -
- -

Méthodes

- - - - - - -
-

Héritées de XUL element
- blur, click, doCommand, focus, getElementsByAttribute getElementsByAttributeNS

Héritées de DOM element
- addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

- -
-
hidePopup()
-
Type de retour : pas de valeur de retour -
Ferme le popup immédiatement. -
-
moveTo( x, y ) -
Type de retour : pas de valeur de retour -
Déplace le popup vers un nouvel emplacement. -
-
openPopup( anchor , position , x , y , isContextMenu, attributesOverride ) -
Type de retour : pas de valeur de retour -
-

Ouvre le popup relativement à un nœud spécifié à un emplacement spécifique. -

Le popup peut soit être ancré à un autre nœud ou ouvert librement. Pour ancrer un popup à un nœud, fournissez un nœud d'accrochage dans le paramètre anchor et définissez la position par une chaîne indiquant la manière dont le popup doit être ancré. -

Les valeurs possibles pour le paramètre position sont : before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, after_pointer -

Le nœud d'accrochage ne doit pas nécessairement être dans le même document que le popup. -

Si le paramètre attributesOverride vaut true, l'attribut position sur le nœud popup a priorité sur la valeur du paramètre position. Si attributesOverride vaut false, l'attribut n'est utilisé que si le paramètre position est vide. -

Pour un popup ancré, les paramètres x et y peuvent être utilisés pour décaler le popup de sa position d'ancrage de quelques pixels (mesurés en pixels CSS). -

Les popups non ancrés peuvent être créés en fournissant null comme paramètre anchor. Un popup non ancré apparait à la position spécifiée par x et y relativement à la zone visible (viewport) du document contenant le nœud popup. Dans ce cas, les paramètres position et attributesOverride sont ignorés. -

-
openPopupAtScreen( x, y, isContextMenu ) -
Type de retour : pas de valeur de retour -
-

Ouvre le popup à une position spécifique sur l'écran spécifiée par x et y. Cette position peut être ajustée s'il s'avère qu'elle provoquerait l'apparition du popup en dehors de l'écran. Les coordonnées x et y sont mesurées en pixels CSS. -

-
showPopup( element, x, y, popupType, anchor, align ) Déprécié dans Mozilla 1.9 -
Type de retour : aucune valeur de retour -
Ouvre un élément popup. Deux moyens de spécifier l'emplacement où s'affichera la fenêtre popup existent, soit en spécifiant une position spécifique de l'écran, soit par rapport à un autre élément de la fenêtre. Si x ou y sont définies par une valeur, le popup apparaîtra aux coordonnées (x,y) de l'écran. Si x et y sont définies à -1, le popup sera positionné par rapport à l'element spécifié dans le premier paramètre. C'est cette dernière méthode qu'il faut utiliser, par exemple, pour afficher un popup sous un bouton. Dans ce cas, les paramètres anchor et align peuvent être utilisés pour contrôler plus avant l'endroit où apparaîtra le popup par rapport à l'élément. Le paramètre anchor correspond à l'attribut popupanchor de l'élément et le paramètre align correspond à l'attribut popupalign. Les paramètres anchor et align sont ignorés si ni x ni y ne valent -1. -
-
Pour qu'un popup apparaisse à une position relative à un autre élément tout en étant décalé de quelques pixels, déterminez la position réelle de l'élément à l'aide de ses propriétés boxObject.screenX et boxObject.screenY, et utilisez celles-ci comme paramètres x et y en y ajoutant les décalages souhaités. -
-
Le paramètre popupType doit être une des chaînes popup, context ou tooltip. Chaque type de popup est destiné à être affiché temporairement ; ils ne sont pas censés être affichés de façon permanente. On ne peut afficher qu'un popup à la fois. -
-
sizeTo( <i>largeur</i>, <i>hauteur</i> ) -
Type de retour : aucune valeur de retour -
Modifie la taille actuelle de la fenêtre popup avec les nouvelles dimensions largeur et hauteur. -
- -

Sujets liés

-

À faire -

-
-
diff --git a/files/fr/archive/mozilla/xul/tree/index.html b/files/fr/archive/mozilla/xul/tree/index.html deleted file mode 100644 index 22056c4d02..0000000000 --- a/files/fr/archive/mozilla/xul/tree/index.html +++ /dev/null @@ -1,313 +0,0 @@ ---- -title: tree -slug: Archive/Mozilla/XUL/tree -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/tree ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Représente un arbre, un conteneur pouvant être utilisé pour un ensemble de lignes d'éléments tabulaires ou hiérarchiques. L'arbre peut contenir un nombre quelconque de lignes et de colonnes. Chaque ligne de l'arbre peut contenir des lignes filles qui seront affichées avec un décalage par rapport à leur parent. Contrairement aux autres éléments, les données à afficher à l'intérieur de l'arbre ne sont pas spécifiées à l'aide de balises, mais sont déterminées par un objet de vue. L'objet de vue implémente l'interface nsITreeView. La vue est interrogée pour les données à afficher dans l'arbre. Les arbres sont utilisées de différentes manières, comme montré dans la table ci-dessous. La deuxième colonne liste les interfaces disponibles via la propriété view de l'arbre. La troisième colonne indique si l'élément treeitem est utilisé. -

Si vous désirez que l'arbre puisse défiler horizontalement, définissez simplement l'attribut width pour chaque colonne de sorte que l'arbre soit plus large que son objet conteneur. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type d'arbreInterfaces de la vueA des nœuds DOM ?Description
Arbre de contenunsITreeView, nsITreeContentViewOuiCet arbre dispose d'éléments treeitem placés au sein de l'élément treechildren. Dans cette situation, une vue de contenu (qui implémente l'interface nsITreeContentView) qui est un type de vue plus spécialisé, utilise les éléments treeitem et leurs descendants pour déterminer les données à afficher dans l'arbre. Toutefois, les éléments treeitem ne sont pas affichés directement ; ils ne sont utilisés que comme données pour la vue de contenu. La vue de contenu mettra cependant automatiquement à jour l'arbre si les éléments treeitem sont modifiés.
Arbre RDFnsITreeView, nsIXULTreeBuilderNonCet arbre est généré depuis une source de données RDF. Il est utilisé lorsqu'un arbre a un attribut datasources, ainsi que la valeur dont-build-content dans son attribut flags. Pour cet arbre, les données viennent directement de la source de données RDF. Aucun élément DOM treeitem n'est créé. Même si le template utilise des éléments treeitem pour définir le contenu, aucun nœud DOM correspondant ne sera créé. C'est le type à utiliser pour les arbres générés par RDF avec beaucoup de lignes.
Arbre de contenu RDFnsITreeView, nsIXULTreeBuilder, nsITreeContentViewOuiCet arbre est généré depuis une source de données RDF. Il est similaire au type précédent, mais est utilisé lorsque l'arbre n'a pas la valeur dont-build-content dans son attribut flags. Des éléments treeitem sont créés dans le DOM, afin de pouvoir y accéder à l'aide de fonctions RDF ou DOM. Ce type convient aux arbres générés par RDF qui n'ont pas beaucoup de lignes.
Vue d'arbre personnaliséensITreeViewNonPour ce type d'arbre, vous implémentez vous-même l'interface nsITreeView. Les données de l'arbre sont obtenues depuis cette vue personnalisée. La vue personnalisée doit être attachée à l'arbre à l'aide de la propriété view.
-

Vous trouverez plus d'informations dans le Tutoriel XUL. Consultez également Changements dans les contrôles d'arbres. -

- -
Recommandations d'accessibilité liées -
  • Fournissez un accès alternatif (par exemple via des menus) aux sélecteurs de colonnes et pour les actions sur les en-têtes comme les tris (ceux-ci ne sont pas accessible au clavier par défaut). -
-
-
Attributs -
disableKeyNavigation, disabled, editable, enableColumnDrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex -
-
Propriétés -
accessibleType, builderView, columns, contentView, currentIndex, disableKeyNavigation, disabled, editingColumn, editingRow, enableColumnDrag, firstOrdinalColumn, inputField, selType, selstyle, tabIndex, treeBoxObject, view -
-

Exemples

-
<tree flex="1">
-
-  <treecols>
-    <treecol id="sender" label="Expéditeur" flex="1"/>
-    <treecol id="subject" label="Sujet" flex="2"/>
-  </treecols>
-
-  <treechildren>
-    <treeitem>
-      <treerow>
-        <treecell label="pat@example.com"/>
-        <treecell label="Plans top secrets"/>
-      </treerow>
-    </treeitem>
-    <treeitem>
-      <treerow>
-        <treecell label="mel@example.com"/>
-        <treecell label="Allons manger quelque part"/>
-      </treerow>
-    </treeitem>
-  </treechildren>
-
-</tree>
-
-
Image:trees1.png
-

Un arbre avec des éléments imbriqués : -

-
<tree id="myTree" flex="1" hidecolumnpicker="false" seltype="single" class="tree">
-  <treecols id="myTree2-treeCols">
-    <treecol id="myTree2-treeCol0" primary="true" flex="2" label="Colonne A"
-             persist="width" ordinal="1"/>
-    <splitter class="tree-splitter" ordinal="2"/>
-    <treecol id="myTree2-treeCol1" flex="1" label="Colonne B"
-             persist="width" ordinal="3"/>
-  </treecols>
-  <treechildren>
-    <treeitem>
-      <treerow>
-        <treecell label="1"/>
-        <treecell label="a"/>
-      </treerow>
-    </treeitem>
-    <!-- Assurez-vous de mettre container="true" -->
-    <treeitem container="true" open="true">
-      <treerow>
-        <treecell label="2"/>
-        <treecell label="b"/>
-      </treerow>
-      <treechildren>
-        <treeitem>
-          <treerow>
-            <treecell label="2a"/>
-            <treecell label="ba"/>
-          </treerow>
-        </treeitem>
-      </treechildren>
-    </treeitem>
-  </treechildren>
-</tree>
-
 -

Attributs

-

-

- -
disabled -
Type : booléen -
Indique si l'élément est ou non désactivé. Si cette valeur est définie à true, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement command ne se déclenchera pas.
-


-

-
Image:XUL_ref_attr_disabled.png
-
<!-- La case à cocher active/désactive le bouton -->
-<checkbox label="Enable button"
-    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
-<button id="buttRemove" label="Remove All" disabled="true"/>
-
-
-
- -
-
- -
-
- -
-
- -
flags -
Type : liste de valeurs (voir ci-dessous) séparées par des espaces -
Un ensemble de drapeaux destinés à différentes utilisations. Deux sont définis, et peuvent être la valeur de cet attribut. -
- -


-

- - -
-
- -
-
- -
-
- -
rows -
Type : entier -
Le nombre de lignes à afficher dans l'élément. Si l'élément contient plus que ce nombre de lignes, une barre de défilement apparaitra afin que l'utilisateur puisse consulter les autres lignes. Pour obtenir le nombre réel de lignes dans l'élément, utilisez la méthode getRowCount. -
- - -
-
- -
-
- seltype<magic name="\"PAGENAME\"/"></magic>
-
- Type : - - une des valeurs ci-dessous -
-
- Utilisé pour indiquer si les sélections multiples sont permises.
-
- -

<magic name="\"PAGENAME\"/">Des cellules individuelles peuvent être sélectionnées.</magic><magic name="\"PAGENAME\"/"> Des lignes sont sélectionnées, cependant, l'indicateur de sélection n'est visible que sur le texte de la colonne principale.</magic>

-
-
- -
-
- -
tabindex -
Type : entier -
L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le tabindex est plus haut se trouvent plus tard dans la séquence de tabulation. -
- - -
- -

Propriétés

-

-

-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
-
-
-
-
-
-
disabled -
Type : booléen -
Obtient et définit la valeur de l'attribut disabled. -
- -
-
-
-
-
-
-
-
-
-
- selType<magic name="\"PAGENAME\"/"></magic>
-
- Type : - - chaîne de caractères -
-
- Obtient et définit la valeur de l'attribut seltype.
-
- -
-
-
-
tabIndex -
Type : entier -
Obtient et définit la valeur de l'attribut tabindex. -
- -
-
-
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- - - -

Sujets liés

-
Éléments -
treecols, treecol, treechildren, treeitem, treerow, treecell et treeseparator. -
Interfaces -
nsIAccessibleProvider, nsIDOMXULTreeElement, nsIDOMXULMultiSelectControlElement -
-

Exemples de scripts

-

Pour alterner les couleurs de fond pour chaque ligne, utilisez des règles de styles comme les souvantes : pma at daffodil dot uk dot com -

-
treechildren::-moz-tree-row(selected) { background-color: #FFFFAA; }
-treechildren::-moz-tree-row(odd) { background-color: #EEEEEE; }
-treechildren::-moz-tree-row(odd, selected) { background-color: #FFFFAA; }
-treechildren::-moz-tree-cell-text(selected) { color: #000000; }
-treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; }
-
 -

Si vous utilisez une vie d'arbre de contenu, utilisez le code suivant pour obtenir la valeur de l'attribut id de chacune des lignes sélectionnées de l'arbre : tcooper_mont at yahoo dot com -

-
var rangeCount = tree.view.selection.getRangeCount();
-for (var i = 0; i < rangeCount; i++)
-{
-   var start = {};
-   var end = {};
-   tree.view.selection.getRangeAt(i, start, end);
-   for (var c = start.value; c <= end.value; c++)    {
-      idList.push(tree.view.getItemAtIndex(c).firstChild.id);
-   }
-}
-
 -

Le code qui soit renvoie un tableau des indices de lignes pour lesquelles la valeur est cochée dans une colonne de type checkbox : -jfabre at ismans dot fr -

-
function getCellChecked(tree, columnid)
-{
-  var arr = [];
-  var column = tree.columns.getNamedColumn(columnid);
-  for (var i = 0; i < tree.view.rowCount; i++) {
-    if (tree.view.getCellValue(i, column) == 'true')
-      arr.push(i);
-  }
-  return arr;
-}
-
 -

Pour obtenir la valeur textuelle d'une colonne particulière (par exemple la colonne age) de la ligne ayant actuellement le focus dans l'arbre : -

-
var t = document.getElementById('mytree');
-document.title = t.view.getCellText(t.currentIndex, t.columns.getNamedColumn('age'));
-
 diff --git a/files/fr/archive/mozilla/xul/treecell/index.html b/files/fr/archive/mozilla/xul/treecell/index.html deleted file mode 100644 index b54c0485bd..0000000000 --- a/files/fr/archive/mozilla/xul/treecell/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: treecell -slug: Archive/Mozilla/XUL/treecell -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/treecell ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Une cellule unique dans un arbre (élément tree). Cet élément doit être placé dans un treerow. Le texte de la cellule peut être défini à l'aide de l'attribut label. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
editable, label, mode, properties, ref, src, value -
-

Attributs

-

-

- -
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
-
- -
properties -
Type : liste de noms de propriétés séparés par des espaces -
Définit les propriétés de l'élément, qui peuvent être utilisées pour le styler. Pour plus d'informations, consultez Styler un arbre. -
- - -
-
- -
ref -
Type : URI d'une ressource RDF -
Pour les éléments générés par des templates, cet attribut est utilisé pour indiquer le nœud racine RDF où la génération de contenu commence. Ceci correspondra à la valeur d'un attribut about sur un conteneur RDF. Cet attribut doit être placé en même temps que l'attribut datasources. -
- - -
-
- -
-
- -
value -
Type : chaîne -
Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre.. -
- - -
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
tree treecols, treecol, treechildren, treeitem, treerow et treeseparator. -
-
-
diff --git a/files/fr/archive/mozilla/xul/treechildren/index.html b/files/fr/archive/mozilla/xul/treechildren/index.html deleted file mode 100644 index a0e1d2a21a..0000000000 --- a/files/fr/archive/mozilla/xul/treechildren/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: treechildren -slug: Archive/Mozilla/XUL/treechildren -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/treechildren ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Cet élément est le corps d'un élément tree. Pour les arbres de contenu, celui-ci sera placé dans cet élément. Cet élément est également utilisé pour définir des lignes de contenu dans l'arbre. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
alternatingbackground -
-

Exemples

-

(exemple nécessaire)

-

Attributs

-
- -
- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
tree, treecols, treecol, treeitem, treerow, treecell et treeseparator. -
-
-
diff --git a/files/fr/archive/mozilla/xul/treecol/index.html b/files/fr/archive/mozilla/xul/treecol/index.html deleted file mode 100644 index 4073cfd1ce..0000000000 --- a/files/fr/archive/mozilla/xul/treecol/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: treecol -slug: Archive/Mozilla/XUL/treecol -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/treecol ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Une colonne dans un élément tree. Cet élément affiche l'en-tête de colonne et conserve la taille et d'autres informations sur la colonne. VOus pouvez également placer des éléments splitter entre les colonnes pour permettre leur redimensionnement. Placez toujours un attribut id sur un élément treecol pour vous assurer que son positionnement sera géré correctement. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortActive, sortDirection, src, type, width -
-
Propriétés -
accessibleType -
-
Classes de style -
treecol-image -
-

Exemples

-
Image:Xul_tree_col_checked.png
-

Cet exemple montre une case à cocher dans la première colonne, et utilise le style présenté plus bas. -

-
<tree flex="1">
-
-  <treecols>
-    <treecol label="Actif" type="checkbox" editable="true"/>
-    <treecol label="Nom" flex="1" />
-  </treecols>
-
-  <treechildren>
-    <treeitem>
-      <treerow>
-      	<treecell value="true"/>
-        <treecell label="Alice"/>
-      </treerow>
-    </treeitem>
-    <treeitem>
-      <treerow>
-        <treecell value="false"/>
-        <treecell label="Bob"/>
-      </treerow>
-    </treeitem>
-  </treechildren>
-
-</tree>
-
-

Pour rendre la case à cocher visible sur certaines plateformes, les styles suivants doivent être ajoutés à la feuille de style (voir treecol.type). Dans Firefox 2.x et 3.x, tous les systèmes autres que Mac OS X utilisent déjà ces styles par défaut. Si vous visez Firefox sous Mac OS X, assurez-vous d'utiliser ces styles tout en fournissant votre propre image de case à cocher. Notez que chrome://global/skin/checkbox/cbox-check.gif est disponible dans SeaMonkey sous Mac OS X. -

-
treechildren::-moz-tree-checkbox {
-  /* cases à cocher non cochées dans des treecells. Ce style DOIT être avant treechildren::-moz-tree-checkbox(checked), autrement il n'aura aucun effet.  */
-  list-style-image: none;
-}
-
-treechildren::-moz-tree-checkbox(checked){
-  /* style pour les cases cochées. cbox-check.gif n'est pas disponible dans Firefox 1, 2 et 3 sous Mac OS X, vous devrez donc spécifier l'URL d'une image
-     dans votre extension ou ailleurs. */
-  list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif");
-}
-
-

Attributs

-

-

- -
crop -
Type : une des valeurs ci-dessous -
Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également. -
- - - -
-
- -
-
- -
-
- -
-
- -
-
- -
hidden -
Type : booléen -
Si défini à true, l'élément n'est pas affiché. Cet attribut est similaire à la valeur « none » de la propriété CSS display. -
- - -
-
- -
-
- -
-
- -
label -
Type : chaîne de caractères -
Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra. -
- - -
-
- -
-
- -
-
- -
-
- -
sortDirection -
Type : une des valeurs ci-dessous -
Cet attribut indique la direction dans laquelle le contenu généré par un template est trié. Utilisez l'attribut sortResource pour spécifier la clé de tri. -
- -


-

- - -
-
- -
-
- -
-
- -
- -

Propriétés

-
-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Classes de style

-

La classe suivante peut être utilisée pour styler l'élément. Cette classe doit être utilisée plutôt que de changer le style de l'élément directement, car elle s'adaptera plus naturellement au thème sélectionné par l'utilisateur. -

-
- treecol-image
-
- Use this class to have an image appear on the tree column header. Specify the image using the src attribute.
-
- -

Sujets liés

-
Éléments -
tree, treecols, treechildren, treeitem, treerow, treecell et treeseparator. -
Interfaces -
nsIAccessibleProvider -
-
-
diff --git a/files/fr/archive/mozilla/xul/treecols/index.html b/files/fr/archive/mozilla/xul/treecols/index.html deleted file mode 100644 index 439ef88631..0000000000 --- a/files/fr/archive/mozilla/xul/treecols/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: treecols -slug: Archive/Mozilla/XUL/treecols -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/treecols ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un groupe d'éléments treecol. Il doit y avoir un et un seul élément treecols dans un tree. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
pickertooltiptext
-
Propriétés -
accessibleType -
-

Exemples

-

(exemple nécessaire) -

-

Attributs

-
- -
- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

-
-
accessibleType -
Type : entier -
Une valeur indiquant le type d'objet d'accessibilité pour l'élément. -
-
- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
tree, treecol, treechildren, treeitem, treerow, treecell et treeseparator. -
Interfaces -
nsIAccessibleProvider -
-
-
diff --git a/files/fr/archive/mozilla/xul/treeitem/index.html b/files/fr/archive/mozilla/xul/treeitem/index.html deleted file mode 100644 index d52ffb8260..0000000000 --- a/files/fr/archive/mozilla/xul/treeitem/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: treeitem -slug: Archive/Mozilla/XUL/treeitem -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/treeitem ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un treeitem doit être placé dans un élément treechildren et contenir des éléments treerow. L'utilisateur peut cliquer sur l'élément treeitem pour sélectionner la ligne de l'arbre. L'élément treeitem contient une seule ligne et tout ce qui apparait à l'utilisateur comme les descendants de cette ligne. -

Dans une condition de template, utilisez un treeitem plutôt qu'un élément content lorsque le paramètre dont-build-content est spécifié. Définissez l'attribut uri au nom de variable à lier à un nœud de contenu lors de la correspondance. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
container, empty, label, open, uri -
-

Exemples

-

(exemple nécessaire) -

-

Attributs

-

-

- -
container -
Type : booléen -
Défini à true si l'élément doit agir comme un conteneur pouvant avoir des éléments enfants. Ceci peut être utilisé pour des dossiers. Cet attribut sera défini par le constructeur de template si nécessaire. -
-


-

- - -
-
- -
empty -
Type : booléen -
Défini à true si l'élément est un conteneur qui ne contient aucun enfant. Il sera défini par le constructeur de template si nécessaire. -
- - -
-
- -
-
- -
open -
Type : booléen -
Pour les boutons de type menu, l'attribut open est défini à true lorsque le menu est ouvert. L'attribut open n'est pas présent si le menu est fermé. -
- - -
-
- -
uri -
Type : chaîne de caractères -
Pour du contenu généré par un template, l'attribut doit être placé sur l'élément où la génération de contenu doit commencer. Donc, il doit être placé sur un élément qui est le descendant d'un template. La valeur doit être définie à rdf:*. -
-
Les éléments qui apparaissent à l'intérieur de l'élément portant cet attribut seront répétés pour chaque nœud dans la source de données RDF. Les éléments qui sont à l'extérieur n'apparaîtront qu'une seule fois. -
-


-

- - -
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
tree, treecols, treecol, treechildren, treerow, treecell et treeseparator. -
-
-
diff --git a/files/fr/archive/mozilla/xul/treerow/index.html b/files/fr/archive/mozilla/xul/treerow/index.html deleted file mode 100644 index d14176ddcc..0000000000 --- a/files/fr/archive/mozilla/xul/treerow/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: treerow -slug: Archive/Mozilla/XUL/treerow -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/treerow ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Une ligne unique dans un arbre (élément tree). Cet élément doit être placé dans un élément treeitem. Les enfants de treerow doivent être des éléments treecell. Si des lignes filles sont nécessaires, il convient de les placer dans un élément treechildren au sein de l'élément treeitem parent. -

Vous trouverez plus d'informations dans le Tutoriel XUL. -

-
Attributs -
properties -
-

Exemples

-

(exemple nécessaire) -

-

Attributs

-
- -
properties -
Type : liste de noms de propriétés séparés par des espaces -
Définit les propriétés de l'élément, qui peuvent être utilisées pour le styler. Pour plus d'informations, consultez Styler un arbre. -
- - -
- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
tree, treecols, treecol, treechildren, treeitem, treecell et treeseparator. -
-
-
diff --git a/files/fr/archive/mozilla/xul/treeseparator/index.html b/files/fr/archive/mozilla/xul/treeseparator/index.html deleted file mode 100644 index 7e6af95185..0000000000 --- a/files/fr/archive/mozilla/xul/treeseparator/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: treeseparator -slug: Archive/Mozilla/XUL/treeseparator -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/treeseparator ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Utilisé pour placer une nouvelle ligne séparatrice dans un tree. -

-
Attributs -
properties -
-

Exemples

-

(exemple nécessaire) -

-

Attributs

-
- -
properties -
Type : liste de noms de propriétés séparés par des espaces -
Définit les propriétés de l'élément, qui peuvent être utilisées pour le styler. Pour plus d'informations, consultez Styler un arbre. -
- - -
- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
tree, treecols, treecol, treechildren, treeitem, treerow et treecell. -
-
-
diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_d'\303\251l\303\251ments_html/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_d'\303\251l\303\251ments_html/index.html" deleted file mode 100644 index 6dfeea624f..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_d'\303\251l\303\251ments_html/index.html" +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Ajout d'éléments HTML -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Ajout_d'éléments_HTML -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_HTML_Elements ---- -
-

« PrécédentSuivant »

-
- -

Maintenant que nous avons ajouté quelques boutons, ajoutons d'autres éléments.

- -

Ajout d'éléments HTML dans une fenêtre

- -

En plus de tous les éléments XUL déjà disponibles, vous pouvez également ajouter des éléments HTML directement dans un fichier XUL. En réalité, vous pouvez ajouter n'importe quel élément HTML dans des fichiers XUL, ce qui signifie que des applets Java ou des tableaux peuvent être placés directement dans une fenêtre. Vous devriez proscrire l'emploi de ces éléments HTML dans vos fichiers XUL dès que vous le pouvez (il existe plusieurs raisons à cela, et la principale concerne la mise en page qui sera décrite plus tard). Cette section va néanmoins décrire comment les employer. Souvenez-vous que le langage XML est sensible à la casse, et que de ce fait vous devrez taper les balises et les attributs en minuscules.

- -

Espace de nommage XHTML

- -

Afin de pouvoir utiliser des éléments HTML dans un fichier XUL, vous devez déclarer l'espace de nommage XHTML correspondant (NdT : namespace). De cette façon, Mozilla peut faire la distinction entre les balises de HTML de celles de XUL. L'attribut ci-dessous doit être ajouté à la balise window du fichier XUL, ou à l'élément HTML le plus extérieur.

- -
xmlns:html="http://www.w3.org/1999/xhtml"
-
- -

Il s'agit d'une déclaration HTML comme celle que nous avons utilisée pour déclarer XUL. Pour fonctionner, elle doit être saisie exactement comme indiquée ci-dessus.

- -
Notez qu'en réalité, Mozilla ne télécharge pas cette URL, mais il la reconnaît comme étant une déclaration HTML.
- -
-

Voici un exemple qui peut être ajouté à notre fenêtre de Recherche de fichiers :

- -
<?xml version="1.0" encoding="ISO-8859-1"?>
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<window
-   id="findfile-window"
-   title="Recherche de fichiers"
-   orient="horizontal"
-   xmlns:html="http://www.w3.org/1999/xhtml"
-   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
- -

Ensuite, vous pouvez employer des balises HTML comme vous le feriez normalement, en gardant à l'esprit ceci :

- - - -

Utilisation d'éléments HTML

- -

Vous pouvez utiliser n'importe quelle balise HTML bien que certaines comme head et body ne soient d'aucune utilité. Des exemples d'emploi des éléments HTML sont montrés ci-dessous :

- -
<html:img src="banner.jpg"/>
-
-<html:input type="checkbox" value="true"/>
-
-<html:table>
-  <html:tr>
-    <html:td>
-       Un tableau simple
-    </html:td>
-  </html:tr>
-</html:table>
-
- -

Ces exemples vont créer une image à partir du fichier 'banner.jpg', une case à cocher et un tableau avec une unique cellule. Vous devriez toujours employer des éléments XUL s'ils sont disponibles et vous ne devriez pas employer des tableaux pour la mise en page sous XUL (des éléments XUL permettent de le faire).

- -
Notez que le préfixe html: a été ajouté au début de chaque balise, pour que Mozilla sache qu'il s'agit d'une balise HTML et non d'une balise XUL. Si vous oubliez un préfixe html:, le navigateur croira qu'il s'agit d'un élément XUL et il n'affichera probablement rien car les balises img, input, table, etc. ne sont pas des balises XUL valides.
- -

En XUL, vous pouvez ajouter des libellés avec l'élément description ou label. Vous devriez utiliser ces éléments dès que vous le pouvez. Vous pouvez également ajouter des libellés à des contrôles soit en utilisant la balise HTML label, soit en mettant simplement le texte dans un autre élément bloc HTML (tel que p ou div) comme dans l'exemple ci-dessous.

- -

Exemple 1: Source Voir

- -
<html:p>
-  Rechercher :
-  <html:input id="find-text"/>
-  <button id="okbutton" label="OK"/>
-</html:p>
-
- -

Ce code va afficher le texte 'Rechercher :', suivi d'un champ de saisie de texte et d'un bouton « OK ». Notez que le bouton XUL peut apparaître dans un bloc de balise HTML, comme c'est le cas ici. Du texte ne sera affiché que s'il est placé à l'intérieur de balises HTML qui sont normalement employées pour afficher du texte (comme une balise p). Tout texte placé en dehors de balises ne sera pas affiché, sauf si l'élément XUL contenant le texte le permet (l'élément description par exemple).

- -

Les exemples suivants vont vous aider.

- -

Exemple d'éléments HTML

- -

Les exemples suivants illustrent l'ajout de balises HTML dans une fenêtre. Dans chaque cas, l'élément window et d'autres informations basiques ont été retirés pour plus de clarté.

- -

Une boîte de dialogue avec une case à cocher

- -

Exemple 2: Source Voir

- -
<html:p>
-  Cliquez sur la boîte ci-dessous pour mémoriser cette décision.
-  <html:p>
-    <html:input id="rtd" type="checkbox"/>
-    <html:label for="rtd">Mémoriser cette décision</html:label>
-  </html:p>
-</html:p>
-
- -
Image:xultu_htmlelem1.png
- -

Dans ce cas, une première balise p a été utilisée pour placer du texte et une autre a été utilisée pour séparer le texte en plusieurs lignes. (NdT : selon la norme XHTML, une balise p ne peut pas inclure une autre balise p, l'exemple est donc en principe erroné.)

- -

Texte en dehors de blocs HTML

- -

Exemple 3: Source Voir

- -
<html:div>
-   Voulez-vous sauvegarder les documents suivants ?
-   <html:hr/>
-</html:div>
-Rapport de dépense 1 que j'ai fait l'été dernier
-<button id="yes" label="Oui"/>
-<button id="no" label="Non"/>
-
- -
Image:xultu_htmlelem2.png
- -

Comme vous pouvez le voir sur cette image, le texte placé à l'intérieur des balises div a été affiché mais l'autre texte ('Rapport de dépense 1' et 'que j'ai fait l'été dernier') ne l'a pas été. Ceci est dû au fait qu'il n'y a pas d'éléments HTML ou XUL entourant le texte à afficher et capables de le faire. Pour rendre ce texte apparent, vous devez le placer à l'intérieur de balises div, ou l'inclure dans une balise description.

- -

Les éléments HTML invalides

- -
<html:po>Cas 1</html:po>
-<div>Cas 2</div>
-<html:description value="Cas 3"/>
-
- -

Aucun des trois cas ci-dessus ne s'affichera pour les raisons suivantes :

- -
-
Cas 1 
-
po n'est pas une balise HTML valide et Mozilla n'a aucune idée de ce qu'il faut en faire.
-
Cas 2 
-
div est une balise valide mais seulement en HTML. Pour qu'elle fonctionne, vous devez ajouter le qualificateur 'html:'.
-
Cas 3 
-
un élément description est valide en XUL mais pas en HTML. Il ne devrait pas avoir de qualificateur 'html:'.
-
- -
-

Dans la page suivante, nous apprendrons comment ajouter de l'espace entre les éléments.

- -
-

« PrécédentSuivant »

-
-Interwiki
- -

 

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_gestionnaire_d_\303\251v\303\250nements/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_gestionnaire_d_\303\251v\303\250nements/index.html" deleted file mode 100644 index 9eab0ef687..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_gestionnaire_d_\303\251v\303\250nements/index.html" +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Ajout de gestionnaire d'évènements -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Ajout_de_gestionnaire_d_évènements -tags: - - Tutoriel_XUL - - Tutoriels - - XBL - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements ---- -
-

« PrécédentSuivant »

-
- -

Nous allons voir comment ajouter des gestionnaires d'événements aux éléments XBL.

- -

Les gestionnaires d'événements

- -

Comme vous pouvez le prévoir, des clics de souris, des touches pressées et d'autres événements sont passés à chacun des éléments à l'intérieur du contenu. Cependant, vous voudrez maîtriser les événements et les gérer à votre façon. Vous pouvez ajouter des gestionnaires d'événements aux éléments au sein du contenu si besoin. Le dernier exemple de la section précédente en faisait une démonstration. Dans cet exemple, des gestionnaires oncommand avaient été ajoutés sur quelques boutons.

- -

Gestionnaires d'événements

- -

Toutefois, vous pouvez vouloir ajouter un gestionnaire d'événement à tout le contenu, ce qui représente tous les éléments définis au sein de la balise content. Cela pourrait être utile pour maîtriser les événements de sélection et de désélection. Pour définir un gestionnaire d'événement, utilisez l'élément handler. Chacun de ces éléments décrit l'action d'un seul gestionnaire d'événement. Vous pouvez utiliser plus d'un gestionnaire si nécessaire. Si un événement ne correspond pas à l'un des événements handler, il est passé simplement dans le contenu comme d'habitude.

- -

La syntaxe générale du gestionnaire est la suivante :

- -
<binding id="nom-liaison">
-  <handlers>
-    <handler event="nom-evenement" action="script"/>
-  </handlers>
-</binding>
-
- -

Placez tous vos gestionnaires dans l'élément handlers. Chaque élément handler définit l'action prise pour un événement particulier grâce à son attribut event. Les événements valides sont ceux supportés par XUL et JavaScript, tels que 'click' et 'focus'. Utilisez le nom de l'événement sans son préfixe 'on'.

- -

La principale raison nécessitant la déclaration de gestionnaires est la modification des propriétés personnalisées lorsqu'un événement se produit. Par exemple, une case à cocher personnalisée pourrait avoir une propriété checked qui doit être modifée lorsque l'utilisateur clique sur la case à cocher :

- -
<handlers>
-  <handler event="mouseup" action="this.checked=!this.checked"/>
-</handlers>
-
- -

Lorsque l'utilisateur clique et relâche le bouton de la souris au dessus de la case à cocher, l'événement 'mouseup' lui est envoyé, et le gestionnaire défini ici est appelé, entraînant le renversement de l'état de la propriété checked. De même, vous pouvez modifier une propriété lorsque l'élément est sélectionné. Vous devrez ajouter des gestionnaires pour ajuster les propriétés lors de sollicitations de la souris ou du clavier.

- -

Gestionnaire d'événements de souris

- -

Pour des événements concernant la souris, vous pouvez utiliser l'attribut button pour que le gestionnaire n'accepte que les événements qui correspondent à un certain bouton. Sans cet attribut, le gestionnaire intercepterait tous les événements concernant la souris sans se soucier du bouton qui a été pressé. L'attribut button doit être défini à '0' pour le bouton gauche de la souris, '1' pour le bouton du milieu de la souris ou '2' pour le bouton droit de la souris.

- -
<handlers>
-  <handler event="click"   button="0" action="alert('Le bouton gauche est pressé');"/>
-  <handler event="mouseup" button="1" action="alert('Le bouton du milieu est pressé')"/>
-  <handler event="click"   button="2" action="alert('Le bouton droit est pressé');"/>
-</handlers>
-
- -

Gestionnaire d'événements clavier

- -

Pour les événements provenant des touches du clavier, vous pouvez utiliser plusieurs attributs similaires à ceux de l'élément key pour les faire correspondre à une touche spécifique et seulement lorsque certaines touches alternatives sont pressées. L'exemple précédent pourrait être complété de telle sorte que la propriété checked de la case à cocher soit modifiée lorsque la barre d'espacement est pressée.

- -
<handlers>
-  <handler event="keypress" key=" " action="this.checked=!checked"/>
-</handlers>
-
- -

Vous pouvez aussi utiliser l'attribut keycode pour tester les touches non imprimables. La section sur les raccourcis clavier fournit plus d'informations. Les touches alternatives peuvent être vérifiées en ajoutant un attribut modifiers. Il peut être défini avec l'une des valeurs suivante :

- -
-
'alt' 
-
L'utilisateur doit presser la touche Alt.
-
'control' 
-
L'utilisateur doit presser la touche Ctrl.
-
'meta' 
-
L'utilisateur doit presser la touche Meta.
-
'shift' 
-
L'utilisateur doit presser la touche Maj.
-
'accel' 
-
L'utilisateur doit presser la touche alternative spéciale qui est habituellement utilisée pour les raccourcis clavier sur sa plateforme.
-
- -

S'il est déclaré, le gestionnaire est appelé uniquement lorsque la touche alternative est pressée. Vous pouvez combiner plusieurs touches modificatrices en les séparant par des espaces.

- -

La syntaxe alternative suivante peut être utilisée lorsque le code dans un gestionnaire est plus complexe :

- -
<binding id="nom-liaison">
-  <handlers>
-    <handler event="nom-evenement">
-      -- le code du gestionnaire vient ici --
-    </handler>
-  </handlers>
-</binding>
-
- -

Exemple de gestionnaires

- -

L'exemple suivant ajoute des gestionnaires de touches pour créer un presse-papiers local très primitif :

- -

Exemple 1 : Source

- -
<binding id="clipbox">
-  <content>
-    <xul:textbox/>
-  </content>
-  <implementation>
-    <field name="clipboard"/>
-  </implementation>
-  <handlers>
-    <handler event="keypress" key="x" modifiers="control"
-      action="this.clipboard=document.getAnonymousNodes(this)[0].value; document.getAnonymousNodes(this)[0].value='';"/>
-    <handler event="keypress" key="c" modifiers="control"
-      action="this.clipboard=document.getAnonymousNodes(this)[0].value;"/>
-    <handler event="keypress" key="v" modifiers="control"
-      action="document.getAnonymousNodes(this)[0].value=this.clipboard ? this.clipboard : '';"/>
-  </handlers>
-</binding>
-
- -

Le contenu est un champ de saisie simple. Un champ clipboard lui a été ajouté pour stocker le contenu du presse-papiers. Il signifie que les opérations de presse-papiers sont limitées à ce seul champ de saisie. Le tampon sera propre à ce champ.

- -

Trois gestionnaires ont été ajoutés, un pour couper, un pour copier et l'autre pour coller. Chacun d'eux a sa propre combinaison de touche appelante. Le premier gestionnaire est l'opération Couper et est appelé lorsque la touche Ctrl est pressée suivie de la touche x. Le script à l'intérieur de l'attribut action est utilisé pour couper le texte du champ de saisie et pour le mettre dans le champ du presse-papiers. Pour faire simple, le texte entier est coupé et pas seulement le texte sélectionné. Le code fonctionne comme suit :

- -
    -
  1. - 
    this.clipboard=document.getAnonymousNodes(this)[0].value;
    - On récupère le premier élément du tableau de contenu anonyme qui donne une référence à l'élément textbox qui s'avère être le premier (et le seul) élément au sein de l'élément content. On récupère la propriété value qui fournira le texte du champ de saisie. Elle est ainsi assignée au champ du presse-papiers. Le résultat est que le texte qui se trouve dans la champ de saisie est copié dans ce presse-papiers spécial.
    2. -
  2. - 
    document.getAnonymousNodes(this)[0].value=''
    - On assigne ainsi au texte de l'élément textbox une chaîne de caractères vide. Elle efface le texte dans le champ de saisie.
    3. -
- -

Une opération de copie est similaire mais n'efface pas le texte. Le collage est l'opération inverse si ce n'est que la valeur du champ de saisie est assignée à partir de la valeur du champ du presse-papiers. Si nous étions en train de créer une réelle implémentation de ces raccourcis clavier de presse-papiers, nous utiliserions probablement l'interface réelle du presse-papiers et nous gèrerions également la sélection courante.

- -
-

Dans la prochaine section, nous verrons comment étendre les définitions XBL existantes.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_gestionnaires_d'\303\251v\303\250nements/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_gestionnaires_d'\303\251v\303\250nements/index.html" deleted file mode 100644 index df33636311..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_gestionnaires_d'\303\251v\303\250nements/index.html" +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Ajout de gestionnaires d'évènements -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Ajout_de_gestionnaires_d'évènements -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers ---- -

 

- -
-

« PrécédentSuivant »

-
- -

La boîte de dialogue de recherche de fichiers est tout à fait correcte à ce stade. Nous ne l'avons pas beaucoup optimisée mais nous avons facilement créé une interface utilisateur. Dans ce qui suit, nous allons montrer comment lui ajouter des scripts.

- -

Utilisation de scripts

- -

Pour rendre la boîte de dialogue de recherche de fichiers fonctionnelle, nous avons besoin d'ajouter des scripts qui vont s'exécuter quand l'utilisateur interagira avec le dialogue. Nous voudrions ajouter un script pour gérer le bouton « Rechercher », le bouton « Annuler » et pour gérer chaque commande du menu. Nous écrirons ces scripts en utilisant des fonctions JavaScript de la même manière qu'en HTML.

- -

Vous pouvez utiliser l'élément script pour inclure des scripts dans des fichiers XUL. Vous pouvez aussi inclure le script directement dans le fichier XUL entre les balises script ouvrante et fermante, mais il est préférable de placer le code dans un fichier séparé. Votre fenêtre XUL se chargera un peu plus rapidement. Nous utiliserons alors l'attribut src pour lier un fichier de script externe.

- -
-

Notre exemple de recherche de fichiers

- -

Ajoutons un script au dialogue de recherche de fichiers. Bien que le nom du fichier de script n'ait pas d'importance, il est courant de lui donner le même nom que celui du fichier XUL, avec l'extension 'js'. Dans ce cas, on utilisera 'findfile.js'. Ajoutez la ligne ci-dessous juste après la balise window ouvrante et AVANT tout autre élément.

- -
<script src="findfile.js"/>
-
- -

Nous créerons le fichier de script plus tard, quand nous connaîtrons son contenu. Nous y définirons des fonctions que nous pourrons appeler dans des gestionnaires d'événements.

-
- -

Nous pouvons inclure de multiples scripts dans un fichier XUL en utilisant de multiples balises script, chacune pointant vers un script différent. Nous pouvons utiliser des URLs relatives ou absolues. Par exemple, nous pouvons utiliser des URLs sous les formes suivantes :

- -
<script src="findfile.js"/>
-<script src="chrome://findfiles/content/help.js"/>
-<script src="http://www.example.com/js/items.js"/>
-
- -

Ce tutoriel n'a pas pour but de décrire comment écrire du JavaScript. C'est un sujet vaste et il existe déjà beaucoup de documentation le traitant.

- -
Par défaut, la console JavaScript n'affiche que les erreurs provenant des contenus Web. Pour voir les erreurs JavaScript du chrome, il est nécessaire de modifier la préférence javascript.options.showInConsole à 'true'. Vous pouvez également faire du débogage en modifiant la préférence javascript.options.strict. En la définissant à 'true', les erreurs causés par des codes non standard, mal écrits, ou syntaxiquement erronés seront affichés dans la console d'erreurs.
- -

Réponse aux événements

- -

Le script contiendra le code qui répondra aux différents événements déclenchés par l'utilisateur ou par d'autres situations. Il existe environ une trentaine d'événements pouvant être gérés de différentes manières. Un événement classique est le bouton de souris ou la touche pressée par l'utilisateur. Chaque élément XUL a la capacité de déclencher certains événements dans des situations différentes. Quelques déclenchements d'événements sont spécifiques à certains éléments.

- -

Chaque événement a un nom, par exemple, 'mousemove' est le nom de l'événement qui est déclenché quand l'utilisateur passe la souris au-dessus d'un élément d'interface utilisateur. XUL utilise le mécanisme d'événement défini par le DOM Events (Version traduite). Quand survient une action devant déclencher un événement, telle que le déplacement de la souris par l'utilisateur, un objet 'event' correspondant à ce type d'événement est créé. Des propriétés sont assignées à cet objet event telles que la position de la souris, la touche pressée, etc.

- -

L'événement est ensuite envoyé au XUL par phases.

- - - -

Vous pouvez réagir à un événement pendant la phase de capture ou de diffusion. Une fois que l'événement a terminé de se propager, l'action correspondant au comportement natif de l'élément est déclenchée.

- -

Par exemple, quand la souris passe sur un bouton inclus dans une boîte, un événement 'mousemove' est généré et envoyé d'abord à la fenêtre, puis au document et ensuite à la boîte. Cela complète la phase de capture. Ensuite, l'événement 'mousemove' est envoyé au bouton. Enfin la phase de diffusion se traduit par le renvoi de l'événement vers la boîte, puis le document et enfin la fenêtre. La phase de diffusion est par essence l'inverse de la phase de capture. Notez que certains événements ne passent pas par la phase de diffusion.

- -

Vous pouvez attacher des scrutateurs à chaque élément pour être à l'écoute des événements pendant chaque étape de leur propagation. Étant donné qu'un simple événement est passé à tous les ancêtres, vous pouvez attacher un scrutateur à un élément spécifique ou à un élément supérieur dans la hiérarchie. Naturellement, un événement attaché à un élément parent recevra une notification de tous les éléments qu'il contient, alors qu'un événement attaché à un bouton recevra seulement des événements concernant ce bouton. C'est utile si vous désirez gérer plusieurs éléments avec un code identique ou similaire.

- -

Une fois que vous gérez un événement, sans vous souciez du stade de sa propagation, vous voudrez probablement le stopper avant qu'il ne soit envoyé à d'autres éléments, ce qui, en substance, signifie que vous voulez interrompre les phases de capture et de diffusion. Il existe plusieurs façons d'y parvenir, en fonction de la manière avec laquelle vous avez attaché le scrutateur d'événement à un élément.

- -

L'événement le plus utilisé est l'événement 'command'. L'événement 'command' est déclenché quand l'utilisateur active un élément, par exemple en pressant un bouton, en cochant une case ou en sélectionnant une entrée d'un menu. L'événement 'command' est pratique car il gère automatiquement les différentes méthodes d'activation d'un élément. Par exemple, l'événement 'command' se produira indifféremment si l'utilisateur utilise sa souris pour cliquer le bouton ou s'il presse la touche Entrée.

- -

Il y a deux manières d'attacher un scrutateur d'événement à un élément. Premièrement, en utilisant un attribut avec un script comme valeur. Deuxièmement, en appelant la méthode addEventListener d'un élément. La première manière peut seulement gérer les événements en phase de diffusion mais est plus simple à écrire. La seconde peut gérer les événements sur chaque phase et peut aussi être utilisée pour attacher plusieurs scrutateurs pour un événement à un élément. L'utilisation de la « forme par attribut » est une manière plus commune pour la plupart des événements.

- -

Scrutateurs d'événements par attributs

- -

Pour utiliser la forme par attribut, placez un attribut sur un élément à l'endroit que vous voulez, son nom devra être le nom de l'événement précédé par le mot « on ». Par exemple, l'attribut correspondant à l'événement 'command' est oncommand. La valeur de l'attribut devra être le code à exécuter quand l'événement se produira. Typiquement, ce code sera court et appellera une fonction définie dans un script séparé. Voici un exemple de réponse lorsqu'un bouton est pressé :

- -

Exemple 1: Source Voir

- -
<button label="OK" oncommand="alert('Le bouton a été pressé !');"/>
- -

Puisque l'événement 'command' va se diffuser, il est également possible de placer le scrutateur d'événement sur un élément conteneur. Dans l'exemple ci-dessous, le scrutateur a été placé sur une boîte et il recevra les événements pour tous ses éléments.

- -

Exemple 2: Source Voir

- -
<vbox oncommand="alert(event.target.tagName);">
-   <button label="OK"/>
-   <checkbox label="Voir les images"/>
-</vbox>
-
- -

Dans cet exemple, l'événement 'command' va se diffuser du bouton ou de la case à cocher jusqu'à la boîte, où il sera traité. Si un second scrutateur (l'attribut oncommand) était placé sur le bouton, son code serait appelé en premier, suivi par le gestionnaire de la boîte. L'objet event est transmis aux gestionnaires d'événements comme un argument implicite nommé 'event'. Il est utilisé pour obtenir des informations spécifiques à propos de l'événement. Une des plus utilisées est la propriété 'target' (cible) de l'événement, qui cible l'élément à partir duquel l'événement s'est produit. Dans l'exemple, nous affichons une alerte contenant le nom de l'élément cible. La cible est très utile lors de l'utilisation d'un événement en diffusion dans le cas où vous auriez une série de boutons gérée par un même script.

- -

Vous noterez que la syntaxe de l'attribut est identique à celle utilisée pour les événements dans les documents HTML. En fait, HTML et XUL partagent le même mécanisme d'événement. Une différence importante est que l'événement 'click' (ou l'attribut onclick) est utilisé en HTML pour répondre aux boutons, alors qu'on devra utiliser l'événement 'command' en XUL. XUL possède un événement 'click', mais il répond uniquement aux clics de souris, pas à l'utilisation du clavier. Ainsi, l'événement 'click' devra être évité en XUL, sauf si vous avez une raison d'avoir un élément uniquement géré avec la souris. De plus, tandis que l'événement 'command' ne sera pas envoyé si un élément est désactivé, l'événement 'click' sera envoyé sans tenir compte de l'état activé ou non de l'élément.

- -
-

Notre exemple de recherche de fichiers

- -

Un gestionnaire oncommand peut être placé sur les boutons « Rechercher » et « Annuler » dans le dialogue de recherche de fichiers. L'appui sur le bouton « Rechercher » devrait démarrer la recherche. Comme nous n'implémenterons pas cette partie, nous l'omettrons. En revanche, l'appui sur le bouton « Annuler » devrait fermer la fenêtre. Le code ci-dessous montre comment le faire. Pendant que nous y sommes, ajoutons le même code à l'item de menu « Fermer ».

- -
<menuitem label="Fermer" accesskey="c" oncommand="window.close();"/>
-...
-
-<button id="cancel-button" label="Annuler"
-     oncommand="window.close();"/>
-
-Deux gestionnaires ont été ajoutés ici. L'attribut oncommand a été ajouté à l'item de menu « Fermer ». En utilisant ce gestionnaire, l'utilisateur pourra fermer la fenêtre en cliquant sur l'item de menu ou en le sélectionnant par le clavier. Le gestionnaire oncommand a également été ajouté au bouton « Annuler ».
- -

Scrutateurs d'événements DOM

- -

La seconde façon d'ajouter un gestionnaire d'événement est d'appeler la méthode addEventListener d'un élément. Celle-ci vous permet d'attacher dynamiquement un scrutateur d'événement et de scruter les événements durant la phase de capture. La syntaxe est la suivante :

- -

Exemple 3: Source Voir

- -
<button id="okbutton" label="OK"/>
-
-<script>
-function buttonPressed(event) {
-   alert('Le bouton a été pressé !');
-}
-
-var button = document.getElementById("okbutton");
-button.addEventListener('command', buttonPressed, true);
-</script>
-
- -

La fonction getElementById() retourne l'élément ayant un identifiant id, dans notre cas, le bouton. La fonction addEventListener() est appelée pour ajouter un nouveau scrutateur d'événement en phase de capture. Le premier argument est le nom de l'événement à scruter. Le deuxième argument est la fonction du scrutateur d'événement qui sera appelée quand l'événement se produira. Enfin, le dernier argument devra être 'true' pour les scrutateurs en phase de capture. Vous pouvez également scruter durant la phase de diffusion en donnant la valeur 'false' au dernier argument. La fonction scrutateur d'événement passée comme deuxième argument devra avoir un argument, l'objet 'event', comme vous le voyez dans la déclaration de la fonction buttonPressed ci-dessus.

- -
-
-

Le dialogue de recherche de fichiers à ce stade : Source Voir

-
- -

Dans la prochaine section, nous aborderons plus en détail l'objet event.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

- -

 

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_m\303\251thodes/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_m\303\251thodes/index.html" deleted file mode 100644 index c0adc86eaa..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_m\303\251thodes/index.html" +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Ajout de méthodes -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Ajout_de_méthodes -tags: - - Tutoriel_XUL - - Tutoriels - - XBL - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements ---- -
-

« PrécédentSuivant »

-
- -

Nous allons voir comment ajouter des méthodes personnalisées aux éléments définis en XBL.

- -

Les méthodes

- -

En plus d'ajouter des propriétés de script à l'élément défini en XBL, vous pouvez aussi y ajouter des méthodes. Ces méthodes peuvent être appelées à partir d'un script. Les méthodes sont des fonctions d'objets, comme window.open(). Vous pouvez définir des méthodes personnalisées pour vos éléments en utilisant l'élément method. La syntaxe générale des méthodes est définie comme suit :

- -
<implementation>
-  <method name="method-name">
-    <parameter name="parameter-name1"/>
-    <parameter name="parameter-name2"/>
-    .
-    .
-    .
-    <body>
-      -- le script de la méthode vient ici --
-    </body>
-  </method>
-</implementation>
-
- -

Une déclaration de méthode se fait au travers de l'élément implementation, comme pour les champs et les propriétés. L'élément method contient deux types d'éléments fils, les éléments parameter qui décrivent les paramètres de la méthode et body qui contient le script de la méthode.

- -

La valeur de l'attribut name devient le nom de la méthode. De même, les attributs name des éléments parameter deviennent les noms de chaque paramètre. Chaque élément parameter est utilisé pour déclarer l'un des paramètres pour la méthode. Par exemple, si la méthode a trois paramètres, il y aura trois éléments parameter. Si vous n'avez pas besoin d'en avoir, la méthode n'aura pas de balise parameter.

- -

L'élément body contient le script qui est exécuté lorsque la méthode est appelée. Les noms des paramètres sont définis comme des variables dans le script comme s'ils étaient passés en paramètre. Par exemple, la fonction JavaScript suivante serait écrite en tant que méthode XBL comme ceci :

- -
function getMaximum(num1,num2)
-{
-  if (num1<=num2) return num2;
-  else return num1;
-}
-
-XBL:
-
-<method name="getMaximum">
-  <parameter name="num1"/>
-  <parameter name="num2"/>
-  <body>
-    if (num1&lt;=num2) return num2;
-    else return num1;
-  </body>
-</method>
-
- -

Cette fonction, getMaximum, retourne la plus grande des valeurs passées chacune comme un paramètre dans la méthode. Notez que le symbole inférieur doit être un caractère d'échappement parce qu'autrement il ressemblerait au commencement d'une balise. Vous pouvez aussi utiliser une section CDATA pour échapper le bloc entier de code. Vous pouvez appeler la méthode en utilisant un code comme element.getMaximum(5,10) où element est une référence à un élément défini par l'élément XBL contenant la méthode getMaximum (L'élément de liaison).

- -

La balise parameter vous permet de définir des paramètres pour une méthode. Comme Mozilla utilise JavaScript pour son langage de script, et que JavaScript est un langage non typé, vous n'avez pas besoin de spécifier le type des paramètres. Cependant, dans le futur, d'autres langages devraient être utilisés avec XBL.

- -

Accès au contenu anonyme

- -

Il peut y avoir des fois où vous voulez modifier certains aspects des éléments définis dans l'élément content, que ce soit à partir d'une méthode body ou d'ailleurs. Ces éléments sont créés anonymement et ne sont pas accessibles à partir des fonctions habituelles du DOM (Modèle Objet de Document). Elles sont cachées de telle sorte que les développeurs n'aient pas besoin de savoir comment l'élément est implémenté pour l'utiliser. Cependant, il existe un moyen spécial pour obtenir ce contenu anonyme.

- -

Les éléments auxquels un comportement XBL est attaché ont une propriété spéciale qui contient un tableau des éléments fils anonymes. Chaque élément du tableau stocke chaque élément fils direct de l'élément XBL défini. Cette propriété spéciale ne peut pas être accessible directement. À la place, vous devez appeler la méthode getAnonymousNodes du document.

- -
var value=document.getAnonymousNodes(element);
- -

Ici, 'element' devrait être une référence à l'élément dont vous voulez obtenir le contenu anonyme. La fonction retourne un tableau d'éléments qui est le contenu anonyme. Pour obtenir des éléments en-dessous de celui-ci, vous pouvez utiliser les fonctions habituelles du DOM (Modèle Objet de Document) car elles ne sont pas cachées. Notez qu'il est possible pour un élément XBL lié d'être placé à l'intérieur d'un autre, auquel cas vous devrez utiliser une nouvelle fois la fonction getAnonymousNodes.

- -

L'exemple suivant crée une rangée de boutons :

- -
<binding id="buttonrow">
-  <content>
-    <button label="Oui"/>
-    <button label="Non"/>
-    <button label="Trier par"/>
-  </content>
-</binding>
-
- -

Pour vous référer à chaque bouton, vous pouvez utiliser la fonction getAnonymousNodes, en lui passant une référence à l'élément auquel la liaison est attachée, en tant que paramètre. Dans le tableau renvoyé, le premier bouton est stocké dans le premier item du tableau (getAnonymousNodes(element)[0]), le deuxième bouton est stocké dans le deuxième item du tableau et le troisième est stocké dans le troisième item du tableau. Pour coder à l'intérieur d'une méthode de liaison, vous pouvez passer this comme paramètre à getAnonymousNodes.

- -

Le prochain exemple peut être utilisé pour créer un texte avec un libellé. La méthode showTitle sert à montrer ou à cacher un libellé. Elle fonctionne en obtenant une référence à l'élément titre en utilisant le tableau anonyme et en changeant sa visibilité.

- -
XUL:
-
-<box id="num" class="labeledbutton" title="Plusieurs choses :" value="52"/>
-
-<button label="Montrer" oncommand="document.getElementById('num').showTitle(true)"/>
-<button label="Cacher" oncommand="document.getElementById('num').showTitle(false)"/>
-
-XBL:
-
-<binding id="labeledbutton">
-  <content>
-    <xul:label xbl:inherits="value=title"/>
-    <xul:label xbl:inherits="value"/>
-  </content>
-  <implementation>
-    <method name="showTitle">
-      <parameter name="state"/>
-      <body>
-        if (state) document.getAnonymousNodes(this)[0].
-          setAttribute("style","visibility: visible");
-        else document.getAnonymousNodes(this)[0].
-          setAttribute("style","visibility: collapse");
-      </body>
-    </method>
-  </implementation>
-</binding>
-
- -

Les deux boutons ajoutés dans le contenu XUL ont des gestionnaires oncommand qui sont utilisés pour changer la visibilité du libellé. Chacun d'eux appelle la méthode showTitle. Cette méthode vérifie le paramètre state pour voir si l'élément sera caché ou montré. Dans un cas comme dans l'autre, elle récupère le premier élément du tableau anonyme. Celui-ci se rapporte au premier fils de l'élément content qui ici est le premier élément label de l'élément graphique. La visibilité est changée en modifiant le style de l'élément.

- -

Accès depuis l'intérieur du contenu anonyme

- -

Pour aller dans l'autre sens, et obtenir l'élément XUL liée depuis l'intérieur du contenu anonyme, utilisez la propriété parentNode du DOM (Modèle Objet de Document). Elle permet d'obtenir l'élément parent d'un élément. Par exemple, nous pourrions déplacer les boutons 'Montrer' et 'Cacher' dans le fichier XBL et faire la chose suivante :

- -

Exemple 1 : Source

- -
<binding id="labeledbutton">
-  <content>
-    <xul:label xbl:inherits="value=title"/>
-    <xul:label xbl:inherits="value"/>
-    <xul:button label="Montrer" oncommand="parentNode.showTitle(true);"/>
-    <xul:button label="Cacher" oncommand="parentNode.showTitle(false);"/>
-  </content>
-  <implementation>
-    <method name="showTitle">
-      <parameter name="state"/>
-      <body>
-        if (state) document.getAnonymousNodes(this)[0].setAttribute("style","visibility: visible");
-        else document.getAnonymousNodes(this)[0].setAttribute("style","visibility: collapse");
-      </body>
-    </method>
-  </implementation>
-</binding>
-
- -

Les gestionnaires oncommand obtiennent ici d'abord une référence à leur élément parent. Il ne s'agit pas de l'élément content mais de l'élément XUL auquel l'élément XBL est lié (Dans cet exemple, c'est la boîte avec la classe 'labeledbutton'). Ainsi, la méthode showTitle est appelée, et fonctionne comme avant.

- -

Les propriétés et méthodes personnalisées sont ajoutées seulement à l'élément XUL externe auquel l'élément XBL est lié. Aucun des éléments déclarés au sein de la balise content n'ont ces propriétés ou méthodes. C'est pourquoi nous devons obtenir l'élément parent d'abord.

- -

Les fils d'un élément placés dans le fichier XUL peuvent être récupérés par la voie normale et ne bougent pas même si vous utilisez la balise children. Par exemple :

- -
XUL:
-
-<box id="outer" class="container">
-  <button label="Un"/>
-  <button label="Deux"/>
-  <button label="Trois"/>
-  <button label="Quatre"/>
-</box>
-
-XBL:
-
-<binding id="labeledbutton">
-  <content>
-    <description value="Une pile :"/>
-    <stack>
-      <children/>
-    </stack>
-  </content>
-</binding>
-
- -

Si vous utilisez les fonctions du DOM (Modèle Objet de Document) telles que childNodes pour obtenir les fils d'un élément, vous verrez que la boîte XUL qui a l'id 'outer', a 4 fils. Ceux-ci correspondent à ses 4 boutons, même si ces boutons sont dessinés à l'intérieur de la pile (stack). La pile n'a qu'un seul fils, l'élément children lui-même. La longueur du tableau anonyme de la boîte externe est de deux, le premier élément étant l'élément description et le second étant l'élément stack.

- -

Constructeurs et Destructeurs

- -

XBL supporte deux méthodes spéciales créées avec des balises séparées, constructor et destructor. Un constructeur est appelé chaque fois qu'une liaison est attachée à un élément. Il est utilisé pour initialiser le contenu tel que le chargement de préférences ou l'initialisation des valeurs par défaut de champs. Le destructeur est appelé lorsqu'une liaison est enlevée d'un élément. Il peut s'avérer utile pour sauvegarder des informations.

- -

Il y a deux points à savoir lorsqu'une liaison est attachée à un élément. Le premier se produit lorsqu'une fenêtre est affichée. Tous les constructeurs des éléments qui ont un contenu XBL attaché seront invoqués. L'ordre dans lequel ils sont appelés ne devrait pas être pris en compte, car ils sont chargés à partir divers fichiers. Le gestionnaire de chargement de la fenêtre (onload) n'est pas appelé tant que toutes les liaisons n'ont pas été attachées et leurs constructeurs exécutés. Le second point quand une liaison est attachée, est lorsque vous changez la propriété de style -moz-binding d'un élément. Après que son destructeur ait été appelé, la liaison existante sera enlevée. Ainsi, la nouvelle liaison sera ajoutée à sa place et son constructeur sera invoqué.

- -

Le script pour un constructeur ou un destructeur devrait être placé directement à l'intérieur de la balise appropriée. Il ne doit y avoir qu'un seul de chaque par liaison et ils ne prennent aucun argument. Voici quelques exemples :

- -
<constructor>
-  if (this.childNodes[0].getAttribute("open") == "true"){
-    this.loadChildren();
-  }
-</constructor>
-
-<destructor action="saveMyself(this);"/>
-
- -
-

La prochaine section montre comment ajouter des gestionnaires d'événements aux éléments XBL définis.

- -
-

« PrécédentSuivant »

-
diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_propri\303\251t\303\251s/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_propri\303\251t\303\251s/index.html" deleted file mode 100644 index 0294706900..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajout_de_propri\303\251t\303\251s/index.html" +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Ajout de propriétés -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Ajout_de_propriétés -tags: - - Tutoriel_XUL - - Tutoriels - - XBL - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements ---- -
-

« PrécédentSuivant »

-
- -

Nous allons voir comment ajouter des propriétés personnalisées aux éléments XBL (eXtended Binding Language).

- -

L'interface XBL

- -

JavaScript et le DOM fournissent un moyen pour obtenir et définir les propriétés des éléments. Avec XBL, vous pouvez définir vos propres propriétés pour les éléments que vous créez. Vous pouvez aussi ajouter des méthodes qui peuvent être appelées. De cette façon, tout ce dont vous avez besoin est d'obtenir une référence à l'élément (en utilisant getElementById ou une fonction similaire) et ainsi obtenir ou modifier ses propriétés additionnelles et appeler ses méthodes.

- -

Il y a trois types d'items que vous pouvez ajouter.

- - - -

Chacun des trois est défini dans un élément implementation, qui doit être un fils de l'élément de liaison binding. À l'intérieur de la balise implementation, vous définirez pour chacun d'eux un élément field, un élément property et un élément method selon ce que vous voulez. La syntaxe générale est celle-ci :

- -
<binding id="nom-élément">
-  <content>
-    -- le contenu vient ici --
-  </content>
-  <implementation>
-    <field name="nom-champ-1"/>
-    <field name="nom-champ-2"/>
-    <field name="nom-champ-3"/>
-
-    <property name="nom-propriété-1"/>
-    <property name="nom-propriété-2"/>
-    <property name="nom-propriété-3"/>
-    .
-    .
-    .
-    <method name="nom-méthode-1">
-      -- le contenu vient ici --
-    </method>
-    .
-    .
-    .
-  </implementation>
-</binding>
-
- -

Les champs

- -

Chaque champ est défini en utilisant l'élément field. Souvent, les champs correspondent à un attribut placé sur l'élément comme label ou disabled, mais ils ne le devraient pas.

- -

L'attribut name de field est utilisé pour indiquer le nom du champ. Vous pouvez utiliser le nom dans un script pour obtenir et déterminer une valeur. L'exemple ci-dessous crée un bouton qui génère et stocke un nombre aléatoire. Vous pouvez rechercher ce même nombre plusieurs fois en obtenant la propriété number du bouton. Le plus gros du travail ici est fait par les gestionnaires oncommand. Plus tard, nous verrons comment transformer cela en XBL.

- -
XUL:
-
-<box id="random-box" class="randomizer"/>
-
-<button label="Générer"
-           oncommand="document.getElementById('random-box').number=Math.random();"/>
-<button label="Voir"
-           oncommand="alert(document.getElementById('random-box').number)"/>
-
-XBL:
-
-<binding id="randomizer">
-  <implementation>
-    <field name="number"/>
-  </implementation>
-</binding>
-
- -

Un champ number mémorisant le nombre aléatoire a été défini dans la liaison. Les deux boutons spéciaux définissent et obtiennent la valeur de ce champ. La syntaxe est très similaire pour obtenir et définir les propriétés des éléments HTML. Dans cet exemple, aucun contenu n'a été placé à l'intérieur que ce soit la boîte XUL ou sa définition dans XBL, ce qui est parfaitement valide.

- -

Cet exemple n'est pas tout à fait correct car il n'y a pas de valeur par défaut assignée dans le champ. Pour en mettre une, ajoutez la valeur par défaut dans le contenu de la balise field. Par exemple :

- -
<field name="number">
-  25
-</field>
-
- -

Ici, la valeur '25' sera affectée comme valeur par défaut du champ "number". En fait, vous pourriez aussi insérer un script au sein de la balise field pour calculer la valeur par défaut. Cela pourrait être nécessaire si la valeur a besoin d'être calculée. Par exemple, le champ suivant donne une valeur par défaut égale à l'heure courante :

- -
<field name="currentTime">
-  new Date().getTime();
-</field>
-
- -

Les propriétés

- -

Parfois vous voulez valider la donnée qui est assignée à une propriété. Ou bien, vous souhaitez que la valeur soit calculée dynamiquement lorsqu'on le lui demande. Par exemple, si vous souhaitez une propriété qui prenne en compte l'heure courante, vous voudrez que sa valeur soit générée au besoin. Dans ces cas là, vous avez besoin d'utiliser une balise property à la place de la balise field. Sa syntaxe est similaire mais comporte des particularités supplémentaires.

- -

Attributs onget et onset

- -

Vous pouvez utiliser les attributs onget et onset pour que le code soit exécuté lorsque la propriété est lue ou modifiée. Ajoutez les à l'élément property et définissez leur valeur dans un script qui, au choix, obtient ou déclare la valeur de la propriété.

- -

Par exemple, vous pouvez assigner un script à la valeur de onget pour calculer le temps courant. Chaque fois qu'un script tente d'accéder à la valeur de la propriété, le script onget sera appelé pour fournir la valeur. Le script devra retourner la valeur qui devrait être traitée comme étant la valeur de la propriété.

- -

Le gestionnaire onset est similaire mais est appelé chaque fois qu'un script tente d'assigner une nouvelle valeur à la propriété. Ce script devrait stocker la valeur quelque part, ou la valider. Par exemple, certaines propriétés pourraient juste être capables de stocker des nombres. Les tentatives pour assigner des caractères alphabétiques à ce genre de propriétés ne devraient pas fonctionner.

- -
<property name="size"
-          onget="return 77;"
-          onset="alert('Modifié en :'+val); return val;"/>
-
- -

Cette propriété retournera toujours '77' lorsqu'elle sera récupérée. Lorsqu'elle sera affectée, un message d'alerte s'affichera et indiquera la valeur à assigner à la propriété. La variable spéciale val contient cette valeur. Utilisez-la pour la valider ou la stocker. La propriété onset devrait aussi retourner la nouvelle valeur.

- -

Ce qui suit décrit le comportement d'un cas typique :

- -

Il y a deux éléments, l'un appelé "banana" et l'autre "orange". Chacun d'eux a une propriété spécifique appelée 'size'. Lorsque la ligne de script suivante est exécutée :

- -
banana.size = orange.size;
-
- -
    -
  1. Le script onget est appelé pour la propriété "size" de "orange". Il calcule la valeur et la retourne.
    2. -
  2. Le gestionnaire onset de la propriété "size" de "banana" est appelé. Ce script utilise la valeur passée dans la variable val et l'assigne à la propriété "size" de "banana" de façon quelconque.
    3. -
- -

Notez que contrairement à un champ, une propriété ne contient pas de valeur. Tenter de définir une propriété qui n'a pas de gestionnaire onset provoquera une erreur. Vous utiliserez souvent un champ séparé pour mémoriser la valeur actuelle de la propriété. Il est aussi commun que les propriétés correspondent à un attribut dans l'élément défini XBL. L'exemple suivant fait correspondre une propriété à un attribut sur un élément.

- -
<property name="size"
-          onget="return this.getAttribute('size');"
-          onset="return this.setAttribute('size',val);"
-/>
-
- -

Chaque fois qu'un script tente d'obtenir la valeur de la propriété, elle est récupérée d'un attribut de même nom de l'élément XUL. Chaque fois qu'un script tente de définir la valeur de la propriété, elle est affectée à l'attribut 'size' de l'élément. C'est pratique parce qu'ainsi vous pouvez modifier la propriété ou l'attribut et tous les deux auront la même valeur.

- -

Éléments getter et setter

- -

Vous pouvez utiliser une syntaxe alternative pour les attributs onget et onset pouvant être utile pour des scripts plus longs. Vous pouvez remplacer l'attribut onget par l'élément fils nommé getter. De même, vous pouvez remplacer l'attribut onset par l'élément setter. L'exemple ci-dessous le montre :

- -
<property name="number">
-  <getter>
-    return this.getAttribute('number');
-  </getter>
-  <setter>
-    var v = parseInt(val,10);
-    if (!isNaN(v)) return this.setAttribute('number',''+v);
-    else return this.getAttribute('number');"
-  </setter>
-</property>
-
- -

La propriété dans cet exemple ne pourra contenir que des valeurs d'entiers. Si d'autres caractères sont entrés, ils sont supprimés. S'il n'y a aucun chiffre, la valeur n'est pas modifiée. Ces opérations sont effectuées dans le code au sein de l'élément setter. La valeur réelle de la propriété est stockée dans l'attribut number.

- -

Vous pouvez utilisez l'une ou l'autre syntaxe pour créer des gestionnaires de lecture et d'affectation.

- -

Attribut readonly

- -

Vous pouvez rendre un champ ou une propriété en lecture seule en ajoutant un attribut readonly à la balise field ou à la balise property, et en le déclarant à 'true'. Toute tentative d'affecter une valeur à une propriété en lecture seule échouera.

- -
-

La prochaine section montre comment ajouter des méthodes aux éléments définis en XBL.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_boutons/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_boutons/index.html deleted file mode 100644 index 33d1b2f376..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_boutons/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Ajouter des boutons -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Ajouter_des_boutons -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Buttons ---- -
-

« PrécédentSuivant »

-
- -

Dans cette section, nous regarderons comment ajouter quelques boutons simples dans une fenêtre.

- -

Ajouter des boutons dans une fenêtre

- -

La fenêtre que nous avons créée jusqu'ici était vide, aussi n'est-elle pas encore très intéressante. Dans cette section, nous y ajouterons deux boutons, un bouton de recherche et un bouton d'annulation. Nous apprendrons également une manière simple de les positionner dans la fenêtre.

- -

Comme pour HTML, XUL dispose d'un certain nombre de balises qui peuvent être utilisées pour créer des éléments d'interface utilisateur. Le plus basique d'entre eux est l'élément button. Cet élément sert à créer de simples boutons.

- -

L'élément bouton a deux propriétés principales : un libellé label et une image image. Vous avez besoin soit de l'un, soit de l'autre, soit des deux en même temps. Ainsi, un bouton peut avoir seulement un libellé, seulement une image ou un libellé et une image à la fois. Les boutons sont souvent utilisés dans une boîte de dialogue pour valider ou annuler, par exemple.

- -

Syntaxe des boutons

- -

L'élément button a la syntaxe suivante :

- -
<button
-       id="identifier"
-       class="dialog"
-       label="OK"
-       image="images/image.jpg"
-       disabled="true"
-       accesskey="t"/>
-
- -

Les attributs sont définis comme suit, et ils sont tous optionnels :

- -
-
id 
-
Identifiant unique vous permettant d'identifier le bouton. Vous verrez cet attribut sur tous les éléments XUL. Vous pouvez l'utiliser pour vous référer au bouton dans une feuille de style ou dans un script. Cependant, vous devriez ajouter cet attribut à presque tous les éléments. Notez que pour des raisons de simplicité, il n'est pas toujours spécifié dans les exemples de ce tutoriel.
-
class 
-
La classe de style du bouton. Elle fonctionne de la même manière qu'en HTML. Elle indique l'aspect du bouton dans la fenêtre. Dans le cas présent, la valeur 'dialog' est utilisée. Dans la plupart des cas, vous n'emploierez pas de classe pour un bouton.
-
label 
-
Le libellé qui apparaîtra sur le bouton. Par exemple : 'OK' ou 'Annuler'. S'il est omis, aucun texte n'apparaît.
-
image 
-
L'URL de l'image qui apparaît sur le bouton. Si cet attribut est omis, aucune image n'apparaîtra. Vous pouvez également indiquer l'image dans une feuille de style en utilisant la propriété list-style-image.
-
disabled 
-
Si cet attribut prend la valeur true, le bouton est désactivé. Celui-ci est habituellement dessiné avec le texte écrit en gris. Si le bouton est désactivé, la fonction du bouton ne peut pas être exécutée. Si cet attribut est omis, le bouton est activé. Vous pouvez commuter l'état d'activation du bouton en utilisant Javascript.
-
accesskey 
-
Cet attribut doit spécifier une lettre qui est employée comme raccourci clavier. Cette lettre doit apparaître, généralement soulignée, dans le libellé. Quand l'utilisateur presse la touche alt (ou une touche équivalente, qui varie en fonction de la plate-forme) et la touche de raccourci, à partir de n'importe où dans la fenêtre, le focus sera mis sur le bouton.
-
- -
Notez qu'un bouton supporte plus d'attributs que ceux énumérés ci-dessus. Les autres seront abordés plus tard.
- -

Quelques exemples de boutons :

- -

Exemple 1: Source Voir

- -
<button label="Normal"/>
-<button label="Désactivé" disabled="true"/>
-
- -
Image:xultu_buttons1.png
- -

Les exemples ci-dessus produiront des boutons comme dans la capture. Le premier bouton est un bouton normal. Le second bouton est désactivé, aussi apparaît-il grisé.

- -

Nous commencerons par créer un bouton simple de recherche qui permettra de lancer la recherche de fichiers. Le code de l'exemple ci-dessous nous montre comment faire :

- -
<button id="find-button" label="Rechercher"/>
-
- -
Notez que Firefox ne vous permet pas d'ouvrir des fenêtres chrome à partir de pages Web. Aussi les liens « voir » dans le tutoriel s'ouvriront dans une fenêtre normale de navigation. À cause de cela, les boutons apparaîtront agrandis le long de la fenêtre. Vous pouvez ajouter align="start" sur l'élément window pour éviter cette déformation.
- -
-

L'exemple findfile.xul

- -

Ajoutons ce code au fichier findfile.xul que nous avons créé dans la section précédente. Le code doit être inséré entre les balises window. Le code à ajouter est mis en rouge ci-dessous :

- -
<?xml version="1.0"?>
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<window id="findfile-window"
-        title="Recherche de fichiers"
-        orient="horizontal"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-  <button id="find-button" label="Rechercher"/>
-  <button id="cancel-button" label="Annuler"/>
-
-</window>
-
- -
Image:buttons2.png
-Vous noterez que le bouton 'Annuler' a été également ajouté. La fenêtre a une orientation horizontale de sorte que les deux boutons apparaissent l'un à côté de l'autre. Si vous ouvrez le fichier dans Mozilla, vous devriez obtenir quelque chose de similaire à l'image montrée ici.
- -
Notez que nous ne devrions pas mettre le texte des libellés directement dans le fichier XUL. Nous devrions plutôt employer des entités de sorte que le texte puisse être facilement traduit.
- -

PAS SUR MDC L'exemple de la boîte de recherche&nbsp;: <a href='exemples/findfile/findfile-buttons.xul.txt'>Source</a> <a href="exemples/findfile/findfile-buttons.xul" onclick="window.open(this.href,'xulff','chrome,resizable'); return false;">Voir</a>

- -
-

Dans la section suivante, nous découvrirons comment ajouter des libellés et des images dans une fenêtre XUL.

- -


-

-

« PrécédentSuivant »

-
diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_feuilles_de_style/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_feuilles_de_style/index.html deleted file mode 100644 index e357b89163..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_feuilles_de_style/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Ajouter des feuilles de style -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Ajouter_des_feuilles_de_style -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Style_Sheets ---- -

 

-
-

« PrécédentSuivant »

-
-

Jusqu'à présent, nous avons à peine modifier l'aspect visuel des éléments que nous avons créés. XUL utilise CSS (Cascading Style Sheets) pour personnaliser les éléments.

-

Feuilles de styles

-

Une feuille de styles est un fichier qui contient des informations de style pour les éléments. Les styles ont été conçus au départ pour des éléments HTML mais ils peuvent également être appliqués à des éléments XUL ou à n'importe quels éléments XML. La feuille de styles contient des informations telles que les polices, couleurs, bordures et taille des éléments.

-

Mozilla applique une feuille de styles par défaut pour chaque fenêtre XUL. Dans la plupart des cas, il sera suffisant de laisser les valeurs par défaut telles quelles. Toutefois, vous pouvez fournir une feuille de styles personnalisée. En général vous associerez une seule feuille de styles à chaque fichier XUL.

-

Vous pouvez placer une feuille de styles où vous le désirez. Si votre fichier XUL se trouve sur un serveur distant et doit être accédé via une URL HTTP, vous pouvez également stocker la feuille de styles à distance. Si vous créez un paquetage XUL destiné à faire partie du système chrome, vous avez deux choix. Premièrement, vous pouvez placer la feuille de styles dans le même répertoire que le fichier XUL. Cette méthode a l'inconvénient d'interdire le changement du thème graphique de votre application. La seconde méthode consiste à placer vos fichiers à l'intérieur d'un thème.

-
Imaginons que nous construisions la boîte de dialogue de recherche de fichiers pour permettre le choix d'un thème. Comme la fenêtre peut être appelée par l'URL 'chrome://findfile/content/findfile.xul', la feuille de styles sera enregistrée dans 'chrome://findfile/skin/findfile.css'.
-

Tous les exemples XUL ont utilisé une feuille de styles jusqu'à présent. La seconde ligne a toujours été :

-
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-

Cette ligne indique que nous voulons utiliser le style fourni par chrome://global/skin/. Sous Mozilla, elle sera traduit par le fichier global.css qui contient les informations du style par défaut pour les éléments XUL. Si vous enlevez cette ligne, les éléments fonctionneront, toutefois ils apparaîtront dans un style plus simple. La feuille de styles utilise diverses polices, couleurs et bordures pour rendre l'apparence des éléments plus appropriée.

-

Modifier les styles

-

Il arrivera toutefois que l'apparence par défaut des éléments ne soit pas celle désirée. Dans ces cas, nous devons ajouter notre propre feuille de styles. Jusqu'à présent, nous avons appliqué différents styles en utilisant l'attribut style sur des éléments. Bien que ce soit une technique fonctionnelle, elle n'est pas la meilleure. Il est de loin préférable de créer une feuille de styles séparée. La raison est que des styles ou des thèmes différents peuvent êtres appliqués très facilement.

-

Il peut y avoir des cas où l'utilisation de l'attribut style est acceptable. Un bon exemple serait lorsqu'un script modifie le style d'un élément, ou quand une différence d'agencement pourrait modifier la signification de l'élément. Cependant vous devriez l'éviter autant que possible.

-

Pour des fichiers installés, vous aurez à créer ou à modifier un fichier manifeste et installer le thème.

-
-

Notre exemple de recherche de fichiers

-

Modifions la boîte de dialogue de recherche de fichiers pour que son style provienne d'un fichier style séparé. Tout d'abord, voici les lignes modifiées de findfile.xul  :

-
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="findfile.css" type="text/css"?>
-  ...
-<spacer class="titlespace"/>
-  <groupbox orient="horizontal">
-    <caption label="Critères de recherche"/>
-
-      <menulist id="searchtype">
-        <menupopup>
-          <menuitem label="Nom"/>
-          <menuitem label="Taille"/>
-          <menuitem label="Date de modification"/>
-        </menupopup>
-      </menulist>
-      <spacer class="springspace"/>
-      <menulist id="searchmode">
-        <menupopup>
-          <menuitem label="Est"/>
-          <menuitem label="N'est pas"/>
-        </menupopup>
-      </menulist>
-
-      <spacer class="springspace"/>       <menulist id="find-text" flex="1"
-          editable="true"
-          datasources="file:///mozilla/recents.rdf"
-          ref="http://www.xulplanet.com/rdf/recent/all"/>
-  ...
-<spacer class="titlespace"/> <hbox>    <progressmeter id="progmeter" value="50%" style="display:none;"/>
-
-

La nouvelle ligne xml-stylesheet est utilisée afin d'importer la feuille de styles. Elle contiendra les styles au lieu de les avoir directement dans le fichier XUL. Vous pouvez inclure un nombre indéterminé de feuilles de styles de la même façon. Ici la feuille de styles est placée dans le même répertoire que findfile.xul.

-

Certains des styles dans le code ci-dessus ont été enlevés. La propriété display du progressmeter ne l'a pas été. Elle sera modifiée par un script donc, le style a été maintenu, car la barre de progression n'a pas à être visible au lancement. Vous pouvez toujours mettre le style dans une feuille de styles séparée si vous le souhaitez vraiment. Une classe a été ajoutée aux éléments spacer pour qu'ils puissent être appelés.

-

Une feuille de styles a également besoin d'être créée. Créez un fichier findfile.css dans le même répertoire que le fichier XUL (Il devrait normalement être mis dans un thème séparé). Dans ce fichier, nous allons ajouter la déclaration de styles, comme indiqué ci-dessous :

-
#find-text {
-  min-width: 15em;
-}
-
-#progmeter {
-  margin: 4px;
-}
-
-.springspace {
-  width: 10px;
-}
-
-.titlespace {
-  height: 10px;
-}
-
-

Remarquez que ces styles sont équivalents aux styles que nous avions précédemment. Cependant, il est beaucoup plus facile pour quelqu'un de changer l'apparence de la boîte de dialogue de recherche de fichiers maintenant car il est possible d'ajouter ou modifier la déclaration de styles en modifiant le fichier ou en changeant le thème. Si l'utilisateur change le thème, les fichiers dans un répertoire autre que celui par défaut seront utilisés.

-
-

Importer des feuilles de styles

-

Nous avons déjà vu comment importer des feuilles de styles. Un exemple est montré ci-dessous :

-
<?xml-stylesheet href="chrome://bookmarks/skin/" type="text/css"?>
-

Cette ligne peut être la première d'une fenêtre 'bookmarks'. Elle importe la feuille de style bookmarks, qui est 'bookmarks.css'. Le système de thème de Mozilla est assez intelligent pour savoir quelle feuille de styles utiliser, car le nom spécifique du fichier n'a pas été indiqué ici. Nous avons fait une chose similaire avec la feuille de styles globale (chrome://global/skin).

-

Une feuille de styles peut importer des styles d'une autre feuille en utilisant la directive import. Normalement, vous n'importerez qu'une seule feuille de styles de chaque fichier XUL. La feuille de styles globale peut être importée à partir de celle associée avec le fichier XUL. Ceci peut être fait grâce au code ci-dessous, vous permettant de retirer l'import du fichier XUL :

-
Importation de styles à partir de XUL :
-<?xml-stylesheet href="chrome://global/skin/"  type="text/css"?>
-
-Importation de styles à  partir de CSS :
-@import url(chrome://global/skin/);
-
-

La seconde syntaxe est préférable car elle réduit le nombre de dépendances à l'intérieur du fichier XUL lui-même.

-
-

Retirez l'importation de la feuille de styles globale dans findfile.xul et ajoutez l'importation dans findfile.css.

-
-

Tous les éléments peuvent être décorés à l'aide de CSS. Vous pouvez utiliser des sélecteurs pour sélectionner l'élément que vous souhaitez styler (Le sélecteur est la partie avant l'accolade dans une règle de style). La liste suivante résume quelques-uns des sélecteurs disponibles :

-
button 
Désigne toutes les balises button.
#special-button 
Désigne les éléments avec un id de 'special-button'
.bigbuttons 
Désigne tous les éléments avec une classe 'bigbuttons'
button.bigbuttons 
Désigne tous les éléments button avec une classe à 'bigbuttons'
toolbar > button 
Désigne tous les boutons directement insérés dans un élément toolbar.
toolbar > button.bigbuttons 
Désigne tous les éléments button avec une classe 'bigbuttons', directement insérés dans un élément toolbar.
button.bugbuttons:hover 
Désigne tous les éléments button avec une classe 'bigbuttons' mais seulement lorsque la souris se trouve au dessus d'eux.
button#special-button:active 
Désigne tous les éléments button avec un id 'special-button' mais seulement lorsqu'ils sont actifs (en train d'être cliqués).
box[orient="horizontal"] 
Désigne tous les éléments box avec un attribut orient réglé sur 'horizontal'.
-
-

Vous pouvez combiner ces règles comme vous le désirez. C'est toujours une bonne idée d'être aussi précis que possible lorsque vous spécifiez ce qui doit être décoré et comment. C'est bien plus efficace et réduit également les risques de décorer un mauvais élément.

-
-

La boîte de dialogue de recherche de fichiers à ce stade : Source Voir

-
-
-

Dans la prochaine section, nous verrons comment appliquer des styles aux arbres.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_libell\303\251s_et_des_images/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_libell\303\251s_et_des_images/index.html" deleted file mode 100644 index 691fda155e..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_des_libell\303\251s_et_des_images/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Ajouter des libellés et des images -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Ajouter_des_libellés_et_des_images -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images ---- -
-

« PrécédentSuivant »

-
-

Cette section décrit la façon d'ajouter des libellés et des images dans une fenêtre. En complément, nous verront comment inclure des éléments dans des groupes.

-

Éléments de texte

-

Vous ne pouvez pas écrire du texte directement dans un fichier XUL sans le placer entre des balises, et espérer qu'il s'affiche. Vous avez deux éléments XUL à votre disposition pour cela.

-

Élément label

-

La façon la plus basique pour inclure du texte dans une fenêtre est d'utiliser l'élément label. Il sert à placer un libellé à côté d'un contrôle, tel qu'un bouton. Voici un exemple :

-

Exemple 1: Source Voir

-
<label value="ceci est du texte"/>
-

L'attribut value sert à spécifier le texte à afficher. Le texte ne sera pas coupé, et donc apparaîtra sur une seule ligne. Il s'agit de la syntaxe la plus courante pour des libellés.

-

Si le texte doit être coupé, vous pouvez placer son contenu à l'intérieur de balises ouvrantes et fermantes comme dans l'exemple suivant :

-

Exemple 2 :

-
<label>Ceci est un texte plus long qui peut être coupé sur plusieurs lignes.</label>
-

Comme en HTML, les césures de ligne et espaces supplémentaires sont réduits à un simple espace. Plus tard, nous verrons comment imposer la largeur des éléments pour que la césure se voit plus facilement.

-

Attribut control

-

Vous pouvez utiliser l'attribut control pour définir quel contrôle est associé au libellé. Lorsque l'utilisateur clique sur le libellé associé, le contrôle obtient le focus. Cette association est également importante pour l'accessibilité, permettant aux lecteurs vocaux de lire le libellé du contrôle que l'utilisateur a tabulé. Définissez la valeur de l'attribut control avec l'id de l'élément obtiendra le focus.

-

Exemple 2: Source Voir

-
<label value="Cliquez ici" control="open-button" />
-<button id="open-button" label="Ouvrir"/>
-
-

Dans l'exemple du dessus, en cliquant sur le libellé, le focus sera mis sur le bouton.

-

Élément description

-

Pour du texte descriptif non associé avec un contrôle particulier, vous pouvez utiliser l'élément description. Cet élément est utile pour du texte informatif placé en haut d'une boîte de dialogue ou d'un groupe de contrôles par exemple. Comme pour l'élément label, vous pouvez soit utiliser l'attribut value pour une seule ligne de texte, soit placer le contenu du texte dans des balises ouvrantes et fermantes description pour des blocs de texte plus long. L'usage veut que la syntaxe avec attribut serve pour les libellés et que celle avec le contenu de texte serve pour des descriptions.

-

Exemple 4: Source Voir

-
<description>
-     Cette longue section de texte est affichée.
-</description>
-
-

Intrinsèquement, les deux éléments label et description sont les mêmes. Les éléments label sont généralement utilisés pour des libellés, tels que ceux des champs de saisie. L'élément description est généralement employé pour d'autres textes descriptifs telle qu'une information placée en haut d'une boîte de dialogue.

-

Les images

-

Comme en HTML, XUL a un élément pour afficher des images à l'intérieur d'une fenêtre. Cet élément est nommé naturellement image. Notez que le nom de la balise est différent de celle en HTML (image au lieu de img). Vous pouvez utiliser l'attribut src pour indiquer l'URL de l'image. L'exemple suivant le montre :

-
<image src="images/banner.jpg" />
-
-

Bien que vous pouvez utiliser cette syntaxe, il est préférable d'utiliser une feuille de styles pour spécifier une URL. Une section ultérieure vous décriera comment utiliser des feuilles de styles, mais l'exemple ci-dessous vous permettra d'appréhender le sujet. Vous pouvez utiliser le style CSS list-style-image pour définir l'URL de l'image. Voici des exemples :

-
XUL:
- <image id="image1"/>
- <image id="search"/>
-
-
Style Sheet:
- #image1 {
-   list-style-image: url("chrome://findfile/skin/banner.jpg");
- }
-
- #search {
-   list-style-image: url("http://example.com/images/search.png");
- }
-
-

Ces images proviennent du répertoire chrome, dans le thème du paquetage findfile. Comme les images varient selon le thème graphique, vous devez normalement mettre les images dans le répertoire skin.

-
-

Dans la section suivante, nous apprendrons comment ajouter des contrôles de saisie à une fenêtre.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_plus_d'\303\251l\303\251ments/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_plus_d'\303\251l\303\251ments/index.html" deleted file mode 100644 index d7ca633691..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/ajouter_plus_d'\303\251l\303\251ments/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Ajouter plus d'éléments -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Ajouter_plus_d'éléments -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_More_Elements ---- -

 

-
-

« PrécédentSuivant »

-
-

Nous allons conclure ce chapitre en ajoutant des boîtes sur notre fenêtre de recherche de fichiers.

-
-

Ajout d'éléments à notre exemple de recherche de fichiers

-

Nous allons ajouter maintenant des éléments à notre boîte de dialogue de recherche de fichiers. Premièrement, nous allons ajouter la possiblité de faire une recherche sur d'autres informations, comme la taille et la date du fichier.

- 
<hbox>
-  <menulist id="searchtype">     <menupopup>       <menuitem label="Nom"/>       <menuitem label="Taille"/>       <menuitem label="Date de modification"/>     </menupopup>   </menulist>   <spacer style="width: 10px;"/>   <menulist id="searchmode">     <menupopup>       <menuitem label="Est"/>       <menuitem label="N'est pas"/>     </menupopup>   </menulist>   <spacer style="width: 10px;"/>
-  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
-</hbox>
-
-
- Image:xultu_boxfinal1.png
-

Deux listes déroulantes ont été ajoutées à la boîte de dialogue. Un espacement (spacer) a été inséré entre chaque élément pour les séparer. Ces espacements ont une taille explicite de 10 pixels chacun. Vous noterez que si la fenêtre est redimensionnée, le champ de saisie s'agrandit mais pas les autres composants. Vous noterez également que le libellé a été enlevé.

-

Si vous redimensionnez la fenêtre verticalement, les éléments ne changeront pas de taille. C'est parce qu'ils sont à l'intérieur de boîtes horizontales. Ce serait mieux si les boutons « Rechercher » et « Annuler » restaient toujours en bas de la fenêtre. Il est facile de le faire en ajoutant un spacer entre les deux boîtes horizontales.

- 
<spacer style="height: 10px"/>
-<hbox>
-  <menulist id="searchtype">
-    <menupopup>
-      <menuitem label="Nom"/>
-      <menuitem label="Taille"/>
-      <menuitem label="Date de modification"/>
-    </menupopup>
-  </menulist>
-  <spacer style="width: 10px;"/>
-  <menulist id="searchmode">
-    <menupopup>
-      <menuitem label="Est"/>
-      <menuitem label="N'est pas"/>
-    </menupopup>
-  </menulist>
-  <spacer style="width: 10px;"/>
-  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
-</hbox>
-
-<spacer style="height: 10px" flex="1"/>
-
-<hbox>
-
-

Maintenant, quand la boîte de dialogue est redimensionnée, les deux boutons resteront en place tout en bas de la boîte de dialogue. Le premier spacer ajoute un espacement entre le titre du libellé et les éléments des critères de recherche.

-

Il serait plus joli d'avoir une bordure autour des critères de recherche. Il y a deux moyens pour le faire. Vous pouvez utiliser la propriété CSS border ou vous pouvez utiliser l'élément groupbox. La première méthode nécessite que nous appliquions le style sur la boîte elle-même. Nous utiliserons plutôt l'autre méthode. Un élément groupbox a l'avantage de dessiner une boîte avec un joli effet d'incrustation, en adéquation avec le thème courant.

-

Changeons maintenant la boîte box en groupbox :

- 
<groupbox orient="horizontal">
-  <caption label="Critères de recherche"/>
-  <menulist id="searchtype">
-  .
-  .
-  .
-  <spacer style="width: 10px;"/>
-  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
-</groupbox>
-
-

Source Voir

-

Image:xultu_boxfinal2.png

-

Il reste d'autres problèmes cosmétiques. Nous pourrions avoir un groupbox qui s'étend verticalement vers le bas de la boîte. Mais aussi, nous pourrions modifier quelques marges afin de mieux positionner les éléments.

-
-
-

Nous verrons dans la suite comment créer des piles.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/arbres/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/arbres/index.html deleted file mode 100644 index e566557c9a..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/arbres/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Arbres -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Arbres -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Trees ---- -

 

-
-

« PrécédentSuivant »

-
-

XUL fournit un moyen de créer des listes tabulaires ou hiérarchiques en utilisant un arbre.

-

L'élément tree

-

Un des éléments les plus complexes de XUL est l'arbre. Un arbre peut être utilisé pour afficher des lignes de texte en colonnes. Il peut servir pour des listes tabulaires ou arrangées hiérarchiquement. Un arbre permet également à l'utilisateur de réarranger, redimensionner et masquer individuellement certaines colonnes. Les messages dans une application courrier ou les marque-pages dans Mozilla sont des exemples d'utilisation d'arbres.

-

D'une certaine manière, un arbre a des similitudes avec une boîte de liste listbox. Tous deux peuvent être utilisés pour créer des tableaux de données avec des lignes et des colonnes multiples, et ils peuvent contenir des en-têtes de colonnes. Les arbres supportent également les lignes imbriquées, alors que les boîtes de liste ne le peuvent pas. Toutefois, les boîtes de liste peuvent contenir n'importe quel type de contenu, alors que les arbres ne peuvent contenir que du texte et des images (par le biais de fonctionnalités avancées, des barres de progression et cases à cocher peuvent également être mis dans un arbre).

-

Un arbre comporte deux parties : un ensemble de colonnes et le corps de l'arbre.

- -

L'arbre est un élément XUL particulier dans le sens où son corps est constitué d'un seul composant graphique qui dessine toutes les données dans l'arbre. Cette définition contraste avec la boîte de liste où des balises individuelles listitem et listcell sont utilisées pour spécifier chaque ligne dans l'élément listbox. Dans un arbre, toutes les données à afficher sont fournies par un objet séparé, appelé la vue d'arbre. Lorsqu'une cellule doit être affichée, le composant graphique de l'arbre fait appel à cet objet de vue d'arbre pour déterminer ce qui doit être affiché, et le dessine ensuite dans l'arbre. L'arbre est suffisamment intelligent pour ne solliciter les informations de la vue que pour les lignes qui ont besoin d'être affichées. Ainsi, l'affichage est optimisé par le chargement des données le nécessitant réellement. Par exemple, un arbre peut contenir des milliers de lignes, la plupart d'entre elles étant en dehors du cadre de l'arbre, cachées à la vue. Ainsi, l'arbre peut contenir un grand nombre de lignes sans rien perdre en performance. Bien entendu, ceci est indépendant de la performance de l'objet de vue lui-même.

-

L'objet vue d'arbre implémente l'interface nsITreeView. Cette interface contient trente propriétés et fonctions que vous pourrez implémenter. Ces fonctions seront appelées par l'arbre, au besoin, pour récupérer les données et les états de l'arbre. Par exemple, la fonction getCellText() sera appelée pour obtenir le libellé d'une cellule particulière dans l'arbre.

-

L'utilisation d'une vue a l'avantage de vous permettre de stocker vos données d'une façon plus adaptée à l'arbre, ou de charger les données sur demande seulement lorsque les lignes sont affichées. Elle offre une plus grande souplesse dans l'utilisation des arbres.

-

Naturellement, devoir implémenter une vue d'arbre avec une trentaine de propriétés et méthodes peut être très encombrant, surtout pour des arbres simples. Fort heureusement, XUL fournit un ensemble d'implémentations natives réalisant le gros du travail pour vous. Pour la plupart des arbres, surtout lorsque vous débutez, vous utiliserez un de ces types natifs. Cependant, vous pouvez créer également une vue d'arbre entièrement de A à Z. Dans ce cas, vous devrez stocker vos données dans un tableau ou une structure JavaScript, ou les charger à partir d'un fichier XML.

-

Comme le corps de l'arbre dans sa totalité est un unique élément graphique, vous ne pouvez pas modifier le style des lignes ou des cellules individuellement de manière classique. En fait, il n'existe pas d'éléments affichant des cellules individuelles comme il en existe avec les boîtes de liste. À la place, tout l'affichage est effectué par le corps de l'arbre grâce aux données fournies par la vue de l'arbre. Ce point important peut dérouter bien des développeurs XUL. Pour modifier l'apparence d'une cellule d'un arbre, la vue doit associer un jeu de mots clefs pour une ligne et une cellule. Une syntaxe CSS spéciale est employée entre les composants de styles du corps d'un arbre grâce à ces mots clefs. Dans un sens, le mécanisme est similaire aux classes CSS. L'application d'un style à un arbre sera détaillée dans une section ultérieure.

-

Les éléments d'arbre

-

Les arbres sont créés avec l'élément tree qui sera décrit dans les prochaines sections. Il existe également deux éléments définissant l'affichage des colonnes dans l'arbre.

-
tree 
L'élément entourant d'un arbre
treecols 
L'élément initialisant une série de treecol
treecol 
Cet élément déclare une colonne d'arbre. Avec l'utilisation de cet élément, vous pouvez spécifier des informations supplémentaires sur le tri des données en colonne ou encore la possibilité ou non pour l'utilisateur de redimensionner les colonnes. Vous devez toujours placer un attribut id sur une colonne, car Mozilla utilise cet identifiant pour les colonnes à réarranger ou à masquer. Il n'est plus nécessaire sous les versions 1.8 et suivantes de Mozilla, mais c'est une bonne habitude à conserver.
treechildren 
Cet élément contient le corps principal de l'arbre, là où les lignes individuelles de données seront affichées
-
-

Voici un exemple d'arbre avec deux colonnes :

-

Exemple 1 : Source Voir

-
<tree flex="1">
-
-  <treecols>
-    <treecol id="nameColumn" label="Nom" flex="1"/>
-    <treecol id="addressColumn" label="Adresse" flex="2"/>
-  </treecols>
-
-  <treechildren/>
-
-</tree>
-
-

Tout d'abord, l'ensemble du tableau est entouré avec l'élément tree. Il déclare un élément qui servira de tableau ou d'arbre. Comme avec les tables HTML, les données d'un arbre sont toujours organisées en lignes. Les colonnes sont spécifiées grâce à la balise treecols.

-

Vous pouvez mettre dans un arbre autant de colonnes que vous le souhaitez. Comme pour les boîtes de listes, une ligne d'en-tête apparaîtra avec les libellés des colonnes. Un menu déroulant apparaîtra dans le coin supérieur droit de l'arbre et permettra à l'utilisateur d'afficher ou de masquer les colonnes individuellement. Chaque colonne est créée avec l'élément treecols. Vous pouvez définir le libellé d'en-tête en utilisant l'attribut label. Vous pouvez également rendre vos colonnes flexibles si votre arbre l'est aussi, ainsi les colonnes s'ajusteront en fonction de l'arbre. Dans cet exemple, la seconde colonne sera deux fois plus large que la première. Toutes les colonnes doivent être définies à l'intérieur de l'élément treecols.

-

Dans ce cas, nous n'avons pas indiqué à la vue les données de l'arbre, seuls les en-têtes de colonnes et un arbre vide seront visibles. Vous pouvez redimensionner la fenêtre, mais rien n'apparaîtra puisqu'il n'y a aucune donnée à afficher. Puisque la flexibilité de l'arbre a été spécifiée, son corps s'ajustera à l'espace disponible. La flexibilité d'un arbre est couramment appliquée, car les données de l'arbre sont souvent les informations les plus significatives affichées, donc il est logique que l'arbre puisse ajuster sa dimension. Toutefois, vous pouvez spécifier un nombre de lignes à afficher dans l'arbre en affectant l'attribut rows sur l'élément tree. Notez que cet attribut indique le nombre de lignes qui seront affichées dans l'interface utilisateur et non le nombre de lignes de données. Le nombre total de lignes de données est fourni par la vue d'arbre. S'il y a trop de lignes de données à afficher dans l'arbre, une barre de défilement apparaîtra pour permettre à l'utilisateur de visualiser le reste. Si vous ne spécifiez aucun attribut rows, la valeur par défaut sera '0' signifiant qu'aucune ligne ne s'affichera. Dans ce cas, vous devrez rendre votre arbre flexible. Si votre arbre est flexible, il n'a pas besoin d'un attribut rows puisqu'il s'ajustera toujours à l'espace disponible.

-

Le contenu de la vue d'arbre

-

Nous avons vu que les données à afficher dans un arbre proviennent d'une vue et non de balises XUL, en passant par une construction interne de la vue d'arbre à partir des balises XUL. Ce mécanisme peut paraître légèrement confus. Retenez simplement que la construction des vues d'arbre emploie une série de balises servant à définir l'information sur les données dans l'arbre. Les éléments suivants sont utilisés :

-
treeitem 
Il contient une unique ligne de niveau supérieur et tous ses descendants. Il sert également d'item pouvant être sélectionné par l'utilisateur. La balise treeitem entoure toute une ligne en permettant de la sélectionner entièrement.
treerow 
Une seule ligne d'un arbre devant être placée à l'intérieur d'une balise treeitem.
treecell 
Une seule cellule d'un arbre. Cet élément est placé à l'intérieur d'un élément treerow.
-
-

Par convention, ces balises peuvent être placées directement à l'intérieur de la balise treechildren, imbriquées dans l'ordre mentionné ci-dessus. Ces balises définissent les données à afficher dans le corps de l'arbre. Dans ce cas, l'arbre utilise la construction interne de la vue d'arbre, appelée le contenu de la vue d'arbre, qui utilise les libellés et les valeurs spécifiés sur ces éléments comme données pour l'arbre. Lorsque l'arbre a besoin d'afficher une ligne, il demande à la vue d'arbre le libellé de la cellule en appelant la fonction getCellText() de la vue qui, dans la continuité, obtient la donnée de l'élément treecell correspondant.

-

Cependant, les trois éléments listés ci-dessus ne sont pas affichés directement. Ils ne sont utilisés que comme source de données pour la vue. Ainsi, seuls des attributs utiles sont appliqués sur l'élément treeitem et les éléments associés. Par exemple, vous ne pouvez pas modifier l'apparence des lignes d'un arbre en utilisant un attribut style ou d'autres propriétés CSS, et les fonctionnalités existantes pour les boîtes, telles que la flexibilité et l'orientation, ne peuvent pas être employées.

-

En fait, à part quelques attributs spécifiques aux arbres, les seuls qui auront un effet sont l'attribut label pour définir un texte libellé d'une cellule et l'attribut src pour définir une image. Toutefois, dans les sections ultérieures, nous verrons des moyens spéciaux de modifier le style d'un arbre et d'appliquer d'autres fonctionnalités.

-

De même, les événements ne sont pas générés par un élément treeitem et ses enfants ; en revanche, ils seront générés par l'élément treechildren.

-

Le fait que les éléments treeitem soient si différents des autres éléments XUL est une source classique de confusion pour les développeurs XUL. Essentiellement, le contenu de la vue d'arbre est une vue où les données des cellules sont fournies à partir des balises placées à l'intérieur de l'arbre. Naturellement, si vous utilisez un type différent de vue, les données seront fournies par une autre source, et il n'y aura aucun élément treeitem du tout.

-

Commençons par regarder comment créer un arbre simple avec des colonnes multiples en utilisant la vue d'arbre de contenu. Il pourrait servir à créer une liste de messages mél (mails). Il y aura plusieurs colonnes, telles que l'expéditeur et le sujet.

-

Exemple avec treechildren

-

Exemple 2: Source Voir

-

Image:xultu_trees1.png

-
<tree flex="1">
-
-  <treecols>
-    <treecol id="sender" label="Expéditeur" flex="1"/>
-    <treecol id="subject" label="Sujet" flex="2"/>
-  </treecols>
-
-  <treechildren>
-    <treeitem>
-      <treerow>
-        <treecell label="joe@somewhere.com"/>
-        <treecell label="Plans Top secret"/>
-      </treerow>
-    </treeitem>
-    <treeitem>
-      <treerow>
-        <treecell label="mel@whereever.com"/>
-        <treecell label="Invitation à déjeuner"/>
-      </treerow>
-    </treeitem>
-  </treechildren>
-
-</tree>
-
-

Comme vous pouvez le voir sur cette image, l'arbre a été créé avec deux lignes de données.

-

Cet arbre a deux colonnes dont la seconde occupe plus de place que la première. Vous rendrez généralement les colonnes flexibles. Vous pouvez également imposer les largeurs grâce à l'attribut width. Vous devez inclure le même nombre d'éléments treecol qu'il y a de colonnes dans l'arbre. Dans le cas contraire, des choses étranges pourraient se produire.

-

Les en-têtes sont créés automatiquement. Le bouton situé dans le coin supérieur droit sert à afficher ou à masquer les colonnes. Vous pouvez placer un attribut hidecolumnpicker sur l'élément tree et le définir à 'true' si vous désirez masquer ce bouton. Si ce bouton est masqué, l'utilisateur ne sera pas en mesure de masquer des colonnes.

-

Assurez-vous d'avoir défini un attribut id sur chaque colonne, sinon les actions de masquage et d'affichage ne fonctionneront pas avec toutes les versions de Mozilla.

-

L'élément treechildren entoure toutes les lignes. Les lignes individuelles à l'intérieur du corps peuvent contenir d'autres lignes. Pour l'arbre le plus simple, chaque ligne est créée avec les éléments treeitem et treerow. L'élément treerow entoure toutes les cellules d'une ligne, tandis que l'élément treeitem entoure une ligne et tous ses enfants. Les arbres avec des lignes imbriquées seront décrits dans la section suivante.

-

Dans les cellules, vous placerez les cellules individuelles. Elles sont créées avec l'élément treecell. Vous pouvez définir un texte dans une cellule en utilisant l'attribut label. Le premier élément treecell d'une ligne détermine le contenu qui apparaîtra dans la première colonne, le deuxième élément treecell détermine le contenu qui apparaîtra dans la deuxième colonne, et ainsi de suite.

-

L'utilisateur peut sélectionner les items de l'arbre en cliquant sur eux avec la souris, ou en mettant en surbrillance avec le clavier. Il peut en sélectionner plusieurs en maintenant la touche Maj ou Ctrl appuyée et en cliquant sur d'autres lignes. Pour désactiver la sélection multiple, placez un attribut seltype sur l'élément tree avec la valeur 'single'. Ainsi, l'utilisateur ne pourra sélectionner qu'une seule ligne à la fois.

-
-

Ajout d'un arbre sur notre exemple de recherche de fichiers

-

Ajoutons un arbre à notre exemple de recherche de fichiers dans lequel les résultats de la recherche seront affichés. L'arbre utilisera une vue de contenu d'arbre. Le code suivant doit être ajouté à la place de la balise iframe.

-

Exemple : Source Voir

-
<tree flex="1">
  <treecols>
    <treecol id="name" label="Nom de fichier" flex="1"/>
    <treecol id="location" label="Emplacement" flex="2"/>
    <treecol id="size" label="Taille" flex="1"/>
  </treecols>

  <treechildren>
   <treeitem>
     <treerow>
       <treecell label="mozilla"/>
       <treecell label="/usr/local"/>
       <treecell label="2520 bytes"/>
     </treerow>
   </treeitem>
  </treechildren>
</tree>
-
-<splitter collapse="before" resizeafter="grow"/>
-
-

Nous avons ajouté un arbre avec les trois colonnes 'Nom de fichier', 'Emplacement' et 'Taille'. La deuxième colonne sera deux fois plus large grâce à une flexibilité plus grande. Une seule ligne a été ajoutée pour les besoins de la démonstration de l'apparence du tableau avec une ligne. Dans une implémentation réelle, les lignes seront ajoutées par un script à l'issue de la recherche, ou une vue personnalisée sera créée pour contenir les données.

-
-
-

Nous verrons ensuite comment créer des arbres plus complexes.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/arbres_et_gabarits/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/arbres_et_gabarits/index.html deleted file mode 100644 index 34bbdd2a6c..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/arbres_et_gabarits/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Arbres et Gabarits -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Arbres_et_Gabarits -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Trees_and_Templates ---- -

 

-
-

« PrécédentSuivant »

-
-

Nous allons voir maintenant comment utiliser un gabarit avec un arbre.

-

Ajout de sources de données aux arbres

-

Avec un arbre, vous utiliserez souvent un gabarit pour construire son contenu, pour manipuler un grand volume de données hiérarchisées. L'utilisation d'un gabarit avec un arbre est très proche au niveau de la syntaxe aux autres éléments. Vous avez besoin d'ajouter un attribut datasources et ref à la balise tree, ce qui spécifie la source des données et le nœud racine à afficher. De nombreuses règles peuvent être utilisées pour indiquer différents contenus pour différents types de données.

-

L'exemple suivant utilise l'historique comme source de données :

-
<tree datasources="rdf:history" ref="NC:HistoryByDate"
-          flags="dont-build-content">
-
-

Comme il est décrit dans la section précédente, l'arbre peut utiliser un constructeur d'arbre pour la génération du gabarit à la place du constructeur normal de contenu. Les éléments ne seront pas créés pour chacune des lignes dans l'arbre, afin de le rendre plus performant. Lorsque l'attribut flags a pour valeur 'dont-build-content', comme dans l'exemple ci-dessus, il indique que le constructeur de l'arbre doit être utilisé. Si l'attribut n'est pas renseigné, le constructeur de contenu sera utilisé. Vous pouvez voir la différences en utilisant l'inspecteur DOM de Mozilla sur un arbre avec, puis sans l'attribut.

-

Si vous utilisez le constructeur normal à la place, notez que le contenu ne sera pas construit avant qu'il soit nécessaire. Avec les arbres hiérarchiques, les enfants ne sont pas générés avant que le nœud parent ne soit ouvert par l'utilisateur.

-

Dans le gabarit, il n'y aura qu'une cellule treecell pour chaque colonne dans l'arbre. Les cellules devront avoir un attribut label afin de mettre un libellé à la cellule. Normalement, une propriété RDF se charge de récupérer le libellé à partir de la source de données.

-

Exemple d'arbre construit par un gabarit

-

L'exemple suivant montre un arbre construit à partir d'un gabarit, dans ce cas le système de fichier.

-

Exemple 1 : Source

-
<tree id="my-tree" flex="1"
-       datasources="rdf:files" ref="file:///" flags="dont-build-content">
-  <treecols>
-    <treecol id="Name" label="Nom" primary="true" flex="1"/>
-    <splitter/>
-    <treecol id="Date" label="Date" flex="1"/>
-  </treecols>
-
-    <template>
-      <rule>
-        <treechildren>
-          <treeitem uri="rdf:*">
-            <treerow>
-              <treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/>
-              <treecell label="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/>
-            </treerow>
-          </treeitem>
-        </treechildren>
-      </rule>
-    </template>
-</tree>
-
-

Ici, un arbre est créé avec deux colonnes, pour le nom et la date d'un fichier. L'arbre doit afficher une liste de fichiers situés dans le répertoire racine. Une seule règle est utilisée, mais vous pouvez en ajouter d'autres si vous en avez besoin. Comme avec les autres gabarits, l'attribut uri d'un élément indique où commencer pour générer du contenu. Les deux cellules puisent le nom et la date dans la source et place les valeurs dans le libellé de la cellule.

-

Cet exemple montre pourquoi l'attribut uri devient utile. Notez comment il a été placé dans le treeitem dans l'exemple, même si ce n'est pas un descendant direct de l'élément rule. Nous avons besoin de mettre cet attribut seulement sur les éléments que nous voulons répéter pour chaque ressource. Comme nous ne voulons pas des éléments treechildren multiples, l'attribut est placé ailleurs. Nous le mettons plutôt dans l'élément treeitem. En fait, les éléments à l'extérieur (ou au-dessus) de l'élément qui a l'attribut uri ne sont pas dupliqués tandis que les éléments avec l'attribut uri et les éléments à l'intérieur sont répétés pour chaque ressource.

-
Image:xultu_rdfoutl1.jpg
-

Comme un constructeur d'arbre est utilisé et non un constructeur de contenu, la structure des éléments dans l'exemple ci-dessus doit être comme indiqué, avec l'élément treechildren à l'intérieur de rule. Bien que le constructeur d'arbres ne génère pas ces éléments, cette structure est nécessaire pour déterminer comment les générer correctement.

-

Notez dans l'image que des éléments fils additionnels ont été ajoutés automatiquement sous les éléments du niveau supérieur. XUL sait comment ajouter des éléments fils quand les modèles ou règles contiennent des éléments arbre ou menu. Il génère alors les éléments d'arbre imbriqués selon les données disponibles dans le RDF.

-

Une partie intéressante des sources de données RDF est que les valeurs sont déterminées seulement quand les données sont requises. Les valeurs qui sont plus profondes dans la hiérarchie de ressource ne sont pas déterminées jusqu'à ce que l'utilisateur atteigne ce nœud dans l'arbre. Ce mécanisme devient utile pour certaines sources où les données sont déterminées dynamiquement.

-

Trier les colonnes

-

Si vous essayez l'exemple précédent, vous pouvez noter que la liste de dossiers n'est pas triée. Les arbres qui produisent leurs données à partir d'une source ont la capacité facultative de trier leurs données. Vous pouvez trier de façon croissante ou décroissante sur n'importe quelle colonne. L'utilisateur peut changer la colonne de tri et la direction de tri en cliquant sur les en-têtes de colonne. Ce dispositif de tri n'est pas disponible pour des arbres dont le contenu est statique, bien que vous puissiez écrire un script pour trier ces données.

-

Le tri implique trois attributs, qui doivent être placés sur les colonnes. Le premier attribut, sort, doit être placé sur une propriété de RDF qui est employée alors comme critère de tri. Habituellement, c'est la même que celle utilisée pour le libellé de la cellule de cette colonne. Si vous le placez sur une colonne, les données seront triées dans cette colonne. L'utilisateur peut changer la direction de tri en cliquant sur l'en-tête de colonne. Si vous ne placez pas l'attribut sort sur une colonne, les données ne pourront pas être triées par cette colonne.

-

L'attribut sortDirection (notez la casse mixte) est utilisé pour définir la direction dans laquelle la colonne sera triée par défaut. Trois valeurs sont possibles :

-
ascending 
les données sont affichées par ordre croissant.
descending 
les données sont affichées par ordre décroissant.
natural 
les données sont affichées dans le sens "naturel", c'est-à-dire l'ordre dans lequel elles sont apparaissent dans la source RDF.
-
-

Le dernier attribut, sortActive, doit être défini à 'true' sur une seule colonne, celle qui sera triée par défaut.

-

Bien que le tri fonctionnera correctement avec seulement ces attributs, vous pouvez également utiliser la classe de style sortDirectionIndicator sur une colonne qui peut être triée. Un petit triangle apparaîtra dans l'en-tête de colonne et indiquera le sens du tri. Sans cela, l'utilisateur pourra toujours trier les colonnes mais il n'aura pas d'indication sur la colonne triée.

-

L'exemple suivant modifie les colonnes de l'exemple précédent pour inclure les fonctionnalités supplémentaires :

-
<treecols>
-  <treecol id="Name" label="Nom" flex="1" primary="true"
-            class="sortDirectionIndicator" sortActive="true"
-            sortDirection="ascending"
-            sort="rdf:http://home.netscape.com/NC-rdf#Name"/>
-  <splitter/>
-  <treecol id="Date" label="Date" flex="1" class="sortDirectionIndicator"
-           sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/>
-</treecols>
-
-

L'état persistant des colonnes

-

Une chose supplémentaire que vous voudrez faire est de rendre persistant la colonne qui est actuellement triée, ainsi cet état est mémorisé entre chaque session. Pour ce faire, nous utilisons l'attribut persist sur chaque élément treecol. Il peut être utile de rendre persistant cinq attributs : la taille de la colonne, l'ordre des colonne, la visibilité de la colonne, quelle colonne est actuellement triée et dans quel ordre. L'exemple suivant montre une simple colonne :

-
<treecol id="Date" label="Date" flex="1"
-             class="sortDirectionIndicator"
-             persist="width ordinal hidden sortActive sortDirection"
-             sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/>
-
-

D'autres détails sur l'attribut persist seront décrits dans une section ultérieure.

-

Attributs supplémentaires pour les règles

-

Deux attributs supplémentaires peuvent être ajoutés sur l'élément rule, lui permettant d'appliquer des correspondances dans certaines circonstances. Les deux sont des booléens.

-
iscontainer 
Si cet attribut est mis à 'true', alors la règle s'appliquera sur toutes les ressources qui peuvent avoir des enfants. Par exemple, nous pouvons appliquer cette règle pour récupérer les dossiers des marque-pages. Il est utile car la source de données n'a pas besoin d'inclure un attribut spécial pour l'indiquer.
isempty 
Si cet attribut est mis à 'true', alors la règle s'appliquera sur toutes les ressources qui n'ont pas d'enfants.
-
-

Une ressource pourrait être un conteneur et être vide en même temps. Toutefois, c'est différent pour une ressource qui n'est pas un conteneur. Par exemple, un dossier de marque-pages est un conteneur mais il peut avoir ou ne pas avoir d'enfants. Cependant, un simple marque-page ou un séparateur n'est pas un conteneur.

-

Vous pouvez combiner ces deux éléments avec d'autres attributs de critères pour des règles plus spécifiques.

-
-

Dans la section suivante, nous verrons quelques unes des sources de données fournies par Mozilla.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/assistant_avan\303\247\303\251/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/assistant_avan\303\247\303\251/index.html" deleted file mode 100644 index 1c1073bd15..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/assistant_avan\303\247\303\251/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Assistant avançé -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Assistant_avançé -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/More_Wizards ---- -

 

-
-

« PrécédentSuivant »

-
-

Cette section décrit quelques fonctionnalités supplémentaires sur les assistants.

-

Une navigation plus complexe

-

Normalement, un assistant affiche chaque page dans l'ordre où vous les placez dans le fichier XUL. Dans certains cas cependant, vous pouvez vouloir que les pages de l'assistant apparaissent en fonction des choix effectués par l'utilisateur sur les pages précédentes.

-

Dans ce cas, placez un attribut pageid sur chacune des pages. Un identifiant devra être placé sur chaque page. Ensuite, pour naviguer d'une page à l'autre, utilisez une des deux méthodes suivantes :

-
  1. Affectez à l'attribut next de chaque page la valeur de l'identifiant de la page qui doit la suivre. Vous pouvez changer ces attributs comme vous le souhaitez pour naviguer vers d'autres pages.
  2. Appelez la méthode goTo() de l'assistant. Elle prend comme unique argument l'identifiant de la page suivante. Vous pouvez appeler cette méthode dans les gestionnaires onpageadvanced ou onwizardnext. Dans ce cas, n'oubliez pas de retourner la valeur 'false', car vous avez déjà changé la page par vous-même. Notez que la méthode goTo() charge une nouvelle page, par conséquent les événements liés sont lancés. Vous devez donc vous assurer d'avoir prévu ce cas.
    3. -
-

Par exemple, nous avons ici un ensemble de pages d'assistant (le contenu interne a été omis) :

-
<wizardpage pageid="type" next="font">
-<wizardpage pageid="font" next="done">
-<wizardpage pageid="color" next="done">
-<wizardpage pageid="done">
-
- -

Un script ajustera la valeur de l'attribut next dès qu'il sera nécessaire d'aller sur la page identifiée 'color'.

-

Fonctions d'assistant

-

L'assistant fonctionne presque comme un panneau d'onglets, sauf que les onglets ne sont pas affichés et que l'utilisateur navigue entre les pages en utilisant les boutons de bas de page. Comme toutes les pages font parties d'un même fichier, toutes les valeurs des champs sur toutes les pages sont conservées. Par conséquent, il est inutile de sauvegarder ou charger ces informations entre les pages.

-

Cependant, vous pourriez vouloir faire quelques validations sur chaque champ de chaque page. Pour ce faire, utilisez les gestionnaires décrits dans la section précédente. Si un champ est invalide, vous pouvez afficher un message d'alerte. Dans certains cas, il serait plus judicieux de désactiver le bouton 'Suivant' jusqu'à ce qu'une valeur valide soit saisie.

-

L'assistant possède une propriété canAdvance qui, quand elle est mise a 'true', indique que le bouton 'Suivant' doit être actif. Si elle a la valeur 'false', le bouton 'Suivant' est désactivé. Vous pouvez changer cette propriété en fonction de la validité des données saisies.

-

Dans l'exemple suivant, l'utilisateur doit entrer un code secret dans le champ de saisie sur la première page de l'assistant. La fonction checkCode() est appelée dés que la première page est affichée comme indiqué par l'attribut onpageshow. Elle est aussi appelée dès qu'une touche est pressée dans le champ textbox, pour déterminer si le bouton 'Suivant' doit être à nouveau actif.

-

Exemple d'assistant

-

Exemple 1 : Source

-
<?xml version="1.0"?>
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
-<wizard id="theWizard" title="Code secret de l'assistant"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<script>
-function checkCode(){
-  document.getElementById('theWizard').canAdvance = (document.getElementById('secretCode').value == "cabbage");
-}
-</script>
-
-  <wizardpage onpageshow="checkCode(); return true;">
-       <label value="Saisir le code secret:"/>
-       <textbox id="secretCode" onkeyup="checkCode();"/>
-  </wizardpage>
-
-  <wizardpage>
-       <label value="Le code est correct."/>
-  </wizardpage>
-
-</wizard>
-
-

Il existe aussi une propriété correspondante canRewind que vous pouvez utiliser pour activer ou désactiver le bouton 'Précédent'. Les deux propriétés sont ajustées automatiquement dès que vous changez de page. Par conséquent, le bouton 'Précédent' sera désactivé sur la première page, vous n'avez pas à le faire.

-

Une autre propriété utile de l'assistant est currentPage qui donne une référence à la page wizardpage actuellement affichée. Vous pouvez aussi changer la page courante en modifiant cette propriété. Si vous modifiez sa valeur, les différents événements de changement de page seront invoqués.

-
-

Ensuite, nous allons voir comment utiliser les overlays pour gérer du contenu.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/autres_caract\303\251ristiques_des_arbres/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/autres_caract\303\251ristiques_des_arbres/index.html" deleted file mode 100644 index 5852dbcfd7..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/autres_caract\303\251ristiques_des_arbres/index.html" +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Autres caractéristiques des arbres -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Autres_caractéristiques_des_arbres -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/More_Tree_Features ---- -

 

-
-

« PrécédentSuivant »

-
-

Nous allons voir ici des caractéristiques supplémentaires sur les arbres.

-

Arbres hiérarchiques

-

L'élement tree est aussi utilisé pour créer des listes hiérarchiques, comme on en trouve dans un gestionnaire de fichiers ou dans les listes de marque-pages d'un navigateur. La vue d'arbre a plusieurs fonctions qui spécifient la hiérarchie des éléments dans un arbre. Chaque élément dans l'arbre possède un niveau commençant à 0. Les éléments les plus élevés dans l'arbre auront un niveau à 0, Les fils de ces éléments auront un niveau à 1, les fils en dessous auront un niveau à 2, et ainsi de suite. L'arbre demandera l'affichage pour le niveau de chaque élément afin de déterminer comment dessiner les rangées.

-

L'arbre dessinera les flèches d'ouverture et de fermeture pour ouvrir et fermer un élément parent ainsi que les lignes reliant les fils à leurs parents. L'arbre se chargera aussi de dessiner les rangées avec le niveau correct d'indentation. Cependant, la vue devra s'assurer de conserver l'état des niveaux de chaque ligne si nécessaire. Ce travail peut parfois être un peu délicat, mais heureusement, le module natif de vue d'arbre réalise tout le travail difficile pour nous.

-

Pour créer un ensemble de rangées imbriquées, tout ce que nous devons faire est d'ajouter un second treechildren élément à l'intérieur du parent treeitem. Vous pouvez ensuite ajouter des éléments à l'intérieur pour spécifier les rangées filles d'un élément. Ne mettez pas d'élément treechildren à l'intérieur de treerow car ceci ne marchera pas.

-

Vous pouvez répéter ce processus pour créer les arbres profondément imbriqués. Essentiellement, un élément treeitem peut contenir soit une simple ligne déclarée avec l'élément treerow, soit un ensemble de lignes déclarées avec l'élément treechildren.

-

Il y a deux autres choses à faire pour vous assurer que la hiérarchie fonctionne correctement. Premièrement, vous devez marquer l'élément treeitem possédant des fils comme conteneur. Il vous suffit d'ajouter l'attribut container comme ceci :

-
<treeitem container="true"/>
-

Cet attribut permet à l'utilisateur de double-cliquer sur le treeitem pour déplier ou replier les lignes intérieures. Vous pouvez faire que les lignes filles soient initialement affichées en ajoutant l'attribut open. Quand l'utilisateur déplie ou replie le parent, la fonction toggleOpenState de la vue est appelée pour basculer l'item de l'état ouvert vers l'état fermé. Pour une vue d'arbre de type contenu, il sera ajouté un attribut open pour refleter l'état courant.

-

Le second changement vous impose de mettre l'attribut primary sur la première colonne. Il fait apparaître un petit triangle ou un signe + devant les cellules dans cette colonne pour indiquer les cellules pouvant être dépliées. De plus, les lignes filles sont indentées. Notez aussi que l'utilisateur ne peut pas cacher cette colonne via le petit menu déroulant à droite des colonnes.

-

Exemple d'arbre hiérarchique

-

Voici un exemple simple :

-

Exemple 1: Source Voir

-
Image:xultu_advtrees1.png
-
<tree rows="6">
-  <treecols>
-      <treecol id="firstname" label="Prénoms" primary="true" flex="3"/>
-      <treecol id="lastname" label="Noms" flex="7"/>
-  </treecols>
-
-  <treechildren>
-    <treeitem container="true" open="true">
-      <treerow>
-        <treecell label="Personnes"/>
-      </treerow>
-
-      <treechildren>
-        <treeitem>
-          <treerow>
-            <treecell label="Bob"/>
-            <treecell label="Carpenter"/>
-          </treerow>
-        </treeitem>
-        <treeitem>
-          <treerow>
-            <treecell label="Jerry"/>
-            <treecell label="Hodge"/>
-          </treerow>
-        </treeitem>
-      </treechildren>
-    </treeitem>
-  </treechildren>
-</tree>
-
-

Cet exemple crée un arbre hiérarchique. Comme on peut le voir sur l'image, un petit signe plus ou moins (souvent appelé « twisty ») est apparu sur la première ligne, indiquant qu'elle contient des lignes filles. En double-cliquant sur la ligne, l'utilisateur ouvre ou ferme la liste. Les lignes filles sont indentées. Notez comment la ligne « Personnes » n'a besoin que d'une colonne.

-

L'élément treeitem externe contient un seul élément treerow et un élément treechildren. Le premier crée la donnée pour la ligne parente et le deuxième contient les items fils.

-

Vous pouvez imbriquer autant de lignes que vous le désirez. Souvenez-vous que vous devez utiliser l'attribut container sur les lignes qui ont des lignes filles. La simple présence de lignes filles n'est pas suffisante pour l'indiquer, car vous pourriez avoir un conteneur sans enfants mais qui devrait quand même être traité comme un conteneur. Par exemple, un répertoire sans fichier devrait être traité comme un conteneur alors qu'un fichier ne le devrait pas.

-

Plus sur les colonnes d'arbres

-

enableColumnDrag est un attribut supplémentaire que vous pouvez ajouter à l'arbre. S'il est mis à 'true', l'utilisateur peut alors déplacer les en-têtes de colonne afin de réarranger l'ordre des colonnes.

-

Un utilisateur peut également vouloir modifier la largeur des colonnes. Il vous suffit de placer un élément splitter entre chaque élément treecol. Une petite encoche apparaissant entre chaque en-tête de colonne pourra être déplacée par l'utilisateur pour changer la largeur d'une colonne. Vous pouvez utiliser la classe de style 'tree-splitter' pour masquer l'encoche bien que la colonne puisse encore être retaillée.

-

Vous pouvez affecter une largeur minimale ou maximale à une colonne, en utilisant les attributs minwidth et maxwidth sur les en-têtes de colonnes.

-

Vous pouvez mettre l'attribut hidden à 'true' pour cacher par défaut une colonne. L'utilisateur pourra afficher la colonne en la sélectionnant dans la liste déroulante au bout de la ligne des en-têtes de colonne.

-

mémorisation de l'état des colonnes

-
Image:xultu_advtrees2.png
-

Comme avec tous les éléments XUL, l'attribut persist peut être utilisé pour sauvegarder l'état des colonnes entre chaque session. Ainsi, la façon dont l'utilisateur aura choisi l'affichage des colonnes sera automatiquement sauvegardé pour sa prochaine session. Vous pouvez sauvegarder plusieurs attributs, comme indiqué dans l'exemple ci-dessous :

-

Exemple 2: Source Voir

-
<tree enableColumnDrag="true" flex="1">
-  <treecols>
-    <treecol id="runner" label="Coureur" flex="2" persist="width ordinal hidden"/>
-    <splitter class="tree-splitter"/>
-    <treecol id="city" label="Ville" flex="2" persist="width ordinal hidden"/>
-    <splitter class="tree-splitter"/>
-    <treecol id="starttime" label="Heure de départ" flex="1" persist="width ordinal hidden"/>
-    <splitter class="tree-splitter"/>
-    <treecol id="endtime" label="Heure d'arrivée" flex="1" persist="width ordinal hidden"/>
-  </treecols>
-
-  <treechildren>
-    <treeitem>
-      <treerow>
-        <treecell label="Joshua Granville"/>
-        <treecell label="Vancouver"/>
-        <treecell label="7:06:00"/>
-        <treecell label="9:10:26"/>
-      </treerow>
-    </treeitem>
-    <treeitem>
-      <treerow>
-        <treecell label="Robert Valhalla"/>
-        <treecell label="Seattle"/>
-        <treecell label="7:08:00"/>
-        <treecell label="9:15:51"/>
-      </treerow>
-    </treeitem>
-  </treechildren>
-</tree>
-
-

Trois attributs des colonnes doivent être persistants,

- -
-

Dans la prochaine section, nous allons voir comment récupérer ou spécifier une sélection sur un arbre.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/barres_de_d\303\251filement/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/barres_de_d\303\251filement/index.html" deleted file mode 100644 index 16ab8ccae4..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/barres_de_d\303\251filement/index.html" +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Barres de défilement -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Barres_de_défilement -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Scroll_Bars ---- -

 

-
-

« PrécédentSuivant »

-
-

Maintenant, voyons comment ajouter des barres de défilement à une fenêtre.

-

Ajout de barres de défilement

-

Une barre de défilement est typiquement employée pour permettre à un utilisateur de parcourir un grand document. Vous pouvez aussi l'utiliser quand vous avez besoin de demander une valeur comprise entre un certain intervalle. Les barres de défilement peuvent être créées de différentes manières. Sous XUL, l'une d'entre elle nécessite l'emploi de la balise scrollbar. Certains éléments, comme des champs de saisie, vont également ajouter des barres de défilement si nécessaire lorsque leur contenu devient trop grand.

-

Dans cette section, nous verrons la création d'une barre de défilement seule. L'utilisateur choisira une valeur en déplaçant la barre de défilement. Vous n'utiliserez probablement pas très souvent cette méthode. Une barre de défilement est constituée de plusieurs partie, l'ascenseur, qui est la partie centrale de la barre, et les deux flèches boutons à chaque extrémités. Une barre de défilement crée tous ces éléments automatiquement.

-

Image:xultu_scroll1.jpg

-

La syntaxe d'une barre de défilement est la suivante :

-
<scrollbar
-   id="identifier"
-   orient="horizontal"
-   curpos="20"
-   maxpos="100"
-   increment="1"
-   pageincrement="10"/>
-
-

Les attributs sont les suivants :

-
id 
L'identifiant unique de la barre de défilement.
orient 
Il spécifie l'orientation de la barre de défilement. Sa valeur par défaut 'horizontal' crée une barre qui s'étend de gauche vers la droite. Vous pouvez également spécifier 'vertical' qui crée une barre s'étendant du haut vers le bas.
curpos 
Il indique la position actuelle de l'ascenseur (le rectangle que vous pouvez déplacer). La valeur s'étend de '0' à la valeur de maxpos. Cette valeur n'a pas besoin d'unité. La valeur par défaut est de '0'.
maxpos 
Il indique la valeur de la position maximale de l'ascenseur. Il s'agit d'une valeur numérique qui n'a pas d'unité. La valeur par défaut est de '100'.
increment 
Ici, le nombre spécifie de combien la valeur de curpos doit être changée quand l'utilisateur clique sur une des flèches de la barre de défilement. La valeur par défaut est de '1'.
pageincrement 
Ici, le nombre spécifie de combien la valeur de curpos doit être changée quand l'utilisateur clique sur la page à travers la barre de défilement, c'est à dire dans la zone entre l'ascenseur et les flèches. La valeur par défaut est de '10'.
-
-

L'exemple donné ci-dessus crée une barre de défilement qui s'étend des valeurs de '0' à '100'. La valeur de '100' peut être considérée comme le nombre de ligne d'une liste, mais elle peut représenter n'importe quoi d'autre. La valeur initiale de cet exemple est de '20'. Quand l'une des flèches de la barre de défilement est cliquée, la valeur incrémente ou décrémente de '1'. En cliquant à travers la barre de défilement, la valeur change de '10'.

-

Lorsque l'utilisateur clique sur l'une des flèches de la barre de défilement, l'ascenseur se déplace d'autant qu'indiqué par la valeur increment. Augmenter la valeur de cet attribut fera que la barre défilera plus vite à chaque clic. Les positions la plus à gauche et la plus élevée de l'ascenseur ont une valeur de '0', et celles la plus à droite et la plus basse ont une valeur donnée par maxpos.

-

En ajustant les valeurs de la barre de défilement, vous pouvez positionner et contrôler le déplacement de l'ascenseur comme vous le souhaitez.

-
-

Ensuite, nous verrons comment créer des barres d'outils.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/barres_de_menus_simples/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/barres_de_menus_simples/index.html deleted file mode 100644 index 31800f91cb..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/barres_de_menus_simples/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Barres de menus simples -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Barres_de_menus_simples -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Simple_Menu_Bars ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Dans cette section, nous allons voir comment créer une barre de menu avec des menus dessus.

- -

Créer un menu

- -

XUL dispose de plusieurs façons différentes de créer des menus. Le moyen le plus basique est d'ajouter une barre de menu avec une ligne de menus dessus comme sur de nombreuses applications. Vous pouvez aussi créer des menus surgissants. Les fonctionnalités de menu XUL se composent de différents éléments qui vous permettent de créer des barres de menus ou des menus surgissants. Les items des menus peuvent être personnalisés assez facilement. Nous avons déjà vu en partie comment faire des menus en utilisant menulist. Cette section sera construite là-dessus.

- -

Les barres de menu sont généralement créées de la même façon que les barres d'outils. La barre de menu peut-être placée dans une toolbox et le menu fonctionne juste comme n'importe quel autre barre d'outils. XUL a quelques éléments spéciaux qui fournissent des fonctionnalités spéciales propres aux menus.

- -

Il y a cinq éléments associés à la création d'une barre de menu et de ses menus, qui sont expliqués brièvement ici et en détail après :

- -
-
menubar 
-
Le container de la ligne de menu.
-
menu 
-
En dépit du nom, il s'agit en fait seulement du titre du menu sur la barre de menu. Cet élément peut être placé sur une barre de menu ou séparément.
-
menupopup 
-
La boîte déroulante qui apparaît quand vous cliquez sur le titre du menu. Cette boîte contient la liste des commandes de menu.
-
menuitem 
-
Une commande individuelle sur un menu. Il est placé dans un menupopup.
-
menuseparator 
-
Une barre de séparation sur un menu. Il est placé dans un menupopup.
-
- -
-

Vous pouvez personnaliser les menus sur la barre de menu comme vous le souhaitez pour toutes les plates-formes excepté pour le Macintosh. C'est parce que le Macintosh a son propre menu spécial en haut de l'écran contrôlé par le système. Bien que vous puissiez créer des menus personnalisés, toutes règles spéciales de style ou éléments non-menu que vous placez sur un menu peuvent ne pas être appliqués. Vous devez garder cette notion à l'esprit quand vous créez des menus.

-
- -

Exemple d'une simple barre de menu

- -

Exemple 1: Source Voir

- -
Image:xultu_menubar_1.png
- -
<toolbox flex="1">
-  <menubar id="sample-menubar">
-    <menu id="file-menu" label="Fichier">
-      <menupopup id="file-popup">
-        <menuitem label="Nouveau"/>
-        <menuitem label="Ouvrir"/>
-        <menuitem label="Enregistrer"/>
-        <menuseparator/>
-        <menuitem label="Quitter"/>
-      </menupopup>
-    </menu>
-    <menu id="edit-menu" label="Edition">
-      <menupopup id="edit-popup">
-        <menuitem label="Annuler"/>
-        <menuitem label="Refaire"/>
-      </menupopup>
-    </menu>
-  </menubar>
-</toolbox>
-
- -

Ici, une simple barre de menu est créée en utilisant l'élément menubar. Il va créer une ligne pour y placer des menus. Deux menus, Fichier et Edition ont été créés ici. L'élément menu crée le titre en haut du menu, qui apparaît sur la barre de menu. Les menus déroulants sont créés en utilisant l'élément menupopup. Le menu va s'ouvrir quand l'utilisateur cliquera sur le titre du menu parent. La taille du menu sera suffisamment large pour que les commandes tiennent à l'intérieur. Les commandes elles-mêmes sont créées en utilisant l'élément menuitem. Chacune d'elles représente une unique commande dans le menu déroulant.

- -

Vous pouvez aussi créer des séparateurs sur les menus en utilisant l'élément menuseparator. Il est utilisé pour séparer des groupes d'items de menu.

- -

Élément menubar

- -

La barre de menu est une boîte contenant des menus. Notez qu'elle a été placée dans une toolbox flexible. La barre de menu n'a pas d'attributs spéciaux mais c'est un type de boîte. De ce fait, vous pouvez créer une barre de menu verticale en affectant la valeur 'vertical' à l'attribut orient.

- -

Élément menu

- -

L'élément menu fonctionne comme l'élément button. Il accepte certains attributs semblables plus quelques autres :

- -
-
id 
-
L'identifiant unique du bouton de titre du menu.
-
label 
-
Le texte qui apparaît sur le menu, comme Fichier ou Edition.
-
disabled 
-
Cet attribut booléen détermine si le menu est désactivé. Bien que ce soit permis, il est rarement utile de désactiver un menu entier. Cet attribut peut être mis à 'true' (vrai) ou 'false' (faux). Bien sûr, cette dernière valeur est celle par défaut.
-
accesskey 
-
Il s'agit de la touche que l'utilisateur peut presser pour activer le menu. Cette lettre est habituellement soulignée dans le titre du menu. Mozilla va regarder dans l'attribut label et ajouter un caractère soulignement au caractère spécifié ici. Pour cette raison, vous devez spécifier un caractère qui existe dans le texte (bien que la touche fonctionnera toujours si ce n'est pas le cas).
-
- -
Image:xultu_menubar_2.png
- -

L'élément menu est normalement placé sur une barre de menu, bien que ce ne soit pas nécessaire. Cependant, il donnera une autre apparence. L'image montre à quoi l'exemple précédent ressemblerait sans la barre de menu.

- -

Élément menupopup

- -

L'élément menupopup crée la fenêtre déroulante contenant les commandes de menu. C'est un type de boîte qui est orienté verticalement par défaut. Vous pouvez passer en orientation horizontale si vous le voulez, les menuitems seront alors placés sur une même ligne. Normalement seuls les menuitems et les menuseparators sont placés dans un menupopup. Vous pouvez placer n'importe quel élément dans un menupopup, cependant ils seront ignorés sur un Macintosh.

- -

Élément menuitem

- -

L'élément menuitem est comme l'élément menu et comporte quelques attributs semblables.

- -
-
id 
-
L'identifiant unique du bouton du menu.
-
label 
-
Le texte qui apparaît sur l'item de menu, comme Ouvrir ou Enregistrer.
-
disabled 
-
Cet attribut booléen détermine si l'item de menu est désactivé. Cet attribut peut être mis à 'true' (vrai) ou 'false' (faux), qui est la valeur par défaut.
-
accesskey 
-
Il s'agit de la touche que l'utilisateur peut presser pour activer l'item de menu. Cette lettre est habituellement soulignée dans le libellé de l'item de menu. Mozilla va regarder dans l'attribut label et ajouter un caractère soulignement au caractère spécifié ici. Pour cette raison, vous devez spécifier un caractère qui existe dans le texte.
-
acceltext 
-
Cet attribut spécifie le texte de la touche de raccourci qui apparaît près du texte de la commande de menu. Cependant, il n'associe pas de touche d'action avec l'item de menu. Nous verrons comment faire cela plus tard.
-
- -

Élément menuseparator

- -

Le menuseparator n'a pas d'attribut spécial. Il crée juste une barre horizontale entre les items de menu.

- -
-

Nous allons maintenant voir quelques autres fonctions de menu.

- -
-

« PrécédentSuivant »

-
diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/bo\303\256te_de_dialogue_de_fichier/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/bo\303\256te_de_dialogue_de_fichier/index.html" deleted file mode 100644 index 8e22677407..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/bo\303\256te_de_dialogue_de_fichier/index.html" +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Boîte de dialogue de fichier -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Boîte_de_dialogue_de_fichier -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Open_and_Save_Dialogs ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Un type commun de boîtes de dialogue est celui avec lequel un utilisateur peut sélectionner un fichier à ouvrir où à enregistrer.

- -

Sélecteurs de fichiers

- -

Un sélecteur de fichiers est une boîte dialogue qui permet à l'utilisateur de sélectionner un fichier. Il est fréquemment utilisé pour les commandes de menu « Ouvrir... » ou « Enregistrer sous... », mais vous pouvez l'utiliser dès que l'utilisateur a besoin de sélectionner un fichier. L'appel à l'interface XPCOM nsIFilePicker est nécessaire pour implémenter un sélecteur de fichiers.

- -
Notez que le sélecteur de fichiers ne fonctionne qu'avec des URLs chrome.
- -

Vous pouvez utiliser le sélecteur de fichiers dans l'un de ces trois modes :

- - - -

L'apparence de la boîte de dialogue sera différente pour chaque type et variera selon la plateforme. Une fois que l'utilisateur aura sélectionné le fichier ou le répertoire/dossier, celui-ci pourra être lu ou enregistré.

- -

L'interface du sélecteur de fichiers nsIFilePicker est responsable de l'affichage de la boîte de dialogue dans l'un des trois modes. Vous pouvez définir plusieurs fonctionnalités de la boîte de dialogue en utilisant cette interface. Une fois que la boîte de dialogue est fermée, vous pouvez utiliser les fonctions de l'interface pour obtenir le fichier qui a été sélectionné.

- -

Création d'un sélecteur de fichier

- -

Pour commencer, vous devez créer un composant du sélecteur de fichiers et l'initialiser.

- -
var nsIFilePicker = Components.interfaces.nsIFilePicker;
-var fp = Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);
-fp.init(window, "Sélectionnez un fichier", nsIFilePicker.modeOpen);
-
- -

Tout d'abord, un nouvel objet sélecteur de fichiers est créé et stocké dans une variable fp. La fonction init est utilisée pour initialiser le sélecteur de fichiers. Cette fonction prend trois arguments : la fenêtre qui ouvre la boîte de dialogue, le titre de la boîte de dialogue et son mode. Ici, le mode est 'modeOpen' qui est utilisé pour une boîte de dialogue Ouvrir. Vous pouvez aussi utiliser 'modeGetFolder' et 'modeSave' pour les deux autres modes. Ces modes sont des constantes de l'interface nsIFilePicker.

- -

Répertoire par défaut et filtres

- -

Il y a deux fonctionnalités que vous pouvez définir pour la boîte de dialogue avant qu'elle ne soit affichée.

- - - -

Vous pouvez définir le répertoire par défaut en renseignant la proprieté displayDirectory de l'objet du sélecteur de fichiers. Le répertoire doit être un objet nslLocalFile. Si vous ne le définissez pas, un répertoire par défaut sera sélectionné pour vous. Pour appliquer des filtres, appelez la fonction appendFilters() pour définir les types de fichiers que vous souhaitez voir s'afficher.

- -
fp.appendFilters(nsIFilePicker.filterHTML | nsIFilePicker.filterImages);
-fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll);
-
- - - -

Vous pouvez aussi utiliser 'filterXML' et 'filterXUL' pour filtrer les fichiers XML et XUL. Si vous voulez filtrer des fichiers personnalisés, vous pouvez utiliser la fonction appendFilter() :

- -
fp.appendFilter("Fichiers Audio","*.wav; *.mp3");
-
- -

Cette ligne ajoutera un filtre pour les fichiers audio Wav et MP3. Le premier argument est le titre du type de fichier et le second est une liste de masques de fichiers séparés par un point virgule. Vous pouvez mettre autant de masques que vous le souhaitez. Vous pouvez appeler appendFilter autant de fois que nécessaire pour ajouter les filtres supplémentaires. L'ordre dans lequel vous les ajoutez détermine leur priorité. Habituellement, le premier ajouté est sélectionné par défaut.

- -

Obtention du fichier sélectionné

- -

Enfin, vous pouvez afficher la boîte de dialogue en appelant la fonction show(). Elle ne prend aucun argument mais retourne un code d'état qui indique ce que l'utilisateur a sélectionné. Notez que la fonction ne retourne aucune valeur tant que l'utilisateur n'a pas sélectionné un fichier. La fonction retourne une des trois constantes suivantes :

- -
-
'returnOK' 
-
 : l'utilisateur a sélectionné un fichier et a pressé le bouton « OK ». Le fichier que l'utilisateur a sélectionné sera stocké dans la propriété file du sélecteur de fichiers.
-
'returnCancel' 
-
 : l'utilisateur a pressé le bouton « Annuler ».
-
'returnReplace' 
-
 : dans le mode enregistrement, cette valeur de retour signifie que l'utilisateur a sélectionné un fichier à remplacer ('returnOK' sera retournée lorsque l'utilisateur aura rentré le nom d'un nouveau fichier).
-
- -

Vous devrez tester la valeur de retour et ensuite utiliser l'objet file du sélecteur de fichiers en utilisant la propriété file.

- -
var res = fp.show();
-if (res == nsIFilePicker.returnOK){
-  var thefile = fp.file;
-  // --- faire quelque chose avec le fichier ici ---
-}
-
- -
-

Par la suite, nous verrons comment créer un assistant.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/broadcasters_et_observateurs/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/broadcasters_et_observateurs/index.html deleted file mode 100644 index dd1a8bbbae..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/broadcasters_et_observateurs/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Broadcasters et Observateurs -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Broadcasters_et_Observateurs -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Broadcasters_and_Observers ---- -

 

-
-

« PrécédentSuivant »

-
-

Parfois, vous voulez que plusieurs éléments répondent à des événements ou changent d'état aisément. Pour cela, nous pouvons utiliser les « broadcasters » (diffuseurs).

-

Commandes de transmission d'attributs

-

Nous avons vu précédemment que les éléments tels que les boutons peuvent être ancrés à des commandes. De plus, si vous placez l'attribut disabled sur l'élément command, tous les éléments ancrés sur celui-ci seront eux aussi désactivés automatiquement. C'est une façon utile de diminuer la taille du code nécessaire. Cette technique fonctionne aussi pour les autres attributs. Par exemple, si vous placez un attribut label sur un élément command, chaque bouton attaché à la commande partagera ce libellé.

-

Exemple 1: Source Voir

-
<command id="ma_commande" label="Ouvrir"/>
-
-<button command="ma_commande"/>
-<checkbox label="Ouvrir une nouvelle fenêtre" command="ma_commande"/>
-
-

Dans cet exemple, le bouton n'a pas d'attribut label, néanmoins il est attaché à une commande qui en possède un. Le bouton va donc le partager avec la commande. La case à cocher a déjà un libellé, néanmoins, il va être surchargé par celui de la commande. Le résultat est que le bouton et la case à cocher auront le même libellé 'Ouvrir'.

-

Si vous modifiez l'attribut label de la commande, les libellés du bouton et de la case à cocher changeront eux aussi. Nous avons vu une application similaire dans une section précédente où l'attribut disabled était défini puis propagé aux autres éléments.

-

Cette transmission d'attribut est relativement utile pour plusieurs raisons. Par exemple, disons que nous voulons désactiver l'action « Page précédente » dans un navigateur. Nous aurions besoin de désactiver cette action dans le menu, dans la barre des tâches, le raccourci clavier (Alt+Gauche par ex.) et chaque commande « Page précédente » des menus déroulants. Écrire un script pour le faire n'est pas très simple. Le désavantage est de devoir prévoir tous les endroits où pourraient se trouver les boutons « Page précédente ». Si quelqu'un a ajouté un nouveau bouton « Page précédente » en utilisant une extension, il ne serait pas pris en compte. Il est plus pratique de désactiver simplement l'action « Page précédente » et que tous les éléments utilisant cette action se désactivent eux-mêmes. Nous pouvons utiliser la transmission d'attributs des commandes pour accomplir cela.

-

Broadcasters

-

Il y existe un élément similaire appelé broadcaster. Les broadcasters supportent la transmission d'attributs de la même manière que les commandes. Ils fonctionnent de la même manière excepté le fait qu'une commande est utilisée pour les actions, alors qu'un broadcaster est utilisé pour contenir l'information d'un état. Par exemple, un élément command serait utilisé pour une action comme « Page précédente », « Couper » ou « Supprimer ». Un broadcaster serait utilisé pour contenir, par exemple, un drapeau indiquant si l'utilisateur est en ligne ou non. Dans le premier cas, les éléments du menu et de la barre des tâches nécessiteraient d'être désactivés lorsqu'il n'y a pas de page de retour, ou aucun texte à couper, à effacer. Dans le second cas, plusieurs éléments de l'interface auraient besoin d'être mis à jour lorsque l'utilisateur passerait du mode en ligne au mode hors ligne.

-

Le broadcaster le plus simple est défini ci-dessous. Vous devriez toujours utiliser un attribut id afin qu'il puisse être référencé à partir d'autres éléments.

-
<broadcasterset>
-   <broadcaster id="isOffline" label="Hors ligne"/>
-</broadcasterset>
-
-

Tous les éléments qui « observent » le broadcaster seront modifiés automatiquement chaque fois que l'attribut label du broadcaster change. Ces éléments auront comme résultat un nouveau libellé. Tout comme d'autres éléments non affichés, l'élément broadcasterset est un conteneur pour les broadcasters. Vous devez déclarer tous vos broadcasters dans un élément broadcasterset afin de les réunir.

-

Création d'éléments observateurs

-

Les éléments qui observent le broadcaster sont appelés observateurs car ils « observent » l'état du broadcaster. Pour qu'un élément devienne un observateur, ajoutez lui un attribut observes. Il est analogue à l'attribut command utilisé pour attacher un élément à un élément command. Par exemple, pour qu'un bouton devienne un observateur du broadcaster décrit ci-dessus :

-
<button id="offline_button" observes="isOffline"/>
-

L'attribut observes a été placé sur le bouton et sa valeur a été affectée à la valeur de l'id du broadcaster à observer. Ici, le bouton va observer le broadcaster avec l'id 'isOffline' qui a été défini un peu plus haut dans le code. Si la valeur de l'attribut label du broadcaster change, les observateurs mettront à jour leur valeur de l'attribut label.

-

Nous pourrions continuer avec d'autres éléments. Autant d'éléments que vous voulez peuvent observer le même broadcaster. Vous pouvez aussi n'avoir qu'un seul élément observateur, mais cela ne servirait pas à grand chose puisque la raison principale d'utiliser les broadcasters est d'avoir des attributs transmis à de multiples endroits. Vous ne devriez utiliser les broadcasters que lorsque vous avez besoin que plusieurs éléments aient à observer un attribut. D'autres observateurs sont décrits ci-dessous :

-
<broadcaster id="offline_command" label="Hors ligne" accesskey="f"/>
-
-<keyset>
-  <key id="goonline_key" observes="offline_command" modifiers="accel" key="O"/>
-</keyset>
-<menuitem id="offline_menuitem" observes="offline_command"/>
-<toolbarbutton id="offline_toolbarbutton" observes="offline_command"/>
-
-

Dans cet exemple, label et l'accesskey seront transmis par le broadcaster au raccourci clavier, à l'item de menu et au bouton de la barre d'outils. Le raccourci clavier n'utilisera aucun des attributs reçus, mais il sera désactivé lorsque le broadcaster le sera.

-

Vous pouvez utiliser un broadcaster pour observer n'importe quel attribut désiré. Les observateurs récupèreront les valeurs de chaque attribut, via les broadcasters, dès qu'ils changeront. Si jamais la valeur d'un seul attribut change, les observateurs seront avisés et ajusteront leurs propres attributs en conséquence. Les attributs des observateurs que le broadcaster ne possède pas lui-même ne sont pas modifiés. Les seuls attributs qui ne sont pas modifiés sont les attributs id et persist ; ces attributs ne sont jamais partagés. Vous pouvez également utiliser vos propres attributs si vous le désirez.

-

Les broadcasters ne sont pas fréquemment utilisés, car les commandes peuvent en général convenir à la majorité des usages. Une chose à préciser est qu'il n'y a pas vraiment de différence entre l'élément command et l'élément broadcaster. Ils font tous les deux la même chose. La différence est plutôt sémantique. Utilisez les commandes pour les actions et utilisez les broadcasters pour les états. En fait, chaque élément peut agir comme un broadcaster, tant que vous l'observez en utilisant l'attribut observes.

-

L'élément Observes

-

Il existe un moyen de spécifier plus précisemment les attributs du broadcaster à observer. Cela implique un élément observes. Tout comme son attribut l'indique, il vous permet d'indiquer à un élément qu'il est un observateur. L'élément observes doit être placé en tant qu'enfant de l'élément qui doit être l'observateur. Voici un exemple :

-

Exemple 2: Source Voir

-
<broadcasterset>
-  <broadcaster id="isOffline" label="Hors ligne" accesskey="f"/>
-</broadcasterset>
-
-<button id="offline_button">
-  <observes element="isOffline" attribute="label"/>
-</button>
-
-

Deux attributs ont été ajoutés à l'élément observes. Le premier, element, spécifie l'identifiant du broadcaster à observer. Le second, attribute, spécifie l'attribut à observer. Le résultat est que le bouton recevra son libellé du broadcaster, et quand l'attribut label sera modifié, le libellé du bouton sera changé. L'élément observes ne change pas, contrairement à l'élément qui le contient, qui est dans ce cas un button. Notez que l'attribut accesskey n'est pas transmis au bouton, puisque il n'est pas observé. Si vous voulez que ce soit le cas, un autre élément observes devra être ajouté. Si vous n'utilisez aucun élément observes, et qu'à la place vous utilisez l'attribut observes directement sur le bouton, tous les attributs seront observés.

-

Événement broadcast

-

Il existe un gestionnaire d'événements supplémentaire, onbroadcast, que nous pouvons placer sur l'élément observes. L'événement est appelé dès que l'observateur détecte un changement dans l'attribut du broadcaster qu'il observe. Un exemple est décrit ci-dessous :

-

Exemple 3: Source Voir

-
<broadcasterset>
-  <broadcaster id="colorChanger" style="color: black"/>
-</broadcasterset>
-
-<button label="Test">
-  <observes element="colorChanger" attribute="style" onbroadcast="alert('La couleur a changé');"/>
-</button>
-
-<button label="Observer"
-  oncommand="document.getElementById('colorChanger').setAttribute('style','color: red');"
-/>
-
-

Deux boutons ont été créés, un nommé 'Test' et l'autre 'Observateur'. Si vous cliquez sur le bouton « Test », rien ne se produit. En revanche, si vous cliquez sur le bouton « Observateur », deux choses surviennent. Premièrement, le texte du bouton devient rouge, deuxièmement, un message d'alerte apparaît avec le message 'La couleur a changé'.

-

Voilà ce qui se passe : le gestionnaire oncommand du second bouton est appelé lorsque l'utilisateur appuie dessus. Le script dispose ici d'une référence au broadcaster et change le style de celui-ci afin qu'il ait une couleur (color) rouge. Le broadcaster n'est pas affecté par le changement de style car il n'est pas affiché à l'écran. Néanmoins, le premier bouton a un observateur qui tient compte du changement de style. Les attributs element et attribute sur la balise observes détecte le changement de style. Le style est appliqué automatiquement au premier bouton.

-

Ensuite, puisque la transmission se fait, le gestionnaire d'événement onbroadcast est appelé. Il en résulte l'affichage d'un message d'alerte. Notez que la transmission ne se fait que si les attributs de l'élément broadcaster sont modifiés. Changer le style du bouton directement ne déclenchera aucune diffusion d'événement et le message d'alerte ne s'affichera pas.

-

Si vous essayez de dupliquer le code du premier bouton (button) plusieurs fois, vous verrez une série de messages d'alerte, un pour chaque bouton, car chaque bouton est un observateur et sera prévenu du changement de style.

-
-

Nous verrons dans la section suivante l'utilisation du Modèle Objet de Document (DOM) avec les éléments XUL.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/cadres_de_contenu/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/cadres_de_contenu/index.html deleted file mode 100644 index d63d0e1d7c..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/cadres_de_contenu/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Cadres de contenu -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Cadres_de_contenu -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Content_Panels ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Dans cette section, nous regarderons comment ajouter des cadres qui peuvent afficher des pages HTML ou d'autres fichiers XUL.

- -

Ajout de cadres enfants

- -

Parfois, vous souhaitez qu'une partie d'un document soit chargée à partir d'une autre page. D'autres fois, vous voulez changer une partie de la fenêtre. Un bon exemple est un assistant qui vous guide pas-à-pas à travers un certain nombre d'écrans, en vous posant une série de questions. Chaque fois que l'utilisateur clique sur le bouton suivant, l'écran suivant de l'assistant est affiché.

- -

Vous pouvez créer une interface d'assistant en ouvrant une fenêtre différente pour chaque écran. Cette approche pose trois problèmes. Premièrement, chaque fenêtre peut apparaître à une position différente sur l'écran (bien qu'il existe une alternative à cela). Deuxièmement, les éléments tels que les boutons suivant ou précédent sont les mêmes tout au long de l'interface. Ce serait bien mieux si seul le contenu de l'assistant changeait. Troisièmement, il sera difficile de coordonner les scripts tournant dans les différentes fenêtres.

- -
Notez que XUL a un élément wizard qui peut être utilisé pour créer des assistants. Il sera décrit dans une prochaine section.
- -

Une meilleure approche est d'utiliser l'élément iframe, qui fonctionne comme l'élément HTML du même nom. Il crée un document séparé dans la fenêtre. Il a l'avantage de pouvoir être placé n'importe où et son contenu chargé à partir d'un fichier différent. Indiquez l'URL que vous souhaitez afficher dans le cadre avec l'attribut src. Cette URL peut pointer sur n'importe quelle sorte de fichiers, bien qu'elle pointe habituellement sur un fichier HTML ou un autre fichier XUL. Vous pouvez utiliser un script pour changer le contenu de ce cadre sans affecter la fenêtre principale.

- -

Dans la fenêtre du navigateur Mozilla, l'endroit où la page Web doit être affichée est créé en utilisant un cadre iframe. Lorsque l'utilisateur entre une URL ou clique sur un lien du document, la source du cadre est changée.

- -

Exemple iframe

- -

Exemple 1: Source Voir

- -
<toolbox>
-   <toolbar id="nav-toolbar">
-     <toolbarbutton label="Précédent"/>
-     <toolbarbutton label="Suivant"/>
-     <textbox id="urlfield"/>
-   </toolbar>
-</toolbox>
-
-<iframe id="content-body" src="http://www.mozilla-europe.org/fr/" flex="1"/>
-
- -
Image:xultu_cpanels1.png
- -

Ici, l'exemple crée une interface très simple pour un navigateur Web. Une boîte contenant deux éléments a été créée : un élément toolbox et un élément iframe. Un bouton « Précédent », un bouton « Suivant » et un champ de saisie des URLs ont été ajoutés sur la barre d'outils. Les pages Web apparaissent à l'intérieur du cadre iframe. Dans ce cas, c'est la page d'accueil du site qui apparaîtra par défaut.

- -

Cet exemple n'est pas fonctionnellement complet. Par la suite, nous ajouterons un script qui changera l'attribut de src au moment désiré, par exemple quand l'utilisateur appuie sur la touche Entrée.

- - - -

Il existe un second type de cadre de contenu, utilisant la balise browser. Vous l'utiliserez quand vous voudrez créer un cadre qui montre le contenu comme un navigateur. En réalité, l'élément iframe peut aussi le faire, mais le navigateur (browser) possède certaines caractéristiques supplémentaires. Par exemple, l'élément browser conserve un historique pour utiliser les boutons « Précédent » et « Suivant ». Le navigateur peut aussi charger des pages avec des referers et d'autres états. La balise browser doit être utilisée essentiellement lorsque vous voulez créer une interface semblable au navigateur, mais l'iframe peut être utilisé lorsque vous avez juste besoin d'un cadre simple.

- -

Un élément similaire, tabbrowser, fournit la fonctionnalité du browser, mais fournit également une barre d'onglets pour basculer entre de multiples pages. C'est le composant graphique utilisé par le navigateur Mozilla pour son interface de navigation par onglets. L'élément tabbrowser est en réalité implémenté comme un tabbox contenant un ensemble d'éléments browser. Ces deux types de navigateur offrent un contrôle similaire sur les pages à afficher.

- -

Exemple de browser

- -

Exemple 2: Source Voir.

- -
<browser src="http://www.mozilla.org" flex="1"/>
- -

Comme avec l'iframe, vous pouvez indiquer l'URL dans un navigateur utilisant l'attribut src. Pour un tabbrowser, vous ne pouvez pas définir l'url directement comme ceci, étant donné qu'il n'affiche pas qu'une seule URL. À la place, vous devez utiliser un script et appeler la fonction loadURI.

- -

Il y a trois catégories de navigateurs, selon le genre de contenu que vous voulez afficher. Le type peut être indiqué en utilisant l'attribut type.

- -

Le premier type est le type par défaut utilisé si vous omettez cet attribut. Dans ce cas, le contenu chargé à l'intérieur du navigateur est traité comme s'il faisait partie de la même application et avait accès à la fenêtre extérieure. Cela signifie que lorsqu'un script chargé à l'intérieur du navigateur essaie d'obtenir la fenêtre la plus élevée, il obtiendra la fenêtre XUL extérieure.

- -

Ce comportement conviendrait pour un cadre XUL fils qui fait partie de votre application, mais il ne serait pas adapté pour un navigateur qui chargerait des pages Web. À la place, vous voudrez restreindre la page Web au seul accès de son contenu. Vous pouvez noter qu'une fenêtre de navigateur Mozilla possède du contenu XUL pour les barres d'outils et de statut et ainsi de suite avec un tabbrowser formant la zone principale. Cette zone interne affiche une page Web, mais celle-ci ne peut pas accéder au XUL l'entourant. C'est parce le second type de navigateur est utilisé en définissant l'attribut type avec la valeur 'content'. Il empêche le contenu de remonter jusqu'à la fenêtre XUL. Un exemple :

- -
<browser src="http://www.mozilla.org" type="content" flex="1"/>
- -
Il est important que vous définissiez l'attribut type correctement si vous envisagez d'afficher des sites Web distants à l'intérieur de l'élément browser.
- -

Le tabbrowser définit le type 'content' automatiquement sur tous les onglets de navigation qu'il crée. Vous n'avez donc pas à le définir explicitement pour les onglets de navigation.

- -

Le troisième type sert lorsque votre fenêtre contient plusieurs éléments browser, comme par exemple si vous aviez un panneau latéral affichant du contenu supplémentaire. Renseignez l'attribut type sur l'élément browser principal avec la valeur 'content-primary' pour spécifier le contenu primaire. Il fonctionne comme avec la valeur 'content' excepté le fait que le contenu à l'intérieur est accessible en utilisant la propriété 'content' de la fenêtre XUL. L'accès au contenu du navigateur principal en utilisant un script s'en trouve simplifié. tabbrowser définit automatiquement l'attribut type avec cette valeur 'content-primary' pour tous les navigateurs visibles, ce qui vous permet de cette manière de toujours pouvoir avoir accès au contenu visible.

- -
-

Dans la section suivante, nous allons voir comment créer des séparateurs.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/caract\303\251ristiques_d'une_fen\303\252tre/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/caract\303\251ristiques_d'une_fen\303\252tre/index.html" deleted file mode 100644 index 4f063b5790..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/caract\303\251ristiques_d'une_fen\303\252tre/index.html" +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Caractéristiques d'une fenêtre -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Caractéristiques_d'une_fenêtre -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Features_of_a_Window ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Nous avons déjà vu quelques caractéristiques de fenêtres. Nous allons en aborder d'autres dans cette section.

- -

Créer une autre fenêtre

- -

Vous pouvez créer une seconde fenêtre pour votre application de la même manière que vous avez créé la première. Il suffit de créer un second fichier XUL contenant le code de la nouvelle fenêtre. Comme en HTML, vous pouvez utiliser la fonction window.open() pour ouvrir la seconde fenêtre. Cette fonction retournera une référence à la fenêtre nouvellement ouverte. Vous pouvez utiliser cette référence pour appeler des fonctions de l'autre fenêtre.

- -

La fonction open prend trois arguments. Le premier est l'URL du fichier que vous souhaitez ouvrir. Le deuxième est le nom interne de la fenêtre. Le troisième est une liste de drapeaux de paramètres d'affichage. Le drapeau chrome est important pour ouvrir la fenêtre comme un fichier chrome. Si vous n'ajoutez pas le drapeau chrome, le fichier sera ouvert dans une nouvelle fenêtre du navigateur.

- -

Par exemple :

- -
var myWin = window.open("chrome://findfile/content/findfile.xul","findfile","chrome");
- -

Spécifier la largeur et la hauteur

- -

Vous aurez noté que lorsque des éléments sont ajoutés à une fenêtre, la largeur de la fenêtre s'étend pour s'adapter aux nouveaux éléments. La fenêtre n'est en fait qu'une boîte flexible et qui prend par défaut une orientation verticale. Vous pouvez également spécifier la largeur et la hauteur directement dans la balise window. Cela, bien sûr, oblige la fenêtre à prendre une taille spécifique. Si vous ôtez ces spécifications, la taille sera déterminée par les éléments qui la constituent.

- -
<window
-  id="findfile-window"
-  title="Recherche de fichiers"
-  width="400"
-  height="450"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
- -

Dans cet exemple, la fenêtre sera ouverte avec une largeur de 400 pixels et une hauteur de 450 pixels. Même s'il n'y a pas assez d'éléments pour lui faire adopter cette taille, la fenêtre s'ouvrira toujours à cette taille et il y aura un espace vierge dans l'espace restant. S'il y a trop d'éléments, la fenêtre n'adaptera pas ses dimensions pour en tenir compte. L'utilisateur devra alors redimensionner la boîte de dialogue. Vous devez faire attention, lorsque vous spécifiez une largeur et une hauteur, à ce que la fenêtre ne soit ni trop petite, ni trop grande. Vous devez considérer les thèmes graphiques ou la langue propres à l'utilisateur.

- -
Notez que vous devez spécifier à la fois la largeur et la hauteur. Si vous ne spécifiez qu'une des deux valeurs, l'autre sera mise à '0'. Pour que la fenêtre détermine sa taille automatiquement, omettez les toutes les deux.
- -

La largeur et la hauteur déterminent seulement la taille initiale de la fenêtre. L'utilisateur peut toujours redimensionner la fenêtre, à condition que celle-ci soit redimensionnable.

- -

Autres propriétés de fenêtre

- -

Les drapeaux ci-après peuvent être utilisés comme troisième argument de la fonction window.open. Votre système d'exploitation peut ne pas les supporter tous. Vous pouvez également utiliser un des drapeaux pré-existants, que vous devriez trouver dans une référence JavaScript. Vous pouvez désactiver une propriété en la réglant sur 'no', par exemple dialog='no'.

- -
-
alwaysLowered
-
La fenêtre apparaîtra toujours derrière les autres fenêtres.
-
alwaysRaised
-
La fenêtre apparaîtra toujours devant les autres fenêtres.
-
centerscreen
-
À son ouverture, la fenêtre sera centrée à l'écran.
-
dependent
-
La position de la fenêtre sera toujours relative à la fenêtre qui l'a ouverte. Si la position de la fenêtre initiale est modifiée, la seconde fenêtre bougera automatiquement de même manière.
-
dialog
-
la fenêtre est une boîte de dialogue pouvant apparaître différemment.
-
modal
-
La boite de dialogue est modale. La fenêtre qui a ouvert la fenêtre modale ne peut pas être utilisée tant que la fenêtre modale n'est pas fermée.
-
resizable
-
L'utilisateur peut redimensionner la fenêtre.
-
- -

Voir également la référence DOM de window.open().

- -
-

Nous allons voir ensuite comment ouvrir des boîtes de dialogue secondaires.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/commandes/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/commandes/index.html deleted file mode 100644 index baedcbfcdf..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/commandes/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Commandes -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Commandes -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Commands ---- -

 

-
-

« PrécédentSuivant »

-
-

Une commande est une opération qui peut être invoquée.

-

Les éléments de commande

-

L'élément command est utilisé pour créer des commandes qui pourront être utilisées pour exécuter des opérations. Vous n'avez pas besoin d'utiliser les commandes si vous avez juste à appeler un script pour manipuler des choses. Cependant, une commande a l'avantage de pouvoir être désactivée automatiquement quand c'est nécessaire, et de pouvoir être invoquée de l'extérieur sans avoir besoin de connaître les détails de son implémentation. Les commandes fournissent un moyen pour séparer de façon abstraite les opérations et le code. Elles deviennent très utiles pour les grosses applications.

-

Par exemple, pour implémenter les commandes de menus du presse-papiers, couper, copier et coller, vous pouvez utiliser les commandes. Si vous ne les utilisiez pas, vous devriez trouver quel champ a le focus, ensuite s'assurer que l'opération est valable pour cet élément. De plus, les commandes de menus devraient être activées ou désactivées selon que l'élément cible a du texte sélectionné ou pas, et pour les opérations de collage, si le presse-papiers contient quelque chose qui peut être collé. Comme vous pouvez le voir, cela devient compliqué. En utilisant les commandes, votre travail est simplifié.

-

Vous pouvez utiliser une commande pour n'importe quelle opération. Mozilla les utilise la plupart du temps pour les menus. De plus, les champs de saisie de texte et autres composants graphiques disposent de plusieurs commandes natives que vous pouvez invoquer. Vous devriez les utiliser quand les opérations dépendent de l'élément sélectionné.

-

Une commande est identifiée par son attribut id. Mozilla utilise une convention : les id de commandes commencent par 'cmd_'. Vous voudrez probablement utiliser le même identifiant que celui d'une commande déjà utilisée, cependant, pour vos propres commandes, vous pouvez utiliser n'importe quel id de commande souhaité. Pour éviter les conflits, il est préférable d'inclure le nom de l'application dans l'id de la commande. Un moyen simple d'utilisation des commandes est montré ci-après :

-

Exemple : command simple

-

Exemple 1: Source Voir.

-
<command id="cmd_openhelp" oncommand="alert('Aide !');"/>
-<button label="Aide" command="cmd_openhelp"/>
-
-

Dans cet exemple, au lieu de placer l'attribut oncommand sur l'élément button, nous le plaçons sur un élément command. Les deux sont alors liés en utilisant l'attribut command qui a la valeur de l'id de la commande. Ainsi, quand le bouton est pressé, la commande 'cmd_openhelp' est invoquée.

-

Cette approche présente deux avantages.

- -

De plus,

- -

Exemple : Activer/Désactiver command

-

Exemple 2: Source Voir

-
<command id="cmd_openhelp" oncommand="alert('Aide');"/>
-<button label="Aide" command="cmd_openhelp"/>
-<button label="Plus d'aide" command="cmd_openhelp"/>
-
-<button label="Désactiver" oncommand="document.getElementById('cmd_openhelp').setAttribute('disabled','true');"/>
-<button label="Activer" oncommand="document.getElementById('cmd_openhelp').removeAttribute('disabled');"/>
-
-

Dans cet exemple, les deux boutons utilisent la même commande. Quand le bouton « Désactiver » est pressé, la commande est désactivée en définissant son attribut disabled, et les deux boutons seront aussi désactivés.

-

Habituellement, un groupe de commandes se place à l'intérieur d'un élément commandset, près du début du fichier XUL, comme dans l'exemple suivant :

-
<commandset>
-   <command id="cmd_open" oncommand="alert('Ouvrir !');"/>
-   <command id="cmd_help" oncommand="alert('Aide !');"/>
-</commandset>
-
-

Une commande est invoquée quand l'utilisateur active le bouton ou les autres éléments rattachés à la commande. Vous pouvez aussi invoquer une commande en appelant la méthode doCommand, que ce soit de l'élément command ou d'un élément rattaché à la commande, comme un bouton.

-

Le répartiteur de commandes

-

Vous pouvez aussi utiliser les commandes sans utiliser l'élément command, ou, au moins, sans ajouter un attribut oncommand sur la commande. Dans ce cas, la commande n'invoquera pas un script directement, mais recherchera plutôt un élément ou une fonction qui traitera la commande. Cette fonction peut être séparée du XUL lui-même, et peut être embarquée par un élément graphique en interne. Afin de trouver ce qui traitera la commande, XUL utilise un objet appelé répartiteur de commande (NdT : command dispatcher). Cet objet localise le gestionnaire d'une commande. Le gestionnaire d'une commande est appelé contrôleur. Ainsi, quand une commande est invoquée, le répartiteur de commande localise un contrôleur qui traite la commande. Vous pouvez déduire que l'élément command est un type de contrôleur pour une commande.

-

Le répartiteur de commandes localise un contrôleur en regardant l'élément sélectionné pour voir s'il a un contrôleur qui gère la commande. Les éléments XUL ont une propriété controllers qui est utilisée pour la vérification. Vous pouvez l'utiliser pour ajouter vos propres contrôleurs. Vous pourriez l'utiliser pour avoir une boîte de liste qui répond aux opérations de couper, copier et coller. Un exemple sera fourni plus tard. Par défaut, seuls les champs de saisie (textbox) ont un contrôleur fonctionnel. Ce contrôleur gère aussi bien les opérations de presse-papiers, sélection, défaire et refaire, que les opérations d'édition. Notez qu'un élément peut avoir plusieurs contrôleurs, qui seront alors tous pris en compte.

-

Si l'élément courant sélectionné n'a pas le contrôleur attendu, la fenêtre sera alors vérifiée. L'élément window a aussi une propriété controllers que vous pouvez modifier comme bon vous semble. Si le focus est à l'intérieur d'un cadre frame, chaque cadre parent est également vérifié. Ainsi, les commandes fonctionneront même si le focus est à l'intérieur d'un cadre. Ce mécanisme fonctionne bien pour un navigateur ; les commandes d'édition invoquées à partir du menu principal fonctionneront à l'intérieur de la zone de contenu. Notez que HTML a aussi un système de commandes et de contrôleur, bien que vous ne puissiez pas l'utiliser sur des pages Web sans privilèges. Mais vous pouvez l'utiliser, par exemple, dans une extension du navigateur. Si la fenêtre ne fournit pas un contrôleur capable de gérer la commande, rien ne se passera.

-

Vous pouvez récupérer le répartiteur de commande en utilisant la propriété commandDispatcher de l'objet document, ou à partir des contrôleurs listés dans un élément ou la fenêtre. Le répartiteur de commande contient des méthodes pour récupérer les contrôleurs pour les commandes et pour récupérer et modifier le focus.

-

Ajout de contrôleurs

-

Vous pouvez implémenter vos propres contrôleurs pour répondre aux commandes. Vous pouvez tout aussi bien surcharger la gestion par défaut d'une commande en plaçant le contrôleur correctement. Un contrôleur doit implémenter quatre méthodes qui sont listées ci-dessous :

-
supportsCommand (command) 
Cette méthode doit renvoyer 'true' si le contrôleur gère la commande. Si vous renvoyez 'false', la commande n'est pas gérée et le répartiteur de commande interrogera un autre contrôleur. Un contrôleur peut gérer plusieurs commandes.
-
-
isCommandEnabled (command) 
Cette méthode doit renvoyer 'true' si la commande est activée, 'false' sinon. Les boutons correspondants seront désactivés automatiquement.
-
-
doCommand (command) 
exécute la commande. C'est ici que vous mettrez le code pour gérer la commande.
-
-
onEvent (event) 
Cette méthode gère un événement.
-
-

Exemple : implémentation d'un contrôleur

-

Imaginons que nous voulions implémenter une boîte de liste (listbox) qui gère la commande « Supprimer ». Quand un utilisateur sélectionne « Supprimer » dans le menu, la boîte de liste efface la ligne sélectionnée. Dans ce cas, vous avez juste à attacher un contrôleur à l'élément listbox qui exécutera l'action correspondante dans sa méthode doCommand.

-

Essayez d'ouvrir l'exemple qui suit (Source Voir) dans une fenêtre du navigateur et sélectionnez des items de la liste. Vous noterez que la commande « Supprimer » du menu « Edition » du navigateur est activée et qu'elle effacera la ligne sélectionnée. L'exemple n'est cependant pas complet. Nous devrions nous assurer que la sélection et le focus soient ajustés comme il faut après l'effacement.

-
<window id="controller-example" title="Exemple de contrôleur" onload="init();"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<script>
-function init()
-{
-  var list = document.getElementById("theList");
-
-  var listController = {
-    supportsCommand : function(cmd){ return (cmd == "cmd_delete"); },
-    isCommandEnabled : function(cmd){
-      if (cmd == "cmd_delete") return (list.selectedItem != null);
-      return false;
-    },
-    doCommand : function(cmd){
-      list.removeItemAt(list.selectedIndex);
-    },
-    onEvent : function(evt){ }
-  };
-
-  list.controllers.appendController(listController);
-}
-</script>
-
-<listbox id="theList">
-  <listitem label="Océan"/>
-  <listitem label="Désert"/>
-  <listitem label="Jungle"/>
-  <listitem label="Marécage"/>
-</listbox>
-
-</window>
-
-

Le contrôleur listController implémente les quatre fonctions décrites plus haut. La méthode supportsCommand renvoie 'true' pour la commande 'cmd_delete', qui est le nom de la commande utilisée lorsque l'item de menu « Supprimer » est sélectionné. Pour les autres commandes, 'false' est renvoyé puisque le contrôleur ne gère aucune autre commande. Si vous voulez gérer d'autres commandes, vous devrez les tester ici, car il est fréquent d'un simple contrôleur gère de multiples commandes apparentées.

-

La méthode isCommandEnabled renvoie 'true' si la commande est activée. Dans le cas présent, nous vérifions s'il y a un item sélectionné dans la liste et renvoyons 'true' si c'est le cas. S'il n'y a pas de sélection, 'false' est renvoyé. Si vous effacez toutes les lignes dans l'exemple, la commande « Supprimer » deviendra inactive. Vous devrez cliquer sur la liste pour mettre à jour le menu dans cet exemple simple. La méthode doCommand sera appelée lorsque l'item de menu « Supprimer » sera sélectionné, et elle provoquera l'effacement de la ligne sélectionnée dans la liste. Rien ne doit se produire pour la méthode onEvent, aussi nous n'ajouterons pas de code pour celle-ci.

-

Surcharger un contrôleur par défaut

-

Nous attachons ce contrôleur à l'élément listbox en appelant la méthode appendController des objets contrôleurs de la liste. L'objet controller a un certain nombre de méthodes qui peuvent être utilisées pour manipuler les contrôleurs. Par exemple, il possède une méthode insertControllersAt qui insère un contrôleur dans un élément avant les autres. Elle peut être utile pour surcharger des commandes. Par exemple, le code suivant désactivera le collage du presse-papiers dans un champ de saisie.

-
var tboxController = {
-  supportsCommand : function(cmd){ return (cmd == "cmd_paste"); },
-  isCommandEnabled : function(cmd){ return false; },
-  doCommand : function(cmd){ },
-  onEvent : function(evt){ }
-};
-
-document.getElementById("tbox").controllers.insertControllerAt(0,tboxController);
-
-

Dans cet exemple, nous insérons le contrôleur à l'index '0', c'est-à-dire avant tous les autres. Le nouveau contrôleur supporte la commande 'cmd_paste' et indique qu'elle est désactivée. Le contrôleur par défaut de textbox ne sera jamais appelé parce que le répartiteur de commande trouve un contrôleur avant celui-ci, prenant en charge la commande en premier.

-
-

Dans la section suivante, nous allons voir comment mettre à jour les commandes.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/contenu_anonyme/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/contenu_anonyme/index.html deleted file mode 100644 index 92fc00f9e5..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/contenu_anonyme/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Contenu anonyme -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Contenu_anonyme -tags: - - Tutoriel_XUL - - Tutoriels - - XBL - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Anonymous_Content ---- -
-

« PrécédentSuivant »

-
- -

Dans cette section, nous allons voir comment créer un contenu avec XBL (eXtended Binding Language).

- -

Le contenu XBL

- -

XBL peut être utilisé pour ajouter automatiquement un ensemble d'éléments à l'intérieur d'un autre élément. Le fichier XUL a uniquement besoin de spécifier l'élément externe tandis que l'élément interne est décrit dans un fichier XBL. C'est utile pour créer un élément graphique simple qui est construit à partir d'un ensemble d'autres éléments, mais qui peut être référencé comme un seul élément graphique. Des mécanismes sont fournis pour ajouter des attributs aux éléments internes qui étaient spécifiés dans l'élément externe.

- -

Exemple de déclaration d'une barre de défilement

- -

L'exemple ci-dessous montre comment une barre de défilement pourrait être déclarée (il a été un peu simplifié par rapport à la réalité) :

- -
<bindings xmlns="http://www.mozilla.org/xbl"
-          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <binding id="scrollbarBinding">
-    <content>
-      <xul:scrollbarbutton type="decrement"/>
-      <xul:slider flex="1">
-        <xul:thumb/>
-      </xul:slider>
-      <xul:scrollbarbutton type="increment"/>
-    </content>
-  </binding>
-</bindings>
-
- -

Ce fichier contient une seule liaison, déclarée avec l'élément binding. L'attribut id doit être déclaré avec l'identifiant de la liaison. De cette façon il y est fait référence au travers de la propriété CSS -moz-binding.

- -

La balise content est utilisée pour déclarer le contenu anonyme qui sera ajouté à la barre de défilement. Tous les éléments à l'intérieur de la balise content seront ajoutés au sein de l'élément auquel la liaison est liée. Cette liaison sera vraisemblablement liée à une barre de défilement, bien qu'elle puisse ne pas l'être. Chaque élément dont la propriété CSS -moz-binding est déclarée avec l'URL de la liaison, va l'utiliser.

- -

L'utilisation de la liaison ci-dessus a pour résultat que la ligne de XUL ci-dessous soit interprétée comme suit, en supposant que la barre de défilement est liée au XBL ci-dessus :

- -
<scrollbar>
-
-devient :
-
-<scrollbar>
-  <xul:scrollbarbutton type="decrement"/>
-    <xul:slider flex="1">
-      <xul:thumb/>
-    </xul:slider>
-  <xul:scrollbarbutton type="increment"/>
-</scrollbar>
-
- -

Les éléments au sein de la balise content sont ajoutés anonymement à la barre de défilement. Bien que le contenu anonyme soit affiché à l'écran, vous ne pouvez pas y accéder à l'aide d'un script par la voie normale. Dans XUL, c'est comme s'il n'y avait qu'un seul élément, bien qu'il se compose en réalité de plusieurs éléments.

- -

Si vous observez une barre de défilement dans une fenêtre Mozilla, vous verrez qu'elle est composée d'un bouton en forme de flèche, d'une zone de coulissement, d'une poignée à l'intérieur et d'un second bouton en forme de flèche à la fin, ce sont les éléments qui apparaissent dans le contenu XBL ci-dessus. Ces éléments pourraient à leur tour être liés à d'autres liaisons qui utilisent les éléments XUL de base. Notez que les éléments de contenu ont besoin de l'espace de nommage de XUL (ils apparaissent précédés de xul:), parce que ce sont des éléments de XUL et qu'ils ne sont pas valides dans XBL. Cet espace de nommage a été déclaré dans la balise bindings. Si vous n'utilisez pas l'espace de nommage sur les éléments de XUL, Mozilla supposera que ce sont des éléments XBL et il ne les comprendra pas, et vos éléments ne fonctionneront pas correctement.

- -

Exemple d'un champ de saisie de nom de fichier

- -

Un autre exemple, cette fois pour un champ dans lequel vous pourriez entrer un nom de fichier :

- -
<binding id="fileentry">
-  <content>
-    <textbox/>
-    <button label="Parcourir..."/>
-  </content>
-</binding>
-
- -

L'attachement de cette liaison sur un élément lui fera contenir un champ de saisie de texte, suivi d'un bouton 'Parcourir...'. Ce contenu interne est créé anonymement et ne peut être vu en utilisant le DOM (Modèle Objet de Document).

- -

Remplacement de l'élément de liaison

- -

Le contenu anonyme est créé automatiquement chaque fois qu'une liaison est attachée à un élément. Si vous placez des éléments fils à l'intérieur du contenu XUL, ils vont écraser les éléments fournis par la liaison. Par exemple, prenez cet extrait XUL, en supposant qu'il soit lié à la barre de défilement XBL de tout à l'heure :

- -
<scrollbar/>
-
-<scrollbar>
-  <button label="Écraser"/>
-</scrollbar>
-
- -

Puisque la première barre de défilement n'a pas de contenu qui lui est propre, celui-ci sera généré à partir de la définition de la liaison du fichier XBL. La seconde barre de défilement a son propre contenu donc elle l'utilisera à la place du contenu XBL, ce qui a pour résultat quelque chose qui ne ressemble plus à une barre de défilement. Notez que beaucoup d'éléments natifs de construction, comme les barres de défilement, ont leur définition XBL stockée dans des fichiers situés dans le répertoire "bindings" du paquetage toolkit.jar.

- -

Ce mécanisme s'applique seulement aux éléments définis à l'intérieur de la balise content. Les propriétés, les méthodes et d'autres aspects d'XBL restent disponibles, que le contenu provienne d'XBL ou que XUL fournisse son propre contenu.

- -

Utilisation de l'élément children

- -

Il peut y avoir des fois où vous souhaitez que soient montrés à la fois le contenu XBL et celui fournit par le fichier XUL. Il vous suffit d'utiliser l'élément children. Les éléments fils dans XUL sont ajoutés en lieu et place de l'élément children. C'est pratique pour créer des éléments graphiques de menu personnalisés. Par exemple, une version simplifiée d'un élément menulist éditable, pourrait être créée comme ceci :

- -
XUL:
-
-<menu class="dropbox">
-  <menupopup>
-    <menuitem label="1000"/>
-    <menuitem label="2000"/>
-  </menupopup>
-</menu>
-
-CSS:
-
-menu.dropbox {
-    -moz-binding:  url('chrome://example/skin/example.xml#dropbox');
-}
-
-XBL:
-
-<binding id="dropbox">
-  <content>
-    <children/>
-    <xul:textbox flex="1"/>
-    <xul:button src="chrome://global/skin/images/dropbox.jpg"/>
-  </content>
-</binding>
-
- -

Cet exemple crée un champ de saisie suivi d'un bouton. Le menupopup sera ajouté au contenu à l'emplacement spécifié par l'élément children. Notez que pour les fonctions du DOM, le contenu apparaîtra comme s'il était dans le fichier XUL, ainsi le menupopup sera un fils du menu. Le contenu XBL est caché ainsi le développeur d'une application sous XUL n'a même pas besoin de savoir qu'il est là.

- -

Le contenu résultant serait :

- -
<menu class="dropbox">
-  <menupopup>
-    <menuitem label="1000"/>
-    <menuitem label="2000"/>
-  </menupopup>
-  <textbox flex="1"/>
-  <button src="chrome://global/skin/images/dropbox.jpg"/>
-</menu>
-
- -

Attribut includes

- -

Dans certains cas, vous souhaiterez n'inclure que des types de contenus spécifiques et non d'autres. Ou bien, vous souhaiterez placer différents types de contenus à différents endroits. L'attribut includes peut être utilisé pour n'autoriser que certains éléments à apparaître dans le contenu. Sa valeur doit être déclarée pour un simple nom de balise, ou pour une liste de balises séparées par des barres verticales (Le symbole |).

- -
<children includes="button">
- -

Cette ligne va ajouter tous les boutons qui sont fils de l'élément lié en lieu et place de la balise children. Les autres éléments ne correspondront pas avec cette balise. Vous pouvez placer plusieurs éléments children dans une liaison pour placer différents types de contenus à différents endroits. Si un élément dans XUL ne correspond pas aux éléments children, cet élément (et les autres n'y correspondant pas) sera utilisé à la place du contenu lié.

- -

Voici un autre exemple. Disons que nous voulions créer un élément graphique qui affiche une image avec un bouton de zoom "Agrandir" et un bouton de zoom "Réduire" de part et d'autre. Il pourrait être créé avec une boîte qui contiendrait l'image et deux boutons. L'élément image doit être placé à l'extérieur du fichier XBL car il sera différent selon l'usage.

- -
XUL:
-
-<box class="zoombox">
-  <image src="images/happy.jpg"/>
-  <image src="images/angry.jpg"/>
-</box>
-
-XBL:
-
-<binding id="zoombox">
-  <content>
-    <xul:box flex="1">
-      <xul:button label="Agrandir"/>
-      <xul:box flex="1" style="border: 1px solid black">
-        <children includes="image"/>
-      </xul:box>
-      <xul:button label="Réduire"/>
-    </xul:box>
-  </content>
-</binding>
-
- -

Les fils explicites dans le fichier XUL seront placés à l'endroit où se trouve la balise children. Il y a deux images, ainsi toutes les deux seront ajoutées à côté de l'une et l'autre. Cela a pour conséquence un affichage équivalent au code suivant :

- -
<binding id="zoombox">
-  <content>
-    <xul:box flex="1">
-      <xul:button label="Agrandir"/>
-      <xul:box flex="1" style="border: 1px solid black">
-        <image src="images/happy.jpg"/>
-        <image src="images/angry.jpg"/>
-      </xul:box>
-      <xul:button label="Réduire"/>
-    </xul:box>
-  </content>
-</binding>
-
- -

D'un point de vue du DOM, les éléments fils sont toujours à leur emplacement original. En effet, la boîte XUL externe a deux fils qui sont les deux images. La boîte interne avec la bordure a un fils, la balise children. C'est une distinction importante lorsqu'on utilise le DOM avec XBL. Elle s'applique également aux règles du sélecteur CSS.

- -

Les éléments fils multiples

- -

Vous pouvez également utiliser plusieurs éléments children et avoir certains éléments placés à un endroit et d'autres éléments placés à un autre. En ajoutant l'attribut includes contenant une liste de nom de balises séparés par des barres verticales, vous pouvez placer uniquement les éléments correspondants à cet endroit. Par exemple, le fichier XBL suivant va faire apparaître des libellés et des boutons à un endroit différent des autres éléments :

- -

Exemple 1 : Source

- -
<binding id="navbox">
-  <content>
-    <xul:vbox>
-      <xul:label value="Libellés et boutons"/>
-      <children includes="label|button"/>
-    </xul:vbox>
-    <xul:vbox>
-      <xul:label value="Autres éléments"/>
-      <children/>
-    </xul:vbox>
-  </content>
-</binding>
-
- -

Le premier élément children n'inclut que les éléments label et button, comme indiqué dans son attribut includes. Le second élément children, parce qu'il n'a pas d'attribut includes, ajoute tous les éléments restants.

- -
-

Dans la prochaine section, nous verrons comment des attributs peuvent être hérités dans le contenu anonyme.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251ation_d'un_assistant/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251ation_d'un_assistant/index.html" deleted file mode 100644 index 8ca985799e..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251ation_d'un_assistant/index.html" +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Création d'un assistant -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Création_d'un_assistant -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Wizard ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Beaucoup d'applications utilisent des assistants pour aider l'utilisateur dans des tâches complexes. XUL fournit un moyen de créer des assistants facilement.

- -

L'élément wizard

- -

Un assistant est un type spécial de boîte de dialogue, contenant un certain nombre de pages. Des boutons de navigation apparaissent en bas de la boîte de dialogue pour passer d'une page à l'autre. Les assistants sont habituellement utilisés pour aider l'utilisateur à effectuer des tâches complexes. Chaque page contient une seule question ou un ensemble de questions associées. À la dernière page, l'opération est effectuée.

- -

XUL fournit un élément wizard qui peut être utilisé pour créer des assistants. Le contenu à l'intérieur de l'élément wizard inclut tout le contenu de chaque page. Les attributs placés sur l'élément wizard sont utilisés pour contrôler la navigation. Quand vous créez un assistant, utilisez la balise wizard à la place de la balise window.

- -
Notez que pour le moment les assistants ne fonctionnent correctement qu'à partir d'URLs chrome.
- -

Un assistant consiste en un ensemble de sections, bien que la mise en page exacte variera pour chaque plateforme. L'aspect visuel de l'assistant s'adaptera à la plateforme de l'utilisateur. Une mise en page type inclura un titre en haut, un ensemble de boutons de navigations en bas, et le contenu de la page entre les deux.

- -

Le titre du haut est créé en utilisant l'attribut title comme on le ferait pour les fenêtres normales. Les boutons de navigation sont créés automatiquement. Les pages de l'assistant sont créées en utilisant l'élément wizardpage. Vous pouvez y placer tout contenu que vous voulez.

- -

Exemple d'assistant

- -

Exemple 1 : Source

- -
<?xml version="1.0" encoding="iso-8859-1"?>
-
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
-<wizard id="example-window" title="Assistant de sélection de chien"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-  <wizardpage>
-    <description>
-      Cet assistant vous aidera à sélectionner le type de chien qui sera le mieux pour vous.
-    </description>
-    <label value="Pourquoi voulez vous un chien ?"/>
-    <menulist>
-      <menupopup>
-        <menuitem label="Pour faire peur aux gens"/>
-        <menuitem label="Pour se débarrasser d'un chat"/>
-        <menuitem label="J'ai besoin d'un meilleur ami"/>
-      </menupopup>
-    </menulist>
-  </wizardpage>
-
-  <wizardpage description="Détails sur le chien">
-    <label value="Fournissez plus de détails sur le chien que vous désirez :"/>
-    <radiogroup>
-      <caption label="Taille"/>
-      <radio value="small" label="Petit"/>
-      <radio value="large" label="Grand"/>
-    </radiogroup>
-    <radiogroup>
-      <caption label="Sexe"/>
-      <radio value="male" label="Male"/>
-      <radio value="female" label="Femelle"/>
-    </radiogroup>
-  </wizardpage>
-
-</wizard>
-
- -
Image:xultu_wizard1.jpg
- -

L'assistant a deux pages, une qui a une liste déroulante et une autre qui a un ensemble de boutons radios. L'assistant sera formaté automatiquement, avec un titre en haut et un ensemble de boutons le long du bas de la fenêtre. L'utilisateur peut naviguer entre les pages de l'assistant avec les boutons 'Précédent' et 'Suivant'. Ces boutons s'activeront ou se désactiveront eux-mêmes aux moments appropriés. De plus, sur la dernière page, le bouton 'Terminer' apparaîtra. Tout ceci est automatique, aussi, vous n'avez rien à faire pour manipuler les pages.

- -

L'attribut description peut être éventuellement placé sur l'élément wizardpage pour fournir un sous-titre pour la page concernée. Dans l'exemple du dessus, il est placé sur la seconde page, mais pas sur la première.

- -

Gestion des changements de page

- -

Généralement, vous souhaitez réaliser une action après que le bouton 'Terminer' ait été pressé. Vous pouvez mettre un attribut onwizardfinish sur l'élément wizard pour accomplir cette tâche. Spécifiez-y un script qui exécutera ce que vous voulez et qui renverra 'true'. Le script peut être utilisé pour sauvegarder les informations que l'utilisateur a saisi dans l'assistant. Par exemple :

- -
<wizard id="example-window" title="Assistant de sélection de chien"
-  onwizardfinish="return saveDogInfo();"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
- -

Quand l'utilisateur clique sur le bouton 'Terminer', la fonction saveDogInfo définie dans un script sera appelée pour sauvegarder les informations saisies. Si la fonction renvoie 'true', l'assistant se fermera. Si elle renvoie 'false', alors l'assistant ne se fermera pas, ce qui pourrait signifier par exemple que la fonction saveDogInfo a rencontré une saisie invalide.

- -

Il existe également les attributs similaires onwizardback, onwizardnext et onwizardcancel qui sont appelés quand les boutons 'Précédent', 'Suivant' et 'Annuler' sont respectivement pressés. Ces fonctions sont appelées quelque soit la page en cours affichée.

- -

Pour appeler un code différent en fonction de la page où vous êtes, utilisez les attributs onpagerewound ou onpageadvanced sur un élément wizardpage. Ils fonctionnent de manière similaire aux autres fonctions, excepté que vous pouvez utiliser un script différent pour chaque page. Cette méthode vous permet de valider les informations saisies sur chaque page avant que l'utilisateur ne continue.

- -

Une troisième méthode est l'utilisation des attributs onpagehide et onpageshow sur l'élément wizardpage. Ils sont appelés lorsque la page est cachée ou affichée, indifféremment du bouton pressé (excepté quand le bouton 'Annuler' est pressé ; vous devez utiliser onwizardcancel pour le vérifier).

- -

Ces trois méthodes devraient fournir suffisamment de souplesse pour gérer la navigation comme vous le souhaitez. Ce qui suit est un résumé des fonctions d'attributs appelées quand l'utilisateur presse 'Suivant', dans l'ordre dans lequel elles sont vérifiées. Dés que l'une renvoie 'false', la navigation est annulée.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributPlacé sur la baliseQuand est-il appelé ?
pagehidewizardpageAppelé sur la page que l'utilisateur quitte.
pageadvancedwizardpageAppelé sur la page que l'utilisateur quitte.
wizardnextwizardAppelé sur l'assistant.
pageshowwizardpageAppelé sur la page sur laquelle l'utilisateur entre.
- -

Un processus similaire existe pour le bouton 'Précédent'.

- -
À chaque fois que vous utiliserez une fonction dans un des événements ci-dessus, tel que pageadvanced, vous devrez utiliser return NomFonct() au lieu de simplement appeler NomFonct(). - -
<wizardpage pageadvanced='return NomFonct()'></wizardpage>
-
- -
-

Dans la prochaine section, nous verrons des fonctionnalités supplémentaires sur les assistants.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251ation_d'un_programme_d'installation/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251ation_d'un_programme_d'installation/index.html" deleted file mode 100644 index c83ee8d774..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251ation_d'un_programme_d'installation/index.html" +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Création d'un programme d'installation -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Création_d'un_programme_d'installation -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Creating_an_Installer ---- -

 

- -
-

« PrécédentSuivant »

-
- -
NdT : Attention, cette section décrit le mécanisme XPInstall propre à la suite Mozilla et à des versions anciennes de Mozilla Firefox. Pour les versions récentes de Mozilla Firefox, ce mode d'installation n'est plus le même, mais il n'est pas encore décrit dans ce tutoriel. Voir comment faire des extensions pour firefox sur xulfr.org.
- -

Cette section va décrire le paquetage d'une application XUL dans un programme d'installation.

- -

Paquetages d'installation XPI

- -

Mozilla propose un mécanisme qui peut être utilisé pour empaqueter des fenêtres XUL, des scripts, des thèmes graphiques et d'autres fichiers dans un seul installateur. Il suffit de placer le fichier d'installation quelque part où les utilisateurs pourront le télécharger. Un simple script peut être utilisé pour assurer le téléchargement et l'installation du paquetage. Ce mécanisme est appelé XPInstall (Cross Platform Install).

- -

Les installateurs XPI sont empaquetés dans des fichiers JAR. À l'intérieur d'un fichier JAR, vous pouvez ajouter toutes sortes de fichiers que vous voulez voir installés. De plus, les installateurs doivent contenir un script (un fichier nommé install.js) qui décrit le processus d'installation. Ce script a accès à quelques fonctions d'installation qui peuvent être employées pour installer des fichiers et des composants.

- -

Les fichiers d'installation JAR ont typiquement l'extension .xpi (prononcez zippy) pour les distinguer des autres fichiers d'archives. Les installateurs seront habituellement utilisés pour installer des composants Mozilla tels que des thèmes graphiques, des extensions et d'autres paquetages.

- -

Il y a plusieurs étapes pour démarrer et installer les composants. Elles sont décrites pas à pas ci dessous :

- -
    -
  1. Créer une page Web à partir de laquelle l'utilisateur peut charger l'application à installer. La page doit contenir un déclencheur d'installation qui est un petit script lançant l'installation.
    2. -
  2. Une boîte de dialogue présente à l'utilisateur le paquetage qui doit être installé. Il est possible pour le déclencheur de lancer de multiples installations. Dans ce cas, elles seront présentées dans une liste. L'utilisateur doit choisir de continuer ou d'annuler.
    3. -
  3. Si l'utilisateur choisit de continuer, le fichier d'installation XPI est téléchargé. Une barre de progression est affichée durant le processus.
    4. -
  4. Le fichier install.js est extrait de l'archive et exécuté. Le script va appeler les fonctions d'installation qui indiqueront quels fichiers de l'archive doivent être installés.
    5. -
  5. Une fois le script terminé, le nouveau paquetage a été installé. Si de multiples paquetages doivent être installés, leurs scripts se lanceront l'un après l'autre.
    6. -
- -

Déclencheurs d'installation

- -

Comme indiqué ci-dessus, le processus d'installation est lancé par un déclencheur d'installation. Il requiert l'utilisation de l'objet global spécial InstallTrigger. Il contient un certain nombre de méthodes qui peuvent être utilisées pour démarrer une installation. Vous pouvez utiliser cet objet dans un contenu local ou à distance, ce qui signifie qu'il est adapté pour un téléchargement à partir d'un site Web.

- -

Créons un exemple de déclencheur d'installation. Il nécessite l'utilisation de la fonction InstallTrigger.install(). Cette fonction a deux arguments, le premier est la liste des paquetages à installer, et le second est la référence à une fonction de rappel qui sera appelée lorsque l'installation est terminée. Voici un exemple :

- -
function doneFn ( name , result ){
-  alert("Le paquetage " + name + " a été installé avec un résultat de " + result);
-}
-
-var xpi = new Object();
-xpi["Calendar"] = "calendar.xpi";
-InstallTrigger.install(xpi,doneFn);
-
- -

Premièrement, nous définissons la fonction doneFn() qui sera appelée lorsque l'installation est terminée. Bien entendu, vous pouvez nommer cette fonction comme vous le souhaitez. Cette fonction a deux arguments. Le premier argument est le nom du paquetage qui vient juste d'être installé. Celui ci est important si vous installez de multiples composants. Le second argument est un code de résultat. Un code de valeur '0' signifie que l'installation s'est terminée avec succès. Si le code de résultat n'est pas nul, une erreur a eu lieu et la valeur représente un code d'erreur. Ici, la fonction doneFn() affiche simplement une boîte d'alerte à l'utilisateur.

- -

Ensuite, nous créons un tableau xpi qui contient le nom ('Calendar') et l'URL ('calendar.xpi') du programme d'installation. Vous pouvez ajouter une ligne similaire pour chaque paquetage que vous souhaitez installer. Finalement, nous appelons la fonction d'installation.

- -

Lorsque cette portion de script sera exécutée, le fichier calendar.xpi sera installé.

- -
-

Notre exemple de recherche de fichiers

- -

Essayons ce script avec notre exemple de recherche de fichiers.

- -
function doneFn ( name , result ){
-  if (result) alert("L'erreur suivante a eu lieu: " + result);
-}
-
-var xpi = new Object();
-xpi["Find Files"] = "findfile.xpi";
-InstallTrigger.install(xpi,doneFn);
-
-
- -

L'archive XPI

- -
Note : Si vous créez une nouvelle application XULRunner, extension, ou thème, consultez la page Bundles.
- -

Le fichier d'installation XPI doit obligatoirement contenir au minimum un fichier appelé install.js qui est un fichier JavaScript exécuté lors de l'installation. Les autres fichiers sont les fichiers à installer. Ces derniers sont typiquement placés dans des répertoires de l'archive mais ils n'ont pas lieu de l'être. Pour des fichiers chrome, ils devraient être structurés comme le répertoire chrome.

- -

Souvent, les seuls fichiers trouvés dans une archive XPI sont le script d'installation (install.js) et un fichier JAR. Ce fichier JAR contient tous les fichiers utilisés par votre application. Les composants de Mozilla sont installés de cette manière.

- -

Parce que les fichiers XPI ne sont rien d'autres que des fichiers ZIP, vous pouvez les créer en utilisant un utilitaire zip (NdT : les fichiers JAR sont également des fichiers ZIP).

- -
-

Notre exemple de recherche de fichiers

- -

Pour notre exemple de recherche de fichiers, nous créerons une structure dans l'archive comme ce qui suit :

- -
install.js
-findfile
-  content
-    contents.rdf
-    findfile.xul
-    findfile.js
-  skin
-    contents.rdf
-    findfile.css
-  locale
-    contents.rdf
-    findfile.dtd
-
- -

Un répertoire a été ajouté pour chaque partie du paquetage, pour le contenu, pour le thème graphique et pour la localisation. Des fichiers 'contents.rdf' ont également été ajoutés car ils sont nécessaires pour l'enregistrement des fichiers chrome.

-
- -
-

Dans la section suivante, nous aborderons le script d'installation.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

- -

 

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_des_bo\303\256tes_de_dialogue/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_des_bo\303\256tes_de_dialogue/index.html" deleted file mode 100644 index cc2a63e092..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_des_bo\303\256tes_de_dialogue/index.html" +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Créer des boîtes de dialogue -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Créer_des_boîtes_de_dialogue -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Creating_Dialogs ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Une application XUL requiert souvent l'affichage de boîtes de dialogue. Cette section décrit comment les construire.

- -

Création d'une boîte de dialogue

- -

La fonction openDialog() est utilisée pour ouvrir une fenêtre. Une fonction apparentée est open(). Cette fonction a plusieurs différences importantes. Au lieu d'une fenêtre (window), elle affiche une boîte de dialogue (dialog), ce qui implique qu'elle demande quelque chose à l'utilisateur. Elle peut avoir des différences subtiles dans sa manière de fonctionner et d'apparaître à l'utilisateur suivant les différentes plateformes.

- -

De plus, la fonction openDialog() peut prendre des arguments additionnels en plus des trois premiers habituels. Ces arguments sont passés à la nouvelle boîte de dialogue et placés dans un tableau stocké dans la propriété arguments de la nouvelle fenêtre. Vous pouvez passer autant d'arguments que nécessaire. C'est un moyen pratique de fournir des valeurs par défaut aux champs de la boîte de dialogue.

- -
var somefile=document.getElementById('enterfile').value;
-
-window.openDialog("chrome://findfile/content/showdetails.xul","showmore",
-                  "chrome",somefile);
-
- -

Dans cet exemple, la boîte de dialogue showdetails.xul sera affichée. L'argument 'somefile' provenant d'un élément d'id 'enterfile' lui est transmis. Dans un script utilisé par la boîte de dialogue, nous pouvons alors faire référence à l'argument en utilisant la propriété arguments de la fenêtre. Par exemple :

- -
var fl = window.arguments[0];
-
-document.getElementById('thefile').value = fl;
-
- -

C'est un moyen efficace de passer des valeurs à la nouvelle fenêtre. Vous pouvez renvoyer des valeurs de la fenêtre ouverte vers la fenêtre originelle de deux manières. Première méthode : vous pouvez utiliser la propriété window.opener qui contient une référence à la fenêtre qui a ouvert la boîte de dialogue. Seconde méthode : vous pouvez passer une fonction ou un objet en argument, puis appeler la fonction ou modifier l'objet dans la boîte de dialogue ouverte.

- -
Note : openDialog() nécessite un privilège UniversalBrowserWrite. Cela signifie que cette méthode ne fonctionnera pas sur des sites distants ; pour ces sites, utilisez la méthode window.open() à la place.
- -

L'élément dialog

- -

L'élément dialog doit être utilisé à la place de l'élément window lors de la création d'une boîte de dialogue. Il offre la possibilité de construire jusqu'à quatre boutons au bas de la boîte de dialogue, pour « OK », « Annuler », etc. Vous n'avez pas besoin d'inclure le code XUL pour chaque bouton mais vous devez fournir le code à exécuter quand l'utilisateur les presse. Ce mécanisme est nécessaire car les différentes plateformes ont un ordre d'affichage spécifique de ces boutons.

- -

Exemple de boîte de dialogue

- -

Exemple 1: Source Voir

- -
<?xml version="1.0" encoding="iso-8859-1"?>
-<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
-
-<dialog id="donothing" title="Ne fait rien"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        buttons="accept,cancel"
-        ondialogaccept="return doOK();"
-        ondialogcancel="return doCancel();">
-
-<script>
-function doOK(){
-  alert("Vous avez appuyé sur OK !");
-  return true;
-}
-
-function doCancel(){
-  alert("Vous avez appuyé sur Annuler !");
-  return true;
-}
-</script>
-
-<description value="Veuillez sélectionner un bouton"/>
-
-</dialog>
-
- -

Vous pouvez placer tous les éléments que vous souhaitez dans une boîte de dialogue. L'élément dialog a des attributs que les fenêtres n'ont pas. L'attribut buttons, par exemple, est utilisé pour spécifier quels boutons doivent apparaître dans la boîte de dialogue. Les valeurs suivantes peuvent être utilisées en les séparant par des virgules :

- - - -

Vous pouvez exécuter du code lors de l'appui des boutons en utilisant les attributs ondialogaccept, ondialogcancel, ondialoghelp et ondialogdisclosure. Si vous essayez l'exemple ci-dessus, vous remarquerez que la fonction doOK est appelée quand le bouton 'OK' est pressé et que la fonction doCancel est appelée quand le bouton 'Annuler' est pressé.

- -

Les deux fonctions doOK et doCancel renvoient 'true', ce qui indique que la boîte de dialogue doit être fermée. Si la valeur 'false' était renvoyée, la boîte de dialogue resterait ouverte. Ce fonctionnement pourrait être utilisé dans le cas où une valeur invalide serait entrée dans un champ de la boîte de dialogue.

- -

Voici d'autres attributs utiles :

- - - -
Note : Les attributs label sont nécessaires pour les sites distants et ont probablement été omis dans les exemples précédents à cause du bug 224996.
- -

Exemple de dialogue avec plus de fonctionnalités

- -
<?xml version="1.0" encoding="iso-8859-1?>
-<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
-
-<dialog id="myDialog" title="Mon dialogue"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        onload="window.sizeToContent();"
-        buttons="accept,cancel"
-        buttonlabelaccept="Choix favori"
-        buttonaccesskeyaccept="S"
-        ondialogaccept="return doSave();"
-        buttonlabelcancel="Annuler"
-        buttonaccesskeycancel="n"
-        ondialogcancel="return doCancel();">
-
-<script>
-function doSave(){
- //faireTraitement()
- return true;
-}
-function doCancel(){
-  return true;
-}
-</script>
-
-<dialogheader title="Mon dialogue" description="Exemple de dialogue"/>
-<groupbox flex="1">
-  <caption label="Sélectionnez votre fruit préféré"/>
-  <radio id="orange" label="Des oranges car elles sont juteuses"/>
-  <radio id="violet" selected="true" label="Des frises à cause de leur couleur"/>
-  <radio id="yellow" label="Des bananes car elles sont déjà emballées"/>
-</groupbox>
-
-</dialog>
-
- -

Les éléments correspondants aux boutons sont accessibles en JavaScript par le script suivants :

- -
// le bouton d'acceptation
-var acceptButt = document.documentElement.getButton("accept")
-
- -

Autres exemples

- -

D'autres exemples sont disponibles dans Dialogues et invites.

- -
-

Dans la prochaine section, nous allons voir comment ouvrir des boîtes de dialogue de sélection de fichiers.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_un_th\303\250me/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_un_th\303\250me/index.html" deleted file mode 100644 index 55430426d5..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_un_th\303\250me/index.html" +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Créer un thème -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Créer_un_thème -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Skin ---- -

 

- -
-

« PrécédentSuivant »

-
- -
-

Cette documentation n'a pas été mise à jour pour Firefox Quantum. Il n'y aucune garantie que la modification du fichier userChrome.css fonctionne encore d'une version à l'autre de Firefox. Celle-ci pourrait également provoquer la survenue de bugs difficiles à diagnostiquer. À utiliser à vos risques et périls !

-
- -

Cette section décrit comment créer un thème simple. Nous ne l'appliquerons qu'à la fenêtre de recherche de fichiers.

- -

Un thème simple

- -

L'image ci-dessous montre la boîte de dialogue de recherche de fichiers actuelle. Créons un thème que nous pourrons lui appliquer. Normalement, un thème doit s'appliquer à l'application entière, mais, pour plus de facilité, nous allons nous concentrer sur la boîte de dialogue de recherche de fichiers. Pour cette raison, nous n'allons modifier que le fichier 'findfile.css' plutôt que le fichier 'global.css'. Cette section suppose que vous démarriez avec le thème Classic. Si vous le souhaitez, faites une copie des fichiers utilisés par la boîte de dialogue de recherche de fichiers avant de les modifier.

- -

Image:xultu_cskin1.jpg

- -
Note du traducteur : Pour les versions récentes de mozilla (> 1.6) et de firefox (>0.8), avec le fichier findfile.css tel qu'il est, il se peut que vous n'obteniez pas un design identique à ce que montre l'image. En effet, dans le thème classic, des styles -moz-appearance ont été ajoutés depuis aux différents éléments, leur permettant d'avoir le même aspect que les éléments natifs de l'interface graphique utilisée (windows ou kde, macos, etc.). Ce style empêche certains styles d'être appliqués correctement. Pour pouvoir modifier complètement l'apparence des éléments utilisés dans notre exemple et afin de suivre le tutoriel, il a été rajouté le code suivant dans la feuille de styles de l'exemple : - -
tab, button, menulist, menubar,menupopup,toolbar,tabpanels {
-   -moz-appearance:none;
-}
-
-
- -

Vous devez créer un fichier 'findfile.css' dans un thème personnalisé, ou vous pouvez placer ce fichier temporairement dans le répertoire "content" et y faire référence en utilisant une directive de la feuille de styles. Vous pouvez modifier le fichier 'findfile.css' existant directement pour voir à quoi cela ressemble, ou vous pouvez créer un thème personnalisé et y faire un lien.

- -

Création d'un paquetage de thème personnalisé

- -

Pour créer un thème, faites ce qui suit : (si vous utilisez Firefox 1.5 ou supérieur, consultez plutôt les fichiers manifest)

- -
    -
  1. Créez un répertoire quelque part où vous placerez les fichiers du thème.
    2. -
  2. Copiez un fichier manifeste (contents.rdf) du thème Classic ou Modern dans ce nouveau répertoire.
    3. -
  3. Modifiez les références dans le fichier manifeste à un nom personnalisé pour votre thème. Par exemple, changez les références de 'classic/1.0' vers 'blueswayedshoes/1.0'.
    4. -
  4. Ajoutez une ligne de la forme suivante au fichier 'chrome/installed-chrome.txt' :
    - skin,install,url,file:///stuff/blueswayedshoes/
    - où la dernière partie pointe vers le répertoire que vous avez créé. Vérifiez bien que vous avez mis un slash à la fin.
    5. -
- -

Copiez le fichier 'findfile.css' original dans le nouveau répertoire. Nous l'utiliserons comme base pour le nouveau thème. Nous pourrons y faire référence par la suite en utilisant l'URL 'chrome://findfile/skin/findfile.css'.

- -

Ajout de règles de styles

- -

Décidons d'abord quels types de changements nous voulons effectuer. Nous allons faire de simples changements de couleurs, modifier les styles des boutons et modifier un peu l'espacement. Commençons par les menus, les barres d'outils et le panneau global des onglets.

- -

L'ajout des règles de styles suivantes à 'findfile.css' provoquera les changements montrés dans l'image qui suit.

- -
window > box {
-  background-color: #0088CC;
-}
-
-menubar,menupopup,toolbar,tabpanels {
-  background-color: lightblue;
-  border-top: 1px solid white;
-  border-bottom: 1px solid #666666;
-  border-left: 1px solid white;
-  border-right: 1px solid #666666;
-}
-
-caption {
-  background-color: lightblue;
-}
-
- -

Image:xultu_cskin2.jpg

- - - -

La première règle au-dessus (pour window > vbox) spécifie que la boîte enfant de la fenêtre principale a une couleur différente. Ce n'est probablement pas la meilleure façon de procéder. Nous devrions plutôt modifier la fenêtre et plutôt utiliser une classe de style. C'est ce que nous allons faire. De cette manière, nous pourrons modifier le code XUL sans avoir besoin de conserver la boîte comme premier élément enfant de la fenêtre.

- -
CSS:
-.findfilesbox {
-  background-color: #0088CC;
-}
-
-XUL:
-<vbox class="findfilesbox" orient="vertical" flex="100%">
-<toolbox>
-
- -

Arrondis sur les onglets

- -

Ensuite, modifions les onglets. Nous allons rendre l'onglet sélectionné en gras et changer les arrondis sur les onglets.

- -
tab:first-child {
-  -moz-border-radius: 4px 0px 0px 0px;
-}
-
-tab:last-child {
-  -moz-border-radius: 0px 4px 0px 0px;
-}
-
-tab[selected="true"] {
-  color: #000066;
-  font-weight: bold;
-  text-decoration: underline;
-}
-
- -
Image:xultu_cskin3.jpg
- -

Deux règles changent l'apparence normale de l'élément tab. La première met un arrondi sur le premier onglet et la seconde met un arrondi sur le dernier. On utilise ici une règle de styles propre à Mozilla, -moz-border-radius, qui crée des coins arrondis. La bordure supérieure gauche du premier onglet et la bordure supérieure droite du second onglet sont arrondies de quatre pixels et les autres coins sont arrondis de zéro pixels, ce qui équivaut à aucun arrondi. Augmentez ces valeurs pour un arrondi plus prononcé et diminuez-les pour une apparence plus rectangulaire.

- -

La dernière règle ne s'applique qu'aux onglets qui ont leur attribut selected à la valeur 'true'. Elle met le texte d'un onglet sélectionné en gras, souligné et bleu foncé. Notez dans l'image que ce style n'est appliqué qu'au premier onglet, puisqu'il est sélectionné.

- -

Ajout des icônes de barres d'outils

- -

Il est assez difficile de distinguer les boutons de la barre d'outils des commandes du menu. Nous pourrions ajouter des icônes aux boutons pour les rendre plus clairs. L'éditeur Mozilla Composer fournit des icônes pour les boutons ouvrir et sauvegarder que nous utilisons pour gagner du temps. Nous pouvons choisir l'image d'un bouton en utilisant la propriété CSS list-style-image.

- -
#opensearch {
-  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
-  -moz-image-region: rect(48px 16px 64px 0);
-  -moz-box-orient: vertical;
-}
-
-#savesearch {
-  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
-  -moz-image-region: rect(80px 16px 96px 0);
-  -moz-box-orient: vertical;
-}
-
- -
Image:xultu_cskin4.jpg
- -

Mozilla met à disposition une propriété de style spécifique, -moz-image-region, qui permet à un élément d'utiliser une partie d'une image. Vous pouvez vous la représenter comme un découpage de l'image. Vous mettez comme valeur de la propriété une position et une taille comprise dans une image et le bouton n'affichera que cette section de l'image. Cette technique vous permet d'utiliser la même image pour plusieurs boutons et de mettre une portion différente pour chacun d'entre eux. Quand vous avez beaucoup de boutons, avec chacun d'eux des états pour hover, active et disabled, elle fait gagner de l'espace qui serait sinon occupé par plusieurs images. Dans le code ci-dessus, nous utilisons la même image pour tous les boutons, mais nous mettons une portion différente de l'image pour chacun. Si vous regardez cette image (btn1.gif), vous remarquerez qu'elle contient une grille d'images plus petites, de 16 fois 16 pixels chacune.

- -
Note du traducteur : étant donné que l'image en question fait partie de Mozilla Composer, si vous ouvrez l'exemple avec Firefox, vous ne verrez pas les images des boutons, car Mozilla Composer n'est livré qu'avec la suite Mozilla.
- -

La propriété -moz-box-orient est utilisée pour orienter le bouton verticalement, pour que l'image apparaisse au-dessus de son libellé. Cette propriété a la même signification que l'attribut orient. Elle est pratique puisque le thème ne peut pas modifier le code XUL. La plupart des attributs de l'élément box ont des propriétés CSS qui leur correspondent.

- -

Autres modifications

- -

Nous allons maintenant faire quelques changements aux boutons situés en bas de la boîte de dialogue, en réutilisant des icônes de Mozilla pour gagner du temps. Si vous créez votre propre thème, vous aurez besoin de créer de nouvelles icônes ou de copier les icônes dans de nouveaux fichiers. Si vous suivez l'exemple de cette section, copiez juste les fichiers vers votre nouveau thème et modifiez les URL en conséquence.

- -
#find-button {
-  list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg");
-  font-weight: bold;
-}
-
-#cancel-button {
-  list-style-image: url("chrome://global/skin/icons/images/close-button.jpg");
-}
-
-button:hover {
-  color: #000066;
-}
-
- -
Image:xultu_cskin5.jpg
- -

Nous ajoutons des images aux boutons et mettons le texte du bouton « Rechercher » en gras pour indiquer que c'est le bouton par défaut. La dernière règle s'applique aux boutons quand la souris les survole (état hover). Nous mettons une couleur de texte bleu foncé dans ce cas. Finalement, quelques changements mineurs de l'espacement autour des éléments, par l'utilisation de marges :

- -
tabbox {
-  margin: 4px;
-}
-
-toolbarbutton {
-  margin-left: 3px;
-  margin-right: 3px;
-}
-
- -

Après ces changements, la boîte de dialogue de recherche de fichiers apparaît maintenant comme ceci :

- -

Image:xultu_cskin-fin.jpg

- -

Comme vous pouvez le voir, de simples changements des règles de styles apportent une apparence assez différente à la fenêtre de recherche de fichiers. Nous pourrions continuer en modifiant les menus, les poignées sur la barre d'outils et les éléments textbox et checkbox.

- -

Création d'un thème global

- -

Le thème créé ci-dessus est simple et ne s'applique qu'à la boîte de dialogue de recherche de fichiers. Certaines des modifications du thème pourraient être placées dans les feuilles de styles globales (situées dans le répertoire global du thème) pour s'appliquer à toutes les applications. Par exemple, il serait peu cohérent d'avoir des images différentes entre les cases à cocher de la fenêtre de recherche de fichiers et celles d'autres fenêtres. Ce changement devrait vraiment être intégré dans la feuille de styles globale.

- -

Essayez de déplacer les styles CSS de 'findfile.css' dans 'global.css' puis regardez les fenêtres de dialogue de Mozilla (Le visualisateur de cookie est un bon exemple). Vous remarquerez qu'elles ont adopté les règles que nous avons ajoutées. Certaines des règles entrent en conflit avec celles déjà dans les feuilles de styles globales. Par exemple, des règles sont déjà définies pour les boutons, les onglets, etc., et nous avons défini des règles additionnelles pour ces éléments. Quand vous modifiez le thème global, vous devez fusionner les changements avec les règles existantes.

- -

Pour une meilleure adaptation du thème graphique, il vaut mieux déclarer les règles de styles liées à l'apparence dans le répertoire global plutôt que dans des fichiers de styles séparés. Les couleurs, les polices de caractère et l'apparence générale des composants graphiques doivent y être inclus. Si vous modifiez la couleur d'un élément dans un fichier de thème local (comme 'findfile.css'), la fenêtre de dialogue peut paraître bizarre si l'utilisateur change son style global. N'espérez pas que l'utilisateur utilise le thème par défaut.

- -
-

L'exemple du dialogue de recherche de fichier avec ce thème : Source Voir

-
- -
-

La section suivante explique comment rendre une application XUL localisable.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_une_fen\303\252tre/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_une_fen\303\252tre/index.html" deleted file mode 100644 index 3cff976726..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/cr\303\251er_une_fen\303\252tre/index.html" +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Créer une fenêtre -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Créer_une_fenêtre -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window ---- -
-

« PrécédentSuivant »

-
- -

Nous allons créer un simple outil de recherche de fichiers tout au long de ce tutoriel. Avant tout, cependant, nous devons étudier la syntaxe de base d'un fichier XUL.

- -

Création d'un fichier XUL

- -

Un fichier XUL peut avoir n'importe quel nom mais il doit avoir l'extension .xul. Le fichier XUL le plus simple a la structure suivante :

- -
<?xml version="1.0" encoding="ISO-8859-1"?>
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
-<window
-       id="findfile-window"
-       title="Recherche de fichiers"
-       orient="horizontal"
-       xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-...
-</window>
-
- -

Cette fenêtre ne sert à rien puisqu'elle ne comporte pas d'élements d'interface utilisateur. Ceux ci seront ajoutés dans la section suivante. Voici l'analyse ligne par ligne du code ci-dessus :

- -
    -
  1. <?xml version="1.0"?>
    - Cette ligne déclare simplement qu'il s'agit d'un fichier XML. Vous devrez normalement ajouter cette ligne à l'identique au début de chaque fichier xul, tout comme vous mettriez la balise HTML au début d'un fichier HTML.
    2. -
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
    - Cette ligne est utilisée pour spécifier la feuille de style à utiliser pour le fichier. C'est la syntaxe que les fichiers XML emploient pour importer des feuilles de style. Dans ce cas, nous importons les styles trouvés dans le répertoire chrome global/skin. Nous n'avons pas indiqué de fichier spécifique ainsi Mozilla déterminera quels fichiers du dossier il emploiera. Ici, le fichier le plus important, global.css, est sélectionné. Ce fichier contient toutes les déclarations par défaut pour tous les éléments XUL. Puisque XML ne connaît pas la manière dont les éléments doivent être affichés, ce fichier s'en charge. De façon générale, vous mettrez cette ligne au debut de chaque fichier XUL. Vous pouvez également importer d'autres feuilles de style en utilisant la même syntaxe. Notez que vous devrez normalement importer la feuille de style globale à l'intérieur du fichier de votre propre feuille de style.
    3. -
  3. <window
    - Cette ligne déclare que vous allez décrire une fenêtre window. Chaque fenêtre d'interface utilisateur est décrit dans un fichier différent. Cette balise s'apparente à une balise HTML qui entoure l'ensemble d'un document HTML, sauf qu'elle décrit une interface utilisateur au lieu d'un document. Plusieurs attributs peuvent être placés dans la balise window -- dans ce cas, ils sont au nombre de quatre. Dans cet exemple, chaque attribut est placé sur une ligne séparée bien que ce ne soit pas une obligation.
    4. -
  4. id="findfile-window"
    - L'attribut id est utilisé comme un identifiant, de sorte que des scripts puissent y faire référence. Vous mettrez normalement un attribut id sur tous les éléments. Vous êtes libre de choisir n'importe quel nom, toutefois, il est préférable qu'il soit pertinent.
    5. -
  5. title="Recherche de fichiers"
    - L'attribut title décrit le texte qui apparaîtra dans la barre de titre de la fenêtre quand elle sera affichée. Dans le cas présent, le texte 'Recherche de fichiers' sera affiché.
    6. -
  6. orient="horizontal"
    - L'attribut orient spécifie l'arrangement des éléments de la fenêtre. La valeur 'horizontal' indique que les éléments doivent être placés horizontalement dans la fenêtre. Vous pouvez également utiliser la valeur 'vertical' signifiant que les éléments seront affichés en colonne. Comme c'est la valeur par défaut, vous pouvez omettre cet attribut si vous souhaitez avoir l'orientation verticale.
    7. -
  7. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    - Cette ligne déclare l'espace de nommage pour XUL que vous devrez mettre dans l'élément window pour indiquer que tous ses enfants sont du XUL. Notez que cette URL n'est jamais téléchargée réellement. Mozilla reconnaîtra cette URL en interne.
    8. -
  8. ...
    - Mettez ici les éléments (les boutons, les menus et les autres composants de l'interface utilisateur) à afficher dans la fenêtre. Nous en ajouterons quelques uns dans les prochaines sections.
    9. -
  9. </window>
    - Et enfin, nous devons fermer la balise window à la fin du fichier. -

    Ouverture d'une fenêtre

    - -

    Afin d'ouvrir une fenêtre XUL, plusieurs méthodes peuvent être employées. Si vous n'êtes qu'à l'étape de développement, vous pouvez juste taper l'URL (commençant par chrome:, file: ou d'autre type d'URL) dans la barre d'adresses du navigateur Mozilla. Vous pouvez également double-cliquer sur le fichier dans votre gestionnaire de fichiers, en supposant que les fichiers XUL soient associés à Mozilla. La fenêtre XUL apparaîtra cependant dans la fenêtre de navigateur et non dans une nouvelle, mais c'est souvent suffisant durant les premières étapes de développement.

    - -

    La manière correcte, naturellement, est d'ouvrir la fenêtre en utilisant JavaScript. Aucune nouvelle syntaxe n'est nécessaire, vous pouvez employer la fonction window.open() comme pour tout document HTML. Cependant, une option additionnelle, appelée 'chrome' est nécessaire pour indiquer au navigateur que le document à ouvrir est un chrome. Celle-ci s'ouvrira sans barre d'outils, sans menu et sans aucun élément qu'une fenêtre de navigateur dispose normalement. La syntaxe est décrite ci-dessous :

    - - 
    window.open(url,windowname,flags);
-
-où l'argument flags contient "chrome" comme dans cet exemple :
-
-window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
    - -
    -

    L'exemple findfile.xul

    - -

    Commençons par créer le fichier de base pour la boîte de dialogue de recherche de fichiers. Créez un fichier appelé findfile.xul et mettez le dans le répertoire content spécifié dans le fichier findfile.manifest (nous l'avons créé dans la section précédente). Ajoutez au fichier le squelette XUL montré au début de cette page et sauvegardez le.

    - -

    Vous pouvez utiliser le paramètre en ligne de commande '-chrome' pour indiquer le fichier XUL à ouvrir au démarrage de mozilla. S'il n'est pas spécifié, la fenêtre par défaut s'ouvrira (habituellement la fenêtre de navigateur). Par exemple, nous pourrions ouvrir la boite de dialogue de recherche de fichiers avec l'une des commandes suivantes :

    - - 
    mozilla -chrome chrome://findfile/content/findfile.xul
-mozilla -chrome resource:/chrome/findfile/content/findfile/findfile.xul
-
    - Si vous utilisez cette commande en ligne (dans l'hypothèse que cela soit possible sur votre plateforme), la boite de dialogue de recherche de fichiers s'ouvrira par défaut au lieu de la fenêtre de navigateur de Mozilla. Naturellement, puisque nous n'avons pas mis d'éléments graphiques dans la fenêtre, vous ne verrez rien. Dans la section suivante, quelques éléments y seront ajoutés.
    - -

    Pour en voir quand même l'effet, la commande en ligne suivante ouvrira la fenêtre des marque-pages :

    - - 
    mozilla -chrome chrome://communicator/content/bookma...rksManager.xul
-
-Si vous utilisez Firefox, essayez :
-firefox -chrome chrome://browser/content/places/places.xul
    - -

    L'option '-chrome' ne donne aucun privilège supplémentaire au fichier. Au lieu de cela, il entraine l'ouverture du fichier spécifié dans une fenêtre racine sans aucune interface chrome de navigation, comme la barre d'adresses ou le menu. Seules les URLs chrome ont des privilèges supplémentaires.

    - -
    L'Éditeur dynamique XUL vous permet de taper du code XUL et de voir immédiatement le résultat dans Mozilla !
    - -

    Problèmes

    - -
      -
    • Si la fenêtre XUL ne se montre pas sur le bureau mais a un icône sur la barre de tâches, vérifiez la déclaration xml-stylesheet. Assurez vous que vous avez inclus correctement la feuille de style :
      • -
    - - 
    <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
    - -
    -

    Dans la section suivante, nous ajouterons des boutons dans la fenêtre.

    - -
    -

    « PrécédentSuivant »

    -
    -
    10. -
diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/document_object_model/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/document_object_model/index.html deleted file mode 100644 index 6b269306e4..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/document_object_model/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Document Object Model -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Document_Object_Model -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Document_Object_Model ---- -

 

-
-

« PrécédentSuivant »

-
-

Le Document Object Model (DOM, modèle objet d'un document) peut être utilisé pour modifier les éléments XUL ou obtenir des informations à leur propos.

-

Introduction au DOM

-

Le DOM est utilisé pour stocker l'arbre des nœuds XUL. Quand un fichier XUL est chargé, les balises sont interprétées et converties dans une structure hiérarchique de nœuds du document, un pour chaque balise et bloc de texte. La structure DOM peut être examinée et modifiée en utilisant des méthodes dédiées. Des éléments XUL spécifiques fournissent également des fonctions additionnelles pouvant être utilisées.

-

Chaque fichier XUL chargé aura son propre document affiché dans une fenêtre ou un cadre. Bien qu'il ne puisse y avoir qu'un seul document associé à une fenêtre à un moment donné, vous pouvez charger des documents supplémentaires en utilisant plusieurs méthodes.

-

Dans Mozilla, on peut accéder au DOM et le manipuler en utilisant JavaScript. Les divers objets DOM possèdent des fonctions accessibles par script, pourtant, il est important de noter que le DOM est une API qui est accessible par JavaScript. JavaScript lui-même n'est jamais qu'un langage de script pouvant accéder à ces objets parce que Mozilla fournit ces objets à l'utilisation.

-

Dans JavaScript, il existe un unique objet global toujours disponible. Vous pouvez vous reférer aux propriétés et méthodes de l'objet global sans avoir à les qualifier avec un objet. Par exemple, si l'objet global possède une propriété name, vous pouvez changer le nom avec le code name=7 sans avoir à spécifier l'objet à utiliser. Dans un contexte de navigateur, la fenêtre est l'objet global. Il en va de même pour XUL. Naturellement, l'objet global sera différent pour chaque fenêtre. Chaque cadre aura également un objet window séparé.

-

On se refère souvent à la fenêtre en utilisant la propriété window, bien que ce soit optionnel. Quelquefois, cette pratique sert uniquement à clarifier la portée de la méthode à laquelle vous vous reférez. Par exemple, les deux lignes suivantes qui ouvrent une nouvelle fenêtre, sont fonctionnellement équivalentes :

-
window.open("test.xul","_new");
-open("test.xul","_new");
-
-

Lorsque vous déclarez une fonction ou une variable en tête de script, en dehors d'une fonction, vous êtes en train de déclarer une propriété de l'objet global. En XUL, chaque fonction que vous déclarez sera définie comme une propriété de l'objet window. Par exemple, le code suivant affichera deux fois le texte 'message' dans une alerte.

-
function getText(){
-  return "Message";
-}
-
-alert(getText());
-alert(window.getText());
-
-

De fait, si vous vouler accéder à des variables ou appeler une fonction déclarée dans un script utilisé par une autre fenêtre, vous pouvez y accéder juste en utilisant l'objet window de l'autre fenêtre. Par exemple, si nous avions combiné les deux derniers exemples dans un seul fichier, nous pourrions appeler la fonction getText au sein de l'autre fenêtre (par ex. la fenêtre test.xul). Pour cela, nous pouvons faire la chose suivante :

-
alert(window.opener.getText());
-

Chaque fenêtre possède une propriété opener contenant l'objet window l'ayant ouverte. Dans cet exemple, nous récupérons la fenêtre responsable de l'ouverture et appelons la fonction getText déclarée dans un script situé dans celle-ci. Notez que nous qualifions la propriété avec l'identifiant window uniquement pour plus de clarté.

-

La méthode open() de la fenêtre retourne également une référence à la nouvelle fenêtre, donc vous pouvez appeler des fonctions de la nouvelle fenêtre à partir de l'ouvrante. Toutefois, il est important de noter que la méthode open() renvoie sa valeur de retour avant que la fenêtre soit complètement chargée, donc les fonctions ne seront pas forcément disponibles pour autant.

-

L'objet window n'est défini par aucune spéficication DOM, mais est quelquefois considéré, dans Mozilla, comme faisant partie du DOM niveau 0, un nom utilisé par des développeurs pour se reférer aux fonctions assimilées DOM avant que celles-ci ne soient ajoutées aux spécifications. Le document actuel affiché dans une fenêtre peut être récupéré en utilisant la propriété document du document. Depuis qu'elle est devenue la propriété de la fenêtre la plus couramment utilisée, la propriété document est habituellement utilisée sans le qualifieur document.

-

Mozilla founit divers objets de document en fonction de son type. Les trois documents principaux sont les HTMLDocument, XMLDocument et XULDocument, respectivement pour les documents HTML, XML et XUL. Évidemment, c'est ce dernier type de document qui est utilisé pour le XUL. Les trois types de document sont très similaires. Concrètement, ils partagent tous la même implémentation de base. Mais il existe des fonctions spécifiques à chacun de ces documents.

-

Récupérer des éléments

-

La méthode la plus courante pour récupérer un élément dans un document est de lui affecter un attribut id et d'utiliser la méthode getElementById() du document. Nous avons ajouté l'attribut id à un certain nombre d'éléments dans la boîte de recherche de fichiers. Par exemple, nous pouvons obtenir l'état de la case à cocher en utilisant le code ci-dessous :

-
var state = document.getElementById('casecheck').checked;
-

La valeur 'casecheck' correspond à l'id de la case à cocher définissant la sensibilité à la casse. Une fois que nous savons si elle est cochée ou non, nous pouvons utiliser cette indication pour effectuer la recherche. Nous pourrions procéder de façon similaire pour l'autre case à cocher, ou n'importe quel autre élément qui a un attribut id. Nous aurons par exemple besoin de récupérer le texte dans le champ de saisie.

-
-

Notre exemple de recherche de fichiers

-

Il n'est pas nécessaire d'afficher la barre de progression et l'arbre de données vide quand la boîte de dialogue pour la recherche de fichiers est affichée pour la première fois. Ceux-ci ont été ajoutées de façon à ce que nous puissions les voir. Retirons-les maintenant, et affichons-les seulement lorsque le bouton « Rechercher » sera pressé. Au départ, nous devons les rendre invisible. L'attribut hidden est utilisé pour contrôler la visibilité d'un élément.

-

Nous allons modifier la barre de progression de façon à ce qu'elle soit cachée au départ. Nous allons aussi lui ajouter un attribut id pour qu'un script puisse y faire référence pour pouvoir la cacher ou l'afficher. Profitons-en pour cacher aussi le séparateur et l'arbre des résultats, puisque nous n'en aurons besoin qu'après avoir effectué une recherche.

-
<tree id="results" hidden="true" flex="1">
-  .
-  .
-  .
-<splitter id="splitbar" resizeafter="grow" hidden="true"/>
-
-<hbox>
-
-  <progressmeter id="progmeter" value="50%"
-    style="margin: 4px;" hidden="true"/>
-
-

Nous avons ajouté l'attribut hidden et mis sa valeur à 'true'. L'élément est ainsi caché lors de sa première apparition.

-

Ensuite, ajoutons une fonction qui sera appelée quand le bouton « Rechercher » sera pressé. Nous mettrons les scripts dans le fichier séparé 'findfile.js'. Dans une section précédente, nous avons ajouté l'élément script dans le fichier XUL. Si vous ne l'avez pas encore fait, faites-le maintenant, comme ci-dessous. Nous ajouterons aussi un gestionnaire oncommand au bouton « Rechercher ».

-
<script src="findfile.js"/>
-  .
-  .
-  .
-<button id="find-button" label="Rechercher"
-   oncommand="doFind();"/>
-
-

À présent, créez un autre fichier nommé 'findfile.js' dans le même répertoire que 'findfile.xul'. Nous ajouterons la fonction doFind() dans ce fichier. La balise script de ce fichier XUL peut contenir du code. Cependant, pour diverses raisons, notamment pour de meilleures performances, vous devriez toujours mettre vos scripts dans des fichiers séparés, excepté pour les courts morceaux de code qui peuvent se trouver directement dans les gestionnaires d'événement.

-
function doFind(){
-  var meter = document.getElementById('progmeter');
-  meter.hidden = false;
-}
-
-

Cette fonction récupère d'abord une référence à la barre de progression en utilisant son id, 'progmeter'. La seconde ligne du corps de la fonction change l'état de hidden pour rendre l'élément visible.

-

Finalement, ajoutons une boîte de dialogue qui affiche ce que nous sommes en train de rechercher. Évidemment nous n'en voudrons pas dans la version finale, mais ajoutons la maintenant pour nous assurer que quelque chose se produise.

-
function doFind(){
-  var meter=document.getElementById('progmeter');
-  meter.hidden = false;
-  var searchtext=document.getElementById('find-text').value;   alert("Recherche de \"" + searchtext + "\"");
-}
-
-

Maintenant, avec cette boîte d'alerte placée ici, nous saurons ce qui se produit quand nous cliquons sur le bouton « Rechercher ». Nous pouvons ajouter du code pour obtenir aussi ce qui est sélectionné dans les listes déroulantes.

-

Source Voir

-
-

Le DOM des éléments XUL

-

Chaque élément XUL possède un lot d'attributs, un lot de propriétés et un lot d'enfants.

- -

Il est possible de manipuler dynamiquement les attributs, propriétés et enfants d'un élément en utilisant les méthodes du DOM.

-

Il est important de noter que les attributs et les propriétés sont deux choses différentes. Tout simplement car le fait qu'un attribut avec un nom donné existe ne signifie pas qu'il existe une propriété correspondante ayant le même nom. Pourtant, c'est souvent le cas. Par exemple, pour obtenir le flex d'un élément, vous pouvez utiliser la propriété flex. Dans ce cas, le code implicite retourne simplement la valeur de l'attribut. Pour d'autres propriétés, XUL accomplira des calculs plus complexes.

-

Vous pouvez manipuler les attributs d'un élément en utilisant l'une des méthodes suivantes :

-
getAttribute ( nomAttribut ) 
Renvoie la valeur de l'attribut 'nomAttribut'
hasAttribute ( nomAttribut ) 
Renvoie 'true' si l'attribut de nom 'nomAttribut' a une valeur
setAttribute ( nomAttribut , valeurAdonner ) 
Fixe la valeur de l'attribut 'nomAttribut' à la valeur 'valeurAdonner'
removeAttribute ( nomAttribut ) 
Supprime l'attribut 'nomAttribut'
-
-

Ces fonctions vous permettent d'obtenir ou de modifier la valeur d'un attribut à tout moment. Par exemple, pour utiliser la valeur de l'attribut flex, vous pourriez utiliser le code suivant :

-
 var box = document.getElementById('uneboite');
- var flex = box.getAttribute("flex");
-
- var box2 = document.getElementById('uneautreboite');
- box2.setAttribute("flex", "2");
-
-

Pourtant, l'attribut flex a une propriété de script correspondante pouvant être utilisée à la place. Ce n'est pas plus efficace, mais c'est légèrement plus court à écrire. L'exemple suivant fait la même chose qu'au-dessus, en utilisant la propriété flex à la place :

-
 var box = document.getElementById('uneboite');
- var flex = box.flex;
-
- var box2 = document.getElementById('uneautreboite');
- box2.flex = 2;
-
-

Une fois que vous avez une référence à un élément, vous pouvez appeler les propriétés de cet élément. Par exemple, pour obtenir la propriété hidden d'un élément, vous pouvez utiliser la syntaxe element.hidden où "element" est une référence à l'élément. Notez que la plupart des propriétés listées dans la référence est en corrélation avec les attributs communs des éléments. Il y a des différences, bien sûr, par exemple, alors que getAttribute("hidden") retournera la chaîne '"true"' pour un élément caché, la propriété hidden retournera une valeur 'true' booléenne. Dans ce cas, la conversion de type est faite pour vous, donc la propriété est plus commode.

-

Comme pour chaque document, l'objet "element" pour les éléments XUL n'est pas le même que pour des éléments HTML et XML. Chaque élément XUL implémente l'interface XULElement. Un élément XUL est un élément déclaré avec l'espace de nommage (namespace) XUL. Ainsi, les éléments XUL auront cette interface même s'ils sont ajoutés à d'autres documents XML, et les éléments non-XUL ne l'auront pas. L'interface XULElement possède un certain nombre de propriétés et méthodes spécifiques aux éléments XUL, pour beaucoup héritées de l'interface générique des éléments DOM.

-

Un espace de nommage est un URI qui spécifie le type d'élément. Voici quelques exemples :

-
<button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
-<button xmlns="http://www.w3.org/1999/xhtml"/>
-<html:button xmlns:html="http://www.w3.org/1999/xhtml"/>
-<html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
-
-

Les espaces de nommages sont spécifiés en utilisant l'attribut xmlns.

- -

C'est une distinction importante. En fait, le texte utilisé pour le préfixe n'est pas significatif lorsqu'il détermine quel type d'élément est utilisé.

-

Le DOM fournit un certain nombre de fonctions relatives aux espaces de nommage, similaires aux fonctions de base. Par exemple, la fonction getAttributeNS() est similaire à la fonction getAttribute(), excepté un argument supplémentaire pouvant être fourni pour spécifier un attribut dans un espace de nommage spécifique.

-

Quelques éléments XUL disposent de leurs propres propriétés qui leurs sont spécifiques. Reportez-vous à la référence pour un guide complet des attributs et propriétés disponibles pour un élément.

- -

Le DOM est une structure en arbre composé d'un unique nœud racine avec ses enfants. Vous pouvez obtenir une référence au nœud racine en utilisant la propriété documentElement du document. Le nœud racine est toujours un élément, mais ce n'est pas le cas pour tous les nœuds de l'arbre. Un élément correspond à une balise dans la source XUL, mais vous pouvez également trouver des nœuds de texte, des nœuds de commentaire et quelques autres types dans un arbre de document. Dans le cas de XUL, l'élément racine sera la balise window dans le document XUL. Chaque nœud de l'arbre peut avoir des enfants et ces enfants peuvent avoir des nœuds fils à leur tour. Comme le DOM est une structure en arbre, vous pouvez naviguer au sein de cet arbre en utilisant une grande variété de propriétés. Quelques méthodes, parmi les plus communes, sont listées ci-après :

-
firstChild 
Référence au premier nœud fils d'un élément
lastChild 
Référence au dernier nœud fils d'un élément
childNodes 
Contient la liste des enfants d'un élément
parentNode 
Référence au père d'un nœud
nextSibling 
Référence au prochain nœud de même niveau
previousSibling 
Référence au nœud précédent de même niveau
-
-

Ces propriétés vous permettent de naviguer de diverses manières au sein d'un document. Par exemple, vous pouvez obtenir un premier enfant d'un élément en utilisant la propriété firstChild et ensuite, naviguer au sein de tous ses enfants en utilisant la propriété nextSibling. Ou vous pourriez accomplir la même chose en parcourant les items du tableau childNodes listant tous les enfants. Dans Mozilla, la dernière façon est plus efficace.

-

L'exemple suivant montre comment parcourir tous les enfants du n½ud racine :

-
var childNodes = document.documentElement.childNodes;
-for (var i = 0; i < childNodes.length; i++) {
-  var child = childNodes[i];
-  // faire quelque chose avec child
-}
-
-

La variable 'childNodes' contiendra les enfants de l'élément racine du document. Nous pouvons donc utiliser une boucle for pour parcourir les enfants, en accédant à chaque item comme pour un tableau.

-
-

Dans la prochaine section, nous découvrirons comment modifier le DOM.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/donn\303\251es_persistantes/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/donn\303\251es_persistantes/index.html" deleted file mode 100644 index 696401deaf..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/donn\303\251es_persistantes/index.html" +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Données persistantes -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Données_persistantes -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Persistent_Data ---- -

 

-
-

« PrécédentSuivant »

-
-

Cette section décrit comment sauvegarder l'état d'une fenêtre XUL.

-

Mémorisation d'un état

-

Lors de la création d'une application importante, il est fréquent de vouloir sauvegarder l'état d'une fenêtre tout au long des sessions. Par exemple, la fenêtre doit se souvenir quelles étaient les barres d'outils masquées après que l'utilisateur l'ait quitté.

-

Une possibilité serait d'écrire un script chargé de collecter l'information que vous voulez sauvegarder et de l'enregistrer dans un fichier. Toutefois, cette opération deviendrait pénible à chaque application. Heureusement, XUL propose un mécanisme pour sauvegarder les états d'une fenêtre.

-

L'information est collectée et stockée dans un fichier RDF (localstore.rdf) dans le même répertoire que les autres préférences de l'utilisateur. Ce fichier retient les états de chaque fenêtre. Cette méthode a l'avantage de fonctionner avec les profils utilisateurs de Mozilla, ainsi chaque utilisateur a ses propres paramètres.

-

XUL vous permet de sauvegarder l'état de n'importe quel élément. Typiquement, vous pouvez sauvegarder les états des barres d'outils, les positions des fenêtres et si certains panneaux sont affichés ou non, mais vous pouvez sauvegarder presque tout.

-

Attribut persist

-

Pour permettre la sauvegarde d'états, vous devez simplement ajouter l'attribut persist à l'élément qui contient la valeur que vous voulez sauvegarder. L'attribut persist doit être affecté par une liste d'éléments séparés par des espaces. L'élément concerné doit également avoir un attribut id pour permettre de l'identifier.

-

Par exemple, pour sauvegarder la position d'une fenêtre, vous devrez procéder comme ceci :

-
<window
-  id="someWindow"
-  width="200"
-  height="300"
-  persist="width height"
-  .
-  .
-  .
-
-

Les deux attributs de l'élément window, width et height, seront sauvegardés. Vous pourriez ajouter à l'attribut persist des attributs supplémentaires à mémoriser tout en les séparant par un espace. Vous pouvez ajouter l'attribut persist à n'importe quel élément et mémoriser n'importe quel attribut. Vous pouvez utiliser des valeurs inhabituelles si vous ajustez les attributs par un script.

-
-

Exemple de recherche de fichiers

-

Ajoutons un attribut persist à quelques éléments de notre boîte de dialogue de recherche de fichiers. Pour sauvegarder la position de la fenêtre, nous devons modifier l'élément window :

-
<window
-  id="findfile-window"
-  title="Recherche de fichiers"
-  persist="screenX screenY width height"
-  orient="horizontal"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-

Cette modification va sauvegarder la position x et y de la fenêtre, sa largeur et sa hauteur. Nous poursuivrons plus tard la mémorisation de l'état du séparateur. La mémorisation de l'onglet sélectionné n'aurait aucun sens.

-

Exemple de recherche de fichiers : Source Voir

-
-
-

Dans la section suivante, nous verrons comment appliquer des feuilles de styles à des fichiers XUL.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/d\303\251tails_sur_le_mod\303\250le_de_bo\303\256te/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/d\303\251tails_sur_le_mod\303\250le_de_bo\303\256te/index.html" deleted file mode 100644 index 974efe3272..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/d\303\251tails_sur_le_mod\303\250le_de_bo\303\256te/index.html" +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Détails sur le modèle de boîte -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Détails_sur_le_modèle_de_boîte -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Box_Model_Details ---- -

 

-
-

« PrécédentSuivant »

-
-

Nous avons déjà vu beaucoup de fonctionnalités sur le modèle de boîtes. Dans cette section, nous verrons quelques détails supplémentaires en nous appuyant sur des exemples.

-

Plus de détails sur la mise en page

-

Les propriétés de style comme min-width et max-height peuvent être appliquées à n'importe quels éléments. Nous les avons ajouté aux boutons et aux champs de saisie, mais nous pouvons aussi les ajouter aux éléments d'espacement ou aux boîtes. De même, l'attribut flex peut être appliqué à n'importe quel élément.

-

Exemple 1: Source Voir

-
<hbox flex="1">
-   <button label="Gauche" style="min-width: 100px;" flex="1"/>
-   <spacer flex="1"/>
-   <button label="Droite" style="min-width: 100px;" flex="1"/>
-</hbox>
-
-

Dans l'exemple ci-dessus, les trois éléments se redimensionnent eux-mêmes car il sont tous flexibles. Les deux boutons ont une largeur minimum de 100 pixels. Les deux boutons ne seront jamais plus petits que cette taille mais ils pourront toujours s'élargir. Ici, la fenêtre doit apparaître avec une largeur d'un peu plus de 200 pixels. C'est suffisant pour les deux boutons. Car si les trois éléments sont flexibles, ils ne nécessitent pas pour autant plus de place, la flexibilité n'ajoute pas d'espace supplémentaire.

-
Image:xultu_boxdet1.png
-

Comme il est montré dans l'image ci-dessus, il y a deux boutons qui s'étirent verticalement pour remplir leur élément conteneur, qui dans ce cas est le hbox. L'attribut align contrôle ce comportement sur une boîte horizontale. Vous pouvez aussi empêcher cet étirement en précisant une hauteur maximale sur l'élément ou mieux, sur la boîte elle-même. Si une boîte a une hauteur maximale, les éléments qu'elle contient sont limités en hauteur par celle-ci. Cependant, le problème est que vous devez connaître au préalable la taille d'un élément pour pouvoir le spécifier à la boîte.

-

Exemple 2: Source Voir

-
<hbox flex="1" align="top">
-   <button label="Gauche" style="min-width: 100px;" flex="1"/>
-   <spacer flex="1"/>
-   <button label="Droite" style="min-width: 100px;" flex="1"/>
-</hbox>
-
-

Résumé du modèle de boîte

-

Pour parfaire une mise en page complexe, vous devrez généralement ajouter des boîtes imbriquées, spécifier une taille minimale et maximale pour quelques éléments, et rendre certains éléments flexibles. La meilleure interface est celle qui peut être affichée sans problème dans différentes tailles. Le modèle de boîte peut être difficile à appréhender si vous n'essayez pas différentes choses par vous-même.

-

Voici une courte description des deux types de boîtes :

-

Boîtes horizontales

-
  1. Affichent chaque élément les uns à coté des autres horizontalement.
  2. Les éléments flexibles le sont horizontalement.
  3. Le groupement (NdT : attribut pack) contrôle le placement horizontal des éléments fils.
  4. L'alignement contrôle la manière dont les lignes d'éléments seront alignées verticalement.
    5. -
-

Boîtes verticales

-
  1. Affichent chaque élément verticalement en colonnes.
  2. Les éléments flexibles le sont verticalement.
  3. Le groupement contrôle le placement vertical des éléments fils.
  4. L'alignement contrôle la manière dont les colonnes d'éléments seront alignées horizontalement.
    5. -
-

Vous pouvez mettre des boîtes n'importe où dans un fichier XUL, même dans un élément HTML comme une table. Cependant, l'affichage sera en partie dépendant de l'élément HTML. Cela signifie que l'attribut flex risque de ne pas réagir exactement comme vous le voudriez. Rappelez-vous que la flexibilité n'a de sens que pour les éléments qui sont directement à l'intérieur d'une boîte, ou d'un élément qui est assimilé à une boîte.

-

Exemples de mise en page

-

1. Utiliser les spacers

-

Exemple 3: Source Voir

-
<hbox>
-   <button label="Un"/>
-   <spacer style="width: 5px"/>
-   <button label="Deux"/>
-</hbox>
-
-

Ici, un espacement est utilisé comme séparateur entre deux boutons, en précisant une largeur de 5 pixels. Vous pouvez aussi utiliser les marges de la propriété CSS margin.

-

2. Centrer des boutons

-

Exemple 4: Source Voir

-
<hbox pack="center" align="center" flex="1">
-   <button label="Regardez Moi!"/>
-   <button label="Cliquez Moi!"/>
-</hbox>
-
-

Cet exemple propose une boîte horizontale flexible contenant deux boutons. La boîte possède l'attribut pack qui est utilisé pour centrer les boutons horizontalement. L'attribut align, quant à lui, aligne verticalement les boutons. Le résultat est que les boutons seront centrés dans la boîte dans les deux directions. Cet exemple fonctionnera aussi avec une boîte verticale, sauf que le second bouton sera alors sous le premier, au lieu d'être à coté de lui.

-

3. Une fenêtre de recherche dans le texte

-

Exemple 5: Source Voir

-
<?xml version="1.0" encoding="iso-8859-1" ?>
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
-<window id="findtext" title="Recherche dans un texte" orient="horizontal"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-  <vbox flex="3">
-    <label control="t1" value="Mots clés :"/>
-    <textbox id="t1" style="min-width: 100px;" flex="1"/>
-  </vbox>
-
-  <vbox style="min-width: 150px;" flex="1" align="start">
-    <checkbox id="c1" label="Ignorer la casse"/>
-    <spacer flex="1" style="max-height: 30px;"/>
-    <button label="Rechercher"/>
-  </vbox>
-
-</window>
-
-
Image:xultu_boxdet-ex3.png
-

Ici, deux boîtes verticales sont créées, une pour le champ texte et l'autre pour la case à cocher et le bouton de recherche. La boîte de gauche a une flexibilité 3 fois plus grande que celle de droite donc elle prendra toujours 3 fois plus de place quand la taille de la fenêtre augmentera. La boîte de droite impose une largeur minimum de 150 pixels.

-

Le champ de saisie est flexible donc il s'ajustera à la taille de la fenêtre. Il impose aussi une largeur minimum de 100 pixels. La case à cocher apparaît dans la boîte de droite avec son libellé. Juste en dessous de la case à cocher, il y a un spacer (espacement). L'espacement s'agrandira ou se rétrécira mais n'excédera pas 30 pixels. Le résultat est que la case à cocher et le bouton de recherche seront séparés par un espace qui ne fera pas plus de 30 pixels.

-

La seconde boîte a un alignement de valeur 'start'. Les trois éléments fils seront par conséquent alignés sur le bord gauche. Si l'alignement n'était pas précisé, sa valeur par défaut serait 'stretch', ce qui aurait pour effet de positionner les éléments fils les uns à coté des autres horizontalement. Puisque nous ne voulons pas que le bouton de recherche change de taille, nous devons préciser un alignement.

-
-

Dans la prochaine section, nous allons en apprendre un peu plus sur un type de boîte plus spécifique, le groupe de boîte.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/d\303\251tails_sur_les_vues_d'arbres/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/d\303\251tails_sur_les_vues_d'arbres/index.html" deleted file mode 100644 index d9257abad2..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/d\303\251tails_sur_les_vues_d'arbres/index.html" +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: Détails sur les vues d'arbres -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Détails_sur_les_vues_d'arbres -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Tree_View_Details ---- -

 

-
-

« PrécédentSuivant »

-
-

Cette section décrit quelques fonctionnalités supplémentaires des vues d'arbre.

-

Création d'une vue hiérarchique personnalisée

-

Dans la section précédente, nous avons créé une vue d'arbre simple qui était implémentée avec un minimum de fonctionnalités. À présent, regardons quelques fonctions supplémentaires que les vues peuvent implémenter. Ici, nous examinerons comment créer un ensemble hiérarchique d'items utilisant la vue. C'est un processus relativement astucieux qui implique de conserver une trace des items qui sont des enfants et une trace de l'état des lignes, ouvertes ou fermées.

-

Imbrication de niveaux

-

Chaque ligne dans l'arbre possède un niveau d'imbrication. Les lignes les plus hautes ont un niveau 0, les enfants de ces lignes ont un niveau 1, leurs enfants le niveau 2 et ainsi de suite. L'arbre interroge la vue pour chaque ligne en appelant sa méthode getLevel() pour connaître le niveau de cette ligne. La vue devra retourner 0 pour les premiers parents et des valeurs plus élevées pour les lignes intérieures. L'arbre utilisera cette information pour déterminer la structure hiérarchique de ces lignes.

-

En complément de la méthode getLevel(), la fonction hasNextSibling() retourne pour une ligne donnée la valeur 'true' si elle est suivie d'une autre ligne de même niveau qu'elle. Cette fonction est spécifiquement utilisée pour dessiner l'imbrication des lignes sur le côté de la vue de l'arbre.

-

La méthode getParentIndex() est supposée retourner la ligne parente d'une ligne donnée, c'est-à-dire : la ligne précédente qui a un niveau d'imbrication inférieur. Toutes ces méthodes doivent être implémentées par la vue pour que les enfants soient manipulés correctement.

-

Conteneurs

-

Trois autres fonctions, isContainer, isContainerEmpty et isContainerOpen sont utilisées pour manipuler un item parent dans l'arbre.

- -

Notez que l'arbre n'appellera ni isContainerEmpty, ni isContainerOpen pour les lignes qui ne sont pas conteneurs en se basant sur la valeur de retour de la méthode isContainer.

-

Un conteneur peut être affiché différemment d'un non-conteneur. Par exemple, un conteneur peut avoir un icône de dossier devant lui. Une feuille de styles peut être utilisée pour personnaliser l'aspect des items en se basant sur diverses propriétés telles que l'ouverture d'une ligne conteneur. La stylisation sera décrite dans une prochaine section. Un conteneur non vide sera agrémenté d'une poignée (NdT&nbsp;: "twisty", petit '+' ou '-' ou un triangle sur les Macintosh) permettant à l'utilisateur d'ouvrir ou de fermer la ligne pour voir les items enfants. Les conteneurs vides n'auront pas de poignées, mais seront toujours considérés comme des conteneurs.

-

Lorsque l'utilisateur clique sur la poignée pour ouvrir une ligne, l'arbre appellera la méthode toggleOpenState(). La vue met alors en œuvre les opérations nécessaires pour intégrer les lignes enfants et mettre à jour l'arbre avec les nouvelles lignes.

-

Résumé des méthodes

-

Voici un récapitulatif des méthodes nécessaires pour implémenter des vues hiérarchiques :

-
getLevel(ligne)
-hasNextSibling(ligne, apresIndex)
-getParentIndex(ligne)
-isContainer(ligne)
-isContainerEmpty(ligne)
-isContainerOpen(ligne)
-toggleOpenClose(ligne)
-
-

L'argument apresIndex de la fonction hasNextSibling est utilisée pour une raison d'optimisation, afin de démarrer la recherche à partir de la prochaine ligne sœur (ligne de même niveau d'imbrication). Par exemple, l'appelant pourrait déjà connaître la position de la prochaine ligne sœur. Imaginez une situation où une ligne possède des sous-lignes et que ces sous-lignes aient des lignes enfants dont quelques-unes sont ouvertes. Dans ce cas, la détermination de l'index de la prochaine ligne sœur prendrait du temps dans certaines implémentations.

-

Exemple d'une vue personnalisée hiérarchique

-

Voyons tous ces points dans un exemple simple qui construit un arbre à partir d'un tableau. Cet arbre ne supporte qu'un niveau parent avec un seul niveau enfant, mais il est possible de l'étendre facilement avec d'autres niveaux. Nous l'examinerons portion par portion.

-
<window onload="init();"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<tree id="elementList" flex="1">
-  <treecols>
-    <treecol id="element" label="Élément" primary="true" flex="1"/>
-  </treecols>
-  <treechildren/>
-</tree>
-
-</window>
-
-

Nous utilisons un arbre simple qui ne contient pas de données dans treechildren. La fonction init est appelée au chargement de la fenêtre pour initialiser l'arbre. Elle définit simplement la vue personnalisée en récupérant l'arbre et en définissant sa propriété view. Nous définirons treeView plus tard.

-
function init() {
-  document.getElementById("elementList").view = treeView;
-}
-
-

La vue d'arbre personnalisée aura besoin d'implémenter un certain nombre de méthodes dont les plus importantes seront examinées individuellement. Cet arbre supporte un seul niveau de parenté avec un niveau enfant interne, mais il peut être étendu pour intégrer sans trop d'effort des niveaux supplémentaires. Tout d'abord, nous définirons deux structures pour conserver les données de l'arbre, la première contiendra une carte relationnelle entre les parents et leurs éventuels enfants, et la seconde contiendra un tableau des lignes visibles. Souvenez-vous qu'une vue doit conserver elle-même une trace des lignes visibles.

-
var treeView = {
-  childData : {
-    Solids: ["Argent", "Or", "Plomb"],
-    Liquids: ["Mercure"],
-    Gases: ["Hélium", "Azote"]
-  },
-
-  visibleData : [
-    ["Solides", true, false],
-    ["Liquides", true, false],
-    ["Gaz", true, false]
-  ],
-
-

La structure childData contient un tableau des enfants pour chacun des trois nœuds parents. Le tableau visibleData commence avec seulement trois items visibles, les trois items de haut niveau. Des items seront ajoutés et supprimés depuis ce tableau quand les items sont ouverts ou fermés. Le principe est le suivant : lorsqu'une ligne parente est ouverte, ses enfants sont récupérés depuis la carte childData et insérés dans le tableau visibleData. Par exemple, si la ligne 'Liquides' est ouverte, son enfant unique dans le tableau childData, l'enfant 'Mercure', sera inséré dans le tableau visibleData après 'Liquides' mais avant 'Gaz'. La taille du tableau sera incrémentée de un. Les deux valeurs booléennes présentes dans chaque ligne dans la structure visibleData indiquent respectivement si une ligne est un conteneur et si elle est ouverte. Évidemment, le nouvel enfant inséré aura ces deux valeurs initialisées à 'false'.

-

Implémentation de l'interface de vue d'arbre

-

Ensuite, nous avons besoin d'implémenter l'interface de vue de l'arbre. Tout d'abord, les fonctions simples :

-
  treeBox: null,
-  selection: null,
-
-  get rowCount()                     { return this.visibleData.length; },
-  setTree: function(treeBox)         { this.treeBox = treeBox; },
-  getCellText: function(idx, column) { return this.visibleData[idx][0]; },
-  isContainer: function(idx)         { return this.visibleData[idx][1]; },
-  isContainerOpen: function(idx)     { return this.visibleData[idx][2]; },
-  isContainerEmpty: function(idx)    { return false; },
-  isSeparator: function(idx)         { return false; },
-  isSorted: function()               { return false; },
-  isEditable: function(idx, column)  { return false; },
-
-

La fonction rowCount retournera la taille du tableau visibleData. Notez qu'elle devrait retourner le nombre courant de lignes visibles, pas le nombre total de lignes. Donc, au début, seulement trois items sont visibles et la valeur retournée par rowCount devrait être trois, même si six lignes sont cachées.

-

La fonction setTree sera appelée pour définir l'objet boîte de l'arbre. L'objet boîte de l'arbre est un type spécialisé d'objet boîte propre aux arbres qui sera examiné en détail dans la prochaine section. Il est utilisé pour aider à la représentation graphique de l'arbre. Dans cet exemple, nous avons seulement besoin d'une fonction de l'objet boîte capable de redessiner l'arbre quand des items sont ajoutés ou supprimés.

-

Les fonctions getCellText, isContainer et isContainerOpen retournent juste l'élément correspondant dans le tableau visibleData. Enfin, les fonctions restantes peuvent retourner 'false' puisque nous n'avons pas besoin de leurs fonctionnalités. Si nous avions eu des lignes parents sans enfant, nous aurions implémenté la fonction isContainerEmpty pour quelle retourne 'true' pour ces éléments.

-
  getParentIndex: function(idx) {
-    if (this.isContainer(idx)) return -1;
-    for (var t = idx - 1; t >= 0 ; t--) {
-      if (this.isContainer(t)) return t;
-    }
-  },
-
-

La fonction getParentIndex sera nécessaire pour retourner l'index du parent d'un item donné. Dans notre exemple simple, il y a seulement deux niveaux d'imbrication, donc nous savons que les conteneurs n'ont pas de parents, la valeur '-1' est retournée pour ces items. Dans le cas contraire, nous devons parcourir les lignes en arrière pour rechercher celle qui est un conteneur. Ensuite, la fonction getLevel.

-
  getLevel: function(idx) {
-    if (this.isContainer(idx)) return 0;
-    return 1;
-  },
-
-

La fonction getLevel est simple. Elle retourne juste '0' pour une ligne conteneur et '1' pour une ligne non-conteneur. Si nous voulions ajouter un niveau d'imbrication supplémentaire, ces lignes enfants auraient un niveau de '2'.

-
  hasNextSibling: function(idx, after) {
-    var thisLevel = this.getLevel(idx);
-    for (var t = idx + 1; t < this.visibleData.length; t++) {
-      var nextLevel = this.getLevel(t)
-      if (nextLevel == thisLevel) return true;
-      else if (nextLevel < thisLevel) return false;
-    }
-  },
-
-

La fonction hasNextSibling doit retourner 'true' quand une ligne donnée est suivie d'une ligne de même niveau (une sœur). Le code ci-dessus utilise une méthode basique qui consiste à parcourir les lignes après celle donnée, en retournant 'true' si une ligne de même niveau est trouvée et 'false' si une ligne de niveau inférieur est rencontrée. Dans cet exemple simple, cette méthode est bonne, mais un arbre avec davantage de données aura besoin d'utiliser une méthode optimisée pour déterminer s'il existe une ligne suivante sœur.

-

Ouverture ou fermeture d'une ligne

-

La dernière fonction est toggleOpenState. C'est la plus complexe. Elle a besoin de modifier le tableau visibleData lorsqu'une ligne est ouverte ou fermée.

-
  toggleOpenState: function(idx) {
-    var item = this.visibleData[idx];
-    if (!item[1]) return;
-
-    if (item[2]) {
-      item[2] = false;
-
-      var thisLevel = this.getLevel(idx);
-      var deletecount = 0;
-      for (var t = idx + 1; t < this.visibleData.length; t++) {
-        if (this.getLevel(t) > thisLevel) deletecount++;
-        else break;
-      }
-      if (deletecount) {
-        this.visibleData.splice(idx + 1, deletecount);
-        this.treeBox.rowCountChanged(idx + 1, -deletecount);
-      }
-    }
-    else {
-      item[2] = true;
-
-      var label = this.visibleData[idx][0];
-      var toinsert = this.childData[label];
-      for (var i = 0; i < toinsert.length; i++) {
-        this.visibleData.splice(idx + i + 1, 0, [toinsert[i], false]);
-      }
-      this.treeBox.rowCountChanged(idx + 1, toinsert.length);
-    }
-  },
-
-

D'abord nous vérifions si la ligne est un conteneur. Si elle ne l'est pas, la fonction retourne juste que les non-conteneurs ne peuvent pas être ouverts ou fermés. Comme le troisième élément du tableau (celui avec l'index 2) indique si une ligne est ouverte ou fermée, nous utilisons deux blocs de code, le premier pour fermer une ligne et le second pour ouvrir une ligne. Examinons chaque bloc de code, mais en commençant par le second, chargé d'ouvrir une ligne.

-
      item[2] = true;
-
-      var label = this.visibleData[idx][0];
-      var toinsert = this.childData[label];
-      for (var i = 0; i < toinsert.length; i++) {
-        this.visibleData.splice(idx + i + 1, 0, [toinsert[i], false]);
-      }
-      this.treeBox.rowCountChanged(idx + 1, toinsert.length);
-
-

La première ligne de code définit la ligne item comme étant ouverte dans le tableau, ainsi le prochain appel de la fonction toggleOpenState saura qu'elle doit fermer la ligne. Ensuite, regardons les données pour la ligne dans la carte childData. Le résultat est que la variable 'toinsert' sera définie avec un des tableaux enfants, par exemple '["Argent", "Or", "Plomb"]' si la ligne 'Solides' est celle qu'on demande d'ouvrir. Ensuite, nous utilisons la fonction de tableau splice pour insérer une nouvelle ligne pour chaque item. Pour 'Solides', trois items seront insérés.

-

Enfin, la fonction de boîte d'arbre rowCountChanged a besoin d'être appelée. Rappelez-vous que l'objet treeBox est un objet de boîte d'arbre qui a été défini plus tôt par un appel de la fonction setTree. L'objet de boîte d'arbre sera créé par l'arbre pour vous et vous pourrez appeler ses fonctions. Dans ce cas, nous utilisons la fonction rowCountChanged pour informer l'arbre que quelques lignes de données ont été ajoutées. L'arbre redessinera son contenu avec pour résultat que les lignes enfants apparaîtront à l'intérieur du conteneur. Les autres fonctions implémentées ci-dessus, telles que getLevel et isContainer, sont utilisées par l'arbre pour déterminer son affichage.

-

La fonction rowCountChanged prend deux arguments, l'index de la ligne où doit se faire l'insertion et le nombre de lignes à insérer. Dans le code ci-dessus nous indiquons que la ligne de départ est la valeur de 'idx' + 1, elle sera la première ligne enfant sous le parent. L'arbre utilisera cette information et ajoutera l'espace nécessaire pour le nombre approprié de lignes en poussant les lignes suivantes vers le bas. Assurez-vous de fournir le nombre correct, ou l'arbre pourrait se redessiner incorrectement ou essayer de dessiner plus de lignes que nécessaire.

-

Le code suivant est utilisé pour supprimer des lignes quand une ligne est fermée.

-
      item[2] = false;
-
-      var thisLevel = this.getLevel(idx);
-      var deletecount = 0;
-      for (var t = idx + 1; t < this.visibleData.length; t++) {
-        if (this.getLevel(t) > thisLevel) deletecount++;
-        else break;
-      }
-      if (deletecount) {
-        this.visibleData.splice(idx + 1, deletecount);
-        this.treeBox.rowCountChanged(idx + 1, -deletecount);
-      }
-
-

Premièrement, l'item est déclaré fermé dans le tableau. Ensuite, nous scannons les lignes suivantes jusqu'à ce que nous atteignions une ligne de même niveau. Toutes celles qui ont un niveau supérieur auront besoin d'être supprimées, mais une ligne de même niveau sera le prochain conteneur qui ne devra pas être supprimé.

-

Enfin, nous utilisons la fonction splice pour supprimer les lignes du tableau visibleData et appelons la fonction rowCountChanged pour redessiner l'arbre. Lors de la suppression des lignes, vous aurez besoin de fournir un chiffre négatif correspondant au nombre de lignes à supprimer.

-

Exemple en entier

-

Il existe plusieurs autres fonctions de vue pouvant être implémentées mais nous n'en avons pas l'utilité dans cet exemple, donc nous créons des fonctions qui ne font rien ici. Elles sont placées à la fin de notre exemple complet :

-
<?xml version="1.0" encoding="iso-8859-1?>
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
-<window onload="init();"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<tree id="elementList" flex="1">
-  <treecols>
-    <treecol id="element" label="Élément" primary="true" flex="1"/>
-  </treecols>
-  <treechildren/>
-</tree>
-
-<script>
-<![CDATA[
-
-var treeView = {
-  childData : {
-    Solids: ["Argent", "Or", "Plomb"],
-    Liquids: ["Mercure"],
-    Gases: ["Hélium", "Azote"]
-  },
-
-  visibleData : [
-    ["Solides", true, false],
-    ["Liquides", true, false],
-    ["Gaz", true, false]
-  ],
-
-  treeBox: null,
-  selection: null,
-
-  get rowCount()                     { return this.visibleData.length; },
-  setTree: function(treeBox)         { this.treeBox = treeBox; },
-  getCellText: function(idx, column) { return this.visibleData[idx][0]; },
-  isContainer: function(idx)         { return this.visibleData[idx][1]; },
-  isContainerOpen: function(idx)     { return this.visibleData[idx][2]; },
-  isContainerEmpty: function(idx)    { return false; },
-  isSeparator: function(idx)         { return false; },
-  isSorted: function()               { return false; },
-  isEditable: function(idx, column)  { return false; },
-
-  getParentIndex: function(idx) {
-    if (this.isContainer(idx)) return -1;
-    for (var t = idx - 1; t >= 0 ; t--) {
-      if (this.isContainer(t)) return t;
-    }
-  },
-  getLevel: function(idx) {
-    if (this.isContainer(idx)) return 0;
-    return 1;
-  },
-  hasNextSibling: function(idx, after) {
-    var thisLevel = this.getLevel(idx);
-    for (var t = idx + 1; t < this.visibleData.length; t++) {
-      var nextLevel = this.getLevel(t)
-      if (nextLevel == thisLevel) return true;
-      else if (nextLevel < thisLevel) return false;
-    }
-  },
-  toggleOpenState: function(idx) {
-    var item = this.visibleData[idx];
-    if (!item[1]) return;
-
-    if (item[2]) {
-      item[2] = false;
-
-      var thisLevel = this.getLevel(idx);
-      var deletecount = 0;
-      for (var t = idx + 1; t < this.visibleData.length; t++) {
-        if (this.getLevel(t) > thisLevel) deletecount++;
-        else break;
-      }
-      if (deletecount) {
-        this.visibleData.splice(idx + 1, deletecount);
-        this.treeBox.rowCountChanged(idx + 1, -deletecount);
-      }
-    }
-    else {
-      item[2] = true;
-
-      var label = this.visibleData[idx][0];
-      var toinsert = this.childData[label];
-      for (var i = 0; i < toinsert.length; i++) {
-        this.visibleData.splice(idx + i + 1, 0, [toinsert[i], false]);
-      }
-      this.treeBox.rowCountChanged(idx + 1, toinsert.length);
-    }
-  },
-
-  getImageSrc: function(idx, column) {},
-  getProgressMode : function(idx,column) {},
-  getCellValue: function(idx, column) {},
-  cycleHeader: function(col, elem) {},
-  selectionChanged: function() {},
-  cycleCell: function(idx, column) {},
-  performAction: function(action) {},
-  performActionOnCell: function(action, index, column) {},
-  getRowProperties: function(idx, column, prop) {},
-  getCellProperties: function(idx, column, prop) {},
-  getColumnProperties: function(column, element, prop) {},
-};
-
-function init() {
-  document.getElementById("elementList").view = treeView;
-}
-
-]]></script>
-
-</window>
-
-
-

Ensuite, nous verrons plus en détails l'objet de boîte d'arbre.

-
-

« PrécédentSuivant »

-
-

Interwiki

-

 

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/exemple_xbl/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/exemple_xbl/index.html deleted file mode 100644 index b8b61c00ae..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/exemple_xbl/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Exemple XBL -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Exemple_XBL -tags: - - Tutoriel_XUL - - Tutoriels - - XBL - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Example ---- -
-

« PrécédentSuivant »

-
- -

Cette section va décrire un exemple d'élément XBL.

- -

Un élément de diaporama

- -

Construisons un exemple complet d'un élément XBL. Il s'agira de créer un élément graphique qui stocke un paquet d'objets, en les affichant un par un. Des boutons de navigation situés sur le bas permettront à l'utilisateur d'afficher les objets les uns aprés les autres tandis qu'un élément graphique textuel entre les boutons affichera le numéro de la page courante. Vous pourriez mettre n'importe quoi dans les pages, cependant, cet élément graphique pourrait être utile pour afficher une série d'images. Nous l'appellerons élément de diaporama.

- -

Contenu du diaporama

- -

Tout d'abord, déterminons quels sont les éléments qui ont besoin d'aller dans le contenu XBL. Puisque nous voulons un changement de page, un élément deck sera le plus approprié pour contenir les pages. Le contenu des pages sera spécifié dans le fichier XUL, et non dans XBL, mais nous aurons besoin de l'ajouter au sein du paquet (deck). La balise children devra être utilisée. En bas, nous aurons besoin d'un bouton pour aller à la page précédente, d'un élément graphique pour afficher la numéro de la page courante, et d'un bouton pour aller à la page suivante.

- -

Exemple 1 : Source

- -
<binding id="slideshow">
-  <content>
-    <xul:vbox flex="1">
-      <xul:deck xbl:inherits="selectedIndex" selectedIndex="0" flex="1">
-        <children/>
-      </xul:deck>
-      <xul:hbox>
-        <xul:button xbl:inherits="label=previoustext"/>
-        <xul:label flex="1"/>
-        <xul:button xbl:inherits="label=nexttext"/>
-      </xul:hbox>
-    </xul:vbox>
-  </content>
-</binding>
-
- -

Cette liaison crée la stucture de la présentation que nous souhaitons. L'attribut flex a été ajouté à plusieurs éléments pour qu'ils s'étendent de la bonne manière. Les attributs label sur les deux boutons héritent des valeurs de l'élément qui leur est attaché. Ici, ils héritent de deux attributs personnalisés, previoustext et nexttext. Ils rendent le changement des libellés des boutons simple. Les fils de l'élément auquel l'élément XBL est relié seront placés au sein de l'élément deck. L'attribut selectedIndex est hérité par le paquet, ainsi nous pouvons déclarer la page initiale dans XUL.

- -

Le fichier XUL suivant produit le résultat affiché dans l'image.

- -
<box class="slideshow" previoustext="Précédent" nexttext="Suivant" flex="1">
-  <button label="Bouton 1"/>
-  <checkbox label="Case à cocher 2"/>
-  <textbox/>
-</box>
-
- -

Le style CSS utilisé ici est :

- -
.slideshow {
-  -moz-binding: url("slideshow.xml#slideshow");
-}
-
- -
Image:xultu_xblex1.jpg
- -

Le premier bouton, 'Bouton 1' a été utilisé comme première page du paquet. L'élément graphique label n'est pas apparu puisqu'aucun attribut value ne lui a été spécifié. Nous pourrions déclarer une valeur, mais elle sera plutôt calculée plus tard.

- -

Propriété page

- -

Ensuite, une propriété contenant le numéro de la page courante est ajoutée. Pour lire cette propriété personnalisée, il est nécessaire de rechercher la valeur de l'attribut selectedIndex du paquet qui contient le numéro de la page affichée. De même, lorsqu'on modifiera cette propriété, il sera nécessaire de changer l'attribut selectedIndex du paquet. De plus, l'élément graphique textuel devra être mis à jour pour afficher le numéro de la page courante.

- -
<property name="page"
-    onget="return parseInt(document.getAnonymousNodes(this)[0].childNodes[0].getAttribute('selectedIndex'));"
-    onset="this.setPage(val);"/>
-
- -

La propriété page obtient sa valeur en observant le premier élément du tableau anonyme. Elle renvoie la boîte verticale, donc, pour obtenir le paquet, nous devons obtenir le premier nœud fils de la boîte. Le tableau anonyme n'est pas utilisé puisque le paquet n'est pas anonyme à partir de la boîte. Finalement, la valeur de l'attribut selectedIndex est récupérée. Pour spécifier la page, une méthode setPage qui sera définie plus tard est appelée.

- -

Un gestionnaire oncommand devra être ajouté aux boutons 'Précédent' et 'Suivant' pour que la page soit changée lorsque les boutons sont pressés. Nous pouvons changer facilement la page en utilisant la propriété personnalisée page qui vient d'être ajoutée :

- -
<xul:button xbl:inherits="label=previoustext"
-               oncommand="parentNode.parentNode.parentNode.page--;"/>
-<xul:description flex="1"/>
-<xul:button xbl:inherits="label=nexttext"
-               oncommand="parentNode.parentNode.parentNode.page++;"/>
-
- -

Étant donné que la propriété page est dans l'élément XUL externe, nous devons utiliser la propriété parentNode pour l'obtenir. La première propriété parentNode retourne l'élément parent du bouton qui est la boîte horizontale, la seconde son parent, la boîte verticale, et la dernière son parent qui est la boîte externe. La propriété page est incrémentée ou décrémentée. Elle va appeler le script onget pour obtenir la valeur, incrémentera ou décrémentera la valeur, et enfin appellera le gestionnaire onset pour enregistrer la valeur.

- -

Méthode setPage

- -

Définissons à présent la méthode setPage. Elle prendra un paramètre, le numéro de page qui sert à spécifier la page. Il sera nécessaire de vérifier que le numéro de page n'est pas en dehors des limites et ensuite modifier les attributs selectedIndex du paquet et l'attribut label de l'élément graphique textuel.

- -
<method name="setPage">
-  <parameter name="newidx"/>
-  <body>
-    <![CDATA[
-      var thedeck=document.getAnonymousNodes(this)[0].childNodes[0];
-      var totalpages=this.childNodes.length;
-
-      if (newidx<0) return 0;
-      if (newidx>=totalpages) return totalpages;
-      thedeck.setAttribute("selectedIndex",newidx);
-      document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1]
-              .setAttribute("value",(newidx+1)+" of "+totalpages);
-      return newidx;
-    ]]>
-  </body>
-</method>
-
- -

Cette fonction est appelée setPage et prend un paramètre newidx. Le corps de la méthode a été encapsulé entre '<![CDATA[' et ']]>'. C'est le mécanisme général dans tous les fichiers XML qui peut être utilisé pour échapper tout le texte à l'intérieur. De cette manière, vous n'avez pas besoin d'échapper tous les signes "inférieur" et "supérieur" à l'intérieur.

- -

Décomposons le code morceau par morceau.

- -
-
var thedeck=document.getAnonymousNodes(this)[0].childNodes[0];
-
Récupère le premier élément du tableau de contenu anonyme qui sera la boîte verticale, puis obtient son premier fils qui sera le paquet deck.
-
var totalpages=this.childNodes.length;
-
Récupère le nombre de fils que détient la boîte qui est liée. Cela donnera le nombre total de pages qui s'y trouve.
-
if (newidx<0) return 0;
-
Si le nouvel index est avant la première page, ne pas changer la page et retourner '0'. La page ne devrait pas donner une valeur plus petite que la première page.
-
if (newidx>=totalpages) return totalpages;
-
Si le nouvel index est après la dernière page, ne pas changer la page et retourner le dernier index de page. La page ne devrait pas devenir celle qui est après la dernière.
-
thedeck.setAttribute("selectedIndex",newidx);
-
Changer l'attribut selectedIndex du paquet. Cela entraîne l'affichage de la page demandée.
-
document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1].setAttribute("value", (newidx+1)+" sur "+totalpages);
-
Cette ligne modifie l'élément label pour qu'il affiche l'index de la page courante. L'élément label peut être récupéré en obtenant le premier élément du contenu anonyme (la boîte verticale), le second fils de cet élément (la boîte horizontale), et enfin le second élément de cette boîte. L'attribut value est modifié pour indiquer '1 sur 3' ou quelque chose de similaire. Notez que l'index est incrémenté de un parce que les indices commence à '0'.
-
- -

Constructeur

- -

Nous allons aussi avoir besoin d'un constructeur pour initialiser l'élément label afin qu'il s'affiche correctement la première fois que la présentation est affichée. Nous utilisons un code similaire à la méthode ci-dessus pour déclarer le numéro de page. La référence à 'this.page' va appeler le script onget de la propriété page qui à son tour va recupérer la page initiale à partir de l'attribut selectedIndex.

- -
<constructor>
-  var totalpages=this.childNodes.length;
-  document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1]
-          .setAttribute("value",(this.page+1)+" of "+totalpages);
-</constructor>
-
- -

Fonctionnalités supplémentaires

- -

Nous pouvons aussi ajouter quelques caractéristiques supplémentaires. Certains raccourcis claviers peuvent être utilisés pour les boutons 'Précédent' et 'Suivant', (disons l'effacement arrière et la touche Entrée). Des boutons 'Premier' et 'Dernier' peuvent être ajoutés pour aller à la première et à la dernière page. L'élément label pourrait être transformé en un champ de saisie où l'utilisateur pourrait entrer la page à afficher, ou une fenêtre surgissante pourrait être ajoutée pour permettre la sélection de la page à partir d'un menu. Nous pourrions aussi ajouter une bordure autour de la boîte avec un style CSS pour la rendre plus jolie.

- -

Le code final

- -

Le code final est le suivant :

- -

Exemple 2 : Source

- -
<binding id="slideshow">
-  <content>
-    <xul:vbox flex="1">
-      <xul:deck xbl:inherits="selectedIndex" selectedIndex="0" flex="1">
-        <children/>
-      </xul:deck>
-      <xul:hbox>
-        <xul:button xbl:inherits="label=previoustext"
-                    oncommand="parentNode.parentNode.parentNode.page--;"/>
-        <xul:description flex="1"/>
-        <xul:button xbl:inherits="label=nexttext"
-                    oncommand="parentNode.parentNode.parentNode.page++;"/>
-      </xul:hbox>
-    </xul:vbox>
-  </content>
-
-  <implementation>
-
-    <constructor>
-      var totalpages=this.childNodes.length;
-      document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1]
-              .setAttribute("value",(this.page+1)+" sur "+totalpages);
-    </constructor>
-
-    <property name="page"
-          onget="return parseInt(document.getAnonymousNodes(this)[0].childNodes[0].getAttribute('selectedIndex'));"
-          onset="this.setPage(val);"/>
-
-    <method name="setPage">
-      <parameter name="newidx"/>
-      <body>
-        <![CDATA[
-          var thedeck=document.getAnonymousNodes(this)[0].childNodes[0];
-          var totalpages=this.childNodes.length;
-
-          if (newidx<0) return 0;
-          if (newidx>=totalpages) return totalpages;
-          thedeck.setAttribute("selectedIndex",newidx);
-          document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1]
-                  .setAttribute("value",(newidx+1)+" sur "+totalpages);
-          return newidx;
-        ]]>
-      </body>
-    </method>
-  </implementation>
-
-</binding>
-
- -
-

Nous allons voir ensuite quelques propriétés additionnelles d'une fenêtre.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/exemples_xpcom/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/exemples_xpcom/index.html deleted file mode 100644 index 50bd44eb6e..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/exemples_xpcom/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Exemples XPCOM -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Exemples_XPCOM -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Examples ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Cette section donne quelques exemples d'utilisation de la technologie XPCOM avec de nouvelles interfaces.

- -

Gestion de Fenêtres

- -
Cet exemple contient une source de données RDF qui sera décrite dans une prochaine section. Vous devriez passer cet exemple pour l'instant, à moins d'en savoir suffisamment sur le sujet.
- -

Création d'un menu de fenêtre

- -

La liste des fenêtres Mozilla ouvertes peut être utilisée comme une source de données RDF. Elle vous permet de créer dans votre application un menu donnant la liste des fenêtres courantes ouvertes. La source de données correspondante est 'rdf:window-mediator' dont voici un exemple d'utilisation :

- -

Exemple 1 : Source

- -
<toolbox>
- <menubar id="windowlist-menubar">
-  <menu label="Fenêtres">
-   <menupopup id="window-menu" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot">
-    <template>
-     <rule>
-      <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/>
-     </rule>
-    </template>
-   </menupopup>
-  </menu>
- </menubar>
-</toolbox>
-
- -

Un menu contenant la liste de toutes les fenêtres ouvertes sera créé. Essayez cet exemple en ouvrant plusieurs fenêtres, et vous les verrez toutes dans le menu.

- -

Composant mediator

- -

Cet exemple peut être amélioré de telle façon que lorsque l'on clique sur un élément du menu, la fenêtre correspondante soit affichée. Cette tâche sera rendue possible grâce au composant "window mediator" qui implémente l'interface nsIWindowDataSource. Le code suivant montre comment il fonctionne :

- -
var wmdata = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getService();
-wmdata.QueryInterface(Components.interfaces.nsIWindowDataSource);
-
- -

Ce code récupère le composant "window mediator". Le composant utilisé ici est le même que celui qui gère la source de données RDF "Window-mediator". Vous pouvez également récupérer ce composant au travers du service RDF qui est un autre service de gestion des sources de données RDF.

- -

L'interface nsIWindowDataSource possède une fonction getWindowForResource qui nous donne une fenêtre à partir d'une ressource. Dans un exemple précédent, nous avons généré une liste de fenêtres que nous avons ajoutée à un menu via une balise template. Celle-ci génère un attribut id pour chaque élément menuitem. La valeur de cet attribut peut être utilisée comme ressource. Ainsi pour donner le focus à la fenêtre sélectionnée, nous pouvons procéder de la manière suivante :

- -
    -
  1. Déterminer l'élément que l'utilisateur a sélectionné.
    2. -
  2. Récupérer la valeur de l'attribut id de cet élément.
    3. -
  3. Passer cette valeur à getWindowForResource() pour avoir l'objet "window".
    4. -
  4. Mettre le focus sur celle-ci.
    5. -
- -

L'exemple ci-dessous nous montre comment procéder :

- -
<toolbox>
- <menubar id="windowlist-menubar">
-  <menu label="Fenêtre" oncommand="switchFocus(event.target);">
-   <menupopup id="window-menu" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot">
-    <template>
-     <rule>
-      <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/>
-     </rule>
-    </template>
-   </menupopup>
-  </menu>
- </menubar>
-</toolbox>
-
-<script>
-function switchFocus(elem)
-{
-  var mediator = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getService();
-  mediator.QueryInterface(Components.interfaces.nsIWindowDataSource);
-
-  var resource = elem.getAttribute('id');
-  switchwindow = mediator.getWindowForResource(resource);
-
-  if (switchwindow){
-    switchwindow.focus();
-  }
-}
-</script>
-
- -

Un gestionnaire de commande a été ajouté à l'élément menu. Ce gestionnaire appelle la fonction switchFocus() avec comme paramètre l'élément du menu que nous avons sélectionné. La fonction switchFocus() :

- - - -

Cookies

- -

Maintenant, nous allons récupérer la liste des cookies sauvegardés par le navigateur. Nous allons utiliser le service "Cookie" qui implémente l'interface nsICookieManager utilisée pour énumérer tous les cookies. Voici un exemple qui alimente la liste d'un menu avec le nom de tous les cookies provenant du site MozillaZine.

- -
<script>
-
-function getCookies()
-{
-  var menu = document.getElementById("cookieMenu");
-  menu.removeAllItems();
-
-  var cookieManager = Components.classes["@mozilla.org/cookiemanager;1"]
-                        .getService(Components.interfaces.nsICookieManager);
-
-  var iter = cookieManager.enumerator;
-  while (iter.hasMoreElements()){
-    var cookie = iter.getNext();
-    if (cookie instanceof Components.interfaces.nsICookie){
-      if (cookie.host == "www.mozillazine.org")
-        menu.appendItem(cookie.name,cookie.value);
-    }
-  }
-}
-</script>
-
-<hbox>
-  <menulist id="cookieMenu" onpopupshowing="getCookies();"/>
-</hbox>
-
- -

La fonction getCookies() sera appelée à chaque ouverture du menu, comme indiqué par l'attribut onpopupshowing de l'élément menulist. Les deux premières lignes de getCookies() récupèrent l'élément menulist et suppriment tous les items existants. En effet comme cette fonction est appelée à chaque fois que nous l'ouvrons, nous ne voulons pas garder les anciens éléments.

- -

Ensuite, le gestionnaire de cookie est récupéré. Celui-ci a une méthode qui renvoie un objet énumérateur implémentant nsISimpleEnumerator. Il nous permet de parcourir tous les cookies. Un énumérateur dispose d'une méthode hasMoreElements() retournant 'true' jusqu'à ce que le dernier cookie soit récupéré. La méthode getNext() renvoie un cookie et incrémente l'index de l'énumérateur. Comme l'énumérateur ne renvoie qu'un objet générique, nous devons lui indiquer que nous voulons utiliser l'interface nsICookie. Dans ce cas, l'opérateur instanceof permet d'accomplir cette vérification.

- -

Finalement, un élément est ajouté au menu pour chaque cookie ( NdT : dont le site hôte est "www.mozillazine.org"). Les propriétés hôte, nom et valeur du cookie sont alors utilisées. Les menus ont une fonction appendItem() qui ajoute un élément avec un libellé et une valeur.

- -

Voir aussi

- -

D'autres exemples sont disponibles ici :

- - - -
-

Dans la section suivante, nous allons voir comment utiliser le presse papier.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/focus_et_selection/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/focus_et_selection/index.html deleted file mode 100644 index 84e67cec8b..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/focus_et_selection/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Focus et Selection -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Focus_et_Selection -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Focus_and_Selection ---- -

 

-
-

« PrécédentSuivant »

-
-

Cette section va décrire comment manipuler le focus et la sélection des éléments.

-

Éléments focalisés

-

L'élément focalisé est l'élément qui reçoit les événements entrants. S'il y a trois champs de saisie sur une fenêtre, celui qui détient le focus est celui dans lequel l'utilisateur peut taper du texte. Un seul élément à la fois peut détenir le focus.

-

L'utilisateur peut changer le focus en cliquant sur un élément avec la souris ou en appuyant sur la touche Tab (tabulation). Lorsque la touche tabulation est appuyée, le focus passe à l'élément suivant. Pour revenir en arrière, il suffit d'appuyer sur les touches Maj (shift) et Tab simultanément.

-

Réarrangement de l'ordre des tabulations

-

Vous pouvez changer l'ordre dans lequel les éléments seront focalisés quand l'utilisateur appuiera sur la touche Tab en ajoutant un attribut tabindex à un élément. Cet attribut doit être renseigné avec un nombre. Lorsque l'utilisateur appuiera sur la touche Tab, le focus sera donné à l'élément ayant l'index de tabulation consécutif le plus haut. Cela implique que vous pouvez ordonner les éléments en définissant des indices pour séquencer les éléments. Toutefois, vous n'aurez normalement pas à définir l'attribut tabindex. Dans ce cas, un appui sur la touche tabulation donnera le focus à l'élément suivant affiché. Vous avez seulement besoin de définir des indices de tabulation si vous voulez utiliser un ordre différent. Voici un exemple :

-

Exemple 1 : Source Voir

-
<button label="Bouton 1" tabindex="2"/>
-<button label="Bouton 2" tabindex="1"/>
-<button label="Bouton 3" tabindex="3"/>
-
-

L'événement focus

-

L'événement 'focus' est utilisé pour réagir lorsqu'un élément obtient le focus. L'événement 'blur' est utilisé pour réagir lorsqu'un un élément perd le focus. Vous pouvez réagir aux changements de focus en ajoutant un attribut onfocus ou onblur à un élément. Ils fonctionnent de la même façon que leurs homologues HTML. Vous pouvez utiliser ces événements pour mettre un élément en surbrillance ou afficher un texte dans la barre d'état. L'exemple suivant peut s'appliquer à une fonction de gestion des événements de focus.

-

Exemple 2: Source Voir

-
<script>
-
-function displayFocus(){
-  var elem=document.getElementById('sbar');
-  elem.setAttribute('value','Entrez votre numéro de téléphone.');
-}
-
-</script>
-
-<textbox id="tbox1"/>
-<textbox id="tbox2" onfocus="displayFocus();"/>
-<description id="sbar" value=""/>
-
-

Quand l'événement 'focus' est déclenché, il va appeler la fonction displayFocus. Cette fonction va changer la valeur du libellé texte. Nous pourrions développer cet exemple pour effacer le texte quand l'événement 'blur' a lieu. Généralement, vous utiliserez les événements focus et blur pour mettre à jour certaines parties de votre interface, quand l'utilisateur sélectionne des éléments. Par exemple, vous pouvez mettre à jour un total quand l'utilisateur entre des valeurs dans d'autres champs, ou utiliser les événements de focus pour vérifier certaines valeurs. N'affichez pas de messages d'alerte pendant un événement focus ou blur, car ils pourraient distraire l'utilisateur et ils dégradent le design de l'interface.

-

Vous pouvez aussi ajouter dynamiquement des gestionnaires d'événements en utilisant la fonction DOM addEventListener. Vous pouvez l'utiliser pour n'importe quel élément et type d'événement. Elle prend trois paramètres : le type d'événement, une fonction à exécuter quand l'événement est produit et un booléen indiquant la phase de capture de l'événement.

-

Obtention de l'élément actuellement focalisé

-

L'élément ayant le focus est pris en charge par un objet appelé « répartiteur de commandes », dont il ne peut y avoir qu'une instance par fenêtre. Le répartiteur de commandes garde la trace de l'objet qui a le focus pendant que l'utilisateur se sert de l'interface. Le répartiteur de commandes a d'autres rôles, qui seront abordés plus tard dans la section des commandes. Pour le moment, nous allons nous intéresser à quelques fonctions relatives au focus du répartiteur de commandes.

-

Vous pouvez récupérer le répartiteur de commandes d'une fenêtre en utilisant la propriété commandDispatcher du document. À partir de là, vous pouvez obtenir l'élément focalisé avec la propriété focusedElement du répartiteur. L'exemple ci-dessous illustre ce cas.

-

Exemple 3: Source Voir

-
<window id="focus-example" title="Exemple Focus"
-        onload="init();"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<script>
-function init(){
-  addEventListener("focus",setFocusedElement,true);
-}
-
-function setFocusedElement(){
-  var focused = document.commandDispatcher.focusedElement;
-  document.getElementById("focused").value = focused.tagName;
-}
-</script>
-
-<hbox>
-  <label control="username" value="Nom d'utilisateur:"/>
-  <textbox id="username"/>
-</hbox>
-
-<button label="Bonjour"/>
-<checkbox label="Se souvenir de ce choix"/>
-
-<label id="focused" value="-pas de focus-"/>
-
-</window>
-
-

Dans cet exemple, un gestionnaire d'événement de focus est attaché à la fenêtre. Nous voulons utiliser un gestionnaire de capture d'événements, donc la méthode addEventListener doit être utilisée. Elle associe un gestionnaire de capture d'événements à la fenêtre qui appellera la méthode setFocusedElement. Cette méthode récupère l'élément focalisé depuis le répartiteur de commandes et modifie un libellé avec le nom de sa balise. Quand l'élément focalisé change, le libellé montre le nom de l'élément.

-

Plusieurs choses sont à noter :

- -

Rendre un libellé focalisable

-

Si vous créez des éléments personnalisés, vous pouvez décider si un élément peut prendre le focus ou non. Il vous suffit d'utiliser la propriété de style spéciale -moz-user-focus. Cette propriété détermine si un élément peut être focalisé ou non. Par exemple, vous pouvez rendre un libellé focalisable, comme dans l'exemple ci-dessous.

-

Exemple 4: Source Voir

-
<label id="focused" style="-moz-user-focus: normal;"
-      onkeypress="alert('Étiquette focalisée');" value="Focalise moi"/>
-
-

La propriété de style est réglée à 'normal'. Vous pouvez aussi la définir à 'ignore' pour désactiver le focus pour un élément. Toutefois, elle ne doit pas être utilisée pour désactiver un élément ; l'attribut ou la propriété disabled doit être utilisée dans ce cas, car elle a été conçue pour. Dans l'exemple, une fois le libellé focalisé, il peut réagir aux événements du clavier. Évidemment, le libellé ne donne aucune indication sur son focus, car il n'est normalement pas prévue pour cet usage.

-

Changer le focus

-

Il existe plusieurs façons de changer d'élément focalisé. La plus simple est d'appeler la méthode focus de l'élément XUL que vous voulez focaliser. La méthode blur peut être employée afin d'enlever le focus d'un élément. L'exemple suivant met en pratique ces principes :

-

Exemple 5: Source Voir

-
<textbox id="addr"/>
-
-<button label="Focus" oncommand="document.getElementById('addr').focus()"/>
-
-

Vous pouvez aussi utiliser les méthodes advanceFocus et rewindFocus du répartiteur de commandes. Ces méthodes changent le focus respectivement vers l'élément suivant ou précédent de la séquence de tabulation. Elles correspondent aux actions réalisées lorsque l'utilisateur appuie sur Tab ou Maj+Tab.

-

Pour les champs de saisie, un attribut spécial, focused est ajouté quand l'élément obtient le focus. Vous pouvez vérifier la présence de cet attribut pour déterminer si l'élément a le focus, soit depuis un script, soit depuis une feuille de styles. Il aura la valeur 'true' si le champ de saisie a le focus, et le cas échéant, l'attribut ne sera pas présent.

-

Supposons que vous souhaitez déplacer le focus vers le prochain emplacement connu par le navigateur. pour y arriver, un utilisateur va typiquement appuyer sur la touche Tab. Vous pouvez faire la même chose dès lors que vous disposez d'un document de navigation XUL en faisant :

-
   document.commandDispatcher.advanceFocus();
-
-

En fait, l'objet commandDispatcher implémente simplement l'interface nsIDOMXULCommandDispatcher. D'autres fonctions peuvent également vous intéressez si vous manipulez des focus.

-

Comportements spécifiques de plate-forme

-
Mac OS X 
Il existe une préférence appelée « Full Keyboard Access » (FKA - Accès au clavier complet). XUL respecte ce mécasnisme. Cela signifie que si la préférence FKA est sur 'off', seuls les champs de saisie, les listes et les arbres peuvent recevoir le focus au clavier, ainsi que vos scripts utilisant focus().
-
-

Gestion des modifications de texte

-

Deux événements peuvent être utilisés lorsque l'utilisateur modifie la le contenu d'un champ de saisie. Naturellement, ces événements seront uniquement transmis au champ de saisie ayant le focus.

- -

Sélection de texte

-

Lorsque vous travaillez avec un champ de saisie, vous pouvez récupérer uniquement le texte que l'utilisateur a sélectionné. Ou alors vous pouvez changer la sélection.

-

Les champs de saisie XUL offrent la possibilité de récupérer et de modifier une sélection. La plus simple et de sélectionner tout le texte du champ. Cela implique l'utilisation de la méthode select du champ de saisie.

-
tbox.select();
-

Toutefois, vous pouvez aussi sélectionner seulement une partie du texte. Il vous suffit d'utiliser la fonction setSelectionRange. Elle prend deux paramètres, le premier représente le caractère de départ et le second le caractère suivant le dernier que vous voulez sélectionner. Les valeurs commencent à zéro, donc le premier caractère est indicé à '0', le second à '1' et ainsi de suite.

-
tbox.setSelectionRange(4,8);
-

Cet exemple va sélectionner le cinquième caractère affiché, ainsi que le sixième, le septième et le huitième. S'il n'y avait que six caractères présents dans le champ, seuls le cinquième et le sixième auraient été sélectionnés. Aucune erreur ne serait signalée.

-

Si vous utilisez la même valeur pour les deux paramètres, le début et la fin de la sélection changent pour la même position. Le résultat revient à changer la position du curseur dans le champ de saisie. Par exemple, la ligne ci-dessous peut être utilisée pour ramener le curseur au début du texte.

-
tbox.setSelectionRange(0,0);
-

Vous pouvez récupérer la sélection en cours en utilisant les propriétés selectionStart et selectionEnd. Ces propriétés définissent respectivement le début et la fin de la sélection. Si les deux sont définies à la même valeur, aucun texte n'est sélectionné, mais les valeurs représentent la position du curseur. Une fois que vous avez les valeurs de début et de fin, vous pouvez récupérer la section de chaîne du texte.

-

Vous pouvez récupérer et modifier le contenu du champ de saisie en utilisant la propriété value.

-

Une autre propriété utile des champs de saisie est la propriété textLength qui contient le nombre total de caractères dans le champ.

-
-

Dans la prochaine section, nous découvrirons comment utiliser les commandes.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/fonctions_additionnelles_d'installation/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/fonctions_additionnelles_d'installation/index.html deleted file mode 100644 index 693b2faeca..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/fonctions_additionnelles_d'installation/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Fonctions additionnelles d'installation -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Fonctions_additionnelles_d'installation -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Additional_Install_Features ---- -

 

- -
-

« Précédent

-
- -
NdT : Attention, cette section décrit le mécanisme XPInstall propre à la suite Mozilla et à des versions anciennes de Mozilla Firefox. Pour les versions récentes de Mozilla Firefox, ce mode d'installation n'est plus le même, mais il n'est pas encore décrit dans ce tutoriel. Voir comment faire des extensions pour firefox sur xulfr.org.
- -

Cette section décrit quelques spécificités supplémentaires des programmes d'installation.

- -

Manipulation de fichiers lors de l'installation

- -

La section précédente décrivait un programme d'installation simple. Vous pouvez souhaiter réaliser quelques opérations plus élaborées pendant l'installation. Par exemple, vous voulez installer un paquetage seulement si certaines conditions sont réunies, comme d'avoir une librairie particulière installée.

- -

En complément de l'objet Install, l'objet File est également disponible pendant le script d'installation. Il fournit quelques fonctions qui peuvent être employées pour examiner et modifier des fichiers sur le disque. Vous pouvez les utiliser pour déplacer, copier ou effacer des fichiers avant ou après que les fichiers du paquetage soient installés. Par exemple, vous voulez peut être faire une sauvegarde de quelques fichiers d'abord.

- -

Le code ci dessous fera une copie du fichier "/bin/grep" dans le répertoire "/main".

- -
var binFolder=getFolder("file:///","bin");
-var grep=getFolder(binFolder,"grep");
-
-var mainFolder=getFolder("file:///","main");
-
-File.copy(grep,mainFolder);
-
- - - -

Des fonctions existent également pour déplacer (move()), renommer (rename()) et exécuter (execute()) des fichiers. Ainsi, vous pouvez déplacer des fichiers qui peuvent se trouver en conflit avec votre paquetage.

- -

Interception des erreurs

- -

Vous voulez certainement intercepter d'éventuelles erreurs proprement. Elles peuvent se produire si un fichier ou un répertoire ne peut pas être trouvé, si la capacité du disque n'est pas suffisant ou pour toutes autres raisons.

- -

Il vous suffit d'appeler la fonction getLastError() pour déterminer si une erreur a été rencontrée. Si elle renvoie 'SUCCESS', aucune erreur ne s'est produite. Autrement, elle renvoie un nombre qui indique le code d'erreur. Vous pouvez appeler cette fonction en tout point de votre script d'installation pour déterminer si une erreur est survenue lors de la dernière opération effectuée.

- -

Si une erreur se produit, vous voulez sûrement interrompre l'installation. Vous pouvez également vouloir afficher un message d'erreur pour l'utilisateur. Par exemple, vous pourriez mettre le script suivant à la fin de votre script d'installation :

- -
if (getLastError() == SUCCESS){
-  performInstall();
-}
-else {
-  cancelInstall();
-}
-
- -

Les codes d'erreurs susceptibles d'être renvoyés par la fonction getLastError() sont listés dans le fichier source de Mozilla nsInstall.h. Pendant l'installation, un suivi d'événements contenant les opérations réalisées est créé. Il contiendra également toutes les erreurs qui se sont produites. Ces événements peuvent être trouvés dans le fichier 'install.log' dans le répertoire d'installation de Mozilla. Un bloc de texte sera ajouté à ce fichier à chaque installation effectuée.

- -

La fonction logComment() peut être utilisée pour écrire un texte dans ce fichier d'événements. Elle nécessite un seul argument qui est le contenu du texte.

- -
-

Le Tutoriel XUL est terminé.

- -
-

« Précédent

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/gabarits/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/gabarits/index.html deleted file mode 100644 index 72a5b71bbc..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/gabarits/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Gabarits -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Gabarits -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Templates ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Dans cette section, nous allons voir comment peupler des éléments avec des données.

- -

Peuplement des éléments

- -

XUL apporte une méthode permettant de créer des éléments à partir de données fournies par RDF, que ce soit à partir d'un fichier RDF ou à partir d'une source de données interne. Plusieurs sources de données sont déjà fournies avec Mozilla comme les marque-pages, l'historique et les messages mails. Plus de détails seront donnés dans une prochaine section.

- -

Habituellement, les éléments tels que les treeitem et menuitem seront peuplés avec des données. Cependant, vous pouvez utiliser d'autres éléments si vous le voulez, bien qu'ils soient utilisés pour des cas spécifiques. Néanmoins nous commencerons avec ces autres éléments parce que les arbres et menus nécessitent plus de code.

- -

Pour permettre la création d'éléments basés sur des données RDF, vous avez besoin de fournir un gabarit simple (Ndt : template) qui sera dupliqué pour chaque élément devant être créé. En gros, vous fournissez juste le premier élément et les suivants seront construits sur le même modèle.

- -

Le gabarit est créé en utilisant l'élément template. À l'intérieur de celui-ci, vous pouvez placer les éléments que vous voulez utiliser pour chaque élément construit. L'élément template doit être placé à l'intérieur du conteneur qui contiendra les éléments construits. Par exemple, si vous utilisez un arbre tree, vous devez placer l'élément template à l'intérieur de l'élément tree.

- -

Exemple simple de gabarit

- -

C'est mieux d'expliquer avec un exemple. Prenons un exemple simple où nous voulons créer un bouton pour chaque marque-page principal. Mozilla fournit une source de données pour les marque-pages, pouvant être ainsi utilisée pour récupérer les données. Cet exemple ne récupérera que les marque-pages principaux (ou les dossiers des marque-pages) car nous allons créer des boutons. Pour les marque-pages fils, nous devrions utiliser un élément qui affiche une hiérarchie tel qu'un arbre ou un menu.

- -
Cet exemple et tous les autres qui font référence à des sources de données RDF interne, et ils ne fonctionneront que si vous les chargez à partir d'une url chrome. Pour des raisons de sécurité, Mozilla ne permet pas d'y accéder à partir de fichiers extérieurs.
- -

Pour voir cet exemple, vous devrez créer un paquet chrome contenant le fichier à charger (vous pouvez le faire facilement, consultez les fichiers manifest). Vous pouvez alors entrer l'URL chrome dans le champ de saisie des URLs du navigateur.

- -

Exemple 1 : Source

- -
<vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1">
-  <template>
-    <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/>
-  </template>
-</vbox>
-
- -
Image:xultu_templates1.jpg
- -

Ici une boîte verticale a été créée contenant une colonne de boutons, un pour chaque marque-page principal. Vous pouvez voir que le template ne contient qu'un seul button. Cet unique bouton est utilisé comme modèle pour tout les autres boutons qu'il sera nécessaire de créer. Vous pouvez voir sur l'image qu'un ensemble de boutons a été créé, un pour chaque marque-page.

- -

Essayez d'ajouter un marque-page dans le navigateur pendant que vous avez cet exemple ouvert dans une fenêtre. Vous noterez que les boutons seront mis à jour instantanément (Vous devez donner le focus à la fenêtre pour voir le changement).

- -

Conteneurs et sources de données

- -

Le gabarit lui-même est placé à l'intérieur d'une boîte verticale. La boîte a deux attributs qui lui permet d'être utilisée pour les gabarits, indiquant d'où les données proviennent. Le premier attribut de la boîte est datasources. Il est utilisé pour déclarer la source de données RDF qui fournira les données pour créer les éléments. Dans le cas présent, 'rdf:bookmarks' est indiqué. Vous devinez probablement qu'il signifie qu'il faut utiliser la source de données des marque-pages. Cette source de données est fournie par Mozilla. Pour utiliser votre propre source de données, spécifiez l'URL d'un fichier RDF dans l'attribut datasources, comme le montre l'exemple suivant :

- -
<box datasources="chrome://zoo/content/animals.rdf"
-     ref="http://www.some-fictitious-zoo.com/all-animals">
-
- -

Vous pouvez spécifier plusieurs sources de données à la fois, en les séparant avec un espace dans la valeur de l'attribut. Ainsi, l'affichage de données provenant de multiples sources est possible.

- -

L'attribut ref indique l'endroit dans la source de données à partir duquel vous voulez récupérer les données. Dans le cas des marque-pages, la valeur 'NC:BookmarksRoot' est utilisée pour indiquer la racine de la hiérarchie des marque-pages. Les autres valeurs que vous pouvez indiquer dépendront de la source de données que vous utiliserez. Si vous utilisez votre propre fichier RDF, la valeur correspondra à la valeur d'un attribut about d'un élément RDF Bag, Seq ou Alt.

- -

À l'intérieur d'un gabarit

- -

En ajoutant ces deux attributs à la boîte du dessus, vous permettez la génération d'éléments en utilisant le gabarit. Cependant, les éléments à l'intérieur du gabarit nécessite une déclaration différente. Vous noterez dans l'exemple du dessus que le bouton a un attribut uri et a une valeur inhabituelle pour l'attribut label.

- -

Un attribut à l'intérieur d'un gabarit qui commence par 'rdf:' indique que la valeur doit être prise à partir de la source de données. Dans l'exemple plus haut, c'est le cas de l'attribut label. Le reste de la valeur réfère au nom de la propriété dans la source de données. Elle est construite en prenant l'URL de l'espace de nom utilisé par la source de données et en y ajoutant le nom de la propriété. Ici, nous utilisons seulement le nom du marque-page mais d'autres champs sont disponibles.

- -

L'attribut label des boutons est renseigné avec cet URI spécial parce que nous voulons que les libellés des boutons aient le nom des marque-pages. Nous pouvons mettre cet URI sur n'importe quel attribut de l'élément button, ou n'importe quel élément. Les valeurs de ces attributs sont remplacées par les données fournies par la source de données qui, ici, sont les marque-pages. Pour finir, les libellés des boutons sont définis par les noms des marque-pages.

- -

L'exemple du dessous montre comment nous pourrions assigner d'autres attributs d'un bouton à partir de la source de données. Bien sûr, cela implique que la source de données fournisse les ressources appropriées. Si une ressource particulière est inexistante, la valeur de l'attribut sera une chaîne vide.

- -
<button class="rdf:http://www.example.com/rdf#class"
-        uri="rdf:*"
-        label="rdf:http://www.example.com/rdf#name"
-        crop="rdf:http://www.example.com/rdf#crop"/>
-
- -

Comme vous pouvez le voir, vous pouvez générer dynamiquement une liste d'éléments avec les attributs fournis par une source de données séparée.

- -

L'attribut uri est utilisé pour spécifier l'élément où la génération du contenu commencera. Le contenu extérieur ne sera généré qu'une seule fois, tandis que le contenu intérieur sera généré pour chaque ressource. Nous en verrons plus à ce propos quand nous créerons des gabarits pour les arbres.

- -

Plus d'exemples

- -

En ajoutant ces fonctionnalités au conteneur dans lequel est le gabarit, qui dans ce cas est une boîte, et aux éléments à l'intérieur du gabarit, nous pouvons générer de multiples listes de contenu à partir de données externes. Nous pouvons bien sûr mettre plus d'un élément à l'intérieur du gabarit, et ajouter une référence RDF spéciale dans les attributs sur n'importe quel élément. L'exemple suivant le montre :

- -

Exemple 2 : Source

- -
<vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1">
-  <template>
-    <vbox uri="rdf:*">
-      <button label="rdf:http://home.netscape.com/NC-rdf#Name"/>
-      <label value="rdf:http://home.netscape.com/NC-rdf#URL"/>
-    </vbox>
-  </template>
-</vbox>
-
- -

Cet exemple crée une boîte verticale avec un bouton et un libellé pour chaque marque-page. Le bouton contiendra le nom du marque-page et le libellé contiendra l'URL.

- -

Les nouveaux éléments qui sont créés ne sont fonctionnellement pas différents de ceux que vous mettez directement dans le fichier XUL. L'attribut id est ajouté à tous les éléments créés au travers du gabarit, et il est assigné à la valeur qui identifie la ressource. Vous pouvez l'utiliser pour identifier la ressource.

- -

Vous pouvez aussi spécifier de multiples ressources dans le même attribut en les séparant avec un espace, comme dans l'exemple qui suit (en savoir plus sur la syntaxe des ressources).

- -

Exemple 3 : Source

- -
<vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot"
-     flex="1">
-  <template>
-    <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name rdf:http://home.netscape.com/NC-rdf#URL"/>
-  </template>
-</vbox>
-
- -

Comment sont construits les gabarits

- -

Quand un élément a un attribut datasources, cela indique que l'élément est susceptible d'être généré à partir d'un gabarit. Notez que ce n'est pas la balise template qui détermine si le contenu sera généré, mais bien l'attribut datasources. Quand cet attribut est présent, un objet que l'on appelle un constructeur est ajouté à l'élément. C'est cet objet qui est responsable de la génération du contenu à partir du gabarit. En javascript, vous pouvez accéder à l'objet constructeur par la propriété builder, bien qu'habituellement vous en aurez seulement besoin pour régénérer le contenu dans les situations où il ne le fait pas automatiquement.

- -

Il y a deux différents types de constructeur. Le premier est un constructeur de contenu utilisé dans la plupart des situations, et l'autre est un constructeur d'arbres utilisé uniquement avec les éléments tree.

- -

Constructeur de contenu

- -

Le constructeur de contenu prend le contenu situé à l'intérieur de l'élément template et le duplique pour chaque ligne. Par exemple, si l'utilisateur a dix marque-pages dans l'exemple du dessus, dix éléments label seront créés et ajoutés en tant que fils à l'élément vbox. Si vous utilisez les fonctions DOM pour traverser l'arbre, vous trouverez ces éléments à ces emplacements et pourrez récupérer leurs propriétés. Ces éléments sont affichés, mais pas l'élément template, bien qu'il existe encore dans l'arbre du document. De plus, l'attribut id de chaque libellé sera initialisé avec la ressource RDF de la ligne correspondante.

- -

Le constructeur de contenu démarre toujours à partir de l'élément qui à l'attribut uri="rdf:*". Si l'attribut uri est placé à l'intérieur d'autres éléments, ces derniers ne seront créés qu'une seule fois. Dans l'exemple ci-dessous, un hbox sera créé et rempli avec un label pour chaque item.

- -
<template>
-  <hbox>
-    <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name"/>
-  </hbox>
-</template>
-
- -

S'il y a du contenu à l'intérieur de l'élément qui a l'attribut datasources mais en dehors de l'élément template, ce contenu apparaîtra également. Ce faisant, vous pouvez mélanger du contenu statique et dynamique dans un gabarit.

- -

Constructeur d'arbres

- -

Le constructeur d'arbres, d'autre part, ne génère pas d'éléments DOM pour chaque ligne. À la place, il récupère les données directement à partir de la source de données RDF quand il en a besoin. Comme les arbres ont souvent besoins d'afficher des centaines de lignes de données, c'est plus efficace comme ceci. Créer un élément pour chaque cellule serait trop coûteux. Cependant, en contre partie, ces arbres ne peuvent afficher que du texte (NdT : ainsi que des images et des cases à cocher), et comme aucun élément n'est créé, vous ne pouvez pas utiliser les propriétés CSS de manière habituelle pour décorer les cellules de l'arbre.

- -

Le constructeur d'arbres est utilisé seulement pour les arbres. Les autres éléments n'utilisent que le constructeur de contenu. Ceci n'est pas un problème étant donné que les autres éléments comme les menus n'ont généralement pas besoin d'afficher beaucoup d'items. Il est possible également d'utiliser le constructeur de contenu pour les arbres, ainsi un élément treeitem et d'autres seront crées pour chaque ligne.

- -

Règles

- -

Dans l'image du précédent exemple, vous avez pu noter que le troisième bouton est simplement un bouton avec des tirets comme libellé. C'est un séparateur dans la liste des marque-pages. Au cas où nous l'utiliserions, la source de données RDF des marque-pages stocke les séparateurs comme si ils étaient des marque-pages normaux. Ce que nous voulons faire est d'ajouter un petit espace à la place d'un bouton pour les ressources "séparateur". Ce qui signifie que nous voulons avoir deux différents types de contenu à créer, un type pour les marque-pages normaux, et un autre type pour les séparateurs.

- -

Nous pouvons le faire en utilisant un élément rule. Nous définissons une règle pour chaque variation des éléments que nous avons à créer. Dans notre cas, nous aurons besoin d'une règle pour les marque-pages, et une règle pour les séparateurs. Les attributs placés sur l'élément rule déterminent quelle règle s'applique sur quelle ressource RDF.

- -

Pour savoir quelle règle s'applique sur les données, chaque élément rule est analysé en séquence pour une vérification de concordance. De fait, l'ordre dans lequel vous définissez les règles est important. Les règles du début ont priorité sur les règles suivantes.

- -

Exemple de règles

- -

L'exemple suivant modifie l'exemple précédant avec deux règles.

- -

Exemple 4 : Source

- -
<window
-  id="example-window"
-  title="Liste des marque-pages"
-  xmlns:html="http://www.w3.org/1999/xhtml"
-  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
- <vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1">
-   <template>
-
-    <rule rdf:type="http://home.netscape.com/NC-rdf#BookmarkSeparator">
-     <spacer uri="rdf:*" height="16"/>
-    </rule>
-
-    <rule>
-      <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/>
-    </rule>
-
-  </template>
- </vbox>
-
-</window>
-
- -
Image:xultu_templates2.jpg
- -

En utilisant deux règles, nous permettont au contenu du gabarit d'être généré sélectivement. Dans le premier rule, les séparateurs de marque-pages sont sélectionnés, comme nous pouvons le voir par l'attribut rdf:type. Le second rule n'ayant aucun attribut, il sélectionne tout le reste.

- -

Tous les attributs placés dans l'élément rule, sont utilisés comme critère de sélection. Dans notre cas, la source de données des marque-pages fournit une propriété rdf:type pour distinguer les séparateurs. Cet attribut contient une valeur spéciale pour les séparateurs dans la source de données RDF. C'est ainsi qu'on peut les distinguer des marque-pages. Vous pouvez utiliser une technique similaire pour n'importe quel attribut que l'on peut mettre sur un élément RDF Description.

- -

La valeur spéciale d'URL donnée dans l'exemple du dessus pour la première règle, est utilisée pour les séparateurs. Elle signifie que les séparateurs s'appliqueront à la première règle en générant un élément spacer d'une hauteur de 16 pixels. Les éléments qui ne sont pas des séparateurs ne correspondront pas à la première règle, et atterriront dans la deuxième règle. Celle-ci n'a aucun attribut. Elle correspond à n'importe quelle donnée. Ce qui bien sûr, est ce que nous voulons pour le reste des données.

- -

Vous avez dû noter que, parce que nous voulons un attribut provenant de l'espace de nommage du RDF (rdf:type), nous avions besoin d'ajouter la déclaration de cet espace de nommage dans la balise window. Si nous n'avions pas fait cela, l'attribut serait attribué à l'espace de nommage XUL. Parce qu'il n'existe pas dans cet espace, la règle ne s'appliquerait pas. Si nous utilisons des attributs provenant de notre propre espace de nommage, vous devez ajouter la déclaration de votre espace de nommage pour qu'ils soient reconnus.

- -

Vous devez deviner ce qui arriverait si la seconde règle était enlevée. Le résultat serait alors un simple spacer, sans aucun marque-page puisqu'ils ne correspondent à aucune règle.

- -

Dit plus simplement, une règle correspond si tous les attributs placés dans l'élément rule correspondent aux attributs de la ressource RDF. Dans le cas d'un fichier RDF, les ressources seraient les éléments Description.

- -

Il y a cependant quelques petites exceptions. Vous ne pouvez pas faire la correspondance avec les attributs XULAttr|id, rdf:property ou rdf:instanceOf. Mais puisque vous utiliserez vos propres attributs dans votre propre espace de nommage, ces exceptions n'auront probablement pas d'importance de toute façon.

- -

Notez qu'un gabarit sans règle, comme dans le premier exemple, est équivalent fonctionnellement à un gabarit qui possède un seul rule sans attribut.

- -
-

Nous allons voir maintenant l'utilisation des gabarits avec les arbres.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/grilles/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/grilles/index.html deleted file mode 100644 index ba5a11d3b6..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/grilles/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: Grilles -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Grilles -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Grids ---- -

 

- -
-

« PrécédentSuivant »

-
- -

XUL dispose d'une série d'éléments pour créer des grilles sous forme de tableaux.

- -

Disposition tabulaire XUL

- -

XUL dispose d'un jeu d'éléments pour la mise en page sous la forme d'une grille en utilisant l'élément grid. Il a quelques similitudes avec la balise HTML table. La grille n'affiche rien du tout ; elle ne sert qu'à positionner d'autres éléments en ligne et en colonne.

- -

Une grille contient des éléments qui sont alignés comme avec des tableaux. À l'intérieur d'un élément grid, vous déclarez deux choses : les colonnes et les lignes qui sont utilisées. À l'instar des tableaux HTML, vous pouvez mettre du contenu tels que des libellés et des boutons à l'intérieur des lignes. Toutefois, la grille permet un arrangement de votre contenu soit en ligne, soit en colonne. Il est fréquent de l'utiliser en ligne comme avec un tableau. Mais vous pouvez utiliser des colonnes pour définir la taille et l'apparence des colonnes dans une grille. Autrement, vous pouvez mettre du contenu à l'intérieur de colonnes, et utiliser les lignes pour définir l'apparence. Nous étudierons d'abord l'organisation des éléments en ligne.

- -

Déclaration d'une grille

- -

Pour déclarer une série de lignes, utilisez l'élément rows, qui doit être un élément enfant de grid. À l'intérieur, vous devez ajouter les éléments row, qui représentent chacun des lignes. À l'intérieur d'un élément row, vous devez mettre le contenu que vous souhaitez sur cette ligne.

- -

De la même façon, les colonnes sont déclarées avec l'élément columns, qui doit être un élément enfant de grid. À l'intérieur de cet élément viennent les éléments individuels column, un pour chaque colonne que vous voulez dans la grille.

- -

Un exemple sera plus clair :

- -

Exemple 1: Source Voir

- -
Image:xultu_grids1.png
- -
<grid flex="1">
-
-  <columns>
-    <column flex="2"/>
-    <column flex="1"/>
-  </columns>
-
-  <rows>
-    <row>
-      <button label="Lapin"/>
-      <button label="Éléphant"/>
-    </row>
-    <row>
-      <button label="Koala"/>
-      <button label="Gorille"/>
-    </row>
-  </rows>
-
-</grid>
-
- -

Deux lignes et deux colonnes ont été ajoutées dans une grille. Chaque colonne est déclarée avec l'élément column. Un attribut flex a été assigné à chacune de ces colonnes. Chaque ligne contient deux éléments qui sont des boutons. Le premier élément de chaque élément row est placé dans la première colonne de la grille, et le second élément de chaque ligne est placé dans la seconde colonne.

- -
Notez que vous n'avez pas d'élément pour définir une cellule (il n'y a pas d'équivalent à l'élément HTML td). Au lieu de cela, vous placez vos contenus de cellules directement dans les éléments row.
- -

Grille avec d'autres éléments

- -

Bien entendu, vous pouvez utiliser n'importe quel autre élément que l'élément button. Si vous voulez une cellule particulière contenant de multiples éléments, vous pouvez utiliser une boîte imbriquée hbox ou tout autre élément boîte. Une boîte hbox représente un seul élément, mais elle peut contenir autant d'éléments que vous le souhaitez. Par exemple :

- -

Exemple 2: Source Voir

- -
<grid flex="1">
-
-  <columns>
-    <column/>
-    <column flex="1"/>
-  </columns>
-
-  <rows>
-    <row>
-      <label control="doctitle" value="Titre du document:"/>
-      <textbox id="doctitle" flex="1"/>
-    </row>
-    <row>
-      <label control="docpath" value="Répertoire:"/>
-      <hbox flex="1">
-        <textbox id="docpath" flex="1"/>
-        <button label="Parcourir..."/>
-      </hbox>
-    </row>
-  </rows>
-
-</grid>
-
- -
Image:xultu_grids2.png
- -

Remarquez sur l'image ci-contre comment la première colonne contenant les libellés a seulement un unique élément pour chaque ligne. La seconde colonne contient sur sa seconde ligne une boîte qui elle-même contient deux éléments, textbox et button. Vous pouvez ajouter d'autres boîtes imbriquées ou une autre grille dans une simple cellule.

- -

Si vous redimensionnez la fenêtre du dernier exemple, vous verrez que les champs de saisie s'ajustent en conséquence, mais pas les autres éléments. En effet, des attributs flex ont été ajoutés à ces champs de saisie et à la seconde colonne. La première colonne n'a pas besoin d'être flexible car les libellés n'ont pas besoin de changer de taille.

- -

La largeur initiale d'une colonne est déterminée par le plus large de ses éléments. De même, la hauteur d'une ligne est déterminée par la taille des éléments de cette ligne. Vous pouvez employer des propriétés CSS minwidth, maxwidth et des propriétés similaires pour affiner les dimensions.

- -

Organisation en colonnes

- -

Vous pouvez également placer des éléments à l'intérieur des éléments column au lieu des éléments row. En procédant de la sorte, les lignes sont ajoutées seulement pour définir leur nombre.

- -

Exemple 3: Source Voir

- -
<grid>
-  <rows>
-    <row/>
-    <row/>
-    <row/>
-  </rows>
-
-  <columns>
-    <column>
-      <label control="first" value="Premier nom:"/>
-      <label control="middle" value="Nom central:"/>
-      <label control="last" value="Dernier nom:"/>
-    </column>
-    <column>
-      <textbox id="first"/>
-      <textbox id="middle"/>
-      <textbox id="last"/>
-    </column>
-  </columns>
-
-</grid>
-
- -

Cette grille a trois lignes et deux colonnes. Les éléments row servent juste à définir combien de lignes la grille contient. Vous pouvez ajouter un attribut flex à une ligne pour la rendre flexible. Le contenu est placé dans chaque colonne. Le premier élément de chaque élément column est placé sur la première ligne, le second élément sur la deuxième ligne et le troisième élément sur la troisième ligne.

- -

Si vous placez du contenu à la fois sur les colonnes et sur les lignes, le contenu de l'un va se superposer à l'autre, même s'il est aligné correctement dans la grille. Cet effet correspondrait à une grille d'éléments stack.

- -

L'ordre des éléments dans la grille détermine lequel est affiché au premier plan et lequel est affiché à l'arrière-plan. Si l'élément rows est placé après l'élément columns, le contenu des lignes est affiché au premier plan. Si l'élément columns est placé après l'élément rows, le contenu des colonnes est affiché au premier plan. De même, les événements tels que les clics de souris et les touches de clavier sont seulement envoyés aux objets de premier plan. C'est pour cela que les colonnes sont définies après les lignes dans l'exemple ci-dessus. Si les colonnes avaient été placées en premier, les lignes auraient capturées les événements et aucun texte n'aurait pu être saisi dans les champs de saisie.

- -

Flexibilité des grilles

- -

Un des avantages des grilles par rapport à une série de boîtes imbriquées est que vous pouvez créer des cellules qui sont flexibles aussi bien horizontalement que verticalement. Il vous suffit de mettre un attribut flex sur les lignes et colonnes concernées. L'exemple suivant en fait la démonstration :

- -

Exemple 4: Source Voir

- -
<grid flex="1">
- <columns>
-  <column flex="5"/>
-  <column/>
-  <column/>
- </columns>
- <rows>
-  <row flex="10">
-    <button label="Cerise"/>
-    <button label="Citron"/>
-    <button label="Raisin"/>
-  </row>
-  <row flex="1">
-    <button label="Fraise"/>
-    <button label="Framboise"/>
-    <button label="Pêche"/>
-  </row>
- </rows>
-</grid>
-
- -

La première colonne et l'ensemble des lignes ont été rendus flexibles. Ainsi, chaque cellule de la première colonne est flexible horizontalement. De plus, chaque cellule est flexible verticalement car l'ensemble des lignes dispose de l'attribut flex. La cellule de la première colonne de la première ligne (le bouton 'Cerise') sera flexible horizontalement d'un facteur 5 et verticalement d'un facteur 10. La cellule suivante (le bouton 'Citron') ne sera flexible que verticalement.

- -

L'attribut flex a également été ajouté à l'élément grid afin que toute la grille soit flexible. Dans le cas contraire, elle ne s'agrandirait que dans une seule direction.

- -

Étendre une colonne

- -

Cela n'a aucun sens d'étendre une cellule sur un nombre particulier de colonnes ou de lignes multiples. Toutefois, il est possible de faire qu'une ligne ou qu'une colonne s'étende sur toute la largeur ou la hauteur de la grille. Il vous suffit d'ajouter un élément à l'intérieur d'un élément rows qui ne soit pas à l'intérieur d'un élément row. Par exemple, vous pouvez utiliser un type de boîte et y placer d'autres éléments si vous voulez en utiliser plusieurs. Voici un exemple simple :

- -

Exemple 5: Source Voir

- -
<grid>
-  <columns>
-    <column flex="1"/>
-    <column flex="1"/>
-  </columns>
-
-  <rows>
-    <row>
-      <label value="Nord Ouest"/>
-      <label value="Nord Est"/>
-    </row>
-    <button label="Équateur"/>
-    <row>
-      <label value="Sud Ouest"/>
-      <label value="Sud Est"/>
-    </row>
-  </rows>
-</grid>
-
- -

Le bouton va s'étendre pour s'ajuster sur toute la largeur de la grille comme s'il n'était pas à l'intérieur d'une ligne de la grille. Vous pouvez utiliser une technique similaire pour ajouter un élément entre deux colonnes. Il s'étendra pour s'ajuster sur toute la hauteur de la grille. Vous pouvez combiner les deux si vous le souhaitez.

- -
-

Dans la section suivante, nous verrons comment ajouter des panneaux de contenu.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/h\303\251ritage_d'attributs_xbl/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/h\303\251ritage_d'attributs_xbl/index.html" deleted file mode 100644 index e7071aad31..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/h\303\251ritage_d'attributs_xbl/index.html" +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Héritage d'attributs XBL -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Héritage_d'attributs_XBL -tags: - - Tutoriel_XUL - - Tutoriels - - XBL - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Attribute_Inheritance ---- -

 

-
-

« PrécédentSuivant »

-
-

Dans cette section, nous verrons comment les attributs peuvent être hérités.

-

l'héritage d'attributs

-

XBL permet de construire des éléments graphiques composites tout en cachant leur implémentation réelle. Cependant, avec les fonctionnalités mentionnées jusque présent, le contenu anonyme est toujours créé de la même façon. Il serait utile de pouvoir ajouter des attributs aux éléments extérieurs pour modifier les éléments intérieurs. Par exemple :

-
XUL:
-
-<searchbox/>
-
-XBL:
-
-<binding id="searchBinding">
-  <content>
-    <xul:textbox/>
-    <xul:button label="Rechercher"/>
-  </content>
-</binding>
-
-

Dans cet exemple, l'attribut label est placé directement sur l'élément button. Le problème avec cette technique est que le libellé sera le même à chaque fois que la liaison sera utilisée. Dans ce cas, il serait préférable que l'attribut soit plutôt défini sur la balise searchbox. XBL fournit un attribut inherits permettant l'héritage des attributs de l'élément extérieur. Il devra être placé sur l'élément qui héritera de ces attributs, dans notre cas sur le bouton. Sa valeur devra être initialisée par une liste des noms des attributs à hériter, séparés par des virgules.

-
<xul:textbox xbl:inherits="flex"/>
-<xul:button xbl:inherits="label"/>
-
-

Lorsque le contenu est généré, textbox obtient l'attribut flex à partir de searchbox et button obtient l'attribut label à partir de searchbox. Ils permettent à la flexibilité du champ de saisie et au libellé du bouton d'être différents à chaque utilisation de la liaison. De plus, le changement de la valeur des attributs de la balise searchbox avec un script mettra aussi à jour la balise textbox et la balise button. Vous pouvez ajouter un attribut inherits sur autant d'éléments que vous le souhaitez, pour hériter de n'importe quel nombre d'attributs.

-

Remarquez comment l'attribut inherits a été placé dans l'espace de nommage XBL, en utilisant le préfixe 'xbl:'. L'espace de nommage devrait être déclaré quelque part avant, généralement dans l'élément bindings, comme dans l'exemple suivant :

-
<bindings xmlns:xbl="http://www.mozilla.org/xbl"
-          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<xbl:binding id="buttonBinding">
-  <xbl:content>
-    <xul:button label="OK" xbl:inherits="label"/>
-  </xbl:content>
-</xbl:binding>
-
-

Dans cet exemple, le bouton hérite de l'attribut label, mais cet attribut a aussi une valeur assignée directement dans le XBL. Cette technique est utilisée pour définir une valeur par défaut si l'attribut n'est pas présent. Ce bouton héritera son attribut label de l'élément extérieur. Cependant, si aucun label n'est présent, la valeur 'OK' par défaut lui sera donnée.

-

Il peut arriver que deux éléments générés aient besoin d'hériter d'un attribut qui a le même nom. Par exemple, pour créer un champ de saisie muni d'un libellé, contenant donc un élément label et un élément textbox, le libellé (label) aura besoin d'hériter son texte à partir de l'attribut value et le champ de saisie (textbox) aura aussi besoin d'hériter sa valeur par défaut également à partir de l'attribut value. Pour résoudre cela, nous aurons besoin d'utiliser un attribut différent et le faire pointer sur le bon. L'exemple suivant montre comment procéder :

-
XUL:
-
-<box class="labeledtextbox" title="Entrer du texte:" value="OK"/>
-
-CSS:
-
-box.labeledtextbox {
-    -moz-binding: url('chrome://example/skin/example.xml#labeledtextbox');
-}
-
-XBL:
-
-<binding id="labeledtextbox">
-  <content>
-    <xul:label xbl:inherits="value=title"/>
-    <xul:textbox xbl:inherits="value"/>
-  </content>
-</binding>
-
-

L'élément textbox hérite directement de l'attribut value. Pour initialiser l'attribut value du libellé, nous aurons besoin d'utiliser un nom différent d'attribut et le faire pointer vers le vrai attribut. L'attribut inherits sur la balise label obtient son attribut title à partir de l'élément extérieur et le fait pointer vers l'attribut value de l'élément label. La syntaxe <attribut intérieur>=<attribut extérieur> est utilisée ici pour faire pointer un attribut vers un autre. Voici un autre exemple :

-
XUL:
-
-<box class="okcancel" oktitle="OK" canceltitle="Annuler" image="happy.png"/>
-
-CSS:
-
-box.okcancel {
-    -moz-binding: url('chrome://example/skin/example.xml#okcancel');
-}
-
-XBL:
-
-<binding id="okcancel">
-  <content>
-    <xul:button xbl:inherits="label=oktitle,image"/>
-    <xul:button xbl:inherits="label=canceltitle"/>
-  </content>
-</binding>
-
-

La valeur de l'attribut oktitle est projetée vers l'attribut label du premier bouton. L'attribut canceltitle est projeté vers l'attribut label du second bouton. Le premier bouton hérite aussi de l'attribut image. Le résultat est le suivant :

-
<box class="okcancel" oktitle="OK" canceltitle="Annuler" image="happy.png">
-  <button label="OK" image="happy.png"/>
-  <button label="Annuler"/>
-</box>
-
-

Remarquez que les attributs sont dupliqués dans le contenu intérieur (anonyme). La modification des attributs de la boîte avec la classe 'okannuler' affectera automatiquement les valeurs des boutons. Vous avez probablement aussi remarqué que nous avons créé nos propres noms d'attribut. Ceci est valide en XUL.

-
-

Dans la section suivante, nous regarderons l'ajout de propriétés, méthodes et événements à une liaison.

-
-

« PrécédentSuivant »

-
-

Interwiki

-

 

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/h\303\251ritage_xbl/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/h\303\251ritage_xbl/index.html" deleted file mode 100644 index a2edf8e9ba..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/h\303\251ritage_xbl/index.html" +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Héritage XBL -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Héritage_XBL -tags: - - Tutoriel_XUL - - Tutoriels - - XBL - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Inheritance ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Dans cette section, nous verrons comment étendre des définitions XBL existantes.

- -

Héritage

- -

Parfois vous pouvez vouloir créer un élément graphique XBL qui est similaire à un élément existant. Par exemple, disons que vous souhaitez créer un bouton XBL avec une fenêtre surgissante. Une manière de faire pour le créer est de dupliquer le code XBL existant des boutons. Cependant, il serait préférable de simplement étendre ce code.

- -

N'importe quelle liaison peut être étendue avec une autre. La liaison fille peut ajouter des propriétés, des méthodes et des gestionnaires d'événements. La liaison fille aura toutes les caractéristiques qui la définissent en plus des caractéristiques de la liaison dont elle hérite (et celles dont cette liaison aura elle même hérité et ainsi de suite dans l'arbre).

- -

Pour étendre une liaison existante, ajoutez un attribut extends à l'intérieur de la balise binding. Par exemple, la liaison suivante crée un champ de saisie qui ajoute le texte 'http://www' au début de sa valeur lorsque la touche F4 est pressée.

- -

Exemple 1 : Source

- -
<binding id="textboxwithhttp"
-         extends="chrome://global/content/bindings/textbox.xml#textbox">
-  <handlers>
-    <handler event="keypress" keycode="VK_F4">
-      this.value="http://www"+value;
-    </handler>
-  </handlers>
-</binding>
-
- -

L'élément XBL étend ici les fonctionnalités du champ de saisie XUL textbox. L'URL donnée dans l'attribut extends ci-dessus est l'URL de la liaison de la balise textbox. Elle signifie que la liaison hérite de tous les contenu et comportement fournis par la liaison de textbox. En plus, nous ajoutons un gestionnaire qui répond à l'événement 'keypress'.

- -

Champ de saisie semi-automatique

- -

L'exemple ci-dessus est similaire au dispositif de saisie semi-automatique qui fonctionne sous Mozilla. Un champ de saisie qui supporte la saisie semi-automatique n'est qu'un champ de saisie basique étendu avec une liaison XBL.

- -

Le champ de saisie semi-automatique ajoute une gestion spéciale d'événement de telle sorte que lorsqu'une URL est tapée, un menu va surgir proposant des suites de saisies possibles. Vous pouvez aussi l'utiliser dans vos propres applications. Créez simplement un textbox avec deux attributs spéciaux.

- -
<textbox type="autocomplete" searchSessions="history"/>
- -

Déclarez l'attribut type à 'autocomplete' pour ajouter un dispositif de saisie semi-automatique à un champ de saisie existant. Déclarez searchSessions pour indiquer le type de données à surveiller. Dans ce cas, la valeur 'history' surveillant les URLs dans l'historique est utilisée (Vous pouvez aussi utiliser la valeur 'addrbook' pour surveiller les adresses dans le carnet d'adresses.)

- -
Firefox utilise un mécanisme d'autocomplétion différent de celui de la suite Mozilla, consultez XUL:textbox (autocomplétion de Firefox).
- -
-

Dans la prochaine section, nous verrons un exemple d'élément graphique défini en XBL.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/index.html deleted file mode 100644 index 5924573c00..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Tutoriel XUL -slug: Archive/Mozilla/XUL/Tutoriel_XUL -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial ---- -

 

- -

Ce tutoriel décrit le langage XUL (XML User-interface Language). Ce langage a été créé pour l'application Mozilla afin de décrire son interface utilisateur.

- -
Introduction
- - - -
Éléments simples
- - - -
Le modèle de boîte
- - - -
Éléments communs
- - - - - - - -
Évènements et scripts
- - - -
Modèle Objet de Document (DOM)
- - - -
Arbres
- - - -
RDF et templates
- - - -
Thèmes et localisation
- - - -
Liaisons XBL
- - - -
Fenêtres spécialisées
- - - -
Installation
- - - -
-

Ce tutoriel XUL a été initialement créé par Neil Deakin. Il a généreusement accepté de l'inclure dans MDC.

-
- -
-
Information du document original
- - -
- -

Interwiki Language Links

- -

 

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/indicateurs_de_progression/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/indicateurs_de_progression/index.html deleted file mode 100644 index af289aeecf..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/indicateurs_de_progression/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Indicateurs de progression -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Indicateurs_de_progression -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Progress_Meters ---- -
-

« PrécédentSuivant »

-
-

Dans cette section, nous étudierons la création d'indicateurs de progression.

-

Ajout d'un indicateur de progression

-

Un indicateur de progression est une barre qui indique l'état d'avancement d'une tâche. Typiquement, vous la voyez lors du téléchargement de fichiers ou quand une longue opération s'exécute. XUL a un élément qui peut être utilisé pour la création d'un indicateur de progression (NdT : progressmeter). Il y a deux types d'état pour un indicateur : déterminé et indéterminé.

-

Les indicateurs de progression déterminés sont utilisés quand vous connaissez la durée d'une opération. L'indicateur de progression va se remplir, et une fois plein, l'opération doit être terminée. Il peut être utilisé pour une boîte de dialogue de téléchargement lorsque la taille des fichiers est connue.

-

Les indicateurs de progression indéterminés sont utilisés quand vous ne connaissez pas la durée d'une opération. Une animation visuelle représentera cet indicateur, sous la forme d'un rectangle zébré ou un cylindre hachuré tournant, et elle sera dépendante de votre système d'exploitation et du thème graphique utilisé.

-

Indicateur de progression déterminé : 

-
Image:xultu_prog-det.jpg
-

Indicateur de progression indéterminé : 

-
Image:xultu_prog-udet.jpg
-

Un indicateur de progression a la syntaxe suivante :

-
<progressmeter
-   id="identifier"
-   mode="determined"
-   value="0%"/>
-
-

Ses attributs sont les suivants :

-
id 
L'identifiant unique de l'indicateur de progression.
mode 
Le type d'indicateur de progression. Si sa valeur est 'determined', l'indicateur de progression est déterminé et se remplit au fur et à mesure de la tâche en cours. Si sa valeur est 'undetermined', l'indicateur de progression est indéterminé et vous ne connaissez pas la durée de la tâche en cours. La valeur par défaut est 'determined' si vous n'avez pas spécifié cet attribut.
value 
La valeur courante de l'indicateur de progression. Vous ne devez utiliser cet attribut que pour un indicateur de progression déterminé. La valeur doit être un pourcentage compris entre '0%' et '100%'. La valeur sera changée par un script selon l'avancement de la tâche.
-
-
-

Ajoutons maintenant un indicateur de progression à notre boîte de dialogue 'Recherche de fichiers'. Nous devrions normalement mettre un indicateur de progression indéterminé car nous ne connaissons pas le nombre de fichiers recherchés ou combien de temps prendra la recherche. Toutefois, nous ajouterons un indicateur normal pour l'instant car un indicateur animé risque d'être perturbant lors du développement. L'indicateur de progression devrait normalement n'apparaître que lorsque la recherche est lancée. Nous ajouterons plus tard un script pour l'afficher ou non.

-
<hbox>
-
-  <progressmeter value="50%" style="margin: 4px;">
-
-  <spacer flex="1"/>
-</hbox>
-
-
Image:xultu_progress1.png
-

La valeur a été mise à '50%' afin que vous puissiez voir la barre de progression dans la fenêtre. Une marge de 4 pixels a été définie pour séparer l'indicateur du bord de la fenêtre. Comme nous l'avons mentionné précédemment, nous voulons simplement que la barre de progression soit affichée pendant la recherche. Un script l'affichera et la masquera si nécéssaire.

-Exemple 'Recherche de fichiers' : Source Voir
-
-

Nous allons voir dans la prochaine section comment ajouter des éléments additionnels à une fenêtre en utilisant HTML.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/interfaces_xpcom/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/interfaces_xpcom/index.html deleted file mode 100644 index 5f7b8e5f1b..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/interfaces_xpcom/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Interfaces XPCOM -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Interfaces_XPCOM -tags: - - Tutoriel_XUL - - Tutoriels - - 'XPCOM:Liaisons_de_langage' - - XPConnect - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Interfaces ---- -
-

« PrécédentSuivant »

-
- -

Dans cette section, nous allons faire une brève présentation de XPCOM ("Modèle de composants objets multi plate-forme"), qui est le système d'objets utilisé par Mozilla.

- -

Appel des objets natifs

- -

En utilisant XUL, nous pouvons construire des interfaces utilisateurs complexes. En y joignant des scripts, on peut modifier l'interface et réaliser des actions. Cependant, il y a un certain nombre de choses qui ne peuvent pas être réalisées directement en javascript. Par exemple, si nous voulons créer une application gérant des courriels, nous avons besoin d'écrire des scripts permettant de se connecter au serveur de courriels, afin de les retirer ou d'en envoyer. Le langage Javascript ne permet pas de faire ce genre de choses.

- -

Le seul moyen pour le faire est d'écrire du code natif implémentant ces fonctionnalités avancées. Nous avons aussi besoin d'un moyen pour pouvoir appeler ce code natif aisément à partir de nos scripts. Mozilla fournit une telle possibilité en utilisant XPCOM.

- -
Mozilla fournit déjà plusieurs composants et interfaces XPCOM. Donc, dans la plupart des cas, il sera inutile d'écrire votre propre code natif. Après avoir lu cette section, vous pourrez rechercher des interfaces en utilisant la référence XPCOM de XULPlanet.
- -

À propos d'XPCOM

- -

Mozilla est construit à partir d'une multitude de composants, où chacun d'eux réalise une tâche précise. Par exemple, il y a un composant pour chaque menu, bouton et élément. Ces composants sont construits à partir de plusieurs définitions appelées interfaces.

- -

Une interface dans Mozilla est une définition d'un ensemble de fonctions que peuvent implémenter des composants. Les composants sont ce qui permet au code de Mozilla de réaliser des traitements. Chaque composant implémente les fonctions conforme à une interface. Un composant peut implémenter plusieurs interfaces. Et plusieurs composants peuvent implémenter la même interface.

- -

Prenons l'exemple d'un composant de fichier. Une interface sera créée décrivant les propriétés et les fonctions que l'on veut pouvoir appliquer sur un fichier. Les propriétés seront le nom du fichier, sa date de dernière modification ou sa taille. Les fonctions permettront d'effacer, de déplacer ou de copier le fichier.

- -

L'interface "Fichier" décrit uniquement les caractéristiques du fichier, elle ne les implémente pas. L'implémentation est laissé au composant. Celui-ci contiendra le code qui permettra de récupérer le nom du fichier, sa date, sa taille. Il contiendra également le code pour le copier ou le renommer.

- -

Nous n'avons pas à s'intéresser sur la manière dont l'implémentation est faite par le composant, du moment qu'il respecte l'interface correctement. Bien sûr, nous aurons une implémentation différente pour chaque plate-forme. Entre les versions Macintosh et Windows, les composants de fichier seront très différents. Cependant ils implémentent la même interface et par conséquent on peut accéder au composant en utilisant les fonctions de cette interface.

- -

Dans Mozilla, les interfaces sont préfixées par 'nsI' ou 'mozI' ainsi elles sont facilement reconnaissables. Par exemple, nsIAddressBook est l'interface qui interagit avec le carnet d'adresses, nsISound est celle utilisée pour écouter des fichiers et nsILocalFile pour manipuler des fichiers. Pour plus de détails, consultez les interfaces de Mozilla.

- -

Typiquement, les composants XPCOM sont implémentés nativement, ce qui signifie qu'ils font des choses que le langage Javascript ne peut pas réaliser. Par contre, on peut les appeler à partir de scripts. C'est ce que l'on va voir maintenant. Nous pouvons appeler n'importe laquelle des fonctions fournies par le composant telles que décrites par les interfaces qu'il implémente. Par exemple, si vous avez un composant à votre disposition, vous vérifiez alors s'il implémente l'interface nsISound, et si c'est le cas, vous pouvez jouer un son grâce lui.

- -

Le processus d'appel de composants XPCOM à partir d'un script se nomme XPConnect : une couche qui traduit les objets du script en objets natifs.

- -

Création d'objets XPCOM

- -

L'appel d'un composant XPCOM se fait en trois étapes :

- -
    -
  1. Récupérer un composant.
    2. -
  2. Récupérer la partie du composant qui implémente l'interface que l'on veut utiliser.
    3. -
  3. Appeler la fonction que l'on a besoin.
    4. -
- -

Une fois que les deux premières étapes sont réalisées, nous pouvons effectuer la dernière autant de fois que nécessaire. Prenons le cas du renommage d'un fichier. La première étape est de récupérer le composant "fichier". Puis on interroge ledit composant pour récupérer la portion qui implémente l'interface nsILocalFile. Enfin, on appelle les fonctions fournies par l'interface. Cette interface est utilisée pour représenter un unique fichier.

- -

Nous avons vu que les noms d'interfaces commencent toujours par 'nsI' ou 'mozI'. Par contre, la désignation des composants utilise la syntaxe URI. Mozilla stocke une liste de tous les composants disponibles dans son propre registre. Un utilisateur peut installer de nouveaux composants si besoin est. Ce mécanisme fonctionne comme les plugins.

- -

Mozilla fournit un composant "fichier" c'est-à-dire implémentant nsILocalFile. Ce composant est désigné par la chaîne '@mozilla.org/file/local;1'. Cette chaîne est appelée un contractID. La syntaxe d'un contractID est :

- -
@<internetdomain>/module[/submodule[...]];<version>[?<name>=<value>[&<name>=<value>[...]]]
- -

D'autres composants peuvent être appelés de la même manière.

- -

Le contractID du composant sert à obtenir le composant. Voici en Javascript le code correspondant :

- -
var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
- -

Le composant "fichier" est récupéré et stocké dans la variable aFile. Dans l'exemple, Components fait référence à un objet global fournissant les fonctions relatives à certains composants. Ici la classe d'un composant est récupérée en utilisant la propriété classes. Cette propriété est un tableau de tous les composants disponibles. Pour obtenir un composant différent, il suffit de remplacer l'URI par celui du composant voulu. Finalement, une instance est créée avec la fonction createInstance().

- -

Vous devez vérifier que la valeur de retour de createInstance() est différente de 'null', valeur qui indiquerait que le composant n'existe pas.

- -

Pour l'instant, nous avons seulement une référence sur le composant "fichier". Pour appeler ses fonctions, nous avons besoin de récupérer une de ces interfaces, dans notre cas nsILocalFile. Une seconde ligne est ajoutée à notre code comme suit :

- -
var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
-if (aFile) aFile.QueryInterface(Components.interfaces.nsILocalFile);
-
- -

La fonction QueryInterface() est fournie par tous les composants, elle permet d'obtenir une interface précise du composant. Elle prend un seul paramètre, le nom de l'interface souhaitée. La propriété interfaces de Components contient une liste de toutes les interfaces des composants. Ici on utilise l'interface nsILocalFile que l'on passe en paramètre à QueryInterface(). Ainsi aFile fera référence à la partie du composant qui implémente l'interface nsILocalFile.

- -

Ces deux lignes de Javascript peuvent être utilisées pour obtenir n'importe quelle interface de n'importe quel composant. Il suffit de remplacer le nom du composant et le nom de l'interface que vous voulez utiliser. Vous pouvez bien sûr choisir n'importe quel nom pour la variable. Par exemple si vous voulez utiliser l'interface pour le son, notre code pourrait être comme suit :

- -
var sound = Components.classes["@mozilla.org/sound;1"].createInstance();
-if (sound) sound.QueryInterface(Components.interfaces.nsISound);
-
- -

Les interfaces XPCOM peuvent hériter d'autres interfaces. L'interface héritière possède ses propres fonctions mais aussi toutes celles des interfaces parentes. Ainsi toute interface hérite de l'interface principale nsISupports qui fournit la fonction QueryInterface(). Comme tout composant doit implémenter nsISupports, la fonction QueryInterface() est disponible sur tous les composants.

- -

Plusieurs composants peuvent implémenter la même interface. Typiquement ce sont des sous-classes de l'original mais pas nécessairement. N'importe quel composant peut implémenter les fonctionnalités de nsILocalFile. De plus, un composant peut implémenter plusieurs interfaces. C'est pour ces raisons que l'on doit procéder en deux étapes pour appeler les fonctions d'une interface.

- -

Cependant, il existe un raccourci pour réduire ces deux étapes en une seule ligne de code :

- -
var aLocalFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
-
- -

Ce code effectue la même action qu'avec les deux lignes, mais en une seule ligne. Il élimine le besoin de créer une instance et ensuite de l'interroger pour obtenir une interface précise, en deux étapes séparées.

- -

Un appel à QueryInterface() sur un objet qui ne fournit pas l'interface demandée lance une exception. Si vous n'êtes pas sûr que le composant supporte une interface, vous pouvez utiliser l'opérateur instanceof comme suit :

- -
var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
-if (aFile instanceof Components.interfaces.nsILocalFile){
-  // faire quelque chose si il s'agit d'une instance du bon type
-}
-
- -

L'opérateur instanceof renvoie 'true' si aFile implémente l'interface nsILocalFile, et il effectue également l'appel de la méthode QueryInterface, ce qui fournit par la suite un objet nsILocalFile aFile valide.

- -

Appel des fonctions de l'interface

- -

Maintenant que nous avons un objet qui fait référence à un composant avec l'interface nsILocalFile, nous pouvons appeler les fonctions de celle-ci à travers l'objet. La liste suivante montre quelques propriétés et méthodes de l'interface nsILocalFile.

- -
-
initWithPath 
-
Cette méthode est utilisée pour initialiser le chemin et le nom du fichier pour l'interface nsILocalFile. Le premier paramètre doit être le chemin du fichier, comme par exemple '/usr/local/mozilla'.
-
leafName 
-
Le nom du fichier sans son chemin complet.
-
fileSize 
-
La taille du fichier.
-
isDirectory() 
-
Renvoie 'true' si nsILocalFile représente un répertoire.
-
remove(recursif) 
-
Efface un fichier. Si le paramètre recursif est 'true', le répertoire et tous ses fichiers et sous-répertoires sont effacés.
-
copyTo ( repertoire, nouveauNom ) 
-
Copie un fichier dans un autre répertoire, et optionnellement renomme le fichier. La variable repertoire doit être un objet nsILocalFile représentant le répertoire où l'on veut copier le fichier.
-
moveTo ( repertoire, nouveauNom ) 
-
Déplace le fichier dans un autre répertoire ou le renomme. La variable repertoire doit être un objet nsILocalFile représentant le répertoire où l'on va mettre le fichier.
-
- -

Pour effacer un fichier, on doit d'abord l'assigner à un objet nsILocalFile. Nous appelons la méthode initWithPath() pour définir le fichier en question, en indiquant juste le chemin de celui-ci. Puis nous appelons la fonction remove() avec le paramètre recursif à 'false'. Voici le code correspondant :

- -
var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
-if (aFile instanceof Components.interfaces.nsILocalFile){
-  aFile.initWithPath("/mozilla/testfile.txt");
-  aFile.remove(false);
-}
-
- -

Ce code prend le fichier '/mozilla/testfile.txt' et l'efface. Essayez cet exemple en ajoutant le code à un gestionnaire d'évènements. Vous devez changer le nom du fichier pour qu'il corresponde à un fichier existant que vous voulez effacer sur votre poste local.

- -

Dans la liste ci-dessus, nous avons vu deux fonctions copyTo() et moveTo(). Ces fonctions sont utilisées pour respectivement copier et déplacer des fichiers.

- -
Notez que ces fonctions ne prennent pas en paramètre une chaîne de caractères pour désigner un répertoire mais un objet nsILocalFile. Cela signifie que nous devons récupérer les deux composants "fichier".
- -

L'exemple suivant montre comment copier un fichier :

- -
function copyFile(sourcefile,destdir)
-{
-  // récupérer un composant pour le fichier à copier
-  var aFile = Components.classes["@mozilla.org/file/local;1"]
-    .createInstance(Components.interfaces.nsILocalFile);
-  if (!aFile) return false;
-
-  // récupérer un composant pour le répertoire où la copie va s'effectuer.
-  var aDir = Components.classes["@mozilla.org/file/local;1"]
-    .createInstance(Components.interfaces.nsILocalFile);
-  if (!aDir) return false;
-
-  // ensuite, on initialise les chemins
-  aFile.initWithPath(sourcefile);
-  aDir.initWithPath(destdir);
-
-  // Au final, on copie le fichier sans le renommer
-  aFile.copyTo(aDir,null);
-}
-
-copyFile("/mozilla/testfile.txt","/etc");
-
- -

Les services XPCOM

- -

Certains composants XPCOM spéciaux sont appelés services. Vous ne pouvez pas créer plusieurs instances d'un service parce qu'il doit être unique. Les services fournissent des fonctions manipulant des données globales ou effectuent des opérations sur d'autres objets. Au lieu d'utiliser createInstance(), vous devez appeler getService() pour récupérer une référence sur le composant de type "service". À part ça, les services ne diffèrent pas des autres composants.

- -

Un exemple de service fournit par Mozilla est le service pour les marque-pages. Il vous permet d'ajouter un marque-page à la liste courante des marque-pages de l'utilisateur. Voici un exemple :

- -
var bmarks = Components.classes["@mozilla.org/browser/bookmarks-service;1"].getService();
-bmarks.QueryInterface(Components.interfaces.nsIBookmarksService);
-bmarks.addBookmarkImmediately("http://www.mozilla.org","Mozilla",0,null);
-
- -

Tout d'abord, le composant '@mozilla.org/browser/bookmarks-service;1' est récupéré et son service est placé dans la variable bmarks. Nous utilisons QueryInterface() pour récupérer l'interface 'nsIBookmarksService'. La fonction addBookmarkImmediately() fournie par cette interface peut être utilisée pour ajouter des marque-pages. Les deux premiers paramètres de cette fonction sont l'URL et le titre du marque-page. Le troisième paramètre est le type de marque-page qui doit normalement être '0', et le dernier paramètre est l'encodage des caractères du document correspondant au marque-page, qui peut être nul.

- -
-

Dans la section suivante, nous verrons quelques-unes des interfaces que l'on peut utiliser, fournies par Mozilla.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

- -

 

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/introduction/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/introduction/index.html deleted file mode 100644 index c19e397929..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/introduction/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Introduction -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Introduction -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Introduction ---- -
-

Suivant »

-
-

Ce tutoriel est destiné à vous guider dans l'apprentissage de XUL (XML User-interface Language) qui est un langage multi plates-formes permettant de décrire les interfaces utilisateurs des applications.

-

Ce tutoriel vous montrera la création d'une simple interface utilisateur de recherche de fichiers, comme celle fournie par l'interface Sherlock du Macintosh, ou la boîte de dialogue de recherche de fichier de Windows.

-

Notez que seule l'interface utilisateur sera créée avec quelques fonctionnalités limitées. La recherche de fichiers proprement dite ne sera pas implémentée. Une ligne bleue apparaîtra sur la gauche des paragraphes où la boîte de dialogue de recherche de fichier sera modifiée. Vous pourrez suivre cela à travers les sections.

-

Qu'est ce que XUL et pourquoi a-t-il été créé ?

-

XUL (prononcez zool, cela rime avec cool) a été créé pour avoir un développement du navigateur Mozilla plus facile et plus rapide. C'est un langage XML donc toutes les caractéristiques disponibles dans XML le sont également dans XUL.

-

La plupart des applications ont besoin d'être développées en utilisant les caractéristiques d'une plate-forme spécifique, rendant l'adaptation multi plate-forme consommatrice en temps et coûteuse. Un certain nombre de solutions multi plates-formes ont été développées dans le passé. Java, par exemple, a comme principal argument de vente la portabilité. XUL est l'un de ces langages conçus spécialement pour créer des interfaces utilisateurs portables. Cela prend beaucoup de temps pour bâtir une application, même pour une seule plate-forme. Le temps requis pour compiler et débugger peut être long. Avec XUL, une interface peut être implémentée et modifiée rapidement et facilement.

-

XUL a tous les avantages des autres langages XML. Par exemple, XHTML ou d'autres langages XML comme Math-ML ou SVG peuvent y être insérés. De plus, les textes affichés avec XUL sont aisément localisables, ce qui signifie qu'ils peuvent être traduits dans d'autres langues avec peu d'effort.

-

Quels types d'interface utilisateurs peuvent être réalisés avec XUL ?

-

XUL offre la possibilité de créer la plupart des éléments habituels que l'on rencontre dans des interfaces graphiques modernes. Voici quelques éléments pouvant être créés :

- -

Le contenu affiché peut être créé à partir du contenu d'un fichier XUL ou à partir d'une source de données. Dans Mozilla, de telles sources de données sont utilisées pour les messages des boîtes aux lettres, les marque-pages, et les résultats de recherche. Les contenus des menus, arbres, et autres éléments peuvent être remplis avec ces données, ou avec vos propres données fournies dans des fichiers RDF.

-

Il existe plusieurs cas où des applications XUL sont créées :

- -

Les trois premiers types nécessitent chacun une installation sur la machine de l'utilisateur. De ce fait, ces types d'applications n'ont aucune restriction de sécurité et peuvent accéder au système de fichiers local, ou lire et écrire des préférences par exemple. Pour des extensions, les fichiers XUL et leurs scripts et images associés seront empaquetés dans un unique fichier qui sera téléchargé et installé par l'utilisateur. Des applications Mozilla telle que Firefox fournissent un gestionnaire d'extensions permettant l'installation de paquetages sans avoir à écrire beaucoup de code complexe.

-

Il est possible d'ouvrir des fichiers XUL directement depuis le système de fichiers ou à partir d'un site Web distant. Cependant, ils seront restreints dans les types d'opérations qu'ils peuvent effectués, et certains aspects de XUL ne fonctionneront pas. Toutefois, si vous voulez charger du contenu XUL à partir d'un site distant, le serveur Web doit être configuré pour envoyer les fichiers XUL avec le type de contenu 'application/vnd.mozilla.xul+xml'. XUL est habituellement stocké dans des fichiers avec l'extension .xul. Vous pouvez ouvrir un fichier XUL avec Mozilla comme vous le feriez avec d'autres fichiers, en utilisant la commande 'Ouvrir un fichier…' du menu 'Fichier', ou en tapant l'URL dans la barre d'adresse.

-

Que dois-je savoir pour comprendre le tutoriel ?

-

Vous devez connaître HTML et avoir au moins des connaissances de base sur XML et CSS. Voici quelques indications à garder à l'esprit :

- -

XUL est supporté dans Mozilla et les navigateurs basés sur le moteur Gecko, comme Netscape 6 ou plus, et Mozilla Firefox. À cause des différents changements dans la syntaxe XUL au fil du temps, vous devriez avoir la dernière version pour que les exemples fonctionnent correctement. La plupart des exemples devraient fonctionner dans Mozilla 1.0 et plus. XUL est pratiquement similaire dans Firefox que dans les autres navigateurs, bien qu'il y ait des différences spécifiques, comme le support des barres de boutons personnalisables.

-

Ce tutoriel tente de couvrir la plupart des fonctionnalités de XUL. Cependant, toutes les spécificités ne seront pas examinées. Une fois que vous vous serez familiarisés avec XUL, vous pourrez utiliser la référence des éléments XUL pour trouver les autres fonctionnalités supportées par d'autres éléments spécifiques.

-
-

Suivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/introduction_\303\240_rdf/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/introduction_\303\240_rdf/index.html" deleted file mode 100644 index 6bbbb8e7a4..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/introduction_\303\240_rdf/index.html" +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Introduction à RDF -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Introduction_à_RDF -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_RDF ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Dans cette section, nous allons nous intéresser à RDF (Resource Description Framework).

- -

Resource Description Framework

- -

Nous pouvons utiliser l'élément tree pour afficher un ensemble de données, telles que des marque-pages ou des courriels. Cependant, il ne serait pas pratique de le faire en entrant les données directement dans le fichier XUL. Il serait très difficile de modifier les marque-pages s'ils étaient directement dans le fichier XUL. Le moyen de résoudre cette difficulté est d'utiliser des sources de données RDF.

- -

RDF (Resource Description Framework) est un format qui peut être utilisé pour stocker des ressources telles que des marque-pages ou des courriels. Alternativement, on peut utiliser des données dans d'autres formats et écrire du code qui va lire le fichier et créer le fichier de données RDF. C'est de cette façon que Mozilla fonctionne quand il lit des données telles que les marque-pages, l'historique ou les messages de courriel. Mozilla fournit des sources de données pour ces données communes pour que vous puissiez facilement les utiliser.

- -

Vous pouvez utiliser n'importe quelles sources de données RDF fournies pour peupler les arbres tree avec des données ou vous pouvez désigner un fichier RDF au format XML contenant les données. Elles sont très commodes pour afficher des arbres contenant beaucoup de lignes. RDF peut aussi peupler d'autres éléments XUL comme les listbox et les menu. Nous verrons cela dans la prochaine section.

- -

Un très bref aperçu de RDF sera fourni ici. Pour un guide de RDF plus détaillé, lisez Introduction to the RDF Model (en). Il est recommandé de lire ce guide si vous êtes débutant en RDF.

- -

Pour plus d'information sur le RDF, consultez les spécifications RDF (en).

- -

RDF/XML

- -

RDF consiste en un modèle, qui est une représentation des données sous forme de graphe. RDF/XML est un langage XML utilisé pour représenter des données RDF. Il contient un ensemble assez simple d'éléments. L'exemple ci-dessous montre un gabarit RDF minimal.

- -
<?xml version="1.0"?>
-<RDF:RDF
-  xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-  ...
-</RDF:RDF>
-
- -

Il a quelques similitudes avec l'en-tête XUL. À la place de l'élément window, l'élément RDF est utilisé. Vous pouvez voir que l'espace de nommage pour RDF a été déclaré pour que les éléments RDF soient reconnus proprement. À l'intérieur de l'élément RDF, vous placerez les données. Pour voir quelques exemples de fichiers RDF/XML, regardez ceux présents avec Mozilla. Ils ont une extension .rdf.

- -

Base de données RDF

- -

Prenons l'exemple d'une liste de marque-pages générée à partir de RDF. Une liste de marque-pages contient un ensemble d'enregistrements, chacun avec un ensemble de données associées, telles que l'URL, le titre et une date de visite.

- -

Pensez aux marque-pages comme une base de données qui est stockée comme une grande table avec de nombreux champs. Dans le cas de RDF cependant, les listes peuvent être hiérarchisées. C'est nécessaire pour que nous puissions avoir des dossiers ou des catégories de marque-pages. Chacun des champs dans la base de données RDF est une ressource, avec un nom associé. Le nom est décrit par un URI.

- -

Par exemple, une selection de champs dans la liste de marque-pages de Mozilla est décrite par les URIs ci-dessous :

- - - - - - - - - - - - - - - - - - - - - - - - -
Namehttp://home.netscape.com/NC-rdf#NameNom du marque-page
URLhttp://home.netscape.com/NC-rdf#URLURL correspondante
Descriptionhttp://home.netscape.com/NC-rdf#Descriptiondescription du marque-page
Last Visitedhttp://home.netscape.com/WEB-rdf#LastVisitDateDate de dernière visite
- -

Ils sont générés en prenant le nom de l'espace de nommage (NdT : exemple : 'http://home.netscape.com/NC-rdf') et en ajoutant le nom du champ (NdT : exemple : '#Name'). Dans la prochaine section, nous verrons comment les utiliser pour remplir les valeurs des champs automatiquement. Notez que la dernière date de visite a un espace de nommage légèrement différent des trois autres.

- -

Exemple de fichier RDF/XML

- -

Voici maintenant un exemple de fichier RDF/XML listant une table avec trois enregistrements et trois champs.

- -
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-         xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#">
-
-  <RDF:Seq about="http://www.some-fictitious-zoo.com/all-animals">
-    <RDF:li>
-       <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/lion">
-         <ANIMALS:name>Lion</ANIMALS:name>
-         <ANIMALS:species>Panthera leo</ANIMALS:species>
-         <ANIMALS:class>Mammifère</ANIMALS:class>
-       </RDF:Description>
-    </RDF:li>
-    <RDF:li>
-       <RDF:Description about="http://www.some-fictitious-zoo.com/arachnids/tarantula">
-         <ANIMALS:name>Tarantule</ANIMALS:name>
-         <ANIMALS:species>Avicularia avicularia</ANIMALS:species>
-         <ANIMALS:class>Arachnide</ANIMALS:class>
-       </RDF:Description>
-    </RDF:li>
-    <RDF:li>
-       <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/hippopotamus">
-         <ANIMALS:name>Hippopotame</ANIMALS:name>
-         <ANIMALS:species>Hippopotamus amphibius</ANIMALS:species>
-         <ANIMALS:class>Mammifère</ANIMALS:class>
-       </RDF:Description>
-    </RDF:li>
-  </RDF:Seq>
-</RDF:RDF>
-
- -
NdT : les spécifications du format RDF précisent qu'il faut toujours indiquer l'espace de nom RDF pour les attributs du langage RDF comme ID about, resource etc. Pour être en conformité avec ces spécifications, vous devrez toujours déclarer un alias d'espace de nom (comme 'RDF' dans l'exemple précédent : xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#") et l'utiliser pour les attributs RDF (ex : RDF:about="...").
- -

Ici, trois enregistrements ont été décrits, un pour chaque animal. Chaque balise RDF:Description décrit un seul enregistrement. À l'intérieur de chaque enregistrement, trois champs sont décrits, 'name', 'species' et 'class'. Il n'est pas nécessaire que tous les enregistrements aient les mêmes champs mais cela donne plus de sens.

- -

À chacun des trois champs a été donné un espace de nommage appelé 'ANIMALS', dont l'URL a été déclarée dans la balise RDF. Ce nom a été choisi pour sa signification dans ce cas précis, mais nous aurions pu en choisir un autre. La fonctionnalité d'espace de nommage est utile car le champ 'class' peut entrer en conflit avec celui utilisé pour les styles.

- -

Les éléments Seq et li sont utilisés pour indiquer que les enregistrements sont dans une liste. C'est la même façon dont les listes HTML sont déclarées. L'élément Seq est utilisé pour indiquer que les éléments sont ordonnés. À la place de l'élément Seq, vous pouvez aussi utiliser l'élément Bag pour indiquer des données non ordonnées, et Alt pour indiquer des données où chaque enregistrement spécifie des valeurs alternatives (telles que des URLs mirroirs).

- -

À l'intérieur d'un fichier XUL, il est fait référence aux ressources en combinant l'URL de l'espace de nommage suivit du nom du champ. Dans l'exemple ci-dessus, les URIs suivants générés peuvent être utilisés pour référer aux champs spécifiques :

- - - - - - - - - - - - - - - - -
Nomhttp://www.www.some-fictitious-zoo.com/rdf#name
Espècehttp://www.www.some-fictitious-zoo.com/rdf#species
Classehttp://www.www.some-fictitious-zoo.com/rdf#class
- -
-

Dans la suite, nous allons voir comment utiliser RDF pour peupler des éléments XUL

- -
-

« PrécédentSuivant »

-
- -

Interwiki

- -

 

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/introduction_\303\240_xbl/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/introduction_\303\240_xbl/index.html" deleted file mode 100644 index 7730e47a24..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/introduction_\303\240_xbl/index.html" +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Introduction à XBL -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Introduction_à_XBL -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_XBL ---- -

 

-
-

« PrécédentSuivant »

-
-

XUL a un langage qui lui est parent, XBL (eXtensible Bindings Language). Ce langage est utilisé pour déclarer le comportement des éléments graphiques de XUL.

-

Liaisons

-

Vous pouvez utiliser XUL pour définir la mise en page de l'interface utilisateur d'une application. Vous pouvez adapter l'apparence des éléments en leur appliquant des styles. Vous pouvez aussi créer de nouveaux thèmes en modifiant les styles. L'apparence basique de tous les éléments, comme les barres de défilement et les cases à cocher pourrait être modifiée en ajustant le style ou en déclarant des attributs à l'élément. Cependant, XUL ne fournit aucun moyen de vous permettre de changer le fonctionnement d'un élément. Par exemple, vous pourriez vouloir changer le fonctionnement des composants d'une barre de défilement. Pour cela, vous avez besoin de XBL.

-

Un fichier XBL contient un ensemble de liaisons. Chaque liaison décrit le comportement d'un élément graphique de XUL. Par exemple, une liaison pourrait être attachée à une barre de défilement. Le comportement décrit les propriétés et méthodes de la barre de défilement en plus de décrire les éléments de XUL qui la composent.

-

Comme XUL, XBL est un langage XML, ainsi il a des règles syntaxiques similaires. L'exemple suivant montre le squelette basique d'un fichier XBL :

-
<?xml version="1.0"?>
-<bindings xmlns="http://www.mozilla.org/xbl">
-  <binding id="binding1">
-    <!-- le contenu, propriétés, méthodes et descriptions d'évènements viennent ici -->
-  </binding>
-  <binding id="binding2">
-    <!-- le contenu, propriétés, méthodes et descriptions d'évènements viennent ici -->
-  </binding>
-</bindings>
-
-

L'élément bindings est l'élément racine d'un fichier XBL et contient un ou plusieurs élément binding. Chaque élément binding déclare une seule liaison. L'attribut id peut être utilisé pour identifier la liaison, comme dans l'exemple ci-dessus. Le modèle a deux liaisons, l'une appelée 'liaison1' et l'autre appelée 'liaison2'. L'une pourrait être attachée à une barre de défilement et l'autre à un menu. Une liaison peut être attachée à n'importe quel élément de XUL. Si vous utilisez des classes CSS, vous pouvez utiliser autant de liaisons que vous avez besoin. Notez l'espace de nommage de l'élément bindings dans le modèle ci-dessus. Il déclare que nous sommes en train d'utiliser une syntaxe XBL.

-

Vous assignez une liaison à un élément en déclarant la propriété CSS -moz-binding avec l'URL des fichiers de liaisons. Par exemple :

-
scrollbar {
-    -moz-binding: url('chrome://findfile/content/findfile.xml#binding1');
-}
-
-

L'URL pointe vers la liaison avec l'id 'binding1' dans le fichier 'chrome://findfile/content/findfile.xml'. La syntaxe '#binding1' est utilisée pour pointer vers une liaison spécifique, de la même façon que si vous pointiez vers une ancre dans un fichier HTML. Vous mettrez habituellement toutes vos liaisons dans un seul fichier. Le résultat dans cet exemple, est que toutes les barres de défilement auront leur comportement décrit par la liaison "binding1".

-

Une liaison déclare cinq types de choses :

-
  1. Le contenu : les éléments fils qui sont ajoutés à l'élément auquel la liaison est attachée.
  2. Les propriétés : les propriétés ajoutées à l'élément. Elles sont accessibles par un script.
  3. Les méthodes : les méthodes ajoutées à l'élément. Elles peuvent être appelées à partir d'un script.
  4. Les événements : les événements, comme les clics de souris et les appuis sur les touches auxquels l'élément répondra. La liaison peut ajouter des scripts pour fournir la manipulation par défaut. En plus de cela, de nouveaux événements peuvent être définis.
  5. Le style : adapte les propriétés de style que l'élément XBL possède.
    6. -
-

Exemple de liaison

-

L'élément box est suffisamment générique pour que vous l'utilisiez afin de créer des éléments graphiques personnalisés (bien que vous puissiez utiliser d'autres éléments, même un élément composé par vous-même). En assignant un attribut class à une balise box, vous associez une liaison aux boîtes qui possèdent cette classe. L'exemple suivant le démontre :

-
XUL (example.xul):
-
-<?xml version="1.0"?>
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?>
-
-<window
-     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <box class="okcancelbuttons"/>
-</window>
-
-CSS (example.css):
-
-box.okcancelbuttons {
-    -moz-binding: url('chrome://example/skin/example.xml#okcancel');
-}
-
-XBL (example.xml):
-
-<?xml version="1.0"?>
-<bindings xmlns="http://www.mozilla.org/xbl"
-         xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <binding id="okcancel">
-    <content>
-      <xul:button label="OK"/>
-      <xul:button label="Annuler"/>
-    </content>
-  </binding>
-</bindings>
-
-

Cet exemple crée une fenêtre avec une seule boîte. La boîte a été déclarée pour avoir un attribut class de valeur 'okcancelbuttons'. La feuille de styles associée au fichier indique que les boîtes avec les classes 'okcancelbuttons' ont une liaison spécialisée, définie dans le fichier XBL. Vous pouvez employer d'autres éléments derrière l'élément box, même pour votre propre balise adaptée.

-

Nous verrons plus de détails concernant la partie XBL dans la section suivante. Cependant, pour récapituler, cet exemple entraîne l'ajout automatique de deux boutons dans la boîte, un bouton 'Ok' et un autre 'Annuler'.

-
-

Dans la prochaine section, nous verrons comment créer un contenu avec XBL.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/l'url_chrome/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/l'url_chrome/index.html deleted file mode 100644 index 603447d0d8..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/l'url_chrome/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: L'URL Chrome -slug: Archive/Mozilla/XUL/Tutoriel_XUL/L'URL_Chrome -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL ---- -
-

« PrécédentSuivant »

-
-

Cette section décrit comment faire référence à des documents XUL et d'autres fichiers chrome.

-

L'URL Chrome

-

Les fichiers XUL peuvent être référencés par une URL HTTP habituelle tout comme les fichiers HTML (ou tout autre type d'URL). En revanche, les paquetages qui sont installés sur le système chrome de Mozilla doivent être référencés avec des URLs spéciales appelées « chrome ». Les paquetages livrés avec Mozilla seront déjà installés mais vous pouvez déclarer les votres.

-

Les paquetages installés ont l'avantage de ne pas avoir de restrictions de sécurité, ce qui est nécessaire pour de nombreuses applications. Un autre avantage comparé aux autres types d'URLs est qu'ils manipulent automatiquement les thèmes graphiques (NdT : skins) et les localisations (NdT : locales). Par exemple, une URL chrome vous permet d'adresser un fichier dans le thème, comme une image, sans avoir besoin de connaître le thème utilisé par l'utilisateur. Tant que les noms de fichiers sont identiques dans chaque thème, vous pouvez vous y faire référence via une URL chrome. Mozilla déterminera où le fichier est situé et renverra la bonne donnée. Cela signifie aussi que l'emplacement où le paquetage est installé n'est pas important pour être capable d'y accéder. Les URLs chrome sont indépendantes du lieu où les fichiers sont stockés physiquement. Il est donc simple d'écrire des applications contenant beaucoup de fichiers sans vous soucier des détails concernant leurs chemins d'accès.

-

La syntaxe de base d'une URL chrome est la suivante :

-
chrome://<paquetage>/<partie>/<fichier.xul>
-
-

Le texte <paquetage> est le nom du paquetage, tel que messenger ou editor. Le texte <partie> vaut soit 'content', soit 'skin', soit 'locale', selon la partie que vous voulez. <fichier.xul> est simplement le nom du fichier.

-

Exemple : chrome://messenger/content/messenger.xul

-

Ici, l'exemple se réfère à la fenêtre de messagerie. Vous pouvez pointer vers un fichier qui fait partie d'un thème en remplaçant 'content' par 'skin' et en changeant le nom du fichier. De même, vous pouvez pointer vers un fichier qui fait partie de la localisation en utilisant 'locale' au lieu de 'content'.

-

Quand vous ouvrez une URL chrome, Mozilla consulte sa liste de paquetages installés et essaie de trouver le fichier JAR qui correspond au nom et à la partie recherchés. Le lien entre des URLs et des fichiers JAR est précisé dans les fichiers manifest situés dans le répertoire chrome. Si vous déplaciez le fichier messenger.jar autre part et que vous modifiez le fichier manifest en conséquence, Thunderbird fonctionnerait encore puisque ce fichier n'est pas dépendant de l'emplacement de son installation. En utilisant des URLs chrome, ce genre de détails est secondaire pour Mozilla. De même, si les utilisateurs changent leur thème graphique, la partie 'skin' de l'URL chrome va pointer vers une autre série de fichiers sans que le XUL et les scripts en soient affectés.

-

Voici quelques exemples. Notez qu'aucunes URLs ne précisent un thème, une langue ou bien des répertoires spécifiques.

-
chrome://messenger/content/messenger.xul
-chrome://messenger/content/attach.js
-chrome://messenger/skin/icons/images/folder-inbox.gif
-chrome://messenger/locale/messenger.dtd
-
-

Pour des sous-répertoires, vous pouvez simplement les ajouter à la fin des URLs chrome. Les URLs suivantes font référence à la fenêtre des marque-pages, aussi bien pour la suite Mozilla que pour Firefox, puisque les noms des paquetages sont différents :

-
chrome://communicator/content/bookma...rksManager.xul (Mozilla)
-chrome://browser/content/bookmarks/b...rksManager.xul (Firefox)
-
-

Vous pouvez entrer des URLs chrome partout où des URLs normales peuvent être utilisées. Vous pouvez même les entrer directement dans la barre d'adresse d'une fenêtre du navigateur Mozilla. Si vous entrez une des URLs mentionnées ci-dessus dans la barre d'adresse du navigateur, vous devriez voir cette fenêtre apparaître comme une page Web le ferait et, dans la plupart des cas, elle sera fonctionnelle comme si elle était dans une fenêtre séparée. Cependant, quelques boîtes de dialogue pourraient ne pas bien fonctionner, si elles nécessitent des arguments fournis par la fenêtre qui les a ouvertes.

-

Vous pourriez voir également des URLs chrome sans noms de fichiers spécifiés, tel que :

-
chrome://navigator/content/
-
-

Dans le cas présent, seul le nom du paquetage et la partie sont spécifiés. Ce type de référence sélectionnera automatiquement un fichier approprié depuis le bon répertoire. Pour le contenu, un fichier avec le même nom que le paquetage et une extension xul sont choisis. Dans l'exemple ci-dessus, le fichier browser.xul est choisi. Pour messenger, messenger.xul serait sélectionné. Lorsque vous créez vos propres applications, vous devriez créer un fichier pour votre fenêtre principale avec le même nom que votre paquetage. Ainsi, elle pourra être appelée en utilisant cette syntaxe plus courte. C'est commode car alors, tout ce qu'a besoin de connaître un utilisateur pour pouvoir ouvrir l'application, c'est le nom du paquetage. Bien sûr, pour les extensions qui modifient l'interface du navigateur, l'utilisateur n'aura pas besoin de connaître l'URL car l'extension sera présente elle-même dans l'interface utilisateur.

-

Pour un thème, le fichier <paquetage>.css est choisi ; pour une localisation, le fichier <paquetage>.dtd est choisi.

-

Souvenez-vous, l'URL chrome n'est pas dépendante à un emplacement sur le disque. Les deux premières pièces sont le nom du paquetage et la partie ('content', 'skin', ou 'locale'). Bien qu'il soit courant de mettre les fichiers de contenu dans un répertoire appelé 'content', c'est une simple convention, et ces fichiers peuvent être placés dans une structure totalement différente.

-
-

Dans la section suivante, nous verrons comment créer des fichiers .manifest et des paquetages.

-
-

« PrécédentSuivant »

-
diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/la_structure_xul/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/la_structure_xul/index.html deleted file mode 100644 index 30da6fedbc..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/la_structure_xul/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: La structure XUL -slug: Archive/Mozilla/XUL/Tutoriel_XUL/La_structure_XUL -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure ---- -
-

« PrécédentSuivant »

-
- -

Nous commencerons par regarder comment le système de fichiers de XUL est organisé sous Mozilla.

- -

Comment XUL est géré

- -

Dans Mozilla, XUL est géré pratiquement de la même manière que du HTML ou d'autres types de contenu. Lorsque vous entrez l'URL d'une page HTML dans le champs de saisie d'adresse du navigateur, ce dernier localise le site Web et télécharge le contenu. Le moteur d'affichage de Mozilla traite le contenu du code source HTML, et le transforme en un arbre de document. L'arbre est alors converti en un ensemble d'objets qui peuvent être affichés sur l'écran. Des styles CSS, des images et d'autres technologies sont utilisés pour contrôler la présentation. XUL fonctionne de la même manière.

- -

En fait, sous Mozilla, tous les types de documents, qu'il soit HTML ou XUL, ou même SVG, sont tous traités par le même code sous-jacent. Cela signifie que les mêmes propriétés CSS peuvent être utilisées pour styler à la fois du XUL et du HTML, et beaucoup de spécificités peuvent être partagées entre les deux. Cependant, quelques fonctionnalités restent spécifiques au HTML, comme les formulaires, et d'autres restent spécifiques au XUL, comme les overlays. Puisque les fichiers XUL et HTML sont traités de la même manière, vous pouvez les charger à partir du système de fichiers local, d'une page Web, d'une extension, ou d'une application autonome XULRunner.

- -

Les contenus provenant de sources distantes, comme par exemple http://localhost/~username/, qu'ils soient en HTML, XUL ou tout autre type de document, sont limités dans les opérations qu'ils peuvent réaliser pour des raisons de sécurité. C'est pour cela que Mozilla fournit une méthode pour installer localement du contenu et de l'enregistrer dans son système chrome. Une adresse URL spéciale chrome:// est alors employée. Les fichiers ouverts depuis une adresse chrome reçoivent des privilèges plus élevés pour accéder aux fichiers locaux, ils peuvent accéder aux préférences et aux marque-pages, et réaliser d'autres opérations nécessitant certains privilèges. Bien entendu, les pages Web ne disposent pas de ces privilèges, à moins qu'ells soient signées avec un certificat numérique et que l'utilisateur ait obtenu un accès pour cela.

- -

La déclaration de paquetage chrome est la méthode par laquelle les extensions de Firefox ajoutent des fonctionnalités au navigateur. Les extensions sont de petits paquetages de fichiers XUL, Javascript, feuilles de styles et images, rassemblés en un seul fichier. Ce fichier peut être créé en utilisant un outil ZIP. Quand l'utilisateur le télécharge, il est installé sur sa machine. Il sera intégré dans le navigateur en utilisant une fonctionnalité spécifique appelée overlay, qui permet au XUL de l'extension et au XUL du navigateur de se combiner ensemble. Pour l'utilisateur, c'est comme si l'extension avait modifié le navigateur, mais en réalité, le code est séparé et l'extension peut être désinstallée facilement.

- -

Les paquetages déclarés ne sont pas nécessaires pour utiliser les overlays, bien sûr. Si ils ne le sont pas, vous ne pourrez pas y accéder via l'interface principale du navigateur, mais vous pourrez toujours y accéder depuis une URL chrome, si vous la connaissez.

- -

Des applications XUL autonomes peuvent également employer du code XUL inclus de façon similaire, mais il fera partie intégrante de l'application plutôt que de devoir être installé séparément comme une extension. Cependant, ce code XUL devra être déclaré dans le système chrome pour pouvoir s'afficher dans l'interface utilisateur de l'application.

- -

Il faut savoir que le navigateur Mozilla lui même regroupe en réalité toute une série de paquetages contenant des fichiers XUL, du JavaScript et des feuilles de styles. Ces fichiers sont ouverts depuis une URL chrome et ils ont des privilèges accrus et fonctionnent comme dans tous autres paquetages. Bien sûr, le navigateur est bien plus conséquent et plus sophistiqué que la plupart des extensions. Firefox et Thunderbird contiennent de nombreux composants qui sont tous écris en XUL et qui sont tous acceesibles via des URLs chrome. Vous pouvez examiner ces paquetages en parcourant le sous répertoire chrome où Firefox ou une application XUL a été installé.

- -

L'URL chrome commence toujours par 'chrome://'. De la même manière que les URLs 'http://' réfèrent toujours aux sites Web distants, et que les URL 'file://' réfèrent toujours aux fichiers locaux, les URL 'chrome://' réfèrent toujours aux paquetages installés et aux extensions. Nous en verrons plus sur la syntaxe des URL chrome dans la prochaine section. Il est important de noter que lorsque l'on accède à du contenu depuis une URL chrome, il obtient les privilèges avancés tel que décrit plus haut contrairement aux autres types d'URL. Par exemple, une URL HTTP n'a pas de privilèges particuliers et une erreur apparaîtrait si une page Web essaie, par exemple, de lire un fichier local, alors qu'un fichier chargé depuis une URL chrome pourra lire des fichiers sans restrictions.

- -

Cette distinction est importante. Elle signifie qu'il y a certaines choses que le contenu des pages Web ne peut pas faire, comme lire les marque-pages de l'utilisateur. Cette distinction n'est pas basée sur le type du contenu affiché ; seul le type de l'URL est important. HTML et XUL placés sur un site Web n'ont pas de permissions supplémentaires. Mais HTML et XUL chargés avec une URL chrome obtiennent des permissions avancées.

- -

Si vous désirez utiliser XUL sur un site Web, il vous suffit de mettre les fichiers XUL sur le site Web comme vous le feriez avec un fichier HTML, et indiquer leurs URLs dans un navigateur (http://localhost/xul.php). Assurez vous que votre serveur Web est configuré pour transmettre les fichiers XUL avec le type mime application/vnd.mozilla.xul+xml (par ex en PHP header('content-type: application/vnd.mozilla.xul+xml');). Ce type mime permet à Mozilla de faire la différence entre HTML et XUL. Mozilla ne tient pas compte de l'extension du fichier sauf pour lire les fichiers locaux, mais vous devriez utiliser l'extension .xul pour tous les fichiers XUL. Vous pouvez ouvrir les fichiers XUL sur votre propre machine en les ouvrant dans le navigateur, ou en double cliquant sur le fichier dans votre gestionnaire de fichiers.

- -
Souvenez vous que les fichiers XUL distants ont des restrictions significatives sur ce qu'ils peuvent faire.
- -

Type de documents : HTML XML XUL CSS

- -

Tandis que la plupart des fonctionnalités sont partagées entre HTML et XUL, Mozilla utilise différents types de document pour chacun d'eux. Il y a trois principaux types de document dans Mozilla : HTML, XML et XUL. Bien entendu, le type HTML est utilisé pour les documents HTML, le type XUL est utilisé pour les documents XUL, et le type XML est utilisé pour les autres documents en XML. Puisque XUL est aussi du XML, il correspond à un sous-type du type générique XML. Il y a de subtiles différences dans les fonctionnalités. Par exemple, alors que les contrôles de formulaire dans les pages HTML sont accessibles via la propriété document.forms, cette propriété n'est pas disponible pour les documents XUL puisque XUL n'a pas de formulaire dans le sens HTML du terme. D'un autre coté, les fonctionnalités spécifiques de XUL comme les overlays ou les gabarits ne sont utilisables que dans les documents XUL.

- -

La distinction entre les documents est importante. Certaines fonctionnalités XUL sont utilisables dans des documents HTML ou XML si elles ne sont pas spécifiques au type de document  mais d'autres seront liées au type du document. Par exemple, vous pourrez vous servir des types de mise en page XUL dans d'autres documents car ils ne reposent pas sur le type de document pour fonctionner.

- -

Pour résumer les points précédents :

- - - -

Les prochaines sections décrivent la structure de base d'un paquetage chrome qui peut être installé dans Mozilla. Cependant, si vous voulez seulement démarrer la création d'une simple application, rendez vous directement sur la page Créer une fenêtre et revenez sur cette section plus tard.

- -

Organisation d'un paquetage

- -

Mozilla est conçu de telle manière que vous pouvez pré-installer autant de composants que vous le souhaitez. Chaque extension est également un composant muni d'une adresse chrome différente. Il y a également un composant par thèmes graphiques ou langues. Chacun de ces composants, ou paquetages, est constitué d'un ensemble de fichiers décrivant l'interface utilisateur. Par exemple, le composant de messagerie décrit la fenêtre listant les messages des courriers, la fenêtre de rédaction et les boîtes de dialogues du carnet d'adresses.

- -

Les paquetages inclus dans Mozilla sont situés dans le répertoire chrome situé dans le répertoire d'installation de Mozilla. Ce répertoire chrome est l'endroit où sont situés tous les fichiers qui décrivent l'interface utilisateur employée par Mozilla, tels que le client de messagerie et d'autres applications. Typiquement pour une application, vous placerez vos fichiers XUL dans ce répertoire, sauf pour les extensions où les fichiers sont placés dans le répertoire extensions du profil utilisateur. La simple copie d'un fichier XUL dans le répertoire 'chrome' ne lui donne pas de droits supplémentaires et ne le rend pas accessible depuis une URL chrome. Pour que des droits supplémentaires lui soit attribués, vous devrez créer un fichier manifest et le placez dans le répertoire chrome. Ce fichier est facile à créer car il n'est composé que de quelques lignes. Il sert orienter une URL chrome vers l'emplacement d'un fichier ou d'un répertoire sur le disque où les fichiers XUL sont situés. Vous trouverez plus de détails sur la manière de créer ce fichier dans une prochaine section.

- -

La seule manière pour du contenu d'être accessible depuis une URL chrome est de créer un paquetage comme décrit dans les prochaines sections. Ce répertoire est nommé 'chrome' en référence aux répertoires où sont placés les paquetages chrome de Mozilla.

- -

Pour augmenter la confusion, il y a deux autres endroits où le mot "chrome" peut apparaître. Il y a l'argument en ligne de commande -chrome et le modificateur "chrome" de la fonction window.open(). L'appel à l'une de ces deux fonctionnalités n'autorise pas plus de privilèges. Elles sont plutôt utilisées pour ouvrir une nouvelle fenêtre principale sans l'interface utilisateur du navigateur comme les menus ou la barre d'outils. Vous utiliserez en général ces caractéristiques dans des applications XUL plus complexes lorsque vous ne voulez pas de fenêtre de navigation autour de vos boîtes de dialogue.

- -

Les fichiers d'un paquetage sont généralement combinés dans un simple fichier JAR. Un fichier JAR peut être créé et examiné en utilisant un utilitaire ZIP. Par exemple, ouvrez quelques uns des fichiers JAR du répertoire chrome de Mozilla pour voir la structure de leurs paquetages. Bien qu'il soit normal de combiner les fichiers dans un fichier JAR, les paquetages peuvent également être accessibles dans une forme décompressée à l'intérieur d'un ensemble de répertoire. Généralement, vous ne distribuerez pas un paquetage de cette façon, mais c'est une méthode pratique pendant le développement puisque vous pouvez éditer les fichiers du répertoire et ensuite les recharger sans avoir à ré-empaqueter ou réinstaller l'ensemble.

- -

Par défaut, les applications Mozilla analysent les fichiers XUL et les scripts, et mémorisent une version pré-compilée dans une session de l'application afin d'améliorer les performances. De ce fait, les fichiers XUL ne seront pas rechargés même si les fichiers sources ont été modifiés. Pour modifier ce mécanisme, il est nécessaire de modifier la préférence nglayout.debug.disable_xul_cache. Dans Firefox, cette préférence doit être ajoutée et définie à 'true' dans les préférences de l'utilisateur en tapant "about:config" dans la barre d'adresse. Vous pouvez aussi éditer manuellement le fichier des préférences user.js et y ajouter la ligne suivante :

- -
pref("nglayout.debug.disable_xul_cache", true);
-
- -

Il y a habituellement trois parties différentes dans un paquetage chrome, bien qu'elles soient facultatives. Chaque partie est enregistrée dans un répertoire différent. Ces trois ensembles décris en dessous sont le contenu, le thème graphique et la localisation. Un paquetage particulier pourrait fournir un ou plusieurs thèmes et localisations, mais un utilisateur peut les remplacer par les siens. De plus, un paquetage peut inclure plusieurs applications différentes, chacune accessible via des URLs chrome différentes. Le système de paquetage est suffisamment souple pour n'inclure que les parties dont vous avez besoin, et permettre le téléchargement séparé d'autres parties, comme le texte pour les différentes langues.

- -

Les trois types de paquetages chrome sont :

- -

 

- -
-
Content - Fenêtres et scripts
-
Contient les déclarations des fenêtres et des éléments d'interface utilisateur. Ceux-ci sont stockés dans les fichiers XUL, qui ont l'extension xul. Il peut y avoir plusieurs fichiers XUL, mais la fenêtre principale devrait toujours avoir un nom de fichier identique au nom du paquetage. Par exemple, le paquetage editor contiendra un fichier appelé editor.xul. Les scripts (NdT : javascript) sont placés dans des fichiers séparés à côté des fichiers XUL.
-
Skin - feuilles de style, images et autres fichiers de thèmes
-
Les feuilles de style décrivent des détails de l'aspect d'une fenêtre. Elles sont stockées séparément des fichiers XUL pour faciliter la modification du thème d'une application. Toutes les images utilisées sont également stockées ici.
-
Locale - fichiers spécifiques de langues
-
Tous les textes qui sont affichés dans une fenêtre sont stockés séparément. De cette façon, un utilisateur peut avoir une configuration pour sa propre langue.
-
- -

Paquetages de contenu

- -

Le nom du fichier JAR devrait décrire ce qu'il contient, mais vous pouvez vous en assurer en regardant son contenu. Examinons par exemple le paquetage du navigateur inclus avec Firefox. Si vous décompressez les fichiers de browser.jar, vous verrez qu'ils forment une structure de répertoire ressemblant à :

- -
content
-   browser
-      browser.xul
-      browser.js
-      --d'autres fichiers XUL et JS ici--
-      bookmarks
-         --les fichiers pour les marque-pages ici--
-      preferences
-         --les fichiers pour les préférences ici--
-.
-.
-.
- -

On peut facilement identifier cela comme le contenu d'un paquetage, car le dossier supérieur s'appelle content. Pour les thèmes, le dossier aurait été appelé skin et pour les localisations, il aurait été appelé locale. En fait, ce n'est pas une obligation mais vous devriez suivre cette convention pour rendre votre paquetage plus clair. Certains paquetages peuvent inclure une section content, skin et locale. Dans ces paquetages, vous trouverez un sous-répertoire pour chaque section. Par exemple, Chatzilla est distribué de cette manière.

- -

Le dossier content/browser contient un certain nombre de fichiers avec les extensions .xul et .js. Les fichiers XUL sont ceux qui ont une extension .xul. Les fichiers avec l'extension .js sont des fichiers de JavaScript contenant les scripts qui gèrent les fonctionnalités d'une fenêtre. Beaucoup de fichiers XUL ont un ou plusieurs fichiers de script qui leur est associé.

- -

Dans la liste ci-dessus, deux fichiers ont été montrés. Il y en a évidemment d'autres, mais qui n'apparaissent pas pour des raisons de simplicité. Le fichier browser.xul est le fichier XUL qui décrit la fenêtre principale du navigateur. La fenêtre principale du contenu d'un paquetage devrait toujours porter le même nom que le nom du paquetage, avec une extension .xul. Dans ce cas, le paquetage étant nommé 'browser', le fichier sera browser.xul. D'autres fichiers XUL vont décrire des fenêtres différentes, comme par exemple le fichier pageInfo.xul qui décrit la boîte de dialogue 'Information sur la page'.

- -

Tous les paquetages contiennent un fichier contents.rdf qui décrit le paquetage, son auteur et les overlays qu'il utilise. Ce fichier est cependant devenu obsolète et a été remplacé par une mécanisme plus simple. Cette nouvelle méthode est le fichier manifest mentionné précédemment, et vous trouverez ce fichier dans le répertoire chrome avec une extension .manifest. Par exemple, browser.manifest décrit le paquetage browser.

- -

Plusieurs sous-répertoires, tels que bookmarks et preferences, décrivent des sections complémentaires au composant du navigateur. Ils sont placés dans des répertoires différents pour une meilleure organisation des fichiers.

- -

Styles et thèmes graphiques

- -

Bien que le code sous-jacent de Mozilla les appelle skins et que l'interface utilisateur les appelle thèmes, ils désignent la même chose. Le fichier classic.jar décrit le thème graphique inclus par défaut avec Firefox. La structure est semblable aux paquetages de contenu. Examinons par exemple le fichier classic.jar :

- -
skin
-   classic
-      browser
-         browser.css
-         -- les autres fichiers thèmes du navigateur sont ici --
-      global
-         -- les fichiers thèmes globaux sont ici --
-.
-.
-.
- -

Ici encore, le respect de cette structure de répertoires n'est pas nécessaire, mais elle est conventionnelle. En réalité, vous pouvez mettre les fichiers dans un seul répertoire de niveau supérieur sans aucun sous-répertoire. Cependant, pour des applications plus importantes, des sous-répertoires servent à séparer les différents composants. Dans l'exemple précédent, un répertoire est dédié aux fichiers du thème graphique du navigateur et un autre pour les fichiers du thème global. Le répertoire global contient les fichiers de styles applicables à tous les paquetages. Ces fichiers s'appliquent à tous les composants et seront inclus à toutes vos applications autonomes. La partie globale définit l'apparence de tous les éléments graphiques communs, tandis que les autres répertoires contiennent les fichiers propres à ces applications. Firefox inclut à la fois les fichiers du thème graphique global et du navigateur dans une seule archive, mais ils pourraient être inclus séparément.

- -

Un thème se compose de fichiers CSS et d'un certain nombre d'images utilisés pour définir l'aspect d'une interface. Le fichier browser.css est utilisé par browser.xul et contient les styles pour définir l'apparence des différences parties de l'interface du navigateur. À nouveau, notez le nom du fichier browser.css, qui a le même nom que le paquetage. En changeant de fichier CSS, vous pouvez modifier l'apparence d'une fenêtre sans changer son fonctionnement. C'est ainsi que vous pouvez créer un nouveau thème. La partie XUL est toujours la même, mais la partie contenant le thème peut varier indépendamment.

- -

Localisation

- -

Le fichier en-US.jar décrit l'information de langage pour chaque composant, dans le cas présent pour l'anglais des États-Unis. Comme pour les thèmes, chaque fichier de langue contient les fichiers qui indiquent le texte utilisé par le paquetage pour une langue spécifique. La structure de 'locale' étant similaire aux autres, elle ne sera pas listée ici.

- -

Le texte localisé est stocké dans deux types de fichiers, des fichiers DTD et des fichiers de propriétés. Les fichiers DTD ont une extension .dtd et contiennent les déclarations d'entités, une pour chaque chaîne de caractères qui est utilisée dans une fenêtre. Par exemple, le fichier browser.dtd contient des déclarations d'entités pour chaque commande du menu. En outre, des raccourcis clavier pour chaque commandes sont également définis, parce qu'ils peuvent être différents selon la langue. Les fichiers DTD sont utilisés par des fichiers XUL, et donc en général, vous en aurez un par fichier XUL. La partie 'locale' contient également des fichiers de propriétés qui sont similaires, mais qui sont utilisés par les fichiers de script. Le fichier browser.properties contient quelques chaînes de caractères de ce type.

- -

Cette structure vous permet de traduire Mozilla ou un composant dans une langue différente en ajoutant juste une nouvelle partie 'locale' pour cette langue. Vous n'avez pas à modifier le code XUL. De plus, d'autres personnes peuvent fournir des paquetages séparés qui appliquent des thèmes ou des localisations à votre partie contenu, apportant ainsi un nouveau thème ou une nouvelle langue sans avoir à modifier le paquetage original.

- -

Autres paquetages

- -

Il existe un paquetage spécial appelé toolkit (ou global). Nous avions déjà vu le répertoire global pour des thèmes. Le fichier toolkit.jar contient la partie du contenu lui correspondant. Il contient quelques boîtes de dialogues et définitions globales. Il définit également l'aspect par défaut et les fonctionnalités des divers éléments graphiques tels que des champs de saisie et des boutons. Les fichiers situés dans la partie globale de l'archive du thème contiennent l'apparence par défaut de tous les éléments XUL d'interface. Le paquetage toolkit est utilisé par toutes les applications XUL.

- -

Ajouter un paquetage

- -

Mozilla place dans le répertoire chrome les paquetages qui sont inclus avec l'installation, mais il n'y a pas d'obligation à cela. Lors de l'installation d'un autre paquetage, vous pouvez le placer n'importe où sur le disque dès lors que son fichier manifest pointe vers lui. Il est commun d'installer les nouveaux paquetages dans le répertoire chrome simplement par convenance. Cependant ils fonctionneront aussi bien à partir d'un autre répertoire, ou de quelque part sur votre réseau local. Vous ne pouvez pas les placer sur un site distant, à moins que le site distant soit monté sur le système de fichiers local.

- -

Il y a deux répertoires chrome utilisés par les applications XUL : l'un est au même emplacement que l'application, l'autre fait partie du profil utilisateur. Le premier permet aux paquetages d'être partagés à tous les utilisateurs tandis que le second permet un accès aux paquetages à un utilisateur spécifique. Les extensions qui sont installées dans un répertoire extension séparé ne sont également accessibles qu'à un utilisateur spécifique. Chaque fichiers manifest situés dans l'un ou l'autre des répertoires chrome seront examinés pour voir quels paquetages sont installés.

- -
-

Dans la prochaine section, nous regarderons comment se référer aux paquetages en utilisant les URL chrome.

- -
-

« PrécédentSuivant »

-
diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/le_mod\303\250le_de_bo\303\256te/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/le_mod\303\250le_de_bo\303\256te/index.html" deleted file mode 100644 index 0075e90f94..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/le_mod\303\250le_de_bo\303\256te/index.html" +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Le modèle de boîte -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Le_modèle_de_boîte -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/The_Box_Model ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Dans cette section, nous allons voir comment XUL gère la mise en page.

- -

Introduction aux boîtes

- -

La forme principale de mise en page dans XUL s'appelle le « Modèle de Boîte ». Ce modèle vous permet de diviser une fenêtre en une série de boîtes. Les éléments à l'intérieur d'une boîte se placeront horizontalement ou verticalement. En combinant une série de boîtes, d'éléments spacer et d'éléments avec des attributs flex, vous pouvez contrôler la mise en page d'une fenêtre.

- -

Bien qu'une boîte soit la partie fondamentale de la disposition d'éléments dans XUL, elle suit quelques règles très simples. Une boîte peut présenter ses enfants dans une des deux orientations, soit horizontalement, soit verticalement. Une boîte horizontale aligne ses éléments horizontalement et une boîte verticale place ses éléments verticalement. Vous pouvez vous représenter une boîte comme étant une rangée ou une colonne d'un tableau HTML. Divers attributs placés sur les éléments enfants, en plus de certaines propriétés de style CSS, contrôlent la position et la taille exactes des enfants.

- -

Éléments de boîte

- -

La syntaxe de base d'une boîte est la suivante :

- -
<hbox>
-   <!-- éléments horizontaux -->
-</hbox>
-
-<vbox>
-   <!-- éléments verticaux -->
-</vbox>
-
- -

L'élément hbox est utilisé pour créer une boîte orientée horizontalement. Chaque élément placé dans la hbox sera placé horizontalement sur une rangée. L'élément vbox est utilisé pour créer une boîte orientée verticalement. Les éléments ajoutés seront placés les uns en dessous des autres en colonne.

- -

Il existe également un élément box générique qui s'oriente horizontalement par défaut, ce qui veut dire qu'il est similaire à l'élément hbox. Cependant, vous pouvez utiliser l'attribut orient pour contrôler l'orientation dans la boîte. Vous pouvez positionner cet attribut à la valeur 'horizontal' pour créer une boîte horizontale et à la valeur 'vertical' pour créer une boîte verticale.

- -

Ainsi, les deux lignes ci-dessous sont équivalentes :

- -
<vbox></vbox>
-
-<box orient="vertical"></box>
-
- -

L'exemple suivant montre comment placer trois boutons verticalement.

- -

Exemple 1 : Source Voir

- -
Image:xultu_boxes-ex1.png
- -
<vbox>
-   <button id="yes" label="Oui"/>
-   <button id="no" label="Non"/>
-   <button id="maybe" label="Peut-être"/>
-</vbox>
-
- -

Ces trois boutons sont orientés verticalement comme le spécifie la boîte. Pour faire en sorte que les boutons soient orientés horizontalement, tout ce que vous avez à faire est de remplacer l'élément vbox par l'élément hbox.

- -

Exemple d'invite de login

- -

Vous pouvez ajouter autant d'éléments que vous le souhaitez à l'intérieur de la boîte, y compris d'autres boîtes. Dans le cas d'une boîte horizontale, chaque élément additionnel sera placé à la droite du précédent. Les éléments ne se chevauchent pas, donc plus vous ajoutez d'éléments, plus large est la fenêtre. De même, chaque élément ajouté dans une boîte verticale sera placé sous le précédent. L'exemple ci-dessous montre une simple demande de login :

- -

Exemple 2 : Source Voir

- -
Image:xultu_boxes-ex2.png
- -
<vbox>
-   <hbox>
-     <label control="login" value="Login :"/>
-     <textbox id="login"/>
-   </hbox>
-   <hbox>
-     <label control="pass" value="Mot de passe :"/>
-     <textbox id="pass"/>
-   </hbox>
-   <button id="ok" label="OK"/>
-   <button id="cancel" label="Annuler"/>
-</vbox>
-
- -

Ici quatre éléments ont été orientés verticalement, deux balises hbox internes et deux éléments button. Notez que seuls les éléments qui sont des descendants directs de la boîte sont orientés verticalement. Les libellés et les boîtes de texte sont à l'intérieur d'éléments hbox, donc ils sont orientés suivant ces boîtes, lesquelles sont horizontales. Vous pouvez voir sur l'image que chaque libellé et leur champ de saisie est orienté horizontalement.

- -

Alignement des champs de saisie

- -

Si vous regardez attentivement l'image de la boîte de dialogue de login, vous verrez que les deux champs de saisie ne sont pas alignés horizontalement. Ce serait certainement mieux s'ils l'étaient. Pour y parvenir, nous devons ajouter quelques boîtes supplémentaires.

- -

Exemple 3 : Source Voir

- -
Image:xultu_boxes-ex3.png
- -
<vbox>
-   <hbox>
-     <vbox>
-       <label control="login" value="Login :"/>
-       <label control="pass" value="Mot de passe :"/>
-     </vbox>
-     <vbox>
-       <textbox id="login"/>
-       <textbox id="pass"/>
-     </vbox>
-   </hbox>
-   <button id="ok" label="OK"/>
-   <button id="cancel" label="Annuler"/>
-</vbox>
-
- -

Notez que les champs de saisie sont maintenant alignés l'un avec l'autre. Pour cela, il nous a fallu ajouter des boîtes à l'intérieur de la boîte principale. Les deux libellés et les champs de saisie sont placés à l'intérieur d'une boîte horizontale. Ensuite, les libellés sont placés à l'intérieur d'une autre boîte, une verticale cette fois, de même que les champs de saisie. C'est cette boîte interne qui oriente verticalement les éléments. La boîte horizontale est nécessaire puisque nous voulons que la vbox des libellés et que la vbox des champs de saisie soient placées l'une à côté de l'autre. Si cette boîte était enlevée, les champs de saisie apparaîtraient sous les libellés.

- -

L'ennui est que le libellé « Mot de passe » est désormais trop haut. Il nous faudra utiliser l'élément grid pour résoudre ce phénomène, ce que nous verrons dans une prochaine section.

- -
-

Des boîtes dans la boîte de dialogue de recherche de fichiers

- -

Ajoutons quelques boîtes à la boîte de dialogue de recherche de fichiers. Une boîte verticale sera ajoutée autour de tous les éléments, et une boîte horizontale sera ajoutée autour du champ de saisie et des boutons. Le résultat sera que les boutons apparaîtront sous le champ de saisie.

- -

Source Voir

- -
<vbox flex="1">    <description>     Entrez votre critère de recherche ci-dessous et sélectionnez le bouton      Rechercher pour démarrer la recherche.   </description>      <hbox>
-    <label value="Rechercher :" control="find-text"/>
-    <textbox id="find-text"/>
-  </hbox>    <hbox>     <spacer flex="1"/>
-
-    <button id="find-button" label="Rechercher"/>
-    <button id="cancel-button" label="Annuler"/>
-  </hbox> </vbox>
-
- -
Image:xultu_boxes1.png
- -

La boîte verticale entraîne l'orientation verticale du texte principal, de la boîte contenant le champ de saisie ainsi que de la boîte avec les deux boutons. Les boîtes internes orientent leurs éléments horizontalement. Comme vous pouvez le voir sur l'image, le libellé et le champ de saisie de texte sont placés côte à côte. L'élément spacer et les deux boutons sont aussi placés horizontalement dans leur boîte.

- -
Notez que l'élément spacer, parce qu'il est flexible, force les boutons à apparaître sur le côté droit.
-
- -
-

Dans la prochaîne section, nous verrons comment spécifier les tailles des éléments individuellement et comment contraindre leurs tailles.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_bo\303\256tes_de_groupe/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/les_bo\303\256tes_de_groupe/index.html" deleted file mode 100644 index bba6701791..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_bo\303\256tes_de_groupe/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Les boîtes de groupe -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Les_boîtes_de_groupe -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Groupboxes ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Cette section décrit la façon d'inclure des éléments dans des groupes.

- -

Les boîtes de groupes

- -

HTML fournit un élément, fieldset, qui peut être utilisé pour regrouper plusieurs éléments. Une bordure est affichée autour des éléments pour montrer qu'ils sont en relation. Un exemple pourrait être un groupe de cases à cocher. XUL fournit un élément équivalent, groupbox, qui peut être utilisé pour un usage similaire.

- -

Comme son nom l'indique, groupbox est un type de boîte. Ce qui signifie que les éléments à l'intérieur sont alignés selon l'application des règles des boîtes. Il y a deux différences entre les boîtes de groupes et les boîtes normales :

- - - -

Puisque les boîtes de groupe sont des types de boîtes, vous pouvez utiliser les mêmes attributs tels que orient et flex. Vous pouvez mettre tous les éléments que vous voulez à l'intérieur de la boîte, mais il devra typiquement y avoir un rapport entre eux.

- -

Le libellé en haut de la boîte de groupe peut être créé en utilisant l'élément caption. Il fonctionne comme l'élément HTML legend. Un simple élément caption placé en tant que première balise fille est suffisant.

- -

Un simple exemple groupbox

- -

L'exemple ci-dessous montre un groupbox simple :

- -

Exemple 1: Source Voir

- -
Image:xultu_titledbox1.png
- -
<groupbox>
-   <caption label="Réponse"/>
-   <description value="Banane"/>
-   <description value="Mandarine"/>
-   <description value="Cabine téléphonique"/>
-   <description value="Kiwi"/>
-</groupbox>
-
- -

Cet exemple affiche quatre bouts de texte entourés par la boîte avec le libellé Réponse. Notez que la boîte de groupe a une orientation verticale par défaut nécessaire pour avoir les éléments texte empilés en une seule colonne.

- -

Légendes plus complexes

- -

Vous pouvez aussi ajouter des éléments fils à l'interieur de l'élément caption pour créer une légende plus complexe. Par exemple, le panneau de préférence des polices de caractères de mozilla utilise un liste déroulante comme légende. Bien que vous puissiez utiliser n'importe quel contenu, vous utiliserez la plupart du temps une case à cocher ou une liste déroulante.

- -

Exemple 2: Source Voir

- -
Image:xultu_groupbox2.png
- -
<groupbox flex="1">
-   <caption>
-     <checkbox label="Activer la sauvegarde"/>
-   </caption>
-   <hbox>
-     <label control="dir" value="Répertoire :"/>
-     <textbox id="dir" flex="1"/>
-   </hbox>
-   <checkbox label="Compresser les fichiers archivés"/>
-</groupbox>
-
- -

Dans cet exemple, une case à cocher a été utilisée comme légende. Nous devons utiliser un script pour activer et désactiver le contenu de la boîte de groupe, quand la case est cochée ou décochée. La boîte de groupe contient une boîte horizontale avec un libellé et un champ de saisie. Ces deux éléments sont flexibles donc le champ de saisie s'agrandit quand la fenêtre s'agrandit. La case à cocher supplémentaire apparait en dessous du champ de saisie à cause de l'orientation verticale de la boîte de groupe. Nous ajouterons une boîte de groupe à notre exemple de recherche de fichiers dans la prochaine section.

- -

Les groupes de boutons radio

- -

Vous pouvez utiliser l'élément radiogroup pour regrouper des éléments boutons radios. radiogroup est un type de boîte. Vous pouvez y mettre n'importe quel élément, et à part le comportement spécial sur les boutons radios, il fonctionne comme n'importe quelle autre boîte.

- -

Tous les boutons radios placés à l'intérieur d'un radiogroup seront groupés ensemble, même s'ils sont à l'intérieur de boîtes imbriquées. Ce fonctionnement est utilisé pour ajouter des éléments supplémentaires à l'intérieur de la structure, comme dans l'exemple suivant :

- -

Exemple 3: Source Voir

- -
<radiogroup>
-   <radio id="no" value="no" label="Pas de nombre"/>
-   <radio id="random" value="random" label="Nombre aléatoire"/>
-   <hbox>
-     <radio id="specify" value="specify" label="Nombre spécifique :"/>
-     <textbox id="specificnumber"/>
-   </hbox>
-</radiogroup>
-
- -
Notez que l'élément radiogroup n'a pas de bordure. Vous devez placer un élément groupbox autour si vous voulez une bordure et une légende.
- -
-

Maintenant, nous allons utiliser tout ce que nous avons appris pour ajouter des éléments supplémentaires dans la boîte de dialogue de recherche de fichiers.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/les_champs_de_saisie/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/les_champs_de_saisie/index.html deleted file mode 100644 index 6b2501c9fc..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/les_champs_de_saisie/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Les champs de saisie -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Les_champs_de_saisie -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Input_Controls ---- -
-

« PrécédentSuivant »

-
- -

 

- -

XUL possède des éléments qui sont similaires aux champs des formulaires HTML.

- -

Les champs de saisie de texte

- -

Le HTML possède une balise input pouvant être utilisée comme champ de saisie de texte. XUL possède un élément similaire, textbox, utilisé comme champ de saisie de texte. Sans aucun attribut, l'élément textbox crée une boîte dans laquelle l'utilisateur peut entrer du texte. Les boîtes de texte acceptent plusieurs attributs similaires à la balise input de l'HTML. En voici quelques uns :

- -
-
id 
-
Un identifiant unique permettant d'identifier la boîte de texte.
-
class 
-
La classe du style de la boîte de texte.
-
value 
-
Si vous voulez donner une valeur par défaut à la boîte de texte, renseignez l'attribut value.
-
disabled 
-
Mettez la valeur 'true' pour empêcher l'insertion de texte.
-
type 
-
Vous pouvez renseigner cet attribut avec la valeur spéciale 'password' pour créer une boîte de texte dans laquelle tout ce qui est saisi est caché. Il est utilisé habituellement pour les champs de saisie de mot de passe.
-
maxlength 
-
Le nombre maximum de caractères que l'on peut saisir dans la boîte de texte.
-
- -
Notez que, tandis qu'en HTML différentes sortes de champs peuvent être créées avec l'élément input, il y a un élément différent pour chaque type de champs en XUL.
- -

L'exemple suivant montre quelques boîtes de texte :

- -

Exemple 1: Source Voir

- -
<label control="some-text" value="Entrez du texte"/>
-<textbox id="some-text"/>
-<label control="some-password" value="Entrez un mot de passe"/>
-<textbox id="some-password" type="password" maxlength="8"/>
-
- -

Boîte de texte multiligne

- -

Les exemples de boîtes de texte ci-dessus créent des champs de saisie qui ne peuvent être utilisés que pour la saisie d'une seule ligne de texte. Le HTML possède aussi un élément textarea pour créer une zone de saisie plus grande. Dans XUL, vous pouvez utiliser l'élément textbox de la même façon -- deux éléments distincts ne sont pas nécessaires. Si vous mettez l'attribut multiline à la valeur 'true', le champ de saisie de texte affichera plusieurs lignes.

- -

Par exemple :

- -

Exemple 2: Source Voir

- -
<textbox multiline="true"
-         value="Voici du texte qui pourrait s'étaler sur plusieurs lignes."/>
-
- -

Comme avec la balise textarea du HTML, vous pouvez utiliser les attributs rows et cols pour définir la taille. Ils vous permettent d'ajuster le nombre de lignes et de colonnes de caractères à afficher.

- -
-

Notre exemple de recherche de fichiers

- -

Maintenant, ajoutons un champ de saisie de recherche à la boîte de dialogue de recherche de fichiers. Nous allons utiliser l'élément textbox.

- -

Source Voir

- -
<label value="Chercher :" control="find-text"/>
-<textbox id="find-text"/>
-
-<button id="find-button" label="Rechercher"/>
-
- -
Image:xultu_inputs1.png
- -

Ajoutez ces lignes avant les boutons que nous avons créés dans la section précédente. Si vous ouvrez cette fenêtre, vous verrez quelque chose ressemblant à l'image ci-dessous.

-Notez que le libellé et le champ de saisie de texte sont maintenant apparus dans la fenêtre. La boîte de texte est complètement fonctionnelle et vous pouvez taper et sélectionner du texte dedans. Notez aussi que l'attribut control a été utilisé. Ainsi, le champ de saisie est sélectionnée lorsque l'on clique sur son libellé.
- -

Les cases à cocher et les boutons radio

- -

Deux éléments supplémentaires sont utilisés pour la création des cases à cocher et des boutons radio. Ce sont des variantes de boutons. La case à cocher est utilisée pour des options qui peuvent être activées ou désactivées. Les boutons radio peuvent être utilisés dans un but similaire quand il y a un ensemble de boutons où un seul d'entre eux peut-être sélectionné à la fois.

- -

Vous pouvez employer la plupart des attributs des boutons avec les cases à cocher et les boutons radio. L'exemple ci-dessous montre des cases à cocher et boutons radio simples.

- -
<checkbox id="case-sensitive" checked="true" label="Sensible à la casse"/>
-<radio id="orange" label="Orange"/>
-<radio id="violet" selected="true" label="Violet"/>
-<radio id="yellow" label="Jaune"/>
-
- -

La première ligne crée une simple case à cocher. Quand l'utilisateur clique sur la case à cocher, son état coché et décoché s'inverse. L'attribut checked peut être utilisé pour indiquer l'état par défaut. Il vous faudra l'initialiser soit à 'true', soit à 'false'. L'attribut label peut être utilisé pour ajouter un libellé qui apparaitra à côté de la case à cocher. Pour les boutons radio, vous utiliserez l'attribut selected à la place de l'attribut checked. Initialisez le à 'true' pour avoir un bouton radio sélectionné par défaut, ou ne le mettez pas pour les autres boutons radio.

- -

Élement radiogroup

- -

Pour grouper des boutons radio ensemble, vous devez utiliser l'élément radiogroup. Un seul bouton radio peut-être sélectionné dans un radiogroup. Cliquez sur l'un deux désélectionnera tous les autres du même groupe. C'est ce que démontre l'exemple suivant.

- -

Exemple 3: Source Voir

- -
<radiogroup>
-  <radio id="orange" label="Orange"/>
-  <radio id="violet" selected="true" label="Violet"/>
-  <radio id="Jaune" label="Jaune"/>
-</radiogroup>
-
- -

Attributs

- -

Comme pour les boutons, les cases à cocher et les boutons radio sont constitués d'un libellé et d'une image, où l'image change en fonction de l'état coché ou décoché. Les cases à cocher ont certains attributs communs aux boutons :

- -
-
label 
-
Le libellé de la case à cocher ou du bouton radio.
-
disabled 
-
Mettez la valeur à 'true' ou à 'false' pour désactiver ou activer la case à cocher ou le bouton radio.
-
accesskey 
-
La touche clavier pouvant être utilisée comme raccourci pour sélectionner l'élément. La lettre spécifiée est habituellement soulignée dans le libellé.
-
- -
-

Dans la prochaine section, nous allons voir quelques éléments pour la création de boîtes de listes.

- -
-

« PrécédentSuivant »

-
diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_contr\303\264les_de_listes/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/les_contr\303\264les_de_listes/index.html" deleted file mode 100644 index 3a5349caa9..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_contr\303\264les_de_listes/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Les contrôles de listes -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Les_contrôles_de_listes -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/List_Controls ---- -
-

« PrécédentSuivant »

-
-

XUL dispose de nombreux types d'éléments pour créer des boîtes de listes.

-

Zones de listes

-

Une zone de liste est utilisée pour afficher un nombre d'items dans une liste. L'utilisateur doit pouvoir choisir un des item de la liste.

-

XUL propose deux types d'éléments pour créer des listes, un élément listbox pour créer des zones de liste multi-lignes, et un élément menulist pour créer des zones de listes déroulantes. Ils fonctionnent de la même manière que l'élément select du langage HTML qui réalise ces deux fonctions, mais les élements XUL ont plus de fonctionnalités.

-

La zone de liste la plus simple utilise l'élément listbox pour créer la boîte, et l'élément listitem pour chacun des items. Par exemple, cette zone de liste a quatre lignes, une pour chaque item.

-

Exemple 1: Source Voir

-
<listbox>
-  <listitem label="Beurre de cacahuète"/>
-  <listitem label="Chocolat à tartiner"/>
-  <listitem label="Confiture de fraise"/>
-  <listitem label="Crême chantilly"/>
-</listbox>
-
-
- Image:xultu_list1.png
-

À l'instar de la balise option du langage HTML, vous pouvez assigner une valeur à chaque item en utilisant l'attribut value. Vous pouvez ensuite utiliser cette valeur dans un script. Par défaut, la zone de liste ajustera sa taille à son contenu, mais vous pouvez contrôler sa taille avec l'attribut rows. Affectez lui le nombre de lignes que vous souhaitez voir apparaître dans la zone de liste. Un ascenseur apparaîtra pour permettre à l'utilisateur d'afficher les lignes supplémentaires.

-

L'exemple suivant montre ces fonctionnalités supplémentaires :

-

Exemple 2: Source Voir

-
<listbox rows="3">
-  <listitem label="Beurre de cacahuète" value="becacah"/>
-  <listitem label="Chocolat à tartiner" value="chotart"/>
-  <listitem label="Confiture de fraise" value="confraise"/>
-  <listitem label="Creme chantilly" value="crchant"/>
-</listbox>
-
-

L'exemple a été modifié pour n'afficher que 3 lignes à la fois. Des valeurs ont également été ajoutées à chaque item de la liste. Les zones de liste ont beaucoup d'autres fonctionnalités qui seront décrites plus tard.

-

Boîte de liste multi-colonnes

-

Les boîtes de liste supportent également les colonnes multiples. Chaque cellule peut avoir un contenu arbitraire bien qu'il s'agisse souvent seulement de texte. Quand un utilisateur sélectionne un item dans la liste, la ligne entière est sélectionnée. Il n'est pas possible de sélectionner une seule cellule.

-

Deux balises sont utilisées pour spécifier les colonnes dans une boîte de liste. L'élément listcols est utilisé pour contenir l'information sur les colonnes, chacune d'elles est spécifiée en utilisant un élément listcol Vous aurez besoin d'un élément listcol pour chaque colonne de la liste.

-

L'élément listcell doit être utilisé pour chaque cellule dans une ligne. Si vous voulez avoir trois colonnes, vous aurez besoin d'ajouter trois éléments listcell à l'intérieur de chaque listitem. Pour spécifier le contenu d'un texte de la cellule, placez un attribut label sur cet élément listcell. Dans le cas simple où il n'y a qu'une seule colonne, vous pouvez aussi placer l'attribut label directement sur l'élément listitem et omettre complètement les éléments listcell, comme cela a été montré dans les exemples de listes précédents.

-

L'exemple suivant est une boîte de liste de deux colonnes et trois lignes.

-

Exemple 3: Source Voir

-
<listbox>
-  <listcols>
-    <listcol/>
-    <listcol/>
-  </listcols>
-  <listitem>
-    <listcell label="George"/>
-    <listcell label="Peintre en bâtiment"/>
-  </listitem>
-  <listitem>
-    <listcell label="Mary Ellen"/>
-    <listcell label="Fabriquant de bougies"/>
-  </listitem>
-  <listitem>
-    <listcell label="Roger"/>
-    <listcell label="Bravache"/>
-  </listitem>
-</listbox>
-
-

Lignes d'en-tête

-

Les boîtes de liste permettent également l'utilisation d'une ligne d'en-tête spéciale. Elle n'est rien d'autre qu'une ligne normale, sauf qu'elle est affichée différemment. Elle servira à créer des en-têtes de colonnes grâce à deux nouveaux éléments.

-

L'élément listhead est utilisé pour définir la ligne d'en-tête, comme l'élément listitem est utilisé pour définir une ligne normale. La ligne d'en-tête n'est toutefois pas une ligne normale, ainsi un script permettant de lire la première ligne d'une boîte de liste ne tiendra pas compte de cette ligne d'en-tête.

-

L'élément listheader est utilisé pour chaque cellule de l'en-tête. Utilisez l'attribut label pour définir le libellé de la cellule d'en-tête.

-

Voici l'exemple précédent avec une ligne d'en-tête :

-

Exemple 4: Source Voir

-
<listbox>
-
-  <listhead>
-    <listheader label="Nom"/>
-    <listheader label="Activité"/>
-  </listhead>
-
-  <listcols>
-    <listcol/>
-    <listcol flex="1"/>
-  </listcols>
-
-  <listitem>
-    <listcell label="George"/>
-    <listcell label="Peintre en bâtiment"/>
-  </listitem>
-  <listitem>
-    <listcell label="Mary Ellen"/>
-    <listcell label="Fabriquant de bougies"/>
-  </listitem>
-  <listitem>
-    <listcell label="Roger"/>
-    <listcell label="Bravache"/>
-  </listitem>
-
-</listbox>
-
-
- Image:xultu_lists_3.png
-

Dans cet exemple, l'attribut flex est utilisé pour rendre la colonne flexible. Cet attribut sera décrit dans une section ultérieure, mais ici, il permet à la colonne de remplir tout l'espace disponible horizontalement. Vous pouvez retailler la fenêtre pour voir que la colonne s'adapte en même temps que la fenêtre. Si vous diminuez la taille horizontalement, les libellés sur les cellules seront raccourcis automatiquement, en affichant des points de suite. Vous pouvez utiliser l'attribut crop sur les cellules ou sur les items, avec une valeur 'none' pour désactiver cette coupure.

-

Zones de listes déroulantes

-

Des listes déroulantes peuvent être créées en HTML avec la balise select. L'utilisateur ne voit qu'un unique choix dans une boîte de texte et doit cliquer sur une flèche ou un bouton similaire à côté de la boîte de texte pour changer la sélection. Les autres choix apparaitront alors dans une fenêtre surgissante. XUL dispose de l'élément menulist qui peut servir à cet usage. Il est formé d'une boîte de texte avec un bouton à son côté. Son nom a été choisi parce qu'il propose un menu surgissant pour le choix.

-

Trois éléments sont nécessaires pour former une liste déroulante. Le premier est l'élément menulist qui crée la boîte de texte avec son bouton à côté. Le second, menupopup, crée la fenêtre surgissante qui apparaît lorsque le bouton est cliqué. Le troisième, menuitem, crée les choix individuels.

-

Cette syntaxe est mieux décrite dans l'exemple ci-dessous :

-

Exemple 5: Source Voir

-
<menulist label="Bus">
-  <menupopup>
-    <menuitem label="Voiture"/>
-    <menuitem label="Taxi"/>
-    <menuitem label="Bus" selected="true"/>
-    <menuitem label="Train"/>
-  </menupopup>
-</menulist>
-
-
- Image:xultu_list2.png
-

Ce menu contient quatre choix, un pour chaque élément menuitem. Pour voir les choix possibles, cliquez sur le bouton flèche du menu. Lorsqu'un item est sélectionné, il apparaît comme le choix fait dans le texte du menu. L'attribut selected est utilisé pour définir la valeur sélectionnée par défaut.

- -

Par défaut, vous ne pouvez sélectionner que des choix proposés dans la liste. Vous ne pouvez pas entrer votre propre sélection en la tapant au clavier. Une variante de menulist le permet. Par exemple, le champ URL du navigateur dispose d'une liste déroulante pour afficher les adresses précédemment utilisées, mais vous pouvez aussi la saisir vous même.

-

Pour créer une liste déroulante éditable, ajoutez l'attribut editable comme ceci :

-

Exemple 6: Source Voir

-
<menulist '''editable="true"'''>
-  <menupopup>
-   <menuitem label="www.mozilla.org"/>
-   <menuitem label="www.xulplanet.com"/>
-   <menuitem label="www.dmoz.org"/>
-  </menupopup>
-</menulist>
-
-

Le champ URL créé ici a trois adresses pré-saisies que l'utilisateur peut sélectionner ou alors il peut taper la sienne dans le champ. Le texte entré par l'utilisateur ne sera pas ajouté comme un futur choix à cette liste. Comme l'attribut label n'a pas été utilisé dans cet exemple, sa valeur par défaut sera vide.

-
-

Dans la section suivante, nous apprendrons comment ajouter des indicateurs de progression.

-
-

« PrécédentSuivant »

-
diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_contr\303\264les_num\303\251riques/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/les_contr\303\264les_num\303\251riques/index.html" deleted file mode 100644 index 73c81e4d9f..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_contr\303\264les_num\303\251riques/index.html" +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Les contrôles numériques -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Les_contrôles_numériques -tags: - - Firefox 3 - - Traduction_à_relire - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Numeric_Controls ---- -
-

« PrécédentSuivant »

-
- -

XUL comprend deux éléments servant aux entrées de valeurs ou de plages numériques, ainsi que de deux éléments pour la saisie des dates et heures. Ces éléments ne sont disponibles que dans Firefox 3 et suivant.

-

Champs numérique

-

Une boîte de texte peut servir à la saisie de nombres en lui définissant un attribut type avec la valeur number. Ce type de boîte ne peut servir que pour entrer des nombres. Tout autre caractère tapé ne sera pas accepté et sera ignoré. De plus, des flèches apparaitront à côté de la boîte de texte pour permettre à l'utilisateur de faire défiler les valeurs.

-
- Image:Controlguide-textbox-number.png
-

Comme avec les autres boîtes de texte, la valeur par défaut peut être définie avec l'attribut value. Naturellement, cette valeur doit être un nombre. Toutefois, les valeurs minimale et maximale peuvent être définies avec les attributs min et max. S'ils sont précisés, vous pouvez contrôler l'intervalle de valeurs permis par la boîte de texte. Si l'utilisateur tente d'entrer une valeur inférieure ou supérieure à cet intervalle, elle sera réinitialisée avec le minimum ou le maximum. Par exemple, la boîte de texte suivante a un intervalle de 1 à 20.

-
<textbox type="number" min="1" max="20"/>
-
-

Comme la valeur par défaut n'est pas définie, la boîte aura la valeur 1, la valeur minimum. L'attribut min est défini à 1 pour indiquer la plus petite valeur possible, et l'attribut max est défini à 20 pour indiquer la plus grande valeur possible. Si la valeur minimale n'est pas définie, elle aura une valeur par défaut de 0. La valeur maximale par défaut est la valeur spéciale Infinity signifiant qu'il n'y a aucune limite.

-

Autres attributs des champs numériques

-

L'attribut increment peut servir à spécifier de combien est modifiée la valeur lorsque les flèches sont pressées. La valeur par défaut est 1, mais une valeur différente permettra au nombre de changer d'une plus grosse valeur. L'exemple suivant effectue des écarts de multiples de 10.

-
<textbox type="number" increment="10" max="100"/>
-
-

Cette boîte de texte change par multiples de 10 de 0 à 100. Comme l'attribut min n'a pas été défini, sa valeur par défaut est 0. Notez que l'utilisateur peut parfaitement entrer une autre valeur. L'attribut increment n'affecte que les flèches. L'utilisateur peut également incrémenter ou décrémenter la valeur en utilisant les flèches haut et bas du clavier lorsque la boîte de texte à le focus.

-

L'attribut decimalplaces indique le nombre de décimales à afficher. La valeur par défaut est 0, ce qui signifie que la boîte n'affiche que des entiers. Une valeur différente permet d'afficher des nombres décimaux.

-
<textbox type="number" decimalplaces="2"/>
-
-

Dans cet exemple, deux chiffres après la virgule sont affichés. Les valeurs comportant d'autres décimales sont arrondies à 2 chiffres après la virgule.

-

Échelles de valeurs

-

Un élément scale peut également être utilisé pour sélectionner une plage de valeurs. Plutôt que d'avoir une boîte de texte, un curseur glissant est utilisé. L'utilisateur peut déplacer le curseur de l'échelle pour ajuster la valeur.

-
- Image:Controlguide-scale.png
-

La plupart des attributs de la boîte de texte numérique peuvent servir avec une échelle : value, min, max et increment peuvent servir de la même façon. L'échelle de valeur n'affiche en fait aucune valeur, mais peut le faire grâce à un script. Une échelle déclenche un événement change à chaque fois que sa valeur est modifiée.

-
<scale value="40" min="1" max="50"/>
-
-

La valeur par défaut de cette échelle est 40, et elle a une plage comprise entre 1 et 50.

-

Une boîte de texte numérique est employée généralement lorsque la valeur est importante pour l'utilisateur, comme un champs pour saisie un nombre de jours ou la taille maximale d'un fichier. Une échelle de valeur servira plutôt lorsque la valeur n'est pas très importante, comme l'augmentation ou la diminution d'un état, par exemple pour le volume sonore ou un zoom.

-

La disposition par défaut d'une échelle est horizontale avec à gauche les valeurs les plus basses et à droite, les plus hautes. Vous pouvez toutefois modifier cette orientation avec les attributs orient et dir.

-
<scale orient="vertical" dir="reverse"/>
-
-

Cette échelle de valeurs s'affichera verticalement avec les valeurs les plus basses en bas, et les plus élevées en haut.

-

Champs de saisie de date et heure

-

Les éléments datepicker et timepicker permettent à l'utilisateur d'entrer des dates et des heures. À leur utilisation, ils affichent une série de boîtes de texte numérique pour entrer chaque composants de la date et de l'heure.

-
<datepicker value="2004/3/24"/>
-<timepicker value="15:30:00"/>
-
-
- Image:Controlguide-timepicker.png
-

L'attribut value permet de définir la valeur par défaut ; et si cet attribut est omis, le champ sera initialisé avec la date et l'heure courante. Le format de l'attribut est exactement comme ci-dessus, c'est-à-dire que les dates sont de la forme YYY/MM/DD et les heures sont de la forme HH:MM:SS (bien que les secondes et les autres colonnes peuvent être omises).

-

Ces deux éléments garantissent que l'utilisateur a bien entré une valeur date et une heure. De cette manière, vous n'avez pas à vous soucier qu'il s'agit d'une date valide, en vérifiant que le jour n'est pas supérieur au nombre de jour dans le mois, en gérant les années bissextiles, et ainsi de suite.

-

Tandis que timepicker ne possède qu'un seul style, datepicker possède trois variations différentes. Le style par défaut affiche trois champs pour l'année, le mois et le jour. L'attribut type permet de choisir les deux autres. Une valeur de grid utilise une grille de calendrier, comme affichée dans l'image ci-dessous.

-

Image:Controlsguide-datepicker-grid.png

-

Vous pouvez également utiliser la valeur popup pour créer une combinaison des deux types. Ce type a trois champs pour entrer l'année, le mois et la date, ainsi qu'un bouton pour afficher un calendrier surgissant pour choisir un jour.

-
<datepicker type="popup"/>
-
-
-

« PrécédentSuivant »

-
diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_fichiers_de_propri\303\251t\303\251s/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/les_fichiers_de_propri\303\251t\303\251s/index.html" deleted file mode 100644 index a644660bf3..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_fichiers_de_propri\303\251t\303\251s/index.html" +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Les fichiers de propriétés -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Les_fichiers_de_propriétés -tags: - - Localisation - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Property_Files ---- -

 

-
-

« PrécédentSuivant »

-
-

 

-

Dans un script, les entités ne peuvent être utilisées. On utilise alors plutôt les fichiers de propriétés.

-

Propriétés

-

Les fichiers DTD sont adaptés à des chaînes issues d'un fichier XUL. Néanmoins, dans un script, les entités ne sont pas analysées pour être remplacées. De plus, vous pourriez souhaiter afficher un message généré par un script, sans par exemple connaître à l'avance son contenu. Les fichiers de propriétés peuvent être utilisés dans ce but.

-

Un fichier de propriétés contient une suite de chaînes de caractères. Vous trouverez les fichiers de propriétés aux côtés des fichiers DTD avec l'extension .properties. Les propriétés dans un de ces fichiers sont déclarées selon une structure nom=valeur. Un exemple est décrit ci-dessous :

-
notFoundAlert=Aucun fichier trouvé correspondant aux critères.
-deleteAlert=Cliquez sur OK pour effacer tous vos fichiers.
-resultMessage=%2$S fichiers trouvés dans le répertoire %1$S.
-
-

Ici, le fichier de propriétés contient deux propriétés. Elles pourront être lues par un script et affichées.

-

Stringbundles

-

Vous pouvez écrire le code de lecture des propriétés vous-mêmes, néanmoins XUL fournit l'élément stringbundle qui le fait pour vous. Cet élément dispose de plusieurs fonctions pouvant être utilisées pour récupérer les chaînes de caractères des fichiers de propriétés et d'autres informations de localisation. Cet élément lit le contenu des fichiers de propriétés et construit une liste de ces propriétés pour vous. Vous pouvez donc ensuite y accéder par leur nom.

-
<stringbundleset id="strbundles">
-<stringbundle id="strings" src="strings.properties"/>
-</stringbundleset>
-
-

L'inclusion de cet élément permettra de lire les propriétés via le fichier 'strings.properties' dans le même répertoire que le fichier XUL. Utilisez une URL chrome pour lire un fichier de localisation. Comme pour d'autres éléments non affichables, vous devriez déclarer tous les stringbundles à l'intérieur d'un élément stringbundleset pour les regrouper.

-

Obtention d'une chaîne d'une collection

-

L'élément stringbundle a plusieurs propriétés. La première est getString pouvant être utilisée dans un script pour lire une chaîne de caractères de la collection.

-
var strbundle = document.getElementById("strings");
-var nofilesfound=strbundle.getString("notFoundAlert");
-
-alert(nofilesfound);
-
- -
À propos de l'obtention d'une chaîne d'une collection
-

Si vous souhaitez utiliser l'élément stringbundle au sein d'un <overlay>, merci de faire attention. Vous devrez placer votre stringbundle dans un élément <window>, d'identifiant 'main-window'. Sinon, vous ne serez pas à même de récupérer les chaînes depuis votre code JavaScript, sans comprendre pourquoi. Ainsi, le code que vous auriez écrit aurait pu être :

-
<overlay id="OverLayId">
-    <stringbundleset id="strbundles">
-        <stringbundle id="strings" src="strings.properties"/>
-    </stringbundleset>
-</overlay>
-
-

Il sera donc :

-
<overlay id="OverLayId">
-    <window id="main-window">
-        <stringbundleset id="strbundles">
-            <stringbundle id="strings" src="strings.properties"/>
-        </stringbundleset>
-    </window>
-</overlay>
-
-

Formatage de texte

-

La méthode suivante est getFormattedString(). Elle permet également d'obtenir avec une clef donnée une chaîne de la collection. Mais en plus, chaque occurrence de code de formatage (par ex. %S) est remplacée par chaque élément successif dans le tableau transmis.

-
var dir = "/usr/local/document";
-var count = 10;
-
-var strbundle = document.getElementById("strings");
-var result = strbundle.getFormattedString("resultMessage", [ dir, count ]);
-
-alert(result);
-
-

Cet exemple affichera le message suivant dans une boîte d'alerte.

-
10 fichiers trouvés dans le répertoire /usr/local/document.
-

Vous noterez que les codes de formatage %1$S et %2$S sont utilisés, et sont remplacés par les différents membres dans le tableau. Un code de formatage %n$S spécifie directement la position du paramètre correspondant. Bien que l'ordre des mots soit différent dans tous les langages, l'utilisation de getFormattedString() permet de préciser l'ordre dans les fichiers de propriétés.

Échappement de caractères non-ASCII

-

 

-

Avant Gecko 1.8

-

Bien que la plupart des langages nécessitent des caractères non-ASCII, les fichiers de propriétés doivent être écrits en n'utilisant que des caractères ASCII. Cependant, les fichiers de propriétés supportent d'autres caractères grâce à des séquences échappées de la forme : \uXXXX où XXXX est le code du caractère. Ainsi, si votre fichier de propriété contient des caractères non-ASCII, vous devrez le convertir au format 'échappement-unicode'. Pour faire cela, vous pouvez utiliser l'utilitaire en ligne de commande native2ascii fourni avec le kit de développement Java de Sun (JDK).

-

À partir de Gecko 1.8.x (et versions ultérieures)

-

Les fichiers .properties encodés en UTF-8 sont pris en charge. Vous pouvez donc utiliser des caractères non-ASCII sans avoir à les "échapper".

-
-

Dans la prochaine section, nous découvrirons XBL qui peut être utilisé pour définir le comportement d'un élément.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/les_fichiers_manifest/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/les_fichiers_manifest/index.html deleted file mode 100644 index 50ea0d2e3e..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/les_fichiers_manifest/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Les fichiers manifest -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Les_fichiers_manifest -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Manifest_Files ---- -
-

« PrécédentSuivant »

-
-

Dans cette section, nous allons voir comment mettre des fichiers XUL et chrome dans un paquetage et créer les fichiers manifest associés.

-

Paquetages

-

Un paquetage est un ensemble de fichiers XUL et de scripts qui définissent la fonctionnalité d'une interface utilisateur. Les paquetages peuvent être installés dans Mozilla et référencés avec des URLs chrome. Un paquetage peut contenir tous les fichiers que l'on veut et peut-être découpé en sous-répertoires pour les différentes parties du paquetage. Un paquetage peut-être enregistré soit comme un répertoire ou soit comme une archive JAR.

-

Les fichiers manifest

-

Un fichier manifest décrit un paquetage et relie son emplacement sur le disque à son adresse URL chrome. Les fichiers manifest situés dans le répertoire chrome sont examinés au lancement d'une application Mozilla pour déterminer les paquetages installés. Cela signifie que tout ce que vous avez à faire pour installer un nouveau paquetage est d'ajouter un fichier manifest soit dans le répertoire chrome de l'application, soit dans le répertoire chrome du profil de l'utilisateur. Le second emplacement est normalement le seul utilisé puisque les permissions ne devraient pas être suffisantes pour écrire dans le répertoire de l'application.

-

Si vous voulez tester un code XUL à privilèges dans le navigateur Firefox, un simple fichier manifest contenant une seule ligne est nécessaire :

-
    -
  1. Créez un nouveau répertoire quelque part. Par exemple, sur une plateforme Windows, utilisez C:\testfiles.
    2. -
  2. Créez un nouveau fichier ASCII (un format UTF-8 avec BOM ne fonctionnera pas) appelé test.manifest dans le répertoire chrome. Le nom du fichier importe peu dès lors qu'il possède une extension .manifest.
    3. -
  3. Ajoutez la ligne suivante à ce fichier :
    4. -
-
content tests file:///C:/testfiles/
-
-

Le chemin mentionné dans cette ligne doit pointer vers le répertoire créé plus haut. Si vous avez un doute sur la syntaxe de ce chemin, ouvrez ce répertoire dans un navigateur et copiez l'URL obtenue dans la barre d'adresse.

-

C'est fait ! Maintenant, tout ce qu'il vous reste à faire est d'ajouter des fichiers XUL dans ce nouveau répertoire, et vous serez capable de les charger en tapant une URL chrome de la forme chrome://tests/content/<filename>. Bien entendu, vous devrez redémarrer votre navigateur pour les changements soient pris en compte. Si le fichier ne se charge pas, vérifiez que le chemin vers le répertoire est correct.

-

La syntaxe de base des lignes du manifest du paquetage de contenu est :

-

'content <nom_du_paquetage> <chemin_vers>'

-

Le premier mot 'content' indique qu'il s'agit d'un paquetage de contenu. Pour les thèmes graphiques, le mot serait 'skin' et pour les fichiers de langue, il serait 'locale'. Le nom du paquetage dans l'exemple ci-dessus est 'tests', donc le premier champ dans l'URL chrome est 'tests' comme dans chrome://tests/content/exemple.xul. Si le nom du paquetage était 'browser', l'URL chrome serait chrome://browser/content. Le dernier champ <chemin_vers> correspond à l'emplacement des fichiers. Il peut être soit un une URL file vers un répertoire local, soit une URL jar vers une archive JAR qui sera décrit plus tard. Vous pouvez déclarer plusieurs paquetages dan le même fichier manifest en ajoutant des lignes.

-

Le fichier browser.manifest utilisé par Firefox ressemble à ceci :

-
content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes
-content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes
-overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul
-overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul
-overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul
-
-

Deux paquetages sont déclarés ici : 'branding' et 'browser'. Trois overlays sont également spécifiés pour permettre aux différents paquetages de se combiner entre eux. Les extensions font un large usage des overlays pour fusionner leurs interfaces à celle du navigateur.

-

Les deux chemins des paquetages branding et browser utilisent des URLs jar car leur contenu se trouve dans une archive. Une archive JAR peut être créée avec un utilitaire ZIP. Pour un fichier JAR situé dans un répertoire chrome, la syntaxe est assez simple :

-

jar:<nom_de_fichier.jar>!<chemin_dans_archive>

-

Pour le paquetage du navigateur, l'archive est browser.jar et elle est située à côté du fichier manifest dans le répertoire chrome. Le chemin 'content/browser' spécifie le chemin à l'intérieur de l'archive où les fichier XUL sont situés. Il n'est pas nécessaire de préciser un chemin s'il n'y a aucun répertoire dans l'archive. Sur notre exemple, il y en a un puisque les fichiers du paquetage branding sont enregistrés dans un chemin différent de la même archive.

-

Pour le paquetage 'tests' créé ci-dessus, les fichiers ne sont pas empaquetés dans une archive, donc un chemin direct vers les fichiers est utilisé à la place. Cette méthode est bonne pour le développement puisque vous n'avez pas à réempaqueter tous les fichiers à chaque modification. Cependant, pour distribuer une application ou une extension, vous devriez les empaqueter dans une archive pour éviter l'installation d'une multitudes de petits fichiers.

-

La partie xpcnativewrappers=yes à la fin de la ligne du fichier manifest est un drapeau optionnel. En JavaScript, une page Web peut remplacer des fonctions natives avec son propre code. La présence de ce drapeau xpcnativewrappers=yes indique aux scripts tournant dans un contexte à privilèges de ne pas appeler ses versions remplacées, mais plutôt leurs versions natives. Sans cela, une extension pourrait tenter d'appeler ses versions modifiées et mal fonctionner, ou pire, ouvrir un trou de sécurité. Ce drapeau a été ajouté pour éviter ce genre de problème et devrait toujours être utilisé pour de nouvelles extensions, mais des anciennes extensions pourraient ne plus fonctionner sans lui. Pour plus d'informations concernant cette fonctionnalité, consultez XPCNativeWrapper.

-

Thèmes graphiques et langues

-

La syntaxe pour les thèmes et les langues est similaire aux paquetages de contenu, mais vous devrez préciser à quel paquetage de contenu ils s'appliquent. Par exemple :

-
skin browser classic/1.0 jar:classic.jar!/skin/classic/browser/
-locale browser en-US jar:en-US.jar!/locale/browser/
-

Pour cet exemple, le champ supplémentaire a été ajouté pour indiquer que le thème graphique et la langue s'applique au navigateur (browser). Le nom du thème est 'classic/1.0'. Dans le cas présent, un numéro de version est indiqué avec le nom du thème mais il est facultatif si vous développez votre propre thème. Mozilla n'effectue aucun traitement sur ce numéro qui est simplement une partie du nom du thème graphique. La langue est 'en-US'. Les adresses URLs résultant de cet exemple seront 'chrome://browser/skin' et 'chrome://browser/locale'. Si vous créez votre propre thème graphique ou langue, il vous suffit d'adapter ces deux lignes en conséquence.

-

Pour plus d'informations sur les thèmes graphiques, consultez Thèmes. Pour plus d'informations sur la localisation, consultez Localisation.

-
-

Notre exemple de recherche de fichiers

-

Créons un fichier manifest pour notre boîte de dialogue de recherche de fichiers. Vous pouvez mettre ces trois types dans un même fichier. Lors de la création d'une extension, assurez vous que tous les types soient déclarés. Nous procèderons ainsi pour notre exemple. Créez un fichier findfile.manifest dans le répertoire chrome et ajoutez-y les lignes suivantes :

- 
content findfile file:///findfile/content/
-skin findfile classic/1.0 file:///findfile/skin/
-locale findfile en-US file:///findfile/locale/
-
-

Créez les nouveaux répertoires listés ci-dessus. Peu importe où vous les créez, mais leurs emplacements doivent être indiqués dans le fichier manifest. Naturellement, vous adapterez les chemins en fonction de votre système de fichiers. Si nous voulions distribuer le paquetage, nous le placerions dans un fichier JAR en modifiant les chemins. Pour l'instant, il s'agit d'un exemple de création d'un fichier manifest et une préparation des répertoires pour les exemples à venir dans les sections suivantes.

-

Notez que les deuxièmes champs pour les lignes 'skin' et 'locale' sont 'findfile'. Elles signifient que le thème graphique et la langue modifient le paquetage 'findfile' défini à la première ligne. Les trois chemins mentionnés correspondent chacun à un sous répertoire différent. Vous devrez procéder ainsi pour séparer les fichiers de chaque catégorie.

-
-

Installer un paquetage

-

Pour installer une application, vous devez soit lui créer un installeur, soit l'inclure dans une autre application. La méthode dépend du type d'application que vous créez. Pour des extensions, vous devez créer un fichier d'installation install.rdf décrivant ce qui doit être installé, l'auteur de l'extension et avec quelles versions du navigateur ou d'autres applications elles sont compatibles. Une structure de répertoires bien spécifique est nécessaires car l'emplacement des fichiers des extensions est limité. Une extension est paquetagée dans un fichier XPI. XPI est le raccourci pour XPInstall utilisé par Mozilla pour l'installation de composants. Comme pour un fichier JAR, un fichier XPI n'est autre qu'un fichier ZIP avec une extension différente, donc il vous suffit de disposer d'un utilitaire ZIP pour créer ou visualiser un XPI.

-

Le gestionnaire d'extensions de Firefox gère automatique les fichiers XPI pour installer les extensions. Il est recommandé de transférer les extensions sur le Mozilla Add-ons où les utilisateurs pourront les retrouver. Elles peuvent être installées depuis n'importe quel site, mais la configuration par défaut devra être modifiée pour permettre d'autres sites.

-

Il est également possible d'utiliser un script d'installation écrit en JavaScript. Cela vous permet de copier des fichiers vers d'autres emplacements et de réaliser d'autres tâches de gestion de fichiers. Cependant, les extensions installées avec un script ne seront pas listées dans le gestionnaire d'extensions, et il n'existe aucune méthode automatisée pour les désinstaller. Pour cette raison, les scripts d'installation ne sont pas souvent utilisés.

-

Les applications autonomes peuvent être empaquetées en utilisant XULRunner. Ceci permet d'obtenir un fichier exécutable séparé, et l'application peut être distribuée indépendamment d'un navigateur.

-

Pour plus d'informations sur la création d'extensions, consultez la page Extensions. Pour plus d'informations sur XULRunner, consultez la page XULRunner.

-

Applications anciennes

-

Si vous créez des applications pour des logiciels Mozilla plus anciens, c'est-à-dire précédent Firefox 1.5 ou Mozilla 1.8, le processus est un peu plus élaboré. Les explications qui suivent décrivent comment définir un paquetage pour des anciennes versions. Ce chapitre peut être omis si vous écrivez de nouvelles extensions ou applications XUL.

-
- Note : Cet ancien processus s'applique également à SeaMonkey 1.0 qui n'a pas encore adopté le format des "manifest".
-
    -
  1. Créez un répertoire n'importe où sur votre disque. De nombreuses personnes le placent dans un sous répertoire du répertoire chrome de Mozilla, mais ce n'est pas nécessaire. Le répertoire peut être ailleurs. Placez-y vos fichiers XUL.
    2. -
  2. Créez un fichier appelé contents.rdf et placez le dans ce répertoire. Copiez le texte suivant dans ce fichier contents.rdf. Ce fichier sert à identifier l'id de l'application, son nom, son auteur, sa version, etc. - 
    <?xml version="1.0"?>
-
-<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
-
-<RDF:Seq about="urn:mozilla:package:root"> <RDF:li resource="urn:mozilla:package:<span style="color:red">monapplication</span>"/> </RDF:Seq>
-
-<RDF:Description about="urn:mozilla:package:<span style="color:red">monapplication</span>" chrome:displayName="<span style="color:blue">Titre de l'application</span>" chrome:author="<span style="color:blue">Nom de l'auteur</span>" chrome:name="<span style="color:red">monapplication</span>" chrome:extension="true"/>
-
-</RDF:RDF>
    -
    3. -
  3. Modifiez les textes surlignés du fichier ci-dessus avec vos propres informations. Le texte rouge monapplication devrait être l'ID de votre application. Habituellement, l'ID est le même que le nom de votre application. Remplacez le texte en bleu avec le titre et l'auteur de votre application.
    4. -
  4. Si le champ 'chrome:extension' est à 'true', l'application est une extension de Mozilla Firefox qui apparaîtra dans la fenêtre des extensions du navigateur. S'il est à 'faux', elle n'apparaîtra pas.
    5. -
  5. Sauvegardez le fichier contents.rdf et assurez vous qu'il se trouve bien dans le répertoire que vous avez créé à l'étape 1.
    6. -
  6. Ouvrez le fichier <mozilla-directory>/chrome/installed-chrome.txt, où <mozilla-directory> est le répertoire dans lequel est installé Mozilla. Quittez Mozilla avant cette opération.
    7. -
  7. Ensuite, vous allez enregistrer la nouvelle application pour que Mozilla sache la localiser. Ajoutez une ligne à la fin du fichier installed-chrome.txt pointant vers le nouveau répertoire que vous avez créé à l'étape 1. Modifiez le texte surligné correspondant au chemin du répertoire. Assurez vous que son URL finisse par un slash, et que vous avez appuyé sur Entrée en fin de ligne. Si vous n'êtes pas certain de l'écriture de cette URL, ouvrez le répertoire que vous avez créé à l'étape 1 dans le navigateur Mozilla et recopiez l'URL de la barre d'adresse. Notez que la référence doit toujours être un répertoire, pas un fichier. content,install,url,file:///main/app/
    8. -
  8. Effacez le fichier <mozilla-directory>/chrome/chrome.rdf.
    9. -
  9. Démarrez Mozilla. Vous devriez être capable de visualiser les fichiers XUL que vous avez placé dans ce répertoire en utilisant une URL de la forme : chrome://applicationid/content/file.xul où file.xul est le nom du fichier. Le nom de votre fichier principal doit être applicationid.xul, et il sera automatiquement chargé depuis l'URL raccourcie chrome://applicationid/content/.
    10. -
-

Si vous créez des portions de skin ou de locale, répétez les étapes précédentes à l'exception du format du fichier contents.rdf qui est légèrement différent. Regardez des fichiers contents.rdf dans d'autres applications pour plus de détails.

-

Problèmes

-

La création de paquetage chrome peut parfois s'avérer difficile et il est difficile de diagnostiquer les problèmes. Voici quelques astuces au cas où vous bloquez.

- -

Pour plus d'information concernant les fichiers manifest, consultez la page Enregistrement chrome.

-

Dans la section suivante, nous aborderons le langage XUL.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_objets_bo\303\256tes/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/les_objets_bo\303\256tes/index.html" deleted file mode 100644 index 98826074eb..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_objets_bo\303\256tes/index.html" +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Les objets boîtes -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Les_objets_boîtes -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Box_Objects ---- -
-

« PrécédentSuivant »

-
- -

Cette section décrit l'objet boîte qui contient des informations relatives à l'affichage et à la mise en page d'une boîte XUL aussi bien que des détails sur la mise en page XUL.

- -

À propos de la mise en page XUL

- -

Mozilla divise son fonctionnement en deux séries d'arbres, l'arbre du contenu et l'arbre de mise en page. L'arbre de contenu stocke les nœuds trouvés tels quels dans le code source. L'arbre de mise en page contient un arbre différent des nœuds pour chaque composant individuel pouvant être affiché. L'arbre de mise en page contient la structure d'affichage des nœuds. Il n'y a pas forcément de relation directe entre le contenu et la mise en page des nœuds. Certains nœuds de contenu peuvent avoir plusieurs objets de mise en page, par exemple, chaque ligne d'un paragraphe a un objet de mise en page séparé. Réciproquement, certains nœuds de contenu n'ont aucun objet de mise en page. Par exemple, l'élément key n'a aucun objet de mise en page puisqu'il n'est jamais affiché. De même, tout élément masqué n'aura plus d'objet de mise en page.

- -

DOM est généralement utilisé pour récupérer et modifier des informations concernant le contenu ou la structure d'un document. Il est relativement simple de déterminer quelle sorte de nœud de l'arbre sera créé pour un élément donné. Un élément XUL, par exemple, aura un type de nœud de contenu XULElement.

- -

Les objets de mise en page qui seront créés sont déterminés de manière plus complexe. Diverses parties d'information sont utilisées telles que le nom de la balise, les attributs d'un élément, diverses propriétés CSS, les éléments et les objets de mise en page autour de l'élément, et les liaisons XBL associées à un élément (les XBL seront décrites dans une section ultérieure). À moins que vous ne changiez le style d'un élément, la plupart des éléments XUL utilisent habituellement l'objet de boîte de mise en page ou un de ses sous-types. Souvenez-vous que tous les éléments XUL sont des types de boîtes, et que les boîtes sont la base de l'affichage de tous les éléments XUL. Toutefois, Il y a un certain nombre de sous-types, environ 25 ou plus, pour des éléments XUL spécifiques. Certains de ces sous-types, tels que les piles ou les boîtes de liste ont besoin d'une mise en page plus complexe qu'une simple boîte, tandis que d'autres, tels que les boutons, ne sont utilisés que pour ajouter la gestion des événements souris ou clavier.

- -

L'objet de mise en page associé à un élément peut être enlevé pour créer un objet de type complètement différent en changeant simplement la propriété display CSS. Par exemple, l'affectation de la valeur 'block' à la propriété display d'un élément bouton va effacer l'objet de mise en page et créer un objet 'block' à la place. Naturellement, ce changement modifiera l'apparence et les fonctionnalités de cet élément.

- -

Il n'est pas nécessaire de connaître les détails de la construction des objets de mise en page, mais il est quand même utile d'avoir la connaissance de comment est décrit la mise en page XUL pour aborder un développement avancé sous XUL.

- -

Les objets de boîte

- -

Les objets de mise en page ne peuvent pas être manipulés par les développeurs. Ils font partie des composants internes à la mise en page XUL. Toutefois, XUL fournit quelques objets d'aide, appelés objets de boîte, qui fournissent quelques informations concernant la mise en page. Comme leurs noms l'indiquent, ils sont disponibles pour tous éléments de type boîte.

- -

Il y a plusieurs sous-types d'objet boîte, bien que seul un petit nombre d'entre eux soit généralement employé. Les autres ont des fonctions plus accessibles par des méthodes liées directement à l'élément, car ces types sont généralement seulement utilisés avec un élément particulier. L'objet de boîte, ou l'interface BoxObject, toutefois, a un nombre de propriétés pouvant être utile pour le développement XUL.

- -

L'objet de boîte de base a deux fonctionnalités utiles. Premièrement, vous pouvez récupérer la position et les dimensions d'un élément XUL affiché, et deuxièmement, vous pouvez déterminer l'ordre d'affichage des éléments dans une boîte, au lieu de leurs ordres d'enregistrement dans le DOM.

- -

Récupérer la position et les dimensions

- -

L'objet de boîte fournit quatre propriétés, x, y, width et height, pour déterminer la position et les dimensions d'un élément. Les coordonnées x et y sont relatives au coin haut à gauche du document dans la fenêtre (en excluant le bord de la fenêtre et son titre). Elles sont mesurées en pixels. Les propriétés width et height sont également mesurées en pixels et retournent la largeur et la hauteur d'un élément en incluant les styles CSS padding et border, s'ils existent.

- -

Les valeurs sont toujours la position et les dimensions correspondant à l'affichage en cours, donc ces valeurs peuvent être différentes si l'élément est déplacé ou redimensionné. Par exemple, un élément flexible changera de taille et les dimensions de son objet de boîte seront mises à jour en conséquence. L'exemple suivant en offre une illustration :

- -

Exemple 1: Source Voir

- -
<button label="Cliquez ici"
-        oncommand="alert('La largeur est ' + this.boxObject.width);"/>
-
- -

Vous pouvez utiliser les attributs width et height pour définir respectivement la largeur et la hauteur d'un élément. Normalement, ces attributs n'ont pas à être modifiés et l'élément ajuste ses dimensions pour s'adapter au contenu. Ainsi, la définition de ces attributs substitue les valeurs spécifiées aux dimensions par défaut. Les propriétés width et height correspondantes peuvent être employées pour ajuster les dimensions d'un élément à tout moment, si vous souhaitez afficher un élément à une dimension précise. La récupération des valeurs de ces propriétés vous donnera les dimensions explicitement indiquées. Notez que ces propriétés renverront une chaîne vide si les attributs ou propriétés width et height n'ont pas encore été initialisées. Par conséquent, vous ne pouvez pas récupérer les dimensions actuelles avec ces propriétés ; vous devrez utiliser les propriétés de l'objet de boîte à la place.

- -

Cela doit vous sembler un peu confus, mais la clef est de se souvenir que les propriétés width et height d'un élément retournent les dimensions qui ont été définies dans le fichier XUL, tandis que les propriétés width et height de l'objet de boîte retournent les dimensions courantes réelles.

- -

Élément caché et réduit

- -

L'attribut hidden cachera un élément de telle sorte qu'il ne sera pas affiché. Comme il n'est pas affiché, les quatre propriétés de position et de dimensions de l'objet de boîte auront une valeur '0'. Lorsqu'un élément est caché, il est supprimé de l'affichage et ses objets de mise en page sont effacés. Ainsi, comme il n'est affiché nulle part, il n'aura ni position ni dimensions.

- -

L'attribut collapsed aura le même effet visuel sur cet élément pour l'utilisateur, excepté le fait qu'il laisse l'élément sur l'écran et conserve les objets de mise en page intacts, mais en mettant ses dimensions à '0'. Cela signifie que même si les éléments cachés et réduits ont une largeur et une hauteur de '0', les éléments cachés auront une position x et y de '0' tandis que les éléments réduits conserveront leur position dans la fenêtre.

- -

Pour rechercher ou modifier les états hidden ou collapsed, utilisez leurs propriétés respectives comme dans l'exemple suivant.

- -

Exemple 2: Source Voir

- -
<script>
-function showPositionAndSize()
-{
-  var labelbox = document.getElementById('thelabel').boxObject;
-
-  alert("La position est (" + labelbox.x + "," + labelbox.y +
-        ") et les dimensions sont (" + labelbox.width + "," +
-        labelbox.height + ")");
-}
-</script>
-
-<button label="Caché"
-        oncommand="document.getElementById('thelabel').hidden = true;"/>
-<button label="Montré"
-        oncommand="document.getElementById('thelabel').hidden = false;"/>
-<button label="Réduit"
-        oncommand="document.getElementById('thelabel').collapsed = true;"/>
-<button label="Non réduit"
-        oncommand="document.getElementById('thelabel').collapsed = false;"/>
-<button label="Montrer la position et les dimensions
-        oncommand="showPositionAndSize();"/>
-<label id="thelabel" value="Je suis un libellé"/>
-
- -
Notez que si vous cachez ou réduisez le libellé, il sera invisible. Vous devrez changer ses attributs hidden ou colapsed pour le voir réapparaître.
- -

Ordonnancement des éléments XUL

- -

L'objet de boîte peut également être employé pour déterminer l'ordre d'affichage des éléments, qui peut ne pas être le même que dans la source. Souvenez-vous que les propriétés DOM telles que childNodes, firstChild et nextSibling peuvent être utilisées pour parcourir l'arbre de document. L'objet de boîte permet de naviguer de façon similaire mais retourne les éléments dans leur ordre d'affichage.

- -

L'objet de boîte fournit plusieurs propriétés, firstChild, lastChild, nextSibling, previousSibling et parentBox. Leurs noms devraient vous expliquer d'eux-même leur fonctionnement. Ces propriétés renvoient des éléments, par exemple, la propriété firstChild renvoie le premier élément enfant affiché. Il n'y a pas de propriété childNodes correspondante pour naviguer entre les boîtes ; à la place, vous devez utiliser les propriétés nextSibling et previousSibling pour parcourir les frères et sœurs.

- -

Contrairement à la navigation dans l'arbre DOM, les éléments cachés ne sont pas inclus dans la navigation avec les objets de boîte. Donc, si une boîte a six enfants dont les deux premiers sont cachés, la propriété firstChild renverra le troisième élément. Toutefois, les éléments réduits seront inclus car ils sont affichés même sans avoir de dimensions. Par exemple, la boîte sœur suivant le bouton 1 de l'exemple suivant sera le bouton 3, parce que le bouton 2 est caché. Mais la boîte sœur suivant le bouton 3 sera le bouton 4 qui est seulement réduit.

- -

Exemple 3: Source Voir

- -
<hbox>
-  <button label="Bouton 1"
-          oncommand="alert('Le suivant est : ' + this.boxObject.nextSibling.label);"/>
-  <button label="Bouton 2" hidden="true"/>
-  <button label="Bouton 3"
-          oncommand="alert('Le suivant est : ' + this.boxObject.nextSibling.label);"/>
-  <button label="Bouton 4" collapsed="true"/>
-</hbox>
-
- -

Attributs d'ordonnancement de boîte

- -

Lorsqu'une boîte XUL est placée dans une fenêtre, les éléments sont ordonnés selon un certain nombre de propriétés, par exemple l'orientation, leur groupe ordinal et leur direction.

- -
Attribut orient
- -

L'orientation est communément modifiée en utilisant l'attribut orient. Il existe également une propriété CSS -moz-box-orient correspondante qui peut remplacer l'attribut, en fonction de la situation. Cet attribut a été expliqué dans une section précédente sur les boîtes.

- -
Attribut ordinal
- -

L'attribut ordinal d'un élément peut être placé pour spécifier un groupe ordonné d'éléments, ou vous pouvez utiliser la propriété CSS -moz-box-ordinal-group.

- -

Les éléments avec une valeur ordinale inférieure sont placés dans la boîte avant les éléments ayant une plus grande valeur ordinale. Par exemple, un élément avec une valeur ordinale de '2' sera placé avant un élément ayant une valeur ordinale de '3' ou plus, mais après un élément ayant un ordinal de '1'. La valeur ordinale par défaut, si elle n'est pas définie, est de '1'. Cela signifie que si vous voulez modifier l'ordre d'affichage des éléments, vous aurez souvent besoin d'ajuster les ordinaux de plusieurs éléments.

- -

L'ajustement de l'ordinal d'un élément ne se fait pas aussi simplement par le placement des éléments dans un certain ordre dans la source. Il peut être utilisé pour réarranger les éléments plus tard sans ajuster le DOM. L'exemple suivant en est une illustration.

- -

Exemple 4: Source Voir

- -
<hbox>
-  <button label="Un" oncommand="this.ordinal++;"/>
-  <button label="Deux" oncommand="this.ordinal++;"/>
-  <button label="Trois" oncommand="this.ordinal++;"/>
-</hbox>
-
- -

Si vous pressez le premier bouton, son ordinal augmentera de un, de '1' à '2'. Il apparaîtra à la fin de la ligne puisque les autres boutons ont un ordinal de '1'. Si vous pressez le second bouton, son ordinal sera augmenté de un et sera déplacé à la fin de la ligne. Les éléments de même ordinal apparaîtront dans le même ordre que dans la source. Si vous pressez une nouvelle fois le bouton libellé 'Un', son ordinal augmentera à '3' et il sera déplacé à la fin. Finalement, presser le bouton libellé 'Trois' augmentera son ordinal à '2' et le fera apparaître entre les deux autres boutons.

- -
Attribut dir
- -

L'attribut final d'ordonnancement de boîte est l'attribut dir, ou la propriété CSS -moz-box-direction. S'il est initialisé à 'reverse', tous les enfants dans la boîte sont affichés dans l'ordre inverse. Dans une boîte horizontale, les éléments seront affichés de la droite vers la gauche et dans une boîte verticale, les éléments seront affichés du bas vers le haut. Voici un exemple :

- -

Exemple 5: Source Voir

- -
<hbox dir="reverse">
-  <button label="Gauche"/>
-  <button label="Centre"/>
-  <button label="Droite"/>
-</hbox>
-
- -

Parcourir les nœuds en utilisant l'ordonnancement des objets de boîte vous renverra les éléments dans leur ordre d'affichage en tenant compte des ajustements faits sur leur ordinaux. Ainsi, si vous changez l'ordinal d'un élément, celui-ci aura une position différente dans la boîte. Toutefois, le renversement de la direction n'affectera pas l'ordre de la boîte.

- -
-

Ensuite, nous verrons comment utiliser les objets XPCOM à partir de XUL et des scripts.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

- -

 

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_objets_bo\303\256tes_des_arbres/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/les_objets_bo\303\256tes_des_arbres/index.html" deleted file mode 100644 index 60924214cb..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/les_objets_bo\303\256tes_des_arbres/index.html" +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: Les objets boîtes des arbres -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Les_objets_boîtes_des_arbres -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Box_Objects ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Cette section va décrire l'objet de boîte d'arbre qui est utilisé pour gérer l'affichage d'un arbre.

- -

À propos de l'objet de boîte

- -

Les objets de boîte ont été décrits dans une section précédente. L'objet de boîte d'arbre est un objet de boîte spécial utilisé spécifiquement pour les arbres (tree). La boîte d'arbre implémente l'interface TreeBoxObject.

- -

Rafraichissement de l'arbre

- -

Nous avons déjà vu la fonction rowCountChanged() de l'objet de boîte d'arbre dans la section précédente. Elle est employée pour indiquer qu'une ou plusieurs lignes de l'arbre ont été ajoutées ou enlevées. L'arbre rafraîchira l'affichage de la zone affectée. Vous n'avez pas besoin d'appeler la fonction rowCountChanged() lorsqu'une ligne a simplement été modifiée, comme par exemple lors du changement du libellé d'une cellule. Dans ce cas, d'autres fonctions d'affichage peuvent être utilisées. La plus simple est la fonction invalidateRow() qui rafraîchit l'affichage d'une ligne spécifique d'un arbre. L'arbre appellera la vue pour obtenir les données mises à jour et actualise son contenu à l'écran.

- -

Les autres fonctions de rafraichissement sont :

- - - -

Notez que le rafraichissement de l'affichage n'aura lieu qu'une fois les tâches des scripts achevées, car Mozilla n'effectue pas cette opération en tâche de fond.

- -

Défilement de l'arbre

- -

Vous pouvez également faire défiler l'arbre en utilisant quatre méthodes différentes, similaires à celles disponibles pour les menus déroulants. La fonction scrollToRow() peut être utilisée pour faire le défilement jusqu'à une ligne particulière. Voici un exemple simple :

- -

Exemple 1: Source Voir

- -
<script>
-function doScroll(){
-  var value = document.getElementById("tbox").value;
-  var tree = document.getElementById("thetree");
-
-  var boxobject = tree.boxObject;
-  boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject);
-  boxobject.scrollToRow(value);
-}
-</script>
-
-<tree id="thetree" rows="4">
-  <treecols>
-    <treecol id="row" label="Ligne" primary="true" flex="1"/>
-  </treecols>
-  <treechildren>
-    <treeitem label="Ligne 0"/>
-    <treeitem label="Ligne 1"/>
-    <treeitem label="Ligne 2"/>
-    <treeitem label="Ligne 3"/>
-    <treeitem label="Ligne 4"/>
-    <treeitem label="Ligne 5"/>
-    <treeitem label="Ligne 6"/>
-    <treeitem label="Ligne 7"/>
-    <treeitem label="Ligne 8"/>
-    <treeitem label="Ligne 9"/>
-  </treechildren>
-</tree>
-
-<hbox align="center">
-  <label value="Défile jusqu'à la ligne :"/>
-  <textbox id="tbox"/>
-  <button label="Défile" oncommand="doScroll();"/>
-</hbox>
-
- -
Notez que nous utilisons l'attribut rows sur l'élément tree pour spécifier que quatre lignes seulement doivent être affichées à la fois. Ainsi, il est plus facile de se représenter l'exemple. Notez également que la première ligne commence à '0'.
- -

La fonction doScroll() récupère l'objet de boîte et appelle la fonction scrollToRow() avec comme argument la valeur saisie dans le champ texte. Vous noterez que l'objet de boîte d'arbre peut être obtenu de la même manière qu'avec d'autres objets de boîte, en utilisant la propriété boxObject. Nous devons cependant appeler QueryInterface() pour invoquer l'objet de boîte spécifique aux arbres. Les fonctions générales de l'objet de boîte sont également disponibles pour les arbres.

- -

Les méthodes supplémentaires de défilement incluent les fonctions scrollByLines(), scrollByPages(), et ensureRowIsVisible().

- -

La fonction scrollByLines() fait défiler vers le haut ou vers le bas d'un certain nombre de lignes ; un nombre positif fait défiler vers le bas, un nombre négatif fait défiler vers le haut. La fonction scrollByPages() fait défiler d'un certain nombre de pages. Elle est automatiquement appelée lorsque l'utilisateur appuie sur une des touches Page Up ou Page Down et que l'arbre a le focus. Une page est égale au nombre de lignes visibles. Par exemple, si un arbre affiche 10 lignes en même temps, une page sera équivalente à 10 lignes. C'est une méthode pratique dès lors que l'utilisateur redimensionne un arbre flexible : la taille de la page augmentera ou diminuera automatiquement sans avoir à la recalculer manuellement. Il n'est pas trop difficile de calculer cette taille manuellement car l'objet de boîte d'arbre fournit également une fonction getPageLength() qui retourne le nombre de lignes dans une page. Dans l'exemple de défilement ci-dessus, getPageLength() retournerait '4'.

- -
Notez que dans Firefox 1.0 et Mozilla 1.7, et les versions plus récentes, la fonction getPageLength() est plutôt appelée getPageCount(). Le nom a été changé en getPageLength() afin d'éviter les confusions avec une fonction qui ne retourne pas le nombre de pages d'un arbre, mais la taille de chaque page. Vous pouvez déterminer le nombre de pages en divisant le nombre total de lignes par la taille d'une page.
- -

La fonction ensureRowIsVisible() fera défiler l'arbre jusqu'à une ligne, comme avec la fonction scrollToRow(), mais seulement si la ligne n'est pas visible au moment de l'appel.

- -

Coordonnées d'une cellule

- -

Certaines des fonctions les plus intéressantes d'un objet de boîte d'arbre sont utilisées pour obtenir les parties d'un arbre se trouvant à des coordonnées spécifiques et vice versa.

- - - -
tree.boxObject.getRowAt( 50, 100 );
- -

Cet exemple retournera l'index de la ligne ayant une position horizontale de '50' pixels et verticale de '100' pixel. Naturellement, la coordonnée x semble ne pas avoir beaucoup de sens dès lors que la ligne occupe tout l'espace horizontal de l'arbre.

- -
Il est important de noter que les coordonnées sont mesurées à partir du coin supérieur gauche du document et non de l'arbre lui-même.
- -

Il est donc facile de passer à ces fonctions les coordonnées événementielles de l'objet event, comme avec la fonction getCellAt() dans l'exemple suivant.

- -

Exemple 2: Source Voir

- -
<script>
-function updateFields(event){
-  var row = {}, column = {}, part = {};
-  var tree = document.getElementById("thetree");
-
-  var boxobject = tree.boxObject;
-  boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject);
-  boxobject.getCellAt(event.clientX, event.clientY, row, column, part);
-
-  if (column.value && typeof column.value != "string")
-    column.value = column.value.id;
-
-  document.getElementById("row").value = row.value;
-  document.getElementById("column").value = column.value;
-  document.getElementById("part").value = part.value;
-}
-</script>
-
-<tree id="thetree" flex="1" onmousemove="updateFields(event);">
-  <treecols>
-    <treecol id="utensil" label="Ustensiles" primary="true" flex="1"/>
-    <treecol id="count" label="Nombre" flex="1"/>
-  </treecols>
-  <treechildren>
-    <treeitem>
-      <treerow>
-        <treecell label="Fourchette"/>
-        <treecell label="5"/>
-      </treerow>
-    </treeitem>
-    <treeitem>
-      <treerow>
-        <treecell label="Couteau"/>
-        <treecell label="2"/>
-      </treerow>
-    </treeitem>
-    <treeitem>
-      <treerow>
-        <treecell label="Cuillère"/>
-        <treecell label="8"/>
-      </treerow>
-    </treeitem>
-  </treechildren>
-</tree>
-
-<label value="Ligne:"/>
-<label id="row"/>
-<label value="Colonne:"/>
-<label id="column"/>
-<label value="Type enfant:"/>
-<label id="part"/>
-
- -

La fonction getCellAt() prend cinq arguments, les coordonnées où regarder et trois autres paramètres. Un argument par référence est utilisé parce que la fonction a besoin de retourner plusieurs valeurs. Vous verrez de nombreuses interfaces utilisant des arguments par référence avec les objets disponibles. Ces arguments sont marqués avec un préfixe 'out'. Pour ceux-ci, vous devez transmettre un objet vide et la fonction remplira sa propriété value avec la valeur adéquate.

- -

Les trois paramètres par référence seront renseignés avec la ligne, la colonne et le type enfant. L'objet row contient l'index de la ligne survolée par la souris au moment où la fonction a été appelée par un événement mousemove, avec les coordonnées de cet événement. Si les coordonnées ne sont pas au-dessus d'une ligne de l'arbre, la valeur row.value sera égale à '-1'. La variable column est un objet column tel que défini dans Mozilla 1.8 et supérieur. Dans les versions plus anciennes, les colonnes étaient identifiées avec une chaîne de caractères (string) : l'identifiant id de la colonne. Avec les versions plus récentes, un objet de colonne spécifique existe et permet de réaliser des requêtes sur les données en colonne.

- -

La ligne suivante est utilisée pour que l'exemple ci-dessus puisse fonctionner avec toutes les versions.

- -
if (column.value && typeof column.value != "string")
-  column.value = column.value.id;
-
- -

Si la colonne est une chaîne de caractères, nous tournons sur Mozilla 1.7 ou inférieur, mais pour les versions récentes, nous obtenons l'identifiant de la colonne à partir de l'objet column. Si vous écrivez du code pour des versions multiples, vous devrez effectuer un test comme indiqué ci-avant.

- -

Le dernier argument de la fonction getCellAt() est le type enfant renseigné avec une chaîne dépendante de la partie de la cellule pointée par les coordonnées. Si vous déplacez la souris dans l'exemple précédent, vous noterez que le libellé passe de 'text' à 'cell'. La valeur 'text' indique la zone où le texte est dessiné et la valeur 'cell' indique la zone autour du texte ; par exemple, la marge gauche où sont habituellement dessinées les poignées ouvrantes et fermantes. Toutefois, s'il y avait une poignée, la valeur aurait plutôt été 'twisty'. Cette information pratique permet de déterminer si l'utilisateur a cliqué sur une poignée plutôt que sur une autre partie de la ligne. En fait, lorsque l'utilisateur double-clique sur la poignée, le code natif sous-jacent utilise cette méthode. La dernière valeur qui peut être retournée est 'image' si une image se trouve dans la cellule et que les coordonnées correspondent à celles de cette image. Bien entendu, dans la plupart des cas, vous ne désirez pas connaître quelle partie de la cellule pointe les coordonnées, mais seulement la ligne et la colonne concernées.

- -

Pour inverser la recherche et obtenir les coordonnées spécifiques d'une cellule, utilisez la fonction getCoordsForCellItem(). Elle prend sept arguments tels que décrits ci-dessous.

- -
var x = {}, y = {}, width = {}, height = {};
-if (typeof tree.columns != "undefined") column = tree.columns[column];
-tree.boxObject.getCoordsForCellItem( row, column, part, x, y, width, height );
-
- -

Les arguments 'row', 'column' et 'part' sont similaires à ceux retournés par la fonction getCellAt(). De nouveau, le type de l'argument 'column' dépend de la version que vous utilisez, soit une chaîne de caractères (string), soit un objet column. Le type de la zone de la cellule peut être utilisé pour obtenir les coordonnées, soit du texte, soit de toute la cellule, soit de la poignée, soit de l'image dans la cellule. Les mêmes valeurs que la fonction getCellAt() sont utilisées. La fonction getCoordsForCellItem() retourne par le biais des arguments passés en référence les coordonnées horizontales (x) et verticales (y), accompagnées de la largeur et la hauteur.

- -
-

Par la suite, nous verrons comment RDF peut être utilisé automatiquement pour peupler des arbres et d'autres éléments.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/les_scripts_d'installation/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/les_scripts_d'installation/index.html deleted file mode 100644 index 0f5213a192..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/les_scripts_d'installation/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Les scripts d'installation -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Les_scripts_d'installation -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Install_Scripts ---- -

 

- -
-

« PrécédentSuivant »

-
- -
NdT : Attention, cette section décrit le mécanisme XPInstall propre à la suite Mozilla et à des versions anciennes de Mozilla Firefox. Pour les versions récentes de Mozilla Firefox, ce mode d'installation n'est plus le même, mais il n'est pas encore décrit dans ce tutoriel. Voir comment faire des extensions pour firefox sur xulfr.org.
- -

Cette section décrit le script d'installation.

- -

Création d'un script d'installation

- -
Note : Pour des extensions Firefox, install.js n'est plus utilisé. Vous devez utiliser install.rdf à la place.
- -

Vous voulez généralement avoir une forme de contrôle sur vos processus d'installation. Par exemple, vous pouvez souhaiter vérifier les versions des fichiers existants et n'installer que des mises à jour, ou peut être souhaiteriez-vous simplement appliquer des corrections. Le script d'installation est même assez souple pour vous permettre de désinstaller des fichiers. Pour ces raisons, les programmes d'installation incluent un script propre à cette tâche.

- -

Le script d'installation doit s'appeler 'install.js' et doit être placé à la racine de l'archive de l'installeur. Ce script contient du code JavaScript qui appelle un certain nombre de fonctions d'installation.

- -

Dans un document HTML ou un document XUL, l'objet window est l'objet global racine. Il signifie que vous pouvez appeler les méthodes de l'objet window sans les faire précéder de leur qualificateur, ainsi window.open() peut simplement être écrit open(). Dans un script d'installation, il n'y a pas de fenêtre associée, toutefois l'objet global sera l'objet Install qui contient un certain nombre de fonctions pour personnaliser le processus d'installation. Certaines fonctions de l'objet global Install seront décrites ci dessous.

- -

Le script d'installation doit suivre les étapes suivantes :

- -
    -
  1. Initialiser l'installation en précisant le paquetage et sa version.
    2. -
  2. Utiliser les fonctions d'installation pour spécifier les fichiers et les répertoires qui doivent être installés. Vous pouvez aussi spécifier les fichiers à déplacer ou à effacer.
    3. -
  3. Démarrer le processus qui installe les fichiers nécessaires.
    4. -
- -

Il est important de signaler que pendant l'étape numéro deux, vous n'indiquez seulement quels sont les fichiers qui seront installés et quelles autres opérations vous souhaitez réaliser. Aucun fichier ne sera copié avant l'étape trois. En procédant de la sorte, vous pouvez facilement définir plusieurs fichiers à installer, et en cas d'erreurs, vous pouvez annuler tout le processus d'installation sans modifier le système de l'utilisateur.

- -

Le registre d'extensions

- -

Mozilla tient à jour un fichier qui est un registre de toutes les extensions actuellement installées. Les extensions incluent les nouveaux paquetages chrome, les thèmes graphiques et les plugins. Lorsqu'une nouvelle extension est installée, le registre est mis à jour. Le registre stocke aussi l'ensemble des informations des fichiers et de leurs versions sur les extensions installées. De cette manière, il est aisé de vérifier si une version de votre extension est déjà présente et de la mettre à jour seulement si nécessaire.

- -

Le registre d'extensions fonctionne presque comme la base de registre de Windows. Il consiste en une série hiérarchisée de clefs et de valeurs. Vous n'avez pas besoin d'en savoir plus à son sujet pour créer des applications XUL à moins que vous ne créiez vos propres composants XPCOM.

- -

Ce que vous devez savoir pour une installation est que le registre stocke une série d'informations sur votre application, tels que la liste des fichiers et leurs versions. Toutes ces informations sont stockées dans une clef (et à l'intérieur, des sous clefs) que vous fournissez dans le script d'installation (dans l'étape 1 mentionnée ci dessus).

- -

Cette clef est structurée comme une arborescence de répertoire comme ceci :

- -
/Auteur/Nom du Paquetage
- -

Remplacez le mot 'Auteur' par votre nom et remplacez le 'Nom du Paquetage' avec le nom de votre paquetage que vous installez. Par exemple :

- -
/Xulplanet/Find Files
-
-/Netscape/Personal Security Manager
- -

Le premier exemple est celui utilisé pour notre exemple de boite de dialogue de recherche de fichiers. Le second est la clef utilisée pour le gestionnaire de données privées.

- -

Initialisation de l'installation

- -

L'objet Install a une fonction, initInstall(), servant à initialiser l'installation. Elle doit être appelée au lancement de votre script d'installation. La syntaxe de cette fonction est la suivante :

- -
initInstall( packageName , regPackage , version );
-
-'''Exemple:'''
-
-initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");
- - - -

Ensuite, nous devons indiquer le répertoire où seront installés les fichiers. Il y a deux façons de le faire.

- - - -

La fonction setPackageFolder() assigne un répertoire d'installation. Pour l'exemple de recherche de fichiers, vous installerons les fichiers dans le répertoire chrome (nous pourrions aussi bien les mettre autre part). Cette fonction setPackageFolder() ne requiert qu'un argument, le répertoire d'installation. Pour une compatibilité maximale, vous ne devez pas spécifier un répertoire absolu. Au lieu de cela, vous utiliserez un identifiant d'un répertoire connu et pointerez sur un de ses sous répertoires. Ainsi, si votre application a besoin d'installer quelques librairies systèmes, vous n'avez pas besoin de connaître le nom de ces répertoires.

- -

Les identifiants de sélection de répertoires sont expliqués sur la page de XULPlanet référence. Pour le répertoire chrome, l'identifiant est 'Chrome'. La fonction getFolder() peut être utilisée pour récupérer un de ces répertoires spéciaux. Cette fonction prend deux arguments, le premier étant l'identifiant et le second étant un sous répertoire. Par exemple :

- -
findDir = getFolder("Chrome","findfile"); setPackageFolder(findDir);
- -

Ici, nous récupérons l'emplacement du sous répertoire 'findfile' dans répertoire Chrome et nous le passons directement à la fonction setPackageFolder(). Le second argument de la fonction getFolder() est le sous répertoire qui servira à l'installation de l'exemple et qui n'a pas besoin d'avoir été créé d'abord. Vous pouvez ignorer cet argument si vous n'en avez pas besoin.

- -

Marquage des fichiers d'installation

- -

Ensuite, vous devez indiquer quels seront les fichiers à installer. Deux fonctions doivent être employées pour cela, addDirectory() et addFile(). La fonction addDirectory() précise à l'installeur un répertoire de l'archive XPI (et tout son contenu) qui devra être installé à un emplacement particulier. La fonction addFile() est similaire mais seulement pour un fichier.

- -

Les deux fonctions addDirectory() et addFile() ont plusieurs paramétrages. Le plus simple ne prend qu'un seul argument qui est le répertoire servant à l'installation.

- -
addDirectory ( dir );
-addFile ( dir );
-
-Exemple:
-
-addDirectory("findfile");
-
- -

L'exemple ci dessus spécifie que le répertoire 'findfile' de l'archive d'installation est à installer. Nous pouvons appeler ces fonctions autant de fois que nécessaire pour les autres fichiers.

- -

Ensuite, nous voulons enregistrer les fichiers de notre exemple dans le registre chrome afin de pouvoir les appeler par une URL chrome. La fonction registerChrome() est utilisée pour cela. Elle prend deux arguments, le premier étant le type d'enregistrement chrome ('content' pour du contenu, 'skin' pour du thème graphique, ou 'locale' pour la localisation), le second pointant vers l'emplacement du fichier manifest 'contents.rdf' à enregistrer. Comme notre exemple de recherche de fichiers contient les trois types, la fonction registerChrome() devra être appelée trois fois.

- -
registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
-registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
-registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
-
- -

L'indicateur DELAYED_CHROME sert à indiquer que le chrome devra être installé au prochain lancement de Mozilla.

- -

Finalisation de l'installation

- -

Les fonctions addDirectory() et addFile() ne copient aucun fichier. Elles ne servent qu'à pointer quels fichiers devront être installés. De la même manière, la fonction registerChrome() ne fait que pointer quel chrome devra être enregistré. Pour achever le processus et commencer la copie des fichiers, appelez la fonction performInstall() sans argument.

- -
-

Le script final pour installer notre exemple de recherche de fichiers est le suivant :

- -

Exemple 1: Source

- -
initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");
-
-findDir = getFolder("Chrome","findfile");
-setPackageFolder(findDir);
-
-addDirectory("findfile");
-
-registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
-registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
-registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
-
-performInstall();
-
-
- -
-

Dans la section suivantes, nous verrons quelques fonctions supplémentaires pour l'installation.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/localisation/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/localisation/index.html deleted file mode 100644 index 3bc67299f8..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/localisation/index.html +++ /dev/null @@ -1,328 +0,0 @@ ---- -title: Localisation -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Localisation -tags: - - Localisation - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Localization ---- -

 

- -
-

« PrécédentSuivant »

-
- -

XUL et XML fournissent des entités qui sont une solution permettant la localisation.

- -

Entités

- -

De nombreuses applications sont construites de telle sorte que la traduction de l'interface en différentes langues soit le plus simple possible. En général, une table de chaînes de caractères est créée pour chaque langue. Au lieu de la coder directement dans l'application, chaque partie de texte est seulement une référence dans la table de chaînes. XML fournit des entités qui peuvent être utilisées dans un but similaire.

- -

Vous devriez déjà être familier avec les entités si vous avez déjà écrit en HTML. Les codes &lt; et &gt; sont des exemples d'entités qui peuvent être utilisées pour placer les signes "inférieur" et "supérieur" dans le texte. XML a une syntaxe qui autorise la déclaration de vos propres entités. Vous pouvez les utiliser de manière à ce que l'entité soit remplacée par sa valeur qui peut être une chaîne de caractères. Des entités peuvent être employées toutes les fois où du texte est utilisé, y compris pour les valeurs des attributs. L'exemple ci-dessous décrit l'utilisation d'une entité dans un bouton.

- -
<button label="&findLabel;"/>
- -

Le texte qui apparaîtra sur le libellé sera la valeur de l'entité  &findlabel;

- -

Un fichier contenant les déclarations d'entités pour chaque langue supportée est créé. En français, on affectera probablement la valeur de texte 'Rechercher' à l'entité &findlabel;

- -

Les fichiers DTD

- -

 

- -

Les entités sont déclarées dans des fichiers DTD (Document Type Declaration). Ces types de fichiers sont en général utilisés pour déclarer la syntaxe et la sémantique d'un fichier XML particulier, mais ils autorisent aussi la déclaration d'entités. Dans le système chrome de Mozilla, vous trouverez les fichiers DTD dans le sous-répertoire locales. Vous devriez normalement avoir un fichier DTD (avec un extension dtd) par fichier XUL.

- -

 

- -

Si vous regardez dans le répertoire chrome, vous devriez voir une archive pour votre langue (fr.jar par défaut pour le français). Vous pouvez avoir les fichiers de locales dans des langues multiples, par exemple, Anglais US (en-US) et Danois (dk). Dans ces archives, vous trouverez les fichiers qui contiennent les traductions pour chaque fenêtre. La structure de l'archive est très similaire à la structure des répertoires utilisée pour les thèmes.

- -

 

- -

Dans les archives, vous placerez les fichiers DTD, dans lesquels vous déclarez les entités. Normalement vous aurez un fichier DTD par fichier XUL, en général avec le même nom de fichier excepté qu'il aura une extension .dtd. Donc pour la fenêtre de dialogue de recherche de fichiers, vous aurez besoin d'un fichier nommé findfile.dtd.

- -

 

- -

Pour les fichiers chromes non installés, vous pouvez juste mettre le fichier DTD dans le même répertoire que le fichier XUL.

- -
Note : Vous devez encoder les fichiers en UTF-8 à cause des caractères non ASCII. De ce fait, vous devez les sauvegarder au format UTF-8 (sans BOM). Pour plus d'information, consultez Mozilla language Packs.
- -

Une fois que vous avez créé le fichier DTD pour votre fichier XUL, vous aurez besoin d'ajouter une ligne dans le fichier XUL qui indiquera que vous voulez utilisez le fichier DTD. Sinon, des erreurs seront générées car il ne sera pas capable de trouver les entités. Il vous suffit d'ajouter une ligne de la forme suivante vers le début du fichier XUL :

- -
<!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd">
- -

Cette ligne spécifie que l'URL indiquée est à utiliser en tant que fichier DTD. Dans ce cas, nous avons déclaré que nous voulons utiliser le fichier DTD findfile.dtd. Cette ligne est en général placée juste avant l'élément window.

- -

Vous devez également ajouter la localisation dans le fichier chrome.manifest, par exemple :

- -
locale findfile fr locale/
-
- -

Déclarer les entités

- -

Les entités sont déclarées en utilisant une syntaxe simple vue ci-dessous :

- -
<!ENTITY findLabel "Rechercher">
- -

Cet exemple crée une entité avec le nom 'findLabel' et la valeur 'Rechercher'. Elle signifie que quelque soit l'endroit où le texte '&findLabel;' apparaîtra dans le fichier XUL, il sera remplacé par le texte 'Rechercher'. Notez que les déclarations d'entités n'ont pas de slash terminal. Dans le fichier DTD d'une autre langue, le texte pour cette langue sera utilisé à la place.

- -
pour l'anglais:
-<!ENTITY findLabel "Find">
-
- -

Par exemple, le texte suivant :

- -
<description value="&findLabel;"/>
- -

est converti en :

- -
version française:
-<description value="Rechercher"/>
-
-version anglaise
-<description value="Find"/>
-
- -

Vous devrez déclarer une entité pour chaque libellé ou chaîne de caractères que vous utiliserez dans votre interface. Vous ne devriez plus avoir de texte affiché directement dans le fichier XUL.

- -

En plus d'utiliser les entités pour les libellés, vous devriez les utiliser pour chaque valeur qui pourrait être différente selon la langue ; les touches d'accès et les raccourcis claviers par exemple.

- -
XUL
-<menuitem label="&undo.label;" accesskey="&undo.key;"/>
-DTD
-<!ENTITY undo.label "Annuler">
-<!ENTITY undo.key "u">
-
- -

L'exemple ci-dessus utilise deux entités, une pour le libellé de l'élément de menu Annuler et une seconde pour la touche d'accès.

- -
-

Modification de la boîte de dialogue de recherche de fichiers

- -

Jetons un œil sur la manière dont nous pourrions utiliser tout ce que nous avons appris en modifiant la boîte de dialogue de recherche de fichiers de manière à ce qu'elle utilise un fichier DTD pour toutes ses chaînes de caractères. La totalité du fichier XUL est décrite ci-dessous avec les changements décrits en rouge.

- -
<?xml version="1.0"?>
-
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="findfile.css" type="text/css"?>
-
-<!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd">
-
-<window
-  id="findfile-window"
-  title="&findWindow.title;"
-  persist="screenX screenY width height"
-  orient="horizontal"
-  onload="initSearchList()"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<script src="findfile.js"/>
-
-<popupset>
-   <menupopup id="editpopup">
-     <menuitem label="&cutCmd.label;" accesskey="&cutCmd.accesskey;"/>
-     <menuitem label="&copyCmd.label;" accesskey="&copyCmd.accesskey;"/>
-     <menuitem label="&pasteCmd.label;" accesskey="&pasteCmd.accesskey;" disabled="true"/>
-   </menupopup>
-</popupset>
-
-<keyset>
-   <key id="cut_cmd" modifiers="accel" key="&cutCmd.commandkey;"/>
-   <key id="copy_cmd" modifiers="accel" key="&copyCmd.commandkey;"/>
-   <key id="paste_cmd" modifiers="accel" key="&pasteCmd.commandkey;"/>
-   <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/>
-</keyset>
-
-<vbox flex="1">
-
- <toolbox>
-
-  <menubar id="findfiles-menubar">
-    <menu id="file-menu" label="&fileMenu.label;"
-        accesskey="&fileMenu.accesskey;">
-      <menupopup id="file-popup">
-        <menuitem label="&openCmd.label;"
-                  accesskey="&openCmd.accesskey;"/>
-        <menuitem label="&saveCmd.label;"
-                  accesskey="&saveCmd.accesskey;"/>
-        <menuseparator/>
-        <menuitem label="&closeCmd.label;"
-                  accesskey="&closeCmd.accesskey;" key="close_cmd" oncommand="window.close();"/>
-      </menupopup>
-    </menu>
-    <menu id="edit-menu" label="&editMenu.label;"
-          accesskey="&editMenu.accesskey;">
-      <menupopup id="edit-popup">
-        <menuitem label="&cutCmd.label;"
-                  accesskey="&cutCmd.accesskey;" key="cut_cmd"/>
-        <menuitem label="&copyCmd.label;"
-                  accesskey="&copyCmd.accesskey;" key="copy_cmd"/>
-        <menuitem label="&pasteCmd.label;"
-                  accesskey="&pasteCmd.accesskey;" key="paste_cmd" disabled="true"/>
-      </menupopup>
-    </menu>
-  </menubar>
-
-  <toolbar id="findfiles-toolbar">
-    <toolbarbutton id="opensearch" label="&openCmdToolbar.label;"/>
-    <toolbarbutton id="savesearch" label="&saveCmdToolbar.label;"/>
-  </toolbar>
- </toolbox>
-
- <tabbox>
-  <tabs>
-    <tab label="&searchTab;" selected="true"/>
-    <tab label="&optionsTab;"/>
-  </tabs>
-
-  <tabpanels>
-
-   <tabpanel id="searchpanel" orient="vertical" context="editpopup">
-
-   <description>
-     &findDescription;
-   </description>
-
-   <spacer class="titlespace"/>
-
-   <groupbox orient="horizontal">
-     <caption label="&findCriteria;"/>
-
-     <menulist id="searchtype">
-       <menupopup>
-         <menuitem label="&type.name;"/>
-         <menuitem label="&type.size;"/>
-         <menuitem label="&type.date;"/>
-       </menupopup>
-     </menulist>
-   <spacer class="springspace"/>
-     <menulist id="searchmode">
-       <menupopup>
-         <menuitem label="&mode.is;"/>
-         <menuitem label="&mode.isnot;"/>
-       </menupopup>
-     </menulist>
-   <spacer class="springspace"/>
-
-   <menulist id="find-text" flex="1"
-             editable="true"
-             datasources="file:///mozilla/recents.rdf"
-             ref="http://www.xulplanet.com/rdf/recent/all">
-     <template>
-       <menupopup>
-         <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#Label" uri="rdf:*"/>
-       </menupopup>
-     </template>
-   </menulist>
-
-   </groupbox>
-
-  </tabpanel>
-
-  <tabpanel id="optionspanel" orient="vertical">
-     <checkbox id="casecheck" label="&casesensitive;"/>
-     <checkbox id="wordscheck" label="&matchfilename;"/>
-    </tabpanel>
-
-  </tabpanels>
- </tabbox>
-
- <tree id="results" style="display: none;" flex="1">
-   <treecols>
-     <treecol id="name" label="&results.filename;" flex="1"/>
-     <treecol id="location" label="&results.location;" flex="2"/>
-     <treecol id="size" label="&results.size;" flex="1"/>
-   </treecols>
-
-   <treechildren>
-     <treeitem>
-       <treerow>
-         <treecell label="mozilla"/>
-         <treecell label="/usr/local"/>
-         <treecell label="&bytes.before;2520&bytes.after;"/>
-       </treerow>
-     </treeitem>
-   </treechildren>
- </tree>
-
- <splitter id="splitbar" resizeafter="grow" style="display: none;"/>
-
- <spacer class="titlespace"/>
-
- <hbox>
-   <progressmeter id="progmeter" value="50%" style="display: none;"/>
-   <spacer flex="1"/>
-   <button id="find-button" label="&button.find;"
-           oncommand="doFind()"/>
-   <button id="cancel-button" label="&button.cancel;"
-           oncommand="window.close();"/>
- </hbox>
-</vbox>
-
-</window>
-
- -

Chaque chaîne de caractères a été remplacée par une référence à une entité. Un fichier DTD a été inclus au début du fichier XUL. Chaque entité qui a été ajoutée doit être déclarée dans le fichier DTD. La fenêtre ne sera pas affichée si une entité non déclarée est trouvée dans le fichier XUL.

- -

Notez que le nom de l'entité n'est pas important. Dans l'exemple ci-dessus, les mots dans les entités ont été séparés par des points. Vous n'avez pas à faire ça. Les noms des entités ici suivent des conventions similaires au reste du code de Mozilla.

- -

Vous aurez noté que le texte '2520 octets' a été remplacé par deux entités. En fait, la structure de la phrase pourrait être différente dans une autre langue. Par exemple, le nombre pourrait apparaître après l'équivalent du mot 'octets' au lieu d'avant. Bien sûr, il est beaucoup plus compliqué de vouloir l'affichage des Ko ou des Mo selon les besoins.

- -

Les touches d'accès et les raccourcis claviers ont aussi été traduits dans les entités car ils seront peut être différents dans une autre langue.

- -

Voici le fichier DTD (findfile.dtd) :

- -
<!ENTITY findWindow.title "Recherche de fichiers">
-<!ENTITY fileMenu.label "Fichier">
-<!ENTITY editMenu.label "Edition">
-<!ENTITY fileMenu.accesskey "f">
-<!ENTITY editMenu.accesskey "e">
-<!ENTITY openCmd.label "Ouvrir une recherche...">
-<!ENTITY saveCmd.label "Sauvegarder une recherche...">
-<!ENTITY closeCmd.label "Fermer">
-<!ENTITY openCmd.accesskey "o">
-<!ENTITY saveCmd.accesskey "s">
-<!ENTITY closeCmd.accesskey "f">
-<!ENTITY cutCmd.label "Couper">
-<!ENTITY copyCmd.label "Copier">
-<!ENTITY pasteCmd.label "Coller">
-<!ENTITY cutCmd.accesskey "p">
-<!ENTITY copyCmd.accesskey "c">
-<!ENTITY pasteCmd.accesskey "l">
-<!ENTITY cutCmd.commandkey "X">
-<!ENTITY copyCmd.commandkey "C">
-<!ENTITY pasteCmd.commandkey "V">
-<!ENTITY openCmdToolbar.label "Ouvrir">
-<!ENTITY saveCmdToolbar.label "Sauvegarder">
-<!ENTITY searchTab "Rechercher">
-<!ENTITY optionsTab "Options">
-<!ENTITY findDescription "Entrez votre critère de recherche ci-dessous et appuyer sur le bouton Rechercher.">
-<!ENTITY findCriteria "Critère de recherche">
-<!ENTITY type.name "Nom">
-<!ENTITY type.size "Taille">
-<!ENTITY type.date "Date de modification">
-<!ENTITY mode.is "Est">
-<!ENTITY mode.isnot "N'est pas">
-<!ENTITY casesensitive "Recherche sensible à la casse">
-<!ENTITY matchfilename "Rechercher un nom entier">
-<!ENTITY results.filename "Nom de fichier">
-<!ENTITY results.location "Emplacement">
-<!ENTITY results.size "Taille">
-<!ENTITY bytes.before "">
-<!ENTITY bytes.after "octets">
-<!ENTITY button.find "Rechercher">
-<!ENTITY button.cancel "Annuler">
-
- -

Maintenant pour changer de langue, tout ce que vous avez à faire est de créer un nouveau fichier DTD. En utilisant le système chrome pour ajouter le fichier DTD dans une langue différente, le même fichier XUL peut être utilisé pour toutes les langues.

-
- -
-

Dans la prochaine section, nous regarderons les fichiers de propriétés.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/manipulation_de_listes/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/manipulation_de_listes/index.html deleted file mode 100644 index 12a2c19574..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/manipulation_de_listes/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Manipulation de listes -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Manipulation_de_listes -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Manipulating_Lists ---- -

 

-
-

« PrécédentSuivant »

-
-

La boîte de liste XUL fournit un certain nombre de méthodes spécialisées.

-

Manipulation d'une liste

-

L'élément listbox fournit de nombreuses méthodes pour rechercher et manipuler ses items. Bien que les boîtes de liste puissent être manipulées en utilisant les fonctions standard de DOM, il est recommandé d'employer les fonctions spécialisées de listbox autant que possible. Ces fonctions sont plus simples et feront correctement leur travail.

-

La fonction appendItem() est utilisée pour ajouter un nouvel item à la fin d'une liste. Elle est similaire à la fonction appendChild() du DOM sauf qu'elle prend un libellé texte, et que vous n'avez pas à vous soucier où placer votre item dans la structure de la liste. Voici un exemple :

-

Exemple 1: Source Voir

-
<script>
-function addItem(){
-  document.getElementById('laliste').appendItem("Jeudi", "jeu");
-}
-</script>
-
-<listbox id="laliste"/>
-
-<button label="Ajouter" oncommand="addItem();"/>
-
-

La fonction appendItem() prend deux arguments, le libellé, dans l'exemple 'Jeudi', et une valeur 'jeu'. Les deux arguments correspondent aux attributs label et value dans l'élément listitem. L'attribut value est optionnel et sert à affecter à un item une valeur que vous pouvez réutiliser ensuite dans un script.

-

De même, il existe les fonctions insertItemAt() et removeItemAt(), qui ajoutent respectivement un nouvel item et suppriment un item existant. La syntaxe est la suivante :

-
list.insertItemAt(3, "Jeudi", "jeu");
-list.removeItemAt(3);
-
-

La fonction insertItemAt() prend un argument supplémentaire, la position pour insérer le nouvel item. Le nouvel item est inséré à cet index. Ainsi, dans l'exemple, le nouvel item sera ajouté à la position 3 et l'item qui avait cette position aura maintenant l'index 4. Rappelez-vous que le premier item est 0. La fonction removeItemAt() supprimera l'item à un index spécifique.

-

Ces trois méthodes sont également disponibles pour plusieurs autres éléments XUL et fonctionnent de la même manière. En fait, ces méthodes font parties de l'interface nsIDOMXULSelectControlElement donc tous les éléments XUL qui implémentent cette interface héritent de ces méthodes. Les éléments menulist, radiogroup et tabs en font partie. Par exemple, pour ajouter un nouvel item à un menulist, vous pouvez employer la même syntaxe qu'une listbox. Le bon type d'élément sera ajouté dans chaque cas.

-

Sélection de liste

-

L'interface nsIDOMXULSelectControlElement fournit deux propriétés supplémentaires, selectedIndex et selectedItem. La première renvoie l'index de l'item sélectionné tandis que la seconde renvoie l'élément sélectionné. Par exemple, la valeur de retour de selectedItem sera le menuitem sélectionné. Si aucun item n'est sélectionné, selectedIndex retournera '-1', et selectedItem renverra 'null'.

-

Récupérer l'item sélectionné

-

Ces deux propriétés sont généralement inspectées durant un événement de sélection, comme dans l'exemple suivant :

-

Exemple 2: Source Voir

-
<listbox id="thelist" onselect="alert(this.selectedItem.label);">
-  <listitem label="Petit"/>
-  <listitem label="Moyen"/>
-  <listitem label="Grand"/>
-</listbox>
-
-

L'événement de sélection est exécuté par une listbox quand un item de la liste est sélectionné. Le gestionnaire affiche ici une alerte contenant le libellé de l'item sélectionné dans la liste. Puisque l'événement de sélection s'est exécuté, nous pouvons supposer qu'un item est sélectionné. Dans d'autres cas, vous devrez vous assurer que selectedItem n'est pas 'null' avant de poursuivre.

-

L'événement de sélection est également exécuté quand un bouton radio dans un radiogroup est sélectionné et quand un onglet est sélectionné dans l'élément tabs. Cependant, les menulists ne génèrent pas d'événement de sélection ; vous pouvez écouter l'événement "command" à la place pour traiter la sélection d'un item.

-

Pour l'élément tabs, il est souvent plus commode d'employer les fonctions de l'élément tabbox. Il a aussi une fonction selectedIndex qui renverra l'index de l'onglet sélectionné. Cependant, pour récupérer l'item sélectionné, utilisez plutôt la fonction selectedTab de tabbox. Ou alors, utilisez la fonction selectedPanel pour récupérer la page d'onglet sélectionnée, ce qui renvoie le contenu associé à l'onglet.

-

Modifier la sélection

-

Toutes les propriétés de sélection décrites ci-dessus peuvent également se voir assigner une nouvelle valeur pour modifier la sélection. Dans l'exemple suivant, la propriété selectedIndex de l'élément radiogroup est modifiée avec la valeur entrée dans un champ de saisie. Ce code n'est cependant pas performant ; par exemple, il ne vérifie pas si la valeur entrée est hors limite. Il est conseillé d'ajouter ce genre de vérification d'erreur.

-

Exemple 3: Source Voir

-
<script>
-function doSelect(){
-  var val = document.getElementById('number').value;
-  val = Number(val);
-  if (val != null)
-    document.getElementById('level').selectedIndex = val - 1;
-}
-</script>
-
-<hbox align="center">
-  <label value="Entrez un nombre compris entre 1 et 3 :"/>
-  <textbox id="number"/>
-  <button label="Sélectionnez" oncommand="doSelect();"/>
-</hbox>
-
-<radiogroup id="level">
-  <radio label="Excellent"/>
-  <radio label="Bon"/>
-  <radio label="Mauvais"/>
-</radiogroup>
-
-

Les boîtes de liste supportent aussi les sélections multiples et les fonctions de l'interface nsIDOMXULMultiSelectControlElement. Cette interface fournit un certain nombre de fonctions dédiées pour contrôler la sélection multiple. Par exemple, la propriété selectedItems contient une liste des items qui sont sélectionnés, alors que la propriété selectedCount contient le nombre d'items sélectionnés. En général, vous utiliserez ces propriétés pour parcourir la liste et y effectuer quelques opérations sur chaque item. Faites attention lorsque vous parcourez les items sélectionnés de la liste ; si vous modifiez les items dans la liste pendant que vous les parcourez, la liste sera modifiée et les propriétés de sélection pourraient retourner des valeurs différentes. C'est une raison pour laquelle il est utile de manipuler la liste par item plutôt que par l'index.

-

Effacer des items sélectionnés

-

L'exemple suivant montre une méthode correcte de suppression des items sélectionnés :

-

Exemple 4: Source Voir

-
<script>
-function deleteSelection(){
-  var list = document.getElementById('thelist');
-  var count = list.selectedCount;
-  while (count--){
-    var item = list.selectedItems[0];
-    list.removeItemAt(list.getIndexOfItem(item));
-  }
-}
-</script>
-
-<button label="Supprimer" oncommand="deleteSelection();"/>
-
-<listbox id="thelist" seltype="multiple">
-  <listitem label="Cheddar"/>
-  <listitem label="Cheshire"/>
-  <listitem label="Edam"/>
-  <listitem label="Gouda"/>
-  <listitem label="Havartie"/>
-</listbox>
-
-

À l'intérieur de la boucle while,

- -

L'interface nsIDOMXULMultiSelectControlElement fournit également des méthodes pour modifier les items sélectionnés. Par exemple, la fonction addItemToSelection() ajoute un nouvel item à la liste des items sélectionnés, sans vider la sélection existante. La fonction removeItemFromSelection() supprime un seul item dans la sélection.

-

Défilement de liste

-

Si la boîte de liste contient plus de lignes qu'elle ne peut en afficher, une barre de défilement apparaîtra pour permettre à l'utilisateur de faire défiler la liste. La position du défilement peut être ajustée en utilisant quelques méthodes de listbox.

-

La méthode scrollToIndex() fait défiler jusqu'à une ligne donnée. Cette boîte de liste défilera jusqu'à ce que la ligne soit la première ligne visible, à moins que la ligne ne soit proche de la fin de la liste des items. La méthode ensureIndexIsVisible() est similaire puisqu'elle fait défiler la liste pour afficher une ligne, mais cette méthode ne défilera pas si l'item est déjà visible. Ainsi, la première fonction est utilisée pour faire défiler jusqu'à une ligne précise alors que la deuxième est utilisée pour s'assurer que la ligne soit visible. Il y a également ensureItemIsVisible() qui nécessite un item en argument au lieu d'un index. Comparez l'effet de ces deux fonctions à des positions de défilement différentes dans cet exemple :

-

Exemple 5: Source Voir

-
<button label="scrollToIndex"
-           oncommand="document.getElementById('thelist').scrollToIndex(4);"/>
-<button label="ensureIndexIsVisible"
-           oncommand="document.getElementById('thelist').ensureIndexIsVisible(4);"/>
-
-<listbox id="thelist" rows="5">
-  <listitem label="1"/>
-  <listitem label="2"/>
-  <listitem label="3"/>
-  <listitem label="4"/>
-  <listitem label="5"/>
-  <listitem label="6"/>
-  <listitem label="7"/>
-  <listitem label="8"/>
-  <listitem label="9"/>
-  <listitem label="10"/>
-  <listitem label="11"/>
-  <listitem label="12"/>
-</listbox>
-
-
-

Nous verrons ensuite les objets boîtes XUL.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/menus_d\303\251filants/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/menus_d\303\251filants/index.html" deleted file mode 100644 index 7772a15f15..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/menus_d\303\251filants/index.html" +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Menus défilants -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Menus_défilants -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Scrolling_Menus ---- -

 

-
-

« PrécédentSuivant »

-
-

Cette section va décrire les menus défilants et comment utiliser le mécanisme avec d'autres éléments.

-

Créer un grand menu

-

Vous vous demandez peut-être ce qu'il se passerait si vous créez un menu avec beaucoup de commandes, de telle manière que tous les items ne peuvent pas s'afficher tous à l'écran en même temps. Mozilla fournit un mécanisme de défilement permettant de faire défiler les items.

-
Image:xultu_menuscroll1.png
-

Si l'espace disponible est trop petit, des flèches vont apparaître sur chaque extrémité du menu. Si vous bougez la souris sur les flèches, le menu va défiler vers le haut et vers le bas. Si l'espace disponible est assez grand, les flèches n'apparaîtront pas. Notez que le comportement exact du défilement dépendra du thème graphique utilisé.

-

Ce comportement est automatique. Vous n'avez pas à faire quoi que se soit pour avoir des menus défilants. Il va s'appliquer aux menus des barres de menu, aux menus surgissants ou listes déroulantes. Il est implémenté en utilisant un élément arrowscrollbox. Cet élément peut être utilisé pour créer une boîte de défilement avec des flèches.

-

L'élément arrowscrollbox peut être utilisé n'importe où une boîte normale peut être utilisée. Vous n'êtes pas obligé de l'utiliser pour des menus. Il s'agit toujours une boîte verticale pouvant contenir n'importe quel élément à l'intérieur. Vous pouvez l'utiliser pour implémenter une liste que vous ne voulez pas déroulante.

-

Exemple - liste défilante de boutons

-

L'exemple suivant montre comment créer une liste défilante de boutons (vous devrez redimensionner la fenêtre pour voir les boutons de flèches) :

-

Exemple 1: Source Voir

-
<arrowscrollbox orient="vertical" flex="1">
-  <button label="Rouge"/>
-  <button label="Bleu"/>
-  <button label="Vert"/>
-  <button label="Jaune"/>
-  <button label="Orange"/>
-  <button label="Argent"/>
-  <button label="Lavande"/>
-  <button label="Or"/>
-  <button label="Turquoise"/>
-  <button label="Pêche"/>
-  <button label="Bordeaux"/>
-  <button label="Noir"/>
-</arrowscrollbox>
-
-

Si vous essayez cet exemple, il va d'abord s'ouvrir en pleine taille. Cependant, si vous réduisez la taille de la fenêtre, les flèches de défilement vont apparaître. Rendre la fenêtre plus grande à nouveau va faire disparaître les flèches.

-

Vous pouvez mettre une propriété CSS max-height sur les arrowscrollbox pour limiter la taille de la boîte de défilement et ainsi faire apparaître les flèches tout le temps.

-

L'élément arrowscrollbox est principalement utile dans les menus et boîtes surgissantes.

-
-

Par la suite, nous allons voir comment ajouter des gestionnaires d'événements à des éléments XUL.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/menus_surgissants/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/menus_surgissants/index.html deleted file mode 100644 index e5e70a93c6..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/menus_surgissants/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Menus surgissants -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Menus_surgissants -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Popup_Menus ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Dans la section précédente, nous avons vu comment créer un menu sur une barre de menu. XUL a aussi la capacité de créer des menus surgissants. Les menus surgissants sont habituellement affichés lorsque l'utilisateur presse le bouton droit de la souris.

- -

Créer un menu surgissant

- -

XUL a trois différentes types de boîtes surgissantes, décrites ci-dessous. La différence majeure est leurs façons d'apparaître.

- -
-
Boîte surgissante simple 
-
La boîte surgissante simple est une fenêtre surgissante qui apparaît quand l'utilisateur presse le bouton gauche de la souris sur un élément. Elles sont assez semblables aux menus sur les barres de menu, excepté qu'elles peuvent être placées n'importe où et peuvent contenir n'importe quel contenu. Un bon exemple est le menu déroulant qui apparaît quand vous maintenez le bouton de la souris enfoncé sur les boutons "précédent" et "suivant" dans la fenêtre d'un navigateur.
-
- -
-
Boîte contextuelle 
-
La boîte contextuelle est une fenêtre surgissante qui apparaît quand l'utilisateur presse le bouton de menu contextuel, qui est habituellement le bouton droit de la souris. Sur certaines plates-formes, Il peut s'agir d'un bouton différent - mais c'est toujours le bouton ou une combinaison de touches et de bouton de souris qui invoque un menu spécifique au contexte. Sur le Macintosh par exemple, l'utilisateur doit soit presser la touche Control et le bouton de la souris, soit maintenir le bouton de la souris enfoncé un certain temps.
-
- -
-
Bulle d'aide 
-
Une fenêtre surgissante « bulle d'aide » va apparaître quand l'utilisateur survolera un élément avec la souris. Ce type de boîte surgissante est habituellement utilisé pour fournir la description d'un bouton de façon plus détaillée que le bouton le permet lui-même.
-
- -

Ces trois types de boîtes surgissantes diffèrent dans la façon dont l'utilisateur les invoque. Elles peuvent contenir n'importe quel contenu, bien que des menus soient courants pour les boîtes simples et contextuelles, et qu'une simple chaîne de caractères soit courante pour une bulle d'aide. Le type de boîte surgissante est déterminé par l'élément qui invoque la boîte.

- -

Déclaration d'un menu surgissant

- -

Une boîte sugissante est décrite en utilisant l'élément menupopup. C'est un type de boîte sans attributs spéciaux. Quand elle est invoquée, une fenêtre contenant tout ce que vous avez pu mettre dans le menupopup va s'afficher. Cependant, vous devez toujours insérer un attribut id sur le popup car il doit être associé à un élément. Nous verrons bientôt sa signification. D'abord, un exemple :

- -
<popupset>
-   <menupopup id="clipmenu">
-     <menuitem label="Couper"/>
-     <menuitem label="Copier"/>
-     <menuitem label="Coller"/>
-   </menupopup>
-</popupset>
-
- -

Comme vous pouvez le voir ici, un simple menu surgissant contenant trois commandes a été créé. L'élément menupopup entoure les trois items de menu. Vous remarquerez également que l'id a été mis sur l'élément menupopup lui-même.

- -

L'élément popupset entoure l'entière déclaration de menu surgissant. Il s'agit d'un container générique pour les boîtes surgissantes, et il est optionnel. Il ne s'affiche pas à l'écran mais il est utilisé comme une section dans laquelle vous pouvez déclarer tous vos menus surgissants. Comme le nom popupset sous-entend, vous pouvez placer plusieurs déclarations de menus surgissants à l'intérieur. Ajoutez en simplement d'autres après le premier élément menupopup. Vous pouvez avoir plus d'un popupset dans un fichier, mais habituellement vous n'en aurez qu'un.

- -

Association d'un menu surgissant à un élément

- -

Maintenant que nous avons créé le menu surgissant, il est temps de le faire apparaître. Pour cela, nous avons besoin d'associer le menu à un élément d'où il devra apparaître. Nous faisons cela car nous voulons seulement que le menu apparaisse quand l'utilisateur clique à un certain endroit de la fenêtre. Habituellement, il s'agira d'un bouton spécifique ou d'une boîte.

- -

Pour associer le menu surgissant à un élément, ajoutez un de ces trois attributs à l'élément. L'attribut que vous ajoutez dépend du type de menu surgissant vous voulez créer. Pour les menus surgissants simples, ajoutez l'attribut popup à l'élément. Pour les menus contextuels, ajoutez l'attribut context. Enfin, pour les bulles d'aide, ajoutez l'attribut tooltip.

- -

La valeur de l'attribut doit être celle de l'id du menupopup que vous voulez faire apparaître. C'est pour cela que vous devez mettre un id sur le menupopup. Par ce moyen, il est facile d'avoir plusieurs menus surgissants dans un seul fichier.

- -

Dans l'exemple ci-dessus, nous voulons faire un menu surgissant contextuel. Nous devons donc utiliser l'attribut context et l'ajouter à l'élément sur lequel nous voulons associer le menu surgissant. L'exemple ci-dessous montre comment procéder :

- -

Exemple 1: Source Voir

- -
Image:xultu_popups1.png
- -
<popupset>
-  <menupopup id="clipmenu">
-    <menuitem label="Couper"/>
-    <menuitem label="Copier"/>
-    <menuitem label="Coller"/>
-  </menupopup>
-</popupset>
-
-<box context="clipmenu">
-  <label value="Faites un clic contextuel pour afficher le menu"/>
-</box>
-
- -

Ici, le menu contextuel a été associé à une boîte. À chaque fois que vous faîtes un clic contextuel (clic droit) n'importe où dans la boîte, le menu surgissant apparaîtra. Le menu apparaîtra aussi même si vous cliquez sur un enfant de la boîte, donc il apparaîtra aussi si vous cliquez sur l'élément label. L'attribut context a été utilisé pour associer la boîte au menu contextuel de même id. Dans ce cas, le menu 'clipmenu' va apparaître. De cette façon, vous pouvez disposer de plusieurs menus surgissants et les associer avec différents éléments.

- -

Vous pouvez associer plusieurs menus surgissants avec le même élément en mettant plusieurs d'attributs de différents types sur un élément. Vous pouvez aussi associer le même menu surgissant à plusieurs éléments, ce qui est un avantage de l'utilisation de la syntaxe popup. Les menus surgissants ne peuvent être associés qu'avec des éléments XUL. Ils ne peuvent pas être associés à des éléments HTML.

- -

Bulles d'aide

- -

Nous allons voir un moyen simple de créer des bulles d'aide. Il y a deux façons de créer des bulles d'aide. La méthode la plus simple, qui est la plus commune, est d'ajouter un attribut tooltiptext à un élément sur lequel vous voulez assigner une bulle d'aide.

- -

La deuxième méthode consiste à utiliser un élément tooltip contenant le contenu d'une bulle d'aide. Il nécessite que vous ayez un bloc séparé de contenu pour chaque bulle d'aide ou que vous ayez un script contenant le contenu, bien que certains contenus hormis du texte dans une bulle d'aide ne sont pas permis.

- -

Exemple 2: Source Voir

- -
<button label="Sauvegarder" tooltiptext="Cliquez ici pour enregistrer vos trucs"/>
-
-<popupset>
-  <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;">
-    <description value="Cliquez ici pour voir plus d'information"/>
-    <description value="Vraiment!" style="color: red;"/>
-  </tooltip>
-</popupset>
-
-<button label="Plus" tooltip="moretip"/>
-
- -

Ces deux boutons ont chacun une bulle d'aide. Le premier utilise le style par défaut de bulle d'aide. Le second utilise une bulle d'aide modifiée qui a une couleur d'arrière-plan différente et un texte stylisé. La bulle d'aide est associée au bouton 'Plus' en utilisant l'attribut tooltip, correspondant à l'id de l'élément tooltip. Notez que l'élément tooltip est également placé à l'intérieur d'un élément popset comme pour les autres types de menus surgissants.

- -

Alignement des menus surgissants

- -

Par défaut, les menus surgissants et contextuels vont apparaître là où le pointeur de la souris se trouve. Les bulles d'aides seront placées légèrement sous l'élément pour que le pointeur de la souris ne les cache pas. Il y a des cas toutefois, où vous voudrez préciser l'emplacement du menu surgissant. Par exemple, le menu surgissant qui apparaît quand vous cliquez sur le bouton Précédent dans un navigateur doit apparaître sous le bouton Précédent, non pas là ou se situe le pointeur de la souris.

- -

Pour changer la position du menu, vous pouvez utiliser un attribut additionnel, position, sur le popup. Vous pouvez aussi l'ajouter à l'élément menupopup. Cet attribut est utilisé pour indiquer l'emplacement du menu relativement à l'élément invoquant la boîte. Ses différentes valeurs applicables sont décrites brièvement ci-dessous :

- -
-
'after_start' 
-
Le menu surgissant apparaît sous l'élément avec les bords gauche de l'élément et du menu alignés. Si le menu surgissant est plus large que l'élément, il s'étend à droite. C'est cette valeur qui est utilisée pour les menus déroulants associés avec les boutons Précédent et Suivant du navigateur.
-
- -
-
'after_end' 
-
Le menu surgissant apparaît sous l'élément avec les bords droit de l'élément et du menu alignés.
-
- -
-
'before_start' 
-
Le menu surgissant apparaît au-dessus de l'élément avec les bords gauche de l'élément et du menu alignés.
-
- -
-
'before_end' 
-
Le menu surgissant apparaît au-dessus de l'élément avec les bords droit de l'élément et du menu alignés.
-
- -
-
'end_after' 
-
Le menu surgissant apparaît à droite de l'élément avec les bords inférieurs de l'élément et du menu alignés.
-
- -
-
'end_before' 
-
Le menu surgissant apparaît à droite de l'élément avec les bords supérieurs de l'élément et du menu alignés.
-
- -
-
'start_after' 
-
Le menu surgissant apparaît à gauche de l'élément avec les bords inférieurs de l'élément et du menu alignés.
-
- -
-
'start_before' 
-
Le menu surgissant apparaît à gauche de l'élément avec les bords supérieurs de l'élément et du menu alignés.
-
- -
-
'overlap' 
-
Le menu surgissant apparaît par dessus l'élément.
-
- -
-
'at_pointer' 
-
Le menu surgissant apparaît à la position du pointeur de la souris.
-
- -
-
'after_pointer' 
-
Le menu surgissant apparaît à la même position horizontale que le pointeur de la souris mais apparaît sous l'élément. C'est ainsi que les bulles d'aide apparaissent.
-
- -

En ajoutant l'attribut position à un élément popup, vous pouvez spécifier précisément où le menu surgissant doit apparaître. Vous ne pouvez pas spécifier une position exacte en pixels. L'attribut position peut être utilisé pour les trois types de menus surgissants, bien que vous ne changerez probablement pas la valeur pour les bulles d'aide.

- -

L'exemple ci-dessous montre la création d'un bouton Précédent avec un menu surgissant :

- -

Exemple 3: Source Voir

- -
<popupset>
-  <menupopup id="backpopup" position="after_start">
-    <menuitem label="Page 1"/>
-    <menuitem label="Page 2"/>
-  </menupopup>
-</popupset>
-
-<button label="Affiche moi" popup="backpopup"/>
-
- -
-

Notre exemple de recherche de fichiers

- -

Ajoutons un simple menu surgissant à la boîte de dialogue de recherche de fichiers. Pour plus de simplicité, nous allons juste recopier le contenu du menu 'Edition'. Le menu apparaîtra quand l'on clique sur le premier onglet :

- -

Source Voir

- -
<popupset>   <menupopup id="editpopup">     <menuitem label="Couper" accesskey="c"/>     <menuitem label="Copier" accesskey="p"/>     <menuitem label="Coller" accesskey="l" disabled="true"/>   </menupopup> </popupset>
-
-<vbox flex="1">
-.
-.
-.
-
-<tabpanel id="searchpanel" orient="vertical" context="editpopup">
-
-Ici un simple menu surgissant, similaire au menu Edition, a été ajouté au premier onglet. Si vous faîtes un clic droit (Control-clic sur Macintosh) n'importe où sur la page de ce premier onglet, le menu surgissant va apparaître. Cependant, le menu n'apparaîtra pas si vous cliquez autre part. - -
Notez que le champs de saisie a son propre menu surgissant qui supplantera celui que nous avons spécifié.
-
- -
-

Par la suite, nous allons voir comment créer des menus défilants.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/mise_\303\240_jour_de_commandes/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/mise_\303\240_jour_de_commandes/index.html" deleted file mode 100644 index ca785b61a8..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/mise_\303\240_jour_de_commandes/index.html" +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Mise à jour de commandes -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Mise_à_jour_de_commandes -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Updating_Commands ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Dans cette section, nous verrons comment mettre à jour des commandes.

- -

Appel des commandes

- -

Si une commande a un attribut oncommand, vous pouvez simplement l'appeler en utilisant la méthode doCommand de la commande ou un élément qui lui est attaché. Pour d'autres commandes, vous aurez besoin de quelques lignes de codes supplémentaires. Vous devrez passer par ces étapes spéciales dans le cas où les commandes appelées sont implémentées par un contrôleur. Vous aurez aussi besoin de le faire dans le cas où vous créez votre propre menu de commandes, par exemple pour implémenter les commandes du menu d'édition de votre propre application.

- -

Heureusement, le code spécial est assez simple. Tout ce que nous avons besoin de faire est d'obtenir le contrôleur demandé et d'appeler la commande. Une manière simple de le faire est la suivante :

- -
var controller = document.commandDispatcher.getControllerForCommand("cmd_paste");
-if (controller && controller.isCommandEnabled("cmd_paste")){
-  controller.doCommand(command);
-}
-
- -

Le code ci-dessus recherche d'abord le contrôleur pour la commande 'cmd_paste' grâce au répartiteur de commandes. Puis, il teste si la commande est activée, et enfin exécute la commande utilisant la méthode doCommand du contrôleur. Notez que nous n'avons pas besoin de préciser l'élément ou le contrôleur à utiliser. Le répartiteur de commandes s'en charge. En outre, nous pourrions juste appeler doCommand sans vérifier si la commande est activée ou non, mais il vaut mieux le faire.

- -

Le code ci-dessus est tellement générique qu'il pourrait être une fonction prenant une commande en argument et exécutant cette commande. Cette fonction pourrait être ainsi réutilisée pour toutes les commandes. En fait, c'est tellement commun que Mozilla inclut une bibliothèque qui ne fait que ça. Si vous incluez le script 'chrome://global/content/globalOverlay.js' dans un fichier XUL, vous pouvez appeler la méthode goDoCommand qui exécute la commande passée en argument. Le code pour cette fonction ne fait que quelques lignes, ainsi vous pourriez l'inclure directement dans votre code si pour certaines raisons vous ne souhaitez pas inclure la bibliothèque.

- -
<script src="chrome://global/content/globalOverlay.js"/>
-
-<command id="cmd_paste" oncommand="goDoCommand('cmd_paste');/>
-<button label="Coller" command="cmd_paste"/>
-
- -

L'exemple ci-dessus va implémenter un bouton pour « Coller ». Il est relié à la commande qui va appeler la commande du contrôleur concerné lorsqu'il est appelé. Le code ci-dessus est tout ce dont vous avez besoin pour implémenter la fonctionnalité de la commande Coller dans votre application. La seule autre chose dont vous avez besoin est de vous assurer que le statut de la commande Coller qui est activé, et donc du bouton, est mis à jour au bon moment, comme décrit ci-dessous.

- -

Dispositifs de mise à jour de commande

- -

Un dispositif de mise à jour de commande est un dispositif spécial de l'élément commandset qui lui permet de mettre à jour les statuts activés d'une ou plusieurs commandes lorsque certains événements se produisent. Vous devrez y pensez lorsqu'une commande est valide et lorsqu'elle ne l'est pas. De plus, vous devrez considérer quand l'état pourrait changer et quand les commandes devraient être mises à jour.

- -

Par exemple, la commande « Coller » est valide lorsque le champ de saisie de texte a le focus et qu'il y a quelque chose dans le presse-papiers à coller. La commande deviendra active chaque fois que le champ de saisie aura le focus et lorsque le contenu du presse-papiers changera. Un dispositif de mise à jour de contenu surveillera ces situations et le code qui active et désactive les commandes pourra être exécuté selon les besoins.

- -

Un simple dispositif de mise à jour de commandes ressemble à ceci :

- -
<commandset id="updatePasteItem"
-            commandupdater="true"
-            events="focus"
-            oncommandupdate="goUpdateCommand('cmd_paste');"/>
-
- -

Un dispositif de mise à jour de commandes est indiqué en utilisant l'attribut commandupdater, qui devrait être déclaré à 'true'. L'attribut events est utilisé pour lister les événements que le dispositif de mise à jour de commandes surveille. Vous pouvez spécifier de multiples événements en les séparant par des virgules. Dans l'exemple ci-dessus, le dispositif de mise à jour de commandes surveille les événements de focus. Il a pour effet de mettre à jour les commandes lorsqu'un élément reçoit le focus.

- -

Lorsqu'un événement de focus se produit, le code dans l'attribut oncommandupdate est appelé. Dans l'exemple, la méthode goUpdateCommand, qui est une fonction provenant du script globalOverlay.js décrit plus tôt, est appelée. Elle va mettre à jour la commande et activer ou désactiver les items de boutons et de menus nécessaires. Le code qui est derrière est assez simple. Il appelle seulement le contrôleur nécessaire, appelle sa méthode isCommandEnabled, et enfin active ou désactive la commande. Si vous avez plusieurs commandes à mettre à jour, appelez la méthode goUpdateCommand une fois pour chaque commande.

- -
Notez que le dispositif de mise à jour de commandes recevra les notifications de tous les événements de focus sur tous les éléments, même si d'autres gestionnaires d'événements répondent à l'événement. Un dispositif de mise à jour de commandes est par essence un gestionnaire global d'événements.
- -

Les dispositifs de mise à jour de commandes disposent de plusieurs événements pouvant répondre à ceux qui sont listés ci-dessous. Il est également possible de créer le votre.

- - - -

L'exemple suivant montre le dispositif de mise à jour de commandes utilisé dans le navigateur Mozilla pour mettre à jour le menu d'édition de commandes. Les fonctions utilisées sont disponibles dans le script 'chrome://communicator/content/utilityOverlay.js'.

- -
<commandset id="globalEditMenuItems"
-            commandupdater="true"
-            events="focus"
-            oncommandupdate="goUpdateGlobalEditMenuItems()"/>
-<commandset id="selectEditMenuItems"
-            commandupdater="true"
-            events="select"
-            oncommandupdate="goUpdateSelectEditMenuItems()"/>
-<commandset id="undoEditMenuItems"
-            commandupdater="true"
-            events="undo"
-            oncommandupdate="goUpdateUndoEditMenuItems()"/>
-<commandset id="clipboardEditMenuItems"
-            commandupdater="true"
-            events="clipboard"
-            oncommandupdate="goUpdatePasteMenuItems()"/>
-
- -
-

Ensuite, nous vous montrerons comment utiliser les observateurs.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/modification_d'une_interface_xul/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/modification_d'une_interface_xul/index.html deleted file mode 100644 index 249e58daa6..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/modification_d'une_interface_xul/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Modification d'une interface XUL -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Modification_d'une_interface_XUL -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_a_XUL_Interface ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Le DOM fournit de nombreuses fonctions pour modifier un document.

- -

Création de nouveaux éléments

- -

Vous pouvez créer de nouveaux éléments en utilisant la fonction createElement() du document. Elle ne prend qu'un argument, le nom de la balise de l'élément à créer. Vous pouvez ensuite lui affecter des attributs en utilisant la fonction setAttribute() et ajouter cet élément au document XUL grâce à la fonction appendChild(). L'exemple suivant ajoute un bouton à une fenêtre XUL :

- -

Exemple 1: Source Voir

- -
<script>
-function addButton(){
-  var aBox = document.getElementById("aBox");
-  var button = document.createElement("button");
-  button.setAttribute("label","Un bouton");
-  aBox.appendChild(button);
-}
-</script>
-
-<box id="aBox" width="200">
-  <button label="Ajouter" oncommand="addButton();"/>
-</box>
-
- - - -

La fonction createElement() va créer l'élément type par défaut du document. Pour des documents XUL, il sera généralement question de création d'éléments XUL. Pour un document HTML, un élément HTML sera créé, et donc, il aura les fonctionnalités et les fonctions d'un élément HTML. La fonction createElementNS() peut être utilisée pour créer des éléments dans un espace de nommage différent.

- -

La fonction appendChild() est utilisée pour ajouter un élément en tant qu'enfant d'un autre élément. Il existe trois fonctions associées qui sont les fonctions insertBefore(), replaceChild() et removeChild. Leur syntaxe est la suivante :

- -
parent.appendChild(child);
-parent.insertBefore(child, referenceChild);
-parent.replaceChild(newChild, oldChild);
-parent.removeChild(child);
-
- -

Le nom de ces fonctions suffit à comprendre ce qu'elles font.

- - - -
Notez que pour toutes ces fonctions, l'enfant de référence ou l'enfant à supprimer doit exister sinon une erreur sera générée.
- -

Il est fréquent que vous vouliez effacer un élément existant et l'ajouter autre part. Dans ce cas, vous pouvez simplement ajouter l'élément sans l'effacer préalablement. Puisqu'un nœud ne peut exister qu'à un seul emplacement à la fois, le mécanisme d'insertion se chargera toujours d'effacer d'abord le nœud de son emplacement initial. C'est une méthode pratique pour déplacer un nœud dans un document.

- -

Copie de nœuds

- -

Toutefois, pour copier un nœud, vous devrez appeler la fonction cloneNode(). Cette fonction réalise une copie d'un nœud existant, ce qui vous permet ensuite de l'ajouter autre part. Le nœud original restera à sa place. Elle prend un argument booléen indiquant si elle doit copier tous les nœuds enfants ou non. Si la valeur est 'false', seul le n½ud est copié, comme s'il n'avait jamais eu aucun enfant. Si la valeur est 'true', tous les enfants sont également copiés. La copie est faite récursivement, donc pour de larges structures d'arbres, assurez-vous de vouloir réellement passer cette valeur 'true' à la fonction cloneNode(). Voici un exemple :

- -

Exemple 2: Source Voir

- -
<hbox height="400">
-  <button label="Copier"
-          oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/>
-
-  <vbox>
-    <button label="Premier"/>
-    <button label="Deuxième"/>
-  </vbox>
-</hbox>
-
- -

Lorsque le bouton 'Copier' est appuyé :

- - - -
Vous noterez que certains éléments, tels que listbox et menulist disposent de fonctions de modification spécialisées supplémentaires que vous devriez utiliser dès que vous le pouvez. Elles seront décrites dans une prochaine section.
- -

Manipulation d'éléments basiques

- -

Les éléments principaux de XUL, tels que les boutons, les cases à cocher et les boutons radios, peuvent être manipulés grâce à de nombreuses propriétés de script. Les propriétés disponibles sont listées sur la page référence des éléments car celles disponibles varient selon les éléments. Les propriétés communes que vous pouvez manipuler sont label, value, checked et disabled. Elles affectent ou effacent les attributs correspondants si nécessaire.

- -

Exemples de propriétés label et value

- -

Voici un exemple simple de changement d'un libellé de bouton :

- -

Exemple 3: Source Voir

- -
<button label="Bonjour" oncommand="this.label = 'Aurevoir';"/>
- -

Lorsque le bouton est pressé, son libellé est modifié. Cette technique fonctionne pour une large majorité d'éléments ayant des libellés (label). Pour les champs de saisie, vous pouvez faire quelque chose de similaire pour sa propriété value.

- -

Exemple 4: Source Voir

- -
<button label="Ajouter" oncommand="this.nextSibling.value += '1';"/>
-<textbox/>
-
- -

Cet exemple ajoute un '1' dans le champ de saisie chaque fois que le bouton est pressé. La propriété nextSibling permet d'atteindre l'élément suivant le bouton (this), le champ de saisie textbox. L'opérateur += sert à ajouter un '1' à la fin du texte de la valeur courante. Notez que vous pouvez encore ajouter du texte dans ce champ de saisie. Vous pouvez récupérer le libellé courant ou la valeur en utilisant ses propriétés, comme dans l'exemple suivant :

- -

Exemple 5: Source Voir

- -
<button label="Bonjour" oncommand="alert(this.label);"/>
- -

Changement d'état d'une case à cocher

- -

Les cases à cocher disposent d'une propriété checked qui sert à les cocher ou à les décocher. Il est facile de comprendre son usage. Dans l'exemple à suivre, nous inversons l'état de la propriété checked chaque fois que le bouton est pressé. Tandis que les libellés et les valeurs sont des chaînes de caractères, vous noterez que la propriété checked est un booléen qui prend une valeur 'true' ou 'false'.

- -

Exemple 6: Source Voir

- -
<button label="Changer" oncommand="this.nextSibling.checked =
-  !this.nextSibling.checked;"/>
-<checkbox label="Cochez pour les messages"/>
-
- -

Les boutons radios peuvent également être sélectionnés en utilisant des propriétés, toutefois, un seul est sélectionné à la fois dans un groupe, tous les autres étant décochés. Vous n'avez pas à réaliser cette gestion manuellement. La propriété selectedIndex du radiogroup peut être utilisée pour cela. La propriété selectedIndex sert à récupérer l'index du bouton radio sélectionné dans le groupe. Il sert également à le modifier.

- -

Modification de l'état activé ou désactivé d'un élément

- -

Il est habituel de désactiver des champs particuliers qui ne servent pas dans une situation donnée. Par exemple, dans la boîte de dialogue des préférences, vous avez le choix entre plusieurs possibilités, mais seul un choix permet un paramétrage supplémentaire. Voici un exemple de création de ce type d'interface :

- -

Exemple 7: Source Voir

- -
<script>
-function updateState(){
-  var name = document.getElementById("name");
-  var sindex = document.getElementById("group").selectedIndex;
-  name.disabled = sindex == 0;
-}
-</script>
-
-<radiogroup id="group" onselect="updateState();">
-  <radio label="Nom aléatoire" selected="true"/>
-  <hbox>
-    <radio label="Spécifiez un nom :"/>
-    <textbox id="name" value="Alain" disabled="true"/>
-  </hbox>
-</radiogroup>
-
- -

Dans cet exemple, une fonction updateState() est appelée chaque fois qu'un événement de sélection est déclenché depuis le groupe de boutons radios. Elle est exécutée lorsque qu'un bouton radio est sélectionné. La fonction retournera l'indice de l'élément radio actuellement sélectionné en utilisant la propriété selectedIndex. Vous noterez que bien qu'un bouton radio se trouve à l'intérieur d'une boîte hbox, il reste attaché au groupe radio. Si le premier bouton radio est sélectionné (index de '0'), le champ de saisie est désactivé en définissant sa propriété disabled à 'true'. Si le second bouton radio est sélectionné, le champ de saisie est activé.

- -
-

La section suivante fournira plus de détails sur la manipulation des groupes de boutons radios et la manipulation des listes.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

- -

 

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/modification_du_th\303\250me_par_d\303\251faut/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/modification_du_th\303\250me_par_d\303\251faut/index.html" deleted file mode 100644 index 6e0899b330..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/modification_du_th\303\250me_par_d\303\251faut/index.html" +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Modification du thème par défaut -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Modification_du_thème_par_défaut -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_the_Default_Skin ---- -

 

-
-

« PrécédentSuivant »

-
-

Cette section décrit comment modifier le thème graphique d'une fenêtre.

-

Les bases d'un thème

-

Un thème est un ensemble de feuilles de styles, d'images et de comportements qui est appliqué à un fichier XUL. En appliquant un thème différent, vous pouvez changer l'apparence d'une fenêtre sans changer ses fonctionnalités. Firefox fournit un thème par défaut, et vous pouvez en télécharger d'autres. Le XUL pour les deux est le même. En revanche, les feuilles de styles et les images utilisées sont différentes.

-

Pour une simple personnalisation de l'apparence d'une fenêtre Mozilla, vous pouvez facilement changer les feuilles de styles qui lui sont associées. Des modifications plus importants peuvent être faits en créant un thème complètement nouveau. La fenêtre des préférences de Mozilla comporte un panneau pour changer le thème par défaut. (Bien que Mozilla appelle le code sous jacent les appelle 'skins' et que l'inteface utilisateur les appelle des thèmes, il s'agit de la même chose).

-

Un thème est décrit en utilisant des CSS, ce qui vous permet de définir les couleurs, les bordures et les images utilisées pour dessiner des éléments. Le fichier 'classic.jar' contient les définitions des thèmes. Le répertoire "global" inclus dans ces archives contient les définitions principales des styles concernant la manière d'afficher les différents éléments XUL. En modifiant ces fichiers, vous pouvez modifier l'apparence des applications XUL.

-

Personnalisation avec userChrome.css

-

Si vous placez un fichier appelé 'userChrome.css' dans le répertoire "chrome" dans le répertoire de votre profil utilisateur, vous pouvez remplacer des paramètres sans changer les archives elles-mêmes. Ce répertoire devrait être créé quand vous créez un profil et quelques exemples y figurer. Le fichier 'userContent.css' permet de personnaliser les pages Web, tandis que 'userChrome.css' permet de personnaliser les fichiers chrome.

-

Par exemple, en ajoutant ce qui suit à la fin de ce fichier, vous pouvez changer tous les éléments menubar pour leur appliquer un fond rouge.

-
menubar {
-  background-color: red;
-}
-
-

Si vous ouvrez une fenêtre Mozilla après avoir effectué ce changement, les barres de menu seront rouges. Comme ce changement a été appliqué à la feuille de styles utilisateur, il affecte toutes les fenêtres. Cela signifie que la barre de menus du navigateur, la barre de menus des marque-pages et même la barre de menus du dialogue de recherche de fichiers seront rouges.

-

Paquetages de thèmes

-

Pour que le changement n'affecte qu'une fenêtre, modifiez la feuille de styles associée à ce fichier XUL. Par exemple, pour ajouter une bordure rouge autour des commandes de menu dans la fenêtre du carnet d'adresses, ajoutez ce qui suit au fichier 'bookmarksManager.css' dans l'archive 'classic.jar' ou de votre thème préféré.

-
menuitem {
-  border: 1px solid red;
-}
-
-

Si vous regardez dans les archives des thèmes, vous remarquerez que chacune contient un certain nombre de feuilles de styles et d'images. Les feuilles de styles font référence aux images. Vous devriez éviter de faire directement référence aux images dans les fichiers XUL si vous voulez que votre contenu puisse être modifié par un thème, parce qu'un certain thème peut ne pas utiliser d'images et avoir besoin d'un design plus complexe. En faisant référence aux images seulement dans les fichiers CSS, on peut facilement les enlever. Cela évite aussi la dépendance avec les noms de fichier spécifiques des images.

-

Vous pouvez attribuer des images à un bouton, à une case à cocher et à d'autres éléments en utilisant la propriété list-style-image comme suit :

-
checkbox {
-  list-style-image: url("chrome://findfile/skin/images/check-off.jpg");
-}
-
-checkbox[checked="true"] {
-  list-style-image: url("chrome://findfile/skin/images/check-on.jpg");
-}
-
-

Ce code modifie l'image associée à une case à cocher. Le premier style applique une certaine image pour une case à cocher décochée et le second style pour une case à cocher cochée. Le modificateur 'checked=true' n'applique le style qu'aux éléments qui ont leur attribut checked à 'true'.

-

Consultez Créer un thème pour Firefox et CSS:Premiers pas pour plus de détails.

-
-

Dans la prochaine section, nous allons voir comment créer un nouveau thème.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/onglets/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/onglets/index.html deleted file mode 100644 index e2d94235ea..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/onglets/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Onglets -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Onglets -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Tabboxes ---- -

 

-
-

« PrécédentSuivant »

-
-

Il est courant de voir des pages à onglets dans les boîtes de dialogues de préférences. Nous allons voir ici comment les créer.

-

Boîtes d'onglets

-

Les boîtes d'onglets sont typiquement utilisées dans une application de fenêtre de préférences. Une série d'onglets apparaît en travers du bord supérieur de la fenêtre. L'utilisateur peut cliquer sur chaque onglet pour voir la sélection des options. L'emploi d'onglets est très utile lorsque vous avez plus d'options qu'il ne peut en tenir sur l'écran.

-

XUL offre une méthode pour créer de telles boîtes de dialogues. Elles nécessitent cinq nouveaux éléments qui sont décrits brièvement ici et plus en détail par la suite.

-
tabbox 
La boîte externe qui contient les onglets sur le haut et les pages correspondantes elles mêmes.
tabs 
La boîte interne qui contient les onglets individuellement. En d'autres termes, il s'agit d'un groupement d'onglets.
tab 
Un onglet spécifique. Cliquer sur un onglet remonte la page de l'onglet au premier plan.
tabpanels 
Le container des pages.
tabpanel 
Le corps d'une page seule. Vous allez placer le contenu d'une page dans cette élément. Le premier tabpanel correspond au premier onglet, le second tabpanel correspond au second onglet, et ainsi de suite.
-
-

L'élément tabbox est l'élément externe. Il est constitué de deux enfants, l'élément tabs qui contient les en-têtes des onglets, et l'élément tabpanels qui contient les pages d'onglets.

-

La syntaxe typique d'une boîte d'onglets est décrite ci dessous :

-
<tabbox id="tablist">
-   <tabs>
-     <!-- les éléments tab viennent ici -->
-   </tabs>
-   <tabpanels>
-     <!-- les éléments tabpanel viennent ici -->
-   </tabpanels>
-</tabbox>
-
-

Les éléments tab sont placés à l'intérieur d'un élément tabs qui se comporte comme une boîte normale. L'élément tabs lui même a été placé à l'intérieur d'un élément tabbox. Cet élément tabbox contient aussi l'élément tabpanels qui apparaît en dessous de l'élément tabs à cause de la disposition verticale de la boîte d'onglets.

-

Il n'y a réellement rien de spécial au sujet des éléments tab qui les rendent différents des boîtes. Comme pour les boîtes, les onglets peuvent contenir n'importe quels éléments. La différence est que les onglets ont un rendu sensiblement différent et seulement le contenu de la page d'un seul onglet sera visible à la fois, comme peut le faire l'élément deck.

-

Le contenu des pages correspondant à chaque onglet doit être placé dans chaque élément tabpanel correspondant. Il ne doit pas être mis dans un élément tab qui contient, lui, le contenu descriptif de l'onglet sur le bord supérieur.

-

Chaque élément tabpanel devient une page de l'onglet affiché. La première page correspond au premier onglet, la seconde page correspond au second onglet, et ainsi de suite. Il y a une relation de un-à-un entre chaque élément tab et chaque élément tabpanel.

-

Pour déterminer la dimension d'une boîte d'onglets, la taille de la plus grande page est utilisée. Ainsi, si vous avez dix champs de saisie sur une page et seulement un sur une autre page, cette autre page sera dimensionnée pour s'ajuster à celle qui contient les dix champs de saisie en occupant plus d'espace. La surface occupée par la page d'un onglet ne change pas lorsque l'utilisateur bascule vers une page d'un autre onglet.

-

Exemple de boîte d'onglets

-

Exemple 1: Source Voir

-
Image:xultu_tabpanel1.png
-
<tabbox>
-   <tabs>
-     <tab label="Courrier"/>
-     <tab label="Forum"/>
-   </tabs>
-   <tabpanels>
-     <tabpanel id="mailtab">
-       <checkbox label="Vérifier automatiquement le courrier"/>
-     </tabpanel>
-     <tabpanel id="newstab">
-       <button label="Effacer le cache des forums"/>
-     </tabpanel>
-   </tabpanels>
-</tabbox>
-
-

Ici, deux onglets ont été ajoutés. Le premier est intitulé 'Courrier' et l'autre est intitulé 'Forum'. Lorsque l'utilisateur clique sur l'onglet 'Courrier', le contenu de la première page est affiché. Dans ce cas, la boîte avec la case à cocher intitulé 'Vérifier automatiquement le courrier' apparaîtra sous cet onglet. Le second onglet, lorsqu'il est cliqué, affichera la boîte contenant le bouton intitulé 'Effacer le cache des forums'.

-

L'onglet courant sélectionné est donné par un attribut supplémentaire selected initialisé à 'true' sur un élément tab. Il sert à donner à l'onglet par défaut un aspect différent de telle façon qu'il apparaisse sélectionné. Un seul onglet peut avoir cet attribut avec une valeur 'true'.

-

Positionnement des onglets

-

Finalement, vous pouvez changer la position des onglets pour qu'ils apparaissent sur n'importe quel côté des pages d'onglets. Il suffit de définir les attributs orient et dir comme nécessaire. Souvenez vous que les éléments tab sont des boîtes normales en terme de mise en page. D'ailleurs, l'élément tabbox se comporte comme une boîte normale ayant une orientation verticale par défaut, dans laquelle l'élément tabs est une boîte ayant une orientation horizontale.

-
Image:xultu_tabpanel_extra.png
-

Par exemple, pour mettre les onglets le long du bord gauche, changez l'orientation de l'élément tabs pour qu'elle soit verticale. Ils seront empilés les uns sur les autres. Ensuite, mettez une orientation horizontale sur le tabbox. Les onglets appaîtront à gauche, et pas au dessus des pages d'onglets. Notez que la modification de l'orientation de l'élément tabpanels n'aura aucun effet puisque les pages d'onglets sont empilées les unes sur les autres. (NdT : Source Voir)

-

Vous pouvez placer les onglets le long du bord droit ou en bas en déplaçant l'élément tabs après l'élément tabpanels. De plus, vous devrez définir l'attribut dir à 'reverse' sur tabbox. Cependant, vous devriez laisser les onglets en haut car leur rendu graphique risque d'être mauvais avec certains thèmes graphiques particuliers.

-
-

Ajout d'onglets à la boîte de dialogue de recherche de fichiers

-

Ajoutons une seconde page à notre boîte de dialogue de recherche de fichiers. Nous allons créer un onglet 'Options' (en le sélectionnant par défaut) qui contiendra quelques options de recherche. Ce n'est peut être pas la meilleure interface pour faire cela, mais nous l'utiliserons pour la démonstration des onglets. Le libellé d'en-tête et la boîte de critères de recherche iront dans la première page d'onglet. Nous allons ajouter quelques options dans la seconde page d'onglet. La barre de progression et les boutons restent sur la boîte de dialogue principale, en dehors des onglets.

-
<vbox flex="1">
-
-<tabbox selectedIndex="1">   <tabs>     <tab label="Recherche"/>     <tab label="Options"/>   </tabs>    <tabpanels>    <tabpanel id="searchpanel" orient="vertical">
-
-    <description>
-     Entrez votre critère de recherche ci dessous et appuyer sur le
-     bouton Rechercher.
-    </description>
-
-    <spacer style="height: 10px"/>
-
-    <groupbox orient="horizontal">
-      <caption label="Critère de recherche"/>
-
-      <menulist id="searchtype">
-        <menupopup>
-          <menuitem label="Nom"/>
-          <menuitem label="Taille"/>
-          <menuitem label="Date de modification"/>
-        </menupopup>
-      </menulist>
-      <spacer style="width: 10px;"/>
-      <menulist id="searchmode">
-        <menupopup>
-          <menuitem label="Est"/>
-          <menuitem label="N'est pas"/>
-        </menupopup>
-      </menulist>
-
-      <spacer style="height: 10px"/>
-      <textbox id="find-text" flex="1" style="min-width: 15em;"/>
-
-    </groupbox>
-   </tabpanel>     <tabpanel id="optionspanel" orient="vertical">     <checkbox id="casecheck" label="Recherche sensible à la casse"/>     <checkbox id="wordscheck" label="Nom de fichier entier"/>    </tabpanel>   </tabpanels> </tabbox>
-
-
Image:xultu_tabpanel2.png
-

Les éléments tab ont été placés autour du contenu principal de la fenêtre. Vous pouvez voir les deux onglets, 'Recherche' et 'Options'. En cliquant sur chacun d'eux, vous faites apparaître les pages correspondantes. Comme montré sur l'image ci-dessus, les deux options de recherche apparaissent sur le deuxième onglet. La première page ressemble beaucoup à ce qu'elle était avant, exceptée la présence des onglets sur le bord supérieur.

-Exemple de recherche de fichiers : Source Voir
-
-

Dans la section suivante, nous allons voir comment créer des grilles pour le placement de contenus.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/overlays_inter-paquetage/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/overlays_inter-paquetage/index.html deleted file mode 100644 index fa037a0316..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/overlays_inter-paquetage/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Overlays inter-paquetage -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Overlays_inter-paquetage -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Cross_Package_Overlays ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Cette section décrit comment appliquer des overlays à des fichiers qui ne les importent pas.

- -

Application d'overlays à d'autres paquetages

- -
Note : Cette section traite de contents.rdf qui a été remplacé par des fichiers manifest depuis Gecko 1.8.
- -

Les overlays ont d'autres fonctionnalités très utiles. Dans les exemples de la section précédente, les overlays étaient importés par la fenêtre. Vous pouvez aussi utiliser une autre méthode en indiquant aux overlays pour quelles fenêtres ils seront appliqués. Il vous suffit de modifier le fichier 'contents.rdf' de votre paquetage. Cette méthode est très utile car elle permet à un overlay de modifier l'interface utilisateur d'un autre paquetage sans pour cela modifier celui-ci. Par exemple, vous pouvez ajouter des items de menu ou des barres d'outils à la fenêtre du navigateur Mozilla.

- -

Nous utiliserons cette fonctionnalité pour ajouter une barre d'outils dans le fenêtre du navigateur Mozilla. Le client courrier de Mozilla utilise les overlays pour ajouter du contenu à la fenêtre du navigateur. Par exemple, si le client n'est pas installé, il n'y a pas de commande pour de nouveaux messages. Toutefois, si le client est installé, un overlay sera appliqué au menu pour ajouter une commande de nouveaux messages. Ci-dessous, nous ajouterons une barre d'outils de recherche de fichiers au navigateur. Cette fonctionnalité n'a aucune utilité, mais nous l'intégreront quand même.

- -

Mozilla vous permet d'ajouter une liste d'overlays dans le fichier 'contents.rdf' utilisé pour spécifier les paquetages chrome, les thèmes graphiques et les localisations. Dès que vous avez créé un overlay, vous pouvez l'ajouter au fichier 'contents.rdf'. Il vous suffit d'ajouter les informations pour chacune des fenêtres où vous voulez appliquer l'overlay.

- -
-

Notre exemple de recherche de fichiers

- -

Tout d'abord, créons un simple overlay. Il contiendra quelques champs de saisie pour la recherche d'un nom de fichier et d'un répertoire. Chargez le fichier 'foverlay.xul' et ajoutez-le au répertoire de notre exemple de recherche de fichiers à côté de 'findfile.xul'.

- -

Notre exemple foverlay.xul

- -

Exemple 1 : Source

- -
<?xml version="1.0" encoding="ISO-8859-1"?>
-
-<overlay
-    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<toolbox id="navigator-toolbox">
-  <toolbar id="findfile_toolbar">
-    <label control="findfile_filename" value="Recherche des fichiers nommés :"/>
-    <textbox id="findfile_filename"/>
-    <label control="findfile_dir" value="Répertoire :"/>
-    <textbox id="findfile_dir"/>
-    <button label="Parcourir..."/>
-  </toolbar>
-</toolbox>
-
-</overlay>
-
- -

Vous pouvez visualiser cet exemple en changeant l'élément overlay par window. La seule chose un peu spécifique est l'attribut id utilisé sur l'élément toolbox. Cette valeur ('navigator-toolbox') est la même que l'identifiant de la boîte d'outils de la fenêtre du navigateur ('navigator.xul'). Elle signifie que cet overlay sera appliqué à la boîte d'outils du navigateur et que son contenu sera ajouté comme une barre d'outils supplémentaire.

- -

Pour ajouter cet overlay au fichier manifest, vous devons ajouter deux ressources. Premièrement, nous en ajoutons une pour chaque fenêtre où l'overlay sera appliqué. Le code suivant doit être placé dans le fichier 'contents.rdf' juste avant la balise fermante de RDF.

- -
<RDF:Seq about="urn:mozilla:overlays">
-  <RDF:li resource="chrome://navigator/content/navigator.xul"/>
-</RDF:Seq>
-
- -

Cette déclaration précise l'ajout d'une fenêtre overlay au système de gestion des overlays (urn:mozilla:overlays). Vous pouvez ajouter des nœuds supplémentaires pour chaque fenêtre à modifier en ajoutant des balises li supplémentaires.

- -

Ensuite, nous ajoutons un nœud pour chaque overlay s'appliquant à la fenêtre. Dans ce cas, vous n'en avez qu'un, mais d'autres peuvent être appliqués. Ajoutez ces lignes à la suite des précédentes :

- -
<RDF:Seq about="chrome://navigator/content/navigator.xul">
-  <RDF:li>chrome://findfile/content/foverlay.xul</RDF:li>
-</RDF:Seq>
-
-
- -
Image:xultu_crosspov.png
- -

Mozilla lit cette information et construit une liste d'overlays appliqués à d'autres fenêtres. Il enregistre cette information dans un répertoire chrome/overlayinfo. Il n'est pas nécessaire que vous modifiez manuellement les fichiers de ce répertoire. Ils sont générés automatiquement et modifiés au premier lancement de Mozilla ou lorque de nouveaux paquetages sont installés. Toutefois, vous pouvez forcer la reconstruction de leurs données en effaçant ce répertoire et le fichier 'chrome.rdf.'

- -

Note complémentaire : vous pouvez utiliser cette même technique pour appliquer des feuilles de styles supplémentaires. L'exemple suivant vous montre comment :

- -
<RDF:Seq about="urn:mozilla:stylesheets">
-  <RDF:li resource="chrome://messenger/content/messenger.xul"/>
-</RDF:Seq>
-
-<RDF:Seq about="chrome://messenger/content/messenger.xul">
-  <RDF:li>chrome://blueswayedshoes/skin/myskinfile.css</RDF:li>
-</RDF:Seq>
-
- -
-

Nous verrons ensuite comment créer un installeur pour une application XUL.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/piles_et_paquets/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/piles_et_paquets/index.html deleted file mode 100644 index 2913d20ebb..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/piles_et_paquets/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Piles et Paquets -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Piles_et_Paquets -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Stacks_and_Decks ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Il se peut qu'il soit nécessaire d'afficher des éléments comme un empilement superposé de cartes. Les éléments stack et deck peuvent être utilisés à cet effet.

- -

Containers

- -

Chaque boîte XUL est un container qui peut contenir n'importe quel autre élément. Il y a un certain nombre d'éléments qui sont des types spécialisés de boîtes, tels que les barres d'outils et les onglets. La balise box crée la plus simple des boîtes sans propriétés spéciales. Toutefois, les types spécialisés de boîtes fonctionnent comme des boîtes normales dans le sens où elles orientent les éléments qu'elles contiennent, mais elles ont des fonctionnalités supplémentaires.

- -

En fait, beaucoup de composants peuvent contenir d'autres éléments. Nous avons déjà vu que les boutons peuvent contenir d'autres choses que leurs contenus par défaut. Une barre de défilement est juste un type spécial de boîte qui crée ses propres éléments si vous ne les fournissez pas. Ceux-ci contrôlent également le déplacement de l'ascenseur de la barre de défilement.

- -

Dans les prochaines sections, nous allons introduire quelques éléments qui sont prévus pour le contrôle d'autres éléments. Ce sont tous des types spéciaux de boîtes et permettent d'inclure tous les attributs des boîtes.

- -

Piles

- -

L'élément stack est une simple boîte. Il fonctionne comme toute autre boîte mais a la propriété spéciale que ces enfants sont tous disposés les uns au dessus des autres. Le premier enfant de la pile est dessiné sur le dessous, le second enfant est dessiné ensuite, suivi du troisième et ainsi de suite. De nombreux éléments peuvent être empilés sur une pile.

- -

La propriété orient n'a aucune signification particulière sur un élément stack, car les enfants sont empilés les uns sur les autres au lieu d'être côte à côte. Les dimensions d'une pile sont déterminées par celle de son plus grand enfant, mais vous pouvez utilisez les propriétés CSS width, height, min-width ou d'autres propriétés similaires à la fois sur la pile et ses enfants.

- -

L'élément stack pourrait être utilisé quand un indicateur d'état doit d'être ajouté au dessus d'un élément existant. Par exemple, un indicateur de progression pourrait être créé avec une barre et un libellé en surimpression.

- -

Image:xultu_stacks_progress.png

- -

Effet d'ombre avec des piles

- -

Une utilisation pratique de l'élément stack est de pouvoir simuler un certain nombre de propriétés CSS avec. Par exemple, vous pouvez créer un effet similaire à la propriété text-shadow comme ceci :

- -

Exemple 1: Source Voir

- -
<stack>
-   <description value="Ombré" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/>
-   <description value="Ombré" style="color: red; font-size: 15pt;"/>
-</stack>
-
- -

Image:xultu_stacks1.png

- -

Les deux éléments description créent chacun un texte avec une taille de 15 points. Le premier est toutefois décalé d'un pixel vers la droite et vers le bas grâce à l'ajout d'une marge de texte sur la gauche et sur le haut. Le résultat est le dessin répété du même texte 'Ombré' mais en léger décalage. Le second élément description est dessiné en rouge pour que l'effet soit encore plus visible.

- -

Cette méthode a des avantages sur l'emploi de text-shadow car vous pouvez complètement personnaliser les effets d'ombres de votre texte principal. Il peut avoir sa propre police de caractères, un soulignement ou une taille propre (vous pouvez même créer un texte ombré clignotant). C'est aussi utile car Mozilla ne supporte pas pour l'instant les textes ombrés en CSS. Un désavantage est que l'espace occupé par le texte ombré fait une pile plus grande. L'effet d'ombrage est très utile pour créer des boutons d'apparence désactivée :

- -

Exemple 2: Source Voir

- -
<stack style="background-color: #C0C0C0">
-   <description value="Désactivé" style="color: white; padding-left: 1px; padding-top: 1px;"/>
-   <description value="Désactivé" style="color: grey;"/>
-</stack>
-
- -

Cet arrangement de couleurs de texte et d'ombrage créent cet aspect désactivé que l'on retrouve sur certaines plates-formes.

- -
Notez que les évènements tels que les clics de la souris et les touches du clavier sont transmis à l'élément sur le haut de la pile qui est le dernier élément de la pile. Cela signifie qu'un bouton ne fonctionnera correctement que s'il est le dernier élément de la pile.
- -

Paquets

- -

Un élément deck place également ses enfants les uns au dessus des autres comme l'élément stack, toutefois les paquets n'affichent qu'un seul de leurs enfants à la fois. Ce comportement s'avère utile pour une interface d'assistant dans laquelle une série de panneaux similaires sont affichés en série. Au lieu de créer des fenêtres séparées et d'ajouter des boutons de navigation à chacune d'elles, vous n'avez qu'à créer une seule fenêtre et utiliser un paquet dans lequel le contenu changera.

- -

Comme pour les piles, les enfants directs d'un élément deck forment les pages du paquet. S'il y a trois enfants dans l'élément deck, le paquet aura trois enfants. La page affichée du paquet peut être changée en définissant un attribut selectdIndex sur l'élément deck. L'index est un nombre qui identifie quelle page à afficher. Les pages sont numérotées à partir de zéro. Ainsi, le premier enfant du paquet est la page '0', le second est la page '1', etc.

- -

Ce qui suit est un exemple de paquet :

- -

Exemple 3: Source Voir

- -
<deck selectedIndex="2">
-   <description value="Ceci est la première page "/>
-   <button label="Ceci est la seconde page "/>
-   <box>
-     <description value="Ceci est la troisième page "/>
-     <button label="Ceci est également la troisième page "/>
-   </box>
-</deck>
-
- -

Ici, il y a trois pages, celle affichée par défaut est la troisième. La troisième page est une boîte avec deux éléments qui y sont inclus. L'ensemble de cette boîte et de ses éléments forme une page. Le paquet sera aussi grand que le plus grand de ses enfants, qui dans le cas présent sera la troisième page.

- -

Vous pouvez changer de page en utilisant un script pour modifier l'attribut selectedIndex. Pour plus de renseignements là dessus, reportez vous aux sections sur les évènements et le DOM.

- -
-

La prochaine section décrit comment les piles peuvent être utilisées pour positionner les éléments.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/plus_de_caract\303\251ristiques_sur_les_boutons/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/plus_de_caract\303\251ristiques_sur_les_boutons/index.html" deleted file mode 100644 index b6b5318c43..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/plus_de_caract\303\251ristiques_sur_les_boutons/index.html" +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Plus de caractéristiques sur les boutons -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Plus_de_caractéristiques_sur_les_boutons -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/More_Button_Features ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Dans ce chapitre, nous allons voir quelques fonctionnalités supplémentaires des boutons.

- -

Ajouter une image

- -

Vous pouvez ajouter une image dans un bouton en spécifiant une adresse URL dans l'attribut image. L'image chargée à partir de l'URL, qui peut être relative ou absolue, sera affichée sur le bouton.

- -

Le bouton sur l'exemple ci-dessous aura en même temps un libellé et une image 'happy.png'. L'image apparaîtra à gauche du libellé. Vous pouvez changer cette position en utilisant deux autres attributs. Ils seront expliqués dans un moment.

- -

Exemple 1: Source Voir

- -
<button label="Aide" image="happy.png"/>
- -

Bouton avec une image CSS

- -

Une autre façon de procéder consiste à spécifier une image en utilisant la propriété de style CSS list-style-image appliquée au bouton. Cette méthode permet de changer l'apparence (dans ce cas, l'apparence de l'image) sans modifier le fichier XUL. Un exemple vous est montré ci-dessous.

- -

Exemple 2: Source Voir

- -
<button id="find-button"
-   label="Chercher" style="list-style-image: url('happy.png')"/>
-
- -

Dans ce cas, l'image 'happy.png' est affichée sur le bouton. L'attribut style fonctionne de façon similaire à son homologue HTML. En général, il peut être utilisé sur tous les éléments XUL. Notez qu'il serait plus judicieux de placer toutes les déclarations de styles dans une feuille de style séparée.

- -

Le positionnement des images

- -

Par défaut, l'image sur le bouton apparaît à gauche du libellé. Il y a deux attributs permettant de contrôler sa position.

- -

L'attribut dir contrôle la direction de l'image et du texte. En définissant cet attribut avec la valeur 'reverse', l'image sera placée à droite du texte. En utilisant la valeur 'normal', ou en omettant cet attribut, l'image sera placée à gauche du texte.

- -
NdT : Sur de vieilles versions de Mozilla, les valeurs à utiliser sont respectivement 'rtl' (right-to-left) et 'ltr' (left-to-right).
- -

L'attribut orient peut être utilisé pour placer l'image au-dessus ou en dessous du texte. Sa valeur par défaut est 'horizontal' et sert à placer l'image à gauche ou à droite. Vous pouvez aussi utiliser la valeur 'vertical' pour placer l'image au-dessus ou en dessous. Dans ce cas, l'attribut dir contrôle le placement vertical. Les mêmes valeurs sont utilisées, où 'normal' provoque le placement de l'image au-dessus du texte, et 'reverse' provoque le placement de l'image en dessous du texte.

- -

Exemple 3: Source Voir

- -
Image:xultu_advbtns1.png
- -
<button label="Gauche" image="happy.png"/>
-<button label="Droite" image="happy.png" dir="reverse"/>
-<button label="Dessus" image="happy.png" orient="vertical"/>
-<button label="Dessous" image="happy.png" orient="vertical" dir="reverse"/>
-
- -

Cet exemple vous montre les quatre types d'alignement des boutons. Notez que les deux attributs ne sont pas spécifiés lorsque leur valeur par défaut est utilisée.

- -

Des boutons avec des contenus spéciaux

- -

Les boutons peuvent contenir un balisage arbitraire, qui sera représenté dans le bouton. Vous ne l'utiliserez probablement pas très souvent, mais vous pourrez l'utiliser pour créer des éléments personnalisés.

- -

Cet exemple va créer un bouton dans lequel deux mots seront en magenta :

- -

Exemple 4: Source Voir

- -
<button>
-   <description value="Ceci est"/>
-   <description value="un étrange" style="color: purple;"/>
-   <description value="bouton"/>
-</button>
-
- -

N'importe quel élément XUL peut être placé à l'intérieur d'un bouton. Les éléments HTML seront ignorés, donc vous devez les intégrer à l'intérieur d'un élément description. Si vous spécifiez un attribut label sur un bouton, il supplantera n'importe quel autre contenu placé dans la définition du bouton.

- -

Bouton avec un menu surgissant

- -

Vous pouvez mettre un menupopup dans un bouton pour générer une liste déroulante lorsque le bouton est enfoncé, à l'instar de l'élément menulist. Toutefois, dans ce cas, vous devez indiquer l'attribut type avec la valeur 'menu'.

- -

Exemple 5: Source Voir

- -
Image:xultu_advbtns2.png
- -
<button type="menu" label="Périphérique">
-   <menupopup>
-     <menuitem label="Imprimante"/>
-     <menuitem label="Souris"/>
-     <menuitem label="Clavier"/>
-   </menupopup>
-</button>
-
- -

Dans cet exemple, l'utilisateur doit cliquer sur le bouton pour faire apparaître un menu contenant trois items de menu. Notez que la sélection d'un des items ne change pas le libellé du bouton, contrairement à l'élément menulist. Ce type de bouton est destiné à être utilisé comme un menu, avec des scripts associés à chaque item, exécutant une tâche précise. Nous en verrons plus sur les menus plus tard.

- -

Vous pouvez également affecter la valeur 'menu-button' à l'attribut type (NdT : Source Voir). Cette valeur crée aussi un bouton avec un menu, mais son apparence est différente. L'image ci-contre montre cette différence. Le bouton de gauche est un 'menu' et celui de droite est un 'menu-button'. Ils ont chacun une flèche pour indiquer la présence d'un menu déroulant. Pour le 'menu', l'utilisateur doit cliquer n'importe où sur le bouton pour ouvrir le menu. Pour le 'menu-button', l'utilisateur doit cliquer sur la flèche pour faire apparaître le menu.

- -
-

Dans la prochaine section, nous en apprendrons plus sur le positionnement des éléments XUL dans une fenêtre.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/plus_de_fonctionnalit\303\251s_de_menu/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/plus_de_fonctionnalit\303\251s_de_menu/index.html" deleted file mode 100644 index 908aab0ed9..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/plus_de_fonctionnalit\303\251s_de_menu/index.html" +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Plus de fonctionnalités de menu -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Plus_de_fonctionnalités_de_menu -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/More_Menu_Features ---- -

 

-
-

« PrécédentSuivant »

-
-

Dans cette section, nous allons voir comment créer des sous-menus et des coches de menus.

-

Créer des sous-menus

-

Vous pouvez créer des sous-menus à l'intérieur d'autres menus (menus imbriqués) en utilisant les éléments existants. Souvenez-vous que vous pouvez mettre n'importe quel élément dans un menupopup. Nous avons vu comment placer des menuitem et des menuseparator dans des menupopup. Toutefois, vous pouvez créer des sous-menus en plaçant simplement l'élément menu à l'intérieur de l'élément menupopup. Ce fonctionnement est possible du fait que l'élément menu est valide même quand il n'est pas placé directement dans une barre de menu.

-

L'exemple ci-dessous crée un simple sous-menu dans le menu Fichier :

-

Exemple 1: Source Voir

-
Image:xultu_menubar_3.png
-
<toolbox flex="1">
-  <menubar id="sample-menubar">
-    <menu id="file-menu" label="Fichier">
-      <menupopup id="file-popup">
-        <menu id="new-menu" label="Nouveau">
-          <menupopup id="new-popup">
-            <menuitem label="Fenêtre"/>
-            <menuitem label="Message"/>
-          </menupopup>
-        </menu>
-        <menuitem label="Ouvrir"/>
-        <menuitem label="Sauver"/>
-        <menuseparator/>
-        <menuitem label="Quitter"/>
-      </menupopup>
-    </menu>
-  </menubar>
-</toolbox>
-
-
-

Ajout d'un menu à notre exemple de recherche de fichiers

-

Ajoutons un menu à la boîte de dialogue de recherche de fichiers. Nous allons juste ajouter quelques commandes simples à un menu 'Fichier' et à un menu 'Édition'. Ces menus sont similaires à l'exemple ci-dessus.

-
<toolbox>
-
- <menubar id="findfiles-menubar">   <menu id="file-menu" label="Fichier" accesskey="f">     <menupopup id="file-popup">       <menuitem label="Ouvrir une Recherche..." accesskey="o"/>       <menuitem label="Enregistrer une Recherche..." accesskey="s"/>         <menuseparator/>       <menuitem label="Fermer" accesskey="c"/>     </menupopup>   </menu>   <menu id="edit-menu" label="Édition" accesskey="e">     <menupopup id="edit-popup">       <menuitem label="Couper" accesskey="t"/>       <menuitem label="Copier" accesskey="p"/>       <menuitem label="Copier" accesskey="l" disabled="true"/>     </menupopup>   </menu>  </menubar>
-
-<toolbar id="findfiles-toolbar>
-
-

Source Voir

-
Image:xultu_menubar1.png
-Ici, nous avons ajouté deux menus contenant des commandes variées. Notez que la barre de menus a été ajoutée dans un toolbox. Les points de suspension après 'Ouvrir une Recherche' et 'Enregistrer une Recherche' sont le moyen habituel pour indiquer à l'utilisateur qu'une boîte de dialogue va s'ouvrir quand il sélectionne une de ces commandes. Des touches de raccourcis ont été associées à chaque menu et à chaque item de menu. Vous verrez dans l'image que cette lettre a été soulignée dans le texte du menu. Vous verrez aussi que la commande 'Coller' a été désactivée. Nous supposons qu'il n'y a rien à coller.
-

Ajouter des coches aux menus

-

De nombreuses applications ont des items de menu avec des coches. Par exemple, une fonctionnalité qui est active a une coche placé à côté de la commande et une fonctionnalité qui est désactivée n'a pas de coche. Quand l'utilisateur sélectionne le menu, l'état de la coche est inversé. Vous pouvez aussi créer des boutons radio sur les items de menu.

-

Les coches sont créées de manière similaire aux éléments checkbox et radio. Elles impliquent l'utilisation de deux attributs : type pour indiquer le type de coche et name pour regrouper les commandes. L'exemple ci-dessous crée un menu avec un élément coché.

-

Exemple 2: Source Voir

-
<toolbox>
-  <menubar id="options-menubar">
-    <menu id="options_menu" label="Options">
-      <menupopup>
-        <menuitem id="backups" label="Faire des sauvegardes" type="checkbox"/>
-        <menuitem id="backups" label="Mail de l'administrateur" type="checkbox" checked="true"/>
-      </menupopup>
-    </menu>
-  </menubar>
-</toolbox>
-
-

L'attribut type ajouté est utilisé pour rendre l'élément de menu « cochable ». En mettant sa valeur à 'checkbox', l'élément de menu peut être coché et décoché par simple sélection.

- -

En plus des coches standard, vous pouvez créer des coches de style radio en mettant type à la valeur 'radio'. Une coche radio est utilisée quand vous voulez un groupe d'éléments de menu dont l'un seulement peut être coché à la fois. Un exemple peut être un menu de police de caractères où une seule police peut être sélectionnée. Quand un autre item est sélectionné, l'élément choisi précédemment est automatiquement décoché.

-

Pour grouper plusieurs éléments de menu ensemble, vous devez placer un attribut name sur chacun d'eux. Mettez la même chaîne de caractères comme valeur. L'exemple ci-dessous vous en donne l'illustration :

-

Exemple 3: Source Voir

-
<toolbox>
-  <menubar id="planets-menubar">
-    <menu id="planet-menu" label="Planète">
-      <menupopup>
-        <menuitem id="jupiter" label="Jupiter" type="radio" name="ringed"/>
-        <menuitem id="saturn" label="Saturne" type="radio" name="ringed" checked="true"/>
-        <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
-        <menuseparator/>
-        <menuitem id="earth" label="Terre" type="radio" name="inhabited" checked="true"/>
-        <menuitem id="moon" label="Lune" type="radio" name="inhabited"/>
-      </menupopup>
-    </menu>
-  </menubar>
-</toolbox>
-
-

Si vous essayez cet exemple, vous verrez que sur les trois premiers éléments, un seul peut être coché à la fois. Ils sont regroupés car ils ont le même nom. Le dernier élément de menu, 'Terre', ne fait pas partie du groupe car il a un nom différent. Pourtant, c'est aussi un bouton radio.

-

Bien sûr, les éléments de menu groupés doivent tous être dans le même menu. Ils n'ont pas à être placés les uns à côté des autres, mais les placer autrement n'aurait pas beaucoup de sens.

-
-

Par la suite, nous allons voir comment créer des menus surgissants.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/plus_sur_les_gestionnaires_d'\303\251v\303\250nements/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/plus_sur_les_gestionnaires_d'\303\251v\303\250nements/index.html" deleted file mode 100644 index 73d1b21264..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/plus_sur_les_gestionnaires_d'\303\251v\303\250nements/index.html" +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Plus sur les gestionnaires d'évènements -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Plus_sur_les_gestionnaires_d'évènements -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/More_Event_Handlers ---- -

 

-
-

« PrécédentSuivant »

-
-

Dans cette section, l'objet événement sera examiné et des événements additionnels seront décrits.

-

L'objet 'event'

-

Chaque gestionnaire d'événement dispose d'un unique argument qui contient un objet event. Dans la forme avec attributs des scrutateurs d'événements, cet événement est un argument implicite auquel un script peut se référer en utilisant le nom 'event'. Sous la forme addEventListener, le premier argument de la fonction scrutatrice sera un objet événement. L'objet 'event' dispose d'un certain nombre de propriétés qui peuvent être examinées lors de l'émission d'un événement. La liste complète est disponible dans les références objets.

-

Nous avons déjà vu la propriété target d'un événement dans la section précédente. Elle contient une référence de l'élément ayant déclenché l'événement. Une propriété similaire currentTarget contient l'élément sur lequel est placé un scrutateur d'événement. Dans l'exemple ci-dessous, currentTarget pointe toujours la boîte vbox, alors que la cible peut être un élément spécifique, le bouton ou la case à cocher qui a été activé.

-

Exemple 1: Source Voir

-
<vbox oncommand="alert(event.currentTarget.tagName);">
-   <button label="OK"/>
-   <checkbox label="Voir les images"/>
-</vbox>
-
-

Stopper la propagation d'événement

-

Une fois qu'un événement est traité, indépendamment de l'étape de la propagation où se trouve l'événement, vous pouvez empêcher qu'il soit transmis aux éléments suivants, c'est-à-dire de stopper les phases de captures ou de diffusion. En fonction de la manière dont vous avez attaché le scrutateur d'événement sur un élément, il existe plusieurs méthodes pour le faire.

-

Rappelez-vous que la phase de capture intervient avant la phase de diffusion, donc tous les scrutateurs de capture sont déclenchés avant les scrutateurs de diffusion. Si un événement capturé stoppe la propagation événementielle, aucun des scrutateurs de capture ou de diffusion suivants ne recevront de notification d'un quelconque événement. Pour interrompre la propagation événementielle, appelez la méthode stopPropagation de l'objet événement, comme dans l'exemple qui suit.

-

Exemple 2: Source Voir

-
<hbox id="outerbox">
-  <button id="okbutton" label="OK"/>
-</hbox>
-
-<script>
-function buttonPressed(event){
-  alert('Le bouton a été pressé !');
-}
-
-function boxPressed(event){
-  alert('La boîte a été pressée !');
-  event.stopPropagation();
-}
-
-var button = document.getElementById("okbutton");
-button.addEventListener('command',buttonPressed,true);
-
-var outerbox = document.getElementById("outerbox");
-outerbox.addEventListener('command',boxPressed,true);
-</script>
-
-

Ici, un scrutateur d'événement a été ajouté au bouton, et un autre à la boîte. La méthode stopPropagation est appelée dans le scrutateur de la boîte, donc le scrutateur du bouton ne sera jamais appelé. Si cet appel est enlevé, les deux scrutateurs seront appelés et les deux alertes apparaîtront.

-

Empêcher l'action par défaut

-

Si aucun gestionnaire d'événement n'a été enregistré pour un événement donné, alors après avoir accompli les phases de capture et de diffusion, l'élément traitera l'événement dans un mode par défaut. L'action par défaut dépendra de la nature de l'événement et du type d'élément. Par exemple, l'événement 'popupshowing' est envoyé par un menu surgissant juste avant son affichage. L'action par défaut est l'affichage du menu surgissant. Si l'action par défaut est bloquée, l'affichage ne se fera pas. L'action par défaut peut être empêchée avec la méthode preventDefault de l'objet événement, comme dans l'exemple ci-dessous.

-

Exemple 3: Source Voir

-
<button label="Types" type="menu">
-  <menupopup onpopupshowing="event.preventDefault();">
-    <menuitem label="Verre"/>
-    <menuitem label="Plastique"/>
-  </menupopup>
-</button>
-
-

Alternativement, pour des scrutateurs d'événement par attributs, vous pouvez simplement faire renvoyer la valeur 'false' par le code. Notez que l'empêchement de l'action par défaut ne revient pas à interrompre la propagation événementielle avec la méthode stopPropagation. Même si l'action par défaut a été bloquée, l'événement continue à se propager. De même, l'appel de la méthode stopPropagation ne bloquera pas l'action par défaut. Vous devrez appeler ces deux méthodes pour interrompre les deux actions.

-

Notez qu'une fois la propagation ou l'action par défaut bloquée, il n'est pas possible de les rendre actives de nouveau pour cet événement.

-

Les sous-sections ci-dessous listent quelques-uns des événements pouvant être utilisés. Une liste complète est fournie dans la référence des événements.

-

Événements de la souris

-

Il y a plusieurs événements pouvant être employés pour gérer les actions de la souris, listés dans le tableau suivant :

-
-
- 'click' 
-
- appelé lorsque la souris est appuyée puis relâchée sur un élément.
-
- 'dblclick' 
-
- appelé lorsque la souris est double-cliquée.
-
- 'mousedown' 
-
- appelé lorsqu'un bouton de la souris est pressé. Le gestionnaire d'événement est appelé aussitôt que le bouton de la souris est appuyé, avant même qu'il ne soit relâché.
-
- 'mouseup' 
-
- appelé lorsque la souris est relâchée sur un élément.
-
- 'mouseover' 
-
- appelé lorsque le pointeur de la souris survole un élément. Vous pourriez utiliser cet événement pour mettre en valeur l'élément, toutefois CSS fournit une façon automatique de le faire, il est donc inutile de le faire avec un événement. Vous pouvez toutefois l'utiliser pour afficher une aide dans la barre d'état.
-
- 'mousemove' 
-
- appelé lorsque le pointeur de la souris se déplace au-dessus d'un élément. L'événement étant appelé à chaque déplacement de la souris, vous devriez éviter de faire appel à ce gestionnaire pour des tâches trop longues.
-
- 'mouseout' 
-
- appelé lorsque le pointeur de la souris quitte un élément. Vous pourriez annuler la mise en valeur de l'élément ou effacer le texte de la barre d'état.
-
-

Il existe également un jeu d'événements relatifs au glisser, qui intervient lorsque l'utilisateur maintient le bouton de la souris enfoncé et déplace la souris. Ces événements seront décrits dans la section Glisser-Déposer.

-

Propriétés des événements des boutons de la souris

-

Lorsqu'un événement sur un bouton de la souris se produit, vous disposez d'un certain nombre de propriétés supplémentaires pour déterminer quels boutons ont été pressés et la position du pointeur de la souris. La propriété button de 'event' peut être utilisée pour déterminer quel bouton a été pressé, avec les valeurs possibles de '0' pour le bouton de gauche, '1' pour le bouton de droite, et '2' pour le bouton du milieu. Si vous avez configuré votre souris différemment, ces valeurs peuvent être différentes.

-

La propriété detail contient le nombre de fois que le bouton a été cliqué rapidement en séquence. Elle permet de tester des clics simples, doubles ou triples. Bien entendu, si vous ne souhaitez tester que les double-clics, vous pouvez plutôt utiliser l'événement 'dblclick'. L'événement 'click' sera lancé dès le premier clic, puis de nouveau pour le second clic, puis pour le troisième clic, tandis que l'événement 'dblclick' ne sera lancé que pour un double-clic.

-

Les propriétés button et detail ne s'appliquent qu'aux événements se rapportant aux boutons de la souris, et non aux déplacements de la souris. Pour l'événement 'mousemove', par exemple, l'ensemble de ces propriétés aura une valeur de '0'.

-

Propriétés des événements de position de la souris

-

Toutefois, tous les événements de la souris disposent des propriétés contenant les coordonnées de la position de la souris lors du déclenchement de l'événement. Il y a deux jeux de coordonnées. Le premier jeu définit les propriétés screenX et screenY mesurées depuis le coin supérieur gauche de l'écran. Le second jeu, clientX et clientY, est calculé à partir du coin supérieur gauche du document. Voici un exemple qui affiche les coordonnées courantes de la souris :

-

Exemple 4: Source Voir

-
<script>
-
-function updateMouseCoordinates(event){
-  var text = "X:" + event.clientX + " Y:" + event.clientY;
-  document.getElementById("xy").value = text;
-}
-</script>
-
-<label id="xy"/>
-<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/>
-
-

Dans cet exemple, les dimensions de la boîte ont été fixées explicitement pour que l'effet soit plus visible. Le gestionnaire d'événement récupère les propriétés clientX et clientY et les convertit en une chaîne (string). Cette chaîne est affectée à la propriété value du libellé. Notez que l'argument 'event' doit être passé à la fonction updateMouseCoordinates. Si vous déplacez rapidement la souris autour de la bordure, vous noterez que les coordonnées ne s'arrêtent généralement pas exactement sur '400'. Ceci s'explique car l'événement 'mousemove' se déclenche selon un intervalle dépendant de la vitesse de déplacement de la souris, et celle-ci s'est généralement déplacée au-delà de la bordure avant le lancement de l'événement suivant. Évidement, il ne serait pas judicieux d'envoyer un événement 'mousemove' sur chacun des pixels parcourus par la souris.

-

Coordonnées relatives à un élément

-

Souvent, ce sont les coordonnées relatives à l'élément qui a déclenché l'événement que vous voulez obtenir, pas celles relatives à la fenêtre entière. Pour y parvenir, il vous suffit de soustraire la position de l'élément à la position de l'événement, comme dans le code suivant.

-
var element = event.target;
-var elementX = event.clientX - element.boxObject.x;
-var elementY = event.clientY - element.boxObject.y;
-
-

Les éléments XUL ont un objet de boîte accessible en utilisant la propriété boxObject. Nous en apprendrons plus sur l'objet de boîte dans une section ultérieure, mais sachez qu'il contient des informations sur l'affichage de l'élément, incluant notamment ses coordonnées horizontales (x) et verticales (y). Dans cet exemple de code, ces coordonnées sont soustraites de celles de l'événement pour obtenir la position relative de l'élément XUL.

-

Événements de chargement

-

L'événement de chargement est envoyé au document (l'élément window) dès que le fichier XUL a fini son chargement et juste avant que son contenu ne soit affiché. Cet événement est couramment utilisé pour initialiser les champs et réaliser d'autres tâches qui doivent être exécutées avant que l'utilisateur ne dispose de la fenêtre. Vous devriez utiliser un événement de chargement pour faire ce genre de chose plutôt que d'ajouter un script de niveau supérieur extérieur à une fonction. Cette préconisation tient au fait que les éléments XUL peuvent ne pas être chargés ou ne pas être totalement initialisés, ce qui peut entraîner des dysfonctionnements. Pour utiliser un événement de chargement, placez l'attribut onload sur l'élément window. Appelez du code à l'intérieur du gestionnaire de chargement afin d'initialiser l'interface si nécessaire.

-

Il existe également un événement unload qui est appelé dès que la fenêtre est fermée ou, dans un contexte de navigation, lorsque la page bascule vers une autre URL. Vous pouvez utiliser cet événement, par exemple, pour sauvegarder des informations modifiées.

-
-

Nous verrons ensuite comment ajouter des raccourcis clavier.

-
-

« PrécédentSuivant »

-
diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/positionnement_dans_une_pile/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/positionnement_dans_une_pile/index.html deleted file mode 100644 index 5a940e4ff2..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/positionnement_dans_une_pile/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Positionnement dans une pile -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Positionnement_dans_une_pile -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Stack_Positioning ---- -

 

-
-

« PrécédentSuivant »

-
-

Cette section va décrire comment positionner des éléments dans une pile (stack).

-

Placement des enfants d'une pile

-

Normalement, les éléments enfants d'une pile s'étirent pour s'ajuster à la dimension de la pile. Toutefois, vous pouvez aussi placer ces enfants à des coordonnées précises. Par exemple, si la pile a deux boutons comme enfants, l'un d'eux peut être placé à 20 pixels du bord gauche et 50 pixels du bord supérieur. Le second bouton peut être placé à 100 pixels du bord gauche et 5 pixels du bord supérieur.

-

La position d'un élément enfant doit être précisée en plaçant deux attributs sur chaque élément. Pour le positionnement horizontal, utilisez l'attribut left et pour le positionnement vertical, utilisez l'attribut top. Si vous ne mettez pas ces attributs sur un enfant de la pile, celui-ci va s'étirer pour s'ajuster à la dimension de la pile.

-

Exemple 1: Source Voir

-
Image:xultu_ex_4_4_1.png
-
<stack>
-   <button label="Goblins" left="5" top="5"/>
-   <button label="Trolls" left="60" top="20"/>
-   <button label="Vampires" left="10" top="60"/>
-</stack>
-
-

La pile stack contient trois éléments, chacun d'eux est positionné aux coordonnées précisées par les attributs left et top. Ici, les trois éléments enfants sont des boutons, mais les éléments n'ont pas à être tous du même type. Il peut y avoir n'importe quels éléments, même des boîtes ou d'autres piles.

-

Les dimensions d'une pile sont déterminées par les positions de ses éléments enfants. La pile aura toujours des dimensions permettant à ses éléments enfants d'être visibles. Ainsi, si vous initialisez l'attribut left d'un enfant à la valeur de '400', la pile aura une largeur d'environ 400 pixels plus la largeur de cet élément enfant. Vous pouvez outrepasser cette taille avec des propriétés de style variées telles que width et max-width.

-

Vous pouvez utiliser un script pour ajuster les valeurs des attributs left et top et de ce fait, rendre les éléments mobiles. Les piles présentent l'avantage suivant : lorsqu'un élément positionné de façon absolue change sa position, la position des autres éléments n'est pas affectée. Si vous essayez de déplacer des éléments dans une boîte normale, les autres éléments vont bouger en réaction.

-

Il est également possible de placer des éléments enfants de telle manière qu'ils se superposent. Lorsque les éléments enfants se dessinent, ils sont affichés dans l'ordre où ils sont apparus dans la pile. De ce fait, le premier enfant d'une pile apparaît en arrière plan, suivi du second et ainsi de suite. Le dernier enfant apparaît au premier plan. Vous pouvez utiliser les fonctions DOM pour modifier l'ordre des éléments.

-

Lorsqu'ils répondent aux événements de la souris, les éléments au premier plan vont capturer les événements en premier. Cela signifie que si deux boutons se superposent, le bouton au premier plan va capturer le clic de la souris à l'endroit où il couvre l'autre bouton.

-
-

La prochaine section décrit les onglets, qui sont comme des paquets (deck) mais fournissent leur propre système d'utilisation.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/positionnement_des_\303\251l\303\251ments/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/positionnement_des_\303\251l\303\251ments/index.html" deleted file mode 100644 index f3cdf9ff84..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/positionnement_des_\303\251l\303\251ments/index.html" +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Positionnement des éléments -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Positionnement_des_éléments -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning ---- -
-

« PrécédentSuivant »

-
- -

Ici nous apprendrons à contrôler la position et la taille d'un élément.

- -

Positionnement des éléments de boîte

- -

Jusqu'ici, nous avons appris à placer des éléments horizontalement ou verticalement à l'intérieur d'une boîte. Nous aurons souvent besoin d'un meilleur contrôle sur la position et la taille des éléments à l'intérieur d'une boîte. Pour cela, nous devons d'abord comprendre le fonctionnement d'une boîte.

- -

La position d'un élément est déterminée par le style de mise en plage de son conteneur. Par exemple, la position d'un bouton dans une boîte horizontale est à droite du bouton précédent, s'il y en a plusieurs. La dimension d'un élément est déterminée par deux facteurs, la place que cet élément cherche à occuper et la taille que vous avez spécifiée. La taille qu'un élément cherche à avoir est déterminée par son contenu. Par exemple, la largeur d'un bouton est déterminée par la quantité de texte à l'intérieur du bouton.

- -

Un élément sera généralement juste assez large pour les besoins de l'affichage de son contenu, et pas plus large. Quelques éléments, tels que les boîtes de textes, utiliseront une taille par défaut. Une boîte aura la largeur nécessaire à l'affichage des éléments qu'elle contient. Une boîte horizontale contenant trois boutons aura la largeur de ces trois boutons, plus la marge.

- -

Dans l'image ci-dessous, les deux premiers boutons ont la taille suffisante à l'affichage de leur texte. Le troisième bouton est plus large parce que son contenu est plus grand. La largeur de la boîte contenant les boutons correspond au total des largeurs de ces boutons plus la marge entre eux. La hauteur des boutons est une taille adaptée à l'affichage du texte.

- -

Image:xultu_boxstyle1n.png

- -

Attributs de largeur et de hauteur

- -

Vous pourriez avoir besoin de mieux contrôler la taille d'un élément dans une fenêtre. Plusieurs dispositifs vous permettent de contrôler la dimension d'un élément. La méthode la plus rapide est d'ajouter simplement les attributs width et height sur un élément, un peu comme vous le feriez avec la balise HTML img. Voir l'exemple ci-dessous :

- -

Exemple 1: Source Voir

- -
<button label="OK" width="100" height="40"/>
- -

Cependant, il n'est pas recommandé de procéder ainsi. Cette méthode n'est pas vraiment portable et peut ne pas s'adapter à certains thèmes. Une meilleure méthode consiste à utiliser des propriétés de style, dont le fonctionnement est similaire aux feuilles de styles du HTML. Les propriétés CSS suivantes peuvent être utilisées.

- -
-
width 
-
Ceci indique la largeur d'un élément.
-
height 
-
Ceci indique la hauteur d'un élément.
-
- -

En plaçant l'une ou l'autre de ces deux propriétés, l'élément sera créé avec cette largeur et cette hauteur. Si vous spécifiez seulement une de ces deux propriétés, l'autre est calculée en fonction de ses propres besoins. La valeur de ces propriétés de style doit être définie par un nombre suivi d'une unité de mesure.

- -

Éléments flexibles

- -

Les dimensions des éléments non flexibles sont assez faciles à calculer. Elles correspondent simplement aux largeurs et de hauteurs spécifiées, ou si ces valeurs ne sont pas définies, elles sont ajustées par défaut au contenu. Pour les éléments flexibles, le calcul est légèrement plus savant.

- -

Les éléments flexibles sont ceux qui ont un attribut flex dont la valeur est supérieure à 0. Rappelez-vous que les éléments flexibles s'étirent et s'élargissent pour remplacer l'espace vide. Leurs tailles par défaut restent calculées de la même façon que les éléments non flexibles. Considérez l'exemple suivant :

- -

Exemple 2: Source Voir

- -
<window orient="horizontal"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<box>
-   <button label="Oui" flex="1"/>
-   <button label="Non"/>
-   <button label="Je ne connais pas vraiment cette manière ou l'autre"/>
-</box>
-
- -

La fenêtre apparaîtra initialement comme sur l'image précédente. Les deux premiers boutons seront dimensionnés à une largeur par défaut convenable et le troisième bouton sera plus large parce que son libellé est plus long. Le premier bouton est flexible et les trois éléments ont été placés à l'intérieur d'une boîte. La largeur de la boîte correspondra à la largeur totale des trois boutons (environs 515 pixels dans l'image).

- -

Si vous augmentez la largeur de la fenêtre, une vérification de la flexibilité des éléments est effectuée afin d'assurer le remplissage de l'espace libre à afficher. Le bouton est le seul élément flexible, mais il ne s'élargira pas plus, parce que la boîte contenant le bouton n'est pas flexible. Un élément inflexible ne change jamais de taille même lorsque de l'espace est disponible, c'est pourquoi le bouton ne s'agrandit pas non plus. Ainsi, le bouton ne pourra pas s'élargir.

- -

La solution est de rendre la boîte flexible également. De cette façon, quand vous élargirez la fenêtre, de l'espace supplémentaire sera disponible, et la boîte s'élargira alors pour remplir cet espace supplémentaire. Puisque la boîte est plus grande, une plus grande quantité d'espace libre est créée à l'intérieur de celle-ci, et le bouton flexible qu'elle contient s'élargira pour occuper l'espace disponible. Ce processus est répété pour toutes les boîtes présentes, autant de fois que nécessaire.

- -

Réglage des tailles minimales et maximales

- -

Vous pouvez autoriser un élément à être flexible tout en limitant ses dimensions de sorte à certaines valeurs. À l'inverse, vous pouvez définir des dimensions minimales. Ce comportement se définit par les quatre attributs suivants :

- -
-
minwidth 
-
Ceci indique la largeur minimale que l'élément peut posséder.
-
minheight 
-
Ceci indique la hauteur minimale que l'élément peut posséder.
-
maxwidth 
-
Ceci indique la largeur minimale que l'élément peut posséder.
-
maxheight 
-
Ceci indique la hauteur minimale que l'élément peut posséder.
-
- -

Les valeurs sont toujours mesurées en pixels. Vous pouvez également employer les propriétés CSS correspondantes, min-width, min-height, max-width et max-height.

- -

Ces propriétés ne sont utiles que pour des éléments flexibles. En plaçant une hauteur maximale, par exemple, un bouton extensible s'étirera seulement jusqu'à cette hauteur maximale. Vous pourrez toujours agrandir la fenêtre au-delà de ce point mais la taille du bouton cessera de s'accroître. La boîte dans laquelle le bouton se trouve continuera également à s'agrandir, à moins que vous ne définissiez aussi une hauteur maximale pour la boîte.

- -

Si deux boutons sont flexibles, ils se partageront normalement tous les deux la quantité d'espace disponible. Si un bouton a une largeur maximale, le second devrait continuer de s'agrandir en prenant tout l'espace restant.

- -

Si une boîte a une largeur ou une hauteur maximale, les enfants ne peuvent pas se développer au-delà de cette taille maximale. Si une boîte a une largeur ou une taille minimale, les enfants ne peuvent pas rétrécir au-delà de cette taille minimale.

- -

Exemples de réglage de largeurs et de hauteurs

- -
<button label="1" style="width: 100px;"/>
-<button label="2" style="width: 100em; height: 10px;"/>
-<button label="3" flex="1" style="min-width: 50px;"/>
-<button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/>
-<textbox flex="1" style="max-width: 10em;"/>
-<description style="max-width: 50px">Ceci est quelque peu ennuyant mais c'est un texte s'étalant simplement.</description>
-
- -
-
Exemple 1 
-
Le premier bouton sera affiché avec une largeur de 100 pixels (le px signifie pixels). Vous devez ajouter l'unité, ou la largeur définie sera ignorée.
-
Exemple 2 
-
Le deuxième bouton sera affiché avec une hauteur de dix pixels et une largeur de 100 em (un em correspond à la taille d'un caractère dans la police courante).
-
Exemple 3 
-
Le troisième bouton flexible s'agrandira en se basant sur la taille de la boîte qui le contient. Cependant, le bouton ne rétrécira jamais au-dessous de 50 pixels. D'autres composants flexibles tels que des éléments spacers absorberont l'espace restant, brisant ainsi le rapport de flexibilité.
-
Exemple 4 
-
Le quatrième bouton est flexible et n'aura jamais une hauteur inférieure à 2 ex (un ex correspond habituellement à la taille de la lettre x dans la police courante) ou une largeur supérieure à 100 pixels.
-
Exemple 5 
-
Le champ de saisie de texte est flexible mais sa largeur ne sera jamais supérieure à 10 em. Vous employerez souvent les ems quand vous préciserez les tailles des champs de saisie de texte en fonction du texte qu'ils contiennent. Cette unité est utile pour des champs de saisie de texte qui peuvent ainsi s'adapter à la police de caractères utilisée, même si la police est très grande.
-
Exemple 6 
-
L'élément description est limité à 50 pixels en largeur maximale. À l'intérieur, une césure du texte sur la ligne suivante interviendra après 50 pixels.
-
- -
-

Notre exemple de recherche de fichiers

- -

Ajoutons quelques-uns de ces styles à notre exemple de fenêtre de recherche de fichiers. Nous le ferons de telle manière que le champ de saisie de texte s'étire pour remplir entièrement la fenêtre.

- -

Source Voir

- -
<textbox id="find-text" '''flex="1" style="min-width: 15em;"'''/>
- -
Image:xultu_boxstyle1.png
- -

Ici, le champ de saisie de texte a été rendu flexible. De cette façon, il s'agrandira si l'utilisateur change la taille de la fenêtre. C'est utile si l'utilisateur veut saisir une longue chaîne de caractères. En outre, une largeur minimale de 15 em a été définie de sorte que le champ de saisie de texte affiche toujours au moins 15 caractères. Si l'utilisateur redimensionne la fenêtre en diminuant sa taille, le champ de saisie de texte ne se rétrécira pas en-dessous de 15 em. Il sera dessiné comme s'il se prolongait au-delà du bord de la fenêtre. Notez que sur l'image, le champ de saisie de texte s'est étiré de façon à occuper toute la largeur de la fenêtre.

-
- -

Empaquetage de boîte

- -

Nous avons une boîte avec deux éléments enfants, qui ne sont pas flexibles, mais dans la boîte qui est flexible. Par exemple :

- -

Exemple 3: Source Voir

- -
<box flex="1">
-   <button label="Heureux"/>
-   <button label="Triste"/>
-</box>
-
- -

Si vous redimensionnez la fenêtre, la boîte s'étirera pour s'ajuster à la taille de la fenêtre. Les boutons n'étant pas flexibles, leur largeur ne changera pas. Le résultat est qu'un espace supplémentaire apparaîtra sur le côté droit de la fenêtre, à l'intérieur de la boîte. Cependant, vous pouvez désirer que l'espace supplémentaire apparaisse plutôt sur le côté gauche alors que les boutons restent alignés sur la droite de la fenêtre.

- -

Vous pouvez réaliser cela en plaçant un élément spacer à l'intérieur de la boîte, mais cela peut rendre le code confus quand vous devez le faire plusieurs fois. Une meilleure solution est d'utiliser l'attribut pack sur la boîte. Cet attribut indique comment empaqueter les éléments enfants à l'intérieur d'une boîte. Pour des boîtes orientées horizontalement, il contrôle le positionnement horizontal des enfants. Pour les boîtes orientées verticalement, il contrôle le positionnement vertical des enfants. Vous pouvez utilisez les valeurs suivantes :

- -
-
start 
-
Ceci positionne les éléments sur le bord gauche pour les boîtes horizontales et sur le bord haut pour les boîtes verticales. C'est la valeur par défaut.
-
center 
-
Ceci centre les éléments enfants dans la boîte.
-
end 
-
Ceci positionne les éléments sur le bord droit pour les boîtes horizontales et sur le bord bas pour les boîtes verticales.
-
- -

L'attribut pack s'applique à la boîte contenant les éléments à empaqueter et non aux éléments eux-mêmes.

- -

Nous pouvons modifier l'exemple précédent pour centrer les éléments de cette façon :

- -

Exemple 4: Source Voir

- -
<box flex="1" pack="center">
-   <button label="Heureux"/>
-   <button label="Triste"/>
-</box>
-
- -

Maintenant, lorsque la fenêtre est redimensionnée, les boutons sont centrés horizontalement. Comparez ce comportement à celui de l'exemple précédent.

- -

Alignement de boîte

- -

Si vous redimensionnez horizontalement la fenêtre dans l'exemple « Heureux-Triste », la boîte devrait s'élargir. Si vous redimensionnez verticalement la fenêtre, vous noterez que les boutons sont étirés. Ceci est dû à la flexibilité qui est affectée par défaut à l'autre direction.

- -

Vous pouvez contrôler ce comportement avec l'attribut align. Pour les boîtes horizontales, il contrôle le positionnement vertical des enfants. Pour les boîtes verticales, il contrôle le positionnement horizontal des enfants. Les valeurs possibles sont similaires à celles de l'attibut pack.

- -
-
start 
-
Ceci aligne les éléments le long du bord haut pour les boîtes horizontales et le long du bord gauche pour les boîtes verticales.
-
center 
-
Ceci centre les éléments enfants dans la boîte.
-
end 
-
Ceci aligne les éléments le long du bord bas pour les boîtes horizontales et le long du bord droit pour les boîtes verticales.
-
baseline 
-
Ceci aligne les éléments et le texte. Il est utilisable seulement avec des boîtes horizontales.
-
stretch 
-
Cette valeur, affectée par défaut, provoque l'agrandissement des éléments proportionnellement à la taille de la boîte, un peu à la façon d'un élément flexible, mais dans la direction opposée.
-
- -

Comme avec l'attribut pack, l'attribut align s'applique à la boîte contenant les éléments à aligner et non aux éléments eux-mêmes.

- -

Dans l'exemple ci-dessous, la première boîte aura ses enfants étirés, car c'est le comportement par défaut. La seconde boîte a un attribut align, c'est pourquoi ses enfants sont placés au centre.

- -

Exemple 5: Source Voir

- -
<?xml version="1.0"?>
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
-<window id="yesno" title="Question" orient="horizontal"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-  <hbox>
-    <button label="Oui"/>
-    <button label="Non"/>
-  </hbox>
-  <hbox align="center">
-    <button label="Peut-être"/>
-    <button label="Il se peut"/>
-  </hbox>
-
-</window>
-
- -
Image:xultu_boxstyle2-b.png
- -

Vous pouvez aussi utiliser les propriétés de style -moz-box-pack et -moz-box-align à la place des attributs indiqués.

- -
Vous pouvez trouver l'exemple d'alignement de boîte pratique pour tester les différentes propriétés de boîte (NdT : vous pouvez aussi voir une autre démonstration du même genre sur xulfr).
- -

Coupure du texte et des boutons

- -

Vous pouvez potentiellement créer un élément bouton qui contient un libellé plus large que la largeur maximale du bouton. Bien sûr, une solution serait d'augmenter la taille du bouton. Cependant, les boutons (et les autres éléments avec un libellé) ont un attribut spécial appelé crop qui vous permet d'indiquer de quelle manière le texte doit être traité s'il est trop grand.

- -

Si le texte est coupé, un point de suspension (…) apparaît sur le bouton où le texte a été enlevé. Quatre valeurs sont valides :

- -
-
left 
-
Le texte est coupé sur son côté gauche.
-
right 
-
Le texte est coupé sur son côté droit.
-
center 
-
Le texte est coupé au milieu.
-
none 
-
Le texte n'est pas coupé. C'est la valeur par défaut.
-
- -

Cet attribut est vraiment utile quand une boîte de dialogue a été conçue pour être utilisable à n'importe quelle taille. L'attribut crop peut aussi être utilisé avec les autres éléments qui utilisent un attribut label en tant que libellé. L'exemple suivant montre l'utilisation de cet attribut :

- -

Exemple 6: Source Voir

- -
Image:xultu_boxstyle2.png
- -
<button label="Pressez moi, s'il vous plait !" crop="right" flex="1"/>
- -

Notez comment le texte sur le bouton voit son côté droit coupé si la fenêtre est réduite.

- -
-

Dans la prochaine section, nous ferons un petit résumé et décrirons quelques détails supplémentaires concernant le modèle de boîte.

- -
-

« PrécédentSuivant »

-
diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/raccourcis_clavier/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/raccourcis_clavier/index.html deleted file mode 100644 index 861c0450d0..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/raccourcis_clavier/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: Raccourcis clavier -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Raccourcis_clavier -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Keyboard_Shortcuts ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Pour réagir aux touches pressées, vous pouvez utiliser des gestionnaires d'événements clavier, mais il serait fastidieux de le faire pour chaque bouton ou chaque item de menu.

- -

Création d'un raccourci clavier

- -

XUL fournit des méthodes par lesquelles vous pouvez définir des raccourcis clavier. Nous avons déjà vu dans la section sur les menus que nous pouvions définir un attribut appelé accesskey qui spécifie la touche à presser par l'utilisateur pour activer le menu ou l'item de menu. Dans l'exemple ci-dessous, le menu Fichier peut être sélectionné en pressant Alt et F (ou une autre combinaison de touches spécifique à une plate-forme). Une fois le menu Fichier ouvert, l'item de menu Fermer peut être sélectionné en pressant F.

- -

Exemple 1: Source Voir

- -
<menubar id="sample-menubar">
-   <menu id="file-menu" label="Fichier" accesskey="f">
-     <menupopup id="file-popup">
-       <menuitem id="close-command" label="Fermer" accesskey="f"/>
-     </menupopup>
-   </menu>
-</menubar>
-
- -

Vous pouvez aussi utiliser l'attribut accesskey sur les boutons. Dans ce cas, quand la touche est pressée, le bouton est sélectionné.

- -

Cependant, vous pourriez vouloir mettre en place des raccourcis clavier plus généraux, comme par exemple, la combinaison Ctrl+C pour copier du texte dans le presse-papiers. Bien que de tels raccourcis puissent ne pas être toujours valides, ils fonctionneront habituellement dès qu'une fenêtre est ouverte. Normalement, un raccourci sera autorisé à n'importe quel moment et vous pourrez vérifier via un script s'il doit faire quelque chose. Par exemple, copier du texte dans le presse-papiers ne devrait fonctionner seulement quand du texte est sélectionné.

- -

Élément key

- -

XUL fournit un élément, key, qui vous permet de définir un raccourci clavier pour une fenêtre. Il comprend des attributs pour définir la touche qui doit être pressée et quels modificateurs de touches (tels que shift pour Maj ou control pour Ctrl) doivent l'accompagner. Un exemple :

- -
<keyset>
-   <key id="sample-key" modifiers="shift" key="R"/>
-</keyset>
-
- -

Cet exemple définit un raccourci clavier qui s'active lorsque l'utilisateur presse les touches Maj et R. L'attribut key (notez qu'il a le même nom que l'élément lui-même) est utilisé pour indiquer quelle touche doit être pressée, dans ce cas R. Vous pouvez ajouter n'importe quels caractères à cet attribut selon les combinaisons de touches devant être pressées. Les modificateurs de touches devant être pressés sont indiqués par l'attribut modifiers. Il s'agit d'une liste de modificateurs séparée par des espaces, et ils sont décrits ci-dessous :

- -
-
'alt' 
-
L'utilisateur doit presser la touche Alt. Sous Macintosh, il s'agit de la touche Option.
-
'control' 
-
L'utilisateur doit presser la touche Ctrl
-
'meta' 
-
L'utilisateur doit presser la touche Meta. Il s'agit de la touche Command sous Macintosh.
-
'shift' 
-
L'utilisateur doit presser la touche Shift (Maj)
-
'accel' 
-
L'utilisateur doit presser la touche spéciale d'accélérateur. L'utilisateur doit presser la touche de raccourci spécifique à sa plate-forme. Il s'agit de la valeur que vous utiliserez habituellement.
-
- -

Votre clavier n'a pas forcément toutes ces touches, dans ce cas, elles seront actives par d'autres touches de modification que vous possédez.

- -

L'élément key doit être placé à l'intérieur d'un élément keyset. Cet élément est destiné à contenir un ensemble d'éléments key servant à grouper toutes les définitions de raccourcis dans un seul emplacement du fichier. Tout élément key à l'extérieur d'un élément keyset ne sera pas pris en compte.

- -

Généralement, chaque plate-forme utilise une touche différente pour les raccourcis clavier. Par exemple, Windows utilise la touche Ctrl tandis que Macintosh utilise la touche Command. Il serait peu commode de définir un élément key propre à chaque plate-forme. Heureusement, il y a une solution, le modificateur de touches 'accel' se réfère à la touche de raccourci spécifique à la plate-forme. Il fonctionne exactement comme les autres modificateurs de touches excepté qu'il change selon la plate-forme.

- -

Voici quelques exemples supplémentaires :

- -
<keyset>
-   <key id="copy-key" modifiers="control" key="C"/>
-   <key id="explore-key" modifiers="control alt" key="E"/>
-   <key id="paste-key" modifiers="accel" key="V"/>
-</keyset>
-
- -

Attribut keycode

- -

L'attribut key est utilisé pour spécifier quelles touches doivent être pressées. Toutefois, il y aura aussi des cas où vous voudrez spécifier des touches qui ne peuvent être décrites par un simple caractère (telle que la touche Enter ou les touches de fonctions). L'attribut key peut seulement être utilisé pour des caractères imprimables. Un autre attribut, keycode peut être utilisé pour les caractères non imprimables.

- -

La valeur de l'attribut keycode doit être un code spécial qui représente la touche souhaitée. Une liste de touches est disponible ci-dessous. Toutes les touches ne sont pas disponibles sur toutes les plate-formes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VK_CANCELVK_BACKVK_TABVK_CLEAR
VK_RETURNVK_ENTERVK_SHIFTVK_CONTROL
VK_ALTVK_PAUSEVK_CAPS_LOCKVK_ESCAPE
VK_SPACEVK_PAGE_UPVK_PAGE_DOWNVK_END
VK_HOMEVK_LEFTVK_UPVK_RIGHT
VK_DOWNVK_PRINTSCREENVK_INSERTVK_DELETE
VK_0VK_1VK_2VK_3
VK_4VK_5VK_6VK_7
VK_8VK_9VK_SEMICOLONVK_EQUALS
VK_AVK_BVK_CVK_D
VK_EVK_FVK_GVK_H
VK_IVK_JVK_KVK_L
VK_MVK_NVK_OVK_P
VK_QVK_RVK_SVK_T
VK_UVK_VVK_WVK_X
VK_YVK_ZVK_NUMPAD0VK_NUMPAD1
VK_NUMPAD2VK_NUMPAD3VK_NUMPAD4VK_NUMPAD5
VK_NUMPAD6VK_NUMPAD7VK_NUMPAD8VK_NUMPAD9
VK_MULTIPLYVK_ADDVK_SEPARATORVK_SUBTRACT
VK_DECIMALVK_DIVIDEVK_F1VK_F2
VK_F3VK_F4VK_F5VK_F6
VK_F7VK_F8VK_F9VK_F10
VK_F11VK_F12VK_F13VK_F14
VK_F15VK_F16VK_F17VK_F18
VK_F19VK_F20VK_F21VK_F22
VK_F23VK_F24VK_NUM_LOCKVK_SCROLL_LOCK
VK_COMMAVK_PERIODVK_SLASHVK_BACK_QUOTE
VK_OPEN_BRACKETVK_BACK_SLASHVK_CLOSE_BRACKETVK_QUOTE
VK_HELP   
- -

Par exemple, pour créer un raccourci qui est activé quand l'utilisateur presse les touches Alt et F5, faites ainsi :

- -
<keyset>
-   <key id="test-key" modifiers="alt" keycode="VK_F5"/>
-</keyset>
-
- -

L'exemple ci-dessous montre quelques raccourcis clavier supplémentaires :

- -
<keyset>
-   <key id="copy-key" modifiers="accel" key="C"/>
-   <key id="find-key" keycode="VK_F3"/>
-   <key id="switch-key" modifiers="control alt" key="1"/>
-</keyset>
-
- -

Le premier raccourci est déclenché lorsque l'utilisateur presse la touche de raccourci spécifique à sa plate-forme et C. Le deuxième est invoqué quand l'utilisateur presse F3. Le troisième se déclenche sur une pression des touches Ctrl, Alt et 1. Si vous voulez distinguer les touches de la partie centrale du clavier et les touches du pavé numérique, utilisez les touches VK_NUMPAD (telles que 'VK_NUMPAD1').

- -
Consultez la page anglaise Mozilla Keyboard Planning FAQ and Cross Reference pour de plus amples informations sur les raccourcis clavier dans les applications.
- -

Utilisation des raccourcis clavier

- -

Maintenant que nous savons comment définir les raccourcis clavier, nous allons découvrir comment les utiliser. Il y a deux manières. La première est la plus simple et requiert seulement que vous utilisiez le gestionnaire d'événements clavier sur l'élément key. Quand l'utilisateur presse la (ou les) touche(s), le script est invoqué. Voici un exemple :

- -
<keyset>
-   <key id="copy-key" modifiers="accel" key="C" oncommand="DoCopy();"/>
-</keyset>
-
- -

La fonction DoCopy sera appelée quand l'utilisateur pressera les touches spécifiées par l'élément key qui sont, dans cet exemple, les touches pour copier vers le presse-papiers (telles que Ctrl+C). Ceci fonctionnera tant que la fenêtre sera ouverte. La fonction DoCopy devrait vérifier si du texte est sélectionné et le copier dans le presse-papiers si tel est le cas. Notez que les champs de saisie intègrent déjà des raccourcis pour utiliser le presse-papiers, de sorte que vous n'avez pas besoin de les implémenter vous-même.

- -

Assignation d'un raccourci clavier à un menu

- -

Si vous assignez un raccourci clavier à une commande qui existe déjà dans un menu, vous pouvez associer directement l'élément key avec la commande du menu. Pour cela, ajoutez un attribut key à l'élément menuitem. Donnez lui comme valeur l'id du raccourci que vous voulez lui associer. L'exemple ci-dessous explique cette méthode.

- -

Exemple 2: Source Voir

- -
Image:xultu_keyshort1.jpg
- -
<keyset>
-  <key id="paste-key" modifiers="accel" key="V"
-          oncommand="alert('invoque Coller')"/>
-</keyset>
-
-<menubar id="sample-menubar">
-  <menu id="edit-menu" label="Editer" accesskey="e">
-    <menupopup id="edit-popup">
-      <menuitem id="paste-command"
-         accesskey="c" key="paste-key"
-         label="Coller" oncommand="alert('invoque Coller')"/>
-    </menupopup>
-  </menu>
-</menubar>
-
- -

L'attribut key de l'item du menu, qui est ici 'paste-key', est égal à l'id du raccourci défini. Vous pouvez utilisez cette méthode pour définir des raccourcis supplémentaires à plusieurs items de menu.

- -

Vous noterez également dans cette image que du texte a été placé à côté de la commande 'Coller' du menu pour indiquer le raccourci Ctrl+V pouvant être pressé pour invoquer la commande du menu. Cette indication est ajoutée automatiquement pour vous sur la base des touches de modification de l'élément key. Les raccourcis associés aux menus fonctionneront même si le menu n'est pas ouvert.

- -

Une fonctionnalité supplémentaire des définitions de raccourcis est que vous pouvez les désactivez facilement. Il vous suffit d'ajouter un attribut disabled à l'élément key et lui affecter la valeur 'true'. Cet attribut désactive le raccourci clavier de façon à ce qu'il ne puisse pas être invoqué. Il est facile de modifier l'attribut disabled par le biais d'un script.

- -
-

Notre exemple de recherche de fichiers

- -

Ajoutons des raccourcis clavier à la boîte de dialogue de recherche de fichiers. Nous en ajouterons quatre, un pour chacune des commandes Couper, Copier et Coller, et aussi un pour la commande Fermer quand l'utilisateur presse Esc

- -

Source Voir

- -
<keyset>   <key id="cut_cmd" modifiers="accel" key="X"/>   <key id="copy_cmd" modifiers="accel" key="C"/>   <key id="paste_cmd" modifiers="accel" key="V"/>   <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/> </keyset>
-
-<vbox flex="1">
- <toolbox>
-  <menubar id="findfiles-menubar">
-   <menu id="file-menu" label="Fichier" accesskey="f">
-     <menupopup id="file-popup">
-       <menuitem label="Ouvrir une recherche..." accesskey="o"/>
-       <menuitem label="Sauver une recherche..." accesskey="s"/>
-       <menuseparator/>
-       <menuitem label="Fermer" accesskey="c" key="close_cmd"
-         oncommand="window.close();"/>
-     </menupopup>
-   </menu>
-   <menu id="edit-menu" label="Editer" accesskey="e">
-     <menupopup id="edit-popup">
-       <menuitem label="Couper" accesskey="e" key="cut_cmd"/>
-       <menuitem label="Copier" accesskey="p" key="copy_cmd"/>
-       <menuitem label="Coller" accesskey="l" key="paste_cmd" disabled="true"/>
-     </menupopup>
-   </menu>
-
-Maintenant nous pouvons utiliser ces raccourcis pour activer les commandes. Évidemment les commandes du presse-papiers restent inactives puisque nous n'avons pas encore écrit leurs scripts.
- -

Événements Clavier

- -

Il y a trois types d'événements clavier qui peuvent être utilisés si les dispositifs principaux décrits ci-dessus ne sont pas appropriés.

- -
-
keypress 
-
Appelé quand une touche est pressée puis relachée avec l'élement qui a le focus (élément actif). Vous pouvez l'utiliser pour controller les caractères saisis dans un champ.
-
keydown 
-
Appelé quand une touche est pressée avec l'élément qui a le focus (élément actif). Remarquez que l'évènement sera appelé aussitôt la touche enfoncée, même si elle n'a pas été encore relachée.
-
keyup 
-
Appelé quand une touche est relachée avec l'élément qui a le focus (élément actif).
-
- -

Les évènements clavier sont envoyés seulement à l'élément qui a le focus. Typiquement, ils incluent les champs de saisie, les boutons, les cases à cocher, et d'autres encore. Si aucun des éléments n'est actif, l'événement sera dirigé vers le document XUL lui-même. Dans ce cas, vous pouvez associer un scrutateur d'événements à la balise window. Cependant, si vous voulez réagir aux événements de manière globale, vous devriez utiliser un raccourci clavier comme décrit plus haut.

- -

L'objet event a deux propriétés qui contiennent la touche pressée. La propriété keyCode contient le code de la touche qui peut être comparé à une des constantes de la table des codes de touche vue plus tôt dans cette section. La propriété charCode est utilisée pour les caractères imprimables et contient le caractère de la touche pressée.

- -
-

Dans la prochaine section, nous allons découvrir comment gérer le focus et la sélection.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/r\303\250gles_avan\303\247\303\251es/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/r\303\250gles_avan\303\247\303\251es/index.html" deleted file mode 100644 index 8916f1e816..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/r\303\250gles_avan\303\247\303\251es/index.html" +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Règles avançées -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Règles_avançées -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Advanced_Rules ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Cette section décrit la syntaxe des règles les plus complexes.

- -

La syntaxe des règles complètes

- -

La syntaxe des règles décrites jusqu'ici est utile pour certaines sources de données, mais parfois les données doivent être affichées de manière plus sophistiquée. La syntaxe de règle simple n'est en fait qu'un raccourci pour la syntaxe de règle complète qui est décrite ci-dessous. Comme pour la syntaxe de règle simple, la règle complète est placée entre des balises rule.

- -

Une syntaxe de règle complète contient trois balises filles : une balise conditions , une balise bindings et une balise action. La balise bindings n'est pas toujours nécessaire.

- -

L'élément conditions spécifie le critère qui doit correspondre à une ressource donnée. Vous pouvez spécifier plusieurs conditions qui doivent toutes correspondre à la ressource donnée. En utilisant la syntaxe de règle simple, les conditions sont directement placées dans l'élément rule.

- -

Si les conditions correspondent à une ressource donnée, le contenu placé entre les balises action est généré. Dans la syntaxe de règle simple, le contenu est directement placé dans la balise rule.

- -

Conditions d'une règle

- -

Lorsque qu'un arbre, un menu ou tout autre élément avec une source de données génère son contenu, le générateur de modèle cherche en premier lieu la ressource marquée par l'attribut ref. L'opération est ensuite répétée pour l'ensemble des ressources filles. Le générateur compare chaque ressource aux conditions. Si celles-ci sont vérifiées, le contenu de l'élément action est généré pour ces ressources. Si elles ne sont pas vérifiées, rien n'est généré.

- -

Élément content

- -

L'élément conditions contient trois sous-éléments. Le premier est l'élément content qui ne doit être présent qu'une seule fois. Il sert de marqueur lorsque le générateur de modèle parcourt les ressources. Il indique le nom de la variable dans laquelle est placée une référence à la ressource racine pendant que les conditions sont analysées. La ressource racine est indiquée par l'attribut ref dans l'élément contenant le modèle.

- -

La syntaxe d'un élément content est la suivante :

- -
<content uri="?var"/>
- -

La point d'interrogation indique que le texte qui suit est une variable. Vous pouvez alors utiliser la variable var dans le reste des conditions. Bien entendu, vous pouvez nommer la variable comme vous le voulez.

- -

Élément member

- -

L'élément suivant est l'élément member qui est utilisé pour parcourir un ensemble de ressources filles. En termes RDF, il est comparable à Seq, Bag ou Alt. Imaginons que vous ayez une liste de villes, comme dans l'extrait RDF/XML suivant :

- -
<RDF:Seq about="http://www.xulplanet.com/rdf/weather/cities">
-  <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Paris"/>
-  <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Manchester"/>
-  <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Melbourne"/>
-  <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Kiev"/>
-</RDF:Seq>
-
-<RDF:Description about="http://www.xulplanet.com/rdf/weather/city/Paris">
-  <cityset:name>Paris</cityset:name>
-</RDF:Description>
-
-.
-.
-.
-
- -

Vous voulez afficher une ligne dans une arborescence pour chaque ville. Pour accomplir cela, utilisez l'élément member comme ceci :

- -
<tree id="citiesTree" datasources="weather.rdf"
-      ref="http://www.xulplanet.com/rdf/weather/cities">
-  <template>
-    <rule>
-      <conditions>
-        <content uri="?list"/>
-        <member container="?list" child="?city"/>
-      </conditions>
-    <rule>
-  <template>
-</tree>
-
- -

Le générateur de modèle commence par récupérer la valeur de l'attribut ref qui dans ce cas est 'http://www.xulplanet.com/rdf/weather/cities'. Cette ressource va être mise dans la variable list comme il est indiqué par la balise content. Vous obtiendrez les ressources associées à la ressource racine en utilisant la variable list.

- -

Le générateur de modèle s'intéresse ensuite à l'élément member. Le générateur est contraint de parcourir les fils d'un élément. Le parent est indiqué par l'attribut container et les fils par l'attribut child. Dans l'exemple ci-dessus, la valeur de l'attribut container est la variable list. Ainsi le parent sera la valeur de la variable list qui a la valeur de la ressource racine 'http://www.xulplanet.com/rdf/weather/cities'. L'effet induit va être de parcourir la liste de tous les fils de 'http://www.xulplanet.com/rdf/weather/cities'.

- -

Si vous regardez en détail le RDF ci-dessus, la ressource 'http://www.xulplanet.com/rdf/weather/cities' a quatre filles, une pour chaque ville. Le générateur de modèle parcourt chacune d'elle, comparant la fille avec la valeur de l'attribut child. Dans le cas présent, celui-ci contient la valeur 'city'. Donc le générateur va donner à la variable city la valeur des ressources filles au fur et à mesure.

- -

Comme il n'y a pas d'autres conditions, la condition correspond à chacune des quatre ressources et le générateur va créer du contenu pour chacune d'entre elles. Bien sûr, l'exemple ci-dessus n'a aucun contenu. On l'ajoutera par la suite.

- -

Élément triple

- -

L'élément suivant est l'élément triple. Il est utilisé pour vérifier l'existence d'un triplet (ou assertion) dans la source de données du RDF. Un triplet est comme la propriété d'une ressource. Par exemple, un triplet existe entre un marque-page et son URL associée. Il peut-être exprimé ainsi :

- -
Un marque-page vers mozilla.org -> URL -> www.mozilla.org
- -

Cela signifie qu'il existe un triplet entre le marque-page 'Un marque-page vers mozilla.org' et 'www.mozilla.org' par la propriété URL. La première partie est appelée le sujet, la seconde, le prédicat, et la dernière, l'objet. Exprimé avec l'élément triple, ce mécanisme est décrit comme ceci :

- -
<triple subject="A Bookmark to mozilla.org"
-           predicate="URL"
-           object="www.mozilla.org"/>
-
- -

Ce code a été simplifié par rapport au code réel. Le prédicat devrait normalement inclure les espaces de nommage, et le sujet devrait être l'identifiant ressource du marque-page, et non pas le titre du marque-page comme ici. En fait, le titre du marque-page devrait être un autre triplet dans la source de données, qui utiliserait le prédicat 'nom'.

- -

Vous pouvez remplacer le sujet et l'objet dans l'élément triple par des références aux variables, auquel cas les valeurs seront substituées aux variables. Si aucune valeur n'est définie pour une variable, le générateur de modèle va attribuer à la variable la valeur de la source de données.

- -

Disons, par exemple, que l'on veuille ajouter une prédiction météo à la source de données des villes. Les conditions suivantes peuvent être utilisées :

- -
<conditions>
-  <content uri="?list"/>
-  <member container="?list" child="?city"/>
-  <triple subject="?city"
-             predicate="http://www.xulplanet.com/rdf/weather#prediction"
-             object="?pred"/>
-</conditions>
-
- -

Le générateur de modèle va parcourir chaque ville comme précédemment. Lorsqu'il arrivera au triplet, il va s'intéresser aux assertions de la source de données RDF pour une prédiction météo. La prédiction météo est attribuée à la variable 'pred'. Le générateur va répéter cette opération pour chacune des quatre villes. Une comparaison a lieu et le générateur va créer du contenu pour chaque ville qui a une prédiction météo associée. Si la ville n'a pas de ressource de prédiction, la condition ne correspond pas et aucun contenu ne sera créé pour cette ville. Remarquez que vous n'avez pas besoin de mettre 'rdf:' au début du prédicat, car il est sous-entendu.

- -

On peut aussi remplacer l'attribut object par une valeur statique. par exemple :

- -
<conditions>
-  <content uri="?city"/>
-  <triple subject="?city"
-             predicate="http://www.xulplanet.com/rdf/weather#prediction"
-             object="Nuageux"/>
-</conditions>
-
- -

Cet exemple est similaire mais nous spécifions que nous voulons une comparaison qui s'effectue sur « 'Nuageux' ». Le résultat obtenu est que la condition ne sera remplie que pour les villes dont la prédiction météo est « 'Nuageux' ».

- -

Nous pouvons ajouter davantage de triplets pour réaliser d'autres comparaisons. Par exemple, dans l'exemple ci-dessus, la température et la vitesse du vent peuvent être testées. Pour cela, il suffit d'ajouter un autre triplet qui vérifiera les ressources supplémentaires. La condition sera remplie si et seulement si l'intégralité des triplets retournent des valeurs.

- -

L'exemple ci-dessous va vérifier un triplet supplémentaire appliqué au nom de la ville. Il lui sera attribué une variable name. La condition va correspondre si la ville possède à la fois un nom et une prédiction météo.

- -
<conditions>
-  <content uri="?list"/>
-  <member container="?list" child="?city"/>
-  <triple subject="?city"
-             predicate="http://www.xulplanet.com/rdf/weather#name"
-             object="?name"/>
-  <triple subject="?city"
-             predicate="http://www.xulplanet.com/rdf/weather#prediction"
-             object="?pred"/>
-</conditions>
-
- -

Générer du contenu

- -

Le contenu à générer pour une règle est spécifié dans l'élément action. Il peut être le contenu des lignes d'un arbre, des items de menu ou tout ce que vous souhaitez générer. À l'intérieur du contenu, vous pouvez vous référer aux variables qui ont été définies dans les conditions. Ainsi, dans l'exemple météo ci-dessus, vous pouvez utiliser les variables name ou pred pour afficher la ville ou la prédiction météo. Vous pouvez aussi utiliser les variables list ou city, mais elles contiennent des ressources et non du texte, donc elles n'auront pas de sens pour les utilisateurs.

- -

Dans la syntaxe de règle simple, la syntaxe uri="rdf:*" est utilisée pour indiquer où le contenu doit être généré. Dans la syntaxe de règles complètes, vous appliquez la valeur de l'attribut uri à une variable que l'on a utilisée dans la partie des conditions. Normalement, ce sera la variable assignée à l'attribut child de l'élément member.

- -

Exemple complet d'arbre

- -

L'exemple suivant montre un arbre complet avec des conditions et une action. Vous pouvez consulter le fichier RDF séparément (Source RDF).

- -

Exemple 1 : Source Voir

- -
<tree id="weatherTree" flex="1" datasources="weather.rdf"
-      ref="http://www.xulplanet.com/rdf/weather/cities">
-  <treecols>
-    <treecol id="city" label="Ville" primary="true" flex="1"/>
-    <treecol id="pred" label="Prédiction Météo" flex="1"/>
-  </treecols>
-
-  <template>
-    <rule>
-      <conditions>
-        <content uri="?list"/>
-        <member container="?list" child="?city"/>
-        <triple subject="?city"
-                predicate="http://www.xulplanet.com/rdf/weather#name"
-                object="?name"/>
-        <triple subject="?city"
-                predicate="http://www.xulplanet.com/rdf/weather#prediction"
-                object="?pred"/>
-      </conditions>
-      <action>
-        <treechildren>
-          <treeitem uri="?city">
-            <treerow>
-              <treecell label="?name"/>
-              <treecell label="?pred"/>
-            </treerow>
-          </treeitem>
-        </treechildren>
-      </action>
-    </rule>
-  </template>
-</tree>
-
- -

Deux colonnes apparaissent dans cet arbre, l'une qui affiche la valeur de 'name' pour chacun ligne, et l'autre qui affiche le résultat de la prédiction météo.

- -
Si vous utilisez le marqueur 'dont-build-content' (ne-pas-générer-de-contenu) sur un arbre, remplacez l'élément content par un élément treeitem
- -

Ajouter des liaisons supplémentaires

- -

Le dernier élément que vous pouvez ajouter à l'intérieur d'une règle est l'élément bindings. À l'intérieur de celui-ci, vous pouvez mettre un ou plusieurs éléments binding. Une liaison dans une règle a la même syntaxe qu'un triplet et remplit quasiment la même fonction. Par exemple, dans l'exemple météo précédent, on peut ajouter la liaison suivante :

- -
<bindings>
-  <binding subject="?city"
-             predicate="http://www.xulplanet.com/rdf/weather#temperature"
-             object="?temp"/>
-</bindings>
-
- -

La liaison va prendre la ressource "température" de chaque ville et l'attribuer à la variable temp. C'est tout à fait similaire à ce qu'un triplet accomplit. La différence réside dans le fait que la liaison créée par le binding n'est pas prise en compte dans la vérification des conditions. Ainsi, pour qu'une ville soit affichée, il est impératif qu'elle ait un nom et une prédiction météo, mais peu importe qu'elle ait ou non une température. Si toutefois elle en possède une, la valeur sera attribuée à la variable temp et pourra être utilisée dans une action. Si une ville n'a pas de température, la variable temp sera une chaîne de caractère vide.

- -
-

Par la suite, nous verrons comment sauvegarder les états des éléments XUL.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/sources_de_donn\303\251es_rdf/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/sources_de_donn\303\251es_rdf/index.html" deleted file mode 100644 index 27240972a3..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/sources_de_donn\303\251es_rdf/index.html" +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: Sources de données RDF -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Sources_de_données_RDF -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/RDF_Datasources ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Nous nous intéresserons ici aux sources de données additionnelles, ainsi qu'à la manière d'utiliser vos propres fichiers RDF comme sources de données.

- -

Autres sources de données pour Mozilla

- -

Mozilla fournit nativement plusieurs sources de données. Certaines sont indiquées ici, avec quelques exemples. Leur fonctionnement est très similaire à celui des marque-pages, bien que les champs soient différents à chaque fois.

- -
Ndt : Les ressources RDF fournies par mozilla ne sont utilisables que par les applications qui sont enregistrées dans le chrome. Vous ne verrez donc pas les données dans certains des exemples proposés.
- -

La liste d'historique de navigation

- -

Cette source de données fournit l'accès à la liste d'historique de l'utilisateur, qui est une liste d'URLs que l'utilisateur a consulté récemment. On peut se référer à cette ressource en utilisant rdf:history comme source de données. La table ci-dessous montre les ressources (ou champs) que vous pouvez récupérer depuis la source de donnée "history". Utilisez les URLs ci-dessous là où vous souhaitez que la valeur de la ressource soit utilisée.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Daterdf:http://home.netscape.com/NC-rdf#DateDate de la dernière visite
Namerdf:http://home.netscape.com/NC-rdf#NameTitre de la page
Pagerdf:http://home.netscape.com/NC-rdf#PageNom de la page
Referrerrdf:http://home.netscape.com/NC-rdf#ReferrerPage d'origine (referrer)
URLrdf:http://home.netscape.com/NC-rdf#URLURL de la page
Visit Countrdf:http://home.netscape.com/NC-rdf#VisitCountNombre de visites de la page
- -

Une liste d'historique typique affichera un arbre doté d'une sélection de ces champs. Pour les utiliser, placez les URL ci-dessus dans l'attribut label des boutons ou des cellules d'un arbre. Vous pouvez utiliser 'NC:HistoryRoot' comme valeur de l'attribut ref. Vous pouvez également utiliser la valeur 'NC:HistoryByDate' pour obtenir la liste d'historique triée par jour.

- -

Exemple d'utilisation de la liste historique

- -

Voyons un exemple d'affichage de la liste d'historique. Nous afficherons l'historique dans un arbre avec les trois colonnes Nom, URL et Date.

- -

Exemple 1: Source Voir

- -
<tree flex="1" datasources="rdf:history" ref="NC:HistoryRoot">
-
-  <treecols>
-    <treecol id="name" label="Nom" flex="1"/>
-    <treecol id="url" label="URL" flex="1"/>
-    <treecol id="date" label="Date" flex="1"/>
-  </treecols>
-
-  <template>
-
-    <rule>
-      <treechildren>
-       <treeitem uri="rdf:*">
-         <treerow>
-           <treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/>
-           <treecell label="rdf:http://home.netscape.com/NC-rdf#URL"/>
-           <treecell label="rdf:http://home.netscape.com/NC-rdf#Date"/>
-         </treerow>
-       </treeitem>
-      </treechildren>
-    </rule>
-
-  </template>
-</tree>
-
- -

Autres sources de données

- -

Les tableaux ci-dessous listent quelques-unes des autres sources de données disponibles avec Mozilla. Vous pouvez les utiliser comme vous voulez.

- -

Marque-pages ('rdf:bookmarks') :

- -

Les marque-pages sont générés depuis la liste de marque-pages de l'utilisateur.

- -


- Ressources

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Date d'ajoutrdf:http://home.netscape.com/NC-rdf#BookmarkAddDateDate à laquelle le marque-page a été ajouté
Descriptionrdf:http://home.netscape.com/NC-rdf#DescriptionDescription du marque-page
Dernière modificationrdf:http://home.netscape.com/WEB-rdf#LastModifiedDateDate de la dernière modification
Dernière visiterdf:http://home.netscape.com/WEB-rdf#LastVisitDateDate de la dernière visite
Nomrdf:http://home.netscape.com/NC-rdf#NameNom du marque-page
Raccourci URLrdf:http://home.netscape.com/NC-rdf#ShortcutURLChamp de mots-clés personnalisés
URLrdf:http://home.netscape.com/NC-rdf#URLL'URL vers laquelle pointe le lien
- -

Racines possibles pour les marque-pages

- -
-
'NC
-
BookmarksRoot' : La racine de la hiérarchie des marque-pages
-
- -

 

- -
-
'NC
-
IEFavoritesRoot' : Le dossier de marque-pages correspondant aux « Favoris IE » de l'utilisateur
-
- -

 

- -
-
'NC
-
PersonalToolbarFolder' : Le dossier de marque-pages correspondant au dossier de la barre d'outils personnelle
-
- -

Fichiers('rdf:files') :

- -

Une vue des fichiers de l'utilisateur.

- -

Ressources

- - - - - - - - - - - - - - -
Nomrdf:http://home.netscape.com/NC-rdf#NameNom du fichier
URLrdf:http://home.netscape.com/NC-rdf#URLURL du fichier
- -

Racine possible des fichiers

- -
-
'NC
-
FilesRoot' : Racine du système de fichiers (habituellement une liste de disques)
-
- -

 

- -
-
'URL d'un fichier' 
-
En utilisant une URL de fichier pour l'attribut ref, vous pouvez choisir un répertoire/dossier à retourner. Par exemple, vous pouvez utiliser file:///windows ou file:///usr/local
-
- -

La source de données de fichiers est un exemple de source de données qui ne détermine ses ressources que lorsque cela est nécessaire. Nous ne voulons pas que tous les fichiers du système de fichiers soient évalués avant d'afficher les données. Seuls nous intéressent les fichiers et répertoires que l'arbre (ou tout autre élément) doit afficher à un instant donné.

- -

Sources de données composites

- -

Vous pouvez spécifier plusieurs sources de données dans l'attribut datasources en les séparant par des espaces, comme dans l'exemple ci-dessous. Les données seront ainsi lues dans toutes les sources de données mentionnées.

- -
<tree datasources="rdf:bookmarks rdf:history animals.rdf" ref="NC:BookmarksRoot">
- -

Cet exemple lit les ressources des marque-pages, de l'historique et d'un fichier nommé 'animals.rdf'. Celles-ci sont combinées en une source de données composite et peuvent être utilisées comme une unique source de données.

- -

La source de donnée spéciale rdf:null correspond à une source vide. Vous pouvez utiliser cette source de données si vous voulez gérer dynamiquement la source via un script, sans avoir à l'initialiser tout de suite ou parce que vous ne connaissez pas son URL exacte.

- -

Sources de données RDF personnalisées

- -

Vous pouvez utiliser chacune des sources de données internes ci-dessus si vous le désirez. Il en existe plusieurs autres, pour le courrier électronique, les carnets d'adresses, les recherches... Cependant, vous pouvez utiliser votre propre source de données RDF, enregistrée dans un fichier RDF. Le fichier peut être local ou distant. Il suffit d'indiquer l'URL du fichier RDF dans l'attribut datasources.

- -

L'utilisation des fichiers RDF apporte les mêmes fonctionnalités que n'importe quelle source de données interne. Vous pouvez utiliser des règles pour retrouver un type spécifique de contenu. Les attributs de l'élément rule seront respectés s'ils correspondent aux attributs d'un élément RDF Description. Vous pouvez également créer des fichiers RDF hiérarchiques.

- -

Exemple d'utilisation d'un fichier RDF

- -

Ce qui suit est un exemple d'utilisation d'un fichier RDF comme source de données. Le fichier RDF est relativement gros et peut être consulté séparément : Source RDF

- -

Exemple 2 : Source Voir

- -
<tree flex="1" width="200" height="200"
-      datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals">
-
-  <treecols>
-    <treecol id="name" label="Nom" primary="true" flex="1"/>
-    <treecol id="species" label="Espèces" flex="1"/>
-  </treecols>
-
-  <template>
-    <rule>
-      <treechildren>
-       <treeitem uri="rdf:*">
-         <treerow>
-           <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/>
-           <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#species"/>
-         </treerow>
-       </treeitem>
-      </treechildren>
-    </rule>
-
-  </template>
-</tree>
-
- -

Image:xultu_datasrc1.png

- -

Ici, les données sont générées depuis le fichier RDF. L'attribut ref a été positionné sur l'élément racine de ce fichier, qui est la balise de premier niveau Seq. Nous obtenons une liste complète d'animaux. Si nous avions voulu, nous aurions pu positionner l'attribut ref sur n'importe quelle valeur de l'attribut about afin de limiter la quantité de données retournées. Par exemple, pour afficher seulement les reptiles, nous pouvons utiliser la valeur 'http://www.some-fictitious-zoo.com/reptiles'.

- -

Exemple de définition de l'attribut ref

- -

L'exemple ci-dessous montre comment afficher des éléments particuliers d'une source de données RDF en définissant l'attribut ref.

- -

Exemple 3: Source Voir

- -
<window
-  id="example-window"
-  title="Mammifères du zoo"
-  xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-<button label="Cliquez ici pour voir les mammifères du zoo" type="menu"
-        datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/mammals">
-  <template>
-    <rule ANIMALS:specimens="0"></rule>
-    <rule>
-      <menupopup>
-        <menuitem uri="rdf:*" label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/>
-      </menupopup>
-    </rule>
-  </template>
-</button>
-
-</window>
-
- -

Dans le cas présent, nous voulons seulement la liste des mammifères, nous sélectionnons donc l'URI de la liste des mammifères. Vous remarquerez que la valeur de l'attribut ref de notre exemple est 'http://www.some-fictitious-zoo.com/mammals', ce qui correspond à l'un des éléments Seq du fichier RDF. Seuls les descendants de cette liste seront retournés.

- -

Nous avons utilisé deux règles ici. La première filtre toutes les ressources dont l'attribut ANIMALS:specimen est positionné à '0'. Vous pouvez voir cet attribut dans le fichier RDF pour chacun des éléments Description. Certains d'entre eux ont une valeur de '0'. Dans ce cas, la première règle s'applique. Puisque cette règle n'a pas de contenu, rien ne sera affiché pour les éléments concernés. Ainsi, nous pouvons cacher les données que nous ne voulons pas afficher.

- -

La seconde règle s'applique aux autres ressources et crée une rangée dans un menu surgissant. Le résultat final est un menu surgissant contenant tous les mammifères dont le spécimen n'est pas positionné à '0'.

- -
-

Dans la prochaine section, nous examinerons la syntaxe des règles complètes.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/styler_un_arbre/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/styler_un_arbre/index.html deleted file mode 100644 index 641cb8199e..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/styler_un_arbre/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Styler un arbre -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Styler_un_arbre -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Styling_a_Tree ---- -

 

-
-

« PrécédentSuivant »

-
-

Cette section explique comment styler un arbre.

-

Styler l'arbre

-

Vous pouvez styler la bordure de l'arbre et les en-têtes de colonnes de la même manière que pour d'autres éléments. Les styles ajoutés à l'élément tree seront appliqués à l'arbre entier. L'ajout d'un style à l'élément treecol ne l'applique pas à la colonne mais seulement à son en-tête.

-

Le corps de l'arbre doit être stylé d'une manière un peu différente des autres éléments, parce que le corps de l'arbre est stocké d'une manière différente des autres éléments. Le treechildren extérieur est le seul vrai élément du corps de l'arbre. Les éléments intérieurs n'ont qu'un rôle de conteneurs.

-

Définition de propriétés

-

Vous devez donc utiliser l'attribut properties sur les lignes ou les cellules pour modifier une ou plusieurs propriétés nommées. Cet attribut peut être utilisé avec des arbres à contenu statique, produit par RDF ou avec des arbres à vue personnalisée. Supposons que nous voulions donner une couleur de fond bleue à une ligne particulière, comme il est possible de le remarquer sur les libellés dans la messagerie de Mozilla. Nous allons utiliser une propriété appelée 'makeItBlue'. Vous pouvez utiliser le nom que vous voulez. Vous pouvez modifier plusieurs propriétés en les séparant par des espaces.

-

Modifiez la propriété sur une ligne ou une cellule, comme dans l'exemple suivant :

-
<treerow properties="makeItBlue">
-

Sélecteurs CSS pour l'arbre

-

La feuille de styles peut récupérer cette propriété et l'utiliser pour changer l'apparence d'une ligne pour les messages non lus ou les libellés. Les propriétés fonctionnent en quelque sorte comme les classes de style, bien qu'elles nécessitent une syntaxe un peu plus complexe à utiliser dans une feuille de styles. En effet, il est possible de spécifier un style pour chaque partie d'une cellule. Vous pouvez styler non seulement la cellule et son texte, mais aussi le "twisty" (NdT : petit '+' ou '-' permettant de développer et replier l'arborescence) et l'indentation. La syntaxe à utiliser est la suivante :

-
treechildren::-moz-tree-row(makeItBlue)
-{
-  background-color: blue;
-}
-
-

Ce pseudo-style spécial est utilisé pour styler la couleur de fond des lignes qui ont la propriété 'makeItBlue'. Cette syntaxe spéciale est nécessaire parce que les cellules elles-mêmes ne sont pas des éléments séparés. Tout le contenu intérieur au corps de l'arbre obtient son rendu par l'élément treechildren. Cependant, CSS dispose d'un concept pour accéder aux parties des éléments en les considérant comme des pseudo-éléments. Ce sélecteur correspond à quelques lignes de l'arbre à l'intérieur de l'élément treechildren comme pseudo-élément. Le pseudo-style définit des règles de style pour des parties particulières de ce qu'il affiche. Cette règle de style signifie, dans un élément treechildren : mettre une couleur de fond bleue à toutes les lignes de l'arbre qui ont la propriété 'makeItBlue'.

-

Le texte '::-moz-tree-row' spécifie quelle est la zone de contenu désirée, qui est dans ce cas une ligne. Vous pouvez aussi utiliser les valeurs suivantes :

-
::-moz-tree-cell 
une cellule. Utilisez ceci pour modifier les couleurs des bordures et du fond.
::-moz-tree-cell-text 
le texte d'une cellule. Utilisez ceci pour modifier la police et la couleur du texte.
::-moz-tree-twisty 
l'apparence du "twisty" utilisé pour développer et replier les lignes filles.
::-moz-tree-image 
l'image pour une cellule. Vous pouvez indiquer l'image avec la propriété list-style-image.
::-moz-tree-row 
une ligne. Utilisez ceci pour choisir la couleur de fond d'une ligne.
::-moz-tree-indentation 
l'indentation à gauche des lignes filles.
::-moz-tree-column 
une colonne.
::-moz-tree-line 
les lignes dessinées pour connecter les lignes filles aux lignes parentes.
::-moz-tree-separator 
un séparateur dans un arbre.
::-moz-tree-progressmeter 
contenu pour des cellules à indicateur de progression. Vous pouvez créer une colonne avec des indicateurs de progression en mettant l'attribut type de la colonne à 'progressmeter'.
::-moz-tree-drop-feedback 
le retour du glisser-déposer.
::-moz-tree-checkbox 
l'image à utiliser pour les colonnes de case à cocher.
-
-

Vous pouvez tester la présence de plusieurs propriétés en les séparant par des virgules. L'exemple ci-dessous met une couleur de fond grise aux lignes qui ont les propriétés 'readonly' et 'unread'. Pour les propriétés qui sont 'readonly', il ajoute une bordure rouge autour de la ligne. Notez que la première règle s'appliquera à toute ligne qui est 'readonly', peu importe la présence d'autres propriétés comme 'unread'.

-
treechildren::-moz-tree-row(readonly)
-{
-  border: 1px solid red;
-}
-treechildren::-moz-tree-row(readonly, unread)
-{
-  background-color: rgb(80%, 80%, 80%);
-}
-
-

Propriétés par défaut

-

La liste des propriétés des éléments tree contient un petit nombre de propriétés par défaut que vous pouvez aussi utiliser dans une feuille de styles. Vous pouvez utiliser ces propriétés supplémentaires pour modifier l'apparence des conteneurs ou des lignes sélectionnées. Les propriétés suivantes sont modifiées automatiquement en cas de besoin :

-
focus
cette propriété est mise si l'arbre a le focus.
selected
cette propriété est mise pour les lignes ou les cellules actuellement sélectionnées.
current
cette propriété est mise si le curseur est sur la ligne. Seule une ligne à la fois peut avoir cette propriété.
container
cette propriété est mise pour les lignes ou les cellules qui ont des lignes filles.
leaf
cette propriété est mise pour les lignes ou les cellules qui n'ont pas de lignes filles.
open
cette propriété est mise pour les lignes ou les cellules qui sont développées.
closed
cette propriété est mise pour les lignes ou les cellules qui sont repliées.
primary
cette propriété est mise pour les cellules de la colonne primaire.
sorted
cette propriété est mise pour les cellules de la colonne actuellement triées.
even
cette propriété est mise pour les lignes paires.
odd
cette propriété est mise pour les lignes impaires. Cette propriété ainsi que la propriété even vous permettent, par exemple, d'alterner les couleurs entre chaque ligne.
dragSession
cette propriété est mise si quelque chose est en train d'être déplacé.
dropOn
si un déplacement a lieu au-dessus de l'arbre, cette propriété est mise pour la ligne en train d'être survolée par le déplacement, tant que le pointeur de la souris est au-dessus de la ligne.
dropBefore
cette propriété est mise si le pointeur de la souris survole avant la ligne en cours de déplacement.
dropAfter
cette propriété est mise si le pointeur de la souris survole après la ligne en cours de déplacement.
progressNormal
cette propriété est mise pour les cellules à indicateur de progression.
progressUndetermined
cette propriété est mise pour les cellules à indicateur de progression indéterminé.
progressNone
cette propriété est mise pour les cellules sans indicateur de progression.
-
-

Les propriétés sont mises pour les lignes ou les cellules d'une ligne à l'état correspondant. Pour les colonnes et les cellules, une propriété additionnelle, l'id de la colonne ou la colonne dans laquelle est la cellule, sera mise.

-

Définition des propriétés pour les arbres générés par RDF

-

Pour les arbres générés par RDF, vous pouvez utiliser la même syntaxe. Cependant, vous affecterez souvent les propriétés en vous basant sur des valeurs de la source de données.

-

Définition des propriétés pour les vues personnalisées

-

Pour des arbres avec un script de vue personnalisée, vous pouvez modifier des propriétés en fournissant les fonctions getRowProperties(), getColumnProperties() et getCellProperties() dans la vue. Elles renvoient des informations à propos d'une ligne, d'une colonne et d'une cellule individuelle. Les arguments à ces fonctions indiquent quelle ligne et/ou colonne. Le dernier argument de chacune de ces fonctions est une liste de propriétés que la vue est supposée remplir avec une liste de propriétés. La fonction getColumnProperties() fournit aussi l'élément treecol correspondant pour la colonne.

-
getRowProperties : function(row,prop){}
-getColumnProperties : function(column,columnElement,prop){}
-getCellProperties : function(row,column,prop){}
-
-

Regardons un exemple de modification d'une cellule spécifique. Rendons le texte bleu une ligne sur quatre, en utilisant l'exemple d'une section précédente. Nous allons avoir besoin d'ajouter du code à la fonction getCellProperties() pour ajouter une propriété 'makeItBlue' aux cellules toutes les quatres lignes (Nous n'utilisons pas getRowProperties() puisque la couleur du texte ne sera pas héritée dans chaque cellule).

-

L'objet properties qui est passé en dernier argument de getCellProperties() est un objet XPCOM qui implémente nslSupportsArray. Il s'agit en fait une version XPCOM d'un tableau. Il contient une fonction AppendElement() qui peut être utilisée pour ajouter un élément au tableau. Nous pouvons utiliser l'interface nslAtomService pour construire des atomes de chaînes pour les propriétés.

-
getCellProperties: function(row,col,props){
-  if ((row %4) == 0){
-    var aserv=Components.classes["@mozilla.org/atom-service;1"].
-              getService(Components.interfaces.nsIAtomService);
-    props.AppendElement(aserv.getAtom("makeItBlue"));
-  }
-}
-
-

Cette fonction sera définie comme partie d'un objet de vue. Elle vérifie d'abord quelle ligne est demandée et affecte une propriété pour les cellules toutes les quatres lignes. La liste des propriétés nécessite un tableau d'objets atom qui peuvent être considérés comme des chaînes de caractères constantes. Nous les créons en utilisant l'interface XPCOM nslAtomService et nous les ajoutons au tableau en utilisant la fonction AppendElement(). Ici, nous créons un atome 'makeItBlue'. Vous pouvez appeler AppendElement() à nouveau pour ajouter des propriétés additionnelles.

-

Exemple de feuille de styles

-
treechildren::-moz-tree-row(selected)            { background-color: #FFFFAA; }
-treechildren::-moz-tree-row(odd)                 { background-color: #EEEEEE; }
-treechildren::-moz-tree-row(odd, selected)       { background-color: #FFFFAA; }
-treechildren::-moz-tree-cell-text(selected)      { color: #000000; }
-treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; }
-
-
-

Dans la suite, nous allons voir comment modifier le thème par défaut.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/s\303\251lection_dans_les_arbres/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/s\303\251lection_dans_les_arbres/index.html" deleted file mode 100644 index 6aa59a15d8..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/s\303\251lection_dans_les_arbres/index.html" +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Sélection dans les arbres -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Sélection_dans_les_arbres -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Selection ---- -

 

-
-

« PrécédentSuivant »

-
-

Cette section décrit comment obtenir et modifier les items sélectionnés dans un arbre.

-

Récupérer les items sélectionnés d'un arbre

-

Chaque item dans un arbre (qui correspond à un élément treeitem en utilisant un arbre de contenu) peut être sélectionné individuellement. Si vous ajoutez l'attribut seltype à l'arbre en lui attribuant la valeur 'single' , l'utilisateur ne pourra sélectionner qu'une ligne à la fois. Sinon, l'utilisateur pourra sélectionner plusieurs lignes qui ne seront pas nécessairement contiguës. L'arbre fournit plusieurs fonctions qui peuvent être utilisées pour déterminer si un item est sélectionné.

-

Gestion de l'événement de sélection

-

Voyons d'abord comment nous pouvons déterminer qu'un item est sélectionné. Le gestionnaire d'événement onselect peut être ajouté à l'élément tree. Lorsque l'utilisateur sélectionne un item de l'arbre, le gestionnaire d'événement est appelé. L'utilisateur peut également modifier la sélection en utilisant les touches de déplacement. Si l'utilisateur appuie en continu sur une touche de déplacement afin de se déplacer rapidement dans les items, le gestionnaire d'événement n'est pas appelé jusqu'à ce que l'utilisateur relâche la touche. Ce mode de fonctionnement améliore les performances. Il signifie également que la surbrillance du texte apparaîtra sur plusieurs items même si l'événement de sélection n'est pas déclenché pour ces items.

-

La syntaxe du gestionnaire d'événement onselect est présentée ci-dessous.

-
<tree id="treeset" onselect="alert('Vous avez sélectionné quelque chose !');">
-

Indices d'arbre

-

L'arbre possède une propriété currentIndex (index courant, en commençant à '0' pour la première ligne) qui peut être utilisée pour obtenir l'item sélectionné.

-

Les éléments fils sont inclus dans le comptage juste après leurs parents. Ainsi, s'il y a trois items racines et que chacun a deux items fils, il y aura un total de six objets. Le premier item (d'index '0') sera le premier item racine. L'item suivant, d'index '1', sera son premier fils. Le second fils aura l'index '2', le second item parent sera à la position '3' et ainsi de suite.

-
Image:xultu_seltree1.png
-

Dans l'image ci-contre, il y a huit lignes affichées, dont deux sont sélectionnées. La première ligne sélectionnée a un index de '4' et la seconde, un index de '7'. Les lignes qui ne sont pas affichées ne sont pas incluses dans le comptage d'index.

-

Sélection multiple

-

Pour les arbres qui permettent une sélection multiple, obtenir la liste des lignes sélectionnées est un peu plus compliqué. La vue de l'arbre a une propriété de sélection qui contient l'information sur les lignes sélectionnées. Cette sélection sera un objet TreeSelection. La vue n'a pas besoin d'implémenter cet objet elle-même, car l'arbre aura assigné un objet de sélection à la propriété de sélection de la vue lorsque celle-ci a été attachée à l'arbre. À partir de l'arbre, vous pouvez obtenir la sélection en utilisant la propriété view de l'arbre et ensuite la propriété selection de la vue. Vous pouvez utiliser les méthodes de l'objet de sélection pour récupérer l'ensemble des items sélectionnés ou pour modifier la sélection.

-

Comme les items sélectionnés dans une sélection multiple ne sont pas nécessairement contigus, vous pouvez récupérer chaque bloc de sélection contiguë en utilisant les fonctions getRangeCount() et getRangeAt(). La première fonction retourne le nombre de plages de sélection effectuées. Si seule une valeur a été sélectionnée, la valeur retournée sera '1'. Vous pourrez alors écrire une boucle sur le nombre de plages, en appelant getRangeAt() pour obtenir les bons index du début et de la fin d'une plage.

-

La fonction getRangeAt() comporte trois arguments.

- -

Exemple getRangeAt

-
var start = new Object();
-var end = new Object();
-var numRanges = tree.view.selection.getRangeCount();
-
-for (var t = 0; t < numRanges; t++){
-  tree.view.selection.getRangeAt(t,start,end);
-  for (var v = start.value; v <= end.value; v++){
-    alert("Item " + v + " sélectionné.");
-  }
-}
-
-

Nous avons créé deux objets appelés start et end. Ensuite, nous lançons une boucle sur les plages de la sélection dont le nombre a été retourné par la fonction getRangeCount(). La fonction getRangeAt() est appelée avec l'index de la plage, et les objets start et end. Cette fonction renseignera les index start et end en leur attribuant la propriété 'value'. Donc, si la première plage commence au troisième item et se termine au septième, start.value vaudra '2' (souvenez-vous que les index commencent à 0, donc nous en décrémentons de un) et end.value vaudra '6'. Un message d'alerte est affichée pour chaque index.

-

Si vous souhaitez seulement savoir si une ligne précise a été sélectionnée, vous pouvez utiliser la fonction isSelected(). Elle prend l'index de la ligne en argument et retourne 'true' si la ligne est sélectionnée.

-
alert(tree.view.selection.isSelected(3));
-

Modifier la sélection dans un arbre

-

L'objet de sélection dispose de plusieurs fonctions qui peuvent être utilisées pour changer une sélection. La fonction la plus simple est select() qui dé-sélectionne toutes les lignes actuellement sélectionnées et en sélectionne une spécifique. Par exemple, le code suivant sélectionnera la ligne d'index '5' :

-
tree.view.selection.select(5);
-

Notez que vous ne devez pas modifier la propriété currentIndex pour changer la sélection. Vous devez plutôt utiliser la fonction de sélection select() comme indiqué dans l'exemple précédent. Vous pouvez sélectionner toutes les lignes avec la fonction selectAll(). Notez que les lignes imbriquées à l'intérieur de containers qui n'ont pas été ouverts ne seront pas sélectionnées. Naturellement, cette fonction n'est valable que pour des arbres à sélections multiples. Il y a aussi les fonctions clearSelection() pour effacer la sélection et invertSelection() pour inverser la sélection, c'est-à-dire dé-sélectionner toutes les lignes sélectionnées et sélectionner les autres.

-

Pour sélectionner des lignes spécifiques, utiliser la fonction rangedSelect() qui sélectionne toutes les lignes entre deux indices. Voici un exemple de sélection des lignes comprises entre les index '2' et '7'. Notez que les lignes '2' et '7' seront incluses dans la sélection.

-
tree.view.selection.rangedSelect(2,7,true);
-

L'argument final indique s'il s'agit d'un ajout à la sélection courante. Si la valeur est 'true', la plage sera ajoutée à la sélection courante. Si la valeur est 'false', toutes les lignes préalablement sélectionnées seront préalablement dé-sélectionnées. Finalement, la fonction clearRange() peut être utilisée pour dé-sélectionner une plage de lignes, les lignes en dehors de cette plage n'étant pas affectées.

-
tree.view.selection.clearRange(2,7);
-
-

Nous allons maintenant apprendre comment créer une vue personnalisée pour un arbre.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/s\303\251parateurs/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/s\303\251parateurs/index.html" deleted file mode 100644 index cd9b6fda85..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/s\303\251parateurs/index.html" +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Séparateurs -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Séparateurs -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Splitters ---- -

 

-
-

« PrécédentSuivant »

-
-

Ici, nous allons voir comment ajouter des séparateurs dans une fenêtre.

-

Découpage d'une boîte

-

Il arrive des fois où vous voulez disposer de deux sections dans une fenêtre que l'utilisateur peut redimensionner à son gré. Un exemple est la fenêtre du navigateur Mozilla, où vous pouvez changer la taille du panneau latéral en déplaçant le trait d'intersection des deux cadres. Vous pouvez aussi cacher ce panneau latéral en cliquant sur la poignée de ce trait.

-

Élément splitter

-

Cette fonctionnalité est accomplie en utilisant un élément appelé splitter. Il crée une barre étroite entre les deux sections en permettant de redimensionner chaque côté. Vous pouvez placer un séparateur où vous voulez pour vous permettre de redimensionner les éléments situés avant lui et les éléments situés après lui dans une même boîte.

-

Lorsqu'un séparateur est placé à l'intérieur d'une boîte horizontale, il permet un redimensionnement horizontal. Lorsqu'un séparateur est placé à l'intérieur d'une boîte verticale, il permet un redimensionnement vertical.

-

La syntaxe d'un séparateur est la suivante :

-
<splitter
-    id="identifier"
-    state="open"
-    collapse="before"
-    resizebefore="closest"
-    resizeafter="closest">
-
-

Les attributs sont les suivants :

-
id 
L'identifiant unique d'un séparateur.
state 
Indique l'état d'un séparateur. Mettez lui la valeur 'open', valeur par défaut, pour que le panneau redimensionnable soit initialement ouvert ou mettez lui la valeur 'collapsed' pour qu'un des panneaux soit complètement réduit et que l'autre occupe toute la place.
collapse 
Il indique de quel côté le panneau doit se réduire quand la poignée du séparateur est cliquée ou quand le séparateur est initialisée avec un état 'collapsed'. Mettez lui la valeur 'before' pour désigner l'élément avant le séparateur ou la valeur 'after' pour désigner l'élément après le séparateur. Si vous l'initialisez avec la valeur 'none', qui est aussi la valeur par défaut, la poignée du séparateur ne réduira pas les panneaux quand elle est cliquée.
resizebefore 
Lorsqu'un séparateur est déplacé, les éléments sur sa gauche sont redimensionnés. Cet attribut indique quel élément est concerné. Mettez la valeur 'closest' pour que l'élément immédiatement à gauche du séparateur soit redimensionné. Mettez la valeur 'farthest' pour que l'élément le plus éloigné à gauche du séparateur soit redimensionné (le premier élément de la boîte). La valeur par défaut est 'closest'.
resizeafter 
Lorsqu'un séparateur est déplacé, les éléments sur sa droite sont redimensionnés. Cet attribut indique quel élément est concerné. Mettez la valeur 'closest' pour que l'élément immédiatement à droite du séparateur soit redimensionné. Mettez la valeur 'farthest' pour que l'élément le plus éloigné à droite du séparateur soit redimensionné (le dernier élément de la boîte). Cet attribut peut aussi avoir la valeur 'grow', dans ce cas, les éléments à droite du séparateur ne changent pas de taille lorsque le séparateur est déplacé. La valeur par défaut est 'closest'.
-
-

Si vous employez l'attribut collapse, vous devrez aussi ajouter l'élément grippy à l'intérieur de l'élément splitter afin que l'utilisateur puisse utiliser la poignée pour réduire un panneau.

-

Exemple avec splitter

-

Un exemple vous sera utile :

-

Exemple 1: Source Voir

-
<vbox flex="1">
-  <iframe id="content-1" width="60" height="20" src="w1.html"/>
-  <splitter collapse="before" resizeafter="farthest">
-    <grippy/>
-  </splitter>
-  <iframe id="content-2" width="60" height="20" src="w2.html"/>
-  <iframe id="content-3" width="60" height="20" src="w3.html"/>
-  <iframe id="content-4" width="60" height="20" src="w4.html"/>
-</vbox>
-
-
Image:xultu_splitter1.png
-

Ici, quatre cadres iframe ont été créés et un séparateur a été placé entre le premier et le second. L'attribut collapse a été affecté d'une valeur 'before' pour signifier que si la poignée est cliquée, le premier cadre va disparaître, et le séparateur et les cadres restants vont glisser vers la gauche. La poignée du séparateur est centrée sur la barre de séparation.

-

La valeur 'farthest' a été affectée à l'attribut resizeafter du séparateur. Elle signifie que lorsque le séparateur est déplacé, l'élément le plus éloigné après lui changera sa taille. Dans ce cas, il s'agit du quatrième cadre.

-

Aucune valeur n'a été spécifiée pour l'attribut resizebefore qui aura donc sa valeur 'closest' par défaut. Dans ce cas, il n'y a qu'un cadre avant le séparateur, c'est donc le premier cadre qui changera de taille.

-

Les deuxième et troisième cadres ne changeront leur taille que si vous déplacez le séparateur suffisamment loin sur la droite jusqu'à ce que le quatrième cadre ait atteint sa largeur minimale.

-

Les quatre cadres avec le séparateur dans un état réduit :

-

Image:xultu_splitter2.png

-

Une image des quatre cadres avec le séparateur redimensionné vers la droite est montrée ci dessous. Notez que les deux cadres du milieu n'ont pas changé leur dimension. Seuls les premier et quatrième cadres ont changé de dimension. Vous pouvez seulement voir une partie du quatrième cadre. Si vous continuez à déplacer le séparateur vers la droite, les deux autres cadres vont se réduire.

-

Image:xultu_splitter3.png

-

Vous pouvez utiliser des propriétés de style telles que min-width, max-width sur les cadres pour spécifier leurs largeurs minimales ou maximales ou leurs hauteurs dans la boîte. Si vous faites cela, le séparateur va le détecter et ne permettra pas de le déplacer au-delà des tailles minimales ou maximales.

-

Par exemple, si vous spécifiez un minimum de 30 pixels en largeur sur le quatrième cadre, il ne se réduira pas en dessous de cette taille. Les deux autres cadres vont alors se réduire. Si vous mettez une largeur minimale de 50 pixels sur le premier cadre, vous ne pourrez déplacer le séparateur que de 10 pixels vers la gauche (car il démarre à 60 pixels de large). Toutefois, vous pouvez toujours faire disparaître le cadre.

-

Vous pouvez également placer plus d'un séparateur dans une boîte si vous le souhaitez, dans ce cas vous pourrez réduire les différentes parties de son contenu. De façon similaire, il n'y a pas que les cadres qui peuvent êre réduits, n'importe quel élément peut l'être.

-
-

Notre exemple de recherche de fichiers

-

Voyons ce que devient notre exemple de recherche de fichiers avec un séparateur. Une possibilité serait d'inclure les résultats de la recherche dans la boîte de dialogue. Nous ajouterons une zone entre les critères de recherche et les boutons du bas. Un séparateur permettra de réduire ou masquer les résultats de la recherche.

-
</tabbox>
-
- <iframe src="results.html"/>  <splitter resizeafter="grow"/>
-
- <hbox>
-
-

Ici, un séparateur et un cadre ont été ajoutés à la boîte de dialogue. Nous n'avons plus besoin de l'élément spacer après la boîte d'onglets, donc nous l'enlèverons. Le contenu du cadre provient d'un fichier appelé 'result.html'. Créez ce fichier et mettez ce que vous souhaitez dedans pour l'instant. Le cadre sera remplacé plus tard par la liste des résultats lorsque vous saurez comment la créer. Pour l'instant, il nous servira à expliquer le séparateur.

-

Le séparateur a été initialisé avec la valeur 'before' sur l'attribut collapse, ce qui signifie que l'élément juste avant le séparateur va se réduire. Ici, il s'agit du cadre. Comme montré sur les images ci-dessous, lorsque la poignée est cliquée, le cadre est masqué et les boutons glissent vers le haut.

-

L'attribut resizeafter a été initialisé avec une valeur 'grow' pour que les éléments situés après le séparateur se déplace vers la bas lorsque celui ci est déplacé vers le bas. Le contenu dans le cadre peut s'agrandir sans restriction. Vous noterez que la fenêtre ne se redimensionne pas automatiquement. Vous remarquerez également que c'est un séparateur horizontal parce qu'il a été placé dans une boîte verticale.

-

Etat normal :

-

Image:xultu_splitter4.png

-

Etat réduit :

-

Image:xultu_splitter5.png

-

Exemple de recherche de fichiers : Source Voir

-
-
-

Dans la section suivante, nous verrons comment créer une barre de défilement.

-
-

« PrécédentSuivant »

-
-

Interwiki

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/utilisation_des_spacers/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/utilisation_des_spacers/index.html deleted file mode 100644 index cecd0b9291..0000000000 --- a/files/fr/archive/mozilla/xul/tutoriel_xul/utilisation_des_spacers/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Utilisation des spacers -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Utilisation_des_spacers -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Using_Spacers ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Dans cette section, vous trouverez comment ajouter des espacements entre les différents éléments que vous avez créés.

- -

Ajout de spacers

- -

Un des problèmes avec le développement des interfaces utilisateur est que chaque utilisateur a son propre affichage. Certains utilisateurs peuvent avoir de grands écrans avec une haute résolution et d'autres de faibles résolutions. De plus, chaque plate-forme peut avoir des spécificités pour l'interface utilisateur. En ajoutant le support multi-langue, un texte dans une langue peut avoir besoin de plus de place que dans une autre.

- -

Les applications qui doivent être compatibles avec différentes plates-formes ou langages ont souvent des fenêtres créées avec beaucoup de place pour permettre leur exécution. Certaines plates-formes et outils de développement d'interfaces utilisateur proposent des composants qui sont suffisamment intelligents pour se redimensionner et se repositionner eux-mêmes selon les besoins de l'utilisateur (Java utilise des gestionnaires de mise en page par exemple).

- -

XUL fournit la possibilité aux éléments de se positionner et se redimensionner automatiquement. Comme nous l'avons vu, la fenêtre de "recherche de fichiers" est apparue avec une taille qui correspond aux éléments qui y sont inclus. Chaque fois que nous y ajoutons quelque chose, la fenêtre s'agrandit.

- -

XUL utilise un système de mise en page appelé le " Box Model ". Nous en parlerons dans la prochaine section mais il vous permet essentiellement de diviser une fenêtre en une série de boîtes contenant vos éléments. Ces boîtes se positionnent et se redimensionnent en fonction des spécifications que vous avez définies. Pour l'instant, sachez simplement que l'élément window est un type de boîte.

- -

Avant d'entrer plus dans le détail avec les boîtes, nous allons présenter un autre élément XUL qui se montre très utile pour la mise en page, le spacer. Un spacer est très simple et ne requiert qu'un seul attribut qui sera expliqué dans un moment. Le spacer le plus simple ressemble à ceci :

- -
<spacer flex="1" />
-
- -

Un spacer est utilisé pour placer des espaces vides dans une fenêtre. Sa principale caractéristique est de pouvoir s'agrandir ou se rétrécir lorsque l'utilisateur redimensionne la fenêtre. Il permet à quelqu'un de placer des boutons à droite ou en bas d'une fenêtre et de vouloir les fixer sur le coté droit ou en bas, quelle que soit la taille de la fenêtre. Comme vous le verrez, vous pouvez utiliser des séries de spacer pour créer quelques effets de mise en page.

- -

Dans la syntaxe ci-dessus, spacer a un seul attribut appelé flex. Il est utilisé pour définir la " flexibilité " de l'espacement. Dans le cas ci-dessus, le spacer a un flex de '1'. Il en devient un élément d'espacement flexible. Si vous placez un spacer directement dans une fenêtre, il s'adaptera à la taille de la fenêtre lorsque celle-ci est modifiée.

- -

Nous allons bientôt ajouter un élément spacer dans notre boîte de dialogue "Recherche de Fichiers". Tout d'abord, voilà ce qu'il se passe si la fenêtre est agrandie :

- -

Source Voir

- -

Image:xultu_springs1.png

- -

Si vous changez la taille de la fenêtre, vous pouvez voir que les éléments ont conservé leur position. Aucun d'eux n'a bougé ou s'est redimensionné bien que la fenêtre dispose de plus de place. Regardons maintenant ce qu'il se passe si un élément spacer est ajouté entre la boîte de texte et le bouton 'Rechercher' :

- -

Source Voir

- -

Image:xultu_springs2.png

- -

En ajoutant un spacer et en agrandissant la fenêtre, vous voyez que le spacer s'est agrandi de façon à remplir l'espace libre. Les boutons ont été repoussés.

- -
-

Notre exemple de recherche de fichier

- -

Le code pour ajouter un spacer est indiqué juste après. Insérez le juste avant le bouton 'Rechercher' :

- -
<spacer flex="1"/>
-
-<button id="find-button" label="Rechercher"/>
-
-
- -

Plus d'informations sur la flexibilité

- -

XUL place les éléments d'une fenêtre en calculant les largeurs et les hauteurs adéquates des éléments et ajoute ensuite des espacements là où ils sont flexibles. À moins que vous ne spécifiez la largeur et la hauteur d'un élément, la dimension par défaut de cet élément sera déterminée par son contenu. Vous noterez que le bouton 'Annuler' des boîtes de dialogue a toujours adapté sa largeur pour contenir son texte. Si vous créez un bouton avec un très long libellé, la taille par défaut de ce bouton sera assez large pour contenir le libellé en entier. Les autres éléments, tels que la boîte de texte, se sont adaptés de façon adéquate.

- -

L'attribut flex est utilisé pour spécifier si un élément peut changer sa dimension pour s'ajuster à sa boîte le contenant (dans notre cas, la fenêtre window). Nous avons montré l'application de l'attribut flex sur les spacer, mais il peut s'appliquer à n'importe quel élément. Par exemple, vous pouvez souhaiter avoir plutôt un redimensionnement du bouton 'Rechercher' :

- -

Source Voir

- -

Image:xultu_springs3.png

- -

Comme vous pouvez voir sur l'image, en plaçant un attribut flex sur le bouton 'Rechercher', celui-ci s'agrandit en même temps que la fenêtre. Un spacer n'a rien de spécial. Il peut être considéré comme un bouton invisible. Il fonctionne de la même manière qu'un bouton, excepté qu'il ne se dessine pas à l'écran.

- -

Vous aurez remarqué quelque chose sur l'image ci-dessus. Il n'y a pas que le bouton 'Rechercher' qui s'agrandit mais un espacement est également apparu entre le texte à gauche et le bouton. Bien entendu, il s'agit du spacer que nous avons placé tout à l'heure. Il s'est redimensionné de lui même également. Si vous regardez suffisamment de près, vous devriez remarquer que ce changement de taille a été partagé en part égale entre le spacer et le bouton. Le spacer a reçu la moitié de l'espace libre et le bouton a reçu l'autre moitié.

- -

La raison de ce comportement est que le spacer et le bouton ont chacun un attribut flex. Parce qu'ils sont flexibles, le spacer et le bouton se redimensionnent équitablement.

- -

Comment faire si vous voulez qu'un élément s'agrandisse deux fois plus qu'un autre ? Vous pouvez choisir un nombre plus grand pour la valeur de l'attribut flex. Les valeurs de l'attribut flex sont des ratios. Si un élément a un flex de '1' et un second un flex de '2', le second s'agrandira du du double par rapport au premier. En effet, un flex de '2' signifie que cet élément a une flexibilité de deux fois celle d'un élément de flex de '1'.

- -

L'attribut flex ne sert pas à définir une taille. Il spécifie au contraire comment se répartissent les espaces vides entre les différents éléments fils d'une boîte. Nous aborderons les boîtes dans le prochain chapitre. Dès lors que les dimensions par défaut des éléments fils d'une boîte sont déterminées, les valeurs de flexibilité sont appliquées pour diviser l'espace restant dans la boîte. Par exemple, si la boîte fait 200 pixels de large, qu'elle contient deux boutons flexibles respectivement de 50 pixels et 90 pixels, il restera un espacement de 60 pixels. Si ces deux boutons ont une valeur de flex de '1', cet espacement sera divisé en deux moitiés égales de 30 pixels affectées à chacun d'eux. Si le second bouton voit sa valeur de flexibilité augmentée à '2', le premier bouton recevra 20 pixels d'espacement supplémentaire et le second en recevra 40 pixels.

- -

L'attribut flex peut être placé sur n'importe quel élément, toutefois il n'a de sens que si cet élément est directement inclus dans une boîte. Donc, même si vous placez un attribut flex sur un élément HTML, il restera sans effet cet élément est situé dans un élément n'étant pas une boîte.

- -

Exemples d'utilisation de flex

- -
Exemple 1:
-  <button label="Chercher" flex="1"/>
-  <button label="Annuler" flex="1"/>
-
-Exemple 2:
-  <button label="Chercher" flex="1"/>
-  <button label="Annuler" flex="10"/>
-
-Exemple 3:
-  <button label="Chercher" flex="2"/>
-  <button label="Remplacer"/>
-  <button label="Annuler" flex="4"/>
-
-Exemple 4:
-  <button label="Chercher" flex="2"/>
-  <button label="Remplacer" flex="2"/>
-  <button label="Annuler" flex="3"/>
-
-Exemple 5:
-  <html:div>
-    <button label="Chercher" flex="2"/>
-    <button label="Remplacer" flex="2"/>
-  </html:div>
-
-Exemple 6:
-  <button label="Chercher" flex="145"/>
-  <button label="Remplacer" flex="145"/>
-
- -
-
Exemple 1 
-
dans ce cas, la flexibilité est divisée en part égale pour les deux boutons. Leurs tailles changeront en proportion égale.
-
Exemple 2 
-
ici, les deux boutons sont flexibles, mais le bouton Chercher sera dix fois plus petit que le bouton Annuler qui a une valeur flex dix fois plus importante que celle du bouton Chercher. L'espace restant est divisé en une part pour le bouton Chercher et 10 parts pour le bouton Annuler.
-
Exemple 3 
-
seuls deux boutons sont flexibles ici. Le bouton Remplacer ne changera jamais sa taille mais les deux autres le pourront. Le bouton Annuler aura toujours une taille du double du bouton Chercher parce qu'il a une valeur de flex du double.
-
Exemple 4 
-
dans ce cas, les trois boutons sont flexibles. Les boutons Chercher et Remplacer auront exactement la même taille mais le bouton Annuler sera un peu plus large (50% plus large pour être exact).
-
Exemple 5 
-
ici, les deux boutons sont placés dans une balise div. La flexibilité perd toute signification puisque les boutons ne sont pas directement dans une boîte. L'effet serait le même si les attributs flex étaient enlevés.
-
Exemple 6 
-
Comme les valeurs de flex sont identiques, les deux boutons auront la même taille. Cela fonctionne aussi bien que si vous aviez mis une valeur de '1' au lieu de '145'. Il est recommandé de mettre les valeurs les plus basses pour une meilleure lecture.
-
- -
Notez que d'autres facteurs tels que les libellés des boutons et les tailles minimales des boutons peuvent affecter les dimensions réelles des boutons. Par exemple, un bouton ne peut pas être réduit au delà d'une taille nécessaire pour y placer son libellé.
- -

Spécifier une valeur de '0' a le même effet que si vous enleviez l'attribut flex en entier. L'élément perd toute flexibilité. Vous verrez parfois des valeurs de flex avec un pourcentage. Il n'y a aucune signification spéciale et le signe pourcentage est traité comme s'il n'existait pas.

- -

Vous avez dû remarquer que si vous redimensionnez verticalement la boîte de dialogue « Recherche de fichiers », les boutons se redimensionnent également en hauteur pour s'ajuster à la hauteur de la fenêtre. Ceci s'explique par le fait que les boutons ont une valeur de flex verticale implicite donnée par la fenêtre. Dans une prochaine section, nous expliquerons comment changer ce comportement.

- -
-

Nous allons maintenant apprendre des nouvelles caractéristiques sur les boutons.

- -
-

« PrécédentSuivant »

-
- -

Interwiki

diff --git "a/files/fr/archive/mozilla/xul/tutoriel_xul/vues_d'arbre_personnalis\303\251es/index.html" "b/files/fr/archive/mozilla/xul/tutoriel_xul/vues_d'arbre_personnalis\303\251es/index.html" deleted file mode 100644 index da6a3f7744..0000000000 --- "a/files/fr/archive/mozilla/xul/tutoriel_xul/vues_d'arbre_personnalis\303\251es/index.html" +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Vues d'arbre personnalisées -slug: Archive/Mozilla/XUL/Tutoriel_XUL/Vues_d'arbre_personnalisées -tags: - - Tutoriel_XUL - - Tutoriels - - XUL -translation_of: Archive/Mozilla/XUL/Tutorial/Custom_Tree_Views ---- -

 

- -
-

« PrécédentSuivant »

-
- -

Les vues d'arbres permettent d'afficher des données dans une arborescence.

- -

Création d'une vue personnalisée

- -

Jusqu'à présent, nous avons utilisé la construction interne d'une vue d'arbre. Dans cette section, nous verrons la création d'une vue personnalisée. Elle devient nécessaire dès lors que la quantité de données devient trop importante ou que celles-ci soient arrangées de manière trop complexe. Par exemple, l'utilisation d'éléments treeitem ne serait plus viable en terme de performance avec plusieurs milliers de lignes. Vous pouvez également utiliser une vue personnalisée pour afficher des données obtenues par calculs. Puisque la vue peut stocker et récupérer de la meilleure manière possible les données en fonction de leur type, l'arbre peut être utilisé même si plusieurs milliers de lignes doivent être affichées.

- -
Note : les interfaces relatives aux arbres ont changé dans Gecko 1.8. Consultez Modifications de l'API Tree pour plus de détails.
- -

Pour implémenter une vue personnalisée, vous devez créer un objet qui implémente l'interface nsITreeView. Vous pouvez créer ces objets en javascript, mais vous aurez besoin d'un objet séparé pour chaque arbre. Naturellement, comme la vue d'arbre personnalisée est utilisée, la vue de contenu d'arbre ne le sera pas, donc les éléments treeitem, treerow et treecell n'auront aucun sens car la vue d'arbre obtient ses données ailleurs. Ainsi, vous pouvez simplement laisser l'élément treechildren vide. L'exemple suivant vous le montre :

- -
<tree id="my-tree" flex="1">
-  <treecols>
-    <treecol id="namecol" label="Nom" flex="1"/>
-    <treecol id="datecol" label="Date" flex="1"/>
-  </treecols>
-  <treechildren/>
-</tree>
-
- -

Pour assigner les données à afficher dans l'arbre, un objet de vue doit être créé, il sera utilisé pour indiquer la valeur de chaque cellule, le nombre total de lignes plus d'autres informations optionnelles. L'arbre appellera des méthodes de la vue pour obtenir les informations dont il a besoin pour son affichage.

- -

En général, bien que la vue d'arbre dispose de plus d'une trentaine de fonctions pouvant être implémentées, il vous suffira de ne définir que celles appelées par l'arbre. Les trois méthodes que vous devrez implémenter sont décrites ci-dessous :

- -
-
rowCount
-
Cette propriété doit se voir assigner le nombre total de lignes dans l'arbre.
-
getCellText( ligne, colonne )
-
Cette méthode doit retourner le texte contenu à la ligne et la colonne spécifiées. Elle sera appelée pour afficher les données de chaque cellule. Les lignes sont spécifiées par des valeurs numériques qui commencent à '0'. Les colonnes sont des objets TreeColumn. Dans les anciennes versions de Mozilla (antérieures à Firefox 1.5 ou Mozilla 1.8), les colonnes sont référencées par les valeurs de l'attribut id de la colonne. Si vous avez besoin d'un attribut id comme pour ces anciennes version, une propriété id peut être utilisée sur TreeColumn.
-
setTree( arbre )
-
Cette méthode est appelée une seule fois pour affecter l'objet arbre à la vue.
-
- -

Voici un exemple de définition d'un tel objet qui peut avoir le nom que vous souhaitez :

- -
//Moz 1.8
-var treeView = {
-    rowCount : 10000,
-    getCellText : function(row,column){
-      if (column.id == "namecol") return "Ligne "+row;
-      else return "18 février";
-    },
-    setTree: function(treebox){ this.treebox = treebox; },
-    isContainer: function(row){ return false; },
-    isSeparator: function(row){ return false; },
-    isSorted: function(){ return false; },
-    getLevel: function(row){ return 0; },
-    getImageSrc: function(row,col){ return null; },
-    getRowProperties: function(row,props){},
-    getCellProperties: function(row,col,props){},
-    getColumnProperties: function(colid,col,props){}
-};
-
- -

Les fonctions de l'exemple ci-dessus que nous n'avons pas décrites n'ont pas besoin d'effectuer une quelconque action, mais elles doivent être définies car l'arbre les appelle pour rassembler des informations supplémentaires.

- -

Cet exemple peut-être utilisé pour un arbre avec 10000 lignes. Le contenu des cellules de la première colonne sera 'Ligne X' où X sera le numéro de la ligne. Le contenu des cellules de la seconde colonne sera '18 février'. La structure if dans la fonction getCellText() compare la propriété id de l'argument column au texte 'namecol'. Ce texte 'namecol' correspond à l'id du premier élément treecol dans l'exemple précédent. Cet exemple est très simplifié bien sûr - en réalité vous aurez des données bien plus complexes dans chaque cellule.

- -

L'étape finale est d'associer l'objet de vue avec l'arbre. L'arbre a une propriété view, à laquelle on peut assigner l'objet déclaré ci-dessus. Nous pouvons assigner une valeur à cette propriété à tout moment pour attribuer une vue à l'arbre, ou en changer.

- -
function setView(){
-    document.getElementById('my-tree').view = treeView;
-}
-
- -

Le code source suivant présente l'exemple en entier. Un script intégré au fichier XUL a été utilisé ici pour simplifier l'exemple. En temps normal vous mettriez le script dans un fichier de script externe.

- -

Exemple d'arbre personnalisé

- -

Exemple 1 : Source Voir

- -
<?xml version="1.0" encoding="iso-8859-1"?>
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
-<window title="Exemple d'arbre" id="tree-window"
-   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-   onload="setView();">
-
-<script>
-//Moz 1.8
-var treeView = {
-    rowCount : 10000,
-    getCellText : function(row,column){
-      if (column.id == "namecol") return "Ligne "+row;
-      else return "18 février";
-    },
-    setTree: function(treebox){ this.treebox = treebox; },
-    isContainer: function(row){ return false; },
-    isSeparator: function(row){ return false; },
-    isSorted: function(){ return false; },
-    getLevel: function(row){ return 0; },
-    getImageSrc: function(row,col){ return null; },
-    getRowProperties: function(row,props){},
-    getCellProperties: function(row,col,props){},
-    getColumnProperties: function(colid,col,props){}
-};
-
-function setView(){
-    document.getElementById('my-tree').view = treeView;
-}
-</script>
-
-<tree id="my-tree" flex="1">
-  <treecols>
-    <treecol id="namecol" label="Nom" flex="1"/>
-    <treecol id="datecol" label="Date" flex="1"/>
-  </treecols>
-  <treechildren/>
-</tree>
-
-</window>
-
- -

Image:xultu_treeview1.png

- -

Sur l'image, vous voyez deux colonnes, chacune obtenant ses données par l'intermédiaire de la fonction getCellText(). La fonction setView() a été appelée par le gestionnaire onload de la fenêtre (window), mais vous pouvez aussi changer la vue plus tard si vous le souhaitez. Vous pouvez la changer à n'importe quel instant.

- -

Il faut noter que la fonction getCellText() est seulement appelée quand cela est nécessaire pour afficher le contenu. Dans l'exemple de 10000 lignes ci-dessus, getCellText() est seulement appelée pour les cellules qui sont actuellement affichées. Sur cette image, seules sept lignes sont affichées, donc la fonction getCellText() a été appelée 14 fois. Elle sera appelée pour les autres lignes lorsque l'utilisateur les fera défiler. Cette méthode rend l'arbre beaucoup plus efficace.

- -
Notez que l'objet de vue est aussi disponible pour des arbres prédéfinis dans votre installation. Vous pouvez les utiliser pour récupérer les libellés de leurs cellules et d'autres informations.
- -

L'interface nsITreeView liste toutes les méthodes et propriétés que vous pouvez implémenter pour la vue d'un arbre.

- -
-

Dans la prochaine section, nous verrons d'autres fonctionnalités des vues d'arbre.

- -
-

« PrécédentSuivant »

-
diff --git a/files/fr/archive/mozilla/xul/utilisation_de_nsixulappinfo/index.html b/files/fr/archive/mozilla/xul/utilisation_de_nsixulappinfo/index.html deleted file mode 100644 index 10f33316ad..0000000000 --- a/files/fr/archive/mozilla/xul/utilisation_de_nsixulappinfo/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Utilisation de nsIXULAppInfo -slug: Archive/Mozilla/XUL/Utilisation_de_nsIXULAppInfo -tags: - - Extensions -translation_of: Archive/Mozilla/XUL/Using_nsIXULAppInfo ---- -

-À partir de Mozilla/XULRunner 1.8, il existe une nouvelle manière de connaître l'application, sa version et la version de Gecko sur laquelle votre code tourne. -

Cela peut s'avérer utile, par exemple, dans le cas d'extensions prévues pour fonctionner sur plusieurs applications basées sur Mozilla ou différentes versions d'une même application. Ce n'est pas utile pour les scripts sur des pages Web, qui doivent utiliser l'objet navigator. -

-

L'interface nsIXULAppInfo

-

Pour faire la distinction entre différentes applications basées sur Mozilla, utilisez l'interface gelée nsIXULAppInfo. Les sections suivantes proposent quelques exemples d'utilisation de nsIXULAppInfo depuis JavaScript. -

Notez que si Firefox 1.5, Thunderbird 1.5, et les applications basées sur XULRunner 1.8 supportent nsIXULAppInfo, des applications plus anciennes comme Firefox et Thunderbird 1.0 ne le font pas. Vous devrez utiliser du code supplémentaire pour ces anciennes versions. -

-

Obtenir nsIXULAppInfo

-

Pour qu'un composant implémente nsIXULAppInfo, utilisez ce code : -

-
var appInfo = Components.classes["@mozilla.org/xre/app-info;1"]
-                        .getService(Components.interfaces.nsIXULAppInfo);
-
-

(Pour une explication, consultez cet article sur XUL Planet.) -

-

Des informations sur l'application

-

Après avoir obtenu le composant d'information sur l'application, vous pouvez lire ses propriétés pour connaître l'ID de l'application, son nom lisible par un humain, sa version, la plateforme utilisée, etc. Pour une liste complète des propriétés de nsIXULAppInfo, veuillez consulter la description de l'interface nsIXULAppInfo. -

-

ID

-

Vous pouvez connaître l'application sous laquelle vous tournez à l'aide de la propriété nsIXULAppInfo.ID. -

-
const FIREFOX_ID = "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}";
-const THUNDERBIRD_ID = "{3550f703-e582-4d05-9a08-453d09bdfdc6}";
-var appInfo = Components.classes["@mozilla.org/xre/app-info;1"]
-                        .getService(Components.interfaces.nsIXULAppInfo);
-if(appInfo.ID == FIREFOX_ID) {
-  // on est sous Firefox
-} else if(appInfo.ID == THUNDERBIRD_ID) {
-  // on est sous Thunderbird
-} else {
-  // c'est une autre application
-}
-
-

Note : vous auriez également pu utiliser nsIXULAppInfo.name, qui est un nom lisible par un humain pour l'application, comme « Firefox », mais qui sait, peut-être qu'il changera encore de nom ! -

-

Version

-

Dans certains cas, vous aurez besoin de connaître la version de l'application sous laquelle tourne votre code. Par exemple, une des fonctions non gelée que vous utilisez peut avoir changé. -

Note : nsIXULAppInfo fournit des informations concernant l'application et la plateforme, faites attention d'utiliser la bonne, particulièrement dans le cas d'applications basées sur XULRunner. -

Dans de tels cas, vous voudrez probablement vérifier nsIXULAppInfo.version et/ou nsIXULAppInfo.appBuildID. Cette dernière est utile si vous essayez de fonctionner avec des nightlies de développement de l'application, tandis que la premère est plutôt utile si vous prenez uniquement en compte les sorties officielles, et pour faire la distinction entre les compilations de branches particulières ou du tronc. -

Exemple 1 : vérification de la version de Firefox -

-
// en supposant qu'on tourne sous Firefox
-var appInfo = Components.classes["@mozilla.org/xre/app-info;1"]
-                        .getService(Components.interfaces.nsIXULAppInfo);
-var versionChecker = Components.classes["@mozilla.org/xpcom/version-comparator;1"]
-                               .getService(Components.interfaces.nsIVersionComparator);
-if(versionChecker.compare(appInfo.version, "1.5") >= 0) {
-  // il s'agit de Firefox 1.5 ou supérieur
-}
-
-

Exemple 2 : reconnaître les nightlies -

-
var appInfo = Components.classes["@mozilla.org/xre/app-info;1"]
-                        .getService(Components.interfaces.nsIXULAppInfo);
-if(appInfo.appBuildID >= "2005093006") {
-  // la compilation est postérieure ou égale à 2005093006
-}
-
-

Vous ne devriez pas vous baser sur les ID de compilation pour des versions officielles, car l'ID de compilation peut être différent pour des compilations personnalisées ou les version localisées d'une application. -

-

Version de la plateforme

-

nsIXULAppInfo fournit des informations de version à propos de l'application XUL (comme Firefox) et la plateforme (c'est-à-dire Gecko ou XULRunner). Par exemple, dans Firefox 1.5 beta 2 la version de l'application est 1.4.1 et la version de la plateforme est 1.8b5. Faites attention d'utiliser l'information dont vous avez besoin, particulièrement dans le cas d'applications basées sur XULRunner. -

L'obtention des informations de version sur la plateforme s'effectue ainsi : -

-
var appInfo = Components.classes["@mozilla.org/xre/app-info;1"]
-                        .getService(Components.interfaces.nsIXULAppInfo);
-var platformVer = appInfo.platformVersion;
-var platformBuildID = appInfo.platformBuildID;
-
-

<s id="old"> -</s>

<s id="old"> -

Versions plus anciennes

-

Comme indiqué plus haut, les anciennes application basées sur Mozilla 1.7 ne supportent pas nsIXULAppInfo. Vour aurez à écrire du code supplémentaire si vous choisissez de fonctionner avec ces versions. -

Par exemple, Firefox et Thunderbird 1.0 stockaient leur ID dans la préférence app.id (et leur version dans app.version), donc vous pouvez utiliser un code comme celui-ci pour savoir sous quelle application vous tournez : -

-
function getAppID() {
-  var id;
-  if("@mozilla.org/xre/app-info;1" in Components.classes) {
-    // on est sous Mozilla 1.8 ou supérieur
-    id = Components.classes["@mozilla.org/xre/app-info;1"]
-                   .getService(Components.interfaces.nsIXULAppInfo).ID;
-  } else {
-    try {
-      id = Components.classes["@mozilla.org/preferences-service;1"]
-                     .getService(Components.interfaces.nsIPrefBranch)
-                     .getCharPref("app.id");
-    } catch(e) {
-      // très ancienne version
-      dump(e);
-    }
-  }
-  return id;
-}
-alert(getAppID());
-
-

Voir aussi

- -
-
-</s> diff --git a/files/fr/archive/mozilla/xul/utilisation_de_plusieurs_dtd/index.html b/files/fr/archive/mozilla/xul/utilisation_de_plusieurs_dtd/index.html deleted file mode 100644 index b8a892ecf0..0000000000 --- a/files/fr/archive/mozilla/xul/utilisation_de_plusieurs_dtd/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Utilisation de plusieurs DTD -slug: Archive/Mozilla/XUL/Utilisation_de_plusieurs_DTD -tags: - - Localisation - - XUL -translation_of: Archive/Mozilla/XUL/Using_multiple_DTDs ---- -

Généralement il n'y a qu'un unique ficher DTD (Document Type Definition) pour la localisation d'un fichier XUL spécifique. Mais il existe des cas où l'utilisation de plusieurs DTD peut être nécessaire, comme par exemple pour la localisation de "widgets" couramment utilisés dans les fichiers XUL, en plus de ceux spécifiques au fichier à localiser.

- -

DTD unique

- -

Pour rendre localisables les chaînes de votre fichier XUL, vous devez ajouter une déclaration DTD au début du fichier comme ceci :

- -
<!DOCTYPE window SYSTEM "chrome://myextension/locale/mainwindow.dtd">
- -

où window est le nom local de l'élément (racine) du document.

- -

Par exemple, si vous avez une entité appelée someButton.label définie dans mainwindow.dtd, vous pouvez y accéder comme ceci :

- -
<button id="somebutton" label="&someButton.label">
-
- -

DTD multiples

- -

Si vous voulez utiliser plusieurs DTD pour votre fichier XUL, vous pouvez simplement lister tous les fichiers DTD dans votre déclaration DTD :

- -
<!DOCTYPE window [
-  <!ENTITY % commonDTD SYSTEM "chrome://myextensions/locale/common.dtd">
-  %commonDTD;
-  <!ENTITY % mainwindowDTD SYSTEM "chrome://myextension/locale/mainwindow.dtd">
-  %mainwindowDTD;
-]>
- -

Vous pouvez maintenant accéder aux entités déclarées dans les DTD comme indiqué ci-dessus. Supposons que vous avez une entité okButton.label définie dans le fichier common.dtd, alors l'accès aux entités des deux DTD ressemblera à cela :

- -
<button id="somebutton" label="&someButton.label">
-...
-<button id="okbutton" label="&okButton.label">
- -

Notez qu'il n'existe rien de comparable aux espaces de noms avec plusieurs DTD. Vous devez vous assurez qu'il n'y a pas de conflit entre les entités définies dans les différents DTD.

diff --git a/files/fr/archive/mozilla/xul/utilisation_du_correcteur_orthographique_dans_xul/index.html b/files/fr/archive/mozilla/xul/utilisation_du_correcteur_orthographique_dans_xul/index.html deleted file mode 100644 index 563925da26..0000000000 --- a/files/fr/archive/mozilla/xul/utilisation_du_correcteur_orthographique_dans_xul/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Utilisation du correcteur orthographique dans XUL -slug: Archive/Mozilla/XUL/Utilisation_du_correcteur_orthographique_dans_XUL -tags: - - Extensions -translation_of: Archive/Mozilla/XUL/Using_spell_checking_in_XUL ---- -

Une nouvelle fonction de correction orthographique est disponible dans Firefox 2. Ce document explique comment utiliser le composant mozISpellCheckingEngine pour permettre à vos extensions Firefox d'en bénéficier.

Consultez Contrôle du correcteur d'orthographe dans les formulaires HTML pour des détails sur l'activation du correcteur orthographique dans les formulaires HTML de vos sites Web. -

-

Vérification de l'orthographe d'un mot

-

Pour vérifier l'orthographe d'un mot, vous devez d'abord créer une interface vers le composant mozISpellCheckingEngine en utilisant @mozilla.org/spellchecker/myspell;1 comme ID de contrat, et appeler ensuite la méthode check() avec la chaine à vérifier. Cette méthode renvoie true si le mot est correctement orthographié, ou false dans le cas contraire. -

-
gSpellCheckEngine = Components.classes["@mozilla.org/spellchecker/myspell;1"]
-                    .getService(Components.interfaces.mozISpellCheckingEngine);
-gSpellCheckEngine.dictionary = 'en-US';
-
-if (gSpellCheckEngine.check("kat")) {
-    // Le mot est correctement écrit
-}
-else {
-    // Le mot n'est pas correctement écrit
-}
-
-

Obtention d'une liste de suggestions

-

Pour obtenir une liste de suggestions pour un mot incorrect, appelez la méthode suggest() en spécifiant le mot et un objet pouvant être rempli d'un tableau de suggestions possibles. -

-
var suggestions = {};
-gSpellCheckEngine.suggest("kat", suggestions);
-
-if (suggestions.value) {
-   // suggestions.value est un tableau JavaScript (objet Array) de chaines
-   // suggestions.value.length compte le nombre de suggestions trouvées
-}
-
-
-
diff --git a/files/fr/archive/mozilla/xul/vbox/index.html b/files/fr/archive/mozilla/xul/vbox/index.html deleted file mode 100644 index 87392e6beb..0000000000 --- a/files/fr/archive/mozilla/xul/vbox/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: vbox -slug: Archive/Mozilla/XUL/vbox -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/vbox ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Un élément conteneur qui peut contenir une infinité d'éléments enfants. C'est l'équivalent de l'élément box, sauf que son orientation par défaut est verticale. -

Vous trouverez plus d'informations dans le Tutoriel XUL.

-

Exemple

-
<!-- Deux labels en bas -->
-<vbox>
-  <spacer flex="1"/>
-  <label value="Un"/>
-  <label value="Deux"/>
-</vbox>
-
-

Attributs

- - - - - - -

Hérités de XUL element
-align, -allowevents, -allownegativeassertions, -class, -coalesceduplicatearcs, -collapsed, -container, -containment, -context, -contextmenu, -datasources, -dir, -empty, -equalsize, -flags, -flex, -height, -hidden, -id, -insertafter, -insertbefore, -left, -maxheight, -maxwidth, -menu, -minheight, -minwidth, -mousethrough, -observes, -ordinal, -orient, -pack, -persist, -popup, -position, -preference-editable, -querytype, -ref, -removeelement, -sortDirection, -sortResource, -sortResource2, -statustext, -style, -template, -tooltip, -tooltiptext, -top, -uri, -wait-cursor, -width

-
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Sujets liés

-
Éléments -
box, hbox -
-
-
diff --git a/files/fr/archive/mozilla/xul/vulgarisation_xul/index.html b/files/fr/archive/mozilla/xul/vulgarisation_xul/index.html deleted file mode 100644 index c5ab6b4c9f..0000000000 --- a/files/fr/archive/mozilla/xul/vulgarisation_xul/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Tutoriel de vulgarisation XUL -slug: Archive/Mozilla/XUL/Vulgarisation_XUL -translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School ---- -

Le projet XUL School a été développé par Glaxstar (maintenant Appcoast), comme un tutoriel complet de développement d'extensions, couvrant les aspects les plus significatifs de développement des extensions, y compris des techniques éprouvées et des normes de haute qualité. Appcoast a aimablement donné le contenu de ce projet, qui est maintenant publié sur le MDC selon ses licences de partage. Certains de ces contenus ont été modifiés à partir de sa source d'origine, et va probablement continuer à évoluer avec les contributions de la communauté.

-

Il vous est conseillé de bien lire en entier au moins une fois son contenu, et de vous repérez au contenu de référence, ainsi que de télécharger, étudier et tester les exemples de codes.

-

Contenu :

- -


diff --git a/files/fr/archive/mozilla/xul/vulgarisation_xul/introduction/index.html b/files/fr/archive/mozilla/xul/vulgarisation_xul/introduction/index.html deleted file mode 100644 index 7d4aed3de9..0000000000 --- a/files/fr/archive/mozilla/xul/vulgarisation_xul/introduction/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Introduction -slug: Archive/Mozilla/XUL/Vulgarisation_XUL/Introduction -translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction ---- -
-

Suivant »

-
-

Bonjour, et bienvenue sur le tutoriel de vulgarisation XUL pour les développeurs d'extension !

-

Ce tutoriel est destiné à être le tremplin qui va vous transformer en un développeur d'extensions professionnelles sous Firefox en peu de temps. Il contient des années d'expérience en XUL, en fournissant toutes sortes de solutions aux problèmes communs, et en décrivant les avantages et les inconvénients des différentes approches pour résoudre ces problèmes. Ce tutoriel reflète également une nouvelle manière de faire des extensions Firefox, profitant des nouvelles fonctionnalités et API que Firefox 3 fournit.

-

Ce tutoriel XUL a été créé par Glaxstar (maintenant Appcoast), l'une des rares entreprises spécialisée dans l'élaboration d'extensions de haute qualité pour Firefox. Une équipe de plus d'une douzaine de développeurs XUL de chez Glaxstar ont participé en même temps à ce tutoriel, et l'ensemble des expériences des années de création d'extensions Firefox sont reflétées ici.

-

Dans ce tutoriel, vous apprendrez à développer des extensions Firefox. Vous apprendrez comment faire rapidement les tâches les plus communes dans le développement d'extensions, en comparant plusieurs approches différentes pour les résoudre. Dans la plupart des cas, nous vous fournirons des exemples de code que vous pouvez facilement copier et adapter à vos besoins, ainsi que certains exemples fonctionnels d'extensions. Le tutoriel vise à être aussi bref que possible, en faisant des renvois fréquent sur la documentation de Mozilla pour plus d'informations. Vous pouvez penser que c'est un guide trop court face au monde vaste qui est la plate-forme Mozilla. La plupart des liens dans cette documentation sont destinés à être ouverts et lus, puisque nous ne cherchons pas à être exhaustif.

-

Nous allons commencer par une brève introduction à certains concepts clés, au cas où vous n'êtes pas familier avec Mozilla et Firefox. Vous pouvez ignorer ces sections si vous les connaissez déjà.

-

Mozilla and Firefox

-

Le terme Mozilla sert à définir plusieurs concepts : le projet Mozilla, la fondation Mozilla, la Mozilla Corporation et le vieux navigateur Mozilla. Même Firefox est parfois appelé "Mozilla". Si vous n'êtes pas familier avec ces termes, il est bon que vous prendre un peu de temps et d'en apprendre un peu plus sur Mozilla. Cela vous aidera à comprendre la culture qui entoure la communauté Mozilla.

-

Mozilla a donné naissance à plusieurs produits et projets, le plus important étant le navigateur Web Mozilla Firefox, qui est actuellement le deuxième navigateur le plus utilisé dans le monde, avec une base d'utilisateurs très importante et croissante et un nombre de contributeurs et une communauté de développeurs très importants et croissants. Firefox est l'un des projet libre les plus réussis dans l'histoire, combinant l'ouverture, aux normes de conformité et de la sophistication de l'open source en mettant l'accent sur l'expérience utilisateur et sur un marketing puissant d'offres commerciales.

-

La version 1.0 de Firefox a été publiée en Novembre 2004, la version 2.0 en Octobre 2006, et la version 3.0 en Juin 2008. La version 3.0 comprend une grande variété de modifications, dont certaines ne sont pas rétro-compatibles, donc vous devez en tenir compte lors du développement d'extensions. Ce tutoriel se concentre sur le développement de Firefox 3.0 et suivant, mais une majorité de son contenu s'applique également pour Firefox 2 et Firefox 1. Le tutoriel précisera quand une solution ne fonctionne que sur certaines versions les plus récentes de Firefox.

-
-

Nous vous recommandons de développer vos extensions pour Firefox 3 et plus. Les utilisateurs de Firefox 3 seront bientôt la majorité des utilisateurs de Firefox, et les avantages d'utiliser les nouvelles fonctionnalités de Firefox 3 sont importants.

-
-

XUL

-

XUL (prononcez «zool») est l'une des nombreuses technologies utilisées pour créer des produits et des extensions basés sur Mozilla. C'est seulement une partie de l'environnement de développement, mais étant donné qu'il est pratiquement exclusif à Mozilla, il tend à être utilisé pour identifier tous les développements liés à Mozilla. Vous verrez parfois écrit des termes comme "applications XUL" et "extensions XUL", mais rarement ils vont se référer à des projets qui sont exclusivement construits avec XUL. Cela signifie généralement que les projets ont été construits en utilisant les technologies Mozilla. Même ce tutoriel couvre plusieurs autres technologies telles que JavaScript, CSS, XBL et XPCOM.

-

Gecko

-

Le moteur Gecko est la partie de Firefox utilisée pour le rendu des pages Web et sa propre interface utilisateur. Vous pouvez identifier le niveau de compatibilité des standards du Web dans les navigateurs basés sur Gecko en regardant leur chaîne d'agent utilisateur, qui devrait inclure la version Gecko. Les versions de Gecko sont indépendantes des versions de Firefox, et vous pouvez voir une cartographie des versions de Firefox et les versions Gecko sur la page Gecko. La chaîne d'agent utilisateur pour Firefox au moment d'écrire ces lignes (en anglais américain, Mac OS X) est la suivante :

-

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6

-

La section en surbrillance est la version Gecko: 1.9.2. Vous pouvez lire et copier la chaîne de l'agent utilisateur de n'importe quelle fenêtre de Firefox, en choisissant "? > À propos de Mozilla Firefox" dans le menu principal ("Firefox > À propos de Mozilla Firefox", sur Mac).

-

XULRunner

-

Firefox et d'autres applications Mozilla peuvent être considérés comme composés de deux parties distinctes : une couche d'interface utilisateur qui est distincte pour chaque projet, et une plate-forme commune sur laquelle la couche d'interface est construite. Cette plate-forme est connue sous le nom de XULRunner. XULRunner inclut le moteur de rendu Gecko, la bibliothèque réseau Necko, et plusieurs autres composants qui permettent aux gestionnaires de fichiers OS indépendant, l'accessibilité et la localisation, entre autres. C'est cette plate-forme très puissante qui a permis une croissance rapide de la communauté de développement autour de Mozilla et Firefox.

-

XULRunner est disponible sous forme binaire sur la page XULRunner, et il est la base de plusieurs projets, tels que Songbird, Miro et Eudora. Il y a une liste très complète d'applications XULRunner dans le Hall of Fame XULRunner.

-

Sur le tutoriel

-

Avec ce rappel des concepts de base, nous pouvons maintenant aller droit au développement d'extensions. Vous êtes probablement encore à vous demander qu'est-ce qu'est exactement une extension, ce qu'elle fait, et comment vous pouvez en faire. Eh bien, tout ce tutoriel est consacré à vous l'expliquer.

-

Bienvenue dans le monde du développement d'extensions. Maintenant, allons-y.

-
-

Suivant »

-
-

Ce tutoriel a été gracieusement offert à Mozilla par Appcoast.

diff --git a/files/fr/archive/mozilla/xul/vulgarisation_xul/l'essentiel_d'une_extension/index.html b/files/fr/archive/mozilla/xul/vulgarisation_xul/l'essentiel_d'une_extension/index.html deleted file mode 100644 index 455bc53fb1..0000000000 --- a/files/fr/archive/mozilla/xul/vulgarisation_xul/l'essentiel_d'une_extension/index.html +++ /dev/null @@ -1,412 +0,0 @@ ---- -title: L'essentiel d'une extension -slug: Archive/Mozilla/XUL/Vulgarisation_XUL/L'essentiel_d'une_extension -translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension ---- -
-

« PrécédentSuivant »

-
- -

Le fichier install.rdf

- -

Dans la section précédente, nous avons examiné le contenu de l'extension "Hello World". Maintenant, nous allons examiner dans son code et ses fichiers, en commençant par le fichier install.rdf. Vous pouvez l'ouvrir avec n'importe quel éditeur de texte.

- -

Le fichier est formaté selon un type particulier XML appelé RDF. RDF est utilisé pour le mécanisme de stockage centralisé pour Firefox, mais il est maintenant remplacé par un système plus simple de base de données. Nous aborderons ces deux systèmes de stockage plus loin dans le tutoriel.

- -

Maintenant, regardons les parties importantes du fichier.

- -
-
-
<em:id>helloworld@xulschool.com</em:id>
-
-
- -

Il s'agit d'un identifiant unique pour l'extension. Firefox en a besoin pour distinguer votre extension des autres, il est donc nécessaire que cet identifiant soit unique.

- -

Il existe deux normes acceptées pour les IDS des extensions. Le premier est le format de type e-mail comme dans l'exemple "Hello World", qui devrait être quelque chose comme <project-name>@<yourdomain>. L'autre pratique standard consiste à utiliser une chaîne UUID générée qui est extrêmement peu probable à être reproduite. Les systèmes basés sur Unix ont un outil en ligne de commande appelé uuidgen qui génère des UUIDs. Il existe également des outils téléchargeables disponibles pour toutes les plates-formes pour les générer. Les crochets entourant ne sont que la notation, et il s'agit d'une simple notation courante. Tant que votre id a une certaine unicité, il est possible d'utiliser l'une des deux formes.

- -
-
-
<em:name>XUL School Hello World</em:name>
-<em:description>Welcome to XUL School!</em:description>
-<em:version>0.1</em:version>
-<em:creator>Appcoast</em:creator>
-<em:homepageURL>https://developer.mozilla.org/en/XUL_School</em:homepageURL>
-
-
- -

Il s'agit des données qui sont affichées avant et après l'installation de l'extension, et que vous pouvez voir dans la fenêtre des modules complémentaires. L'URL de la page d'accueil peut être visité par un clic droit sur l'extension et en choisissant Visitez la page Web. Il y a beaucoup d'autres balises pouvant être ajoutées, pour les auteurs et les traducteurs. La spécification complète du fichier install.rdf contient tous les détails.

- -

Comme les extensions peuvent être traduites en plusieurs langues, il est souvent nécessaire de traduire la description de l'extension, ou même son nom. Sur Firefox 3 et suivant, une description localisée et un nom peuvent être ajoutés par le code suivant :

- -
-
-
<em:localized>
-  <Description>
-    <em:locale>es-ES</em:locale>
-    <em:name>XUL School Hola Mundo</em:name>
-    <em:description>Bienvenido a XUL School!</em:description>
-  </Description>
-</em:localized>
-
-
- -

La chaîne de localisation es-ES indique que la langue est l'espagnol (es) pour l'Espagne (ES). Vous pouvez ajouter autant de sections <em:localized> que vous avez besoin. Pour Firefox 2, la localisation de ce fichier est un peu plus compliqué. Nous verrons la localisation plus loin dans cette section.

- -
-
-
<em:type>2</em:type>
-
-
- -

Ceci précise que le module en cours d'installation est une extension. Vous pouvez consulter les différents types possibles dans la spécification install.rdf.

- -
-
-
<em:targetApplication>
-  <Description>
-    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
-    <em:minVersion>3.0</em:minVersion>
-    <em:maxVersion>3.6.*</em:maxVersion>
-  </Description>
-</em:targetApplication>
-
-
- -

Ce nœud spécifie l'application cible et les versions cibles de l'extension, en particulier Firefox de la version 3.0 au versions 3.6.*. L'UUID est l'ID unique de Firefox. Les autres applications Mozilla et basées sur Mozilla telles que Thunderbird et Seamonkey ont le leurs. Vous pouvez avoir une extension qui fonctionne sur de multiples applications et versions. Par exemple, si vous créez une extension de Firefox, il faudrait normalement peu d'effort pour la porter sur Flock ou sur SeaMonkey, qui ont une interface utilisateur et des caractéristiques très similaires.

- -

Le min et max de la version spécifie l'étendue des versions où l'extension peut être installée. Des détails sont disponibles sur le format de version. Si l'application ou la plage de version ne correspondent pas, vous ne serez pas autorisé à installer l'extension, ou l'extension sera installée dans un état désactivé. Les utilisateurs peuvent désactiver les contrôles version grâce à des préférences ou d'installer des modules complémentaires comme Add-on Compatibility Reporter.

- -

Ce sont les seules informations dont Firefox et d'autres applications Mozilla ont besoin pour installer un module complémentaire. Toutes erreurs ou manques d'information entraînent un échec du processus d'installation, ou laissent l'extension s'installer dans un état désactivé.

- -

Le fichier chrome.manifest

- -
-

Le chrome est l'ensemble des éléments de l'interface utilisateur d'une application qui sont situés en dehors de la zone de contenu d'une fenêtre. Les barres d'outils, les barres de menus, les barres de progression, et les titres de fenêtres sont tous des exemples d'éléments qui font habituellement partie du chrome.

-
- -

Citation de Enregistrement Chrome.

- -

En d'autres termes, le chrome correspond à tout ce que vous voyez dans Firefox. Toutes les fenêtres Firefox peuvent être considérées comme ayant deux parties : (1) le chrome et (2) peut-être une zone de contenu, comme celui qui affiche les pages Web dans un onglet Firefox. Les fenêtres comme le gestionnaire de modules complémentaires et de la fenêtre de téléchargements sont en chrome pur. La plupart du code pour une extension réside dans le dossier chrome, tout comme dans l'exemple Hello World.

- -

Les fichiers Chrome sont tous empaquetés dans une archive JAR, généralement nommée d'après l'extension. Il n'est pas nécessaire d'empaqueter les fichiers chrome, mais c'est une pratique courante et recommandée pour des raisons de performances.

- -

Comme nous l'avons vu dans la structure des répertoires de l'extension décompressée, le chrome est composé de 3 sections : content, locale et skin. Les 3 sont nécessaires pour la plupart des extensions. Si nous ouvrons le fichier chrome.manifest (encore une fois, un éditeur de texte fera l'affaire), nous voyons que les 3 mêmes sections sont mentionnés :

- -
-
-
content   xulschoolhello              jar:chrome/xulschoolhello.jar!/content/
-skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/
-locale    xulschoolhello  en-US       jar:chrome/xulschoolhello.jar!/locale/en-US/
-
-
- -

Le fichier chrome.manifest indique à Firefox où chercher les fichiers chrome. Le texte est espacé pour ressembler à un tableau, mais ce n'est pas nécessaire. L'analyseur ignorera les espaces répétées.

- -

Le premier mot d'une ligne indique à Firefox ce qui est déclaré (le contenu, le thème graphique, la langue, ou d'autres choses que nous verrons plus loin). Le second est le nom du paquet, que nous expliquerons bientôt. Les paquets des thèmes et langages ont une troisième valeur afin de définir ce qu'ils étendent. Il peut y avoir plusieurs thèmes ou langages. Le cas le plus fréquent est d'avoir une seule entrée pour le thème correspondant au thème global classic/1.0, et des entrées multiples de langages, une pour chaque langue. Enfin, l'emplacement est spécifié. Note sur le schéma jar: ; il indique à Firefox de d'ouvrir le fichier JAR et de lire les fichiers à leur emplacement. Si vous voulez avoir une extension avec un répertoire chrome non empaqueté, il vous suffit de modifier les chemins d'accès en quelque chose comme chrome/ content/.

- -

Quelques options supplémentaires peuvent être inclues dans les entrées d'un fichier chrome.manifest. Elles sont documentées dans la page Enregistrement Chrome. Notamment, nous pouvons avoir des entrées qui sont spécifiques à l'OS. Ceci est important, spécialement dans Firefox 3 et plus, où l'apparence du navigateur est très différente selon le système d'exploitation. Si notre extension doit avoir une apparence différence sur d'autres systèmes, nous pourrions modifier le fichier manifest comme ceci :

- -
-
-
content   xulschoolhello              jar:chrome/xulschoolhello.jar!/content/
-skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/
-skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/ os=Darwin
-skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/ os=WinNT
-locale    xulschoolhello  en-US       jar:chrome/xulschoolhello.jar!/locale/en-US/
-
-
- -

De cette façon, nous pouvons avoir des thèmes graphiques  distincts pour Windows, Mac OS X, et Linux (ainsi que d'autres systèmes de type Unix), définis chacun dans un répertoire distinct. Comme la plupart des autres systèmes sont basés sur Unix, le thème "unix" est la valeur par défaut, sans drapeaux.

- -

Le Chrome

- -

Comme mentionné précédemment, le chrome est composé de 3 sections : le contenu, le langage et le thème. Le contenu est la section la plus importante, contenant les fichiers de l'interface utilisateur (XUL) et du script (JS). La section du thème contient les fichiers définissant principalement l'apparence graphique de l'interface utilisateur (en utilisant le CSS et les images, tout comme les pages Web). Enfin, la section du langage regroupe tous les textes utilisés dans l'extension, dans des fichiers DTD et properties. Cette division permet aux développeurs de créer d'autres thèmes graphiques, et aux traducteurs de créer des versions dans des langues différentes, tout cela sans avoir à modifier votre extension ou votre code. Cela donne aux extensions Firefox beaucoup de flexibilité.

- -

Les fichiers Chrome sont accessibles via le protocole chrome. Les URIs chrome sont définis comme suit 

- -
-
-
chrome://packagename/section/path/to/file
-
-
- -

Ainsi, par exemple, si je veux accéder au fichier browserOverlay.xul dans l'extension, l'URI chrome serait chrome://xulschoolhello/content/browserOverlay.xul. Si vous avez trop de fichiers dans le contenu et vous souhaitez les organiser en sous-répertoires, il n'y a rien à changer de chrome.manifest, il vous suffit d'ajouter le chemin correspondant après content dans l'URI. Les fichiers des thèmes ou de langages fonctionnent de la même manière, et vous n'avez pas besoin de spécifier leurs noms exacts. Ainsi, pour accéder au fichier DTD dans l'exemple Hello World, le chemin de chrome est chrome://xulschoolhello/locale/browserOverlay.dtd. Firefox sait de quel fichier de traduction il s'agit.

- -

Voici une expérience intéressante. Ouvrez un nouvel onglet Firefox, tapez chrome://mozapps/content/downloads/downloads.xul dans votre barre d'adresse et appuyez sur ENTRER. Surpris ? Vous venez d'ouvrir la fenêtre des Téléchargements dans un onglet Firefox ! Vous pouvez accéder à un fichier chrome en tapant simplement son URI dans la barre d'adresse. Cela peut être utile si vous voulez inspecter les fichiers de script qui font partie de Firefox, d'autres extensions, ou de la votre. La plupart de ces fichiers sont ouverts sous forme de fichiers texte, à l'exception des fichiers XUL qui sont exécutés et affichés comme vous les verriez normalement sur une fenêtre.

- -

Content

- -

Il y a 2 fichiers dans le répertoire content. Regardons le premier fichier XUL.

- -

Les fichiers XUL sont des fichiers XML qui définissent les éléments de l'interface utilisateur dans Firefox et les extensions Firefox. XUL a été inspiré par le HTML, donc vous verrez beaucoup de similitudes entre les deux. Cependant, XUL est aussi une amélioration par rapport à HTML, ayant appris de bon nombre des erreurs commises durant l'évolution de HTML. XUL permet de créer des interfaces plus riches et plus interactives que celles que vous pouvez créer avec le langage HTML, ou tout au moins XUL les rend plus facile.

- -

Les fichiers XUL définissent généralement l'une des deux choses suivantes : les fenêtres ou les superpositions (overlay). Le fichier que vous avez ouvert précédemment, downloads.xul, a un code qui définit la fenêtre de téléchargements. Le fichier XUL inclus dans l'extension Hello World est une superposition. Une superposition étend une fenêtre existante, en ajoutant de nouveaux éléments ou en remplaçant certains des éléments qu'elle contient. La ligne que nous avons sauté dans les lignes du fichier chrome.manifest décrit que ce fichier XUL est une superposition de la fenêtre principale du navigateur :

- -
-
-
overlay chrome://browser/content/browser.xul  chrome://xulschoolhello/content/browserOverlay.xul
-
-
- -

With this line, Firefox knows that it needs to take the contents of browserOverlay.xul and overlay it on the main browser window, browser.xul. You can declare overlays for any window or dialog in Firefox, but overlaying the main browser window is the most common case by far.

- -

Now let's look at the contents of our XUL file. We'll skip the first few lines because they relate to skin and locale, which we'll cover later.

- -
-
-
<overlay id="xulschoolhello-browser-overlay"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
-
- -

The root element in the file is an overlay. Other XUL documents use the window or dialog tag. The element has a unique id, which you should have on most elements in your XUL. The second attribute is the namespace, which is something you should always define in your XUL root element. It says that this node and all child nodes are XUL. You only need to change namespace declarations when you combine different types of content, such as XUL with HTML or SVG.

- -
-
-
You may have noticed the naming we use on several places, such as the id xulschoolhello-browser-overlay. This is the namespacing standard that we use to avoid conflicts with Firefox and other extensions, as well as making some development tasks easier. We namespace all ids and style classes in overlay elements because they will be mixed with other elements in the main browser window. If we used generic ids like container or input, they will likely conflict with ids used within Firefox, or with ids from other extension overlays. Using namespaces minimizes compatibility problems with other extensions. We use camel casing for file names, and all lower case with dashes for element ids and CSS style class names.
-
-
- -
-
-
<script type="application/x-javascript"
-  src="chrome://xulschoolhello/content/browserOverlay.js" />
-
-
- -

Just like in HTML, this includes a JavaScript script file. You can have as many script elements on a XUL file as you need. We'll look into its code later.

- -
-
-
You also probably noticed how we format our code, and wonder about the rules we follow. Our general rule on line length is not having lines longer than 80 characters. This feels very restrictive, specially with XML files, but the number was chosen to allow pretty much any text editor to handle these files easily. Even old command line editors work well with files that cut their lines at 80 characters. The tabulation is very straightforward: 2 blank space indents. We never use actual tab characters, with the exception of Makefiles, which will be covered later on. Most of our coding standards are based on Mozilla's or other known and used standards.
-
-
- -

 We'll skip some code that is covered in the locale section, moving on to the most important part of the content:

- -
-
-
<menubar id="main-menubar">
-  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
-    accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu">
-    <menupopup>
-      <menuitem id="xulschoolhello-hello-menu-item"
-        label="&xulschoolhello.hello.label;"
-        accesskey="&xulschoolhello.helloItem.accesskey;"
-        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
-    </menupopup>
-  </menu>
-</menubar>
-
-
- -

This is the code that adds the Hello World menu to the browser window. In order to write this code, we needed some knowledge of the XUL code in browser.xul. We needed to know that the id of the main menu is main-menubar. We're adding a menu of our own, and telling Firefox to add it in the main menu bar, right after the Help menu. That's the purpose of the attribute:

- -
-
-
insertafter="helpMenu"
-
-
- -

helpMenu is the id of the menu element that corresponds to the Help menu in the main menu of the browser. We'll see later how we can find out things like the ids of browser elements, but for now let's look at the elements that compose the Hello World menu.

- -

The menubar element represents the menu bar you normally see at the top of an application window. The main Firefox window has one, but few of its other windows do. It's also rare for additional extension windows to have their own menu bars.

- -

We added the Hello World menu right in the "root" of the menu bar so that it would be very easy for you to spot it, but this is not a recommended practice. Imagine if all extensions added menus to the top menu bar; having a few extensions would make the menu look like an airplane dashboard, full of options. The recommended location for extension menus is under the Tools menu, so the code should really look like this:

- -
-
-
<menupopup id="menu_ToolsPopup">
-  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
-    accesskey="&xulschoolhello.helloMenu.accesskey;"
-    insertafter="javascriptConsole,devToolsSeparator">
-    <menupopup>
-      <menuitem id="xulschoolhello-hello-menu-item"
-        label="&xulschoolhello.hello.label;"
-        accesskey="&xulschoolhello.helloItem.accesskey;"
-        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
-    </menupopup>
-  </menu>
-</menupopup>
-
-
- -

We're overlaying a menu that is deeper into the XUL tree, but it doesn't matter because all we need is the id of the element we want to overlay. In this case it is the menupopup element that's inside of the Tools menu element. The insertafter attribute tells Firefox to add the menu below the Error Console item (formerly known as JavaScript Console) in the Tools menu, just like recommended in the Extension Etiquette page. We'll discuss more about menus later on in the tutorial. For now let's focus on the following line:

- -
-
-
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);"
-
-
- -

This attribute defines an event handler. The command event is the most frequently used in Firefox, since it corresponds to the main action for most UI elements. The value of the attribute is JavaScript code that invokes a function. This function is defined in the JS file that was included with the script tag. The JS function will be called once the user clicks on the menu item in the Hello World menu. All event handlers define a special object named event, which is usually good to pass as an argument to the function. Event handlers are explained in grater depth further ahead.

- -

Now let's look at the JavaScript file and see what's going on when the event is fired.

- -
-
-
/**
- * XULSchoolChrome namespace.
- */
-if ("undefined" == typeof(XULSchoolChrome)) {
-  var XULSchoolChrome = {};
-};
-
-
- -

The XULSchoolChrome namespace is defined. All objects and variables we define in this JavaScript are global, meaning that scripts in Firefox and other extensions can see them and interact with them. This also means that if we define an object called MenuHandler or some other generic name, it's likely going to conflict with an existing object. What we do here is define a single global object: XULSchoolChrome. Now we know that all of our objects are inside this object, which is unlikely to be duplicated or overwritten by other extensions.

- -

You can read more about the typeof operator. If you're unfamiliar with JavaScript or this particular syntax, initializing an object as {} is the equivalent of initializing it to new Object().

- -
-
-
/**
- * Controls the browser overlay for the Hello World extension.
- */
-XULSchoolChrome.BrowserOverlay = {
-
-
- -

Finally, BrowserOverlay is our object. Naming and referencing  objects in such a long and verbose manner can feel uncomfortable at first, but it's worth the cost.

- -
-
-
We use Javadoc style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.
-
-
- -
-
-
sayHello : function(aEvent) {
-  let stringBundle = document.getElementById("xulschoolhello-string-bundle");
-  let message = stringBundle.getString("xulschoolhello.greeting.label");
-
-  window.alert(message);
-}
-
-
- -

And, finally, this is our function declaration. Three lines of code are all we need for it to work. The first line in the body of the function declares a variable that will hold the stringbundle element defined in the overlay. The variable is declared using let, which is similar to var but with more restricted scope. Here you can read more about let declarations. It's worth noting that this is a relatively new addition to JavaScript in Firefox and you should use var if you're creating an extension compatible with very old versions.

- -

Just like in regular JS, we can use the DOM (Document Object Model) in order to manipulate the XUL document. First we get a reference of the stringbundle element in the document. This is a special element that allows us to obtain localized strings dynamically, by only providing a "key" that identifies the string. This is what we do on the second line. We call the getString method of the bundle element and get the localized message to be displayed. We then call the window.alert function with the message, just like we would do in an HTML document.

- -

Locale

- -

There are two types of locale files: DTD and properties, and in this example we use them both. DTD is the most efficient way of showing text in XUL, so you should use it whenever possible. It is somewhat inflexible so it can't be used for dynamically generated text, hence the need for an alternate way of getting localized strings.

- -

Looking back at the menu code, you probably noticed some attributes such as this:

- -
-
-
label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;"
-
-
- -

These attributes define the text that you see on the menus, and they are string keys that are defined in our DTD file, browserOverlay.dtd. The DTD file was included in the XUL file with the following code:

- -
-
-
<!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" >
-
-
- -

And in the DTD file you can see the association between keys and localized strings:

- -
-
-
<!ENTITY xulschoolhello.hello.label            "Hello World!">
-<!ENTITY xulschoolhello.helloMenu.accesskey    "l">
-<!ENTITY xulschoolhello.helloItem.accesskey    "H">
-
-
- -

Notice that on the XUL file you enclose the string key with & and ; while on the DTD file you only specify the key. You may get weird parsing errors or incorrect localization if you don't get it right.

- -

Access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard. They are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. You can easily recognize the access keys on Windows because the letter that corresponds to the access key is underlined, as in the following image:

- -
-

-
- -

Most user interface controls have the accesskey attribute, and you should use it. The value of the access key is localized because it should match a letter in the label text. You should also be careful to avoid access key repetition. For example, within a menu or submenu, access keys should not be repeated. In a window you have to be more careful picking access keys because there are usually more controls there. You have to be specially careful when picking access keys on an overlay. In our case, we can't use the letter "H" as an accesskey in the Main menu item, because it would be the same as the access key in the Help menu. Same goes with "W" and the Window menu on Mac OS. So we settled on the letter "l".

- -

DTD strings are resolved and set when the document is being loaded. If you request the label attribute value for the Hello World menu using DOM, you get the localized string, not the string key. You cannot dynamically change an attribute value with a new DTD key, you have to set the new value directly:

- -
-
-
let helloItem = document.getElementById("xulschoolhello-hello-menu-item");
-
-// The alert will say "Hello World!"
-alert(helloItem.getAttribute("label"));
-// Wrong
-helloItem.setAttribute("label", "&xulschoolhello.hello2.label;");
-// Better
-helloItem.setAttribute("label", "Alternate message");
-// Right!
-helloItem.setAttribute("label", someStringBundle.getString("xulschoolhello.hello2.label"));
-
-
- -

This is the reason DTD strings are not a solution for all localization cases, and the reason we often need to include string bundles in XUL files:

- -
-
-
<stringbundleset id="stringbundleset">
-  <stringbundle id="xulschoolhello-string-bundle"
-    src="chrome://xulschoolhello/locale/browserOverlay.properties" />
-</stringbundleset>
-
-
- -

The stringbundleset element is just a container for stringbundle elements. There should only be one per document, which is the reason why we overlay the stringbundleset that is in browser.xul, hence the very generic id. We don't include the insertbefore or insertafter attributes because the ordering of string bundles doesn't make a difference. The element is completely invisible. If you don't include any of those ordering attributes in an overlay element, Firefox will just append your element as the last child of the parent element.

- -

All you need for the string bundle is an id (to be able to fetch the element later) and the chrome path to the properties file. And, of course, you need the properties file:

- -
-
-
xulshoolhello.greeting.label = Hi! How are you?
-
-
- -

The whitespace around the equals sign is ignored. Just like in install.rdf, comments can be added using the # character at the beginning of the line. Empty lines are ignored as well.

- -

You will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat related to the extension. For example: "Found 5 words matching the search query". Your first idea would probably be to simply concatenate strings, and have one "Found" property and another "words matching..." property. This is not a good idea. It greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence entirely. For this reason it's better to use parameters in the properties:

- -
-
-
xulshoolhello.search.label = Found %S words matching the search query!
-
-
- -

Then you use getFormattedString instead of getString in order to get the localized string. Thanks to this we don't need to have multiple properties, and life is easier for translators. You can read more about it on the Text Formatting section of the XUL Tutorial. Also have a look at the Plurals and Localization article, that covers a new localization feature in Firefox 3 that allows you to further refine this last example to handle different types of plural forms that are also language-dependent.

- -

Skin

- -

Styling XUL is very similar to styling HTML. We'll look into some of the differences when we cover the XUL Box Model, and other more advanced topics. There isn't much styling you can do to a minimal menu and a very simple alert message, so the Hello World extension only includes an empty CSS file and the compulsory global skin file:

- -
-
-
<?xml-stylesheet type="text/css" href="chrome://global/skin/"  ?>
-<?xml-stylesheet type="text/css"
-  href="chrome://xulschoolhello/skin/browserOverlay.css"  ?>
-
-
- -

The global skin CSS file holds the default styles for all XUL elements and windows. Forgetting to include this file in a XUL window usually leads to interesting and often unwanted results. In our case we don't really need to include it, since we're overlaying the main browser XUL file, and that file already includes this global CSS. At any rate it's better to always include it. This way it's harder to make the mistake of not including it. You can enter the chrome path in the location bar and inspect the file if you're curious.

- -

This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.

- -

Exercise

- -

Change the welcome message that is displayed in the alert window and move the Hello World menu to the Tools Menu, where it belongs. Repackage the XPI and re-install it. You can just drag the XPI file to the browser and it will be installed locally. Test it and verify your changes worked. If you run into problems at installation, it's likely that you didn't reproduce the XPI structure correctly, maybe adding unnecessary folders.

- -

Once you're done, you can look at this reference solution: Hello World 2.

- -
-

« PrécédentSuivant »

-
- -

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/fr/archive/mozilla/xul/vulgarisation_xul/premiers_pas_avec_les_extensions_firefox/index.html b/files/fr/archive/mozilla/xul/vulgarisation_xul/premiers_pas_avec_les_extensions_firefox/index.html deleted file mode 100644 index 417c76133f..0000000000 --- a/files/fr/archive/mozilla/xul/vulgarisation_xul/premiers_pas_avec_les_extensions_firefox/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Premiers pas avec les extensions Firefox -slug: Archive/Mozilla/XUL/Vulgarisation_XUL/Premiers_pas_avec_les_extensions_Firefox -translation_of: >- - Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions ---- -
-

« PrécédentSuivant »

-
- -

Qu'est-ce qu'une extension Firefox ?

- -
-

Les extensions ajoutent de nouvelles fonctionnalités à des applications Mozilla telles que Firefox et Thunderbird. Elles peuvent ajouter n'importe quoi depuis le bouton d'une barre d'outils à une fonctionnalité entièrement nouvelle. Ils permettent à l'application d'être personnalisée pour répondre aux besoins personnels de chaque utilisateur en fonctionnalités supplémentaires, tout en gardant des applications légères à télécharger.

-
- -

Telle que décrit dans le texte cité, une extension est une petite application qui ajoute quelque chose de nouveau à une ou plusieurs applications Mozilla. Ce tutoriel se concentre sur des extensions pour Firefox, mais les mêmes (ou très similaires) principes s'appliquent à la création d'extensions pour d'autres applications comme Thunderbird, SeaMonkey, et Flock.

- -

Il est également intéressant de noter qu'il existe des différences entre la définition d'extension et de module complémentaire. Toutes les extensions sont des modules complémentaires, mais des modules complémentaires peuvent également être des thèmes, des plugins, ou paquetages de langue. Ce tutoriel porte sur le développement d'extensions, mais les thèmes et les paquetages de langues sont développés de manière très similaire. Les plugins sont tout à fait différents, et ils ne seront pas abordés dans ce tutoriel. Vous pourrez en savoir plus sur les plugins et leur développement dans la page Plugins.

- -

Firefox fournit une architecture très riche et flexible qui permet aux développeurs d'extensions d'ajouter des fonctionnalités avancées, de personnaliser l'expérience de l'utilisateur, et de remplacer ou d'enlever complètement des parties de votre navigateur. Le référentiel Mozilla Add-ons (AMO) regroupe un grand nombre d'extensions ayant une grande variété de fonctions : le filtrage de contenu (AdBlock Plus, NoScript), l'interaction d'application Web (Delicious Bookmarks, eBay Companion), le développement Web (DOM Inspector, Firebug) et la protection de l'enfance (Glubble pour les familles). Il s'agit d'extensions très avancées et complexes, et vous apprendrez plus qu'il n'en faut pour créer des extensions comme celles-ci (Glaxstar participe à 3 de celles qui sont énumérées).

- -

Nous commencerons par examiner une extension très simple.

- -

L'extension Hello World

- -

Nos exemples d'extensions et ce tutoriel sont en général destinés à la version Firefox 3 et plus, mais la plupart fonctionne aussi sur les versions précédentes de Firefox. Nous essaierons de le préciser lorsque nous discuterons d'une fonction qui ne fonctionne que sur certaines versions de Firefox.

- -

Nous allons maintenant commencer par une extension basique "Hello World". Commençons par l'installation de l'extension. Cliquez sur le lien ci-dessous.

- -
-

L'extension suivante servant d'exemple n'est pas signée numériquement. Pour pouvoir l'activer, vous devez disposer de Firefox Developer Edition et désactiver le controle de la signature numérique.

-
- -

Installation de Hello World

- -

Ce lien déclenchera une installation ou un téléchargement de fichier, en fonction du Content-type utilisé par le serveur Web. Le type de contenu approprié pour déclencher une installation est application/x-xpinstall. Dans ce cas, un téléchargement de fichier doit se produire.

- -

Si le type de contenu est défini correctement, vous serez informé que le site n'est pas autorisé à installer des modules complémentaires sous Firefox. Il s'agit d'une mesure de sécurité qui empêche des sites d'installer des extensions sans le consentement de l'utilisateur. Cela est nécessaire car les extensions malveillantes peuvent avoir le même niveau de dommage que tout programme malveillant : le vol de données, l'effacement ou le remplacement des fichiers, et entraîner des comportements indésirables en général. AMO est le seul site de pré-autorisés car tous les modules complémentaires publiés sur l'AMO sont passés par un processus d'examen qui comprend des contrôles de sécurité.

- -

Après avoir téléchargé le fichier, vous pouvez le faire glisser et le déposer dans la zone de contenu Firefox, et l'installation devrait commencer.

- -

Vous verrez une fenêtre vous indiquant que vous êtes sur le point d'installer une extension, avec quelques informations supplémentaires telles que le nom de son auteur. Vous verrez un message disant que l'auteur ne peut être vérifié. Seules les extensions signées avec un certificat numérique peuvent être authentifiées. Les extensions signées sont rares, mais nous allons aborder la façon de les signer plus tard.

- -

Cliquez sur le bouton Installer maintenant. Après que l'extension soit installée, il vous sera demandé de redémarrer Firefox. L'installation, la désinstallation, l'activation et la désactivation des modules complémentaires (exceptés les plugins) nécessitent un redémarrage pour terminer, et il n'y a pas d'autre moyen de faire. C'est un point important à garder à l'esprit si vous construisez une extension qui manipule les autres extensions ou des thèmes. Il y a un bug très ancien qui permet de suivre cette question.

- -

Maintenant, après le redémarrage du navigateur, vous verrez la fenêtre du Gestionnaire de modules complémentaires, montrant le nom de l'extension, sa version, et une brève description.

- -

addonman.png

- -

Fermez le Gestionnaire de modules complémentaires. Regardez la fenêtre principale de Firefox et voyez si vous remarquez quelque chose de différent.

- -

L'avez-vous vu ? Il y a un nouveau menu dans la barre de menu principal, intitulé «Hello World!». Si vous ouvrez le menu, puis la sélection du menu surgissant, vous verrez un chouette message d'alerte. Cliquez sur le bouton OK pour le fermer.

- -

- -

C'est tout ce que l'extension fait. Maintenant, nous allons y regarder de plus près.  

- -

Contenus d'une extension

- -

Vous avez peut être remarqué que le fichier de l'extension que vous avez installé est nommé xulschoolhello1.xpi. XPI (prononcez "zippy") est synonyme de d'installeur multi plate-formes (NdT : Cross-Platform Installer), car le même fichier d'installation peut fonctionner sur les principales plates-formes, et c'est le cas pour la plupart des extensions XPI. Les fichiers XPI sont tout simplement des fichiers compressés au format ZIP, mais Firefox les reconnaît comme extension et déclenche le processus d'installation quand un lien XPI est cliqué.

- -

Pour regarder dans le fichier XPI, vous avez besoin de le télécharger d'abord sans l'installer. Si le serveur déclenche une installation en cliquant sur un lien ou sur un bouton, vous devez faire un clic droit sur le lien d'installation, puis cliquez sur l'option Enregistrer le lien sous….

- -

Ensuite, nous allons décompresser le fichier XPI. Une façon de faire est de renommer le fichier afin qu'il ait l'extension zip au lieu de xpi. Une autre façon est d'ouvrir le fichier en utilisant un utilitaire ZIP. La plupart des systèmes d'exploitation dispose d'un utilitaire de compression ZIP, et il existe des outils plus avancés disponibles en ligne. Faites votre choix, et décompressez le fichier dans un emplacement qui vous convient. Vous devriez voir une structure similaire à celle-ci :

- -

xulschoolhello1

- - - -

Le fichier JAR contient la majorité du code, alors nous devrons également en extraire son contenu. Tout comme pour les XPI, vous n'avez besoin que d'un utilitaire ZIP pour décompresser le fichier. Après avoir fait cela, vous aurez quelque chose comme ceci :

- -

xulschoolhello1

- - - -

Cela fait beaucoup de fichiers pour quelque chose de si simple ! Eh bien, rassurez-vous, nous allons bientôt détailler tous ces fichiers et réaliser que c'est assez simple. Dans la section suivante nous allons examiner ces fichiers et voir ce qu'ils font.

- -
-

« PrécédentSuivant »

-
- -

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/fr/archive/mozilla/xul/window/index.html b/files/fr/archive/mozilla/xul/window/index.html deleted file mode 100644 index 7369e65496..0000000000 --- a/files/fr/archive/mozilla/xul/window/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: window -slug: Archive/Mozilla/XUL/window -tags: - - Éléments_XUL -translation_of: Archive/Mozilla/XUL/window ---- -
- « Accueil de la référence XUL [ - Exemples | - Attributs | - Propriétés | - Méthodes | - Sujets liés ] -

Décrit la structure d'une fenêtre de premier niveau. Il s'agit du nœud racine d'un document XUL. Forme par défaut une boîte orientée horizontalement. Comme il s'agit d'une boîte, tous les attributs de boîte peuvent être utilisés. Par défaut, la fenêtre aura un cadre spécifique à la plateforme pour l'entourer.

Pour assigner une icône à la fenêtre, créez un fichier d'icône spécifique à la plateforme <windowid>.ico et/ou <windowid>.xpm et placez ou installez ces fichiers dans le répertoire <répertoire-de-mozilla>/chrome/icons/default/. La valeur <windowid> est celle de l'attribut id de la fenêtre. Ceci permet d'avoir une icône différente pour chaque fenêtre. -

Pour les propriétés et méthodes, consultez l'objet XUL Window sur XULPlanet ou sur XULfr . -

D'autres informations sont disponibles dans le tutoriel XUL. -

-
Attributs -
height, hidechrome, id, screenX, screenY, sizemode, title, width, windowtype -
-

Exemples

-
<?xml version="1.0"?>
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<window id="rootWnd" title="Enregistrement en ligne"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <vbox>
-    <hbox>
-      <image src="formulaire_enregistrement.png"/>
-      <description>Enregistrement en ligne</description>
-    </hbox>
-    <groupbox align="start">
-      <caption label="Vos informations"/>
-      <radiogroup>
-        <vbox>
-          <hbox>
-            <label control="your-fname" value="Entrez le prénom :"/>
-            <textbox id="your-fname" value="Johan"/>
-          </hbox>
-          <hbox>
-            <label control="your-lname" value="Entrez le nom de famille :"/>
-            <textbox id="your-lname" value="Hernandez"/>
-          </hbox>
-          <hbox>
-            <button oncommand="alert('enregistrement')">
-              <description>Enregistrer</description>
-            </button>
-          </hbox>
-        </vbox>
-      </radiogroup>
-    </groupbox>
-  </vbox>
-</window>
-
-

Attributs

-

-

- -
height -
Type : chaîne de caractères (représentant un entier) -
La hauteur préférée de l'élément en pixels. La hauteur réellement affichée peut être différentes si l'élément ou son contenu ont une hauteur minimum ou maximum. La propriété CSS height peut également être utilisée. -
- - -
-
- -
hidechrome -
Type : booléen -
Définissez cet attribut à true pour que le chrome, en ce compris la barre de titre, soit caché. -
- - -
-
- -
id -
Type : id d'élément, doit être unique dans la fenêtre -
Un identifiant unique permettant d'identifier l'élément. Celui-ci peut être utilisé comme paramètre pour getElementById() et d'autres fonctions DOM et pour référencer l'élément dans des feuilles de style. -
- - -
-
- -
screenX -
Type : entier -
La position horizontale à laquelle la fenêtre apparaît à l'écran. -
- - -
-
- -
screenY -
Type : entier -
La position verticale à laquelle la fenêtre apparaît à l'écran. -
-


-

- - -
-
- -
sizemode -
Type : une des valeurs ci-dessous -
L'état de la fenêtre (window). Les valeurs suivantes peuvent être utilisées : -
- -


-

- - -
-
- -
title -
Type : chaîne de caractères -
Le texte qui doit apparaître dans la barre de titre de la fenêtre ou boîte de dialogue. -
-


-

- - -
-
- -
width -
Type : chaîne de caractères (représentant un entier) -
La largeur préférée de l'élément. La valeur ne doit pas préciser d'unité car elle est toujours exprimée en pixels. La largeur réellement affichée peut être différente si l'élément ou son contenu ont une largeur minimum ou maximum, ou que la taille est ajustée selon la flexibilité ou l'alignement de son parent. La propriété CSS width peut également être utilisée. -
- - -
-
- -
windowtype -
Type : chaîne de caractères -
Définit une chaîne pouvant être utilisée pour identifier le type de fenêtre. Celle-ci peut être utilisée, par exemple, pour faire la distinction entre une fenêtre de navigation et une fenêtre d'édition. Certaines des fonctions de gestion de fenêtres de Mozilla utilisent cet attribut pour grouper les fenêtres du même type. -
-


-

- - -
- -

Propriétés

- -

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
- -

Méthodes

-

-

-

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()
- -

Note

-

Le message d'erreur « XML Parsing Error: undefined entity...<window » peut être provoqué par l'indisponibilité ou l'absence d'un fichier DTD référencé dans le fichier XUL. Le chargement d'un fichier dont le nom suit le mot-clé SYSTEM dans une déclaration DOCTYPE peut échouer silencieusement et le seul message d'erreur sera une erreur d'entité non définie sur l'élément XUL suivant. -

-

Sujets liés

-
Éléments -
dialog, dialogheader -
-

Notes des utilisateurs

-

Pour changer l'icône affichée dans la barre de titre d'une fenêtre, consultez la page Icônes de fenêtre. -

Pour ajouter une icône de site (favicon) à la barre d'adresse et aux onglets de navigation (si le dialogue n'est pas un popup), utilisez l'extrait de code suivant pour utiliser l'espace de noms HTML et l'élément link. -

-
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-	xmlns:html="http://www.w3.org/1999/xhtml">
-
-<!-- Icône du chrome -->
-<html:link rel="icon" href="chrome://monExtension/content/chemin/vers/favicon.png"/>
-
-<!-- Depuis un site distant -->
-<html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/>
-
-- cgit v1.2.3-54-g00ecf