コンポーネントの生成

フォームデザインでは、コンポーネントバーで選択されたコンポーネントを生成することができます。 Component Toolboxを活性化するためには、メニューからView > Toolboxを選択する必要があります。

Type Definitionに定義されたコンポーネントを集めたComponent Toolboxを使用して同一にClick&Dropでコンポーネントを生成することができます。

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

フォームデザインの何もないところでマウスをドラッグすると、Rubber Bandが四角形に表示され、四角形のスタートポインタの位置と最後のポインタの位置及び広さと高さの情報を表示して生成されるコンポーネントのサイズを調節するとき、ユーザーが予め推測できるようサポートします。

最終的にマウスでドラッグした領域のサイズでコンポーネントが生成されます。もし、マウスをドラッグしない状態でクリックだけすると、Type Definitionに定義されたコンポーネントのデフォルトサイズに生成されます。

フォームデザインで使用はできますが、Designが別に必要のないコンポーネントは属性を入力、修正、削除などの作業ができるようコンポーネントを表示するInvisible Objectsが提供されます。

Invisible Layoutウィンドウが表示されない場合は、Design Window[Popup Menu]で‘Show Invisible Object Area’ メニューを利用してInvisible Layoutウィンドウを表示することができます。

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

選択の変更

Form Designでは、組合せキーを利用して様々な方式のコンポーネントSelectionをサポートします。

<Tab>キーを利用して現在、選択されたコンポーネントを別のコンポーネントに変更することができます。移動の順序は、コンポーネントのZ-Orderの順序に従って移動し、<Shift + Tab>キーを利用する場合、Z-Orderの逆順に移動します。

<Ctrl>キーまたは<Shift>キーを利用してSelectionの追加及び解除ができるMulti Selectionをサポートします。.

<Shift> + RubberBand Selectionを利用して領域内のコンポーネントSelectionの追加及びReverse Selectionができます。

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

サイズの変更

コンポーネントのTrackerのポイントが活性化された状態で一つのPointをマウスでDrag&Dropすると、コンポーネントのサイズを変更することができます。

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

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

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

<Shift + Ctrl>キーを押した状態でマウスでサイズを変更すると、二種類の機能が同時に適用されます。

コンポーネントのサイズの変更は、<Shift>キーを押した状態でキーボードの方向キーを入力して変更することもできます。

位置の変更

選択されたコンポーネントはキーボードの方向キーで移動することができ、変更された座標はプロパティにリアルタイムで適用されます。また、<Ctrl>キーを押した状態でマウスで移動すると、その場所にコンポーネントがコピーされます。

Form Designでは、Option値に従ってコンポーネントを移動したり、サイズを変更するとき、微妙な調整を簡単にするために、別のコンポーネントやGuide Lineの近くに持っていくと、自動的に該当位置に移動するMagnetic機能をサポートします。

Magnetic機能は、メニュー[Tools - Options… - Design]のOption値に従ってCanvasのDotまたは別のコンポーネントに対して動作するかを設定することができます。また、<Alt>キーを押した状態でコンポーネントを移動する場合、Magnetic機能を使用しないこともあります。

Guide Line

Guide LineはRulerでサポートする機能で、開発者が任意で水平/垂直にLineを生成し、LineにComponentを揃えるなどの機能をサポートします。

Ruler上の生成したい地点をマウスのクリックでGuide Lineを生成することができ、生成されたGuide Lineは、マウスのドラッグで位置を変更することができます。Guide Lineは、Design Windowの領域外にDrag&Dropしたり、Guide Lineの逆三角形をダブルクリックして削除することができます。

Tab Order

生成されたDesignがLaunchされ実行されているとき、<Tab>キーを押してコンポーネントから別のコンポーネントに移動する順序を設定します。

Design Windowが活性化されているときに<Ctrl + D>キーを押すか、Design Window[Popup Menu]のTab Order Editメニューによって機能を実行することができます。

プロパティの設定

Form Designで選択されたコンポーネントのプロパティは、Properties Windowに表示され、Properties Windowで値を変更する場合、コンポーネントにすぐ適用されます。

