Showing posts with label OpenLaszlo. Show all posts
Showing posts with label OpenLaszlo. Show all posts

Tuesday, September 23, 2008

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.

Monday, September 22, 2008

ColorPicker: From the OpenLaszlo Incubator

I have blogged previously on components from the OpenLaszlo Incubator, including OpenLaszlo ToolTips (tooltips) and From the OpenLaszlo Incubator: Validators (layoutform and validators). In this blog entry, I'll show an extremely simple example of how to use the ColorPicker component from the OpenLaszlo Incubator and will show it in action in SWF and DHTML runtimes in the Firefox 3, Internet Explorer 7, and Google Chrome 0.2 web browsers.

My simple example application demonstrates that the ColorPicker allows a color to be selected tentatively by dragging the bars on the bottom three rows of the widget or by selecting a color box in the upper portion of that widget. The color selected tentatively with either of these approaches then appears in the vertical rectangle on the right. Clicking on that rectangle or on the top title bar of the ColorPicker window kicks off the "onclick" event and the selected color is applied to the canvas's background color. The source code for this sample is very brief. It is shown below and is called ColorPickerExample.lzx.

ColorPickerExample.lzx

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

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

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

<colorpicker title="Select Your Favorite Color"
allowdrag="false" width="275">
<handler name="onclick">
canvas.setAttribute("bgcolor", this.selectedColor);
</handler>
</colorpicker>

</canvas>


This simple code example leads to a color picker that is demonstrated in a series of images in DHTML and in SWF8 on the three web browsers mentioned previously. A label above each screen snapshot indicates which runtime and web browser is being used. It is difficult to see major differences in the output no matter the browser or the SWF or DHTML runtime. That is exactly the point!


Initial ColorPicker in SWF8 on Firefox




Initial ColorPicker in DHTML in Firefox




Initial ColorPicker in SWF8 on Internet Explorer




Initial ColorPicker in DHTML on Internet Explorer




Initial ColorPicker in SWF8 on Google Chrome




Initial ColorPicker in DHTML on Google Chrome




Tentatively Selected Color in SWF8 on Firefox




Color Selected and Applied in SWF8 on Firefox




Color Selected and Applied in DHTML on Firefox




Color Selected and Applied in SWF8 on Internet Explorer




Color Selected and Applied in DHTML on Internet Explorer




Color Selected and Applied in SWF8 on Google Chrome




Color Selected and Applied in DHTML on Google Chrome




Although this example is very simple, it demonstrates how easy it is to use the ColorPicker from the OpenLaszlo Incubator to allow users to select colors that can be easily applied to the application's style. In this example, the background of the canvas was changed as a color was selected in the ColorPicker.

Thursday, September 18, 2008

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.

Monday, July 14, 2008

OpenLaszlo 4.1.1 Available for Download

The OpenLaszlo blog has an entry today called OpenLaszlo 4.1.1 Now Available in which it is recommended that anyone who downloaded OpenLaszlo 4.1 "upgrade to release 4.1.1." The blog entry also includes a link to a list of bug fixes in 4.1.1. The OpenLaszlo 4.1.1 Reference is available here and OpenLaszlo 4.1.1 itself can be downloaded here.

Other good news on the OpenLaszlo front is renewed talk about a Laszlo Systems-provided Eclipse-based IDE for OpenLaszlo.

textformat NOT AWOL in OpenLaszlo 4.1

UPDATE (14 July 2008): I am updating this blog entry (striking out certain text and adding other text) to be more accurate in light of + this.getText() + "</a>";
this.setText(newUrl);
this.setHTML(true);
]]>
</handler>


In the new handler that doesn't use any form of textformat, because I was building up an HTML anchor tag myself in the JavaScript, I needed to use a CDATA block to tell the OpenLaszlo XML parser to not try to parse this JavaScript. The functionality now works exactly the same in the OpenLaszlo 4.1 environment either using lz.textformat or manually generating HTML.

Related to this, it is exciting to see in the blog entry
OpenLaszlo 4.1.1 is Coming and More... that we can expect to see 4.1.1 out soon (probably within a week) to address some issues identified by the OpenLaszlo community. That blog entry also mentions the possible release of OpenLaszlo 4.2 with SWF9 alpha support by the end of July. Finally, the brief text entry Use JavaScript 2 Today with OpenLaszlo mentions the upcoming OpenLaszlo 4.2 release and its support for compilation into various flavors of ActionScript (not surprising in light of support of SWF9).

OpenLaszlo ToolTips

The OpenLaszlo Incubator (<<openLaszloInstall>>\lps\components\incubator) has several useful components and features for developing rich web applications. These include form validators, the rich text editor (Flash runtime only, not DHTML), and tool tips (the subject of this blog entry).

