mip’s blog

Ok, after introducing my OL Filebrowser class, here is part 2 to answer most of the possible questions about using this class:

Attributes

Despite the general attributes applible to an object of the OL window class the following attributes have been implemented:

• DirPath: The starting directory on the server – aka the root you like to show
• SrcPath: The URL to call for getting the directory listing
• callAttributes: If you require additional parameters added over the script providing the directory listing, define an object with attribute-value pairs like here:
  callAttributes="${{menuname:'read_mediadir'}}"
• autoclose: if a file is selected the window closes automatically. If this behaviour is not wishful, turn it of by setting it to false; Default: true.
• value: if a file was selected, this attribute contains the filename

Methods

These are just the major methods you’re going to use during normal usage:

• open: Opens the window and loads the current directory again. So selection is resetted
• takeSelection: Parameters: [func:Function], [target:Object]
  The closing function of the class. Sets the value of the Object to the selected document (if any) otherwise null. If [func] and [target] is set, the function [func] is called as a method of [target] and with the path of the selected document as parameter.
  If autoclose is true, the window is closed.
• getCurrentDir: returns the full current directory path starting with the directory specified in DirPath

XML input

The object uses the standard HTTP request of its “fileListSet” dataset. A parameter “dir” is set to the path of the directory to read and the callAttributes are added if there are any.

The Response of the serverside script then should look like this:
<list>
<file type="DS_Store" size="12292" date="2008-04-08 08:44:12">
<name><![CDATA[.DS_Store]]></name>
<full><![CDATA[/Users/myuser/path/to/file.jpg]]></full>
</file>
<file type="directory" size="476" date="2007-10-02 22:15:43">
<name><![CDATA[classes]]></name>
<full><![CDATA[/Users/myuser/path/to/dir]]></full>
</file>
</list>
The structure is quite straight forward. The filesize is in bytes and is converted into KB or MB by the object. The type attribute can have any value. Only “directory” is important to identify directories.

Ok, my last post was about 12 Month ago. Ay, hard times since then, but i’ve developed my openlaszlo skills and today i’m proud to introduce my first really useful openlaszlo class.

For a project i needed a decent file browser, showing the files on the webserver and letting the user to select a file. So, if you need something like that (see pictures below), go ahead and grab a copy of the filebrowser openlaszlo class files.

How to use:
1. Copy the filebrowser.class.lzx file and the filebrowser_buttons directory to your openlaszlo application directory

2. Include the class-file like every library:
<include href="filebrowser.class.lzx"/>
3. and put an instance on your canvas like here:
<filebrowserclass name="fileBrowser" x="20" y="20" width="600" height="400" DirPath="files/" SrcPath="http://localhost/path/to/xml/provider.php" callAttributes="${{menuname:'read_mediadir'}}">
<button text="Cancel" onclick="parent.close()"/>
<button text="Select" onclick="parent.takeSelected(Debug.write,Debug)"/>
</filebrowserclass>


Yep, that’s it.

Ok, i know you’ll still have more questions, so i’ll post a short FAQ on the next post.

Ok, maybe i’m not the brightest person around, but some things were not clear for me and i couldn’t find it in the lzx manual. So I decided to write this additional faq, and maybe it helps somebody.

To evaluate the value for you, i just provide a short info about my programming background to compare: I got excellent skills in flash, actionscript and php, i’m a decent html and css editor, know lots about C, C++ and Objective C and i’m quite familiar with Java.

Now, let’s get it on!

#1 How do I address Objects below the hierachy line?
Yeah, i struggled with this a bit, ’cause most examples address objects in the parent.
Just use the subNodes array which every object inheriting the LzNode class has.

#2 I’m setting an Object Attribute, but nothing happens. What’s wrong?
There is i.e. the visible attribute and if you set it (like you are used to from flash or java) nothing happens. This is quite wired at first glance and it has to do something with a missing screen update. Because if you check the attribute after setting it via the debug window, everything seems fine, but it doesn’t look like it! Best and only solution is looking for a setter function (i.e. setVisible()) or using the more general setAttribute function. Read more on attributes and getting/setting them here.

# 3. formatted text displaying weird
Ok, maybe you’ve something like this in your source:
<text><font size="16">some text...</font></text>
and the whole thing is cut horizontally, then maybe you should try replacing it by this:
<text fontsize="16">some text...</text>
This may work better because the compiler does the correct text size calculation in the second case. In the first the size of the textnode is calculated on basis of the surrounding font definitions.

# 4. Richtexteditor or how to get text selection
For a client project i needed a richtexteditor and thought, cool, there is a component called "richinputtext", so let’s use that. You can set the textformat of all or parts of the text with a LzTextFormat object and its setTextFormat method. But for that you need to have the selection coordinates (starting index,length).

I first tried to use the onfocus and onblur events to get the selection attributes, but no success, because the selection gets lost before the onblur event fires and onblur only gets called when not using the mouse.
Secondly I tried using a mouseevent on the object for detecting mouseactions and storing the selection, but then you can’t select any text in the inputfield.
Finally, after wasting couple of hours this is my solution:

<richinputtext name="content" width="300" height="150">
<attribute name="sel_start" value="-1" type="number"/>
<attribute name="sel_length" value="-1" type="number"/>
<handler name="onblur">
this.sel_start = -1;
this.sel_length = -1;
</handler>
<method name="checkSelection">
if (this.getSelectionPosition() != -1) { this.sel_start = this.getSelectionPosition(); }
if (this.getSelectionSize() != -1) { this.sel_length = this.getSelectionSize(); }
</method>
<button text="bold" onmouseover="content.checkSelection()" onclick="content.setFormat('bold')"/>

Usually you have buttons or some other input objects to set the format of the text or process on. You will have to use the onmouseover of these objects to call a function storing the selection data. The onmouseover of the formatting button is preceeding the onblur of the inputfield and onclick (obviously) of the button. Since the user has to do these movements this is the simplest solution, i guess.

# 5. Selections and clearSelection madness
In my project i’ve a list with listitems that are extentions of the normal baselistitem class.
My listitem uses the onselected event to open a subpage and animate that page.
I can go back to another page and clean up i disselect the listitem and revert the animation.
I used the clearSelection function on the list object. When clearSelection is called the onselected event is fired allthough this is not what mankind usually expects. To have a workaround use the getSelection function of the parenting object and check whether it is an object or null. Try the code and see:


<canvas debug="true" layout="axis:y">
<class name="mylistitem" extends="listitem">
<text text="sometext" width="100"/>
<handler name="onselected" args="what">
Debug.write(what);
Debug.write(this.parent.getSelection());
</handler>
</class>
<list name="newslist">
<mylistitem/>
<mylistitem/>
<mylistitem/>
<mylistitem/>
</list>
<button onclick="newslist.clearSelection()" text="clear"/>
</canvas>


Back after a long time off, i want to introduce a new toy i’m playing around with this first day.

Openlaszlo from openlaszlo.org is a development kit for rich internet applications and as with the current release dependent on (at least) Adobe Flash 6, but the first Beta also working with DHTML is in development. It’s opensource and free for download. See the 10-minutes tour for a quick intro.

I’d loved to know were this project got it’s name from. Laszlo is an old hungarian name, and one of the best friends of my father was called Laszlo. His nickname as the usual shorting is “Laca” and is one of the funny names a hungarian can have. So, hopefully the usage gonna be fun aswell.

Yes, I’m really excited about the ease and beauty of this tool. And in the next days I will try to realize a project for a customer with openlaszlo. I will cover my progress in the first posts of this category and tell you about the difficulties and happiness i expierenced during the days.

So tune in later and read more about the amazing laszlo…