Xcode1.0の「Interface Builder」の使い方 | 貯え 小道具 興味ない?

貯え 小道具 興味ない?

「貯えもの」とは、いってもお金をご想像の方は、ご遠慮くださいまし。
Storage = Data Storage
関わってお仕事したり、使ってて感じたことなり
記すBlogでございます。
トラックバックを時折頂きますが、削除する場合がございます。

以前、一度通読しましたが、Panther環境を対象にした書籍なので、改めて通読することにしました。

 Xcodeはインストールが終わると「Developer」フォルダの中に「Examples」フォルダがあり、そこに沢山のサンプルプロジェクトが用意されています。手始めに「Examples」の中の「AppKit」フォルダの「Temperature Converter.xcode」を使ってみます。

(フォルダの検索)

 

(実行画面)

 

プロジェクトを開いてビルド/実行してみました(詳細説明は省略)。「Example」フォルダの中のプロジェクトを試してみるのも慣れるには良いことかもしれません。

 

「新規プロジェクトの作成」も試してみました。

C言語で作成する「Standard Tool」は「新規プロジェクト...」から「Tools」の中の「Standard Tool」を選択して作ります。

 

今回は「testcommand」という名前のプロジェクトを作ります。

 

これで、いわゆる「ハローワールド」コマンドのプロジェクトが出来上がりますが、「コマンドに与えられたパラメータを読み取って表示するプログラム」に修正してみます。修正は「main.c」を修正します。

変数i を使った繰り返し文で実行時のパラメータ(argc[i] ) を順番にコンソールに表示するという流れになります。

実行プログラムをダブルクリックすると、引数の設定が出来ます。

ところが、このプログラムをビルドして実行してみてもエラーが出てしまい、実行できませんでした(「Hello, World」も動作せず)。

 

OSの再インストール、Xcodeの再インストールをしてもダメでしたが、マイナーバージョンの違うMac OS X Pantherでもエラーが出ました。

 

ビルドに失敗する原因はわかりませんが、書籍の次の課題へ進むことにしました。

因みにMac OS X Tiger( 仮想環境 )でほぼ同じ操作をしたところ、「Standard Tool」は無事に動作する様です。

(Mac OS X Tigerでのプロジェクトの作成)

 

(ビルドして実行した結果)

 

次の段階は「Cocoa アプリケーション」です。最初の「Cocoa アプリケーション」は2014-10-13に記事にした「Objective-Cで四則演算プログラム( Xcode2, Xcode3 )」がXcode1の書籍でも例題として取り上げられていました。この時には手元で自分で作成して試したのですが、課題としては「理論がわからない」という問題がありました

 

今回改めて、前に作った四則演算プログラムを細かい手順も読みながら作ってみることにしました。

(Cocoaアプリケーションのプロジェクト作成)

 

まず、「新規プロジェクト」として「Application」のグループの中の「Cocoa Application」を選択します。(「Cocoa Document-based Application」は複数のドキュメントを同時に編集できるようなアプリケーションを作成するときに選ぶ)

 

プロジェクトが出来たら「MainMenu.nib」をダブルクリックして「Interface Builder」を起動します。「Window」にユーザーインターフェースの部品の情報をXcodeのメニューから「Tools」-「Show Info」を選んで、値やオプションを設定します。

(スライダの例)

 

「ポップアップメニュー」を1つ配置して「Cocoa-Menus」から「Item」を「ポップアップメニュー」に追加します。その後で「Item」を編集して、演算の種類を登録します。

(ポップアップメニューの表示と修正)

 

ユーザーインターフェースの部品の配置/設定が終わったら「MainMenu.nib」を一旦、保存します。この後でユーザーインターフェースの部品のコネクションを設定します。

(スライダーから[control]を押しながら「A:」のテキストボックスと接続する例)

 

続けてスライダー2つに関連づけるそれぞれの「TextBox」をconnectして「NSSlider Info」の「connection」を選択し「Target/Action」の中から「takeIntValueFrom:」を選んで、「connect」ボタンを押します。

