Editing long <edittext> and scrolling

[hutch]

I want a user to be able to enter text that is arbitrarily long. The <textedit> component lets me do this but it seems to support scrolling through the text only by moving the text cursor through the text.

Attaching the scroll bar to the <textedit> is easy enough, but only if I do this kind of thing...

<view width='500' height='200' clip='true'>
<edittext width='500' height='1000' multiline='true'/>
<scrollbar />
</view>

This only scrolls the 1000 pixel 'view' of the text being edited -- so if the text entered requires more than 1000 pixels we're back to the text cursor navigation to get further, and worse still, the text cursor navigation won't scroll the view. This is absolutely no surprise given that the above code is scrolling a view that contains the editor, not the editor itself.

This...

<edittext width='500' height='200' multiline='true'>
<scrollbar/>
<edittext>

does not work (probably because the scrollbar is attached to the wrong thing).

Does anyone know how to do this? What is the name of the view in the edittext? maybe that can be scrolled by setting the scrolltarget properly?

Thanks,
Bob

[antun]

Hi Bob

See this thread:

http://www.laszlosystems.com/developers/community/forums/showthread.php?s=&threadid=634&highlight=inputtext

What you should be able to do is not specify a height to the edittext (or inputtext) field, but set a width and its multiline attribute to true, so that it resizes its height automatically.

However, there's a bug that's preventing that from working properly.

-Antun

[hutch]

Well, I guess that explains why that didn't work for me.

Any chance of getting that fixed?

Cheers,
Bob

[antun]

Hi there

This came up again recently, and one of our engineers wrote an edittext component that does scroll (attached).

-Antun

[ericb]

For anyone wondering, this doesn't work under LPS2.

[ericb]

Is there a workaround for this in LPS2? How can I make a multi-line edittext with vertical scrollbar?

[gbevin]

I'm quite new to Laszlo, but I took that code paste and adapted it a bit to come up with this:
<view width="360" height="78">
<view name="_outerbezel" resource="lzedittext_bezel_outer_rsc" width="${parent.width-1}" height="${parent.height-1}" stretches="both"/>
<view name="_innerbezel" resource="lzedittext_bezel_inner_rsc" x="1" y="1" width="${parent.width-3}" height="${parent.height-3}" stretches="both"/>
<view name="_face" x="2" y="2" width="${parent.width-4}" height="${parent.height-4}"/>
<view x="3" y="4" width="${parent.width - 6}" height="${parent.height - 6}" clip="true">
<scrollinputfield width="${parent.width - 20}" height="${parent.height}" multiline="true"
id="listdescription_field_edit" name="description" datapath="description/text()">
<method name="refresh">
var text = this.datapath.xpathQuery(this.datapath.xpath);
if (!text) text = "";
this.setText(text);
</method>
</scrollinputfield>
<scrollbar name="sb" axis="y" scrollattr="pos"/>
</view>
</view>


<class name="scrollinputfield" extends="inputtext">
<attribute name="maxscroll" value="0"/>
<attribute name="scroll" value="0"/>
<attribute name="idleDel" value="$once{ new LzDelegate(this, 'update') }"/>
<attribute name="pos" value="0" setter="setPos(pos, false);"/>
<attribute name="maxheight" value="${this.height + this.lineheight * (this.maxscroll - 1)}"/>

<method name="setPos" args="p, skip">
if (!this.getAttribute('__LZmovieClipRef')) return;
if (! skip) {
this.__LZmovieClipRef.text.scroll = 1 - (p / this.lineheight);
}
this.pos = p;
if (!this['onpos']) return;
this.onpos.sendEvent(p);
</method>

<method name="update">
if (!this.getAttribute('__LZmovieClipRef') ||
!this.scroll ||
!this.maxscroll) return;
if (this.scroll != this.__LZmovieClipRef.text.scroll) {
this.setAttribute('scroll', this.__LZmovieClipRef.text.scroll);
this.setPos(-this.lineheight * (this.scroll - 1), true);
}
if (this.maxscroll != this.__LZmovieClipRef.text.maxscroll) this.setAttribute('maxscroll', this.__LZmovieClipRef.text.maxscroll);
</method>

<method event="onfocus">
this.idleDel.register(LzIdle, 'onidle');
</method>

<method event="onmaxheight">
if (!parent.sb.scrolltarget) return;
parent.sb.setAttribute('scrollmax', this.maxheight);
</method>

<method event="onblur">
this.idleDel.unregisterAll();
</method>

<method name="setText" args="t">
super.setText(t);
this.update();
</method>
</class>

I know I could put all this in one class, but I had problems updating the text field's contents dynamically. Maybe I'll try to figure it out sometime, but have no time for that atm. Note that this doesn't correctly work if the editor is supposed to support disabled/enabled status.

[ericb]

Maybe you can encapsulate your outer view in a class, and pass the properties from the class instance to the inner scrollinputfield?

[gbevin]

I tried that, but had some problems with it dynamically updating ... can't remember what though.

[ericb]

Fair enough, then, what you can do, is define another class to encapsulate the bezel and use the defaultplacement attribute. Then you can do something like,
<bezel>
<scrollinputfield ... ><method ...>..</method> </scrollinputfield>
</bezel>

This would be a good idea since often I want to bezel-ify some stuff without the overhead of writing it all out.

PS. Thanks for the code, I will test and give feedback when I get a chance.

[gbevin]

I managed to put it in this class. Hope this helps.

edited: this code works

<class name="_scrollinputfield" extends="inputtext">
<attribute name="maxscroll" value="0"/>
<attribute name="scroll" value="0"/>
<attribute name="idleDel" value="$once{ new LzDelegate(this, 'update') }"/>
<attribute name="pos" value="0" setter="setPos(pos, false);"/>
<attribute name="maxheight" value="${this.height + this.lineheight * (this.maxscroll - 1)}"/>

