Four Js Development Tools Forum

Is it possible to set the scroll position of a text edit?

In a practical way, i have in my screen a text edit with a large amount of text, i want the screen to open with the text edit scrolled to the bottom.

Is this possible?

Have you tried fgl_dialog_setcursor(pos)?

He have indeed tried "fgl_dialog_setcursor", but we can only use this command in a "on action" block during a input in the text edit, right? And we can't use this in the "before input" for example.

I will try to give you a better explanation of the situation, i have in my screen a "edit" field called "message" and a "text edit" field called "chat". The user type the message and this is appended to the chat. When the message is appended to the chat, the chat must scroll to the bottom.

It works for us like this:

   before field l
    call fgl_dialog_setcursor(l_stad)
   before field haus
    call fgl_dialog_setcursor(haus_stad)

   after field l
    let l_stad = fgl_dialog_getcursor()
   after field haus
    let haus_stad = fgl_dialog_getcursor()

Hi Snorri

Here is our test

while true
 
   input g_message from s_message attributes(without defaults, unbuffered)
      on action send
         let g_chat = g_message , " - ", g_message 
         display g_chat to s_chat
         exit input
   end input
 
   input g_chat from s_chat attributes(without defaults, unbuffered)
      before field s_chat
         call fgl_dialog_setcursor(g_chat.getLength() -1)
         exit input
   end input
 
end while
 

So, it's supposed to work like this: user inputs the message and click "send", after sending the program append the message to the chat and exit the message input, so i can make a input in the chat window do be able to call the fgl_dialog_setcursor, exit input and go back to the message input in the while loop.

If i remove the "exit input" from the input g_chat block, it's all nice, the cursor goes to the end and the text edit scrolls! The problem is after the exit input, when i exit the input the scroll go back to the top :(

Have you tried to put this into a DIALOG block and position the cursor BEFORE DIALOG?

I guess i can't use this command in the "before dialog" cause this way Genero will not know with field's cursor it show position, but i have indeed tried to put this command in the "before input" of my above example.

I replaced the "before field s_chat" for "before input" and called "fgl_dialog_setcursor" at the before input block, the result?

 *** Running 'Scroll_grid' ***
::info:(GS-1025) GDC already running on localhost:6401
The DVM process crashed. Please contact FourJs support.
*** DVM has encountered a problem. Execution of 'Scroll_grid' stopped ***
 

But the bigger problem is that this application must work in GDC and also on GWC and i have found out that the command "fgl_dialog_setcursor" does not work in GWC (HTML5 version), the cursor simply don't move... Even if i have just an input and put the "fgl_dialog_setcursor" in the before field, witch works perfectly on GDC, in GWC the cursor simply don't move...

One of the good things about GWC is that you can code in functionality that may be missing.

So for something like this, you can google and find pages such as ...

http://stackoverflow.com/questions/9170670/how-do-i-set-textarea-scroll-bar-to-bottom-as-a-default

... which gives a nice simple technique.

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;

So then you can create your own frontcall as per https://4js.com/online_documentation/fjs-gas-manual-html/#c_gas_front_end_call_001.html

e.g.

gwc.frontCallModuleList.custom = {
 
    scrollend: function(id) { 
        var textarea = document.getElementById(id);
        textarea.scrollTop = textarea.scrollHeight;
        return 0;
    }
}

(for a quick hack, add to csf.js but I'd recommend your own .js file rather than editing csf.js)

and then call it from your 4gl.  So my quick test...

MAIN
DEFINE chat, conversation STRING
DEFINE result STRING
 
    OPTIONS INPUT WRAP
    OPEN WINDOW w WITH FORM "chatwindow"
    INPUT BY NAME chat, conversation ATTRIBUTES(UNBUFFERED, WITHOUT DEFAULTS=TRUE)
        BEFORE INPUT
            CALL DIALOG.setFieldActive("conversation", FALSE)
 
        BEFORE FIELD chat
            -- replace hard-coding of ge118 with method to get web unique id of fieldname
            CALL ui.Interface.frontCall("custom","scrollend",["ge118"],result)
 
        ON ACTION accept
            LET conversation = conversation, "\n",CURRENT HOUR TO SECOND, " ", chat
            INITIALIZE chat TO NULL
            NEXT FIELD chat
 
        ON ACTION CLOSE
            EXIT INPUT
    END INPUT
 
END MAIN

LAYOUT
GRID
{
[f01                                    ]
[                                       ]
[                                       ]
[" "]
[f02                                    ]
[                                       ]
[                                       ]
[                                       ]
 
}
END
END
ATTRIBUTES
TEXTEDIT f01 = formonly.chat;
TEXTEDIT f02 = formonly.conversation, WANTNORETURNS;

I was getting the behaviour you were after.

The only thing I'd have to change is note in the 4gl above, I've hard-coded the Id attribute (ge118) (that number may vary when you run).  There should be a way ( I just can't recall off top of my head) where you can pass the fieldname e.g. "formonly.conversation", to the front-call and have some javascript to return the value of the appropriate Id.

Reuben

Hello,

Just a remark:

Instead of using 2 textedits with set cursor function and extend front-ends with custom code, did you consider to implement this form with a DIALOG block, mixing a INPUT and a DISPLAY ARRAY? The INPUT would be used to enter the message text and the DISPLAY ARRAY would show the history of the chat. When clicking on the DISPLAY ARRAY rows, just re-display the text in the INPUT field. If you want to deny modification of sent messages, disable the INPUT field for existing messages. With DISPLAY ARRAY controlling the chat history, the user can easily move back and forth, and you can scroll by program to the end of the list with DIALOG.setCurrentRow().

Seb

Hey guys, thanks for the reply.

Reuben, that was a good solution that might work, mixing javascript with genero to manipulate the interface in GWC, but that solution was a bit more complex than what i was expecting to do.

Actually i liked the Sebastien solution, using a table to show the chat history. We tried that and it worked great! Just one more thing, we also use HTML formating in our messages, so i created the display array of Text Edit component and applied the flowing style at the text edit:

<StyleAttribute  name="integratedSearch"        value="no" />  
<StyleAttribute  name="textFormat"                  value="html" />
<StyleAttribute  name="showEditToolBox"         value="no" />     
 

Great on desktop, but in GWC HTML5 the text edit become huge, forcing me to use an "edit" instead of "text edit", but now the edit does not support the textFormat style... Any ideas?

Is it an option to use LABEL instead of TEXTEDIT as that does support textFormat style as well.

Hi,

I am not sure if you mean the size of the text in the TextEdit, or the container of the TextEdit.

With HTML5 client and a TextEdit, using textFormat of HTML, we end up with an iFrame.  Therefore styles are not inherited.  Very little styling is applied within the iFrame by the GWC.   By default we can have quite large text (presumably the default of 16px), so we just wrap a bit of inline styling around the text to get the size we want. 

The container size for the TextEdit we do seem to be able to manipulate by changing the font-size style in the .4st file.  The div containing the iFrame seems to set the container size.

Not really sure if this answers your question, but it may help.

John

Hi John!

Actually, i meant the size of the TextEdit container.

We tried out Reuben's solution to activate HTML in a label and it worked perfectly! So we created a display array with labels inside and used a function to break the string into an array. This way we archived our goal, simple and clean.

Here is the style we used:

<Style name="Label.LabelHtml" >
     <StyleAttribute  name="textFormat" value="html" />
</Style>
 

Thank you very much for all the help and attention.