プロパティが下位プロパティを持っている場合は、Expandが可能なIconがプロパティの前に表示されます。プロパティは下位プロパティと同期化されており、プロパティを直接、修正したり、下位プロパティを修正すると、もう一方にも自動的に反映されます。

Bind

フォームデザインでは、生成されているDatasetをコンポーネントにDrag&Dropしたり、Properties Windowのバインドモードを選択し、選択されたコンポーネントをバインドすることができます。

Drag&DropでコンポーネントにDatasetをバインドする場合、コンポーネントの種類によってInner Bind DatasetまたはBind Item Editor機能が呼び出されます。

Inner Bind Dataset

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

Bind Item Editor

エディットやボタンなど、単一の項目だけ表示が可能なコンポーネントにDatasetをバインドする場合、Bind Item Editor機能が呼び出されます。

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

イベントの作成

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

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

Transform

フォームデザイン上のコンポーネントを回転させたり傾けるなど、コンポーネントの形態を変化できるTrasform機能をポップアップメニューでサポートしています。

Transform機能が活性化されると、図のように選択されたコンポーネントの周辺に赤いMarkerが生成され、該当のMarkerをドラッグしてコンポーネントを回転させたり傾けることができます。

コンポーネントは白い円で表示される回転軸を中心に回転し、回転軸はマウスのドラッグで動かすことができます。

Graphic Path Componentの使用方法

PathData情報によって線及び曲線を表示できるコンポーネントで、SVG(Scalable Vector Graphics)のPathスペックを同様にサポートします。

GraphicPath Edit開始

GraphicPath コンポーネントが選択された状態でサポートされる‘GraphicPath Edit’ポップアップメニューを選択してGraphicPathを編集することができます。

PathDataの追加

GraphicPath Componentの左側上段を起点として、好きな場所でマウスをクリックするか、ポップアップメニューによってPathDataを追加してユーザーが描きたい形態に構成することができます。

PathDataの修正

マウスのクリックやポップアップメニューによって追加されたPathDataは、マウスやキーボードの方向キーで位置の変更及び直線を曲線に、または曲線を直線に変更することができます。

変更するPathDataをクリックして活性化すると、PathDataのPointがグレーから黒に変わります。

同じ位置に多数のPathDataが存在するためクリックで選択することが難しい場合、<Tab>キーを使って選択することができ、<Shift + Tab>キーを使って逆順で選択することもできます。

選択されたPathDataをマウスで起きたい位置にドラッグするか、キーボードの方向キーで1Pointずつ移動して位置を変更することができます。

それぞれのPathDataは、曲線を表示するためにControl Pointを持っています。最初のLineを生成するとき、Control Pointは座標Pointの後に位置するため、Control Pointを変更するためには、Pointを<ALT>キーを押した状態でマウスでクリックし、Control Pointを選択した後にマウスのドラッグで位置を変更して曲線を表示することができます。

Control Pointは、<Ctrl>キーを押した状態でマウスでドラッグして移動すると、つながった他のControl Pointがマウスの移動方向と反対方向に対称移動します。

Control Pointは、<Shift>キーを押した状態でマウスでドラッグして移動すると、つながった他のControl Pointがマウスが移動する方向と同じ方向に同時に移動します。

PathDataの削除

選択された特定のPathDataを削除したり、全体のPathDataを削除することができます。中間にあるPathDataを削除する場合、前後のPathDataがつながります。

GraphicPath Editの終了

<Enter>キーまたはPopupメニューの‘End Edit’を選択して追加、修正、削除されたPathDataを適用して終了するか、<ESC>キーまたはポップアップメニューの‘Cancel Edit’を選択して追加、修正、削除されたPathDataをキャンセルして終了することができます。

Style Attribute

Form Canvas上にVisibleした表示となるコンポーネントは、Style Attributeを表示し、それぞれのAttributeを修正してコンポーネントのStyleを変更することができます。

Layout Manager(V9.2追加)

‘New Form Wizard’で入力した Layouts情報がタブ形態として表示されるようにForm Designの機能が変更されました。

Layout Tab

現在、フォームで使用される Layoutがタブに表示されます。タブの位置はオプションでユーザーが変更できます。

