Modern component set for OpenLaszlo using CSS2/3, mixins and drawing APIs / HTML5 canvas

Question

One of the advantages of OpenLaszlo is, that it is relatively easy to create custom components, especially using a combination of class hierarchies, mixins, CSS support, and the CSS2/3 features added to the latest version of OpenLaszlo.

But when I checked the source code for the latest components in OpenLaszlo 5.0 trunk, it seems that none of these features are used when rendering the components. Take the <checkbox> class, as an example:

<library>
    <include href="base/baseformitem.lzx"/>
    <include href="base/multistatebutton.lzx"/>
    <resource name="lzcheckbox_rsrc">
        <frame src="resources/checkbox/checkbox_off.swf" />
        <frame src="resources/checkbox/checkbox_off_mo.swf" />
        <frame src="resources/checkbox/checkbox_on.swf" />
        <frame src="resources/checkbox/checkbox_disable_off.swf" />
        <frame src="resources/checkbox/checkbox_on.swf" />
        <frame src="resources/checkbox/checkbox_on_mo.swf" />
        <frame src="resources/checkbox/checkbox_off.swf" />
        <frame src="resources/checkbox/checkbox_disable_on.swf" />
    </resource>

    <!-- A checkbox component representing a boolean -->
    <class name="checkbox" extends="baseformitem" pixellock="true">

        <!-- FIXME: [hqm 2006-09] LPP-2244 This used to be y="$once{classroot.text_y}"
             but the DHTML runtime fires an early text onheight  event, which has the wrong value,
             so we need to use an 'always' constraint till we fix it
        -->
        <text name="_title" x="16" y="${classroot.text_y}" text="${parent.text}" resize="true"/>

        <!--- the y position of the text label. default: centered -->
        <attribute name="text_y"
            value="${this.cb.height/2 - this._title.height/2+1}" type="number"/>

        <!--- @keywords private -->
        <attribute name="value" setter="setValue(value)" value="false"/>

        <!-- views -->
        <multistatebutton name="cb" resource="lzcheckbox_rsrc" text=""
            statenum="${parent.value ? 1 : 0}"
            statelength="4" maxstate="1"
            reference="parent">
        </multistatebutton>

The checkbox consists of a number of resources defined as SWF files (which means, there is no way to change the style of the checkbox). For the DHTML runtime, the SWF resources are converted to PNG files:

lps/components/lz/resources/checkbox/checkbox_disable_on.swf lps/components/lz/resources/checkbox/autoPng/checkbox_disable_on.png

This approach seems very outdated, and has distinct disadvantages compared to using a combination of drawing API and CSS for components:

• Skinning the existing components requires creating new resources.
• The components don't scale, unless you accept pixelizing effects. That's especially a problem with the growing number of mobile devices using inconsistent DPI values.
• Effects like drop shadows are part of the resources, cannot be activated, deactivated or modified.
• Since the original .fla files don't seem to be available, it's not even possible to modify the existing style.

Has Laszlo ever created an updated component set, or is there an open source component set available created by the community? If not, has anyone considered starting such a project?

Answer 1

mixins, css support and even HTML5 mode (formerly known as DHTML mode) of OpenLaszlo were all added to the platform long after the current components had been created. Their appearance has not changed since I started using OpenLaszlo 3.3.3 in 2006, this is probably why they are still implemented the old way. To my knowledge there is no open source component set available, most companies end up extending the base components to skin them themselves according to what people have said on the OpenLaszlo forums.

Most visual component classes have a "base" class that has the basic functionality without a skin so you can extend them to make them look how you want them to look, you can find them in the reference manual:

http://www.openlaszlo.org/lps4.9/docs/reference/

For example, <combobox> extends <basecombobox>, etc.