スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

インデックス作成ツール/ユーザーインターフェース(その2)

 では、Interface Builderを使ってこの画面を作っていこう。


 画面の左側ではアルバムを表示して(1)、新しいアルバムの追加(2)や削除(3)を行うことにする。
 (1)のアルバムの表示にはNSTableViewという部品を使用する。パレットウィンドウの上のパネルからCocoa Data Viewというのを選んで、そのなかのNSTableViewをドラッグして、レイアウトウィンドウに持っていく。

 レイアウトウィンドウにTableViewを置いたら、サイズを適当に調整する。さらにインスペクタウィンドウを使って、テーブルのカラム数や、スクロールなどの設定を行う。インスペクタウィンドウは「Tools」メニューの「Show Inspector」を選ぶと表示される。これは、インタフェース作成の作業では一番良く使うウィンドウになる。インスペクタウィンドウで設定できることは非常にたくさんあるのだが、目に見える部分の細かい設定は”Attributes"で行う。

 まず、TableViewをダブルクリックしてテーブル全体の設定を行う。とりあえず、ここではタイトルだけを表示することにして、カラム数は1に、そしてスクロールバーは縦のみにしている。さらにカラムのタイトルをTitleにするため、カラムの設定を行う。カラムの設定をするには、ダブルクリックされた状態から編集したいカラムのタイトル行をクリックする。これでカラムごとの設定が変更できるようになる。とりあえずカラム幅を調整し、タイトル行を「Title」に変更しておく。

(2)と(3)はNSButtonという部品を使う。パレットウィンドウからNSButtonを選んでNSTableViewと同じようにレイアウトウィンドウにドラッグ&ドロップする。NSButtonを配置したらインスペクタウィンドウで形やボタンに描かれる文字などを設定する。追加ボタンには「+」、削除ボタンには「ー」の文字を表示するようにした。

 画面右側は、左側で選んだアルバムの属性を編集する画面だ。(4)(5)(7)はNSTextFieldを使う。今までと同様、パレットからレイアウトにドラッグ&ドロップする。

(7)は長文を書く場所なので、インスペクタを使って、テキストが折り返し表示されるように設定しておく。

(6)は日付を入力する欄なので、部品はNSDatePickerを使う。例によってパレットからドラッグ&ドロップしたら。インスペクタを使って日付だけを入力/表示するように設定しておく。

 ”Title" "Artist"などの文字は入力できないようにしてあるNSTextFieldである。これらもパレットからドラッグ&ドロップして適当にレイアウトウィンドウに配置する。ダブルクリックするとテキストが編集できるので、適当に修正しよう。

 これで一通りの画面レイアウトは終わりだ。次回はいよいとCocoa Bindingを使って、今作った画面とCore Dataのエンティティを繋いでみる。
スポンサーサイト

Comment

Post comment

Secret

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。