Usando o ACE com o WT

ATUALIZAÇÃO 3 Código de trabalho final abaixo. VOCÊ PRECISA DO ace.js DA PASTA src! Não irá funcionar a partir das bibliotecas, você precisa da versão pré-empacotada do seu site.

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

O código acima pode definir o conteúdo da janela ACE.

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)
{

}

ATUALIZAÇÃO 2 Aqui está o que meu projeto parece com atm, ainda recebendo uma tela branca com uma mensagem vermelha "Carregando ..." do WT no canto superior direito. Mais notas abaixo.

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)
{

}

A variável "command" é igual à seguinte quando é usada para editor-> doJavaScript (comando)

"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');"

A variável "command" é igual à seguinte quando é usada para b-> clicked (). connect (command);

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

ATUALIZAÇÃO 1

Adicionado o código sugerido ao meu construtor, no entanto, a página não muda de uma tela branca sólida. Eu não estou fazendo mais nada neste projeto WT, apenas este código está sendo executado.

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');"
  );

O valor de editor_ref é "Wt3_3_0. $ ('Oumvrgm')" menos as aspas.

Também tentei adicionar o código abaixo, e a página ainda está em branco.

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()") +
  ";}");

Eu também descobri que comentando

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

faz o botão aparecer, mas há uma nota vermelha "Carregando ..." no canto superior direito da tela, para que o WT esteja esperando algo.

Eu tenho textChanged como uma função de não fazer nada no momento.

POSTE ORIGINAL

Então, meu problema é isso. Como posso obter o ACE?http://ace.ajax.org/#nav=about em WThttp://www.webtoolkit.eu/wt. Mais especificamente, ACE em um WT Wt :: WTextArea ou Wt :: WTabWidget, a área de texto seria preferida. Eu tenho tentado fazer isso por alguns dias e não tive muito sucesso.

Consegui incorporar o ACE em uma página HTML sem problemas, já que o site deles diz "copie e cole em sua página" e é simples assim. No entanto, preciso carregá-lo localmente por meio do WT e em um contêiner. Eu baixei seus repositórios do GIT para minha máquina e tentei usar

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

e

doJavaScript(...);

com vários comandos para não ter sucesso ... Eu não sou tão forte em Java e HTML como C ++, então eu vou pedir o máximo de detalhes possível se isso envolver muito Java / HTML. Obrigado antecipadamente companheiros!

questionAnswers(1)

yourAnswerToTheQuestion