タブを切り替えて、‘New Form Wizard’で入力した Layoutに画面の切り替えが可能であり、Layoutについた修正機能をポップアップメニューに提供します。

Design.

‘Default’タブではすべての機能が提供されますが、追加された‘Layout’タブでは一部のデザイン機能が制限されます。

現在フォームで使用中のLayoutの情報を修正できる機能がポップアップメニューに追加されました。

‘Default’タブでコンポーネントのプロパティ値が変更された場合に、変更された内容を他のLayoutに適用するかを確認するメッセージウィンドウがポップアップされます。

‘Default’タブで修正されて他のLayoutに適用するかを確認するメッセージウィンドウは、以下の条件に全部該当する場合にのみポップアップされます。

‘Default’タブで修正されて他の Layoutに適用するかを確認するメッセージウィンドウで‘Don’t ask me again’をチェックした状態で‘Yes’や‘No’を選択する場合、‘Layouts Edit’オプション値が変わりながら以降にはメッセージウィンドウがポップアップされません。

Properties Windows

フォームデザインの情報を Propertiesウィンドウで表示している場合、Layoutタブによって表記方法が変わるようになります。

フォームデザインが追加されたLayoutタブでありながら Form Propertiesが表示される場合は、Layout情報が Propertiesウィンドウに追加で表示されます。

• Default Layoutタブでは、Form Propertiesの中で‘position’情報を修正すると、Multi Layoutを使用する場合に‘height’と‘width’が現在のサイズに合わせて設定されます。 Default Layoutタブで、‘height’と‘width’は hiddenプロパティです。Trakerを使用してサイズを変更する場合‘position’と‘height’と‘width’情報が全部変更されます。

• 追加された Layoutタブでは、Form Propertiesの中で‘position’情報を修正することができませんが、‘Layout Information’情報である‘height’と‘width’を変更してサイズを変更することができます。Trakerを使用してサイズを辺こする場合、‘position’情報は保存せず‘height’と‘width’情報のみ保存されます。

• ‘Layout Information’に表示される Propertiesは、‘Layout List Dialog’と同じです。

• フォームデザインの‘Default’タブと異なる情報を持っている追加されたLayoutタブでは、プロパティを 太い青で表示するようになりました。従って、Propertiesウィンドウで表示する情報は、 Windowで表示する情報は、 太さと色に応じて以下のような意味を持つことになります。

• Form Designの追加された Layoutタブで、プロパティを表示する場合に以下のプロパティは修正できないように disable処理されます。

Sub Layout

コンポーネント内部にコンテンツを持っている Div, PopupDiv, TabPageなどもフォームのように Multi Layoutを持つことになり、これを Sub Layout と呼びます。Sub Layoutは、Form Layoutと1:1のマッチングではなく、別のMulti Layoutを構成します。タブの場合は、タブページごとに異なる​​Multi Layoutを構成することができます。

• Sub Layoutを持っているコンポーネントは、自分の Sub Layoutの中で該当コンポーネントのサイズに合わせて最適化された Sub Layoutを自動的に表示します。

• Targetコンポーネントのサイズが変更された場合、自動的に Sub Layout Changeが発生し、新たなサイズに合わせて最適化された Sub Layoutを検索します。

Sub Layoutを持っているコンポーネントのサブコンテンツは、フォームの Default Layoutでのみ直接編集が可能です。(既存の編集方法と同一)

直接編集される内容は、該当コンポーネントが表示している Sub Layoutに保存されます。

ただし、Defalut Layout以外の追加 Layout (例: 上記の図で iPhoneW Layout)では、コンテンツの直接編集が不可です。従って、サブコンテンツは、選択及び修正ができないし、サブコンテンツの選択時、最上位のコンポーネントが選択されます。追加Layoutで、コンテンツを編集するにはSub Layout Editorを使用して編集する必要があります。

追加 Layoutで、コンテンツを編集するためには、Sub Layout Editorを使用して編集する必要があります。Sub Layoutを持つコンポーネントは、Sub Layout Edit, Set Sub Layout の二つのポップアップメニューを提供します。

• Sub Layout Editメニューを選択すると Sub Layoutを編集することができます。