The concept of a tool tip is familiar to just about anyone who has written an HMI in recent years. In HTML, a tooltip can be easily provided using the title attribute and it can be programmatically altered using JavaScript. Similarly, OpenLaszlo allows for static and dynamic setting of tooltips and OpenLaszlo can generally be compiled into JavaScript/DHTML or Flash runtime. In this blog entry, I'll demonstrate how simple it is to add a tool tip to an OpenLaszlo visual component.

This blog entry's example of applying an OpenLaszlo tooltip is trivial and is similar to those shown in the example in the OpenLaszlo blog entry Laszlo Mail Tooltip Contributed to OpenLaszlo and in the blog entry OpenLaszlo: Dynamic Tooltip Text. Here is a full example of OpenLaszlo code with a simple tooltip included.


<canvas title="Very Simple OpenLaszlo ToolTip Example">

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

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

<inputtext id="toolTipInfo" text="Click Button">
<handler name="ontext">
mainButtonToolTip.setAttribute("text", this.getText());
</handler>
</inputtext>
<button id="mainButton" text="Click Me!">
<tooltip id="mainButtonToolTip" text="${toolTipInfo.text}" />
</button>
<button id="secondaryButton" text="No, Click Me!">
<tooltip>This is the secondary button.</tooltip>
</button>

</canvas>


The above source code will not compile with the lzc compiler if the include statement is not specified. This is shown in the next screen snapshot with the message "Unknown tag: tooltip".



With the include line <include href="incubator/tooltip/tooltip.lzx" /> included, the source code above does compile correctly.

The next series of screen snapshots show the tooltips used in the code above in action. The first two screen snapshots show the tool tips that are provided initially for each button and the third screen snapshot demonstrates the changed tool tip for the main button based on the text entered in the input text field.







All three screen snapshots above show the OpenLaszlo tooltip in an SWF8 runtime (now the default runtime in OpenLaszlo 4.1). Of course, OpenLaszlo's support for a DHTML runtime is a compelling feature for many developers. The next single screen snapshot shows the application running in DHTML. The image was captured after the inputtext field was changed to contain the contents "Dustin!".



With the OpenLaszlo tooltip, it is possible to go back to the OpenLaszlo RSS Reader example and add tool tips to that reader. The next screen snapshot shows how this looks when one of the newly added tool tips is displayed.



The OpenLaszlo tool tips are highly useful in providing additional detail to users. Fortunately, they are easy to add as well.

Tuesday, July 1, 2008

Big News in the OpenLaszlo Community: 4.1 and 500k

There have been two major OpenLaszlo announcements in the last two days (yesterday and today) as recorded at http://swik.net/OpenLaszlo. It was announced today that one-half million copies of OpenLaszlo have been downloaded.

While 500,000 downloads is a significant milestone for the OpenLaszlo project, an even bigger announcement for many of us was made a day earlier when it was announced that OpenLaszlo 4.1 is now available and is the recommended released of OpenLaszlo. This is exciting news for anyone who has been waiting for OpenLaszlo's DHTML support to move out of beta Frankly, I was surprised at this release because I assumed that it would still be a while before 4.1's release due to recent interest in OpenLaszlo support of Flash Player 9.

Although the big news associated with OpenLaszlo 4.1's release is its DHTML support, it is also worth noting that "preliminary" support for Flash Player 9 has also been included. Other welcome news includes the observation that OpenLaszlo 4.1 addresses over 800 bugs. The current download page indicates the particular web browser/operating system combinations on which OpenLaszlo 4.1 has been qualified.

The OpenLaszlo 4.1 Release Notes contain additional details and information regarding this release. For example, these Release Notes point out that the button for compiling using preliminary Flash 9 support has been removed from the developer console. However, an OpenLaszlo developer can still choose to compile to Flash 9 using the
lzr=swf9 Laszlo Runtime parameter. The Release Notes also link to the document "Runtime Differences," which documents runtime differences between DHTML and SWF/Flash.

Another piece of recent good news for OpenLaszlo applications is the announcement of SWF searchability. One of the common complaints against Flash-based applications is their reduced ability to support engine optimization. A common approach has been to include text in the HTML "wrapper" pages of Flash applications, but this new approach should provide developers of Flash applications with much greater power and flexibility in search engine support. For now, this increased Flash searchability seems limited to Google and Yahoo! search engines, but my guess is that these two are by far the most heavily used of the search engines.

Friday, June 27, 2008

OpenLaszlo and SpketIDE

SpketIDE is a useful IDE for developing OpenLaszlo applications. SpketIDE provides many useful OpenLaszlo editing functions beyond the simple color syntax support available with NetBeans 6.1 (as demonstrated in Flex and OpenLaszlo in NetBeans 6.1 Beta) or JEdit (as demonstrated in Using JEdit with OpenLaszlo and Flex) or other XML-cognizant editors.

