Script component

In this tutorial, we will add scripts to the XML component of previous tutorial.

Scripts is written with Javascript syntax. With script we can manage following cases :

  • when you fill the className control, the outputFileName control must be updated by adding the .java extension to the value of className control.
  • when you fill the packageName control, the outputBaseDir control must be updated by replacing character '.' of the value packageName by the character '/' and by adding src/ in front of.

In this sample, we write scripts into XML component, but it's possible externalize script into *.js file.

You can find next sample into usecases-catalog/Components/Model/Script/XMLToJavaClass-script.akgncpt.xml catalog.

Script

Script is written like Javascript written into XUL or HTML. A script must be inserted into the script element which must be included in XUL root (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>

To access to XUL control, you must use standard Javascript with getElementById method of the document object :

The script : 

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

get the value of the className textbox.

In our sample, we define :

  • updateOutputFileNameWithJavaClass Javascript function to update outputFileName XUL control with className : 
    function updateOutputFileNameWithJavaClass() {
  var className = document.getElementById('className').value;
  className = className.replace(' ','_');                                       
  document.getElementById('outputFileName').value = className + '.java';
}
  • updateOutputBaseDirWithPackage Javascript function to update outputBaseDir XUL control with packageName : 
    function updateOutputBaseDirWithPackage() {
  var srcBaseDir = 'src';
  var packageName = document.getElementById('packageName').value;
  packageName = packageName.replace('.','/');                                   
  document.getElementById('outputBaseDir').value = srcBaseDir + '/' + packageName;
}

Those functions must be fired when XUL controls className and packageName change, in other words :

  • updateOutputFileNameWithJavaClass function must be fired with onkeyup event of className XUL control :
    <textbox id="className" flex="1" onkeyup="javascript:updateOutputFileNameWithJavaClass();" />
  • updateOutputBaseDirWithPackage function must be fired with onkeyup event of packageName XUL control :
    <textbox id="packageName" flex="1" onkeyup="javascript:updateOutputBaseDirWithPackage();" />

Here the XML component : 

<?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>

Create XMLToJavaClass-script.akgncpt.xml XML component file into Components/Model/Script directory of the MyAkrogenCatalog catalog.

XML component use

Refresh catalog View. XMLToJavaClass-script must be appear into catalog.

Double click on XMLToJavaClass-script component to open Wizard page.