Script component

Dans ce tutorial, nous allons ajouter des scripts dans le XML component du tutorial précédant.

Un script est écrit avec une syntaxe Javascript. Il permettra dans cet exemple de gérer les cas suivants :

• lorsque vous saisissez le champs className, le champs outputFileName doit se mettre à jour en ajoutant à la valeur du champs className l'extension .java.
• lorsque vous saisissez le champs package, le champs outputBaseDir doit se mettre à jour en remplaçant le caractère '.' de la valeur du champs package par le caractère '/' et en y ajoutant src/ devant.

Dans cette exemple, nous allons écrire les scripts dans le XML component, mais il est aussi possible d' externaliser le script dans un fichier *.js.

Vous pouvez trouver l'exemple ci dessous dans le catalogue usecases-catalog/Components/Model/Script/XMLToJavaClass-script.akgncpt.xml.

Script

L'écriture d'un script s'effectue comme si vous écrivez un script Javascript dans une page XUL ou HTML. Un script doit être contenu dans la balise script qui doit être OBLIGATOIREMENT inclus dans l'élement XUL racine (box, ...).

<box flex="1" id="" orient="vertical" 
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >  
     
  <script type="text/javascript" >
    ... Your script
  </script>
  
</box>

Pour accéder au contrôle XUL, vous utilisez le Javascript standard à l'aide de la méthode getElementById de l'objet document :

  var className = document.getElementById('className').value;

permet de récupérer la valeur de la texbox className.

Dans notre cas, nous définissons :

• une fonction Javascript updateOutputFileNameWithJavaClass qui permet de mettre à jour le contrôle XUL outputFileName avec className :

  function updateOutputFileNameWithJavaClass() {
    var className = document.getElementById('className').value;
    className = className.replace(' ','_');                                       
    document.getElementById('outputFileName').value = className + '.java';
  }  

• une fonction Javascript updateOutputBaseDirWithPackage qui permet de mettre à jour le contrôle XUL outputBaseDir avec packageName :

  function updateOutputBaseDirWithPackage() {
    var srcBaseDir = 'src';
    var packageName = document.getElementById('packageName').value;
    packageName = packageName.replace('.','/');                                   
    document.getElementById('outputBaseDir').value = srcBaseDir + '/' + packageName;
  }  

Ces fonctions doivent être déclenchées lorsque les contrôles XUL className et packageName sont modifiés, autrement dit :

• la fonction updateOutputFileNameWithJavaClass doit être déclenchée sur l'évenement onkeyup du contrôle XUL className :

  <textbox id="className" flex="1" onkeyup="javascript:updateOutputFileNameWithJavaClass();" />

• la fonction updateOutputBaseDirWithPackage doit être déclenchée sur l'évenement onkeyup du contrôle XUL packageName :

  <textbox id="packageName" flex="1" onkeyup="javascript:updateOutputBaseDirWithPackage();" />

Voici le XML component complet :

<?xml version="1.0" encoding="UTF-8"?>
<component>
  <model>
    <!-- This component requires selection of XML File which is used into 
         Template context (Output) -->
    <file type="xml" key="doc" useIntoOutput="true" omitDocumentType="true" />
  </model>
  <input>
    <page title="XML context/Freemarker" >
      <description>Transform XML context to Java Class with Scripts events.</description>
      <box flex="1" id="" orient="vertical"
          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
                    <script type="text/javascript" >
          
            function updateOutputFileNameWithJavaClass() {
                    var className = document.getElementById('className').value;
                    className = className.replace(' ','_');                                     
                    document.getElementById('outputFileName').value = className + '.java';
            }  
            
            function updateOutputBaseDirWithPackage() {
                    var srcBaseDir = 'src';
                    var packageName = document.getElementById('packageName').value;
                    packageName = packageName.replace('.','/');                                 
                    document.getElementById('outputBaseDir').value = srcBaseDir + '/' + packageName;
            }                                                   
                  
          </script> 
        <hbox>
          <label value="Package :" />
          <textbox id="packageName" flex="1" 
                   onkeyup="javascript:updateOutputBaseDirWithPackage();" />
          <button type="package" target="packageName" label="Browse..." />
        </hbox>                         
        <hbox>
          <label value="Class name :" />
          <textbox id="className" flex="1"
                   onkeyup="javascript:updateOutputFileNameWithJavaClass();" />
        </hbox>                         
        <hbox>
          <label value="Output Base dir :" />
          <textbox id="outputBaseDir" flex="1" />
          <button type="folder" target="outputBaseDir" label="Browse..." />
        </hbox>
        <hbox>
          <label value="Output File name :" />
          <textbox id="outputFileName" flex="1" />
        </hbox> 
        <hbox>
            <button type="preview" label="Preview..." />
        </hbox>                 
      </box>                    
    </page>
  </input>
  <output>
    <file>
      <template uri="/ftl/Xml/XMLToJavaClass.ftl" />
    </file>
  </output>
</component>

Créer le fichier XML component XMLToJavaClass-script.akgncpt.xml dans le répertoire Components/Model/Script du catalogue MyAkrogenCatalog.

XML component use

Rafraichissez la vue catalogue. XMLToJavaClass-script doit apparaître dans le catalogue.

Double cliquer sur le component XMLToJavaClass-script pour ouvrir le Wizard page.