MonoDevelop Hello World

本チュートリアルでは、MonoTouchを追加したMonoDevelopとInterfaceBuilderを用いて非常にシンプルなアプリケーションを作成します.

MonoDevelopとInterfaceBuilderの基本

MonoDevelopを起動すると次のような画面が表示されます(※画像は英語版):

mono1.png

最初のステップは、プロジェクトのためのソリューションを作成することです.

ソリューションを作成するには、"Shift-Command-N"を同時に押すか、 メニューから"ファイル/新規/ソリューション"を選択してください:

mono02.PNG

ソリューションダイアログボックスが開いたら、C# カテゴリーのiPhone プロジェクトの中から、 "iPhone Window-based Project"を選択します.
その後、プロジェクト名を入力し、"進む"を選択してソリューションの作成を完了します:

mono03.PNG

ソリューションを作成すると、スクリーンの左側にソリューションパッドを確認することができるでしょう.
もしもソリューションパッドが確認できなかったら、メニューバーから"ビュー/ソリューション"を選択してください.

mono04.PNG

ソリューションパッドにある重要な項目について説明していきましょう.

MonoTouchアプリケーションのデフォルトテンプレートでは、main()メソッドを含むmein.csファイルを提供しています.
meinメソッドによりアプリケーションが起動し、アプリケーションのイベントループが開始されます.

UIApplication.Main()メソッドではMainWindow.xibファイルからユーザインタフェースを読み込み、
AppDelegateクラスのインスタンスを生成して、イベントの処理を開始します.

そのAppDelegateクラスはデフォルトテンプレートの中でMonoTouch.UIApplicationDelegateから継承されています.
いくつかのオーバーライド可能なメソッドはオペレーティングシステムに対応するためのものです.

デフォルトテンプレートの中ではFinishedLaunchingメソッドをオーバーライドしています.
このメソッドは起動処理が完了した時点で呼び出されます.

アプリケーションを実行しても何も面白いことは起こりません.
iPhoneSimulatorに空白の画面が表示されるだけです.

さて、今からタッチ可能なボタンと、ボタンをタップすることでコンテンツを更新可能なラベルを用いて非常にシンプルなユーザインタフェースを作成しましょう.

MonoTouchでInterfaceBuilderを使用する

この項では、Mac OS X Snow Leopardを念頭に置いて書かれています.
InterfaceBuilderはこのOSのリリースにより以前のバージョンより多少の変更が加えられました.
あなたのOSがLeopardの場合にはMonoDevelop HelloWorld with Leopardをお読みください.

MainWindow.xibファイルをダブルクリックしてInterfaceBuilderを起動します.
IBが起動したらウインドウと様々なコンポーネントが含まれているライブラリを確認してください.
あなたのライブラリは次のスクリーンショットの様になっているはずです.
もしそうでないなら、 ツールメニューから"Library"を選択してください.

mono05.png


スクリーンショットにあるように、"Inputs and Values"を選択して、ウインドウに"Round Rect Button"と"Label"をドラッグします.
ボタンをダブルクリックしてテキストを"Tap me!"に変更し、ラベルが中央に広がっていることを確認します.
アラインメントは"Attributes Inspector" (ツールメニューの中にもある)で構成可能です.

結果、次のようになるでしょう:

mono06.png


Windows.Forms、 Gtk# または ASP.NET では、オブジェクトがデザインの表層にドラッグされると、識別子があなたのソースコードから参照できるように即座に関連づけられますが、Interface Builderではそれらとは異なるモデルが使用されています.

コンポーネントに接続するためには、あなたのクラスに"アウトレット"を定義する必要が有ります.
これらのアウトレットは実行時にC#プロパティとしてマッピングされ、アクセスが可能になります.
本サンプルでは、私たちはC#のコードからラベルとボタンの両方にアクセスしたいので、
各コントロールのための一つのアウトレット定義し、"アウトレットを繋ぐ"必要があります.

ボタンとラベルをアプリケーションデリゲートにアクセスさせるために、それらのコントロールをデリゲートに接続する必要があります.

ツールメニューから、 Library を選択してください (または、Shift-Command-Lのショートカットを使用).
次のような画面を確認できるでしょう:

mono07.png


"Classes"の項目を参照し、変更したいクラスタイプ、この例では"AppDelegate"を選択します.
アプリケーションデリゲートの中に2つのクラスアウトレットを作成します.
ユーザインタフェースの中に作成した2つのアウトレットは、MainWindow.designer.xib.csの中にパーシャルクラスのプロパティとして反映されます.

Libraryダイアログの下部にある、"Outlets"タブを選択すると次のようになります:

mono08.png


そのペインにある"Class Outlet"の項から[+]ボタンをクリックして"button"と"label"を追加します.
設定が終わったら次のようになります:

mono09.png


アウトレットを定義したら、画面上の実際のコンポーネントに定義したアウトレットを接続する必要があります.
それを行うにはまず、ドキュメントウインドウで "App Delegate" を選択します.
その後で、Inspectorの中の"Connections"タブに切り替えます.

"label"と"button"のアウトレットがまだコンポーネントに接続されていないことを確認できるでしょう:

mono10.png


次のステップでは、labelとbuttonを先にウインドウに追加したコントロールに接続します.

