RadPHP XEのQMainMenuコンポーネントとQPopupMenuコンポーネントを使ってみた(前編)

Components #3 – QMainMenu and QPopupMenu」を参考に、QMainMenuとQPopupMenuを使ってみました。

最初に「Team Japan » RPCL(RadPHP Component Library) の最新版について」を参考にして、RPCLの最新版を導入します。
導入方法は簡単です。最新版をダウンロードして、ファイルを差し替えるだけです。

RadPHP XEに標準で搭載されているQMainMenuコンポーネントにはImagesプロパティがありません。
そのため、メニューに画像を設定することができませんでした。
最新版の導入は簡単にできますので、最新版に更新することをお勧めします。

RadPHP XEを起動し、メニューの「ファイル」-「新規作成」-「RPCLアプリケーション」を選択して、新しいプロジェクトを作成します。

ツールパレットから「QMainMenu」を選択して、フォームに配置します。

メニューの項目を編集します。
次のようなメニューを作成します。

ファイル─編集─ヘルプ
├開く
└閉じる

QMainMenu1を選択して、オブジェクトインスペクタのプロパティにあるItemsプロパティのボタンを押します。

「Items Editor」画面が表示されます。

「New Item」ボタンを押し、新しい項目を追加します。

Text欄に項目名を入力します。

「ファイル」「編集」「ヘルプ」の項目を作成します。

メニューの「ファイル」の下に項目を追加します。
「ファイル」を選択し、「New SubItem」ボタンを押します。

Text欄に項目名を入力します。

「開く」「閉じる」の項目を作成します。

「OK」ボタンを押し、登録します。

メニューの「実行」-「実行」を選択して実行します。

メニューバーが動作しているところを確認します。

RadPHP XEに戻ります。

メニューに画像を表示します。
ツールパレットからImageListを選択し、フォームに配置します。

オブジェクトインスペクタからImagesプロパティのボタンを押します。

「ImageList Editor」画面が表示されます。

「Load」ボタンを押し、メニューに表示する画像を開きます。

「ImageList Editor」画面に選択した画像が登録されます。

「OK」ボタンを押します。

オブジェクトインスペクタでQMainMenu1のImagesプロパティのボタンを押します。

メニューの「開く」「閉じる」の「Image Index」を編集し、ImageListに登録した画像の「Key/ID」を指定します。

「OK」ボタンを押します。

オブジェクトインスペクタでQMainMenu1のImagesプロパティを「ImageList1」に設定します。

メニューの「実行」-「実行」を選択して実行します。

メニューに画像が表示されます。

RadPHP XEに戻ります。

メニューをクリックしたときのイベントを追加します。

オブジェクトインスペクタのQMainMenu1のイベントタブでOnClickイベントを追加します。

QMainMenu1Click関数が作成されます。

QMainMenu1Click関数の処理を記述します。

function QMainMenu1Click($sender, $params)
{
  var_dump($params);
}

メニューの「実行」-「実行」を選択して実行します。

メニューの「開く」「閉じる」をクリックします。

「開く」をクリックしたときの出力。

array
  'tag' => string '0' (length=1)

「閉じる」をクリックしたときの出力。

array
  'tag' => string '0' (length=1)

メニューのどの項目が選択されたのかわかりません。
区別できるようにします。

オブジェクトインスペクタでQMainMenu1のItemsプロパティのボタンを押します。

「開く」「閉じる」のTag欄にそれぞれ「1」「2」を設定します。

「OK」ボタンを押します。

メニューの「実行」-「実行」を選択して実行します。

メニューの「開く」「閉じる」をクリックします。

「開く」をクリックしたときの出力。

array
  'tag' => string '1' (length=1)

「閉じる」をクリックしたときの出力。

array
  'tag' => string '2' (length=1)

Tagの値が引数で渡されていることが確認できます。

これで、どのメニューの項目が選択されたか区別できるようになりました。

JavaScriptでメニューが選択されたときの処理を記述します。

オブジェクトインスペクタのQMainMenu1のJavaScriptタブでOnClickイベントを追加します。

QMainMenu1JSClick関数が作成されます。

関数の処理を記述します。

function QMainMenu1JSClick($sender, $params)
{
    ?>
    //begin js
    tag=event.getTarget().tag;
    alert(tag);
    //end
    <?php
}

メニューの「実行」-「実行」を選択して実行します。

メニューの「開く」「閉じる」を選択します。

「開く」をクリックしたとき、Tagの値である「1」が出力されます。

「閉じる」をクリックしたとき、Tagの値である「2」が出力されます。

次回に続きます。

コメント

  1. Pingback: RadPHP XEのQMainMenuコンポーネントとQPopupMenuコンポーネントを使ってみた(後編) « 山本隆の開発日誌

コメントを残す

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

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