The main SpketIDE Laszlo Editor page demonstrates many of the useful features Spket provides for OpenLaszlo development. Of course, there is color syntax highlighting support, but there is also support for more advanced features such as different types of code completion and occurrence marking. I like having the Laszlo documentation available in the editor as an added convenience because I otherwise find myself spending a lot of time flipping back and forth between my editor and the LZX Reference Manual.

According to the Spket 1.6.12 Downloads page, there is no charge for SpketIDE for non-commercial use. Currently (late June 2008), the license cost for a single license for commercial use is less than $30 USD. The SpketIDE FAQ also provides information on how to use SpketIDE with OpenLaszlo specifically.

I used SpketIDE to write the code for my example of writing an RSS Reader with OpenLaszlo and a screen snapshot of that code in SpketIDE is shown next (click on the image to see a larger version).



This snapshot demonstrates the Project Explorer, the Outline, Code Snippets (with Components opened up), the Lz Documentation window, and, of course, the main code editing window with color coded syntax.

SpketIDE is a useful editor for OpenLaszlo developers that is simple but powerful, easy to use, and has the potential to increase OpenLaszlo developer productivity.

Tuesday, June 24, 2008

An OpenLaszlo RSS Reader Implementation

In this blog entry, I demonstrate generation of a simple RSS Reader using OpenLaszlo. The world certainly doesn't need another RSS reader, so the purpose of this blog entry is to demonstrate some of the easy-to-use features of OpenLaszlo.

The RSS reader shown in this blog entry will focus on blogs hosted on Blogger (blogspot.com). There are two URLs one can use to access RSS feeds from blogs with the blogspot.com domain. These are listed next with my own blog URL (marxsoftware.blogspot.com) used as the example.

1. http://marxsoftware.blogspot.com/feeds/posts/default?alt=rss (see Blogger Feed URLs for additional details)

2. http://marxsoftware.blogspot.com/rss.xml

This example will use the first type of URL to access blogspot.com-based RSS feeds and display the blog entries titles, URLs, and summaries if available. This simple reader allows the user to enter the main part of the blogspot.com blog name and the remainder of the appropriate RSS URL is constructed automatically. By default, this blog's RSS feed is initially displayed, but it can be changed to any other blog on the blogspot.com domain.

The next three screen snapshots show the OpenLaszlo-based RSS Reader displaying RSS feed information from the blogs http://marxsoftware.blogspot.com/, http://jacksonsoftware.blogspot.com/, and http://mmartinsoftware.blogspot.com/. Click on the screen snapshots shown here to see larger version.

OpenLaszlo-based RSS Reader Showing My Blog RSS Feed




OpenLaszlo-based RSS Reader Showing Bill's RSS Feed




OpenLaszlo-based RSS Reader Showing Michael's RSS Feed




With an idea of how the RSS Reader built on OpenLaszlo works, it is time to turn to the code. I'll first list the entire listing for this OpenLaszlo application and then will focus on some pieces of it.


<canvas title="Blog RSS Reader">
<!-- Dataset bound to blog's RSS feed. -->
<dataset name="blogRssFeed"
request="true"
src="http://marxsoftware.blogspot.com/feeds/posts/default?alt=rss" />

<!-- Alternative RSS Feed URL: http://marxsoftware.blogspot.com/rss.xml -->

<!-- Allow for BlogSpot/Blogger URL input. -->
<window name="urlEntryWindow"
title="Provide BlogSpot/Blogger URL"
width="${parent.width}" height="15%">
<view name="blogUrlSelectorView" width="${parent.width}">
<simplelayout axis="x" spacing="5" />
<statictext name="entryLabel">Enter blog name:</statictext>
<inputtext id="urlInputText"
width="${parent.width*.35-parent.entryLabel.width}" />
<text id="urlDisplayText"
width="${parent.width*0.35-5}"
bgcolor="0xFFFF99">
<handler name="ontext" reference="urlInputText">
/*
this.setText( "http://" + urlInputText.getText()
+ ".blogspot.com/rss.xml");
*/
this.setText( "http://" + urlInputText.getText()
+ ".blogspot.com/feeds/posts/default?alt=rss");
</handler>
</text>
<button>
<font color="0xFF00FF">Process this RSS Feed</font>
<handler name="onclick">
blogRssFeed.setSrc(urlDisplayText.getText());
blogRssFeed.doRequest();
</handler>
</button>
</view>
</window>

