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は「処理中アニメアイコン フリー|無料素材倶楽部」の素材を使用させていただきました。
参考サイト