gradientview: From the OpenLaszlo Incubator

I have blogged several times recently on different components in the OpenLaszlo Incubator. I have blogged on the tooltips component (OpenLaszlo ToolTips), the Validators (From the OpenLaszlo Incubator: Validator), and the ColorPicker (ColorPicker: From the OpenLaszlo Incubator). I have not written about the OpenLaszlo richtexteditor, but a good example with source code (right click on it and select "View Source") is at http://sbshine.net/proj/richtext/. In this blog entry, I'll very briefly look at how to use the gradientview from the OpenLaszlo Incubator.

The code listing for LaszloGradientViewExample.lzx is shown below. It demonstrates use of the gradientview and specification of some key attributes of that class as attributes of the XML element. When the generated gradientview is clicked on, the "onclick" event handler changes the colors of the gradientview, changes the orientation of the gradient, and changes the final text string in the gradientview. Note also that it is important, as the comments in the code suggest, to set opacity to less than its default of 1.0 so that the text inside the gradientview can be seen.

LaszloGradientViewExample.lzx

<canvas title="OpenLaszlo GradientView Example" debug="true">

   <include href="incubator/gradientview.lzx" />

   <script>
      initialBorderColor = 0x003300;
      initialFromColor = 0xCCFFCC;
      initialToColor = 0xFFFF99;
      borderColor = initialBorderColor;
   </script>

   <gradientview borderSize="2"
                 borderColor="${borderColor}"
                 borderColorRight="${borderColor}"
                 borderColorLeft="${borderColor}"
                 borderColorTop="${borderColor}"
                 borderColorBottom="${borderColor}"
                 colorFrom="${initialFromColor}"
                 colorTo="${initialToColor}"
                 opacity="0.5">
      <simplelayout axis="y" spacing="25" />
      <statictext name="text1"
                  text="This is a simple example of gradientview."
                  fgcolor="0x000000" fontstyle="bolditalic" />
      <statictext name="text2"
                  fgcolor="0x000000" fontstyle="bold"
         >It makes it easy to make backgrounds far more interesting.</statictext>
      <text name="text3"
         >You need to set opacity to something less than the default of 1.0.</text>
      <text name="text4"
            text="Opacity of 1.0 blocks out all text on view." />
      <handler name="onclick">
         this.setAttribute("borderColor", 0x222222);
         this.setAttribute("colorFrom", 0xFFCCFF);
         this.setAttribute("colorTo", 0xCCFF00);
         this.text4.setAttribute("text", "My opacity is set to 0.5!");
         this.setAttribute("gradientOrientation", "horizontal"); // Vertical by default
         this.draw();
      </handler>
   </gradientview>
 
</canvas>

To demonstrate the above code being executed, the following four screen snapshots shown the SWF8 initial and final versions of the gradientview and the DHTML initial and final versions of the gradient view with all four screen snapshots taken using the Firefox web browser.


Initial State of Application as SWF on Firefox




Final State of Application as SWF on Firefox




Initial State of Application as DHTML on Firefox




Final State of Application as DHTML on Firefox




You may have noticed that the text of the DHTML version changed after the click, but that there are never any gradient effects in the DHTML version. This illustrates the point that there are some components within OpenLaszlo as well as some other features that are specific to one runtime or another. This is, of course, necessary to enjoy the full advantages of each runtime when alternative runtimes do not have that feature, but it is highly desired. In this case, the DHTML runtime supports the application well enough to still provide the information at a minimally acceptable level even if it is not as eye-catching. OpenLaszlo provides ways to determine the environment at runtime and an alternative for DHTML could have been used here.

In my recent series of blog entries on the OpenLaszlo Incubator, I have attempted to demonstrate some key components provided in the Incubator. This is my final planned blog entry dedicated to a component in the OpenLaszlo Incubator, but there are many more useful OpenLaszlo Incubator components beyond those that I have discussed.