YKLook説明書＞ YKLook用アプリの製作＞パネルによる画面構築

YKLook用アプリの最初の一歩＞最小のプログラム構成のプログラム例では、ラベルをウインドウに直接追加していますが、通常はそのような使い方はしません。
通常は以下のようになります。

ＧＵＩ部品を作成する
目的に合ったパネルを作成する
パネル内にＧＵＩ部品を配置する
パネルをウインドウに追加する

最初のプログラム例をこれに沿って書き直すと以下のようになります。

例	lab = YKLookLabel.new( '最初の一歩' ) pan = YKLookPanelFlow.new() pan.yk_add( lab ) yk_add( pan )

パネル自体もＧＵＩ部品のひとつです。
複数のパネルを組み合わせたり、パネルの中にパネルを配置することもできます。

各パネルの概要は以下のとおりです。

パネル名	概要
`YKLookPanelFlow`	ＧＵＩ部品を追加した順番に左から右へ、上から下へ配置
`YKLookPanelBox`	ＧＵＩ部品を縦一列（垂直方向）または横一列（水平方向）に並べる
`YKLookPanelGrid`	ＧＵＩ部品を縦横または縦一列または横一列にすべて同じ大きさで並べる
`YKLookPanelGridBag`	ＧＵＩ部品の縦と横のそれぞれの行と列のサイズを自由に指定できる
`YKLookPanelCard`	複数の表示を切り替える
`YKLookPanelQuint`	５分割された固有の区画に配置

以下、順に説明していきます。

YKLookPanelFlow は、ＧＵＩ部品を左から右へ横に並べます。
もしも部品を追加して置くだけの横幅が足りないときは、現在の横並びの段の下の段の左端に置きます。
このパネルは、ＧＵＩ部品の元の大きさをなるべく変更しないように配置します。

例

btn1 = YKLookButton.new( 'ボタン１' )
btn2 = YKLookButton.new( 'ボタン２' )
btn3 = YKLookButton.new( 'ボタン３' )
btn4 = YKLookButton.new( 'ボタン４' )
btn5 = YKLookButton.new( 'ボタン５' )
pan  = YKLookPanelFlow.new()
pan.yk_add( btn1 )
pan.yk_add( btn2 )
pan.yk_add( btn3 )
pan.yk_add( btn4 )
pan.yk_add( btn5 )
yk_add( pan )

この例では、五つのボタンが横に並びます。
左端が「ボタン１」で、一番右側が「ボタン５」です。
もしもパネルがボタン三つ分の横幅しかないときは、「ボタン４」は「ボタン１」の下に、「ボタン５」はその右横に並びます。

ＧＵＩ部品の整列方法を指定することもできます（右寄せ、左寄せ、中央）。
ＧＵＩ部品間に隙間を入れることもできます。

詳細はクラス解説 YKLookPanelFlow で説明していますが、YKLook を初めてお使いになる方は気にせずにこのまま下の項目へお進みください。

YKLookPanelBox は、ＧＵＩ部品を縦一列（垂直方向）または横一列（水平方向）に並べます。
どちらの方向に並べるかは、このパネル生成時の引数で指定してください。

例

btn1 = YKLookButton.new( 'ボタン１' )
btn2 = YKLookButton.new( 'ボタン２' )
btn3 = YKLookButton.new( 'ボタン３' )
pan  = YKLookPanelBox.new( 'x' )
pan.yk_add( btn1 )
pan.yk_add( btn2 )
pan.yk_add( btn3 )
yk_add( pan )

この例では、三つのボタンが横一列に並びます。
パネル生成時の引数を 'y' にすると、縦一列に並びます。

このパネルは、原則としては追加したＧＵＩ部品の元のサイズを維持しますが、場合によっては追加したＧＵＩ部品のサイズの横幅または高さのどちらか一方を自動的に変更することがあります。
具体的には以下のようになることがあります。

パネル生成時の指定	ＧＵＩ部品の状態
`'x'` または `'h'` 横（水平）方向	ＧＵＩ部品は横（水平）方向に左から右へ並べられる。このとき、ＧＵＩ部品のサイズの高さは、このパネル内のＧＵＩ部品の中で最も高さが大きいものに揃えられる。
`'y'` または `'v'` 縦（垂直）方向	ＧＵＩ部品は縦（垂直）方向に上から下へ並べられる。このとき、ＧＵＩ部品のサイズの横幅は、このパネル内のＧＵＩ部品の中で最も横幅が大きいものに揃えられる。

詳細はクラス解説 YKLookPanelBox で説明していますが、YKLook を初めてお使いになる方は気にせずにこのまま下の項目へお進みください。

