Vaadin 7でjavascriptを使用するか、チャートで490ドルを節約した方法（パート1）

この記事では、 Dom24x7ユーティリティメータリングサービスで美しいグラフィックを実装した方法と、発生した問題や不便さについて説明します。



Vaadin 7には、チャートを操作するための優れた公式アドオンがありますが、問題は無料ではなく、ほぼ500ドルかかることです！ 私はそのようなお金を使いたくなかったので、無料から代替品を探すことにしましたが、残念ながら、品質が完全に不十分であることがわかったので、チャートを操作するための公式アドオンに注意を向けて、それをより詳しく調査することにしました。



この追加は、優れたjavascript Highchartsライブラリの単なるシェルであり、 loおよびbeholdは、非営利プロジェクト（現時点では私たちのプロジェクトですが、そのステータスが変更されたら、商用ライセンスを喜んで購入しますが、 ）、素晴らしい代替ライブラリAmchartsがまだありますが、それでも前のものに留まることに決めました。



ちなみに、Vaadin開発者は、企業ライセンスを購入する必要があるという事実により、チャートの操作に関する追加を非常に強く求めている理由を説明しています。



ライブラリを決定しましたが、問題を解決するために残っています、とにかくそれをプロジェクトに接続するにはどうすればよいですか？

この記事は2つの部分で構成されています。 最初の部分は、javascriptライブラリをvaadinプロジェクトに接続する方法に関する記事の翻訳です。2番目の部分では、得られた知識を使用してグラフを表示するライブラリを作成した方法について説明します。

だから...

Vaadin 7はJavaScriptコンポーネントが大好き

Vaadin 7でJavaScriptコンポーネントを使用するのは簡単です。 もちろん、Vaadinには長い間Window.executeJavaScript（）メソッドがありましたが、このメソッドにはかなりの制限があります。 たとえば、Javascriptファイルとの依存関係がある場合、呼び出し前にそれらの読み込みを保証することは困難です。



他のVaadin 7 GWTコンポーネントと同様に、JavaScriptコンポーネントは4つの部分で構成されています。

• サーバーコンポーネント（サーバー側コンポーネント）、
• 状態
• コネクター
• また、クライアントコンポーネントはクライアント側のウィジェットです。

単純な例では（たとえば、以下で説明するように）、コネクタとクライアントウィジェットを組み合わせる方が簡単です。 ただし、完成したjavacsriptウィジェットをJavascriptコンポーネントの機能とリンクすることにより、ウィジェット自体（ライブラリ）を制御するコネクタ自体のみを記述できます。



GWTウィジェットでできることはほぼすべて、JavaScriptウィジェットでも同じことができます。 以下では、簡単な例を見て、さまざまな部分がどのように機能するかを示します。



以下の例では、単にメッセージを表示します。

サーバー側

