JavaFX WebView（HTML / JS）-Webプラクティスを使用してデスクトップアプリケーションを開発する

アプリケーションの基本的なUIフレームワークはJavaFXを選択しました。 JavaFXは素晴らしい仕事をしました。 同じ記事で、1つのJavaFXコンポーネントであるWebViewに集中したかったのです。



アプリケーション（COLTインターフェイス）を開発する際、UIコンポーネントの一部がJavaScript / HTMLで実装されている場合、開発者の間で人気が高まっているアプローチを使用しました。



HTML / JSベースのコンポーネントは、通常のJavaクラス、WebViewコンポーネントのインスタンスを含むHBoxまたは単なるペインを備えた通常のJavaFXコンポーネントです。

JavaFXでWebkitをインスタンス化し、HTMLをロードする方法

WebView webView = new WebView(); WebEngine engine = webView.getEngine(); engine.load(this.getClass().getResource("html/webview.html").toExternalForm())
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションでWebテクノロジーを使用して得たもの。

多数のターンキーソリューション

jQuery、D3は、ほぼすべてのタスクをカバーしています。 既製のソリューションが必要です-5分でGoogleで検索できます。 インターネット全体がインターフェース要素の類似物でいっぱいになっているのは素晴らしいことです。 そして、すべてがパブリックドメインにあります。 あなたはアイデアをのぞき見し、その実装を取ることができます。

安い

Javaでは、JS / HTMLで実装したものを書くのは難しいでしょう。



たとえば、このコンポーネントはパスを追加するためのものです。 基礎として、Tagのエンジンを使用し、徹底的に「ドッピング」しました。 それは非常にスマートで素晴らしいことでした。 「タグ」モードで編集することができ、それをダブルクリックすることで、テキストを簡単に操作できます。 クリップボードを操作します。







これに先立ち、以前のバージョンのインターフェイスでは、ugいリストビューを使用していました。 新しいファイルセットは、シンプルでコンパクト、モダンです。 機能を拡張する方法についてのアイデアがあります。



2番目の例はログビューです。







最初に、ListViewに基づいてコンポーネントを作成する必要がありました。 スキニングに関して特別な問題は発生しませんでしたが、それでもコンポーネントはユーザーによる実際の使用には適さないことが判明しました。 たとえば、ログをテキストとして選択することは不可能であり、一度に複数のブロックがあり、コンポーネントの実装がかなりの量のコードに溢れる恐れがありました。 HTMLコンポーネントは軽量で拡張可能です。 JavaFXはGPUを使用してDOMをレンダリングするため、コンポーネントの生産性は非常に高いことに注意してください。 ログ、フィルターなどで検索してコンポーネントを拡張する予定です。 これらすべてをJavaScript / CSSを使用して実装する予定です。



Java-UIがあまり得意ではないかもしれませんが、複雑な対話性を備えたJavaコンポーネントを書くことは本当に困難でした。 既製のコンポーネントが必要な場合、「グーグル」できる例-はい、すべてが簡単でシンプルです。 「バインド」によるデータとビューのバインドは、非常にシンプルで使い慣れています（以前の経験はAdobe Flexです）。 しかし、ドキュメントに記載されている標準的なケースを超えたものになると、「レビュー」に時間がかかりすぎました。



次のスキームを開発しました。JavaFXコンポーネントを使用してそれを実行しようとしています。「壁にぶつかる」または実装が不必要に複雑な場合は、HTMLで記述します。 このアプローチにより、開発が大幅に加速されました。

クロスプラットフォーム

JavaFXのWebviewエンジンはWebkitです。 どのプラットフォームでも同じように動作します。 クロスプラットフォームにはほとんど時間を費やしていません。

Javascriptブリッジ