YKLookPanelGrid は、ＧＵＩ部品を縦横または縦一列または横一列にすべて同じ大きさで並べます。

例

btn1 = YKLookButton.new( 'ボタン１' )
btn2 = YKLookButton.new( 'ボタン２' )
btn3 = YKLookButton.new( 'ボタン３' )
btn4 = YKLookButton.new( 'ボタン４' )
btn5 = YKLookButton.new( 'ボタン５' )
btn6 = YKLookButton.new( 'ボタン６' )
pan  = YKLookPanelGrid.new( 2, 3 )
pan.yk_add( btn1 )
pan.yk_add( btn2 )
pan.yk_add( btn3 )
pan.yk_add( btn4 )
pan.yk_add( btn5 )
pan.yk_add( btn6 )
yk_add( pan )

この例では、縦に二段、横に三つのボタンが並びます。
ボタンの大きさはすべて同じになります。
ＧＵＩ部品間に隙間を入れることもできます。

詳細はクラス解説 YKLookPanelGrid で説明していますが、YKLook を初めてお使いになる方は気にせずにこのまま下の項目へお進みください。

YKLookPanelGridBag クラスは、ＧＵＩ部品を縦横に並べます。
YKLookPanelGrid クラスに似ていますが、より柔軟な設定ができます。
縦と横のそれぞれの行と列のサイズは自由に指定でき、ＧＵＩ部品は複数行または複数列の領域に配置できます。

例

pf1 = YKLookPanelFlow.new()
pf2 = YKLookPanelFlow.new()
pf3 = YKLookPanelFlow.new()
pan = YKLookPanelGridBag.new()
pan.yk_add( pf1, [0,0,1,2] )  # 左端、１列分の幅と２行分の高さ
pan.yk_add( pf2, [1,0,1,1] )  # 右側、１列分の幅と１行分の高さ
pan.yk_add( pf3, [1,1,1,1] )  # 右側、１列分の幅と１行分の高さ
yk_add( pan )

この例では、左側に pf1 のパネル、右側に pf2 と pf3 のパネルが縦（上下）に配置されます。
またこの例では内部のＧＵＩ部品として３個のパネルを使っていますが、パネル以外のボタン等を直接使うことも多いです。
ＧＵＩ部品の大きさや領域内の整列方法をはじめ、このパネルには多様なオプションがあります。

詳細はクラス解説 YKLookPanelGridBag で説明していますが、YKLook を初めてお使いになる方は気にせずにこのまま下の項目へお進みください。

YKLookPanelCard の典型的な使い方は、複数のパネルの表示を切り替えるために使います。
個々のＧＵＩ部品を配置するのは他のクラスのパネルオブジェクトでおこない、そのパネルをこの YKLookPanelCard クラスのパネルオブジェクトに追加するという使い方をします。

例	pan1 = YKLookPanelFlow.new() pan2 = YKLookPanelFlow.new() card = YKLookPanelCard.new() card.yk_add( pan1, 'panel-1' ) card.yk_add( pan2, 'panel-2' ) yk_add( card ) card.yk_show( 'panel-1' )

この例では、二つのパネルの表示を切り替えます。
初期表示時のパネルを pan1 にしています。

詳細はクラス解説 YKLookPanelCard で説明していますが、YKLook を初めてお使いになる方は気にせずにこのまま下の項目へお進みください。

補足：	このパネルと同様のものとして「タブ切り替え表示」もあります。ＧＵＩオブジェクト利用の手引き＞タブ切り替え表示

YKLookPanelQuint は、５分割された固有の区画があります。
通常、このパネルに個々のＧＵＩ部品を直接置くような使い方はしません。
個々のＧＵＩ部品を配置するには他のクラスのパネルオブジェクトでおこない、そのパネルをこの YKLookPanelQuint クラスのパネルオブジェクトに追加するという使い方が一般的です。

上段
左	中央	右
下段

中央の区画は常に存在していますが、それ以外の区画はそこにＧＵＩ部品を配置したときだけ存在します。
同じ区画内に複数のＧＵＩ表示部品を置くことはできません。

例	lab = YKLookLabel.new( 'ラベル' ) btn = YKLookButton.new( 'ボタン' ) flo = YKLookPanelFlow.new() pan = YKLookPanelQuint.new() flo.yk_add( lab ) flo.yk_add( btn ) pan.yk_add( flo ) yk_add( pan )

上の例では、ラベルとボタンを仮のパネルに追加し、そのパネルを中央の区画に配置しています。
下の例は、上段・中央・下段それぞれに配置するものです。

