1

smartGWT タブでの CodeMirror UI の統合に関して質問があります。

基本的に、smartGWT タブにアタッチした textarea 要素内に CodeMirror-UI エディターを表示できません。これが私がしたことです：

  1. そのページの説明に従って CodeMirror-UI をインストールし、プロジェクトのディレクトリ階層に一致するようにパスを修正しました

  2. プロジェクトのメイン html (先頭) に js スクリプトを作成しました。

    <head>
...
 <script>
  function fireEditor()
  {
   var textarea = window.document.getElementById('tab_editor' );
   var uiOptions = { path : 'codemirror-ui/js/', searchMode : 'inline' };
   var codeMirrorOptions = { mode: 'javascript' };
   var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
  }
 </script>
</head>

  3. (smartGWT) タブを開きながらスクリプトを呼び出しました。

    // create a smartGWT tab
Tab tab = new Tab("tab");
tab.setID("tab");
tab.setCanClose(true);

// put the CodeMirror UI inside the smartGWT tab
// create a smartGWT canvas
Canvas tabContent = new Canvas();
tabContent.setID("tabc");
tabContent.setWidth100();
tabContent.setHeight100();

// use a GWT HTMLPanel to attach new html elements to the smartGWT canvas
// and invoke the fireEditor() function to load the CodeMirror UI
HTMLPanel editorContainer = new HTMLPanel(
 "<div id=\"editor_container\">"
 + "<textarea id=\"tab_editor\" style=\"width:100%;height:100%\" onload=\"fireEditor()\">"
 + "</textarea>"
 + "</div>");
editorContainer.setWidth("100%");
editorContainer.setHeight("100%");

ブラウザから実行すると (私は firefox - iceweasel 10.0.10 を使用しています)、空の textarea 要素を示す smartGWT タブが表示されます。firebug で確認すると、smartGWT タブ内の領域には、HTMLPanel で指定した HTML が含まれていますが、CodeMirror UI は表示されません。

私は何が欠けていますか？

私は Eclipse Indigo を gwt 2.4.0、smartgwt 3.0p、および git repo (それ自体が CodeMirror 2.3 を使用) からの codemirror ui 0.0.19 と共に使用しています。

ありがとうございました

4

1 に答える 1

0

解決策を見つけました。

まず、html の textarea 要素には「onload」イベントがないため、コードは

    HTMLPanel editorContainer = new HTMLPanel(
    "<div id=\"editor_container\">"
    + "<textarea id=\"tab_editor\" style=\"width:100%;height:100%\" onload=\"fireEditor()\">"
    + "</textarea>"
    + "</div>");

「fireEditor()」を呼び出さずに、HTMLPanel にテキストエリアを配置するだけです。「onload」を「onclick」に置き換えるとうまくいきます。textarea 要素が表示されたら、それをクリックすると、CodeMirrorUI も表示されます。

問題: CodeMirrorUI インターフェイスを自動的に視覚化する必要があるため、"onclick" アプローチは役に立ちません。

このタスクを達成するには、smartGWT タブの DOM を何らかの方法で変更し、内部の html を CodeMirrorUI の html に置き換える必要があります。このドキュメントは非常に役に立ちました: http://www.smartclient.com/smartgwtee-latest/javadoc/com/smartgwt/client/docs/DomIntegration.html

これは結果のコードです：

1）プロジェクトのメインhtml（先頭）にjsスクリプトを保持しました：

    <head>
    ...
    <script>
      function fireEditor()
      {
        var textarea = window.document.getElementById('tab_editor' );
        var uiOptions = { path : 'codemirror-ui/js/', searchMode : 'inline' };
        var codeMirrorOptions = { mode: 'javascript' };
        var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
      }
    </script>
    </head>

2）上記のドキュメントリンクにある例に従って、新しいクラス「MyEditor」を作成しました。

    public class MyEditor extends Canvas {
       private String editor_id = null;

   private static native void replace(String editor) /*-{
          $wnd.fireEditor(editor);
   }-*/;

   public MyEditor(Integer num) {
          editor_id = "editor_" + num;
          setRedrawOnResize(false);
   }

   @Override
   public String getInnerHTML() {
          return "<textarea id=\"" + editor_id + "\"" + "style=\"width:100%;height:100%\"></textarea>";
   }

   @Override
   protected void onDraw() {
          MyEditor.replace(editor_id);
   }

    }

3) 最後に、smartGWT タブに MyEditor のインスタンスを入力しました。

    // create a smartGWT tab
    Tab tab = new Tab("tab");
    tab.setID("tab");
    tab.setCanClose(true);

    MyEditor editor = new MyEditor(tabNumber); // an integer number
    tab.setPane(editor);

テスト済み。働く。

于 2012-11-12T09:37:08.410 に答える