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.
<canvas title="OpenLaszlo GradientView Example" debug="true">
<include href="incubator/gradientview.lzx" />
initialBorderColor = 0x003300;
initialFromColor = 0xCCFFCC;
initialToColor = 0xFFFF99;
borderColor = initialBorderColor;
<simplelayout axis="y" spacing="25" />
text="This is a simple example of gradientview."
fgcolor="0x000000" fontstyle="bolditalic" />
>It makes it easy to make backgrounds far more interesting.</statictext>
>You need to set opacity to something less than the default of 1.0.</text>
text="Opacity of 1.0 blocks out all text on view." />
this.text4.setAttribute("text", "My opacity is set to 0.5!");
this.setAttribute("gradientOrientation", "horizontal"); // Vertical by default
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.