例

top = YKLookPanelFlow.new()
cen = YKLookPanelFlow.new()
bot = YKLookLabel.new( 'ラベル' )
pan = YKLookPanelQuint.new()
pan.yk_add( top, 'top' )
pan.yk_add( cen, 'center' )
pan.yk_add( bot, 'bottom' )
yk_add( pan )

じつはウインドウ自体がこの５分割パネルを兼ねているので、上の二つの例は以下のようにすることもできます。

例

lab = YKLookLabel.new( 'ラベル' )
btn = YKLookButton.new( 'ボタン' )
flo = YKLookPanelFlow.new()
flo.yk_add( lab )
flo.yk_add( btn )
yk_add( flo )

例

top = YKLookPanelFlow.new()
cen = YKLookPanelFlow.new()
bot = YKLookLabel.new( 'ラベル' )
yk_add( top, 'top' )
yk_add( cen, 'center' )
yk_add( bot, 'bottom' )

詳細はクラス解説 YKLookPanelQuint で説明していますが、YKLook を初めてお使いになる方は気にせずにこのまま下の項目へお進みください。

YKLookPanelBox クラスのパネルオブジェクト内に配置するＧＵＩ部品は、以下のメソッドを使って整列位置を指定することができます。

メソッド	概要	パネル生成時の配置方向の指定
`yk_set_alignment_x()`	横方向（水平方向）の整列位置を左端、中央、右端、または任意の位置にする	このパネル内のＧＵＩ部品を縦一列（垂直）に並べる
`yk_set_alignment_y()`	縦方向（垂直方向）の整列位置を上端、中央、下端、または任意の位置にする	このパネル内のＧＵＩ部品を横一行（水平）に並べる

上の二つのメソッドは、どちらもＧＵＩ部品の共通のスーパークラスである YKLookComponent に定義しています。
これらのメソッドを使うときは、同じパネル内のＧＵＩ部品に同じメソッドで同じ値を設定してください。

btn_a = YKLookButton.new( 'aa' )
btn_b = YKLookButton.new( 'bbbb' )
btn_c = YKLookButton.new( 'cccccc' )
btn_a.yk_set_alignment_x( 'left' )
btn_b.yk_set_alignment_x( 'left' )
btn_c.yk_set_alignment_x( 'left' )
pan = YKLookPanelBox.new( 'v' )
pan.yk_add( btn_a )
pan.yk_add( btn_b )
pan.yk_add( btn_c )

上の例は、三つのボタンを縦に並べ、左端を揃えています。

パネル内のＧＵＩ部品間に任意の大きさの空間をあけるには、フィラーオブジェクトを使います。
YKLookPanelBox クラスのパネルオブジェクトで使われることが多いです。

例

btn1 = YKLookButton.new( 'ボタン１' )
btn2 = YKLookButton.new( 'ボタン２' )
btn3 = YKLookButton.new( 'ボタン３' )
fil1 = YKLookBoxFiller.new( nil, 0 )
fil2 = YKLookBoxFiller.new(  20, 0 )
box = YKLookPanelBox.new( 'x' )
box.yk_add( btn1 )
box.yk_add( fil1 )
box.yk_add( btn2 )
box.yk_add( fil2 )
box.yk_add( btn3 )
yk_add( box )

この例では、二つのフィラーオブジェクトを使っています。

fil1 は他のＧＵＩ部品に影響を与えない範囲内で最大の横幅を持つ。高さはない。
fil2 は必ず 20 ピクセルの横幅を持つ。高さはない。

この結果、ボタン１はパネルの左端に、ボタン２と３は右端に配置されます。
ボタン２とボタン３のあいだは 20 ピクセルの空間があります。

詳細はクラス解説 YKLookBoxFiller で説明していますが、YKLook を初めてお使いになる方は気にせずにこのまま下の項目へお進みください。

パネルの周囲に様々な枠線を表示することができます。

require '/opt/yklook/swing'
require '/opt/yklook/swingborder'

bor = YKLookBorder.new( ['etched'] )
pan = YKLookPanelFlow.new()
pan.yk_set_border( bor )

注意：	このクラスを使うときは、上の例にもあるように `swing` に加えて `swingborder` も必ずロードしてください。

立体的に表示したり、任意の色やアイコンを指定することもできます。
ボーダーにタイトル文字列を付けたり、複数のボーダーを組み合わせたりもできます。
それぞれ詳細は、

で説明していますが、YKLook を初めてお使いになる方は気にせずにこのまま次へお進みください。