From the OpenLaszlo Incubator: Validator

The OpenLaszlo Incubator includes several useful components such tooltips, rich text editor, and the validators. I have blogged previously about the OpenLaszlo Incubator. The Incubator Directory opens up by providing background on the nature of the OpenLaszlo Incubator. That document explains that the incubator consists of OpenLaszlo components submitted by the community that have not been folded into the main OpenLaszlo framework because of reasons like lack of documentation, insufficient testing, or lack of code review. However, having said that, several of these components (including the tool tips and the validators) are widely used.

In this blog entry, I demonstrate using the formlayout and validators that are provided by the OpenLaszlo Incubator. The LZX source code for this simple example of validation is shown next:

LaszloValidatorDemonstrator.lzx

<canvas title="Very Simple OpenLaszlo Validator Example" debug="true">

   <include href="incubator/formlayout.lzx" />
   <include href="incubator/validators" />

   <simplelayout axis="y" spacing="50" />

   <vbox id="mainForm" width="500">
      <vbox id="header">
         <statictext x="10" fontsize="20" fontstyle="bold"
                     fgcolor="#000066">Presentation Information</statictext>
      </vbox>
      <vbox id="validatingFormBox">
         <validatingForm id="validatingForm" width="100%">

            <formlayout axis="y" align="right" spacing="20" />

            <formlabel text="Presenter Name" />
            <validateString id="presenterName" name="presenterName" />

            <formlabel text="Presenter Organization" />
            <validateString id="organization" name="organization" />

            <formlabel text="Presentation Title" />
            <validateString id="presentation" name="presentation" />

            <handler name="onerrorcount" args="errors">
            if (errors==0)
            {
               submitButton.setAttribute("visible", true);
            }
            else
            {
               submitButton.setAttribute("visible", false);
            }
            </handler>
         </validatingForm>
      </vbox>   <!-- validatingFormBox -->

      <vbox id="displayBox" visible="false">
         <text x="100" id="presenterDisplay" text="Presenter" />
         <text x="100" id="organizationDisplay" text="Organization" />
         <text x="100" id="titleDisplay" text="Title" />
      </vbox>

   </vbox>  <!-- mainForm -->

   <button x="200" id="submitButton" text="Submit" visible="false">
      <handler name="onclick">
         presenterDisplay.setText("Presenter: " + presenterName.getValueText());
         organizationDisplay.setText("Organization: " + organization.getValueText());
         titleDisplay.setText("Presentation Title: " + presentation.getValueText());
         displayBox.setAttribute("visible", true);
      </handler>
   </button>

   <!-- Define custom validator class that is really just a pre-existing
        string validator with certain attributes chosen as defaults. -->
   <class name="validateString" extends="stringvalidator" width="200"
          required="true" requiredErrorstring="Required Field">
      <edittext name="validatableText" width="${classroot.width}" text="" />
   </class>

   <!-- Define custom form label that is really just a pre-existing
        text element with foreground color and other characteristics
        defined as defaults.  -->
   <class name="formlabel" extends="text" fgcolor="#0000FF"
          fontstyle="bolditalic" />

</canvas>

The code listing above demonstrates the import statements to access the validator and formlayout components from the incubator. The example also uses several of OpenLaszlo's features like constraints, event handlers, methods, and overridden classes.

In the example above, the formlayout is used directly within the validatingForm. A custom class, validateString, extends the stringvalidator class and is used in the code to validate the text fields expecting Strings. The custom formlabel class extends the text class and provides some application-specific defaults.

The remainder of this blog entry consists of screen snapshots intended to provide a sense of the dynamic behavior of this OpenLaszlo application. I also attempt to demonstrate how the application using the same set of code runs without alteration or browser-specific syntax across the web browsers Firefox 3, Internet Explorer 7, and Google Chrome 0.2. However, with OpenLaszlo, it doesn't end there. I also demonstrate with a couple screen snapshots that this same application will work in DHTML rather than in Flash (the default I am using for the other screen snapshots) without any code changes.


Initial Application Startup / Flash / Firefox




Application In Progress / Flash / Firefox




Application in Progress / DHTML / Firefox




Application Submit Button Appears / Flash / Firefox




Application Completed / Flash / Firefox




Application Completed / DHTML / Firefox




Application Completed / Flash / Internet Explorer




Application Completed / Flash / Google Chrome




In this blog entry, I have demonstrated how to use the formlayout and validators from the OpenLaszlo incubator. I have also demonstrated running the OpenLaszlo application across multiple browsers and with Flash and DHTML.