Question

this is a chat application in openlaszlo. i write in the inputtext area. and receive the sent text in the text area. after sometime i can not see the texts in the text field. so, i want to add a scroll bar in the text area. but i cannot make it work. any ideas? thanks in advance!!

<canvas height="100%" width="100%" bgcolor="white" allowfullscreen="true" debug="true">

<class name="chatSender">
<attribute name="_netConnection" />
<attribute name="_sharedObject" />

<handler name="oninit">
this._netConnection = new NetConnection();
this._netConnection.connect("rtmp://115.187.37.167/oflaDemo/room1");

this._sharedObject = SharedObject.getRemote("chat", this._netConnection.uri, true);
this._sharedObject.connect(this._netConnection);
Debug.write("ChatSender initiated");
</handler>

<method name="sendMessage" args="mensaje">
Debug.write("SendMessage: " + mensaje )
this._sharedObject.send("messageHandler",mensaje);
</method>
</class>

<class name="chatReceiver">
<attribute name="_netConnection" />
<attribute name="_sharedObject" />

<handler name="oninit"><![CDATA[

this._netConnection = new NetConnection();
this._netConnection.connect("rtmp://115.187.37.167/oflaDemo/room1");


this._sharedObject = SharedObject.getRemote("chat", this._netConnection.uri, true);
this._sharedObject.connect(this._netConnection);


this._sharedObject.messageHandler = function(str) {

var textoAnterior = texto.text;
Debug.write( textoAnterior + "<br/>" + str);
texto.setAttribute("text", textoAnterior + "<br/>" + str);
};
Debug.write ("chatReceiver initiated");
]]>
</handler>
</class>

<chatReceiver name="chatRec"/>
<chatSender name="chatSen"/>

<simplelayout/>
<view width="100%" height="80%" bgcolor="white" clip="true">
<text id="texto" width="100%" height="90%" multiline="true" clip="true">
</text>
</view>

<view bgcolor="blue" width="70%">
<simplelayout axis="x"/>
<inputtext bgcolor="cyan" width="100%" id="mensajeAEnviar"/>
<button width="50" onclick="canvas.chatRec._cajaChat=texto; canvas.enviarTexto(mensajeAEnviar.text);">Send</button>
</view>

<method name="enviarTexto" args="texto">
Debug.write("enviarTexto:" + mensajeAEnviar.text);
canvas.chatSen.sendMessage(mensajeAEnviar.text);
mensajeAEnviar.setAttribute("text","");
</method>

</canvas>

Answer 1

I’ve removed the Red5/chat specific code, to make it clear to you how you can use a scrollbar in OpenLaszlo. For the inputtext you want to scroll, don’t set a height. The parent view has to clip the content, and then when the inputtext grows in size larger than the parent view, the scrollbar will activate.

<canvas height="100%" width="100%" bgcolor="white" allowfullscreen="true" debug="true">

    <method name="addLineOfText" args="line"><![CDATA[
        var newText = texto.text;
        if (newText != '')
          newText += '<br/>';
        newText += line;
        texto.setAttribute("text", newText);
    ]]>
    </method>

    <simplelayout/>
    <view width="200" height="150" bgcolor="#eeffee" clip="true">
        <text id="texto" width="100%" multiline="true" clip="true">
            Here are just a few lines of text for testing...<br/>
            Here are just a few lines of text for testing...<br/>
            Here are just a few lines of text for testing...<br/>
            Here are just a few lines of text for testing...<br/>
            Here are just a few lines of text for testing...
        </text>
        <scrollbar axis="y" />
    </view>

    <view bgcolor="blue" width="300">
        <simplelayout axis="x"/>
        <inputtext id="mensajeAEnviar"
                   bgcolor="cyan"
                   width="100%" />
        <button id="but1"
                width="50"
                onclick="canvas.addLineOfText(mensajeAEnviar.text)"
                text="Send" />
    </view>
>

</canvas>

Here is a blog post with more details on scrollbars in OpenLaszlo:
http://www.antunkarlovac.com/blog/2006/11/16/using-a-scrollbar/

I’ve tested this code with OpenLaszlo 5.0 (trunk) in both SWF10 and DHTML runtime.