2

UPDATE 3 以下の最終的な作業コード。src フォルダから ace.js が必要です! ライブラリからは機能しません。サイトから事前にパッケージ化されたバージョンが必要です。

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

上記のコードは、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)
{

}

更新 2 私のプロジェクトは atm のように見えますが、右上隅に WT からの赤い「読み込み中...」というメッセージが表示された白い画面がまだ表示されています。詳細は以下をご覧ください。

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」変数は、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」変数は、b->clicked().connect(command); に使用される場合、次のようになります。

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

更新 1

提案されたコードをコンストラクターに追加しましたが、ページは真っ白な画面から変わりません。この WT プロジェクトでは他に何もしていません。このコードだけが実行されています。

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

editor_ref の値は、「Wt3_3_0.$('oumvrgm')」から引用符を引いたものです。

また、以下のコードを追加しようとしましたが、ページはまだ空白になっています。

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

コメントアウトすることもわかりました

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

ボタンが表示されますが、画面の右上に赤い「読み込み中...」のメモがあるため、WT は何かを待っています。

現時点では、何もしない関数として textChanged があります。

元の投稿

だから、私の問題はこれです。WT http://www.webtoolkit.eu/wtで ACE http://ace.ajax.org/#nav=aboutを取得するにはどうすればよいですか。より具体的には、WT Wt::WTextArea または Wt::WTabWidget の ACE では、テキスト領域が優先されます。私は数日間これをやろうとしてきましたが、あまり成功していません.

ACE を HTML ページに問題なく埋め込むことができました。彼らのサイトには「コピーしてページに貼り付けるだけ」と書かれており、本当に簡単です。ただし、WT を介してコンテナーにローカルにロードする必要があります。彼らのレポジトリを GIT から自分のマシンにダウンロードし、使用してみました

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

と

doJavaScript(...);

さまざまなコマンドを使用しても成功しません... Java と HTML は C++ ほど得意ではないので、Java/HTML が多く含まれる場合は、できるだけ詳細を尋ねます。よろしくお願いします！

4

1 に答える 1

3

多分これはあなたを正しい方向に導きます：


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

それはエディターを飾るはずです。Wt は div への変更をサーバーに自動的に送信しないため、JSignal を介して手動でこれを行います (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()") +
  ";}");

(上記のコードはテストされていないため、少し調整する必要があるかもしれません)

次のような以前の JWt (Java) プロジェクトに CodeMirror を統合しました。


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);
        }
}
于 2013-04-05T13:47:31.090 に答える