初心者の憂鬱:RibbonBar を試してみた!

RibbonBar

明けましておめでとうございます。サポート部の Yama-chan です。いつも「初心者の憂鬱」シリーズを読んでいただき、ありがとうございます。

新しい年を迎え最初のブログとして、PowerBuilder の新しい RibbonBar 機能についてご紹介いたします。


はじめに

表計算ソフトウェアと言えば、Microsoft の万能な Excel を知らない方はいないでしょう。画面のツールバーボタンがビジュアルでとても分かりやすい。アイコンをパッと見ただけでどんな機能なのか、分かるようになっています。

excel

実は、PowerBuilder 2019 R3 から RibbonBar 機能が提供され、Excel のようなビジュアルで分かりやすいボタンが利用できるようになりました。

今回は RibbonBar 機能の LargeButton を例に、定義から実装までの流れを一通りご紹介いたします。

内容は以下のとおりです。

  • RibbonBar の構成説明
  • RibbonBar の作成方法
  • RibbonBar の実装方法

それでは、順番に見ていきましょう!


RibbonBar の構成説明

RibbonBar はカテゴリー、パネル、コントロールから構成され、コントロールとして、LargeButton、SmallButton、ComboBox、CheckBox などが利用できます。その他、メニューに対応した ApplicationButton も利用できます。カテゴリーはタブのような見た目になっていて、以下の図では Home、Workspaces、View がカテゴリーとして構成されています。

Category

パネルはボタンをグループ化して、グループに対してタイトルを付けることも可能です。以下の図では Tabs、Boards、Actions、Print がパネルになっています。

Panel

なお、RibbonBar の構成は XML ファイルによる定義と PowerScript で記述する方法がありますが、XMLで定義して ウィンドウの Open イベントなどで読み込み、使用するほうが分かりやすいので、今回は XML ファイルによる定義を例に実装方法について説明いたします。


RibbonBar の作成方法

今回は以下の図のような RibbonBar を定義し、「従業員一覧」ボタンに対応するユーザーイベントを作成しバインドします。ユーザーイベントの処理としては従業員データを読み込み、データウィンドウに表示するようにします。

Largebutton

PowerBuilder 2019 R3 には RibbonBar を作成するために RibbonBar Builder が提供されており、メニューの [ツール] → [RibbonBar Builder] を選択することで起動できます。以下の図を参照。

template

RibbonBar は XML を使用して定義します。はじめて利用される方はどのように XML を書いたらいいのか分からないと思います。上の図のように「テンプレートを開く」ボタンをクリックすると、デフォルトで用意されているテンプレートを読み込めますので、参考にすると良いでしょう。

今回はテンプレートを参考にして、以下の XML ファイルを定義しました。

XML ファイルを定義した瞬間、ボタンなど XML の定義内容がリアルタイムに確認できるので、とても便利です。RibbonBar Builder にはこのようにプレビュー機能が実装されています。

ribbonbar.xml

設定する情報は以下となります。

カテゴリー Home
パネル 基本情報

パネル内に 5 つの大きいボタンが定義されており、そのうちの 1 つのボタンで使用されている情報は以下となります。

Text 従業員一覧 ボタンに表示するテキスト
PictureName EmployeeBig! ボタンに表示する画像を指定する

“EmployeeBig!” のように組み込みで用意されているボタンもあるので、画像を作成しなくてもすぐに利用できます。
Enabled true ボタンの [有効/無効] を指定する
Clicked ue_ButtonEmployeeClicked ボタンにバインドするユーザーイベント名を指定する

組み込みの画像は、PictureName にカーソルがある状態でツールバーの [画像を選択] ボタンをクリックすることでダイアログボックスが表示されるので、そこから選択することができます。

select a picture

ボタンに表示される画像ですが、カスタマイズで作成されたものを使用でき、LargeButton の画像は 32 * 32 ピクセルで、SmallButton は 16 * 16 ピクセルの画像が使用できます。以下のように PictureName として画像ファイル名を指定すれば利用可能です。

<LargeButton Text="従業員一覧" PictureName="custompicture.png"  Enabled="true" Clicked="ue_ButtonEmployeesClicked" />

定義が完了しましたら、メニューの [ファイル名を付けて保存] を選択し、ファイル名 : ribbonbar.xml で保存します。保存先はプロジェクトと同じフォルダーにします。

ribbonbar.xml の内容 :

