PR

 前回の予告どおり,今回はちょっと見た目が派手なものを作ってみましょう。Kylixには,使いやすく見た目のよいGUI(グラフィカル・ユーザー・インタフェース)を作成するための部品(コンポーネント)が多数用意されています。それらを組み合わせることだけで高級感のあるアプリケーションを作ることができるのです。

図1●イメージ・ビューワの完成予想図
 中でも,画像を扱うアプリケーションはそれだけで派手に思えますね。そこで,今回はイメージ・ビューワを作ります。その中でツール・バーやアイコンを持つメニューなども装備してみます。完成予想図を図1[拡大表示]に示します。

 表示されるイメージの大きさを特定できないので,もしアプリケーションのウインドウよりもイメージが大きい場合は,スクロール・バーをつけて全体が見えるようにしましょう。

 見た目は派手に見えますが,実はこのイメージ・ビューワ,前回の計算機アプリケーションよりもプログラム量は少なくて済むのです。さっそく作ってみましょう。

使用する部品を決めよう

 何はともあれ,Kylixを起動しましょう。設定を何も変更していなければ,新規のプロジェクトが開かれているはずですが,もしそうでなければ,一度プロジェクトを閉じてから新規アプリケーションを作成してください。

 まず,イメージを表示しなければなりません。イメージを自分で読み込んで描画まで行う処理を,一から作るのは大変です。しかしKylixには,イメージを表示するための部品がはじめから用意されています。コンポーネント・パレットの「Additional」グループにある「Image」コンポーネントがそれです。この「Image」コンポーネントは,イメージの大きさをいろいろ変えて表示することができますが,今回はイメージの大きさはそのまま表示しようと思います。しかし,もし画面からはみ出してしまうほど大きなイメージの場合は,そのままでは表示しきれませんね。

 そこで,大きなイメージはスクロール・バーをつけて表示し,全体を見えようにします。大きさを設計時に特定できないときには「Additional」グループにある「ScrollBox」コンポーネントを使ってスクロール・バーをつけることができます。言い方をかえると,「ScrollBox」は大きな部品の「のぞき窓」になるのです。これで大きなイメージもそのままの大きさで表示させることができます。

 次に,メニューを作ります。「Standard」グループになる「MainMenu」コンポーネントを使います。これはフォームの上部,タイトルバーの下に位置するメニューです。これは例えば「ファイル」→「開く」などサブメニューも持つことができるので,一般的なメニューはこれで満足できるでしょう。

 最近のアプリケーションは,メニューだけでなく,ある機能を呼び出すためのボタン群を持つツール・バーも多く使われています。これは「Common Controls」グループの「ToolBar」コンポーネントで実現できます。ツール・バー内のボタンは,この「ToolBar」コンポーネントで作成できるので,ボタンを新たに用意する必要はありません。

 今回はイメージ・ビューワですので,どのイメージを表示するかを選択できなければなりません。イメージの選択とは,ファイルを選択することです。一般的な Windowsアプリケーションでは「ファイルを開く」ダイアログが多く使われますね。Kylixでは,この「ファイルを開く」ダイアログが「Dialogs」グループの「OpenDialog」コンポーネントとしてはじめから用意されています。これを使えば,簡単にWindowsライクな「ファイルを開く」ダイアログを実現できます。

 このほかにも,いくつかここにあげていない部品を使うことになりますが,それらは必要になったときに解説することにします。

部品を配置しよう

 では,部品をフォームに配置して画面を作っていきましょう。まず「ScrollBox」コンポーネントを配置します。大きさと位置は適当でかまいません。

 次に「Image」コンポーネントですが,これは「のぞき窓」になる「ScrollBox」の中に置かないとスクロールバーを出すことができません。よって,コンポーネント・パレットから「Image」コンポーネントを選択した後,フォーム上の「ScrollBox」コンポーネントをクリックします。すると,「Image」コンポーネントが「ScrollBox」コンポーネントの中に配置されます。配置後に「Image」コンポーネントをドラッグして移動させると,「ScrollBox」コンポーネント内でしか移動できないことがわかります。ここでは「Image」コンポーネントの位置を「ScrollBox」コンポーネント内の最も左上にしておいてください。

 次にメニューとツール・バーも配置しましょう。これらのコンポーネントは,フォームの上部,タイトルバーの下に勝手に配置されてしまいます。しかもドラッグして移動もできません。「MainMenu」コンポーネントは,名前のとおり一般的なメニューを実現するためのコンポーネントですので,位置が固定されているのです。「ToolBar」コンポーネントについても基本的に同様で,配置直後の初期位置が上部になっています。

図2●各コンポーネントをフォーム上に配置する
 最後に「ファイルを開く」ダイアログです。これは実行時にのみ表示されるものですが,部品として画面の作成時にフォーム上に配置しておきます。上記の手順で「OpenDialog」をフォーム上に配置しておきます。実行時にアイコンは表示されませんので,位置はどこでもかまいません(図2[拡大表示])。

プロパティを設定しよう

 イメージ・ビューワでは,できるだけ広い領域でイメージを表示したほうが便利です。フォームの大きさが変化しても,常にそのフォームいっぱいに「ScrollBox」コンポーネントが表示されるようにしましょう。以下の手順を行ってください。

