では、デザイン画面がどのようになっているのか、その基本的な仕組みを理解しましょう。デザイン画面は、だいたい４つのエリアに分かれています。上の「MySample」というプロジェクト名の下に各エリアの名前があるのでわかるでしょう。それぞれのエリアについて、役割を把握しておきましょう。

Palette
一番左側にあるのが、パレットです。これは、このデザイナで利用可能な部品（コンポーネント）を一覧表示するものです。「Basic」「Media」など、ジャンル別にラベルがあり、このラベルをクリックすると、そのジャンルの部品が一覧表示されます。

これらの部品は、そのまま右側のViewer内にマウスでドラッグ＆ドロップすれば、配置することができます。

Viewer
ビューワ（Viewer）は、GUIのデザインを行うための場所です。これが、要するに「実際に携帯の画面に表示されるもの」となるわけです。この上に、左側のパレットから部品をドラグ＆ドロップしてきて並べていきます。

配置した部品は、レイアウトの設定に応じて自動的に一夜大きさが調整されます。ですから「ここに置きたいのに、勝手に位置が移動してしまう」と悩まないでください。Androidなどの携帯端末では、こうした部品類のレイアウトは、システムの方で自動的に調整する仕組みになっています。そうすることで、サイズや解像度が異なる機器でだいたい同じように表示されるようにしているのです。

Components/Media
コンポーネント（Components）は、左側にあるビューワに配置した部品を表示します。またその下のメディア（Media）は、利用可能なメディア（絵や音や動画などのデータ）を表示します。ここからその部品を選択し、編集したりすることができます。

デフォルトでは、Componentsに「Screen1」という部品が表示されているはずです。これは、この画面表示（スクリーン）を示すものです。

Properties
プロパティ（Properties）は、左側のコンポーネントやビューワで選択した部品の属性（プロパティ）を設定するためのものです。部品を選択すると、ここにその部品に用意されているプロパティが一覧表示されます。ここから、設定されている値を編集することができます。

デフォルトでは、Screen1のプロパティが表示されています。BackgroundColor、BackgroundImage、Scrollable、Titleといったものですね。これで、背景色、背景のイメージ、スクロール可能かどうか、タイトル名――といったことが設定されます。


このデザイナでのGUI設計の基本的なやり方は、「パレットから部品をビューワに配置し、そのプロパティを編集する」という形になります。こうやって、必要なだけ部品を配置し、細かな調整をしながら画面を作っていきます。