Code organisation in OpenLaszlo

Finally this week it was my turn to ride the OpenLaszlo pony at work. My first priority was to figure out some ways in which large canvas definitions with deeply-nested views liberally soused with javascript code could be factored out into smaller and more manageable modules.

The first trick I tried was to extract any large chunks of javascript code (method bodies, etc.) into named functions in separate files, and import them with a <script> tag with a src attribute. Pretty soon I also had a couple of files with libraries of utility functions – things like setPropertyOnAll(elems, propertyName, value) which would take an array of components and make them all visible, or partially opaque, or whatever else you wanted. Javascript is an under-appreciated language, I often think – people tend to use it just for straight scripting, without realizing the power that its closures and prototype-based object system actually give you.

The next trick was to “flatten out” the source, extracting nested views and menus into class definitions in library files and then importing the libraries and dropping class instances into the places where the views had been. Again, some common patterns fairly quickly emerged – there were lots of buttons that caused a hint to appear elsewhere in the canvas on mouseover and made it disappear again on mouseout, and it was a simple matter to create a new class derived from basebutton with a hint attribute that had this behaviour baked-in.

So some of my initial worries about how OpenLaszlo code would scale were assuaged: it’s clear that you can build a full-scale OpenLaszlo application out of a collection of composable bits and pieces, provided you take care to use the appropriate mechanisms for modularity and code re-use.

3 Responses to “Code organisation in OpenLaszlo”

  1. Francis Irving Says:

    Help me out, I can’t read past the very corporate website. What does OpenLaszlo offer from a coding point of view?

  2. Dominic Says:

    OpenLaszlo compiles XML/Javascript source files into Flash. It’s a little like XUL, or XAML (or Glade, for that matter): you write an XML source file that defines a canvas and specifies the locations of various widgets on it, and script the behaviour of those widgets using Flash’s Javascript engine to write handlers for different user-interaction events. This is similar in some ways to the declarative approach discussed in CTM.

    If you’re not careful, however, you can end up with a huge great mush of many-times-nested XML elements mixed up with gobs of Javascript inside CDATA delimiters – ugly and hard to work with. But the language does let you export the Javascript to external script files, and define component classes in separate libraries that you can then import, so it’s not all pain. And I do quite like Javascript, although one of the things I like it for (closures) actually isn’t supported by Flash’s Javascript engine…

    The main things OpenLaszlo provides are fairly immediate access to eye-candy (it’s quite easy to knock together something that looks quite good, if you like the way that sort of thing looks), and yet another way of getting browser-based applications to refresh from remote data sources without doing a page reload. It is “cross-platform” to the extent that Flash is; future versions targeting other presentation platforms are apparently in the works.

  3. Gjorgji Taskovski Says:

    Yet another way of getting browser-based applications to refresh from remote data sources without doing a page reload.

    HOW?

    For example, I have a view with resource http://path_to_image/image.png. I want to click on the view and to get the new version of the image.

Leave a Reply