CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/05/29 14:00
目次

タイマーを使った処理

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

まとめ

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

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

参考記事

 


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ComponentZine(LiveControls)

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5