<!-- Presentation of blog RSS feeds. -->
<window title="Blog RSS Reader"
y="${parent.urlEntryWindow.height}"
width="100%" height="85%">
<view width="${parent.width}">
<view datapath="blogRssFeed:/rss/channel/item"
width="${parent.width}">
<simplelayout axis="y" spacing="5" />
<view name="feedTitleView" width="${parent.width}">
<simplelayout axis="x" spacing="10" />
<text name="rssFeedTitleLabel"
text="TITLE: "
fontsize="12"
fontstyle="bold"
resize="true"
width="${parent.width*0.1}" />
<text name="rssFeedTitle"
text="$path{'title/text()'}"
fontsize="12"
fontstyle="italic"
resize="true"
width="${parent.width*0.9}" />
</view>
<view name="feedLinkView" width="${parent.width}">
<simplelayout axis="x" spacing="10" />
<text name="rssFeedLinkLabel"
text="URL: "
fontsize="12"
fontstyle="bold"
resize="true"
width="${parent.width*0.1}" />
<richinputtext name="rssFeedLink"
text="$path{'link/text()'}"
fontsize="12"
resize="true"
width="${parent.width*0.9}"
selectable="true">
<handler name="ontext">
htmlLink = new textformat(); // LzTextFormat is deprecated
htmlLink.setAttribute("url", this.getText());
htmlLink.setAttribute("target", "blank");
this.setHTML(htmlLink);
this.setTextFormat(htmlLink);
</handler>
</richinputtext>
</view>
<view name="summaryView" width="${parent.width-10}">
<text name="summaryText"
text="$path{'summary/text()'}"
fontsize="10"
resize="true"
width="${parent.width}"
multiline="true"
x="${parent.x+5}" />
</view>
</view>
<simplelayout axis="y" spacing="25" />
</view>
<!-- Laszlo scrollbar is along y-axis by default. -->
<scrollbar />
</window>
</canvas>


This OpenLaszlo example provide several observations about OpenLaszlo development. First, this example shows how easy it is to have OpenLaszlo access server-side XML resources using the <dataset> tag:


<dataset name="blogRssFeed"
request="true"
src="http://marxsoftware.blogspot.com/feeds/posts/default?alt=rss" />


The dataset tag example shown above uses only three lines to associate a handle/name with the dataset called "blogRssFeed", instructs OpenLaszlo to initialize the dataset immediately, and provides the URL from which to access the data. I could have added the attribute type="http" to explicitly instruct OpenLaszlo that this data is obtained from an HTTP connection (rather than from a file), but using "http://" in the src attribute did essentially the same thing.

This sample blog RSS reader also provides examples of one of OpenLaszlo's most powerful features, the ability to use constraints. Constraints are easily identifiable by the ${---} syntax (similar to Ant properties syntax). In this example, I did not declare a constraint compiler directive, so it is implicitly assumed the compiler directive is always. Used this way, these constraints instruct OpenLaszlo to update attribute values immediately when the value to which they are constrained is updated.

A third interesting observation from this simplistic OpenLaszlo-based RSS Reader is the use of richinputtext with textformat:


<richinputtext name="rssFeedLink"
text="$path{'link/text()'}"
fontsize="12"
resize="true"
width="${parent.width*0.9}"
selectable="true">
<handler name="ontext">
htmlLink = new textformat(); // LzTextFormat is deprecated
htmlLink.setAttribute("url", this.getText());
htmlLink.setAttribute("target", "blank");
this.setHTML(htmlLink);
this.setTextFormat(htmlLink);
</handler>
</richinputtext>


In the snippet above, a handler is specified for the richinputtext element by nesting the handler element within the richinputtext element and providing the type of event it should handle (ontext) via the name attribute of handler.

The snippet above also demonstrates use of textformat (replaces the deprecated LzTextFormat and intended for script [not LZX XML markup] only). It also demonstrates using textformat in conjunction with the richinputtext element to create HTML text. In this case, it creates an HTML link to the designated RSS feed URL and does so in a new browser window.

Although this example provides several additional interesting things to highlight, I'll end this entry with one more thing of personal interest. Several pieces of the OpenLaszlo application take advantage of OpenLaszlo's XPath syntax support to query XML from the dataset populated via the RSS feed URL. The ability to use XPath syntax is advantageous because of its familiarity to those who have used XPath in other things (such as XQuery or XSLT), because of the standard nature of XPath, and because of the expressive but concise nature of XPath syntax.

In this blog entry, I've attempted to demonstrate by example that OpenLaszlo supports several standards including XML, XPath, HTTP, and ECMAScript. OpenLaszlo also supports an implementation of the de facto "standard" XMLHttpRequest for non-XML data handling. With OpenLaszlo's basis in and support of common web development standards, it is a relatively easy technology to learn and apply.




