Form Fields

[roundpeg]

I am in the process of putting together a complex form and would like to know how you make them look as great as the ones in the demo's. I have searched and have found very little. Specificly I would like to know how to have a border around the form fields.

[antun]

Hey roundpeg

If you're talking about the Redmond components, you can find a list of them in WEB-INF/lps/components/redmond. Unfortunately they are not very well documented, so look at the list of files to get an idea of what's there.

To get a bordered text field, you use the <windowtext> element (see here: http://www.laszlosystems.com/developers/learn/documentation/tutorials/text.php#input).

Alternatively it's very easy to write your own. Say you wanted a non-3D bordered text field -


<canvas debug="true">
<class name="myTextField" bgcolor="0x0000ff" width="100" height="18">
<attribute name="text" type="string" />
<view name="whitebg" bgcolor="0xffffff"
width="immediateparent.width-2"
height="immediateparent.height-2"
align="center" valign="middle">
<inputtext name="myText"
width="immediateparent.width-2"
height="immediateparent.height-2"
align="center" valign="middle">
<method event="ontext">
var newText = this.getText();
parent.parent.setAttribute('text', newText );
</method>
Hello
</inputtext>
</view>
</class>

<myTextField name="myButton" />
</canvas>


Take care,

Antun

[roundpeg]

I was hopping their were attributes that could be defined but it looks like from the code you have to layer colors on top of each other inorder to get the look you are looking for. What about the debugger. It has a great interface with I would think graphical assets. Was that built in Laszlo and if so how was that constructed.

Aaron

[antun]

Hey Aaron

The class I wrote was a really really quick example. Of course the debugger was built in Laszlo! In fact you can see the source for it at:-

WEB-INF\lps\components\debugger

All of the art assets for it are in a subfolder called images. For the debugger we used SWFs, because much of it needed to be stretched, and SWFs are better at resizing. If you wanted a custom look for art assets, you'd have to create the art assets yourself. To make a flexible text field, you'd want to follow the Window tutorial (http://www.laszlosystems.com/developers/learn/documentation/tutorials/window.php) to create the borders of your textfield.

The attributes you mentioned can be done too. Using my example above, you could just overwrite the bgcolor attribute when you instantiate the class:-


<myTextField name="myButton" bgcolor="red" />

You can do that because bgcolor is a view attribute (by default class extends view). If you wanted to be able to specify the interior color attribute, you'd define a custom attribute for the class:-

<attribute name="intColor" type="number" value="0xffffff" />

And set the background color of the interior view to that when it inits (I get a compiler error, but that can be ignored).


<inputtext name="myText"
width="immediateparent.width-2"
height="immediateparent.height-2"
align="center" valign="middle">
<method event="ontext">
var newText = this.getText();
parent.parent.setAttribute('text', newText );
</method>
Hello
</inputtext>


-Antun