Subscribe for automatic updates: RSS icon RSS

Login icon Sign in for full access | Help icon Help
Advanced search

Pages: [1]
  Reply  |  Print  
Author Topic: Set Scroll Position in Text Edit  (Read 16282 times)
Anderson P.
Posts: 82


« on: September 18, 2014, 03:16:11 pm »

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?
Snorri B.
Posts: 103


« Reply #1 on: September 18, 2014, 04:30:35 pm »

Have you tried fgl_dialog_setcursor(pos)?
Anderson P.
Posts: 82


« Reply #2 on: September 18, 2014, 04:53:51 pm »

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.
Snorri B.
Posts: 103


« Reply #3 on: September 18, 2014, 04:57:15 pm »

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

Anderson P.
Posts: 82


« Reply #4 on: September 18, 2014, 07:00:58 pm »

Hi Snorri

Here is our test

Code
  1. while true
  2.  
  3.   input g_message from s_message attributes(without defaults, unbuffered)
  4.      on action send
  5.         let g_chat = g_message , " - ", g_message
  6.         display g_chat to s_chat
  7.         exit input
  8.   end input
  9.  
  10.   input g_chat from s_chat attributes(without defaults, unbuffered)
  11.      before field s_chat
  12.         call fgl_dialog_setcursor(g_chat.getLength() -1)
  13.         exit input
  14.   end input
  15.  
  16. end while
  17.  

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 :(
Snorri B.
Posts: 103


« Reply #5 on: September 18, 2014, 07:57:27 pm »

Have you tried to put this into a DIALOG block and position the cursor BEFORE DIALOG?
Anderson P.
Posts: 82


« Reply #6 on: September 18, 2014, 08:20:55 pm »

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?

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

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...
Reuben B.
Four Js
Posts: 845


« Reply #7 on: September 19, 2014, 12:12:45 am »

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.

Code
  1. var textarea = document.getElementById('textarea_id');
  2. 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.

Code
  1. gwc.frontCallModuleList.custom = {
  2.  
  3.    scrollend: function(id) {
  4.        var textarea = document.getElementById(id);
  5.        textarea.scrollTop = textarea.scrollHeight;
  6.        return 0;
  7.    }
  8. }

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

Code
  1. MAIN
  2. DEFINE chat, conversation STRING
  3. DEFINE result STRING
  4.  
  5.    OPTIONS INPUT WRAP
  6.    OPEN WINDOW w WITH FORM "chatwindow"
  7.    INPUT BY NAME chat, conversation ATTRIBUTES(UNBUFFERED, WITHOUT DEFAULTS=TRUE)
  8.        BEFORE INPUT
  9.            CALL DIALOG.setFieldActive("conversation", FALSE)
  10.  
  11.        BEFORE FIELD chat
  12.            -- replace hard-coding of ge118 with method to get web unique id of fieldname
  13.            CALL ui.Interface.frontCall("custom","scrollend",["ge118"],result)
  14.  
  15.        ON ACTION accept
  16.            LET conversation = conversation, "\n",CURRENT HOUR TO SECOND, " ", chat
  17.            INITIALIZE chat TO NULL
  18.            NEXT FIELD chat
  19.  
  20.        ON ACTION CLOSE
  21.            EXIT INPUT
  22.    END INPUT
  23.  
  24. END MAIN

Code
  1. LAYOUT
  2. GRID
  3. {
  4. [f01                                    ]
  5. [                                       ]
  6. [                                       ]
  7. [" "]
  8. [f02                                    ]
  9. [                                       ]
  10. [                                       ]
  11. [                                       ]
  12.  
  13. }
  14. END
  15. END
  16. ATTRIBUTES
  17. TEXTEDIT f01 = formonly.chat;
  18. 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







Register for WWDC 21 at https://4js.com/wwdc21online/

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Sebastien F.
Four Js
Posts: 465


« Reply #8 on: September 19, 2014, 09:04:31 am »

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
Anderson P.
Posts: 82


« Reply #9 on: September 19, 2014, 01:19:01 pm »

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:

Code
  1. <StyleAttribute  name="integratedSearch"        value="no" />  
  2. <StyleAttribute  name="textFormat"                  value="html" />
  3. <StyleAttribute  name="showEditToolBox"         value="no" />    
  4.  

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?
Reuben B.
Four Js
Posts: 845


« Reply #10 on: September 22, 2014, 10:55:47 pm »

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


Register for WWDC 21 at https://4js.com/wwdc21online/

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
John T.
Posts: 14


« Reply #11 on: September 23, 2014, 02:09:54 am »

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
Anderson P.
Posts: 82


« Reply #12 on: September 23, 2014, 01:18:09 pm »

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:

Code
  1. <Style name="Label.LabelHtml" >
  2.     <StyleAttribute  name="textFormat" value="html" />
  3. </Style>
  4.  

Thank you very much for all the help and attention.
Pages: [1]
  Reply  |  Print  
 
Jump to:  

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines