Sample Code: Javascript

You can add functionality to your applications with Javascript. Additional information about scripting can be found in the Boxely User Guide Chapter 4: Scripting and Event Handling.

The following code shows an application using Javascript functions to set the styles of the gadget and text when a click event occurs.

<?xml version="1.0" encoding="utf-8" ?>

<!-- This is your .box file -->

<?import href="box://ocpToolkit/content/windowingPack/windowGadgets.box"?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>

<appWindow xmlns="http://www.aol.com/boxely/box.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"
  chromeless="true"
  s:height="400" s:width="300"   
  title="Just Scripting Around" >
  
  <library xmlns="http://www.aol.com/boxely/resource.xsd"
    xmlns:box="http://www.aol.com/boxely/box.xsd"
    xmlns:s="http://www.aol.com/boxely/style.xsd"
    xmlns:on="http://www.aol.com/boxely/reaction.xsd" >
    
    <gadget id="myGadget" language="jscript" code="myGadget.js">
      <parts>
          <box:text id="greeting" value="Hello World!" />
      </parts>
      <behavior>
        <reaction event="click" action="gadget:changeFill();" />
      </behavior>
    </gadget>   
  
    <style tag="myGadget" height="100" fill="white" hAlign="center" vAlign="center"
      stroke="black" strokeWidth="1" strokeCornerRadius="4" 
      fillCornerRadius="4" padding="1 4 2 4" margin="10" >
      
      <part name="greeting" textColor="black" />       
    
    </style>
  
  </library>
   
  <myGadget id="firstInstance" />
  <myGadget id="secondInstance" />
  <myGadget id="thirdInstance" />  

</appWindow>

// This is your myGadget.js file

function component (_gadget) { }
    
component.prototype.changeFill = function ()
{    
    var text = this._gadget.getPartById("greeting");
    
    if (text) 
    {
        text.setStyle("textColor", "white");
        text.setStyle("fontSize", "16");
        text.setStyle("fontBold", "true");
    }
    
    this._gadget.setStyle("fill", "black");
}