SWF9 support may not sound like a huge deal to many people - it’s just a matter of keeping up-to date with the newer version of Flash, isn’t it? Well, not exactly. The difference between SWF8 bytecode and SWF9 bytecode was significant. So big, in fact, that Adobe included two completely separate runtimes in Flash Player 9: one for running the new SWF9 bytecode, and a separate one for running SWF8-and-below bytecode. In other words, the SWF9 capability is a pretty big deal.

Just how much of a performance gain does the new runtime offer? A few months ago, while writing a post about optimizing data for Lzx (OpenLaszlo Performance Tip: Attributes, not Nodes), I found that the then-beta SWF9 runtime in OpenLaszlo was as much as 3.7 times faster than the SWF8 one, at loading and parsing XML data. At the time, much of the functionality was still missing from the 4.2 branch, so data loading was the only behavior I could test.

With 4.2 available, I wrote a simple test that measured how long it took to instantiate 100 windows:

<canvas>

    <text id="output" fontsize="36" />

    <class name="mywindow" extends="window" width="300" height="200">
    </class>

    <handler name="oninit"><![CDATA[
        var dStart = new Date();
        var j:Number = 0;
        var xpos:Number;
        var ypos:Number;

        for (j=0; j<100; j++) {
            xpos = Math.max(150, Math.random() * canvas.width);
            ypos = Math.max(50, Math.random() * canvas.height);
            new lz.mywindow(canvas, {x: xpos, y: ypos});
        }
        var dEnd = new Date();
        var timeTaken = dEnd.getTime() - dStart.getTime();
        output.setAttribute("text", timeTaken);
        ]]>
    </handler>

</canvas>

The results for creating 100 windows in OpenLaszlo 4.2.0 are:

• SWF8: 6,042ms
• SWF9: 1,073ms

That’s 5.6 times faster - even more dramatic than the results from the data loading test!

Surely all OpenLaszlo developers will now rush to recompile their applications to SWF9; all it takes is appending ?lzt=swf9 to the request, doesn’t it? Unfortunately, it’s not that simple. Moving from OpenLaszlo 4.0 to 4.1 involved a lot of language changes, specifically in anticipation of SWF9. I wrote about this a while back. Then, moving from OpenLaszlo 4.1 to 4.2, there were a few more changes, mainly because icompatibilities were found after 4.1 had been released, and in-depth development had started on supporting the new runtime. As an example, the <script> tag shouldn’t be used in SWF9. It actually partly works, but causes confusing errors. Better replace it with <handler name=”oninit”>.

Happily there are some resources and tools for developers needing to migrate their applications. There’s an OpenLaszlo wiki page on Runtime Differences, which should be your first stop. It describes how to use the Perl migration script that (in theory) updates your code for you. Remember that it may not catch everything. It’s hard to anticipate every manner in which developers will use a platform, so please be patient and provide any feedback on issues you hit on the forums or mailing lists.

New Google Maps Interface

The entire Street View feature is now a Flash-based application, that takes over the map screen. Previously, the street panorama would be displayed in a Google Maps info window, and was implemented in DHTML.

The satellite imagery has also been replaced with higher-resolution pictures from the GeoEye Satellite, which was launched a couple of months ago. At least that’s the case in my neigborhood, and a couple of other spots I searched in California.

Even the Street View images have been updated - again, at least in my neigborhood.

Although the new zoom/pan control does not appear to be available to developers using the Google Maps API, the new satellite images are present by default. Hopefully this means that we’ll finally have a globally-consistent maximum zoom level!

When instantiating a class from script, you can specify a dictionary of initial properties as the second argument to the constructor:

var v = new lz.view(canvas, {width: 300, height: 300, bgcolor: 0xff0000}); // 4.1

Prior to OpenLaszlo 4.1, the constructor shown above would have been LzView() instead of lz.view(). Also, prior to 4.1, you could have specified the id attribute in addition to the width, height, and bgcolor attributes, and then referenced your newly-created view by that id later in the application. e.g.

var v = new LzView(canvas, {id: "myNewView", width: 300, height: 300, bgcolor: 0xff0000}); // 4.0.12

Since the SWF9 does not allow global variables to be created on-the-fly, OpenLaszlo 4.1 will no longer allow you to do this either. For better or for worse.

It works just like a typical Unix (say bash) shell:

1. Recompile your application with the debugger. e.g. browse to the Hello, World! example with ?debug=true.
2. Click on the Debugger text input field, and begin typing. e.g. can
3. Hit tab. The Debugger should complete the word “canvas”.
4. Now add a dot, and hit tab once. e.g. canvas.
5. If there are too many possible matches, you’ll see output like the following in the Debugger:
   INFO: 456 possibilities: press ‘\t’ again to see them all