(1)「ScrollBox」コンポーネントをクリックして選択する
(2)オブジェクト・インスペクタ内の「Align」項目の右側をクリックし,プルダウンリストを出す
(3)「alClient」を選択する

 これで,フォームの大きさが変化しても「ScrollBox」コンポーネントの大きさが自動的にフォームいっぱいになります。

 今回の「Align」や,前回説明した「Button」コンポーネントの「Caption」のように,コンポーネント自身が持つ自分の状態,すなわちコンポーネントの属性のことを「プロパティ」と呼びます。各コンポーネントは,独自にさまざまなプロパティを持ち,それを変えることによってコンポーネントの状態を変化させることができます。オブジェクト・インスペクタは,コンポーネントのプロパティを設定するためのウインドウなのです。

図3●「BorderStyle」プロパティを「bsNone」にすると,「ScrollBox」コンポーネントの枠線が表示されない
 ではついでにいくつかプロパティを変更しましょう。まず「Image」コンポーネントのプロパティを変更します。フォーム上で「Image」コンポーネントを選択するのは大変なので(なにせ見えませんから),オブジェクト・インスペクタの上にあるプルダウン・メニューを出して,その中から「Image1」を選択してください。これで「Image」コンポーネントのプロパティ一覧が出てきますので,その中の「AutoSize」プロパティを「True」に変更してください。この「AutoSize」プロパティは「Image」コンポーネントが表示するイメージの大きさに「Image」コンポーネント自身を合わせるかどうかの設定です。次に「ScrollBox」コンポーネントをオブジェクト・インスペクタの上にあるプルダウン・メニューを出して「ScrollBox1」を選択し,そのプロパティ一覧の「BorderStyle」プロパティを「bsNone」にします。これは枠線を表示しない設定です(図3[拡大表示])。

メニュー,ツール・バーを作成しよう

 ここまでで,イメージを表示する部品についての設定が終わりました。次にイメージを選択するための部品について設定していきましょう。

 まずはツール・バーを設定しましょう。ツール・バーにボタンを追加しなければなりません。以下の手順を行ってください。

(1)ツール・バーをクリックして選択する
(2)ツール。バー上で右クリックしてポップアップメニューを出す
(3)一番上の「ボタン新規作成」を選択する

 すると,ツール・バー上にボタンが1つ作成されます。しかし残念なことに,このボタンには何のイメージも描かれていません。せっかくですから,イメージをボタン上に描画したいですね。しかしツール・バーとその上にあるボタンに直接イメージを貼り付けることはできません。では,どのようにするのでしょうか。

 実は,他のコンポーネントからイメージを「提供」してもらうのです。そのイメージを提供するコンポーネントは「Common Controls」グループにある「ImageList」コンポーネントです。これはイメージを複数持つことができ,それぞれに番号を振って管理することができます。そして,ツール・バーなどのイメージを使うコンポーネントに「このImageListを使います」と設定すると,「ImageList」が持っているイメージがボタンに表示されます。このときに「このボタンにはImageList内の1番目のイメージを使う」という設定ができます。

 では「ImageList」コンポーネントを使ってみましょう。まずは,コンポーネント・パレット内の「Common Controls」グループにある「ImageList」コンポーネントをフォーム上に配置します。これは「OpenDialog」コンポーネント同様,実行時には表示されませんので,どこに置いてもかまいません。配置後,この「ImageList」コンポーネントをダブルクリックしてください。すると,イメージを登録することができるダイアログが表示されます。

 では,イメージを読み込むためのボタンや,メニューに貼り付けるイメージを登録しましょう。このダイアログにある「追加」ボタンを押します。するとファイル選択ダイアログが表示されます。今回は,Kylixをインストールしたときにサンプルとしてインストールされているイメージを使いましょう。以下のファイルを選択してください。

ユーザー・ホーム・ディレクトリ/Kylix/images/buttons/fileopen.bmp

図4●「イメージリスト」ダイアログでイメージを登録する
 すると何やら警告メッセージが表示されました。これは「fileopen.bmp」ファイルは2つの異なるイメージで構成されているので,分割して2つのイメージとして扱ってよいかどうかを聞いているのです。ここで「はい」ボタンを押すと,イメージが2つ表示され,それぞれ「0」「1」と番号が振られます。2つ目は要りませんので,「1」のイメージをクリックして選択し,「削除」ボタンを押して削除してください。その後「Ok」ボタンを押してこのダイアログを閉じましょう(図4[拡大表示])。

 イメージの登録が済んだところで,ツール・バーを設定しましょう。以下の手順を行ってください。

(1)「ToolBar」コンポーネントをクリックして選択する
(2)オブジェクト・インスペクタ内から「Images」プロパティを選択する
(3)右側から「ImageList1」を選択する

 これだけでボタンに先ほど登録したイメージが表示されます。

 次に,メニューを作成しましょう。「ファイル」メニューをまず作成し,その中に「開く」項目を作りましょう。まずは「MainMenu」コンポーネントをダブルクリックしてください。メニュー・エディタ・ダイアログが表示されます。

