単語リストプログラム その4

さて次は、アプリケーションで使うパーツを配置していく。最初は基本的なものだけで、機能を追加する時点でパーツが必要ならその都度足していく。

ここでは、メインウィンドウの設定と、TabView の配置をしていく。

まずは、メインウィンドウの設定から。デフォルトのサイズと位置、最小サイズを決める。

nib ファイルのウィンドウで Window のアイコンを選ぶか開いていれば、まだ何もないメインウィンドウをクリックして、

Inspector の物差しみたいなアイコンのタブ(Size)を選ぶ。

とりあえず、デフォルトのサイズを 800 x 600 にしておく。Content Size & Position でそのサイズを入力して、位置を移動させて決める。

そのとき、ウィンドウの4辺から出ている三角のようなものをダブルクリックすると、のびてディスプレイ画面の対応する辺にくっつく。

こうすると、画面サイズが変わっても、そこからの距離が同じになる(はず)。これをしない場合は、デフォルトの X と Y の値を起点とした位置にウィンドウが現れる。

問題は、Cocoa で、プログラムを書く場合は、起点が左下なので、大きな画面でアプリケーションを作って、小さな画面で使うと、最初のデフォルトの位置が

思っているのと違う場合があるので注意。

それと同時に最小サイズ(Minimum Size)の Has Minimum Size にチェックを入れてサイズを同じにしておく。

次に、一番左のタブをクリックして Attributes を設定していく。

デフォルトから変更した点は、Title を Word List にしたのと、Textured にチェックを入れて、Shows Toolbar Button のチェックを外した。

Title はウィンドウの一番上に現れるテキストで、Textured はウィンドウの見た目、ツールバーはとりあえず使う予定がないので外しておく。

さて、これで、ウィンドウにパーツを配置していく。まずは、NSTabView を加える。

Library の Cocoa -> Views & Cells の一番下にある。これをウィンドウにドラッグアンドドロップして大きさと位置を調整する。

配置したら、タブの部分をダブルクリックして、タブに名前を付ける。File と Word Count とした。

つぎにウィンドウが選択された状態にして(一番上のタイトルバーのあたりを一度クリック)、ウィンドウ中央をクリックすると、TabView が選択できる。

そうしたら、Inspector で Attribute を選び、Style を Bottom tabs に変えて、Default Tab を File にする。

まあ、タブの位置などは、好みで決めてください。このサンプルではこれで行きます。

つぎに、Inspector で Size を選び、Autosizing の設定をする。ウィンドウの大きさが変わったときに、TabView の大きさも、その中の View の大きさも追随してほしいので、アニメーションでウィンドウのサイズが動いている部分の左の四角の中をクリックして、下の図のように設定する。あと、タブの大きさを変えたい場合は Size を変更する。

ここで、まずはメインウィンドウと TabView を outlet と結びつける。

Xcode に戻って、AppController.rb を選んで Xcode で編集するか、ダブルクリックして外部エディタで開く。

何もいじっていない状態で、次のようになっているはず。ここに多少の変更と、outlet を加える。

require 'osx/cocoa'

class AppController < OSX::NSObject

end

内部では文字コードは UTF-8 で扱うことにするので、$KCODE を UTF-8 にする。そして、window と tabView という outlet を作る。

また include OSX として、いちいち OSX:: をつけなくてすむようにする。

require 'osx/cocoa'

$KCODE = 'UTF-8'

class AppController < OSX::NSObject

include OSX

ib_outlet :window, :tabView

end

Interface Builder に戻って、App Controller のインスタンスアイコンを右クリックすると追加した outlet が現れるので、それぞれを Window と TabView に結びつける。

さて、次回はファイルビューの方にテーブルとボタンを配置する。

単語リストプログラム その5 - ファイルビューへのパーツの配置