Programmation Xul

Un livre de Wikibooks.

Ébauche

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.

Sections

1 Description
2 Xul
3 APPLICATION
- 3.1 interface
- 3.2 Exemple
4 Liens
5 Articles

[modifier] Description

Décrit des widgets xml
Instruit du javascript
S'édite avec xulBuster pour eclipse

[modifier] Xul

[modifier] APPLICATION

[modifier] interface

Une fénètre xul se déclare par l'utilisation d'un skin 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 pose dans window comme :

<!-- [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 le flex définit une taille proportionelle.

[modifier] Exemple

La liste et la figure suivante illustre 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>

[modifier] Liens

[modifier] Articles

Programmation Xul

Un livre de Wikibooks.

Sections

[modifier] Description

[modifier] Xul

[modifier] Elements

[modifier] Attributes

[modifier] Propriétés

[modifier] Dom

[modifier] Methodes

[modifier] Attributs definits pour elements xul

[modifier] Classes de styles

[modifier] Gestionnaires d'événements

[modifier] APPLICATION

[modifier] interface

[modifier] Exemple

[modifier] Liens

[modifier] Articles

Affichages

Outils personnels

Rechercher

Bibliothèque

Navigation

Aide

Imprimer / exporter

Boîte à outils