空の円の上にカーソルを持っていきクリックして、コンポーネントにドラッグします.
アウトレットからコンポーネントに向かって線が描画されるでしょう.

まずはlabelアウトレットをデザイナーのウインドウ上にあるLabelコントロールに次のように繋げてみます:

mono11.png


次は、ボタンで先ほどのプロセスを繰り返します:

mono12.png


2つのアウトレットを繋ぐと次のようになります:

mono13.png


これでようやく、デザイナーで配置したコンポーネントにソースコードからアクセスできるようになったわけです.

動作の追加

XIBファイルを編集した時、コンテンツは自動的にアプリケーションに反映されます.
いくつかのアウトレットは現在のクラスにプロパティとして定義されています.
(詳細については"behind the scenes"を確認してください)

Main.csファイルに戻って、少しだけC#のコードを追加しましょう.
AppDelegateクラスの中でインスタンスのプロパティとしてウインドウ・ラベル・ボタンにアクセスできます.
これを使用してコントロールのカスタマイズまたは動作の変更を行います.

コントロールを"TouchDown"イベントのイベントハンドラにアタッチしてみましょう.
このイベントはユーザがボタンをタップした時に発生します.
MonoDevelopのコード補完機能を利用すると便利です.

mono14.PNG

次のようにコードを書き加えましょう:

 
int ntaps = 0;
 
button.TouchDown += delegate {
    label.Text = "I have been tapped " + (++ntaps) + " times";
};
 

イベントハンドラにアタッチするために、上記のコードでC# 3.0の構文を一部使用しています.
ユーザがボタンをタップすると、それに応じてntaps変数がインクリメントされラベルのテキストが更新されます.

iPhoneSimulatorにソフトウェアを展開しましょう.
Command-Bを押すか"ビルド/全てビルド"を選択してアプリケーションをビルドし、
Alt-Command-Returnを押すか"実行/実行"を選択してください.

次の画像のようにシミュレータが起動します:

mono15.PNG


アクションを使用する

前のセクションではC# 3.0スタイルが主で、それはアプリケーションの広い範囲に適しています.
本セクションは、Objective-Cスタイルを使用してイベントをフックしたい場合にのみ必要となります.

アクションはアウトレットを定義したのと同様に、Interface Builderの中で定義することができます.
コードの中でアクションをどのように使用するのか説明しましょう.
次のようにスクリーンに新たなボタンを追加してください:

mono16.PNG

ドキュメントウィンドウの中の"App Delegate"オブジェクトを選択し、インフォメーションページを開きます.
前回と異なり今回は、アウトレットを追加する代わりにアクションを追加します.
"sampleTap"と言う名前のアクションを追加しましょう.
結果、次のようになります:

mono17.PNG

次のステップでは、AppDelegateにメッセージを送るボタンイベントを作成します.
新しく作成したボタンを選択して"Connection"タブを選択します.
そして"Touch Down"イベントを"App Delegate"に繋げましょう:

mono18.PNG

"App Delegate"を選択すると、そこにフックするアクションのプロンプトが表示されます.
この例においては上記で定義した"sampleTap"が表示されるので、それを選択してください.

mono19.PNG

今、AppDelegateのアウトレットやアクションは次のようになっているはずです:

mono20.PNG

ファイルを保存してMonoDevelopに戻りましょう.

アクションをコードに接続した時、MonoTouchは生成されたメソッドを探索します.
Foundation.Exportアトリビュートは アクションの名前を指定します.
MonoDevelopはコードの背景でこのアトリビュートによって適用されたデザイナークラスを自動的にパーシャルメソッドに変換します.
例えば、"sampleTap"は次のようになります:

 
[MonoTouch.Foundation.Export ("sampleTap:")]
partial void sampleTap (MonoTouch.UIKit.UIButton sender);
 

"AppDelegate"クラスの中でMonoDevelopのコード補完機能を利用すると、
パーシャルメソッド実装の記述をサポートしてくれます:

mono21.PNG

コード例:

 
partial void sampleTap (UIButton sender)
{
    label.Text = "Second button clicked";
}
 

ちなみに、定義されているパーシャルメソッドを無視するのは自由です.
C#のコンパイラは実装のないパーシャルメソッドは無視します.

この詳細については、responding to eventsを参照してください.

written by 153

添付ファイル: filemono17.PNG 694件 [詳細] filemono16.PNG 687件 [詳細] filemono19.PNG 708件 [詳細] filemono18.PNG 700件 [詳細] filemono21.PNG 661件 [詳細] filemono20.PNG 698件 [詳細] filemono14.PNG 668件 [詳細] filemono13.png 686件 [詳細] filemono15.PNG 684件 [詳細] filemono4.png 532件 [詳細] filemono12.png 660件 [詳細] filemono3.png 504件 [詳細] filemono11.png 684件 [詳細] filemono1.png 654件 [詳細] filemono05.png 713件 [詳細] filemono04.PNG 724件 [詳細] filemono03.PNG 687件 [詳細] filemono02.PNG 703件 [詳細] filemono06.png 704件 [詳細] filemono07.png 702件 [詳細] filemono10.png 687件 [詳細] filemono2.png 519件 [詳細] filemono09.png 664件 [詳細] filemono08.png 692件 [詳細] filemono01.PNG 430件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-10-24 (日) 17:14:27 (2525d)