HIRO's.NET Blog

今回は、前回作成した「MyFirstApp」に貼り付けたButtonがクリックされたときのコードを作成する方法を見ていきます。

1.準備

はじめに、Buttonの右側にLabelを配置して以下のように制約を設定してください。

Iビームは左、上、右に設定し、Heightにチェックを付けます。

左に設定したIビームは、画面の左端ではなく、すでに配置しているButtonの右端からの位置になることに注意してください。このように、制約を設定使用としている周りに部品がある場合は、その部品からの位置となります。

また、Widthにチェックを付けなかったのは、幅を画面に追従させるためです。

2.アウトレットの作成

アウトレットとは、配置した部品をコードから操作できるようにするための設定です。アウトレット接続などとも呼ばれます。

Interface Builderの右上の方にあるアシスタントエディタボタンをクリックして、アシスタントエディタを表示します。これによりインターフェースエディタとコードエディタを同時に表示することができます。

アシスタントエディタによってコードエディタが開かれると、自動的にViewController.mファイルが選択されます。

アウトレットを作成するにはViewController.hを選択する必要があるので、ファイルを選択して切り替えます。

それではLabeのアウトレット接続を作成します。

画面に貼り付けたLabelコントロールを[control]キーを押しながら、コードエディタの以下のコードの下にドラッグ＆ドロップします。

@interface ViewController : NSViewController {
}

ドラッグ＆ドロップすると、ダイアログが表示されます。Name欄には任意のアウトレット接続名称を入力して、[Connect]ボタンをクリックします。

作成されたアウトレット接続のコードを以下に示します。IBOutletとなっていることがアウトレットであることを表しています。

@property (assign) IBOutlet NSTextField *myLabel;

3.アクションの作成

続いて配置したボタンがクリックされたときのアクションを作成します。アクション接続とも呼びます。

アクション接続もアウトレット接続と同様の手順で作成することができます。

画面に貼り付けたButtonコントロールを[control]キーを押しながら、コードエディタにドラッグ＆ドロップします。ドラッグ＆ドロップする位置は先ほどのLabelのアウトレット接続の下にします。

ダイアログが開くので、Connectionに「Action」を指定し、Name欄に任意の名前を入力します。ここではbuttonClickedとします。

作成されたコードは以下のようになります。(IBAction)となっていることからアクションとして作成されていることがわかります。

- (IBAction)buttonClicked:(id)sender;

ここまでできたら一度保存をしておきましょう。

4.アクションコードの作成

ここまでで、アウトレット接続とアクション接続の作成が完了し、コードから操作できるようになりました。

Visual Studioに戻り、ソリューションエクスプローラーからViewController.designer.csを開くと、以下のようにアウトレットとアクションのコードが挿入されていることを確認できます。

挿入されているコードを確認できたら、今度はソリューションエクスプローラーでViewController.csをダブルクリックして開きます。

ViewDidLoadとというメソッドがあるので、以下のように編集します。ViewDidLoadは画面（ViewController）が表示されたときに実行されるメソッドです。今回はこのメソッドの中でLabelのテキストを初期化するコードを書いています。アウトレット接続で作成したmyLabelが、画面に貼り付けたLabelを表しています。あとはStringValueプロパティに表示したい文字をセットすれば、アプリの起動時に表示されます。

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    // ラベルにテキストを表示する
    myLabel.StringValue = "クリック前です";
}

次に、Buttonがクリックされたときのコードを作成します。アクション接続はbuttonClickedという名前で作成したので以下のようにコードを作成します。このコードは、先ほどのViewDidLoadの下あたりに作成します（実際はどこでも構いません。自分がわかる場所に記載してください）。

// Buttonがクリックされたときのコード
partial void buttonClicked(Foundation.NSObject sender) {
    myLabel.StringValue = "クリックされました";
}

5.作成したアプリの実行確認

以上で今回の目的のコードは作成できたので、実際に起動して動作を確認してみましょう。画面上にある右向きの三角のボタンをクリックします。

ビルドが実行され、しばらくすると作成したアプリが起動します。

Button をクリックしてみましょう。以下のようにLabelの文字列が変わることが確認できれば成功です。