図5●フォーム上に「ファイル」メニューが作成された
 このダイアログの左上に,一つだけ何も書いていないメニューがあると思います。そこをクリックして選択状態にしてから,「ファイル」と打ち込んでみてください。メニューにも反映されます。これで「ファイル」メニューが作成されたことになります(図5[拡大表示])。

 では「開く」メニューも作成したいところですが,ちょっとここで今回のイベント処理について考えてみます。

イメージを表示するアクションを作成しよう

 今回のイメージ・ビューワ・アプリケーションは,本質的には「イメージ・ファイルを開いて表示する」という処理だけです。これをもう少し細かく言うと,

(1)ファイル・ダイアログを表示し,ユーザーにファイルを選択させる (2)「Image」コンポーネントを使って(1)のファイルを表示する

となります。では,(1)のファイル・ダイアログを開くきっかけは何でしょうか。そうですね。メニューやツール・バーの操作がきっかけとなりますね。でもちょっとここで考えてみてください。メニューとツール・バーという異なった部品ですが,実際に行われる処理は同じです。

 Kylixのプログラミング言語であるObject Pascalではこの「イベント処理」についても部品として考え,使いまわす仕組みが用意されているのです。「ファイル・ダイアログを開き,選択されたイメージ・ファイルを表示する」という処理を「アクション」という単位で作成します。そして,メニューおよびツール・バーのそれぞれの「Action」プロパティに対して,この「アクション」を割り当てます。すると,メニューとツール・バーのどちらを用いても同じ処理を実行できます。

 では「アクション」を作成していきましょう。そのためには,コンポーネント・パレット内の「Standard」グループの一番右にある「ActionList」コンポーネントを使います。

 まずは「ActionList」コンポーネントをフォーム上に配置してください。その後以下の手順を行ってください。

(1)「ActionList」コンポーネントをクリックして選択する。

(2)オブジェクト・インスペクタ内の「Images」プロパティを「ImageList1」に変更する
(3)フォーム上の「ActionList」コンポーネントをダブルクリックして「ActionList」編集ダイアログを表示する
(4)左上にある「新規アクション」ボタンを押して,新規にアクションを作成する
(5)「Action1」をクリックし選択した状態にする
(6)オブジェクトインスペクタ内の「ImageIndex」プロパティを「0」に変更する
(7)オブジェクト・インスペクタ内の「Caption」プロパティを「開く」に変更する

図6●「ActionList」編集ダイアログでアクションを登録する
 これで「Action1」という名前でアクションが新規に作成されました(図6[拡大表示])。「ImageIndex」プロパティを設定したことにより,アクションにイメージも割り当てられています。

 しかしアクションを作成したからといってまだ何の処理も持っていませんので,このアクションに対応する処理を記述しましょう。では,「Action1」をダブルクリックし,ソースコード編集ウインドウを開き,リスト1のように記述してください。

 実際に記述するのは,(A)と(B)の部分だけです。簡単に解説しておきましょう。まず (A)は,「OpenDialog」コンポーネントの「Execute」関数を呼び出してファイル・ダイアログを表示させています。この「Execute」関数は「OK」ボタンが押されると Trueが返りますので,(B)が実行されます。(B)では「Image」コンポーネントの「Picture」プロパティを使っています。この「Picture」プロパティはTPicture型で,これの「LoadFromFile」手続きに先ほど表示した「OpenDialog」コンポーネントの「FileName」プロパティを渡して,選択されたファイル名のイメージを読み込ませています。その結果,フォームにイメージが表示されます。

 さあ,やっと最後です。今作成した「アクション」をメニューとツール・バーに割り当てましょう。以下の手順を行ってください。

(1)ツール・バー上に作成されているボタンをクリックして選択する
(2)オブジェクト・インスペクタ内の「Action」プロパティを「Action1」に変更する
(3)フォーム上の「MainMenu」コンポーネントをダブルクリックして,メニュー編集ダイアログを表示する
(4)「ファイル」メニューのすぐ下にある空のメニューを選択する
(5)オブジェクト・インスペクタ内の「Action」プロパティを「Action1」に変更する
(6)メニュー編集ダイアログを閉じる

(5)が終わった瞬間に,アイコン付きのメニューが作成されたことと思います。これで完成です。

実行しよう

図7●イメージ・ビューワの実行画面
 では実行してみましょう。「実行」ボタンを押すのでしたね。「ファイル」「開く」メニューでも,ツール・バー上のボタンでも同じ動きをすることが分かると思います。例えば,

ユーザー・ホーム・ディレクトリ/kylix/images/backgrnd/calendar.bmp

を開いてください。ちゃんとスクロール・バーが表示され,イメージを見ることができるでしょう(図7[拡大表示])。

 今回は「アクション」を作成してイメージ・ビューワを開発してみました。なんと,今回はソースコードをたったの2行しか書いていません。しかしこれだけのアプリケーションを作ることができるのです。しかもLinux上でですよ!

 最終回の次回は,簡単なテキスト・エディタを作成してみます。お楽しみに。