UPDATE (14 July 2008): There are a couple of updates to note related to this OpenLaszlo-based RSS Reader. They are listed next with hyperlinks to more details.


* OpenLaszlo 4.1 no longer supports textformat as used above, but it must be used as lz.textformat() instead -- see textformat NOT AWOL in OpenLaszlo 4.1 for more details.

* Tooltips can be added to the RSS Reader to make it more user-friendly as described in OpenLaszlo ToolTips.

Monday, May 26, 2008

OpenLaszlo Conditional Compilation

In a previous blog entry, I talked about Flex 3's support for conditional compilation. In this blog entry, I cover OpenLaszlo's conditional compilation support.

In the OpenLaszlo Application Developer's Guide, Chapter 49 ("Understanding Compilation") discusses two types of condition compilation available in OpenLaszlo (Conditional Compilation of Runtime-Dependent Code and Compile-time Constants). A third specific type of conditional compilation available in OpenLaszlo is discussed in Conditional Compilation of Debugging Code in Chapter 51 ("Debugging") of the same OpenLaszlo Application Developer's Guide.

The OpenLaszlo blog entry Conditional Compilation also discusses all three conditional compilation types, but does not provide examples as thorough as what are in the OpenLaszlo Application Developer's Guide or in my blog entry here.

Here is a code sample that attempts to demonstrate the three primary types of conditional compilation in OpenLaszlo. I'll break this overall code sample down into the individual parts for each of the three types of conditional compilation in OpenLaszlo after the code listing.


<canvas width="750" height="500">
<script>
<![CDATA[
// See http://weblog.openlaszlo.org/archives/2005/11/conditional-compilation/
// for additional details on conditional compilation in OpenLaszlo. See also
// Chapter 49 ("Understanding Compilation") in the OpenLaszlo Application
// developer's guide.
]]>
</script>
<window id="MainWindow"
title="Demonstrate Conditional Compilation">
<simplelayout axis="y" spacing="10" />
<statictext id="mainLabel"
width="500"
height="25">Enter Who To Greet
</statictext>
<edittext id="inputTextArea" width="500"/>
<button>
Click Me to See Greeting
<handler name="onclick">
<![CDATA[
if ($formal)
{
greetingStr = "Good day, ";
}
else
{
greetingStr = "What do you think of this weather?, ";
}
greetingStr += inputTextArea.text;
greeting.setText(greetingStr);
]]>
</handler>
</button>
<statictext id="greeting" width="500" height="25" />
<switch>
<when runtime="dhtml">
<statictext>You specified DHTML runtime.</statictext>
</when>
<when runtime="swf7">
<statictext>You specified Flash 7 runtime.</statictext>
</when>
<when runtime="swf8">
<statictext>You specified Flash 8 runtime.</statictext>
</when>
<otherwise>
<statictext>You didn't specify a runtime explicitly.</statictext>
</otherwise>
</switch>

<text id="debugStatus" width="500" height="25">
<handler name="onconstruct">
<![CDATA[
if ($debug)
{
debugStatus.setText("Debug is turned ON.");
}
else
{
debugStatus.setText("Debug is turned OFF.");
}
]]>
</handler>
</text>
</window>
</canvas>


The code highlighted above in dark green is part of the illustration of compile-time constants conditional compilation. The code highlighted in brown demonstrates use of debugging conditional compilation and the code highlighted in blue illustrates runtime-dependent conditional compilation.

The first compilation with the OpenLaszlo command-line compiler lzc is shown in the next screen snapshot.



The lzc use in this snapshot shows that the code above was compiled to SWF8, was compiled with debug turned on (the -g2 option), and was compiled with a -Dformal=true option.

The next two screen snapshots show the initial OpenLaszlo application rendered when the resultant SWF is run followed by how it appears when a value is submitted in the form. The example shows that the application is able to tell that debugging was set (the -g2 option to the lzc compiler) and that the runtime the application was compiled to was indeed SWF8. However, the compile-time constant did not seem to work. In the next example, we'll add a $ in front of the name passed to the -D option.





The next example compiles the same source code, but this time the source code is compiled without the debug flag (no -g2 option), with the SWF7 runtime, and with an attempt at trying to get the compile-time constant to work by adding a $ to the name passed to the -D option.



When the code is compiled as above, the application looks as follows when the SWF is executed and text is supplied to the input text field.



In the rendered output, we see that the Flash Player is version 7 and we also see that it is not in debug mode both because our conditional told us that and because the OpenLaszlo debugger window is not present. Unfortunately, the presence of the "What do you think of this weather?" in this output indicates that the compile-time constant is still not being recognized even though we added a dollar sign ($) in front of the name passed to the compiler with the lzc compiler.

