かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

LightSwitchのHTML Clientで時間のかかる処理をやる方法+その間プログレスリングを出す方法

LightSwitchのHTML Clientのリファレンスがほしいと思う今日この頃です。今日は、時間のかかる処理をやる方法と、その間にプログレスリングを出す方法をちょろっとやってみました。
とりあえず、時間のかかる処理はPromiseというやつを使うみたいです。どんなものかというとここら辺を見てみるといいかも?

上のリンクは二年くらい前の記事になるので古いかも。LightSwitchにはWinJS.Promiseというのがあるのから察するにWindows ストア アプリあたりからここらへんの実装もってきてそうなので下のリンクのほうが参考になりそう。

やってみよう

とりあえず5秒くらいかかる処理をやってみようと思います。5秒かかる処理はsetTimeoutで簡単に実装してみました。ボタンクリックのときの処理に以下のような感じのコードを書きます。

myapp.Browse.ShowProgress_execute = function (screen) {
    // promiseOperationで時間のかかる処理を開始する
    msls.promiseOperation(function (op) {
        setTimeout(function () {
            // コールバックの引数のcompleteを呼ぶと処理完了
            // 0-100くらいの値を結果として返す
            op.complete(Math.random() * 100);
        }, 5000);
    }).then(function (result) {
        // 後続の処理はthenで繋げる。引数にcompleteで渡した引数が入ってる。
        msls.showMessageBox(result);
    });
};

ボタンを押して5秒くらいたつとメッセージボックスにランダムな数字が表示されます。
f:id:okazuki:20130816123155j:plain
お手軽ですね。

処理中であることを伝えたい

ということで、時間のかかる処理をやってるのはいいのですが処理してる間何もユーザーにフィードバックがありません。ということで処理中であることを表すプログレスリングを表示する方法をやってみました。
これはmsls.showProgressという、ズバリなメソッドがあって、この引数にPromiseを渡してやれば、Promiseの処理が終わるまでの間画面をブロックしてプログレスリングを出してくれます。
ということで、さっきの処理に追加するとこんな感じです。

myapp.Browse.ShowProgress_execute = function (screen) {
    var promise = msls.promiseOperation(function (op) {
        setTimeout(function () {
            // 0-100くらいの値を結果として返す
            op.complete(Math.random() * 100);
        }, 5000);
    }).then(function (result) {
        msls.showMessageBox(result);
    });
    // プログレスリングっぽいのだして
    msls.showProgress(promise);
};

こうすると5秒間以下のような感じの画面になります。
f:id:okazuki:20130816123652j:plain