css - 使用 CSS2/3、mixins 和绘图 API/HTML5 canvas 的 OpenLaszlo 现代组件集

Question

OpenLaszlo的优势之一是，创建自定义组件相对容易，尤其是使用类层次结构的组合，mixins , CSS support ，以及添加到最新版本的 OpenLaszlo 的 CSS2/3 特性。

但是当我查看 OpenLaszlo 5.0 主干中最新组件的源代码时，似乎在渲染组件时没有使用这些功能。乘坐<checkbox> class ，例如:

<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>

复选框由许多定义为 SWF 文件的资源组成(这意味着无法更改复选框的样式)。对于 DHTML 运行时，SWF 资源被转换为 PNG 文件:

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

这种方法看起来非常过时，并且与组合使用绘图 API 和 CSS 的组件相比具有明显的缺点:

• 为现有组件设计外观需要创建新资源。
• 组件不会缩放，除非您接受像素化效果。随着越来越多的移动设备使用不一致的 DPI 值，这尤其成为一个问题。
• 阴影等效果是资源的一部分，无法激活、停用或修改。
• 由于原始 .fla 文件似乎不可用，因此甚至无法修改现有样式。

有Laszlo曾经创建过更新的组件集，或者是否有社区创建的开源组件集可用？如果没有，有没有人考虑过启动这样一个元素？

Answer 1

OpenLaszlo 的 mixins、css 支持甚至 HTML5 模式(以前​​称为 DHTML 模式)都在当前组件创建很久之后才添加到平台中。自从我在 2006 年开始使用 OpenLaszlo 3.3.3 以来，它们的外观并没有改变，这可能就是它们仍然以旧方式实现的原因。据我所知，没有可用的开源组件集，大多数公司最终会根据人们在 OpenLaszlo 论坛上所说的内容扩展基本组件以自行设计它们的外观。

大多数可视组件类都有一个“基”类，该类具有基本功能但没有皮肤，因此您可以扩展它们以使它们看起来像您想要的那样，您可以在引用手册中找到它们:

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

例如， extends 等