To this point, I have not been able to get compile-time constants to work correctly with OpenLaszlo. If someone else has, please let me know what I'm doing incorrectly here. However, as the code examples and output examples above demonstrate, the OpenLaszlo runtime conditional compilation and debug conditional compilation are both easy to use.

Saturday, May 24, 2008

DHTML/SWF Differences in OpenLaszlo

OpenLaszlo is well known for supporting the ability to compile the same source code into either Flash Player-ready code (SWF) or into dynamic HTML (DHTML). While significant amounts of code can be written in OpenLaszlo's LZX and JavaScript subset languages that does compile to both runtime platforms, there are certain APIs and libraries that are specific to one runtime or the other.

In this blog entry, I attempt to collect some of these differences for easy future reference. Note that this is a collection based on what the OpenLaszlo documentation says, what others' blogs and articles say, and what I have found in my own OpenLaszlo development. The reason to note this is that things may and probably will change and some things may have already changed since the sources I have used were originally written.

Before diving into the list of items in OpenLaszlo that are specific to either DHTML or to SWF, it is also important to note that, as of this writing, the two production-ready runtime environments for OpenLaszlo appear to be Flash 7 (SWF7) and Flash 8 (SWF8). While OpenLaszlo's DHTML runtime support already covers significant functionality, the OpenLaszlo 4.0.12 Release Notes (currently the latest stable version) states that DHTML support is still in "beta" and that it will move out of beta with the release of OpenLaszlo 4.1. As I blogged about earlier, the 4.1 release will likely be delayed because of renewed emphasis on finishing OpenLaszlo's support for Flash Player 9.


Different Runtime Environment Support

The most obvious differences between OpenLaszlo SWF and DHTML support may be in the classes OpenLaszlo expressly provides for the different runtimes. The advantage of using these runtimes is that doing so is largely transparent to the developer. The three classes are LzBrowser (mentioned in a previous blog entry), LzKeys, and LzHistory. These unique and different versions of the same three classes for the different runtimes appears to be an OpenLaszlo 4.1 feature.


Assets

Chapter 8 ("Introduction to Media and Art Assets") of the OpenLaszlo Application Developer's Guide has a specific section on Runtime Considerations that warns that SWF assets cannot be used in DHTML applications and that formats not available in the Flash runtime are obviously not available to DHTML applications hosted in SOLO mode.

Chapter 18 ("Media Resources") of the OpenLaszlo Application Developer's Guide points out that more image types can be loaded by the Flash Player 8 than by Flash Player 7 in the section Flash 7 and Flash 8 Limitations (applies to SOLO deployments).

Chapter 21 ("Text Views") of the OpenLaszlo Application Developer's Guide reminds the reader that only image formats supported by the Flash Player can be used in an OpenLaszlo application intended for the Flash Player as at least one of its target runtimes.

All of the discussion in Chapter 42 ("Audio and Video") of the OpenLaszlo Application Developer's Guide is devoted to Flash-only runtime.


Text and Fonts

Chapter 9 ("Introduction to Text and Fonts") of the OpenLaszlo Application Developer's Guide also warns about potential use of things (text fonts in this case) that are specific to one runtime or the other. Chapter 23 ("Fonts") of this same document provides greater detail on the SWF-specific font support that is available as well as the difference in rendering of DHTML applications as opposed to SWF applications. An example of differences between the two runtimes' handling is the availability of embedded fonts in Flash runtimes (albeit with larger downloads) that are not available for DHTML (client or system fonts are the only ones available there). The implication of this is that consistency of font appearance cannot be guaranteed for DHTML applications like it can be for SWF if embedded fonts are used in the Flash Player.

Chapter 22 ("Rich Text") of the OpenLaszlo Application Developer's Guide covers the richinputtext LZX tag and states that this is for Flash runtime only.


Browser Integration

Whether compiling one's OpenLaszlo application to Flash (SWF7 or SWF8 as of now) or to DHTML, it is almost certain that the deployed application will be run in a web browser. Chapter 35 ("Browser Integration") of the OpenLaszlo Application Developer's Guide points out differences in browser integration for Flash runtimes versus DHTML runtime. The section Applications Compiled to SWF points out that LzBrowser allows the OpenLaszlo-generated SWF to be visible to the hosting browser's JavaScript and the setCanvasAttribute can be used for the OpenLaszlo application to access hosting JavaScript. For DHTML, as documented in the section Applications Compiled to DHTML, the OpenLaszlo application is an object in the browser's DOM and therefore can directly access and be accessed by that Document Object Model.


Miscellaneous Differences

