Using ACE with WT

Question

UPDATE 3 Final working code below. YOU NEED THE ace.js FROM THE src FOLDER! It will not work from the libs, you need the pre-packaged version from their site.

WText *editor = new WText(root());
editor->setText("function(){\n hello.abc();\n}\n");
editor->setInline(false);

The above code can set the contents of the ACE window.

MyClass::MyClass(const WEnvironment& env)
: WApplication(env)
{
wApp->require("ace-builds/src/ace.js");
// A WContainerWidget is rendered as a div
WContainerWidget *editor = new WContainerWidget(root());
editor->resize(500, 500);

std::string editor_ref = editor->jsRef(); // is a text string that will be the element when executed in JS

std::string command = 
  editor_ref + ".editor = ace.edit(" + editor_ref + ");" +
  editor_ref + ".editor.setTheme(\"ace/theme/monokai\");" +
  editor_ref + ".editor.getSession().setMode(\"ace/mode/javascript\");";

editor->doJavaScript(command);


JSignal <std::string> *jsignal = new JSignal<std::string>(editor, "textChanged");
jsignal->connect(this, &MyClass::textChanged);

WPushButton *b = new WPushButton("Save", root());

command = "function(object, event) {" +
  jsignal->createCall(editor_ref + ".editor.getValue()") +
  ";}";

b->clicked().connect(command);
}

void MyClass::textChanged(std::string incoming)
{

}

UPDATE 2 Here is what my project looks like atm, still getting a white screen with a red "Loading..." message from WT in the top right hand corner. More notes below.

MyClass::MyClass(const WEnvironment& env)
: WApplication(env)
{
wApp->require("lib/ace/ace.js");
// A WContainerWidget is rendered as a div
WContainerWidget *editor = new WContainerWidget(root());
editor->resize(500, 500);

std::string editor_ref = editor->jsRef(); // is a text string that will be the element when executed in JS

std::string command = 
  editor_ref + ".editor = ace.edit(" + editor_ref + ");" +
  editor_ref + ".editor.setTheme(\"ace/theme/monokai\");" +
  editor_ref + ".editor.getSession().setMode(\"ace/mode/javascript\");";

editor->doJavaScript(command);


JSignal <std::string> *jsignal = new JSignal<std::string>(editor, "textChanged");
jsignal->connect(this, &MyClass::textChanged);

WPushButton *b = new WPushButton("Save", root());

command = "function(object, event) {" +
  jsignal->createCall(editor_ref + ".editor.getValue()") +
  ";}";

b->clicked().connect(command);
}

void MyClass::textChanged(std::string incoming)
{

}

"command" variable is equal to the following when it is used for editor->doJavaScript(command)

"Wt3_3_0.$('oy4ycjy').editor = ace.edit(Wt3_3_0.$('oy4ycjy'));Wt3_3_0.$('oy4ycjy').editor.setTheme('ace/theme/monokai');Wt3_3_0.$('oy4ycjy').editor.getSession().setMode('ace/mode/javascript');"

"command" variable is equal to the following when it is used for b->clicked().connect(command);

"function(object, event) {Wt.emit('oy4ycjy','textChanged',Wt3_3_0.$('oy4ycjy').editor.getValue());;}"

UPDATE 1

Added the suggested code to my constructor, however the page does not change from a solid white screen. I am doing nothing else in this WT project, only this code is running.

wApp->require("lib/ace/ace.js");
// A WContainerWidget is rendered as a div
WContainerWidget *editor = new WContainerWidget(root());
std::string editor_ref = editor->jsRef(); // is a text string that will be the element when executed in JS
editor->doJavaScript(
  editor_ref + ".editor = ace.edit('" + editor_ref + "');" +
  editor_ref + ".editor.setTheme('ace/theme/monokai');" +
  editor_ref + ".editor.getSession().setMode('ace/mode/javascript');"
  );

The value of editor_ref is "Wt3_3_0.$('oumvrgm')" minus the quotes.

Also tried adding the code below, and the page is still blanked out.

JSignal <std::string> *jsignal = new JSignal<std::string>(editor, "textChanged");
jsignal->connect(this, &MyClass::textChanged);

