XUL et Scripts

Cette section enrichit le fichier XUL pour gérér la logique de la calculatrice à l'aide de scripts Javascript . La logique de la calculatrice consiste à :
  • mettre a jour la textbox avec la valeur du bouton cliqué (boutons opérateurs, chiffres...)
  • calculer l'expression de la textbox lorsque le bouton "=" est cliqué
Voici une copie d'écran SWT de ce que l'on obtiendra en fin de cette section :

XUL

Modifier le fichier xul/calc.xul avec le contenu suivant : 
<page>
  <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
	<script type="text/javascript">
		// Get XUL textbox 
		var textboxExpression = document.getElementById('expression');
		
		/**
		 * Add value to textbox expression.
		**/
		function addToExpression(value) {
			textboxExpression.value=textboxExpression.value + value;
		}		
		
		/**
		 * Evaluate expression contains into textbox
		 * and update it with evaluation result.
		**/
		function evaluateExpression() {
			try {
				// Evaluate expression
				var exp = textboxExpression.value;
				textboxExpression.value = eval(exp);
			 }
			 catch(e) {
			 	// Expression is not valid, display error into texbox.
			 	textboxExpression.value = e;
			 }
		}
	</script>  
    <hbox>
      <textbox id="expression" flex="1" />
    </hbox>
	<hbox>
		<grid>
			<columns>
				<column flex="1" />
				<column flex="1" />
				<column flex="1" />
				<column flex="1" />
			</columns>
			<rows>
				<row>
					<button label="7" oncommand="addToExpression(this.label)" />
					<button label="8" oncommand="addToExpression(this.label)" />			
					<button label="9" oncommand="addToExpression(this.label)" />
					<button label="/" oncommand="addToExpression(this.label)" />
				</row>
				<row>
					<button label="4" oncommand="addToExpression(this.label)" />
					<button label="5" oncommand="addToExpression(this.label)" />			
					<button label="6" oncommand="addToExpression(this.label)" />
					<button label="*" oncommand="addToExpression(this.label)" />
				</row>
				<row>
					<button label="1" oncommand="addToExpression(this.label)" />
					<button label="2" oncommand="addToExpression(this.label)" />			
					<button label="3" oncommand="addToExpression(this.label)" />
					<button label="-" oncommand="addToExpression(this.label)" />
				</row>
				<row>
					<button label="0" oncommand="addToExpression(this.label)" />
					<spacer />
					<button label="=" oncommand="evaluateExpression()" />						
					<button label="+" oncommand="addToExpression(this.label)" />
				</row>				
			</rows>
		</grid>			
	</hbox>    
  </vbox>
</page>
Voici une explication du contenu de ce fichier :

Scripts

Les script sont définis dans un élement XML script qui doit étre inclu dans la description XUL (inclus dans l'élement root vbox). Il est conseillé d'englober le script avec la section CDATA car vos scripts pourraient utiliser des caractéres comme < , > qui ne rendraient plus valide la description XML de la page.

Le script suivant : 

// Get XUL textbox 
var textboxExpression = document.getElementById('expression');
permet de récupérer la textbox XUL indentifié par son id="expression" .

Le script suivant : 

function addToExpression(value) {
  textboxExpression.value=textboxExpression.value + value;
}
définit une fonction qui permet d'ajouter value é la texbox. Cette fonction est appelée par les boutons lors d'un clic.

le script suivant : 

function evaluateExpression() {
	try {
		// Evaluate expression
		var exp = textboxExpression.value;
		textboxExpression.value = eval(exp);
	 }
	 catch(e) {
	 	// Expression is not valid, display error into texbox.
	 	textboxExpression.value = e;
	 }
}
définit une fonction qui permet d'évaluer le contenu de la textbox et d'afficher le résulat dans celle-ci. En cas d'erreur (l'expression mathématique n'est pas valide), l'erreur est affichée dans la textbox. L'évaluation de l'expression s'effectue é l'aide de la fonction native Javascript eval .

Ces fonctions sont ensuite appelées lors d'un clic sur un bouton XUL comme ceci : 

<button label="+" oncommand="addToExpression(this.label)" />
Sur l'évenement oncommand (évenements clic) du bouton de label + , la fonction addToExpression est appelée avec le label + et permet d'ajouter + dans le contenu de la textbox. 

<button label="=" oncommand="evaluateExpression()" />
Sur l'évenement oncommand (évenements clic) du bouton de label = , la fonction evaluateExpression est appelée et permet de déclencher l'évaluation du contenu de la textbox.