Programmation Xul

Cette page est considérée comme une ébauche à compléter . Si vous possédez quelques connaissances sur le sujet, vous pouvez les partager en éditant dès à présent cette page (en cliquant sur le lien « modifier »).

Ressources suggérées : Aucune (vous pouvez indiquer les ressources que vous suggérez qui pourraient aider d'autres personnes à compléter cette page dans le paramètre « ressources » du modèle^? engendrant ce cadre)

Xul est le language de description xmlisé de Mozilla.

Description

Décrit des widgets xml
Contrôlable avec Javascript
S'édite avec XulBooster pour Eclipse

Xul

APPLICATION

interface

Une fenêtre Xul se déclare par l'utilisation d'un skin dans le "chrome" :

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="cWin"
    title="interface test"
    orient="horizontal"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    
    onload="initialize()"
    >

</window>

Les scripts et les styles se placent dans window comme ceci :

<!-- [0] regionHEAD -->
	
<!-- script -->
  <script src="./Script/scr.js" /><!-- type="application/javascript;version=1.7" -->
  <script src="./Script/prototype_xul_1_6_0_2.js" />
	
<!-- style -->
  <style/>

L'interface se découpe en box :

		<vbox>

		<toolbox flex="1">

			<menubar id="sample-menubar">
				
				<!-- MENU -->
				<menu id="file-menu" label="File">
			    	<menupopup id="file-popup">
			    		
			    		<!-- subMenu
			      		<menu id="new-menu" label="New">
			        		<menupopup id="new-popup">
			          			<menuitem label="Window"/>
			          			<menuitem label="Message"/>
			        		</menupopup>
			      		</menu>
			      		-->
			      		
			      		<menuitem label="Open"/>
			      		<menuitem label="Backup"/>
			      		<menuseparator/>
			      		<menuitem label="Exit"/>
			    	</menupopup>
			  	</menu>
			  	
			</menubar>

		</toolbox>

		</vbox>

Dans l'exemple suivant, l'attribut flex définit une taille proportionnelle.

Exemple

La liste et la figure suivante illustrent une vue Xul:

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="./Style/style.css" type="text/css"?>
<window
    id="cWin"
    title=":: Budget Controler ::"
    orient="horizontal"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    
    onload="oItem.initialize()"
    >
	<!-- [0] regionHEAD -->
	
	<!-- script -->
	<script src="./Script/scr.js" /><!-- type="application/javascript;version=1.7" -->
	<script src="./Script/prototype_xul_1_6_0_2.js" />
	
	<!-- style -->
	<style/>
	
	<!-- [0] -->

	<vbox flex="1">
	
		<vbox>
		<toolbox flex="1">
			<menubar id="sample-menubar">
				
				<!-- MENU -->
				<menu id="file-menu" label="File">
			    	<menupopup id="file-popup">
			    		
			    		<!-- subMenu
			      		<menu id="new-menu" label="New">
			        		<menupopup id="new-popup">
			          			<menuitem label="Window"/>
			          			<menuitem label="Message"/>
			        		</menupopup>
			      		</menu>
			      		-->
			      		
			      		<menuitem label="Open"/>
			      		<menuitem label="Backup"/>
			      		<menuseparator/>
			      		<menuitem label="Exit"/>
			    	</menupopup>
			  	</menu>
			  	
			</menubar>
		</toolbox>
		</vbox>
		
		<tabbox>
		
			<tabs>
		    	<tab label="Encoding" selected="true"/>
		    	<tab label="History"/>
		    	<tab label="Incoming"/>
		  	</tabs>
			
			<tabpanels>
			
				<tabpanel>
				<!-- [1] ENCODING -->
				
					<groupbox width="300">
		  			<caption label="items"/>
						
						<vbox>
						
							<textbox  id="cItem" multiline="false" value=":: item ::" onfocus="oUtils.clean(this);"/>
							
							<hbox>
								
								<button width="50" label="add" onclick="oItem.addItem('cItem','cListItem');"/>
								<button width="50" label="search" onclick="oItem.searchItem();"/>
								<button id="cItemDel" width="50" label="del" onclick="oItem.delItem($('cListItem').selectedIndex,'cListItem');" disabled="true" />
								
								<label style="cursor:pointer;" value="[+]" onclick="oItem.disabling($('cItemDel'));oVw.changeTicker(this);"/>
								
							</hbox>
							
							<!-- list items -->
							<vbox>
							
								<listbox id="cListItem" rows="20" onclick="oItem.getDetail()">
								
									<listitem label="Butter Pecan" value="bpecan"/>
									<listitem label="Chocolate Chip" value="chocchip"/>
									<listitem label="Raspberry Ripple" value="raspripple"/>
									<listitem label="Squash Swirl" value="squash"/>
								
								</listbox>
							
							</vbox>
							
							<textbox  id="cItem" multiline="false" value=":: class ::" onfocus="oUtils.clean(this);"/>
							
							<vbox flex="1">
								
								<button width="50" label="add" onclick="oItem.addItem();"/>
								
							</vbox>
							
						</vbox>
							
					</groupbox>
					
					<!-- separator -->
					<splitter style="width: 10px; max-width: 10px;" collapse="before" resizebefore="closest" resizeafter="farthest" state="open">
						<grippy id="gspace_leftgrippy"/>
					</splitter>
					<!-- separator  -->
					
					<groupbox width="200">
		  			<caption label="item detail"/>
						
						<html:p/>actual price :
						<textbox  id="cItem" width="200" multiline="false" value=":: item ::" onfocus="oUtils.clean(this);" disabled="true"/>
						
						<html:p/>new price :
						<textbox  id="cItem" width="200" multiline="false" value=":: price ::" onfocus="oUtils.clean(this);"/>	
						
						<html:p/>item class :
						
						<!--
						<textbox  id="cItem" width="200" multiline="false" value=":: class ::" onfocus="oUtils.clean(this);"/>
						-->
						
						<menulist width="200" label="Bus">
							<menupopup>
							    <menuitem label="Car"/>
							    <menuitem label="Taxi"/>
							    <menuitem label="Bus" selected="true"/>
								<menuitem label="Train"/>
							</menupopup>
						</menulist>
						
						<html:p/>shop :
						<textbox  id="cItem" width="200" multiline="false" value=":: shop ::" onfocus="oUtils.clean(this);"/>
						
						<html:p/>
						<button label="validate" width="200" onclick="oItem.searchItem();"/>	<!--  -->				
						
					</groupbox>
					
					<!-- separator -->
					<splitter style="width: 10px; max-width: 10px;" collapse="before" resizebefore="closest" resizeafter="farthest" state="open">
						<grippy id="gspace_leftgrippy"/>
					</splitter>
					 <!-- separator  -->
					
					<groupbox flex="1">
		  			<caption label="actual"/>
						
						<html:div style="-moz-vbox-flex:1;height:100%;width:100%;"><!-- vbox flex="1" -moz-vbox-flex:1; background-color:grey;-->
							
							<svg width="100%" height="270%" version="1.1" xmlns="http://www.w3.org/2000/svg">
								<polyline points="0,200 50,150 100,170 150,125" style="fill:none;stroke:red;stroke-width:2"/>
							</svg>
							
						</html:div>
						
					</groupbox>
					
				</tabpanel>
				
				<tabpanel>
				<!--  [2] HISTORY -->

					<vbox flex="1">
					<html:div id="main">
					
							<html:div id="left">
								
								:: this is left content ::
								
							</html:div>
							<html:div id="middle">

								:: this is middle content ::

							</html:div>
							<html:div id="right">

								:: this is right content ::

							</html:div>
						
						<!-- bottom -->
						<html:div id="clear">bottom</html:div>
						
					</html:div>
					</vbox>
					
				</tabpanel>
			
				<tabpanel>
				<!--  [3] INCOMMING -->
				
					<groupbox width="330" orient="vertical">
		  			<caption label="Banks"/>

						<groupbox class="dark" width="300">
			  			<caption label="Account"/>
							
							<textbox  id="cBqItem" multiline="false" value=":: item ::" onfocus="oUtils.clean(this);"/>
							
							<hbox>
								
								<button width="50" label="add" onclick="oItem.addItem('cBqItem','cBqListItem');"/>
								<button width="50" label="search" onclick="oItem.searchItem();"/>
								<button id="cItemDel_2" width="50" label="del" onclick="oItem.delItem($('cBqListItem').selectedIndex,'cBqListItem');" disabled="true" />
								
								<label style="cursor:pointer;" value="[+]" onclick="oItem.disabling($('cItemDel_2'));oVw.changeTicker(this);"/>
								
							</hbox>
							
							<vbox>
							
								<listbox id="cBqListItem" rows="5" onclick="oItem.getDetail()">
								
									<listitem label="Fortis" value="bpecan"/>
								
								</listbox>
							
							</vbox>
							
						</groupbox>
						
						<!--  INCOMES -->
						<groupbox class="dark" width="300">
			  			<caption label="Incomes"/>
						
							<html:div>
							
								<html:div id="cBqInc">
									
									<!-- insert new incomes -->
									<html:div style="display:none;" id="cBqInc_">
										<html:div>
											<html:input id="account" class="lowTxt" type="text" value="> account" size="20"/>
											<html:input id="amount" class="lowTxt" type="text" value="> amount" size="10"/>
											<html:input id="date" class="lowTxt" type="text" value="> date" size="10"/>
											<html:span class="clickable" onclick="oItem.saveItem(this.parentNode,'incomes');parentNode.innerHTML='';oItem.load('incomes','cBqInc_1');
												"> [+] </html:span> <!--  -->
										</html:div>
									</html:div>
									
									<html:div id="cBqInc_1" />
									
									<html:div>
									
										<!-- separator -->
										<html:hr />
										<!-- separator  -->
									
										<!-- incomes menu -->
										<html:span>
											<html:label onclick="oUtils.showHide($('listIncomes'));">[ history ]</html:label>
											<html:label onclick="oUtils.showHide($('listStat'));">[ statistic ]</html:label>
										</html:span>
										
										<html:p/>
										
										<html:div id="listIncomes" style="display:none">
										
											<html:p/>
											<html:div class="ttl">:: this is the history content ::</html:div>
											 <html:p/>
											<listbox id="incomes_history" rows="5">
												<listhead>
													<listheader label="Account"/>
													<listheader label="Amount"/>
													<listheader label="Date"/>
												</listhead>
												<listitem>
													<listcell label="Fortis"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Argenta"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Ing"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
											</listbox>
											
											<!-- 
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											 -->
											 
										</html:div>
									
										<html:div id="listStat" style="display:none">
										
											<html:p/>
											<html:div class="ttl">:: this is the stat content ::</html:div>
											 <html:p/>
											 <listbox id="incomes_history" rows="5">
												<listhead>
													<listheader label="Account"/>
													<listheader label="Amount"/>
													<listheader label="Date"/>
												</listhead>
												<listitem>
													<listcell label="Fortis"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Argenta"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Ing"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
											</listbox>
											 
										</html:div>
									
									</html:div>
									
								</html:div>
								
								<html:p/>
								
								<!-- separator -->
									<html:hr />
								<!-- separator  -->
								
								<!-- add new income -->
								<button label="new" onclick="oItem.putLine('cBqInc','inc_new');"/>
									
								<!-- separator -->
									<html:hr />
								<!-- separator  -->
								
								<html:div id="inc_new" />
							
							</html:div>						
						
						</groupbox>

						<!-- ORDERS -->
						<groupbox class="dark" width="300">
			  			<caption label="Orders"/>
			  			
							<html:div>
							
								<html:div id="cBqOrd">
									
									<!-- insert new incomes -->
									<html:div style="display:none;" id="cBqOrd_">
										<html:div>
											<html:input id="account" class="lowTxt" type="text" value="> account" size="20"/>
											<html:input id="amount" class="lowTxt" type="text" value="> amount" size="10"/>
											<html:input id="date" class="lowTxt" type="text" value="> date" size="10"/>
											<html:span class="clickable" onclick="oItem.saveItem(this.parentNode,'orders');parentNode.innerHTML='';oItem.load('orders','cBqOrd_1');"> [+] </html:span>
										</html:div>
									</html:div>
									
									<html:div id="cBqOrd_1"/>
									
								</html:div>
								
								<html:p/>
								
								<!-- separator -->
								<html:hr />
								<!-- separator  -->
								
								<!-- add new income -->
								<button label="new" onclick="oItem.putLine('cBqOrd','ord_new');"/>
								
								<!-- separator -->
								<html:hr />
								<!-- separator  -->
								
								<html:div id="ord_new"/>
								
							</html:div>	
							
						</groupbox>
							
					</groupbox>
					
					<!-- separator -->
					<splitter style="width: 10px; max-width: 10px;" collapse="before" resizebefore="closest" resizeafter="farthest" state="open">
						<grippy id="gspace_leftgrippy"/>
					</splitter>
					<!-- separator  -->
					
					<!-- EXPENDITURE -->
					<groupbox width="300">
		  			<caption label="Expenditures"/>
						
						<groupbox class="dark" width="300" orient="vertical">
			  			<caption label="Bank"/>
							
							<box orient="horizontal">
							
								<menulist label="Account">
									<menupopup>
									    <menuitem label="fortis"/>
									    <menuitem label="argenta"/>
									    <menuitem label="ING" selected="true"/>
									</menupopup>
								</menulist>
								
							
								<textbox class="txtLow" label="in" value="> amount" onfocus="oUtils.clean(this);"/>
								<textbox class="txtLow" label="date" value="> date" onfocus="oUtils.clean(this);"/>
								
<!-- > account -->
								
								<menulist label="ES">
									<menupopup>
									    <menuitem label="in"/>
									    <menuitem label="out"/>
									</menupopup>
								</menulist>
								
							</box>
							
							<textbox  id="cBqSpendItem" multiline="true" rows="2" value=":: detail ::" onfocus="oUtils.clean(this);"/>
							
							<html:hr/>
							
							<box orient="horizontal">
								<button label="new" />
							</box>
							
							<html:hr/>
							
						</groupbox>
												
						<!--  INCOMES -->
						<groupbox class="dark" width="300">
			  			<caption label="Purchase"/>
						
							<html:div>
							
								<html:div id="cClInc">
									
									<!-- insert new incomes -->
									<html:div style="display:none;" id="cClInc_">
										<html:div>
											<html:input id="object" class="lowTxt" type="text" value="> object" size="20"/>
											<html:input id="amount" class="lowTxt" type="text" value="> amount" size="10"/>
											<html:input id="date" class="lowTxt" type="text" value="> date" size="10"/>
											<html:span class="clickable" onclick="oItem.saveItem(this.parentNode,'purchases');parentNode.innerHTML='';oItem.load('purchases','cClInc_1');
												"> [+] </html:span> <!--  -->
										</html:div>
									</html:div>
									
									<html:div id="cClInc_1" />
									
									<html:div>
									
										<!-- separator -->
										<html:hr />
										<!-- separator  -->
									
										<!-- incomes menu -->
										<html:span>
											<html:label onclick="oUtils.showHide($('listpHist'));">[ history ]</html:label>
											<html:label onclick="oUtils.showHide($('listpStat'));">[ statistic ]</html:label>
										</html:span>
										
										<html:p/>
										
										<html:div id="listpHist" style="display:none">
										
											<html:p/>
											<html:div class="ttl">:: this is the history content ::</html:div>
											 <html:p/>
											<listbox id="incomes_history" rows="5">
												<listhead>
													<listheader label="Account"/>
													<listheader label="Amount"/>
													<listheader label="Date"/>
												</listhead>
												<listitem>
													<listcell label="Fortis"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Argenta"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Ing"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
											</listbox>
											
											<!-- 
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											 -->
											 
										</html:div>
									
										<html:div id="listpStat" style="display:none">
										
											<html:p/>
											<html:div class="ttl">:: this is the stat content ::</html:div>
											 <html:p/>
											 <listbox id="incomes_history" rows="5">
												<listhead>
													<listheader label="Account"/>
													<listheader label="Amount"/>
													<listheader label="Date"/>
												</listhead>
												<listitem>
													<listcell label="Fortis"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Argenta"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Ing"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
											</listbox>
											 
										</html:div>
											 
									
									</html:div>
									
								</html:div>
								
								<html:p/>
								
								<!-- separator -->
									<html:hr />
								<!-- separator  -->
								
								<!-- add new income -->
								<button label="new" onclick="oItem.putLine('cClInc','pur_new');"/>
									
								<!-- separator -->
									<html:hr />
								<!-- separator  -->
								
								<html:div id="pur_new" />
							
							</html:div>						
						
						</groupbox>

					
					</groupbox>
					
					<!-- separator -->
					<splitter style="width: 10px; max-width: 10px;" collapse="before" resizebefore="closest" resizeafter="farthest" state="open">
						<grippy id="gspace_leftgrippy"/>
					</splitter>
					<!-- separator  -->
					
					<groupbox flex="1">
		  			<caption label="actual" orient="vertical"/>
						
						<hbox>
						
							<groupbox flex="1" height="100%">
							<caption label="Top five expenditures"/>
							
							</groupbox>
							
							<groupbox flex="1">
							<caption label="Rest"/>
							
							</groupbox>
						
						</hbox>
						
						<vbox flex="1">
						
							<groupbox flex="1">
							<caption label="Month overview"/>
								
								<!-- results -->
								
								<groupbox>
									
									<html:table>
										<!-- numbers -->
										<html:tr><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">1</html:td><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">2</html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">3</html:td><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">4</html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">5</html:td><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">6</html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">7</html:td><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">8</html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">9</html:td><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">0</html:td>
										<!--  operation -->
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> [ </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> , </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> + </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> - </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> * </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> / </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> ] </html:td>
										<html:td onclick="$('calcPrompt').innerHTML = eval($('calcPrompt').innerHTML);"> = </html:td>
										<html:td width="50"/>
										<html:td id="calcPrompt"/></html:tr>
									</html:table>
								
								</groupbox>
								
							</groupbox>
						
						</vbox>
						
					</groupbox>
					
				</tabpanel>
			
			</tabpanels>
			
		</tabbox>
	
	</vbox>

</window>

Programmation Xul

Sections

Description

Xul

Éléments

Attributs

Propriétés

DOM

Méthodes

Attributs définis pour les éléments Xul

Classes de styles

Gestionnaires d'événements

APPLICATION

interface

Exemple

Liens

Articles