Image Gallery with OpenLaszlo - Playing around

Last Update: 07.01.2007. By azarai in gui

As mentioned earlier i played a bit with OpenLaszlo to get my image gallery running as a flash app. The Laszlo Doc and the 10 minutes tutorial are just fine to get started. I installed the 3.3.3 Version and use the IDEforLaszlo Plugin for OpenLaszlo 3.2, an Eclipse plugin. Setup was easy, just follow the instructions. After playing with the 10 minutes tutorial i jumped into coding my gallery test.

1. Created a Laszlo Project in Eclipse
2. Create App with type canvas
3. hacked in my code (see below)
4. test via LaszloServer and the inline “debugger”
5. Check in Laszlo Options (on project) that live design view is selected. Otherwise i had the prob that codechanges are not promoted to the version you test in the browser. To get latest code you need to refresh the browserpage.

The Code

<?xml version="1.0" encoding="UTF-8" ?>  
<canvas proxied="false" width="80%" height="80%">  
    <dataset name="dset" src="http://localhost/gallery/Tiere/gallery.xml" />

    <view width="200" bgcolor="silver" x="40" y="40">  
        <wrappinglayout axis="x" spacing="10" />

        <view id="liste" datapath="dset:/simpleviewerGallery/image">  
            <view name="cliparea" clip="true" width="65" height="65" >  
            <image name="thumbView" forcereload="true" stretches="both">  
                <method event="onload">  
                <![CDATA[  
                    Debug.write("width: " + this.width + " | height: " + this.height);  
                    var scale = 65/this.height;  
                    Debug.write("scale: " + scale);  
                    this.setWidth(this.resourcewidth * scale);  
                    this.setHeight(this.resourceheight * scale);  
                    Debug.write("width: " + this.width + " | height: " + this.height);  
                    this.setX(-((this.getWidth() -65)/2));  
                ]]>  
               </method>  
            </image>  
            </view>  
            <handler name="ondata">  
                <![CDATA[  
                    var img = this.datapath.xpathQuery("filename/text()");  
                    var url = "http://localhost/gallery/Tiere/thumbnails/"+ img;  
                    cliparea.thumbView.setSource(url );  
                ]]>  
            </handler>

        </view>  
    </view>  
    <handler name="oninit">  
        <![CDATA[  
            var d = canvas.datasets.dset;  
            d.doRequest();  
        ]]>  
    </handler>  
</canvas>

proxied=”false” - we use SOLO mode and no presentation server, urls must point to the server the flash is loaded from or a crossdomain.xml must exist on the server you try to access/retrieve files/services from. Flash standard.
We take 80% of the available space; didnt use 100% in the test, otherwise some part of my app wasnt visible and i had to scroll to the right.
We have a main view for the thumMenu, layouted with the wrappinglayout on x axis (all internal views in a row and linebreak when no more views fit in the row). The “liste” view with its datapath pointed to the each image in xml (xpath) and inline view for clipping a part of every image. The cliparea and the onload of the image give us a 65*65 px centered rect of our thumb image.

The ondata handler is called on every image we get through the xpath in the datapath of “liste”. We take the filename and build the image src, hardcoded basepath plus the imagename.

The oninit handler is called when the flash is loaded and we send the request for retrieving the gallery xml.

Easy, isnt it? Thats where i got curious about the size of the flash app. Its 75kB, damn huge compared to SimpleViewers 17kB.... and i am not even finshed yet. I think its too large for a shopping site, so i put it on ice for now. At least for the shopping stuff.
I had a look at the alternative named adobe flex 2 too :-) Same development style like openlaszlo, but uses ActionScript and xml. Doesnt even produce smaller files…