(WindowのconnectとWindowのOutletの接続)

 

最初にウィンドウを開いた時に「A:」のテキストボックスが入力欄として有効になる様に「Window」の「情報パレット」で「Outlets」のタブをクリックして「InitialFirstResponder」と「connect」します。

またアプリケーションの実行中に「tab」キーを押すと選択された入力用の「テキストフィールド」の選択項目が変わる様にします。

 

(入力用のテキストオブジェクトのconnect)

 

それには「A:」のテキストフィールドから「B:」のテキストフィールドへコントロールを押しながら、線をドラッグして「NSTextField Info」の「Outlets」の中の「nextKeyView」を選択してコネクトします。この接続は「B:」のテキストフィールドから「A:」のテキストフィールドへも行います。

これでユーザーインターフェースの作成完了なので、「File」メニューから「Test Interface」を選んで動作確認します

スライダーの動作は情報パレットの「Attribute」で「Continuously send action while sliding」のチェックをオンにします。

 

この次に「クラスの設計/実装」をするのですが、「MVCモデル」(linkはWikipedia)の概要を把握しておく必要がありそうです。

Wikipediaの冒頭には「Model-View-Controller (MVC、モデル・ビュー・コントローラ) はUIを持つソフトウェアに適用されるソフトウェアアーキテクチャの一種である。」と書いてあります。

 

「Interface Builder」を使う場合は、

NSObjectのサブクラスとして「MyObject」を作り、今回の場合は「AnalogController」と名前を変えます。

「MyObjectClass Info」を開いて「Add」ボタンで「Outlet」を今回は5つ作ります。

(「operation」、「calculator」、「result」、「ValueA」、「ValueB」)

(新しく作ったオブジェクトの「MyObjectClass Info」)

 

「Add」で作った「Outlet」の「Type」は初期値は全て「id」型になっていますが、「result」、「valueA」、「valueB」はユーザーインターフェースに合わせて「NSTextField」に変更します。「operation」も作ったユーザーインターフェースに合わせて「NSPopUpButton」に変更します。

 

次に「AnalogController Class Info」で「Action」を「Add」で追加します(名前は「Calculate」に変更する)。

 

ここまで定義したオブジェクトを接続する必要があります。それには「MainMenu.nib」のウィンドウで「AnalogController」クラスを選んで、「Interface Builder」の「Classes」メニューから「Instantiate AnalogController」を選びます。

すると「MainMenu.nib」ウィンドウの「Instances」タブに「AnalogController」というインスタンス(のアイコン)が現れます。

この「Analog Controller」インスタンスとユーザーインターフェースの「Outlet」の「result」をconnectします。

 

同様に「A:」のテキストフィールドも「AnalogController」側から線をWindow上の部品までドラッグして繋ぎ、情報ウィンドウの「Outlets」タブから該当のOutletを「connect」します(5つの「Outlet」全て繋ぐ)。

(これが「MVCモデル」のViewとControllerとの接続だと思います。)

 

続けて、「Action」の接続をします。これは接続の向きが重要で「Calc!」ボタンから「AnalogController」アイコンまでドラッグして放します。

加えて「NSButton Info」の「Target/Action」のActionをconnectします。

 

これでユーザーインターフェースは完成ですが、「MainMenu.nib」のクラスとして「NSObject」のサブクラスに「Calculator」を作ります。このクラスが選択された状態で「Interface Builder」の「Classes」メニューを開いて「Instantiate Calculator」というメニューを選択してインスタンスを作ります。このインスタンスは「AnalogController」側から「Calculator」アイコンに接続します。そして「AnalogController」の情報パレットの「Outlets」の「calculator:」をconnectします。

 

ここまでが主に「Interface Builder」を使ったGUI作業です。

(スライダーは「Continuously send action while sliding」をチェックする)

 

「Interface Builder」で残る作業は「Interface Builder」で定義した「Analog Controller」と「Calculator」のソースコードを作成することです。

 

オブジェクトのコード作成は次の記事にすることにします。