• Set Sub Layoutメニューを選択するとコンポーネントのサイズを選択した Sub Layoutのサイズに変換します。Set Sub Layoutメニューは、defrault Sub Layout以外の Sub Layoutが存在する場合のみ表示されます。

Sub Layout Editメニューを選択すると、以下図のような Sub Layout Editorが表示されます。

• Link Urlを持っているコンポーネントは、Sub Layout Editorを実行することができません。

• Contents Editorと同じようにダブルクリックでも実行することができます。

• 最初 Sub Layout Editorの実行時、現在の Targetコンポーネントのデフォルトサイズが default Sub Layoutのサイズになります。

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

• スクロールに包まれて表示されなかったコンポーネントも編集可能です。

• 該当コンポーネントのサイズに合わせてルーラが提供されます。

• Sub Layout Editorも Form Layoutのように デフォルト以外のLayoutでは、コンポーネントの生成などの一部の機能が制限されます。

• Sub Layout Editor専用のポップアップメニューが提供されます。

• コンポーネントを選択するとポップアップメニューが 若干異なって表示されます。

• Sub Layoutのサイズは変更できますが、Targetコンポーネントの Positionは変わりません。

• 各 Sub Layoutことに Targetコンポーネントのスタイル及び一部のプロパティを設定することができます。

  • default Layoutの修正内容は、<Div>などのタグ内に保存されます。

  • それ以外の下位 Sub Layoutの修正内容は、該当 <Layout>に保存されます。

• その他の Sub Layout Editorの操作関連事項

  • 各 Sub Layoutの中にあるサブコンテンツを持つコンポーネントは、 Form Designと同じように default Layoutでのみ編集することができます。

  • Sub Layout Editor内で、他の Sub Layout Editorは実行できません。

  • Contents Editorは実行できます。

  • その他のコンポーネントの操作のような場合、 Form Designと同じように動作します。

• Sub Layout Undo

  • Sub Layout Editorで、Undoは Form Designとは別に管理されます。

  • Sub Layout Eidtorの実行前の Undoは、Sub Layout Editorの中で使用できません。

  • Sub Layout Editorの中で 蓄積されたUndoは、Editorの終了と同時に消えたり、一度にForm Design Undo Listに追加されます。(Sub Layout Editorの中の編集内容を一つのUndoとして認識)

Step(V9.2追加)

Stepとは、複数の stepに構成されたページを一つのフォームで開発することができる機能を意味します。

フォームの stepcountプロパティ値を調整すると、以下の図のように stepが表示されます。

• 複数の stepがあっても フォームの実質的なサイズは変更されません。

• 実行時には、一つの Stepのみ表示されます。

Position2(V9.2追加)

position2とは、比率である“%”で Positionを指定することができるプロパティを意味します。UX-Studioで、Ruler, DotGrid（画面の下に表示される点）などのPosition2関連編集機能を提供します。

Tracker

コンポーネントの positiontypeを position2に設定する場合 trackerの形が異なって表示されます。

Positioin2 Trackerは、固定された辺を赤い色で表示してposition2の値を個別にチェックしなくても、Anchorの状態を知ることができます。

Ruler / Dot Grid

Position2は、パーセント入力をサポートするため、Form Design上で簡単に確認することができるようにパーセント単位で情報を表示する機能が追加されました。

ルーラのポップアップメニューで、Show Pixel Ruler / Show Percent Rulerを選択した場合、該当単位でルーラと Dot Gridの表示方法が変更されます。

Component Resize Info

コンポーネントを一つだけ選択した状態で、Trackerでれサイズする場合、リサイズされる情報を表示します。

もし、ルーラ単位がパーセントで表示中ならば Resize Infoもパーセント単位で表示されます。

Position Editor

ユーザーが簡単に Position情報を選定することができるように UIを持つエディタを提供します。Position Editorは、フォームデザインのミニツールバーで呼出すことができます。

Position Editorで修正された値は、対象コンポーネントが使用中の positiontypeに合わせた position, position2値に変更されて反映されます。

Properties Window

Propertiesウィンドウでは、追加された Position2の単位を歓談に変更することができるように px, %をサポートします。