Motivations

Webcast tutorial
I learned about open laszlo from a coworker. I watched this webcase tutorial that came with their latest release open laszlo 4 and thought it was very cool.

I CAN USE PHP!
Originally I was not too thrilled to find that I must run the laszlo java servlet in order to compile the lzx files. Since all of my sites are hosted on LAMP servers, I would not be able to show off my end result if it only runs on java. Then I found this tutorial on how to use a php backend for open laszlo, it gave me a great head start.

Awesome community
Despite the fact you have to be approved individually to post on their forum, they have an awesome community. For the basic stuff I did, I found all my answers viewing the forum and looking at their great documentation.

How to create a form
Last weekend I started off by trying to understand some basics. First, how to create a form. Obviously just like good old HTML, you need some kind of protocol to communicate with the backend server. Open Laszlo supports HTTP post and get and many others. Originally looking at the php open laszlo tutorial, I was disappointed to find that you must manually create a post request.

First you create an “input field” if you will:

<!-- Editable text input field -->
<edittext id="nameEntry" width="160"></edittext>

Then on the “submit button”, you have to manually create a request:

<button width='160'> Join Guest List
	<method event="onclick">
		var dataEntry = canvas.datasets.EasyDataEntry;
		var passedData = new LzParam();
		passedData.addValue("guestName", nameEntry.getText(), true);
		dataEntry.setQueryString(passedData);
		dataEntry.doRequest();
	</method>
</button>

This is a big turn off. I was like what is this? We are going backwards now? Even HTML does not make you REPEAT your input fields. Unsatisifed with the result, I spent a lot of time figuring out a better way of doing a form submission. I knew from their learn open laszlo in 10 mintues that there is a form element. It could be a newer element so the author of the tutorial didn’t use it. Once I figured it out, it is really quite simple.

First you create a dataset (btw, all data communication with Open Laszlo is done in XML)

<dataset name="echoer" src="shoutBox.php" request="true" type="http" querytype="POST" />

Then you create a form with a submit element that references the dataset. (btw, form is really a combination of a data form and a special view/layout)

<form x="0" y="0" width="100%" height="40" layout="axis: x; spacing: 6">
<submit name="submitter" data="${echoer}"/>
<edittext width="120" name="firstName" />
<button isdefault="true" onclick="parent.submitter.submit()">Submit</button>
</form>

This is pretty much equivalent to the HTML form:

<form action="shoutBox.php" method="post">
<input name="firstName" />
<input type="submit" value="Submit" />
</form>

Form validation
Despite being version 4.0, there is no official build-in form validation packaged with the release. THERE IS however a very nice library proposal. It’s also packaged in the download inside of the components/incubator folder. However for my purpose, I do not need all the functions in the library. All I wanted was to make sure both “name” and “message” fields are filled in before the form is submitted. Checking for the empty fields is not a big deal but trimming the field inputs is. Since Open Laszlo does NOT have regular expression support, a trim method must be written with split and join.

<method name="dotrim" args="s">
	<![CDATA[
	// the worst trim method ever?
	var aEntry = s.split(' ');

	var tEntry = new Array();
	for (var n = 0; n < aEntry.length; n++) {
		if (aEntry[n] != '') {
			tEntry.push(aEntry[n]);
		}
	}

	return tEntry.join(" ");
	]]>
</method>

Although it may not be the worst trim method ever, it’s pretty yucky. Without regular expression, complex formatting and validation will be difficult.

Displaying data
Displaying data in Open Laszlo is pretty straight forward. You read the data from an XML and then use Xpath to point to the data you want to display. I used a few views for mine.
btw, boxview is a library I stole from the incubator.

<view name="congrats" width="100%" height="87%" clip="true">
	<datapath xpath="echoer:/response" replication="lazy" />
	<view layout="axis: y">
		<boxview datapath="post" layout="axis:y" bordersize="0" paddingsize="6">
			<view layout="axis:x">
				<text datapath="@name" fontstyle="bold"/><text> said: </text>
			</view>
			<text resize="true" multiline="true" width="${this.parent.parent.parent.width-24}" datapath="text()"/>
		</boxview>
	</view>
	<scrollbar axis="y" /> 
</view>

Eye candies
Being the UI person I am, I cannot finish my work without UI touches. First I added alternating rows for my data display. This is nothing like HTML. I found this piece of advice from the forum.

<!-- remember what color this row should be. -->
<attribute name="rowcolor" type="color" value="0xdddddd" />

<!-- set the alternating row color -->
<method event="ondata">
	// close the adding window
	adding.close();
	shoutBox.setOpacity(1.0);
	// set the alternating row color.
	var pos = this.datapath.xpathQuery('position()');

	if (pos % 2 == 0) {
		this.setAttribute('rowcolor', 0xf3eee1);
	} else {
		this.setAttribute('rowcolor', 0xdcd0b1);
	}
	this.setBGColor(this.rowcolor);
</method>	

<method event="onmouseover">
	this.setColor(0xffffff); 
	this.setBGColor(0x4b564b);     
</method>

<method event="onmouseout">
	this.setColor(0x000000);
	this.setBGColor(this.rowcolor);
</method>

Then I played with fonts. It’s really sweet that you can include your own ttf files to have complete control over font faces.

<font name="04B_21"  src="04B_21.ttf" />

But I don’t like the fact it automatically apply anti-alias to any fonts. This makes using pixel fonts difficult. I tried many different pixel fonts, only 04B_21 looks good with the anti-alias applied because it doesn’t look like there is anti-alias. However, the lower case for 04B_21 are symbols so I cannot use it for all text for the window. So I was only able to use it for the button text. I wish there is a anti-alias attribute where you can select “none” like photoshop XP. boy, am I dreaming?

I also looked into styles for various things. I know CSS is supported. I cannot see how you can do modern development without the concept of CSS. However obviously since you can now control a lot more for the components, you have different syntax. Open Laszlo also has some build in styles. Here are some examples for a window. I used the greenstyle for my shoutBox window.

Animation
When I started writing this blog entry, I realized my shoutBox doesn’t have any animation. I was just saying to myself that one big advantage flash has over ajax is animation. It’s a lot easier to do animation in flash than ajax. And since Open Laszlo makes animation even easier, how can I not have animation in my project? I quickly added some animation on window close and faded the window after a shout is submitted. As expected, it took very little time and only a few lines of code.

<method name="close">
	closeIt.doStart();
</method>

<animatorgroup name="closeIt" process="simultaneous" duration="1000" start="false">
	<animator attribute="width" to="0" />
	<animator attribute="height" to="0" />
	<animator attribute="x" to="20" />
	<animator attribute="y" to="20" />
	<animator attribute="opacity" to="0" />
</animatorgroup>

After I added the animations, I was wondered how much bigger the flash file became. To my surprise, it was only 1kb bigger.

Coding in XML
Coming from java, php, javascript background, coding in XML takes a while to get used to. Fortunately in Open Laszlo, you can pretty much use javascript like syntax for most of your real code inside of CDATA 🙂 So it’s really not too painful.

My source code
Here’s my Open Laszlo my source code for my shoutBox. Feel free to steal from it if you need 🙂