<RibbonBar BuiltinTheme="0" Font="FaceName:Tahoma; FontCharSet:ansi!; TextSize:12">
  <RibbonItems>
    <Categories>
      <Category Text="Home" Enabled="true" Tag="Home" Visible="true">
        <Panel Text="基本情報" PictureName="BoardSmall!" Enabled="true" Tag="Boards" Visible="true">
          <LargeButton Text="従業員一覧" PictureName="EmployeeBig!"  Enabled="true" Clicked="ue_ButtonEmployeesClicked" />
          <LargeButton Text="製品一覧" PictureName="ProductsBig!" Enabled="true" Clicked="ue_ButtonProductsClicked" />
          <LargeButton Text="注文一覧" PictureName="OrdersBig!" Enabled="true" Clicked="ue_ButtonOrdersClicked" />
          <LargeButton Text="帳票" PictureName="ReportsBig!" Enabled="false" Clicked="ue_ButtonReportsClicked" />
          <LargeButton Text="Tasks" PictureName="TasksBig!" Clicked="ue_ButtonTasksClicked" />
        </Panel>
      </Category>
    </Categories>
  </RibbonItems>
</RibbonBar>

なお、アプリケーションの配布時に作成した XML ファイルおよび画像ファイルも実行ファイルと一緒に配布することを忘れないようにしましょう!

ちなみにデフォルトではプレビューが下の方に表示されますが、私は上に表示されたほうが見やすいので、設定でプレビューを上に表示するようにしました。設定方法はツールバーの [オプション] メニュー (歯車のアイコン) をクリックし、表示されたダイアログ内の[プレビューウィンドウをトップに配置]にチェックを入れます。以下の図を参照してください。

view on top

RibbonBar の実装方法

今までの操作で RibbonBar の準備が完了したので、あとはアプリに実装するだけです。以下の3ステップで実装可能です。

ステップ 1

メニューの [挿入] → [コントロール] → [RibbonBar] を選択して、ウィンドウ上に RibbonBar を配置します。

Add a Ribbonbar

RibbonBar コントロールの名前は rbb_1 とします。

ステップ 2

RibbonBar コントロールを配置したウィンドウの open イベントに以下のコードを追加します。

rbb_1.ImportFromXMLFile ("ribbonbar.xml")

上記の一行を記述するだけで、RibbonBar コントロールに XML で定義したボタンを表示することができます。ただし、この時点では表示のみでボタンをクリックしても動作しません。

ステップ 3

RibbonBar コントロールに対して、XML で定義した ”ue_ButtonEmployeeClicked” ユーザーイベントを作成します。

ウィンドウ上の RibbonBar コントロールをダブルクリックするか、以下の図のように RibbonBar コントロールを右クリックして、表示された「スクリプト」メニューを選択します。

Open Script

以下の図のようにスクリプト編集画面でプルダウンメニュー内の新規イベントをクリックし新しいユーザーイベントを作成します。

Add a event

このユーザーイベントの名前を XML で定義した「ue_ButtonEmployeeClicked」に指定することで、XML で定義されている Clicked : “ue_ButtonEmployeeClicked” イベントにバインドされます。

チェックポイント:

ユーザーイベントは必ず、RibbonBar コントロールに作成するようにしましょう! 私ははじめにウィンドウにユーザーイベントを作成してしまい、RibbonBar のボタンを押してもイベントがトリガーされませんでした。。。 初心者ビルダーがよく間違ってしまいそうなミスですので、注意するようにしましょう!

イベントの処理内容は dw_1 の検索を実行するだけのシンプルな処理です。

user event script

チェックポイント:

ユーザーイベントに渡す引数の型と数ですが、バインドするコントロールやメニューのイベントによって異なっているので、注意するようにしてください。異なっていると正しく動作しないので、その時はマニュアルで確認するようにしましょう!

そういえば、PowerBuilder 2019 R3 の日本語翻訳ヘルプが公開されたので、ぜひダウンロードして活用するようにしてください。

では、IDE 上で実行してみましょう!

「従業員一覧」ボタンをクリックすると、以下の図のように従業員のデータが表示されました。

Result

まとめ

以上、簡単ではありますが、RibbonBar 機能について、定義から実装までの流れをご紹介しました。

みなさん、いかがでしたか?

いくつか、注意するポイントはありましたが、PowerBuilder の初心者でも今回紹介した手順で操作していただければ、RibbonBar 機能を実装できるようになります。PowerBuilder で用意されているテンプレートにいろんなボタンやメニューボタンの定義方法が記述されているので、みなさんもぜひいろいろとチャレンジしてみてください。 ビジュアルな分かりやすいボタンで、画面のイメージも新しくなりますので、ぜひ新しい開発案件で採用して、利用してみてください。

以上、Yama-chan でした!

テクニカルブログ 一覧を見る
PowerBuilder マイグレーション
PowerBuilderとは? ~デキる大人へ変身できる?ローコード開発ツール~