@JavaScript({ "js_label.js" }) public class JsLabel extends AbstractJavaScriptComponent { public JsLabel(String xhtml) { getState().xhtml = xhtml; } @Override protected JsLabelState getState() { return (JsLabelState) super.getState(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、コンポーネントは非常に単純です。 1つのパラメーターを持つコンストラクターのみが宣言されます-表示する必要があるテキスト。 このパラメーターは、一般的な状態を使用してクライアント側に渡されます。 コードの重要な部分は、JsLabelクラスを拡張する注釈です。



JavaScriptは、ウィジェットに必要なJavaScriptファイルについてVaadinに通知します。 この例では、js_label.jsのみが必要です。これは、JsLabelのクライアント側の実装です。 ファイルへの相対パスを指定したため、JsLabelクラスと同じjavaパッケージ内にある必要があります。 したがって、私のIDEでは、js_label.jsとJsLabel.javaは並んで配置されています。 必要に応じて、複数のファイルをJavaScriptアノテーションの文字列配列としてリストできます。また、URL形式でパスを指定することもできます。



AbstractJavaScriptComponentは、拡張するクラスです。 共有状態オブジェクトを使用して、JavaScriptとVaadinの間の双方向通信を作成できます。



一般的な状態クラスを操作するためにgetState（）メソッドをオーバーライドするため、Vaadinはどの状態クラスが使用されるかを知っていることに注意してください。 この動作はJavaScriptComponentに固有のものではありませんが、すべてのVaadin 7コンポーネントに共通です。

状態判定

 public class JsLabelState extends JavaScriptComponentState { public String xhtml; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

状態オブジェクトの唯一の目的は、サーバー側とクライアント側の間で双方向にデータを転送することです。 作成するには、JavaScriptComponentStateを拡張する必要があります。



コードを簡潔かつJavaScriptと対称に保つため（以下を参照）、xhtmlフィールドをパブリックとして定義することにしました。 ゲッターとセッターをそこに追加することを妨げるものは何もありませんが、状態クラスはデータ転送のみを目的としており、その中にロジックがないため（そこには存在しないはずです）、この場合のフィールドにはゲッターとセッターは必要ありません。



注：状態クラスを内部JsLabelクラスにして、コードを削減できます。 このアプローチの問題は、組み込み状態クラスがJavaScriptコンポーネントでのみ機能することです。 GWTの汎用状態クラスは、いくつかの特別な場合を除き、内部クラスとして機能しません。 さらに、何らかの理由でgetState（）メソッドを呼び出したくない場合、状態を変更するたびにmarkAsDirty（）メソッドを手動で呼び出すことを忘れないでください。 したがって、混乱を避けるために、状態クラスをコンポーネントから分離しておくことを強くお勧めします。

クライアント側

 org_vaadin_blog_JsLabel = function() { var e = this.getElement(); this.onStateChange = function() { e.innerHTML = this.getState().xhtml; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScriptアノテーションで以前に指定したのは、このjs_label.jsファイルです。 ここで注意すべきことが2つあります。関数の名前とこれの使用です。



従わなければならない命名規則があります。 これにより、Vaadinは、コンポーネントが使用されるときにJavaScript関数を正しく呼び出すことができます。 サーバーコンポーネントの完全修飾クラス名を取得し、ドットをアンダースコアに置き換えます。 この場合、JavaScript関数はorg_vaadin_blog_JsLabelと呼ばれるべきです。 名前を間違えた場合、Vaadinは関数がどのように呼び出されるべきかを（彼の意見では）教えてくれます。



AbstractJavaScriptComponentクラスのJavaDocで詳細を読むことができます（ alpha 3のJavaDocドキュメントへのリンク。この例では、this.getElement（）のみを使用してVaadinウィジェット用に作成されたDOM要素を取得し、this.getState（）で状態にアクセスしますこの場合、状態からXHTML文字列を読み取り、それをDOM要素innerHTMLに挿入します。残念ながら、状態コンポーネントはクライアント側で更新できないため、これらの変更はサーバー側で受信されます。



前述のように、このファイルは同時にコネクタでありウィジェットです。 コネクタの役割は、状態とウィジェットをバインドすることです。 この場合、分離はコードを複雑にするだけなので、ウィジェットとコネクタを1つのjavascriptファイルに結合しました。



状態のgetterおよびsetterはJavaScript側では使用できず、通常のプロパティと同様にフィールドを操作することに注意してください。 これは、状態クラスにアクセスメソッドを明示的に記述した場合にも当てはまります。



したがって、JavaScriptコンポーネントを既存のウィジェット（jsライブラリ）に接続するための便利なメカニズムがあります。 これは、JavaScriptがあり、クライアント側で小さくて高速な機能をプログラムする場合に便利です。 しかし、それにもかかわらず、GWTはVaadinのより複雑で信頼性の高いコンポーネントを作成するための最良の代替手段です。



次の記事では、この知識を使用して、Highchartsチャートを操作するためのライブラリのjavascriptラッパーを作成した方法を詳細に説明します。