WPushButton *b = new WPushButton("Save", root());
b->clicked().connect("function(object, event) {" +
  jsignal->createCall(editor->jsRef() + ".editor.getValue()") +
  ";}");

I have also found that commenting out

editor_ref + ".editor = ace.edit('" + editor_ref + "');" +

makes the button show up, but there is a red "Loading..." note at the top right of the screen so WT is waiting on something.

I have textChanged as a do nothing function at the moment.

ORIGINAL POST

So, my problem is this. How can I get ACE http://ace.ajax.org/#nav=about in WT http://www.webtoolkit.eu/wt. More specifically, ACE in a WT Wt::WTextArea or Wt::WTabWidget, the text area would be preferred. I have been trying to do this for a few days now and have not had much success.

I've been able to embed ACE in an HTML page no problem, as their site says "just copy and paste it into your page" and it really is that simple. However, I need to load it locally through WT and into a container. I downloaded their repos from GIT to my machine and have tried using

require("lib/ace/ace.js");

and

doJavaScript(...);

with various commands to no success... I am not nearly as strong in Java and HTML as C++ so I will ask for as much detail as possible if this involves a lot of Java/HTML. Thanks in advance mates!

Answer 1

Maybe this puts you in the right direction:

wApp->require("lib/ace/ace.js")
// A WContainerWidget is rendered as a div
WContainerWidget *editor = new WContainerWidget(parent);
// editor->jsRef() is a text string that will be the element when executed in JS
editor->doJavaScript(
    editor->jsRef() + ".editor = ace.edit(" + editor->jsRef() + ");" +
    editor->jsRef() + ".editor.setTheme('ace/theme/monokai');" +
    editor->jsRef() + ".editor.getSession().setMode('ace/mode/javascript');"
  );

That should decorate the editor. Wt does not automatically send the modifications to a div to the server, so you do this manually through a JSignal (emits a signal from JS to C++):

JSignal <std::string> *jsignal = new JSignal<std::string>(editor, "textChanged");
jsignal->connect(this, MyClass::textChanged);

WPushButton *b = new WPushButton("Save", parent);
b->clicked().connect("function(object, event) {" +
    jsignal->createCall(editor->jsRef() + ".editor.getValue()") +
  ";}");

(code above is not tested so you may need to adjust a bit)

I have integrated CodeMirror in an earlier JWt (java) project like this:

import eu.webtoolkit.jwt.WApplication;
import eu.webtoolkit.jwt.WContainerWidget;
import eu.webtoolkit.jwt.WTextArea;

public class CodeMirrorTextArea extends WContainerWidget {
        private WTextArea textArea;
        public CodeMirrorTextArea(WContainerWidget parent) {
                super(parent);

                textArea = new WTextArea(this);

                WApplication app = WApplication.getInstance();

                app.require(app.resolveRelativeUrl("codemirror-2.32/lib/codemirror.js"));
                app.require(app.resolveRelativeUrl("codemirror-2.32/mode/groovy/groovy.js"));

                //TODO:
                //We save the editor state to the text area on each key stroke,
                //it appears to be not a performance issue,
                //however it might very well become one when editing larger fragments of code.
                //A better solution would be to save this state to the text area only when
                //the form is submitted, currently this is not yet possible in Wt???.

                String js =
                        "var e = " + textArea.getJsRef() + ";" +
                        "var cm = CodeMirror.fromTextArea(e, {" +
                        "       onKeyEvent : function (editor, event) {" +
                    "           editor.save();" +
                    "   }," +
                        "       lineNumbers: true" +
                        "       });" +
                        "var self = " + getJsRef() + ";" +
                        "self.cm = cm;";

                this.doJavaScript(js);
        }

        public CodeMirrorTextArea() {
                this(null);
        }

        public void setText(String text) {
                textArea.setText(text);
        }

        public String getText() {
                return textArea.getText();
        }

        public void setMarker(int line, String htmlMarker) {
                String js =
                        "var self = " + getJsRef() + ";" +
                        "self.cm.setMarker(" + line + ", " + jsStringLiteral(htmlMarker +
"%N%") + ");";

                this.doJavaScript(js);
        }

        public void clearMarker(int line) {
                String js =
                        "var self = " + getJsRef() + ";" +
                        "self.cm.clearMarker(" + line + ");";

                this.doJavaScript(js);
        }
}