<method name="setPos" args="p, skip">
if (!this.getAttribute('__LZmovieClipRef')) return;
if (! skip) {
this.__LZmovieClipRef.text.scroll = 1 - (p / this.lineheight);
}
this.pos = p;
if (!this['onpos']) return;
this.onpos.sendEvent(p);
</method>

<method name="update">
if (!this.getAttribute('__LZmovieClipRef')) return;
if (this.scroll != this.__LZmovieClipRef.text.scroll) {
this.setAttribute('scroll', this.__LZmovieClipRef.text.scroll);
this.setPos(-this.lineheight * (this.scroll - 1), true);
}
if (this.maxscroll != this.__LZmovieClipRef.text.maxscroll) this.setAttribute('maxscroll', this.__LZmovieClipRef.text.maxscroll);
</method>

<method event="onfocus">
this.idleDel.register(LzIdle, 'onidle');
</method>

<method event="onmaxheight">
if (!parent.sb.scrolltarget) return;
parent.sb.setAttribute('scrollmax', this.maxheight);
</method>

<method event="onblur">
this.idleDel.unregisterAll();
</method>

<method name="setText" args="t">
super.setText(t);
this.update();
</method>
</class>

<class name="scrollinputtext">
<method name="applyData" args="d">
this._inputcontainer._textentry.setText(d);
</method>
<method name="getText">
return this._inputcontainer._textentry.getText();
</method>
<method name="refresh"><![CDATA[
if (this.datapath.p &&
this.datapath.p.hasChildNodes()) {
this._inputcontainer._textentry.setText(this.datap ath.p.getFirstChild().data);
}
]]></method>
<view name="_outerbezel" resource="lzedittext_bezel_outer_rsc" width="${parent.width-1}" height="${parent.height-1}" stretches="both"/>
<view name="_innerbezel" resource="lzedittext_bezel_inner_rsc" x="1" y="1" width="${parent.width-3}" height="${parent.height-3}" stretches="both"/>
<view name="_face" x="2" y="2" width="${parent.width-4}" height="${parent.height-4}"/>
<view name="_inputcontainer" x="3" y="4" width="${parent.width - 6}" height="${parent.height - 6}" clip="true">
<_scrollinputfield name="_textentry" height="${parent.height}" width="${parent.width - 20}" multiline="true"/>
<scrollbar name="sb" axis="y" scrollattr="pos"/>
</view>
</class>
</library>

[gbevin]

edited the post above with code that works

Sorry, I cried victory too quick. It doesn't updated the scrollbar :-/
Back to it ...

[bfagan]

Has anyone gotten this to work under 3.0b2? I've had no luck.

[gbevin]

https://svn.rifers.org/blablalist/trunk/web/components/scrollinputtext.lzx

... works in 3.0b2

[bfagan]

ahhh, definitely better, but...

we do stuff like this:


<scrollinputtext name="treatment" multiline="true"
onfocus="util.valuePrep(this)"
onblur="util.valueEvaluateChange(this)"
datapath="treatment/text()" x="20" y="30" width="550"
height="300">
<method event="onconstruct">
this.datapath.setAttribute('dataControlsVisibility ','false');
</method>
</scrollinputtext>

<view id="util">
<method name="valuePrep" args="obj">
<![CDATA[
obj.setAttribute('tempValue',obj.getText());
]]>
</method>

<method name="valueEvaluateChange" args="obj, datapathobj">
<![CDATA[
if (datapathobj == null) { datapathobj = obj; }

if (obj.getAttribute('tempValue') != obj.getText()) {
datapathobj.datapath.setNodeAttribute('dirty','tru e');
canvas.setAttribute('currentTabDirty','true');
datapathobj.datapath.updateData();
}
]]>
</method>
</view>


This stuff now doesn't work with your scrollinputtext. Do I need to call the refresh method in your class?

[bfagan]

ah, I can't get scrollinputtext to respond to onfocus or onblur events. I even tried adding them as:


<method event="onblur">
...
</method>


but no go.

Any ideas?

[bfagan]

Just to let you guys know... I posted changes I made to this class in a new thread.

http://www.laszlosystems.com/developers/community/forums/showthread.php?s=&threadid=2549

[bytebodger]

Originally posted by antun
Hi there

This came up again recently, and one of our engineers wrote an edittext component that does scroll (attached).

-Antun

I am using 3.2cr2 and I am having NO luck getting this to work. When I run this file it gives me a scrolling text box but the scrollbar is dysfunctional. My debugger gives a series of errors saying:


WARNING: edittext.lzx:7: reference to undefined property 'lineheight'
WARNING: edittext.lzx:16: reference to undefined property 'text'
WARNING: edittext.lzx:16: undefined object does not have a property 'scroll'
WARNING: edittext.lzx:16: reference to undefined property 'scroll'
WARNING: edittext.lzx:17: reference to undefined property 'text'
WARNING: edittext.lzx:17: undefined object does not have a property 'scroll'
WARNING: edittext.lzx:17: reference to undefined property 'scroll'
WARNING: edittext.lzx:18: reference to undefined property 'lineheight'
WARNING: edittext.lzx:18: reference to undefined property 'scroll'
WARNING: edittext.lzx:20: reference to undefined property 'text'
WARNING: edittext.lzx:20: undefined object does not have a property 'maxscroll'
WARNING: edittext.lzx:20: reference to undefined property 'maxscroll'
WARNING: edittext.lzx:7: reference to undefined property 'maxscroll'


Any help on this one???

[mjessup]

I added a post for using the standard components to make a scrolling text. It is the thread
http://forum.openlaszlo.org/showthread.php?p=41520