App Designer の設計ビューでのアプリのレイアウト

App Designer の [設計ビュー] には、最新のプロフェッショナルなデザインのアプリケーションを設計するためのレイアウトツールが豊富に用意されています。また、UI コンポーネントの広範なライブラリが提供されているため、さまざまな対話型機能を作成できます。[設計ビュー] で行った変更は、[コードビュー] に自動的に反映されます。したがって、コードを記述しなくてもアプリのさまざまな要素を構成できます。

コンポーネントをアプリに追加するには、以下のいずれかの方法を使用します。

[コンポーネントライブラリ] からコンポーネントをドラッグし、キャンバスにドロップします。
[コンポーネントライブラリ] 内のコンポーネントをクリックしてから、カーソルをキャンバスへと動かします。カーソルが十字形に変わります。コンポーネントを既定のサイズでキャンバスに追加するには、マウスをクリックします。あるいは、コンポーネントを追加するときにサイズを決めるには、クリックしながらドラッグします。一部のコンポーネントは、既定のサイズでのみ追加できます。

App Designer Component Library. The library lists common components, such as Axes, Button, and Check Box components.

コンポーネントの名前は、キャンバスに追加した後に [コンポーネントブラウザー] に表示されます。コンポーネントは、キャンバスまたは [コンポーネントブラウザー] のいずれかで選択できます。両方の場所で同時に選択が行われます。

App Designer Component Browser. The browser displays a tree with a top-level node labeled "myApp", a child labeled "app.UIFigure", and another nested child labeled "app.Button".

編集フィールドやスライダーなどの一部のコンポーネントは、キャンバス上にドラッグするとラベルとともにグループ化されます。これらのラベルは、既定では [コンポーネントブラウザー] には表示されませんが、[コンポーネントブラウザー] の任意の場所を右クリックし、[コンポーネントブラウザーにコンポーネントのラベルを含める] を選択することによってリストに追加できます。コンポーネントにラベルを付けない場合は、Ctrl キーを押したままコンポーネントをキャンバスにドラッグすることで除外できます。

Edit field component grouped with a label with text "Edit Field".

コンポーネントにラベルがあり、ラベルのテキストを変更すると [コンポーネントブラウザー] のコンポーネントの名前がそのテキストと一致するように変更されます。コンポーネントの名前は、ダブルクリックして新しい名前を入力することによってカスタマイズできます。

App Designer Component Browser. The "app.EditField" tree node is highlighted and the text "EditField" is selected and editable.

コンポーネントのカスタマイズ

コンポーネントの外観をカスタマイズするには、コンポーネントを選択し、[コンポーネントブラウザー] のコンポーネントのタブでそのプロパティを編集します。たとえば、[ボタン] タブで、ボタン上に表示されるテキストの配置を変更できます。

The Button tab of the Component Browser. The tab displays editable button properties such as Text, WordWrap, and HorizontalAlignment, along with their values.

いくつかのプロパティは関数の動作を制御します。たとえば、[範囲] プロパティを変更することで、数値編集フィールドで受け入れる値の範囲を変更できます。

Component Browser with an numeric edit field component selected. The Limits property field is selected and contains the text "0,255".

アプリを実行すると、編集フィールドは、その範囲内の値のみを受け入れます。

Numeric edit field component with the text "500". The border of the edit field is red, and there is a tooltip that says: "Value must be between 0 and 255".

キャンバスでは、コンポーネントをダブルクリックして、いくつかのプロパティを直接編集できます。たとえば、ボタンのラベルをダブルクリックして、目的のテキストを入力することによって編集できます。複数行のテキストを追加するには、Shift キーを押したまま Enter キーを押します。

Button with text "Try Again". The text is highlighted and editable.

コンポーネントの配置と間隔設定

[設計ビュー] では、キャンバス上でコンポーネントをドラッグして配置およびサイズを変更したり、ツールストリップの [キャンバス] タブにあるツールを使用したりできます。

App Designer では配置のヒントが提供されており、コンポーネントをキャンバス内でドラッグするときの整列に役立ちます。複数のコンポーネントの中心を通るオレンジ色の点線は、それらの中心が整列されていることを示します。エッジのオレンジ色の実線は、エッジが整列されていることを示します。垂直の線は、コンポーネントが親コンテナーの中央に配置されていることを示します。

On the left, two buttons aligned vertically, with the alignment indicated by parallel lines. On the right, a button centered in its parent, with the alignment indicated by perpendicular dotted lines.

キャンバスでコンポーネントをドラッグする代わりに、toolstrip の [整列] セクションのツールを使用してコンポーネントを整列することもできます。

Canvas toolstrip tab in Design View with the Align options highlighted. There are options to align components vertically along their left edges, centers, or right edges, and options to align components horizontally along their top edges, centers, or bottom edges.

配置ツールを使用すると、選択したコンポーネントがアンカーコンポーネントに対して整列されます。アンカーコンポーネントは最後に選択されたコンポーネントであり、他のコンポーネントより選択境界が太くなります。別のアンカーを選択するには、Ctrl または Shift キーを押しながら、目的のコンポーネントを 2 回クリックします (コンポーネントの選択を解除するために 1 回、再度選択するためにもう 1 回)。たとえば、次の図では、[Format Options] ラベルがアンカーです。[左揃え] ボタンをクリックすると、ドロップダウンとチェックボックスの左端がラベルの左端に揃えられます。

Alignment of a label, drop-down, and check box component. On the left, the components are not vertically aligned. On the right, their left edges are vertically aligned.

ツールストリップの [スペース] セクションのツールを使用して、隣接するコンポーネントの間隔を制御できます。3 つ以上のコンポーネントのグループを選択し、ツールストリップの [スペース] セクションのドロップダウンリストからオプションを選択します。[等間隔] オプションは、複数のコンポーネントが配置された領域内にできる間隔を均等に分配します。20 オプションはコンポーネントの間隔を 20 ピクセルにします。コンポーネント間のピクセル数をカスタマイズする場合は、ドロップダウンリストに数値を入力します。

Canvas toolstrip tab in Design View. The Space section is highlighted.

次に、[水平方向に適用] または [垂直方向に適用] をクリックします。たとえば、[等間隔] を選択し、[垂直方向に適用] をクリックして、垂直方向に並んだコンポーネント間の間隔を均等に分配します。

Spacing four edit field components. On the left, the vertical spacing between the edit fields differs. On the right, the edit fields are evenly spaced vertically.

コンポーネントのグループ化

複数のコンポーネントをグループ化し、1 つの単位として変更できます。たとえば、一連のコンポーネントの相対的な位置を決めた後に、それらをグループ化して、関係を変更せずに移動することができます。

一連のコンポーネントをグループ化するには、キャンバス内でそれらを選択して、ツールストリップの [調整] セクションで [グループ化] 、 [グループ] を選択します。

On the left, a label, slider, and edit field component are selected separately. On the right, the three components are grouped, and the group is selected.

[グループ化] ツールは、次の一般的なタスクの機能も提供します。

グループ内のすべてのコンポーネントのグループ化を解除 — グループを選択します。次に、[グループ化] 、 [グループ化の解除] を選択します。
グループへのコンポーネントの追加 — コンポーネントとグループを選択します。次に、[グループ化] 、 [グループに追加] を選択します。
グループからのコンポーネントの削除 — コンポーネントを選択します。次に、[グループ化] 、 [グループから削除] を選択します。

コンポーネントの並べ替え

[設計ビュー] で [並べ替え] ツールを使用することで、コンポーネントの相互の重なり順序を変更できます。

たとえば、ラベルを作成してからイメージを作成します。既定で、イメージはラベルの手前に表示されます。[コンポーネントブラウザー] の既定のビューでは重なり順序に基づいてコンポーネントが表示されますが、イメージが最上位でラベルは 2 番目であるため、イメージが最初になります。

An image component on top of a label, and the Component Browser display, where the image is listed above the label.

コンポーネントを並べ替えてラベルがイメージの手前に来るようにするには、キャンバスでイメージを選択し、ツールストリップで [並べ替え] を選択します。イメージを右クリックして [並べ替え] ツールを選択することもできます。[背面へ移動] を選択して、イメージを背面に送ります。

The Canvas tab of the Design View toolstrip. The reorder option is highlighted and is displaying a menu with the options "Bring to Front", "Bring Forward", "Send Backward", and "Send to Back".

これで、イメージはラベルの背後に来ます。コンポーネントを並べ替えると、[コンポーネントブラウザー] 内のコンポーネントの順序も変更されます。

A label component on top of an image, and the Component Browser display, where the label is listed above the image.

コンポーネントのタブフォーカスの順序の変更

アプリの実行時、ユーザーは Tab キーを使用してアプリのコンポーネント間を移動できます。Tab キーを押したときにフォーカスされるコンポーネントの順序を表示するには、[コンポーネントブラウザー] で [ビュー] ドロップダウンリストを展開し、[タブ順序での並べ替えとフィルター処理] を選択します。[コンポーネントブラウザー] には、アプリ内でフォーカスを受け入れることができるコンポーネントのみがフォーカス順にリストされます。[コンポーネントブラウザー] でコンポーネント名をクリックしてドラッグし、コンポーネントのタブ順序を変更できます。

Component browser with the "View" drop-down list expanded. The two options are "Sort by Stack Order" and "Sort & Filter by Tab Order".

または、App Designer で、コンポーネントのタブフォーカス順序を左から右、その後、上から下に自動的に適用できます。[コンポーネントブラウザー] でコンテナーの名前を右クリックして、[自動タブ順序の適用] を選択します。たとえば、アプリユーザーが名、姓、年齢を入力するための編集フィールドが並んだアプリにおいて、[コンポーネントブラウザー] で app.UIFigure ノードを右クリックして自動タブ順序を適用します。アプリを実行するユーザーは Tab キーを使用して編集フィールド間を移動し、名、次に姓、最後に年齢の順に入力できます。

App layout with three edit fields next to the Component Browser. The app.UIFigure node has a context menu with the Apply Auto Tab Order option highlighted.

コンテナー内のコンポーネントの配置

コンポーネントをパネルなどのコンテナーにドラッグすると、コンテナーは青色に変わり、コンポーネントがコンテナーの子であることを示します。コンテナーにコンポーネントを配置するこのプロセスは、"ペアレンティング" と呼ばれています。

A drop-down component being dragged into a panel. The panel is blue.

[コンポーネントブラウザー] では、親コンテナーの配下にある子コンポーネントの名前がインデント処理されて、親と子の関係が示されます。

Component Browser. The text "app.OptionsPanel" is below and indented from "app.UIFigure", and "app.DropDown" is below and indented from "app.OptionsPanel".

App Designer でのコンテキストメニューの作成と編集

App Designer でコンテキストメニューを作成する方法はいくつかあります。コンテキストメニューは実行中のアプリのコンポーネントを右クリックした場合にのみ表示されるため、[設計ビュー] では Figure に表示されません。そのため、コンテキストメニューを編集するためのワークフローは、他のコンポーネントと少し異なります。以下の節で、コンテキストメニューの作成と編集の方法について説明します。

コンテキストメニューの作成

コンテキストメニューを作成するには、それを [コンポーネントライブラリ] から UI Figure または他のコンポーネントにドラッグします。これにより、コンテキストメニューがそのコンポーネントの ContextMenu プロパティに割り当てられます。作成したコンテキストメニューは、Figure の下にあるキャンバス上の領域に表示されます。この [コンテキストメニュー] 領域には、作成した各コンテキストメニューのプレビューと、割り当てられているコンポーネントの数が示されます。次の例は、キャンバスで 1 組のコンテキストメニューがどのように表示されるかを示しています。

Context Menus area on the canvas showing three context menus.

作成したコンテキストメニューをコンポーネントに割り当てない場合は、代わりに [コンテキストメニュー] 領域にドラッグします。

あるいは、特定のコンポーネントを右クリックして [コンテキストメニュー] 、 [新規コンテキストメニューの追加] を選択することにより、コンテキストメニューを作成してそのコンポーネントに割り当てます。

すべてのコンテキストメニューは UI Figure の子として作成され、[コンポーネントブラウザー] に追加されます。これはコンテキストメニューがコンポーネントに割り当てられていない場合も同様です。

コンテキストメニューの編集

コンテキストメニューを編集するには、[コンテキストメニュー] 領域でコンテキストメニューをダブルクリックするか、コンテキストメニューを右クリックしてメニュー名の編集オプションを選択します。これにより、コンテキストメニューが [コンテキストメニュー] 編集領域に表示され、メニュー項目とサブメニューの編集と追加ができます。

Context Menus editing area

編集が終了したら、戻る矢印 ([<]) をクリックして、編集領域を終了します。

コンテキストメニューの割り当ての変更

コンテキストメニューとコンポーネントの関連付けを解除するには、コンポーネントを右クリックして [コンテキストメニュー] 、 [コンテキストメニューの割り当ての解除] を選択します。

コンポーネントに割り当てられているコンテキストメニューを別のものに置き換えるには、コンテキストメニューをコンポーネントにドラッグするか、コンポーネントを右クリックしてから [コンテキストメニュー] 、 [置換] をクリックし、作成した他のコンテキストメニューのいずれかを選択します。作成したコンテキストメニューが 1 つのみの場合、[置換] オプションは表示されません。

あるいは、[コンポーネントブラウザー] でコンポーネントを選択し、コンポーネントのタブで [双方向性] を選択します。次に、[コンテキストメニュー] ドロップダウンリストを展開し、コンポーネントに割り当てる別のコンテキストメニューを選択します。