6. Hit tab again, and you should see a long list of possible properties on canvas:
   INFO: Possible completions: $cfn $isstate $lzc$bind_id $lzc$bind_name …
7. Now add “sub” to the text input field. It should read canvas.sub
8. Hit tab. You should see two possible matches for canvas.sub:
   Possible completions: subnodes subviews
9. Add a “v”, so your text input field now says canvas.subv
10. Hit tab. The debugger should complete that to canvas.subviews, since its the only possible match. Now hit the enter key, and the Debugger will inspect canvas.subviews.

Enjoy!

[kml_flashembed movie="/blog/wp-content/uploads/2008/11/openlaszlo_google_maps.swf" height="530" width="468" /]

I wanted an example that:

• Embedded Google maps in a clean, developer-friendly way.
• Was full-featured (allowed a user to search for an address, and add a marker there).
• Passed information (such as where to add a marker) from the OpenLaszlo application to the map component.
• Passed information (such as the address of the marker that a user clicked) from the map to an object in the OpenLaszlo namespace.

Note that the Google Maps geocoding service is Flash-specific. Even though it passes XML back to the client, you need to use Google’s Flash-based APIs to call it. I didn’t want to do this; I wanted my example to perform the search in OpenLaszlo, and pass instructions to the map component. So I used Yahoo Maps’ excellent geocoding service.

Here are the instructions on how to do this:

1. Download OpenLaszlo 4.2b3 or later, and install.
2. Get a Google Maps API key (free).
3. Download the Google Maps API for Flash SDK, from Google’s web site. I used version 1.7.
4. Find the WEB-INF directory in your OpenLaszlo install, and create a directory called flexlib inside that. i.e. WEB-INF/flexlib/
5. Unzip the Google Maps SDK, and locate the two SWC files in the lib directory. Take the Flash one (mine was called map_1_7a.swc) and copy it into WEB-INF/flexlib/.
6. In your OpenLaszlo my-apps folder, create your lzx file (e.g. main.lzx), and write your application.
7. When you compile the app via the browser, make sure that you remember to compile to SWF9. When you request the LZX file, append ?lzr=swf9 to the request. (e.g. main.lzx?lzr=swf9).

Here’s my complete source:

<canvas proxied="false" width="468" height="530">

    <!-- antunkarlovac.com key -->
    <attribute name="gmapsKey"
               value="ABQIAAAAN0JyO4tW04-1OKNW7bg9gxSPySWqAfkZkuZG2U8jr6yyIuV3XBSrEn410_O9d9QPJh3dbWV85Qad8w" type="string" />

    <alert name="errorDialog" width="400" />

    <method name="handleMarkerClick" args="address">
        addressWin.writeAddress(address);
    </method>

    <script when="immediate"><![CDATA[
        class FlashMapOL {
            #passthrough (toplevel: true) {
                import com.google.maps.*;
                import com.google.maps.controls.*;
                import com.google.maps.overlays.*;

                import flash.geom.*;
            }#

            var map:Map;

            function createMap() {
                map = new Map();
                map.addEventListener(MapEvent.MAP_READY, onMapReady);
                map.key = canvas.gmapsKey;
                map.setSize(new Point(450, 300));
                return map;
            }

            function onMapReady(event:MapEvent):void {
                map.addControl(new ZoomControl());
                map.addControl(new PositionControl());
                map.addControl(new MapTypeControl());
            }

            function addMarker(lat:Number, lon:Number, address:String):void {
                map.clearOverlays();
                var latLon:LatLng = new LatLng(lat, lon);
                var marker:Marker = new Marker(latLon);
                marker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void {
                    canvas.handleMarkerClick(address);
                    map.openInfoWindow(latLon, new InfoWindowOptions({titleHTML: "<b>Search Result</b>", contentHTML: address}));
                });
                map.addOverlay(marker);
            }

            function centerAndZoom(lat:Number, lon:Number):void {
                var latLon:LatLng = new LatLng(lat, lon);
                this.map.setCenter(latLon, 14, MapType.NORMAL_MAP_TYPE);
            }

        }

        lz.mapFactory = new FlashMapOL();

        lz.map = lz.mapFactory.createMap();
    ]]>
    </script>

    <dataset name="geoCode_ds"
             src="http://local.yahooapis.com/MapsService/V1/geocode?" type="http" request="false"/>

    <datapointer name="result_dp"
                 xpath="geoCode_ds:/ResultSet/Result[1]" />

    <handler name="ondata" reference="geoCode_ds"><![CDATA[
        var lat;
        var lon;
        var root_dp = geoCode_ds.getPointer();
        root_dp.selectChild();
        if (root_dp.getNodeName() != "Error") {
            lat = result_dp.xpathQuery("Latitude/text()") * 1;
            lon = result_dp.xpathQuery("Longitude/text()") * 1;
            var warn = result_dp.getNodeAttribute("warning");
            if (warn != undefined) {
                // Pass along any warnings (e.g. couldn't find address,
                // centering on city.
                errorDialog.setAttribute("text", warn);
                errorDialog.open();
            }
            // Get full address as a string
            var address = result_dp.xpathQuery("Address/text()")
                        + ",<br />" + result_dp.xpathQuery("City/text()")
                        + ", " + result_dp.xpathQuery("State/text()")
                        + " " + result_dp.xpathQuery("Zip/text()")
                        + "<br />" + result_dp.xpathQuery("Country/text()");
            lz.mapFactory.centerAndZoom(lat,lon);
            lz.mapFactory.addMarker(lat, lon, address);
        } else {
            // Failed to find address
            var msg = root_dp.xpathQuery("Message/text()");
            errorDialog.setAttribute("text", msg);
            errorDialog.open();
        }
    ]]>
    </handler>

    <window name="mapWin" title="Map" width="468" height="369"
            allowdrag="false">
        <passthrough>
            import flash.display.*;
        </passthrough>
        <handler name="oninit">
            var sprite:Sprite = this.content.sprite;
            sprite.addChildAt(lz.map, sprite.numChildren);
        </handler>

        <view name="buttons" bgcolor="0xeaeaea" width="100%"
              valign="bottom">
            <simplelayout axis="x" spacing="10" />
            <text valign="middle">Address Search:</text>
            <edittext name="addressInput" width="260"
                      text="1221 Mariposa Street, San Francisco, CA" />
            <button>Search
                <handler name="onclick"><![CDATA[
                    var qs = "appid=YD-9G7bey8_JXxQP6rxl.fBFGgCdNjoDMACQA--"
                           + "&amp;amp;location=" + parent.addressInput.text
                    geoCode_ds.setQueryString(qs);
                    geoCode_ds.doRequest();
                ]]>
                </handler>
            </button>
        </view>

    </window>

    <window name="addressWin" title="Address" width="468" height="150"
            y="379" allowdrag="false">
        <method name="writeAddress" args="address">
            this.txt.setAttribute("text", address);
        </method>

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

        <text width="100%" multiline="true" fontstyle="italic">
            Click the search button to search for an address. When you click
            one of the markers, the full address will be displayed in the
            OpenLaszlo text field below:
        </text>

        <!-- Address display area -->
        <text name="txt" width="100%" multiline="true" fontsize="14">
        </text>
    </window>

</canvas>

Note a few important points in the code:

• There’s AS3 code directly inside the script block in the canvas. You need to use the when=”immediate” option in the script tag for this.
• There’s an OpenLaszlo compiler instruction that allows you to include libraries from the WEB-INF/flexlib/ directory:
  #passthrough (toplevel: true) {
  …
  }#
