Quantcast
Channel: SmartClient Forums
Viewing all articles
Browse latest Browse all 4756

Error integrating third-party GWT widget

$
0
0
Hello,

I am trying to integrate a non-SmartGWT widget in a VLayout without success.

This widget is a JS editor (https://github.com/daveho/AceGWT) and works fine in a plain-GWT aplication:

Code:

public void onModuleLoad() {

[...]
                AceEditor editor = new AceEditor();
                editor.setWidth("600px");
                editor.setHeight("400px");

                RootPanel.get().add(editor);

                editor.startEditor();
                editor.setMode(AceEditorMode.PERL);
                editor.setTheme(AceEditorTheme.TWILIGHT);
}

I am able to show this widget in a HTMLPane:
Code:

editor = new AceEditor();
editor.setWidth("600px");
editor.setHeight("400px");
               
HTMLPane pane = new HTMLPane();
pane.addChild(editor);

editor.startEditor();
editor.setMode(AceEditorMode.PERL);
editor.setTheme(AceEditorTheme.TWILIGHT);
pane.draw();

Widget is shown but it is placed in the top of the GWT application.

When I try to put the panel in a VLayout, nothing is shown and the following exception is raised:

Code:

Uncaught JavaScript exception [TypeError: isc.isA.CanvasItem is not a function] in http://127.0.0.1:8888/project/sc/modules/ISC_Core.js, line 2436
I have also read "Interface DomIntegration" in SmartGWT and I have tryed with a Canvas class:
Code:

private class AceCanvas extends Canvas {

                private AceEditor editor;

                public AceCanvas() {
                        editor = new AceEditor();
                        editor.setWidth("600px");
                        editor.setHeight("400px");
                        setOverflow(Overflow.VISIBLE);
                        setCanDragResize(false);
                        setRedrawOnResize(false);
                        setZIndex(0);
                }

                @Override
                public String getInnerHTML() {
                        return editor.toString();
                }

                public AceEditor getEditor() {
                        return editor;
                }
        }

Funtion getInnerHTML() returns the following String:

Code:

<div class=" ace_editor ace-chaos ace_dark" style="width: 600px; height: 400px;" id="_aceGWT0">
<textarea style="opacity: 0;" spellcheck="false" wrap="off" class="ace_text-input"></textarea><div class="ace_gutter">
<div class="ace_layer ace_gutter-layer ace_folding-enabled"></div>
<div class="ace_gutter-active-line"></div></div>
<div class="ace_scroller"><div class="ace_content">
<div class="ace_layer ace_print-margin-layer">
<div style="left: 4px; visibility: visible;" class="ace_print-margin"></div></div><div class="ace_layer ace_marker-layer"></div>
<div style="padding: 0px 4px;" class="ace_layer ace_text-layer"></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor"></div></div></div></div>
<div style="display: none; width: 22px;" class="ace_scrollbar ace_scrollbar-v">
<div style="width: 22px;" class="ace_scrollbar-inner"></div></div>
<div style="display: none; height: 22px;" class="ace_scrollbar ace_scrollbar-h"><div style="height: 22px;" class="ace_scrollbar-inner"></div></div>
<div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; white-space: pre; font: inherit; overflow: hidden;"><div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; white-space: pre; font: inherit; overflow: visible;"></div><div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; white-space: pre; font: inherit; overflow: visible;">X</div></div></div>

In this case, a black rectangle is painted in place of the widget.

I am working with SmartGWT Eval version 4.1-p20140525 + Firefox

What I can do to integrate this GWT widget in a SmartGWT layout?

Thank you in advance!

Viewing all articles
Browse latest Browse all 4756

Trending Articles