There are some less significant differences between OpenLaszlo applications compiled to DHTML and those compiled to Flash such as differences in recommended debugging tools (general web development tools useful for DHTML are not useful for Flash in most cases). Perhaps the most common difference I run into when compiling to these different runtimes is in the appearance detail. Often, my OpenLaszlo applications work in both DHTML and Flash at a minimum level, but the appearance can differ greatly between the Flash runtime and the DHTML runtime. While the application does technically "work," the statement the devil is in the details truly applies because it can take a lot of iterative trial-and-error to get layouts, fonts, and other presentation aspects set just right to appear correctly in Flash and in the major browsers' DHTML rendering.


What Does This All Mean?

I have referenced the OpenLaszlo Application Developer's Guide repeatedly in this blog entry because that seems to be the best source of details on which aspects of OpenLaszlo work only in DHTML or only in SWF. A particularly useful overview of the DHTML versus Flash runtime decision also comes from this same document. Chapter 2 ("Language Preliminaries") of this document contains a section called On Runtimes and Deployment Modes and the 'Core' API. This section points out the four major choices an OpenLaszlo developer can make when considering runtimes. Before OpenLaszlo 4 (and really until OpenLaszlo 4.1 is available with DHTML support out of beta), Flash is the safest bet for production runtime and having a Flash-only solution (ensuring no DHTML-only code in the application and leveraging some features provided by the Flash Player) is likely a popular option. On the other hand, if a particular user set does not have access to the Flash Player or the developer has other concerns about the Flash Player, he or she may choose the DHTML-only solution (do not use any Flash-specific features or code and do take advantage of some DHTML-specific features). The developer who wants the freedom to switch between runtimes easily will choose to either use only the "core" APIs that don't have features specific to either runtime or will choose the last option, which is to write the code to conditionally use specific features only when in that particular runtime. An example of this last option, conditionally compiling depending on the runtime, is discussed in the OpenLaszlo Application Developer's Guide in Chapter 49 ("Understanding Compilation") in the section Conditional Compilation of Runtime-Dependent Code.


Conclusion

For the most part OpenLaszlo code can be compiled into either Flash or DHTML runtimes and it is likely that the DHTML support that is now in beta will be much better with the OpenLaszlo 4.1 release. While I currently prefer OpenLaszlo's Flash runtime support, it is an advantage knowing that all or significant portions of my OpenLaszlo applications can likely be readily compiled to DHTML should a situation arise in which use of the Flash Player by clients, customers, and other users is not practical.

Saturday, May 17, 2008

Access the Flash Player in OpenLaszlo

In previous blog entries, I demonstrated using the Flash Player via Flex to write data to the clipboard and to read/write Flash cookies. In this blog entry, I intend to demonstrate how to interact with the Flash Player from OpenLaszlo.

I'll specifically use these same two functions (writing data to the clipboard and interacting with Flash Cookies) to demonstrate OpenLaszlo interaction with the Flash Player. One very important note here is that, as of today (17 May 2008), OpenLaszlo specifically supports SWF7 or SWF8 but not SWF9. On the other hand, Flex only supports SWF9 and not SWF7 or SWF8. For the utilities I am demonstrating here, this distinction does not matter.

Using Flash with OpenLaszlo to Write to Clipboard

The code below shows a simple OpenLaszlo LZX file that adequately demonstrates the ability to write to the clipboard in OpenLaszlo via the Flash Player.


<canvas width="750" height="500">
<script>
<![CDATA[
function placeInputTextOnClipboard()
{
LzBrowser.setClipboard(inputTextArea.text);

}
]]>
</script>
<window id="MainWindow"
title="Write to Clipboard via Flash Player">
<simplelayout axis="y" spacing="10" />
<statictext id="mainLabel"
width="500"
height="25">Enter a string below to write to the clipboard.
</statictext>
<edittext id="inputTextArea" width="500"/>
<button onclick="placeInputTextOnClipboard()">
Click Me to Place Text on Clipboard
</button>
</window>
</canvas>


The single highlighted line in the code listing above is all that it takes to write to the clipboard from OpenLaszlo code. This line uses OpenLaszlo's LzBrowser (swf) class. The advantage of using this LzBrowser class is that the code that uses this class is portable to the DHTML runtime as well, thanks to the LzBrowser class for DHTML. The ability of this code to compile for both SWF and DHTML deployments is proven with the following two screen snapshots that show a successful command-line compilation of the code above for SWF8 and a successful compilation of the same code for DHTML.

Compiling to SWF8 with LzBrowser.setClipboard



Compiling to DHTML with LzBrowser.setClipboard



The easiest way to see other common functionalities available for SWF and DHTML environments is to read the LzBrowser documentation for both SWF and DHTML. Doing so shows that other supported functions include callJs, getVersion, and loadURL.

I need to take a single paragraph detour here for an important note. At the time of my writing of this blog entry, my use of LzBrowser.setClipboard() for DHTML was not working properly and was reporting "LFCdhtml-debug.js#18026: System is not defined". I am not sure if this is me missing a necessary OpenLaszlo file in my WAR file or a DHTML bug that will be fixed before OpenLaszlo's DHTML support is formally released with OpenLaszlo 4.1 or if it is some other issue altogether. In the LFCdhtml-debug.js file at line 18026, there is a line "System.setClipboard()" that looks like it is the Flash Player call rather than a DHTML-appropriate call. Because I most often use OpenLaszlo's SWF8 capabilities, this has not been an issue for me personally. Note that the LzBrowser.getVersion works properly for me in both SWF compilations (reports Flash Player's version) and in DHTML (reports web browser name and version).

It was easy to write data to the clipboard in OpenLaszlo in both the SWF and DHTML code because the LzBrowser class specifically supported this functionality. However, there are other Flash Player functions that are not explicitly supported in LzBrowser. To access these from OpenLaszlo, we'll need to access them using the Flash Player ActionScript classes that provide access to the Flash Player.

In my blog entry on Flash Cookies with Flex, I demonstrated use of the flash.net.SharedObject class to write and read Flash cookies. OpenLaszlo provides a handle for calling ActionScript classes. This can be used to call this same flash.net.SharedObject class. The simple code below shows how one can write to a Flash Cookie from OpenLaszlo:


<canvas width="750" height="500">
<script>
<![CDATA[
function writeInputTextToCookie()
{
var lso = SharedObject.getLocal("dustinLaszloLocalSharedObject");
lso.data.text = inputTextArea.text;

persistedText.setText(inputTextArea.text);
}
]]>
</script>
<window id="MainWindow"
title="Write and Read Flash Cookies">
<simplelayout axis="y" spacing="10" />
<statictext id="mainLabel"
width="500"
height="25">Enter a string below to write to the Flash Cookie.
</statictext>
<edittext id="inputTextArea" width="500"/>
<statictext id="persistedText" width="500" height="25">TBD</statictext>
<button onclick="writeInputTextToCookie()">
Click Me to Write Text to Flash Cookie
</button>
</window>
</canvas>


I highlighted the applicable code for writing to a Flash cookie from OpenLaszlo. It looks suspiciously similar to the Flex code for persisting Flash cookies because both take advantage of Flash-specific ActionScript classes.

The next screenshot shows how the compilation process of the above code looks:



Once the OpenLaszlo-based, Flash Cookie-writing application has been compiled into its SWF8 version, it can be run as shown in the next screen snapshot. In this example, I entered the text "Please write this out to cookie." in the input text field. After clicking on the only available button, that same string is shown to indicate that it was processed and the cookie is persisted.



I can verify that the cookie was written by going to my local storage drive and checking for the cookie. I documented in the Flash Cookies with Flex blog entry regarding this operating-system specific location. The next two screen snapshots indicate the presence of this newly written file from a Windows Explorer viewpoint and from a Windows PowerShell viewpoint. Note that I have intentionally marked-out the portion of the directory that is specific to me and randomly named for security reasons.

Windows Explorer View of OpenLaszlo-Persisted Flash Cookie



Windows PowerShell View of OpenLaszlo-Persisted Flash Cookie



I highlighted with a yellow-ish rectangle the text contents of the Flash Cookies as viewed in PowerShell with the type command. The text contents match what was specified in the OpenLaszlo application to be written to a Flash Cookie.

It was remarkably easy to access Flash Player ActionScript classes to work with the Flash Player. However, the one major drawback to directly accessing these ActionScript classes is that they are not supported in the DHTML runtime environment. Although the LZC compiler can compile the file okay even with --runtime=dhtml set, the application does not work correctly. When debug is turned on, the error preventing the application from running in DHTML mode becomes clear: the Flash Player-specific ActionScript class SharedObject cannot be found. The next screen snapshot displays this:



While it is not surprising that DHTML runtime cannot support a Flash Player-specific ActionScript class, it is important to make note of it because using such classes might benefit an OpenLaszlo application to be deployed to Flash Player runtime but will not work and might even hinder the same application's deployment to the DHTML runtime.

Conclusion

OpenLaszlo provides extremely easy access to a few of the most common Flash Player functions via its LzBrowser classes for SWF and DHTML. The advantages of this approach include ease of use and support for the multiple runtime environments.

It is not much more difficult to use the Flash Player ActionScript classes directly to obtain Flash Player functionality not included in LzBrowser. However, the one major disadvantage here is that these classes are Flash-specific and so do not work in the DHTML runtime. There are other things that one can do with OpenLaszlo that are also Flash-only, so these things can and are done. They simply require extra care (and probably a second thought) when adding them to OpenLaszlo applications.