• There’s another OpenLaszlo compiler instruction in the view where you want to instantiate the map (there’s a new passthrough tag, and the map must be added procedurally - sprite.addChildAt().

Here’s the complete source to my app, as a zip.

Rmenuz Screenshot

I’m not sure what the status is of the site; it may still be under development. There’s a problem with its security certificate and I found a number of glitches with the application. You can try it at:

https://my.rmenuz.com/default.aspx

It can be hard to get to the map, since it’s only displayed if your search returns valid search results. To see the map, follow these steps:

1. Click on the “Search by: CUISINE” window.
2. Check “American Restaurants”.
3. Select “Distance” 2.
4. Enter the zip: 94107.
5. Click go.

CSS works in OpenLaszlo 4.1.1 and 4.0.13. I haven’t tried it in the 4.2 branch.

You can use CSS to control colors, resources, text labels, coordinates and dimensions. Since the standard OpenLaszlo components don’t support any CSS properties yet, here’s how to define your own. This post is supposed to be a quick introduction to CSS in OpenLaszlo; I’ll post some more specific posts over the coming days.

When you define your class, specify its default styles in a stylesheet tag, and use the new style binding to constrain individual view properties to CSS properties:

styleablebox.lzx

<library>

    <stylesheet>
        styleablebox {
            borderColor: #0000ff;
            backgroundColor: #00ffff;
            buttonText: "Move the box!";
            buttonX: 30;
            buttonY: 30;
        }
    </stylesheet>

    <class name="styleablebox" width="200" height="100">
        <view name="bg" width="100%" height="100%"
              bgcolor="$style{'borderColor'}">
            <view name="inner" width="90%" height="80%"
                  align="center" valign="middle"
                  bgcolor="$style{'backgroundColor'}">
                <text fontsize="24">Stylable Box</text>
                <button text="$style{'buttonText'}"
                        x="$style{'buttonX'}" y="$style{'buttonY'}">
                    <handler name="onclick">
                        classroot.animate("x", 25, 500, true);
                    </handler>
                </button>
            </view>
        </view>
    </class>

</library>

The default styles will apply to that class when you instantiate it, unless you override them later. To override them, simply define a new stylesheet tag later in the code:

test-styleablebox.lzx

<canvas proxied="false">
    <include href="styleablebox.lzx" />

    <stylesheet>
        styleablebox {
            borderColor: #ff0000;
            backgroundColor: #ffff00;
            buttonText: "Slide away!";
            buttonX: 80;
            buttonY: 50;
        }
    </stylesheet>

    <styleablebox />

</canvas>

There are a variety of supported CSS selectors that will allow you to specify which objects particular styles apply to; I’ll discuss those in a future post.

I apologize to my readers for this intrusion.

Since one doesn’t talk about politics in polite company, I’ve decided to remove all ads from my blog until after tomorrow - election day - when no doubt Google will revert to serving discreet text ads packed with warm acronyms.

One of the drives started failing last week, so happy though I was to have a handy backup, I was a bit daunted about the prospect of restoring a broken RAID array. You see, there’s plenty of tutorials on how to set up software RAID, but not that many resources on what to do after a drive breaks. It actually turned out to be really easy, thanks in large part to my friends Yossie’s and Eric’s guidance, so I decided to document the process here.

Determining if Your RAID Array is Broken

This part is really easy. Log in as root, and run:

cat /proc/mdstat

You should see something like this if there is a problem:

Personalities : [raid1]
md1 : active raid1 hda2[0]
1927680 blocks [2/1] [U_]

md0 : active raid1 hda1[0]
310640768 blocks [2/1] [U_]

unused devices: <none>

Note the underscore in the [U_]. A healthy RAID array will not have the underscore. Instead, it would say [UU]. Also note that hda is active (it’s listed in the md0/md1 lines), but hdb is conspicuously absent. So hdb is in trouble.

Finding the Broken Drive

If you know which drive hdb is, then remove it, but it’s probably best to run a test to be sure it actually has errors. For this, I found a very versatile free tool called Ultimate Boot CD. You download the ISO and burn it onto a CD. You can use the CD to boot your PC. It’s packed with diagnostic tools, such as hard disk testers, memory testers, etc. Run the appropriate one for your brand of hard disk, on each disk in the array. The Seagate tester I used lists the hard disks serial numbers, so there’s no confusion once you open the case to remove the bad drive.

Ensure You Can Boot From the Good Drive

Depending on which drive is bad, and how you originally configured them, you may not be able to boot properly from the good drive. Best to test that you can. Remove the bad drive, and try to boot. You may need to modify jumper settings and/or move the good drive to the master plug on the IDE cable. If you can boot, great. If not, the Grub loader may be missing from the the good drive. To reinstall it, put the drives back where they were so that you can boot, log in as root, and run:

grub-install /dev/hda

(Assuming you need to install it on hda).

Retest that you can now boot off the remaining drive with the bad one removed.

Replace the Broken Drive

Obtain a matching drive, and install it in the case.

I only discovered (happily) after this happened that Seagate drives come with a 5-year warranty. If a drive goes bad, you can check if it’s covered using Seagate’s Warranty Checker. You don’t even need your original receipt to process the return, just the serial and model numbers. The whole process couldn’t be easier. I opted for their $20 premium service, where they send you a refurbished drive that matches yours immediately, via 2-day air shipping. The replacement drive comes with a box and a prepaid label to return the broken one to Seagate. The return shipping alone would have cost me $10, so that service seems like a bargain.

Rebuild the RAID Array

This is the bit I was daunted by, but it really turned out to be fairly simple. After the new drive is installed, boot up and log in as root.

Verify which drive is now part of the array. Run:

cat /proc/mdstat

You should see something like:

md1 : active raid1 hda2[1]
1927680 blocks [2/1] [_U]

md0 : active raid1 hda1[1]
310640768 blocks [2/1] [_U]

In this case, hda is the working drive.

Look at the current partition table of the working drive (hda in my case). Run:

fdisk /dev/hda
p (for print)
q (to exit)

Output should be something like:

Disk /dev/hda: 320.0 GB, 320072933376 bytes
255 heads, 63 sectors/track, 38913 cylinders
Units = cylinders of 16065 * 512 = 8225280 bytes

Device Boot      Start         End      Blocks   Id  System
/dev/hda1   *           1       38673   310640841   fd  Linux raid autodetect
/dev/hda2           38674       38913     1927800   fd  Linux raid autodetect

Now configure the partitions of the new drive (hdb) to match the working one (hda). Run:

fdisk /dev/hda

1. Enter n (for new partition).
2. Enter p (for primary partition).
3. Make it the first partition (i.e. 1).
4. Start at cylinder 1 (the default).
5. Use the End value for the last cylinder of partition 1 on hda (i.e. 38673).
6. Change the new partition’s type to match the Id value of your first
   partition (i.e. “fd”). This is important for the RAID controller to understand that this is part of the RAID array.
   Enter t (for “change a partition’s system id”).
   Enter fd.
7. That would have configured the first partition hdb1. Repeat steps 1-6 for all the partitions on hda. In my case, there was only one additional one. Remember to use the copy Start and End blocks.
8. when you’re finished, enter w (for “write table to disk and exit”).

Now you’re ready to hot-add the new drive to your RAID array. You’ll need to run mdadm for each partition you need to restore (two in my case). Use the output of /proc/mdstat as a guide. e.g.

md1 : active raid1 hda2[1]
1927680 blocks [2/1] [_U]

md0 : active raid1 hda1[1]
310640768 blocks [2/1] [_U]

Here md1 currently maps to hda2 only. We need to add hdb2 to md1. md0 currently maps to hda1 only. We need to add hdb1 to md0. So in this case, you would run the following commands:

mdadm /dev/md0 -a /dev/hdb1
mdadm /dev/md1 -a /dev/hdb2

That’s it! The RAID array should be doing its magic.

Verify That It’s Updating

Examine the output from /proc/mdstat now, and you should see something like:

Personalities : [raid1]
md1 : active raid1 hdb2[2] hda2[1]
1927680 blocks [2/1] [_U]
resync=DELAYED

md0 : active raid1 hdb1[2] hda1[1]
310640768 blocks [2/1] [_U]
[>....................]  recovery =  1.0% (3196864/310640768) finish=158.8min speed=32257K/sec

unused devices: <none>

Since it’ll take several hours, you can log out of the shell, and let it synchronize the two disks.

Install the Grub Loader on Your New Drive

Since you just added hdb, you should install the Grub loader, in case hda ever fails or is removed. Run:

grub-install /dev/hdb

… and you should be good to go.

I’m assuming that at this point, you have the source code, and a compiled SWF (possibly from the live deployment server). If you don’t have the application as a compiled SWF, then this approach won’t work.

First, download and extract Flasm. Flasm is an open-source SWF disassembler. It won’t translate a SWF into LZX code, but it will convert it into readable bytecode, and that is all you really need to find the OpenLaszlo canvas attributes. You run Flasm from the command line.

Second, download the compiled application SWF (the one whose OpenLaszlo version you want to determine) onto your development machine. If its on a production server, you can use a *NIX command-line tool like wget or curl. If you’re on Windows, install Cygwin, and you’ll have all the *NIX goodies you need. (The Windows Flasm executable works well in a Cygwin shell). e.g.

wget http://www.antunkarlovac.com/blog/wp-content/uploads/2008/09/selectionmanager.swf

That should download the SWF to your current directory.

Finally, run Flasm, with the disassemble argument, and search for the term lpsversion. Either save the output to a file, or pipe it through grep. There’s a bunch of output, but I find the last line of output tends to be the relevant one:

…
push ‘canvas’, ‘__LZproxied’, ‘true’, ‘bgcolor’, 16777215, ‘embedfonts’, TRUE, ‘fontname’, ‘Verdana,Vera,sans-serif’, ‘fontsize’, 11, ‘fontstyle’, ‘plain’, ‘height’, 260, ‘lpsbuild‘, ‘10323-openlaszlo-branches-4.1‘, ‘lpsbuilddate’, ‘2008-07-11T15:05:43-0700′, ‘lpsrelease’, ‘Production’, ‘lpsversion‘, ‘4.1.1‘, ‘proxied’, FALSE, ‘runtime‘, ‘swf8‘, ‘width’, 300, 14

Note the relevant terms I’ve highlighted in bold:

• lpsbuild: The exact build number of OpenLaszlo that was used to compile this SWF.
• lpsversion: The version number that was used to compile this SWF.
• runtime: The version of SWF that this was compiled to.

There you have it. It’s also a good tip to put a comment in your main application file, to tell other developers (and yourself, six months from now) what version of OpenLaszlo you were using.