XUL Scripts et Styles

Il est possible de gérer les styles CSS à l'aide d'un script. Pour mettre en évidence cette fonctionnalité, cette section va définir un script qui permettra de :
  • lorsque le curseur de la souris est sur la textbox, cette derniére est entourée d'une bordure rouge.
  • lorsque le curseur de la souris est en dehors de la textbox, la bordure redevient noire.
Voici une copie d'écran SWT de ce que l'on obtiendra en fin de cette section, lorsque le curseur de la souris est sur la textbox (bordure rouge) :

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');
		
		/**
		 * Set red border around the textbox if highlight is true
		 * and set black border otherwise. 
		**/
		function highlight(highlight) {
			if (highlight) 
				textboxExpression.style.borderColor = 'red';
			else 
				textboxExpression.style.borderColor = 'black';
		}		
		
		/**
		 * 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>
	  
	<style type="text/css" >		
		textbox {
			background-color: #FFFF00;
			text-align: right;		
			color:black;
			border-color:black;
		    border-width:1px;
		    font-weight:bold; 
		    font-style:normal;
		    font-family:Courier New; 					    		    		    		    
		}				
	</style>

    <hbox>
      <textbox id="expression" flex="1"
			   onmouseover="highlight(true)"
			   onmouseout="highlight(false)"/>
    </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

Le script suivant : 

function highlight(highlight) {
  if (highlight) 
	textboxExpression.style.borderColor = 'red';
  else 
	textboxExpression.style.borderColor = 'black';
}
permet de définir une fonction highlight qui modifie le style border-color de la textbox. Si la fonction est appelée avec true la bordure devient rouge et sinon elle devient noire.

Cette fonction est appelée sur les évenements onmouseover et onmouseout de la textbox XUL comme ceci : 

<textbox id="expression" flex="1"
	 onmouseover="highlight(true)"
	 onmouseout="highlight(false)"/>