Java-JavaScriptの束、それらの間のブリッジにより、JavaからJavaScriptコードを呼び出すだけでなく、HTMLからJavaクラスメソッドを呼び出すことができます。 Javaコードの簡単な例：

 private void clear() { JSObject windowObject = (JSObject)webView.getEngine().executeScript("window"); windowObject.call("test", new ArrayList(1, 2, 3)); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、データを取得してArrayList javaメソッドを呼び出すこのJavaScriptコード-

 function test(list){ console.log("list.size() - " + list.size();//3 console.log("list.get(0) - " + list;//1 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もちろん、この例は完全に現実的な合成ではありませんが、メソッドが呼び出されてデータが受信されることは明らかです。



htmlをロードするときに、アプリケーションへのリンクをWindowオブジェクトに直接追加できます。

 JSObject windowObject = (JSObject) webView.engine.executeScript("window"); windowObject.setMember("app", this);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScriptコードからJavaメソッドを呼び出す-

 app.addData($("my-input").val());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

より適切な（より安全な）アプローチは、Java環境でアクセスを制限し、JavaScriptがアプリケーションで「許可された」メソッドのみを呼び出すことを許可する特別なオブジェクトを作成することです。

 windowObject.setMember("app", new JSBridge(){ public myMethod(){ MyApp.this.myMethod(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JS「アラート」を介したバンドルの別の例。 「ロード」html-アプリケーションの完全初期化をキャッチする必要がありました。 他のすべての方法はそれほど信頼できませんでした。 私たちは何をしました。



JavaScriptでjqueryを使用して通常どおり：

 $(function(){ alert("command:ready"); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Javaでは、webview.engineに「onAlert」ハンドラーを追加しました。これで、HTMLが確実にロードおよび初期化されることがわかりました。

 engine.onAlert = new EventHandler<WebEvent<String>>() { @Override void handle(WebEvent<String> event) { if("command:ready".equals(event.getData())){ //TODO: initialize } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードの再利用

モバイル開発用のコンピューターのアプリケーション用に作成したコードを再利用する予定です。 モバイルアプリケーション（objective-c / java）では、ほとんどの機能が用意されているWebviewに基づいてコンポーネントも作成します。

JavaFXでHTML / JSを操作するときに、どのような困難に遭遇しましたか？

最初のもの。 ドキュメントのロードライフサイクル。 メソッドは、ページが完全にロードされた後にのみJSで呼び出すことができます。ドキュメントでは、Javaでページ状態が変化したイベントを追跡する方法を提案しています。 このアプローチは非常にバグが多かった。 前に述べたように、html側での「ロード」イベントの束とJava側での「アラート」のインターセプトにより、この問題は解決しました。



私たちの血を飲んだ2番目の問題は、同時にwebviewを持つ異なるコンポーネントのいくつかのJavaScript関数の呼び出しの不具合です。 さらに、このようなバグはごく最近発生し、JavaFXのWebkitエンジンに追加された最適化に非常に似ています。 いずれの場合でも、JavaScriptの無限再帰に関するエラーを文字通りゼロから取得できます。 この問題は非常に簡単に解決されます-Platform.runLater（）を使用してJavaからのJavaScript呼び出しをラップします。



3番目の問題。 デバッグとロギング。

作業の最初の段階で、プロトタイピングがあり、HTML / JSのみで作業する場合、ブラウザーで簡単にテストできます。 Javaとの統合の段階で、適切な環境なしにコードが機能しなくなるだけです。 また、JavaScriptの機能をテストするために、Javaアプリケーションの構築をますます始めています。 また、Javaアプリケーションのビルドとその起動は、数秒待っています。 このような長い負荷を避け、時間を無駄にしないためにどのような手法を使用しましたか？



シンプルで明白なlet-キーの組み合わせを使用してページの「リロード」を追加します。 修正されたHTML / CSS / JS-F5キーを押した-WebViewコンテンツがリロードされました：

 $(document).keydown(function (e) { if(e.keyCode == 116 /*F5*/){ location.reload(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、簡単な「更新」に加えて、ログを表示する必要があります。

かなり簡単な解決策は、FireBug Liteを追加することでした-

 <script type='text/JavaScript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてもちろん、アプリケーションが「呼吸」し、HTML / JSのライブコーディングを獲得するとすぐに、COLTを使用してCOLTを開発し始めました。 現時点では、アプリケーションの機能はほとんどの場合をカバーしています-FireBug Liteはもう必要ありません。 ログ、ライブアップデート、リモートテスト、ライブコーディング。 私たちの意見では、ライブコーディングはデバッグに取って代わることができますが、ユーザーからの質問があり、「ブレークポイントを使用した実際のデバッグ」も台無しにします。



接続方法 次のコードをhtmlドキュメントに追加するだけです

 var url = "http://<address>:<port>/webview.html"; if (location.href != url) { location.href = url }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

urlは、COLTが変換されたページを起動するアドレスです。 彼と知り合うのは簡単です。 COLTプロジェクトを作成し、ページへのリンク（「メインドキュメント」）を指定してセッションを開始し、「緑色の稲妻」をクリックします。







ページがブラウザで開きます。 ページにコピーして、JSコードに貼り付けましょう。 ブラウザウィンドウを閉じます。 JavaFXアプリケーションを実行します。 ページのコンテンツを変更しようとしています。JavaScript、ライブコーディングはJavaFXアプリケーションで直接動作します。



新しいバージョンでは、設定の「詳細」ブロックで、このスニペットに特別なテキストフィールドを追加しました。 プロジェクトを開始せずに、このコードをCOLT設定から直接コピーできます。







COLTウィンドウにログが表示されます。 したがって、次回コルトがブラウザーを開かずにアプリケーションを起動する場合、ブラウザーではなくコンソールから起動するように選択できます。 このプロジェクトでは、実行構成IDEAの出力からテキストをコピーし、この呼び出しをCOLTコンソールランチャーに追加しました。











「緑の眉」をクリックすると、Javaアプリケーションウィンドウが起動します。



一般的に、HTMLからライブページへのリダイレクトアプローチは普遍的です。 たとえば、PhoneGapでもうまく機能します。 アプリケーションはモバイルデバイスで実行され（主なことは、デバイスが同じローカルネットワーク上にあることです）、再起動の必要なく更新が配信されます。 アクションの順序を覚えておく必要があります-WebViewがある場所ならどこでも適用できます。



コード変更イベントにハンドラー関数を追加することをお勧めします。

 //@code-update function live(){ console.log("live update"); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

@ code-update注釈は、AST変換によってインターセプトされ、リスナーがコード更新イベントに追加されます。



このようなハンドラーを使用する典型的なケースは、コード内の関数（つまり、通常FireBugコンソールに書き込むもの）を呼び出すことです。 アプリケーションが既に実行されているときに、値を変更したり、関数を呼び出したりできます。 保存されたコードを追加-コードが実行されます。

さらに、コードを停止することなく、「実行時」に値を知る必要があるデータを「トレース」して表示すると便利です。コンソールに表示するだけです。

グルーヴィー

また、この記事の範囲をやや超えて、私たちがプロジェクトの実装中に下した共有したい結論は、Javaよりも簡潔な言語でUIを書く方が良いということです。 これにはGroovyを使用し、非常に満足しています。 コードの量は10分の1に削減され、XMLとファイルシステムの処理も1桁簡素化されました。 バインド可能なプロパティを作成するAST変換、変換により、サービスをコントローラーにミックスし、単純なデータのバインド可能なラッパーを生成できました。 などなど。 呼ばれるものがなければなりません。 Groovy for JavaFXの使用については、 別の記事を書いています 。

計画

デスクトップアプリケーションの開発で使用したアプローチで、モバイル開発への適用を開始しました。 PhoneGap + COLTを使用しますが、実際にはJavaFX + HTML + COLTと違いはありません。



デスクトッププロジェクトで既に用意されているものの多くが既に蓄積されているため、別のプラットフォームではなくPhoneGapを選択しました。それらを再び別のプラットフォームに書き直すことは非現実的でした。 アプリケーションでPhoneGapを放棄する必要がある場合、アプリケーションの一部を「ネイティブ」に書き換えますが、HTML / JSで記述されたすべての機能を失うことはありません。 それらは異なる方法で開始するだけです。



Codeorchestra.comプロジェクトサイト