クライアント側でグラフ・レイアウトを実行する場合、レイアウトの実行中にブラウザーのユーザー・インターフェースをブロックする危険性があります。レイアウトを Web Worker スレッドで実行するか、サーバー上でレイアウトを実行することにより、ブラウザーが停止しないようにすることができます。Web Worker によって
レイアウトされるグラフを表示するためには、クライアント・ブラウザーが HTML 5 Web Worker スレッドをサポートしている必要があります。(Web Worker スレッドは、最新の Chrome および Firefox ブラウザーではサポートされていますが、この情報の記載時点では、Internet Explorer ではサポートされていません。)
Web Worker スレッド・グラフ・レイアウトの場合、
標準の setNodeLayout および setLinkLayout の各メソッドを使用して、Graph インスタンスでレイアウト・アルゴリズムを構成します。performGraphLayout メソッドを呼び出す代わりに、
引数としてグラフを指定した WebWorkerLayout インスタンスを作成してから、
その layout メソッドを呼び出します。グラフ・レイアウトは、別のスレッドで非同期で実行されます。
メモ
すべてのマルチスレッド・アプリケーションと同様、アプリケーションは、非同期グラフ・レイアウト実行用に設計する必要があります。アプリケーションは、レイアウト実行中にグラフを変更してはなりません。さもないと、クライアント側で行われたすべての変更が、レイアウト完了時に上書きされます。
以下の例のように、グラフ・レイアウトを HTML 5 Web Worker スレッドで実行します。
var treeLayout = new ibm_ilog.graphlayout.tree.TreeLayout(); graph.setNodeLayout(treeLayout); var workerLayout = new ibm_ilog.graphlayout.WebWorkerLayout(graph); var deferred = workerLayout.layout();
WebWorkerLayout インスタンスに対する layout メソッドは、グラフ・レイアウトの実行完了を待つことなく、直ちに現在のスレッドに戻ります。ブラウザーのユーザー・インターフェースはアクティブのままで、アプリケーションは他の処理を継続することができます。
グラフ・レイアウトの実行が完了すると、新規のノード位置およびリンク形状が、グラフに対して自動的に適用されます。
Web Worker スレッドでグラフ・レイアウトを実行する場合、メイン・アプリケーション・スレッドから分離されているため、相当の初期化時間が必要です。分離されているということは、Web Worker スレッドでグラフ・レイアウト・アルゴリズム・コードおよび一定の Dojo コードを再ロードする必要があるということです。同じグラフ・レイアウト・アルゴリズムを複数回実行する場合、同じ WebWorkerLayout インスタンスを再使用することにより、後続のレイアウトでこの処理時間を短縮することができます。
メモ
WebWorkerLayout クラスは、ServerSideLayout クラスと使用面で類似していますが、レイアウトがブラウザーで実行されるため、Web サービス・コンポーネントを別にインストールする必要はありません。サーバー・サイド・グラフ・レイアウトに関する詳細については、サーバーでのグラフ・レイアウトの実行を参照してください。
コールバックの追加
WebWorkerLayout インスタンスに対する layout メソッドは、レイアウトの終了時にユーザーに通知するために使用できる dojo.Deferred オブジェクトを戻します。通知を提供するには、dojo.Deferred オブジェクトの addCallback メソッドを呼び出します。以下の例では、レイアウトの実行中にあるボタンを使用不可にし、レイアウトの終了時点でそのボタンを使用可能にします。
dijit.byId("layoutButton").attr("disabled", true); var deferred = workerLayout.layout(); deferred.addCallback(function(){ dijit.byId("layoutButton").attr("disabled", false); });
また、グラフ・レイアウトの実行時にエラーが発生した場合に通知されるようにするため、dojo.Deferred オブジェクトを使用することもできます。
レイアウト・エラーが通知されるようにするには、以下の例のように addErrback メソッドを呼び出します。
deferred.addErrback(function(e){ alert(e); dijit.byId("layoutButton").attr("disabled", false); });
Web Worker スレッドの停止
レイアウト実行は、WebWorkerLayout オブジェクトの stop メソッドを呼び出すことにより停止することができます。停止することによって、グラフを変更せずに Web Worker スレッドに割り込みが行われます。
workerLayout.stop();