How to integrate textarea in openlaszlo?

Question

I am just trying to integrate textarea in dhtml environment. I am able to see the text area But i cannot type anything in the text area. Attached is a code snippet.

<canvas debug="true">
 <attribute name="htmlsnippet" type="string" value="" />

    <handler name="oninit" args="e">
    <![CDATA[
        canvas.htmlsnippet = '<textarea id="textArea" rows="8" cols="50"></textarea>';
    ]]>
    </handler>

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

    <text id="textcont" width="530" height="350" bgcolor="#cccccc" />

    <button text="modify text" onclick="textcont.sprite.setText(canvas.htmlsnippet)" />
</canvas>

Answer 1

While it's possible to generate an HTML element at runtime and add that to the display object of a view, the OpenLaszlo kernel will process all the mouse and keydown events and not pass them on to the textarea you created.

The <inputtext> component in OpenLaszlo instantiates an internal <textarea>. Compile the following OpenLaszlo DHTML app:

<canvas debug="true">

  <inputtext id="iText" multiline="true" width="100" resize="true" bgcolor="red">
    <handler name="oninit"><![CDATA[
        this.setAttribute('text', 'Just\na\ntest!');
    ]]></handler>
  </inputtext>

</canvas>

Now inspect the text object by entering this expression into the browser JavaScript console:

iText.sprite.__LZdiv.children[0]

and you will see something like:

<textarea class="lzswfinputtextmultiline" name="" style="color: rgb(0, 0, 0); width: 96px; height: 40px; pointer-events: auto;">

Depending on the browser the style values could be different.

Unfortunately OpenLaszlo doesn't offer an API to add your custom textarea to the application without handling the keydown, focus and mouse events for the textarea yourself. That's effectively what the combination of LFC/kernel classes (LzText.lzs, LzInputText.lzs, LzTextSprite.js, LzInputTextSprite.js) do: They replicate the SWF text class behavior for DHTML - since OpenLaszlo had the SWF runtime before the DHTML runtime.

That's less than optimal for HTML5, and probably one of the greatest weaknesses of the OpenLaszlo platform. Therefore it's better to no add your own <textarea> to a DHTML runtime app - unless you put that into an iFrame/separate HTML page.