August 12, 2013 | Donald Carr

Sencha Desktop Packagerを利用すると既存のWebアプリケーションをネイティブデスクトップアプリケーションとしてデプロイできるようになります。ネイティブ環境とより深く統合できるように追加のJavaScript APIを提供して、アプリケーションを拡張できるようになりますし、あなたのコードや付属している資産を守るために暗号化デプロイを提供します。

当社では統合APIの範囲の拡張を続けています。このブログ投稿では Desktop Packager 1.2 release のリリースで導入した新たな Windowing API を紹介します。 このブログの内容はアプリケーションをデスクトップ環境に仕立て上げるためにに提供しているコアなAPIのセットを紹介した、Ariyaの “Using Native APIs in Sencha Desktop Packager” の論理的な続きになります。

Sencha Desktop Packagerを初めて使う方は 3分間の紹介ビデオ をご覧になって、30日間の トライアルエディション （Linux、Windows、OS X版があります） をダウンロードして、オンライン ドキュメンテーション をご覧下さい。

Windowの生成

Webアプリケーションとネイティブアプリケーションの一つの違いは、Webアプリケーションでは通常ブラウザの枠内にあるということです。Sencha Desktop Packagerではこの制限は存在しないので、アプリケーションが必要とするトップレベルのネイティブウィンドウをいくらでも生成できます。 そのウィンドウは、デコレートされたトップレベルウィンドウで、独立したWebコンテンツを含めることができ、それぞれの間でデータ共有をすることも出来ます。

これによりMDIスタイルアプリケーションの生成が容易になり、以前の ポスト で紹介されたテキストエディタなどでそのような機能を利用できることでしょう。 以前はできなかったの機能は、独立したコンテンツを完全にカプセル化しながら、各トップレベルのウィンドウが同じビジネスロジックを再利用できます。

オリジナルのエディタアプリケーションをちょっと変更するだけで、この機能を利用できます。すなわち、エディタをそれぞれのドキュメントに移動して、元のドキュメントでは単純にアプリケーションのメニューエントリーを生成するようにするだけです。エディタのウィンドウはオンデマンドで生成されます。エディタサンプルを拡張するには、単に既存のメニュー項目にウィンドウを生成するアクションを追加します。

1
2

var windowMenu = Ion.ui.mainWindow.menuBar.addMenu('&Window');
  windowMenu.addMenuItem('New', handleNewWindow, 'Ctrl+N');

次にhandleNewWindow関数を実装します。

1
2
3
4
5
6
7
8
9

function handleNewWindow() {
  var winID = uniqueID();
 
  var win = new Ion.ui.Window({ visible: true,
                                title:"Editor Window " + winID,
                                url: "editor.html"});
  win.setDimensions(400, 400);
  win.setPosition(200 + 50*winID, 200 + 50*winID);
}

このアクションの最終的な結果は、 それぞれのドキュメントに直感的に結びつけられた、 カスケードされたトップレベルのウィンドウのセットの生成です。

ウィンドウ間でデータを共有する

生成したウィンドウ間で情報を共有したいことはよくあることです。 そのような状況では、 dataメンバー が データの参照を取得しているそれぞれが変更があるかリスンして適切にレスポンスしたり、必要な時にデータ変更をプッシュしたりするチャンネルとして提供されます。

我々のテキストエディタのコンテキストでは、開いているドキュメントの内容のプレビューと最終更新日を追跡できるトップレベルドキュメントダッシュボードを実装するために利用できます。

それぞれの新しいエディタウィンドウを生成する度に、 各ウィンドウにonDataChangedイベントを登録し、ダッシュボードにコールバックさせます。

1
2
3
4

win.onDataChanged = function() {
  cell1.innerHTML = win.data.preview;
  cell2.innerHTML = win.data.timeStamp;
}

これを改良して、最後に保存されたファイル名などの、トップレベルウィンドウに必要なドキュメントに関する他の機能をリスンさせることも簡単にできます。

ウィンドウのサイズ変更制約を指定する

複数のウィンドウを提供されていますので、個別のサイズ変更を制限したくなります。 これはSencha Desktop Packager内で制限したいサイズ変更の限度とサイズ変更の動作を定義するサイジングのポリシーで実現します。

ウィンドウは通常好きな時にサイズ変更を行うことが許可されていますが、制限するのは簡単です：

1
2
3
4
5
6
7
8

var win = new Ion.ui.Window({ url: 'hello.html',
                              title: 'A Capable Window',
                              visible: true});
var policy = win.sizingPolicy;
policy.vertical = 'fixed';
policy.maximumWidth = policy.maximumHeight = 400; 
policy.minimumWidth = policy.minimumHeight = 100; 
win.setDimensions(500, 500);

上記のウィンドウでは縦のサイズが固定され、指定された最大・最小値の間で横幅のサイズ変更が可能となります。 最後に呼び出しているsetDimensionsの呼び出しては、サイズポリシーで決められた制限値を越えているため、ウィンドウは結果的に400 x 400に初期設定されます。

このような機能性があると、例えば全てのドキュメントの概要を表示する一覧表の大きさにドキュメントダッシュボードのサイズを合わせるできるます。実は上のスクリーンショットではそのようにしています。

クローズイベントへの反応

対応しているどのプラットフォームでも Sencha Desktop Packagerウィンドウを閉じようとすると、 closing イベント が生成されます。 これにより条件に基づいて閉じる動作に反応すしたり、インタセプトできます。 拡張したテキストエディタの場合では、データが損失する可能性があるかを調べて、エンドユーザーに警告を表示できます。

これを実現するのは簡単で、colosingイベントに次のようなonClose関数を接続するだけです。

1
2
3

function onClose() {
  return confirm('You may have unsaved data, do you wish to proceed?');
}

同じのclosingイベントに複数のものを接続できるため、トップレベルのドキュメントダッシュボードでそのドキュメントウィンドウのclosingを便利に追跡し反影できます。

まとめ

Sencha Desktop Packager 1.2で導入された機能を少し紹介しました。 このブログ投稿では新しいウィンドウAPIに集中しましたが、同時にいくつかの改善も導入されたので、それに関しても述べましょう。 Chromiumの安定版ブランチとの同等性を保つために Chromium 25リリース を採用したため、さまざまな機能やパフォーマンスが改善しました。 さらに、Window API作業の一部として、各ウィンドウでWebコンテンツにズームファクター(zoomFactor)の設定ができるようにしました。詳しくは Sencha Desktop Packager 1.2のリリースノート をご覧ください。 改善された部分がより詳しくリストアップされています。

このブログ投稿で紹介されたウィンドウ機能を直接さわってみたければ、 Sencha Desktop Packagerと同時に同梱している Windowing サンプル をご覧になって下さい。 そこではAPIを利用し、API利用の目的に対してより幅広く紹介しています。