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: WebComponent with TinyMCE  (Read 8550 times)
Anderson P.
Posts: 82


« on: September 16, 2016, 02:10:27 pm »

Hello all, I am trying to implement a webcomponent with TinyMCE editor inside Genero, so I can have a more adaptable text editor.

I'm using the "gICAPI" to send the content to Genero, like bellow:

Code
  1. gICAPI.SetFocus();
  2. gICAPI.SetData(l_texto);
  3. gICAPI.Action("entrada_texto");
  4.  

This function is triggered on the "change" event of TinyMCE, but I have two questions, first of all, when user leaves the field TinyMCE trigger the "change" event, that calls the "gICAPI.SetFocus();" and this takes the focus back to the input field. Is there some way to send the content without setting focus back to the field? Maybe something like the WebComponent write the text to a temporary space on disk and Genero reads it when user leaves field.

The other question, in some randon cases i get the Javascript error "csf_25033.js:4751: Uncaught TypeError: event.filter is not a function", this error is on a Genero file:

Code
  1. /**
  2. * @returns True if the given component has issued a value event
  3. * @param {Component} component
  4. */
  5. this.hasLocalValueChanges = function(component) {
  6.  
  7. return currentFrame.eventList.some(function(event) {
  8.  
  9. return event.type == gwc.dialog.VALUE && event.component == component && event.filter();
  10. });
  11. }
  12.  

Can someone give me some light on this?
Reuben B.
Four Js
Posts: 949


« Reply #1 on: September 18, 2016, 11:59:57 pm »

About 6 months ago, I quickly put together an example using tinymce as a webcomponent using the new front-calls available in 3.0.  Source available here ... https://github.com/FourjsGenero/wc_tinymce

Its very simple and uses the new front-calls in 3.0 to do sets and gets with the tinymce content, rather than trying to tie content to 4gl variable.   

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


« Reply #2 on: September 19, 2016, 06:17:08 pm »

Reuben,

Thanks for you reply. Unfortunately, we are still in Genero 2.50, our version of Red Hat was incompatible with Genero 3 and we are still looking forward to update it.

Is there some example using the functions Available at 2.50?

Thanks for your attention.
Snorri B.
Posts: 103


« Reply #3 on: January 18, 2017, 06:27:02 pm »

About 6 months ago, I quickly put together an example using tinymce as a webcomponent using the new front-calls available in 3.0.  Source available here ... https://github.com/FourjsGenero/wc_tinymce

Its very simple and uses the new front-calls in 3.0 to do sets and gets with the tinymce content, rather than trying to tie content to 4gl variable.   


Hi.

I tried this out and it works fine via GAS, but not via SSH (direct connection). Can you confirm that this is the case?

Best regards,
-Snorri
Reuben B.
Four Js
Posts: 949


« Reply #4 on: January 18, 2017, 09:58:10 pm »

About 6 months ago, I quickly put together an example using tinymce as a webcomponent using the new front-calls available in 3.0.  Source available here ... https://github.com/FourjsGenero/wc_tinymce

Its very simple and uses the new front-calls in 3.0 to do sets and gets with the tinymce content, rather than trying to tie content to 4gl variable.   


Hi.

I tried this out and it works fine via GAS, but not via SSH (direct connection). Can you confirm that this is the case?

Best regards,
-Snorri

Snorri,

With the GitHub examples, you can raise issues via the Issues tab on each repositories page.

It should work fine for SSH, that is my default environment.  I just checked it out again into a fresh directory and it still worked.

Looking at it to see possible traps ...

If you aren't running from Studio but are running from command line, make sure you right-click the nodes in Studio and note any environment variable settings.  Also note I change TargetDirectory to $(ProjectDir)

I could probably improve the wording in the README around the copy but the key thing to note is when you copy the directory from $FGLASDIR/tpl/SetHtml5 into the web components directory of the source, you want to end up with $(ProjectDir)/webcomponents/wc_tinymce/tinymce/tinymce.min.js

Reuben



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


« Reply #5 on: January 27, 2017, 03:54:02 pm »

Hi Reuben.

I've been playing around with this and it works fine (mostly).

However, if I try to set the content of the WC in BEFORE INPUT (rather than ON ACTION) it crashes:
Code
  1. INPUT BY NAME wc ATTRIBUTES(WITHOUT DEFAULTS=TRUE, UNBUFFERED)
  2.        before input
  3.           CALL ui.Interface.frontCall("webcomponent","call",["formonly.wc","set_content",rich_text],[])
  4.  
  5.        ON ACTION show ATTRIBUTES(TEXT="Show Content")
  6.            CALL ui.Interface.frontCall("webcomponent","call",["formonly.wc","show_content"],[])
  7.  
  8.        ON ACTION get ATTRIBUTES(TEXT="Get Content")
  9.            CALL ui.Interface.frontCall("webcomponent","call",["formonly.wc","get_content"],[rich_text])
  10.            DISPLAY rich_text
  11.  
  12.        AFTER INPUT
  13.            IF int_flag THEN
  14.                EXIT INPUT
  15.            END IF
  16.    END INPUT
  17.  
Program stopped at 'wc_tinymce.4gl', line number 22.
FORMS statement error number -6333.
Front end function call failed.
Reason:undefined is not an object (evaluating 'n.parser.parse')

Do you have Idea what might be going on?

Regards,
-Snorri
Reuben B.
Four Js
Posts: 949


« Reply #6 on: January 29, 2017, 08:51:03 pm »

Hi Snorri

Quote
However, if I try to set the content of the WC in BEFORE INPUT (rather than ON ACTION) it crashes:

the web component has probably not finished loading.

Try adding a ui.Interface.refresh and a small sleep...

Code
  1. BEFORE INPUT
  2.            CALL ui.Interface.refresh()
  3.            SLEEP 3
  4.            CALL ui.Interface.frontCall("webcomponent","call",["formonly.wc","set_content",rich_text],[])

... and experiment with value for SLEEP to see how long it is taking to load.  I had similar issues with my googlecharts examples https://github.com/FourjsGenero/wc_googlecharts and came up with a coding technique there where between the OPEN WINDOW and first dialog, I wait until the web component has been loaded.

Reuben


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


« Reply #7 on: January 30, 2017, 03:37:36 pm »

Thanks Reuben.

This did the trick!

Best regards,
-Snorri
Pages: [1]
  Reply  |  Print  
 
Jump to:  

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines