Ajax対応.NETコンポーネント「LiveControls 1.0J」でWebページを作る

LiveControls 1.0Jでタイマーを使ったWebページを作る

タイマーを使った処理

　LiveControlsには、LiveTimerというTimerコントロールが同梱されています。このコントロールは、WindowsフォームのTimerコントロールと同じように使うことができ、Intervalプロパティで設定したミリ秒単位でTickイベントを発生します。

　このコンポーネントを使うと、簡単にWebページにアニメーション効果を組み込むことができます。もちろん、Ajax対応のコンポーネントですから、アニメーションの部分だけ更新されるスムーズな処理ができあがります。

　ここでは、簡単な例としてLiveImageコンポーネントをページの横方向に移動させるアニメーションをWebページに組み込みます。

LiveTimerの操作

　LiveTimerは、Tickイベントの発生頻度をIntervalプロパティに設定します。値はミリ秒です。タイマーの開始はStartメソッドを実行します。タイマーの停止はStopメソッドで行います。

　このプログラムでは、Intervalプロパティを500ミリ秒に設定し、LiveButtonでタイマーの開始と停止を行います。

Visual Basic

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    LiveTimer1.Interval = 500
End Sub

Protected Sub LiveButton2_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles LiveButton2.Click
    If Me.LiveButton2.Text = "開始" Then
        LiveTimer1.Start()
        Me.LiveButton2.Text = "停止"
    Else
        LiveTimer1.Stop()
        Me.LiveButton2.Text = "開始"
    End If
End Sub

C#

protected void Page_Load(object sender, EventArgs e)
{
    LiveTimer1.Interval = 500;
}

protected void LiveButton2_Click(object sender, EventArgs e)
{
    if(LiveButton2.Text == "開始"){
        LiveTimer1.Start();
        LiveButton2.Text = "停止";
    }else{
        LiveTimer1.Stop();
        LiveButton2.Text = "開始";
    }
}

Tickイベントでの処理作

　Tickイベントでは、LiveImageコンポーネントのLeftプロパティを増加させていきます。また、「リセット」ボタンでLeftプロパティに「10」を代入すると、スタートの位置に戻ります。

Visual Basic

Protected Sub LiveTimer1_Tick(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles LiveTimer1.Tick
    Dim x As Integer = Me.LiveImage1.Left.Value

    x = x + 10
    Me.LiveImage1.Left = x
End Sub

Protected Sub LiveButton3_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles LiveButton3.Click
    Me.LiveImage1.Left = 10
End Sub

C#

protected void LiveTimer1_Tick(object sender, EventArgs e)
{
    double x = LiveImage1.Left.Value;

    x = x + 10;
    LiveImage1.Left = (System.Web.UI.WebControls.Unit)x;
}

protected void LiveButton3_Click(object sender, EventArgs e)
{
    LiveImage1.Left = 10;
}

　このように、Tickイベントハンドラの使い方は、VS標準コントロールのTimerとまったく同じで、WebページもWindowsフォームと同じ感覚でプログラミングできます。

　そして、Ajax対応なので、アニメーション中はページ全体がリロードさせませんから、アニメーションの部分だけスムーズに再描画されていきます。このような処理は、Ajaxならではの処理と言えるでしょう。

LiveImageコントロールだけが再描画されるので、画面のちらつきもなくスムーズなアニメーションを表示できる

まとめ

　実際に使って（または動作させて）みれば、Ajax対応コンポーネントの便利さは分かると思います。

　特に、Ajaxを意識せずに普通にコンポーネントをWebページに配置するだけでこの恩恵を受けられるのは、WebデザイナーやWebソリューション開発ベンダーにとっては大きな効果を発揮するものと思っています。

参考記事

• LiveControls 1.0J オンラインデモ