Four Js Development Tools Forum

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:

gICAPI.SetFocus();
gICAPI.SetData(l_texto);
gICAPI.Action("entrada_texto");
 

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:

/**
		 * @returns True if the given component has issued a value event
		 * @param {Component} component
		 */
		this.hasLocalValueChanges = function(component) {
 
			return currentFrame.eventList.some(function(event) {
 
				return event.type == gwc.dialog.VALUE && event.component == component && event.filter();
			});
		}
 

Can someone give me some light on this?

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.   

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.

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

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:

INPUT BY NAME wc ATTRIBUTES(WITHOUT DEFAULTS=TRUE, UNBUFFERED)
        before input
           CALL ui.Interface.frontCall("webcomponent","call",["formonly.wc","set_content",rich_text],[])
 
        ON ACTION show ATTRIBUTES(TEXT="Show Content")
            CALL ui.Interface.frontCall("webcomponent","call",["formonly.wc","show_content"],[])
 
        ON ACTION get ATTRIBUTES(TEXT="Get Content")
            CALL ui.Interface.frontCall("webcomponent","call",["formonly.wc","get_content"],[rich_text])
            DISPLAY rich_text
 
        AFTER INPUT
            IF int_flag THEN
                EXIT INPUT
            END IF
    END INPUT
 

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

Hi Snorri


the web component has probably not finished loading.

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

BEFORE INPUT
            CALL ui.Interface.refresh()
            SLEEP 3
            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

Thanks Reuben.

This did the trick!

Best regards,
-Snorri