RadPHP XE(RPCL Rev.286以降)でAjaxの処理中だけアニメーションGIFを表示する方法

RadPHPのRPCLは、Rev.286でxajaxのバージョンが最新の 0.5 にアップデートされています。

xajax 0.5を使ってAjaxの処理中だけアニメーションGIFを表示する方法を紹介します。

※この記事の開発環境は RPCL Rev.290 を使っています。

(1)画面にButton(Name=Button1)とImage(Name=Image1)を配置します。

(2)Image1のImageSourceプロパティにアニメーションGIFのファイル名をセットします。

(3)PageのUseAjaxプロパティをtureに変更します。

(4)Button1のButtonTypeプロパティをbtNormalに変更します。

(5)Button1のJavascriptイベントOnClickに「Button1JSClick」というイベントハンドラを割り当てます。

function Button1JSClick($sender, $params)
{
  echo $this->Button1->ajaxCall('ajaxtest');
  ?>
  //begin js
  return false;
  //end
  <?php
}

(6)PHPコードにAjaxとして処理するコード「function ajaxtest($sender, $params)」を実装します。

function ajaxtest($sender, $params)
{
  for ($i=1; $i <= 1000000; $i++)
  {
    ;
  }
}

(7)Image1のイベントOnAfterShowに「Image1AfterShow」というイベントハンドラを割り当て、Image1を最初から非表示にするJavaScriptコードを記述します。

function Image1AfterShow($sender, $params)
{
  echo "<script type='text/javascript'>";
  echo "xajax.$('Image1').style.display='none';";
  echo "</script>";
}

(8)PageのイベントOnAfterShowFooterに「Unit1AfterShowFooter」というイベントハンドラを割り当てます。

function Unit1AfterShowFooter($sender, $params)
{
  echo '<script type="text/javascript">';
  echo "xajax.callback.global.onRequest = function() {xajax.$('Image1').style.display = 'block';}\n";
  echo "xajax.callback.global.beforeResponseProcessing = function() {xajax.$('Image1').style.display='none';}\n";
  echo '</script>';
}

(9)Webブラウザで実行し、Button1を押してAjaxの処理を実行します。

処理が終了すると、Image1は再び非表示に戻ります。

処理中のアニメーションGIFは「処理中アニメアイコン フリー|無料素材倶楽部」の素材を使用させていただきました。

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください