コンポーネント

コンポーネント配置

Component Toolbarからコンポーネントを選択し、フォーム上に配置することができます。

Component Toolboxからも、Component Toolbarと同じように、クリックとドラッグ操作でコンポーネントを配置することができます。Component ToolboxではType Definitionに定義されているコンポーネントが表示され、 [View > Toolbox]から選択することで活性化します。

よく使用されるコンポーネントは下記のとおりです。

フォームデザインのキャンバスの任意の場所でマウスをドラッグすると、Rubber Bandが四角形に表示され、四角形のスタートポインタの位置と最後のポインタの位置、横幅と高さの情報を表示して、ユーザーがコンポーネントのサイズを調整する作業をサポートします。

マウスでドラッグした領域のサイズでコンポーネントが生成されます。もし、マウスをドラッグせずに、クリック操作を行うと、Type Definitionで定義したコンポーネントのデフォルトサイズで生成されます。

アプリケーション開発時に使用される、画面上に表示されないコンポーネントを個別に管理することができるInvisible Objects領域が提供され、フォームデザイン作業時に各コンポーネントのプロパティを設定することができます。

Invisible Layoutウィンドウが表示されない場合は、デザインウィンドウの[Popup Menu]で「Show Invisible Object Area」メニューからInvisible Layoutウィンドウを表示することができます。

Invisible Layoutでは、アイコン表示の方法などを下記の図のようなポップアップメニューでサポートします。

選択の変更

フォームのデザイン時に、キーの組合せキにより、さまざまな方法でコンポーネントを選択することができます。

<Tab>キーを使用し、現在選択しているコンポーネントを別のコンポーネントに変更することができます。移動の順序はコンポーネントのtaborderの順序のとおりになりますが、<Shift + Tab>キーを使用した場合はtaborderの逆順に移動します。

<Ctrl>キーまたは<Shift>キーを使用し、選択項目を追加したり、解除することができる多重選択機能をサポートします。

マウスでドラッグすると、選択した領域内にあるコンポーネントが全て選択されますが、<Shift>キーを押しながらマウスでドラッグすると、既存の選択項目は解除され、未選択だった項目が選択されます。

コンポーネントが選択されている状態で<ESC>キーを押した場合、選択したコンポーネントの上位のコンポーネントを選択することができます。

サイズの変更

コンポーネントのTrackerのポイントが活性化した状態で、ポイントの1箇所をマウスでドラッグ&ドロップすると、コンポーネントのサイズを変更することができます。

複数のコンポーネントが選択されている場合は、同じ比率でコンポーネントのサイズが変更されます。

<Shift>キーを押した状態でマウスでサイズを変更すると、同一の縦横比率でサイズが変更されます。

<Ctrl>キーを押した状態でマウスでサイズを変更すると、コンポーネントの中央の座標を基準に、上下または左右に同じサイズで変更されます。

<Shift + Ctrl>キーを押した状態でマウスでサイズを変更すると、２つの機能が同時に適用され、コンポーネントの中央の座標を基準に、横幅と高さが同じ比率で変更されます。

マウスを使用せずに、<Shift>キーを押した状態でキーボードの方向キーを使用し、コンポーネントのサイズを変更することもできます。

位置の変更

選択したコンポーネントはキーボードの方向キーまたはマウスドラッグ操作で移動することができ、変更した座標値はプロパティにリアルタイムで反映されます。また、<Ctrl>キーを押した状態でマウスで移動させると、移動先にコンポーネントをコピーすることができます。

フォームデザインでコンポーネントを移動したりサイズを変更するときに、微調整をサポートするために、他のコンポーネントやDot Gridに近づけると、自動的にその場所に配置させてくれる磁石(Magnetic)機能をサポートします。

磁石機能は、メニュー[Tools - Options - Form Design]の設定値により、Dot Gridまたは他のコンポーネントに対して有効にするかどうかを指定することができます。

Tab Order

アプリケーションの実行中に<Tab>キーを押した際に、コンポーネントから別のコンポーネントにフォーカスが移動する順序を設定します。

Tab Order Edit

デザインウィンドウから<Ctrl + D>キーを押すか、デザインウィンドウの[Popup Menu]のTab Order Editメニューからタブ順序を編集することができます。

マウスカーソルを特定のコンポーネントの上に置くと、コンポーネントが赤に強調して表示され、「Next Taborder」値に該当するコンポーネントは、マウスカーソルが位置していなくてもオレンジ色に強調して表示されます。また、複数のコンポーネントが重なった場合には、コンポーネントが並べた状態に表示され、各コンポーネントのタブ順序を編集することができます。

Tab Order Editモードでは、以下のようなコンテキストメニューをサポートします。

Tab Order List

リスト形式でコンポーネントの Tab Orderを確認し、変更することができます。複数の項目を選択し、下段のボタンを使用して、希望する順序で Tab Orderを変更することができます。

メニューから [ Design > Tab Order List ] または デザインウィンドウの[Popup Menu]のTab Order Listメニューからタブ順序を編集することができます。

Tab Order View

現在の画面に設定したタブの順序を確認する機能です。デザインウィンドウの[Popup Menu]のTab Order Viewメニューを選択すると、トグル形式で該当機能をオンまたはオフにすることができます。機能が有効である場合、以下の図のようにコンポーネントの左上に2つの数字が表示されます。

青色の四角の中に表示される数字は、タブの順序を表示します。コンポーネントのtaborderプロパティまたは「Tab Order Edit」機能を使用して順序を変更することができます。

緑色の四角の中に表示される数字は、コンポーネントのZ-Orderを表示します。Z-Orderは、コンポーネントが重なっているときの表示順序を指定します。数字が大きいコンポーネントが最前面に表示されます。

Z-Orderは、Alignツールバーの「Bring to Front」、「Send to Back」、「Bring Forward」、「Send Backward」の4つの機能から変更するか、SourceタブからXMLコードの順序を変えて変更することができます。

Guide Line

ガイドラインはルーラーからサポートする機能で、開発者が任意で水平または垂直にガイドの線を生成し、コンポーネントを揃えるなどの機能をサポートします。

ルーラー上で生成したい地点をマウスでクリックするとガイドラインを生成することができ、マウスのドラッグにより位置を変更することができます。ガイドラインは、デザインウィンドウの領域外にドラッグ&ドロップしたり、ガイドラインの逆三角マークをダブルクリックして削除することができます。

プロパティの設定

フォームデザインで選択したコンポーネントのプロパティは、Propertiesウィンドウに表示され、Propertiesウィンドウで値を変更した場合、コンポーネントにリアルタイムで適用されます。

プロパティが下位プロパティを持っている場合は、拡張可能なアイコンがプロパティの前に表示されます。プロパティは下位プロパティとの同期化により、上位と下位のどちらかを修正すると、もう片方に自動的に反映されます。

画面上に表示されるコンポーネントは、Styleのプロパティを修正してコンポーネントの見た目を変更することができます。

フォント設定

textプロパティを持っていて、フォントが指定できるコンポーネントは、fontプロパティを指定することができます。

nexacro platformアプリケーションでは、フォントを埋め込まずに、ユーザーのOSにインストールされたフォントを使用します。アプリケーションの開発時に優先度をつけて複数のフォントを指定すると、使用可能なフォントを検索することが可能です。

データとイベント処理

Bind

フォームデザインでは、生成したDatasetをコンポーネントにドラッグ&ドロップしたり、Propertiesウィンドウのバインド関連プロパティからデータをバインドすることができます。

ドラッグ&ドロップでコンポーネントにDatasetをバインドした場合、コンポーネントの種類によりInner Bind DatasetまたはBind Item Editor機能が呼び出されます。

Inner Bind Dataset

リストボックスやコンボボックスのようにリスト形式でデータを表示できるコンポーネントにDatasetをバインドする場合、カラムを指定できるInner Bind Dataset機能が呼び出されます。

Bind Item Editor

EditやButtonなど、単一の項目のみを表示するコンポーネントにDatasetをバインドする場合、Bind Item Editor機能が呼び出されます。

Datasetがフォームやコンポーネントにバインドされると、図のようにProject Explorerのアイテムに表示され、簡単に確認することができます。

Grid Contents Editor

Gridコンポーネントは、Propertiesウィンドウで表示される属性以外に、グリッドを構成する各セル単位の属性を持っています。Grid Contents Editorは、Gridの追加的なプロパティを編集する機能を提供します。

デザインウィンドウでGridコンポーネントをダブルクリックすると、Grid Contents Editorが表示されます。

Grid Contents Editorは、基本編集ウィンドウ、プロパティウィンドウ、Design Sourceで構成されます。基本編集ウィンドウでは、コンテキストメニューとショートカットキーを使用し、セルを追加/削除したり、プロパティを編集することができます。基本編集ウィンドウの最上段にはカラムインデックスが表示され、その下にHead、Body、Summaryに区分して表示されます。プロパティウィンドウには、セル区分、該当セルのプロパティリスト、各プロパティ値が表示されます。

基本編集ウィンドウのコンテキストメニューからColumnとRowを追加することができます。

Cellを選択した状態では、以下のようなコンテキストメニューがサポートされます。

Design Sourceでは、Grid ContentsをXML形式で表示し、直接編集することができます。

イベントの作成

イベントを編集するコンポーネントを選択した状態でPropertiesウィンドウのイベント編集モードを選択して、コンポーネントのイベントを作成することができます。イベントはユーザーが直接入力して作成することもできますが、Propertiesの該当イベントをダブルクリックすると、自動的にイベントを生成することができます。

また、フォームデザイン上のコンポーネントをダブルクリックすると、該当するコンポーネントのClickイベントが自動的に生成されます。

画面レイアウト

nexacro platformは多様なサイズのデバイスに対応する画面デザインをワンソースで開発できるMLM(Multi Layout Manager)機能を提供します。アプリケーションを構成するフォームは画面サイズにより複数のレイアウトを使用することができます。サブレイアウトを使用し、コンポーネントを再配置することができます。また、モバイルデバイスではstep機能を使用し、最適化した画面を構成することができます。

フォームレイアウト

新しいフォームを作成する際に、「New Form Wizard」からレイアウトを指定したり、フォームの作成後に、追加のレイアウトを指定することができます。フォームのレイアウトは、ユーザーが使用する環境の画面サイズにより最適化した画面構成を提供するために使用します。

画面構成

現在のフォームに追加したレイアウトをタブ形式で表示します。タブが表示される位置は、[Tools> Options> Form Design> Layout Manager> Layout Tab Style]の項目で、任意の位置に変更することができます。

追加した[レイアウト]タブを選択すると、そのレイアウトの画面に切り替わり、コンテキストメニューからレイアウトを追加または削除したり、全体のレイアウトリストを確認することができます。追加したレイアウトでは、赤い点線でフォームの実際の領域が表示されます。

現在のフォームで使用中のレイアウト情報は、フォーム画面またはProject Explorerからフォームを選択した際に表示されるコンテキストメニューからも確認することができます。

デザイン機能制限

「Default」タブでは、全ての機能が提供されますが、追加した「レイアウト」タブでは、一部のデザイン機能が制限されます。

プロパティウィンドウ

フォームのプロパティ中でheightとwidthプロパティは、レイアウトごとに変更することができ、トラッカーをマウスでドラッグしてサイズを変更した場合は、該当レイアウトのheight、widthプロパティ値にも自動的に反映されます。プロパティウィンドウで表示されるフォームのサイズに関連するプロパティ値は「Layout List」リストに表示される値と同じです。

「Default」タブと異なるプロパティ値を指定した「レイアウト」タブでは、設定値が太い青色で表示されます。プロパティウィンドウに表示される情報は、太さと色によって以下のような意味を持ちます。

サブレイアウト

コンポーネントの内部にコンテンツを持つDiv、PopupDiv、TabPageコンポーネントもフォームと同じように、複数のレイアウトを持つことができます。フォームのレイアウトと区別して、サブレイアウト(Sub Layout)と表現します。サブレイアウトはフォームレイアウトとは別途構成されます。 Tabコンポーネントを使用すると、TabPageごとに異なるサブレイアウトを構成することができます。

フォームに追加したレイアウトでは、Divに含まれたButtonコンポーネントを直接編集することができません。そのため、該当コンポーネントのサイズに合わせた最適化した画面レイアウトを必要とします。サブレイアウトを適用すると、フォームのレイアウトが変更されながら対象コンポーネントのサイズが変更され、これにより、サブレイアウトも一緒に変更されて、最適化された画面を実装することができます。

レイアウトオプション

追加したレイアウトでDivのようなコンポーネントの内部に含まれたコンテンツを編集するためには、サブレイアウトエディタを使用します。

• Show Sub Layout Nameを選択すると、現在のコンポーネントに適用されたサブレイアウト名を確認することができます。

• Sub Layout Editメニューを選択すると、サブレイアウトを編集することができます。

• Set Sub Layoutメニューを選択すると、コンポーネントのサイズを、選択したサブレイアウトのサイズに変換します。設定したSub Layoutリストから選択することができます。

サブレイアウトエディタ

Set Sub Layoutメニューを選択、またはコンポーネントをダブルクリックすると、以下の図のようなサブレイアウトエディタが表示されます。 デフォルト･サブレイアウトは、選択したコンポーネントのサイズと同じです。

サブレイアウトエディタは、以下のような特徴があります。

• サブレイアウトエディタ上では、親コンポーネント(Divコンポーネント)領域を赤目盛りで表示します。

• フォームデザイン上では隠れていたサブコンポーネントも編集することができます。

• 該当コンポーネントと下位コンポーネントを除く他のコンポーネントは、選択、編集することができません。

• サブレイアウトのサイズは変更できますが、位置は変更できません。

下位コンポーネントを選択したときは、選択していないときとは異なるコンテキストメニューが表示され、下位コンポーネントを選択したときのコンテキストメニューはコンポーネントにより異なる場合があります。

プロパティウィンドウ

サブレイアウト内でのコンポーネントのスタイルと一部のプロパティを変更することができます。Divコンポーネントならdefaultサブレイアウトで修正した内容は<Div>タグに保存され、追加したサブレイアウトで修正した内容は、<Layout>に保存されます。

...
<Layouts>
     <Layout>
          <Div id="Div00" left="10" top="10" width="250" height="250" 
          style="background:red;">
               <Layouts>
                    <Layout width="250" height="250"/>
                    <Layout name="iOS" width="150" height="150" 
                    style="background:blue;"/>
               </Layouts>
          </Div>
     </Layout>
</Layouts>
...

Step

Stepとは、段階的に構成されたページを一つのフォームで開発することができる機能を意味します。フォームの stepcountプロパティ値を指定すると、以下の図のように複数のページが表示されます。

stepcount

1. 現在編集中のStep領域を表示します。マウスポインタの位置により、編集領域が変更されます。

2. 各Step領域は青色の点線で区切られて表示されます。

positionstep

• コンポーネントにpositionstepプロパティが追加で表示されます。positionstepプロパティは該当コンポーネントの所属Stepを表します。

• コンポーネントのpositionは「positionstep + position」で適用されます。

• コンポーネントのpositionは指定したpositionstepを基準に設定されます。

• コンポーネントが全てのStep領域を離れると、positionstep0として処理されます。

• positionstepが-1の場合には、全てのStepに表示されます。

  • -1のpositionstepコンポーネントは、全てのStep領域から選択および編集することができます。

  • -1のpositionstepコンポーネントは、現在編集中のStepではない場合、実際のコンポーネントより若干透明に表示されます。

  • -1のpositionstepコンポーネントは、全てのStepから該当Stepで表示されるコンポーネントを選択および編集することができます。

...
    <Layouts>
      <Layout width="300" height="450" stepcount="3">
        <Button id="Button00" text="Button00" 
          left="60" top="60" width="120" height="50"/>
        <Button id="Button01" text="Button01" 
          left="60" top="60" width="120" height="50" positionstep="1"/>
        <Button id="Button02" text="Button02" 
          left="60" top="60" width="120" height="50" positionstep="2"/>
        <Button id="Button03" text="Button03" 
          left="60" top="160" width="120" height="50" positionstep="-1"/>
      </Layout>
    </Layouts>
...

Position

nexacro studioでは、フォームや各コンポーネントの位置をleft、top、right、bottom、width、heightプロパティの値を指定することができます。各プロパティ値は、ピクセル単位(px)またはパーセント(％)のいずれかを選択することができます。

トラッカー

コンポーネントを選択したとき、positionプロパティで選択した位置のトラッカー(Tracker)は赤い色で表示されます。

ルーラー / Dot Grid

フォームデザインでレイアウトの配置を容易にするために、ルーラーの単位をpositionの単位に合わせてピクセルとパーセントから選択することができます。

ルーラーのコンテキストメニューからShow Pixel Ruler/ Show Percent Rulerを選択した場合、ルーラーの表示単位とDot Gridの表示方法が変更されます。

コンポーネントを1つだけ選択しサイズを変更した際は、サイズ情報を表示します。このとき表示されるサイズの単位は、ルーラーの表示単位と同じです。

ポジションエディタ

ユーザーが簡単にPositionの情報を設定できるように、専用エディタを提供しています。ポジションエディタはコンポーネントを選択した際に表示されるミニツールバーから実行することができます。

ポジションエディタで修正した値は、該当コンポーネントのleft、top、right、bottom、width、heightプロパティ値に反映されます。

プロパティウィンドウ

プロパティ･ウィンドウで、left、top、right、bottom、width、heightプロパティ値の単位を変更することができます。