java - Using ACE with WT -

update 3 final working code below. need ace.js src folder! not work libs, need pre-packaged version site.

wtext *editor = new wtext(root()); editor->settext("function(){\n hello.abc();\n}\n"); editor->setinline(false); 

the above code can set contents of ace window.

myclass::myclass(const wenvironment& env) : wapplication(env) { wapp->require("ace-builds/src/ace.js"); // wcontainerwidget rendered div wcontainerwidget *editor = new wcontainerwidget(root()); editor->resize(500, 500);  std::string editor_ref = editor->jsref(); // text string 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 project looks atm, still getting white screen red "loading..." message wt in top right hand corner. more notes below.

myclass::myclass(const wenvironment& env) : wapplication(env) { wapp->require("lib/ace/ace.js"); // wcontainerwidget rendered div wcontainerwidget *editor = new wcontainerwidget(root()); editor->resize(500, 500);  std::string editor_ref = editor->jsref(); // text string 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 equal following when used 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 equal following when used b->clicked().connect(command);

"function(object, event) {wt.emit('oy4ycjy','textchanged',wt3_3_0.$('oy4ycjy').editor.getvalue());;}" 

update 1

added suggested code constructor, page not change solid white screen. doing nothing else in wt project, code running.

wapp->require("lib/ace/ace.js"); // wcontainerwidget rendered div wcontainerwidget *editor = new wcontainerwidget(root()); std::string editor_ref = editor->jsref(); // text string 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 "wt3_3_0.$('oumvrgm')" minus quotes.

also tried adding code below, , page 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 found commenting out

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

makes button show up, there red "loading..." note @ top right of screen wt waiting on something.

i have textchanged nothing function @ moment.

original post

so, problem this. how can ace http://ace.ajax.org/#nav=about in wt http://www.webtoolkit.eu/wt. more specifically, ace in wt wt::wtextarea or wt::wtabwidget, text area preferred. have been trying few days , have not had success.

i've been able embed ace in html page no problem, site says "just copy , paste page" , simple. however, need load locally through wt , container. downloaded repos git machine , have tried using

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

and

dojavascript(...); 

with various commands no success... not strong in java , html c++ ask detail possible if involves lot of java/html. in advance mates!

maybe puts in right direction:

 wapp->require("lib/ace/ace.js") // wcontainerwidget rendered div wcontainerwidget *editor = new wcontainerwidget(parent); // editor->jsref() text string 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 editor. wt not automatically send modifications div server, manually through jsignal (emits signal js 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 not tested may need adjust bit)

i have integrated codemirror in earlier jwt (java) project 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 editor state text area on each key stroke,                 //it appears not performance issue,                 //however might become 1 when editing larger fragments of code.                 //a better solution save state text area when                 //the form submitted, 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);         } }