UX-Studioは、Application Frame、Project Explorer、Form Design、Properties及びMessageウィンドウに区分されます。
構成要素 | 説明 | |
|---|---|---|
1 | Application Frame | Menu Bar、Toolbar、TextStyle Bar、Alignment Bar、Component Bar、Debug Bar、Source Control Bar、HTML5 Bar、Bookmark Bar、Statusbarなどを表示 |
2 | Project Explorer | 作業中のProjectの構成を表示 |
3 | Form Design | Design、Source、Scriptの編集 |
4 | Properties | Form及び各種Component、Datasetなどの属性及びイベントの属性を表示、編集 |
5 | Message Window | 各種メッセージ及び検索結果を表示 |
Application Frame
Application FrameにはUX-StudioのMenuやToolbarなどが含まれ、現在のUX-Studioの状態を表示するStatusbarがあります。
Statusbarに表示されるUX-Studioの状態値は次の通りです。
状態 | 機能 |
|---|---|
UX-Studioの状態を表示するMessage Bar | |
選択されたComponentのFormの座標(単位：Pixel) | |
選択されたComponentのサイズ(単位：Pixel) | |
現在のファイルの状態 | |
スクリプト挿入モードの状態 | |
<CAPS LOCK> 設定/解除の状態 | |
<NUM LOCK> 設定/解除の状態 | |
<SCRL LOCK> 設定/解除の状態 |
Project Explorer
Project Explorerではオープンしたプロジェクトに含まれる全ての項目をツリー形態で表示し、Project Explorerの構成は下記の通りです。
説明 | |
|---|---|
1 | Projectに含まれた項目の中から検索語として素早く検索できるEditウィンドウ |
2 | Editウィンドウに入力された値と一致する項目だけ表示するFilter機能 |
3 | リストウィンドウに適用されたFilterをClear |
4 | Filter機能を適用するSevice Group |
5 | 編集同期化機能 |
6 | TypeDefinition、GlobalVariables、ADL、FDLなどのリストウィンドウ |
Project Explorerで表示される項目は、大きくComponent、Service、UpdateのPrefixを登録するType Definition、Projectのどこからでも使用可能な変数を登録するGlobalVariables、StyleやTheme、MainFrame、Tray、Widgetなど、Projectの全般的な部分を管理するADL(Application Definition Language)、FormのグループであるServiceに区分され、編集可能な項目をダブルクリックするか、Popup Menuを利用して項目に合った編集機を呼び出して作業することができます。
Form Design
Form Designウィンドウでは、プロジェクトで使用可能なコンポーネントで応用プログラムの各画面を作成します。Form Designウィンドウは、DesignウィンドウとSource Editor、Script Editorで構成されます。
Design
開発者が置きたい場所にコンポーネントを配置することができ、それぞれのコンポーネントをカット、コピー、ペースト及び移動したり揃えて画面を構成します。コンポーネントを配置するForm Canvas領域は開発者が任意でサイズを変更することができます。
Source
Source編集ウィンドウでは、Formの内容のうち、Script領域を除く全ての内容がXML形態で表示され、表示されたXMLを直接、編集してFormの内容を変更することができます。
Script
Script編集ウィンドウでは、Form及び各種コンポーネントのEvent処理関数とユーザー関数をJavaScriptで作成します。
Properties
Propertiesは、編集中のFormやComponent、Datasetなどに関するプロパティの値、及びEvent項目を表示させて編集することができます。
Component List
編集中のFormが持つ全てのComponent、Dataset、Animation EffectなどをComponent ID (Type)形式でリストに表示します。
Toolbar
Group Sort/Alphabet Sort
選択されたオブジェクトのアトリビュートやイベントをグループ別に並べて編集するGroup Sort画面です。グループ別に編集するときは、図のように ‘+’や ‘-‘をマウスでクリックして項目を表示したり消したりすることができます。
選択されたオブジェクトのアトリビュートやイベントをタイトル順に並べて編集するAlphabet Sort画面です。
Attribute/Event List
選択されたオブジェクトのアトリビュートを編集するAttribute画面です。
選択されたオブジェクトのイベントを編集するEvent画面です。
Property Bind
選択されたオブジェクトのプロパティにDatasetをバインドする画面です。
Pseudo List
選択されたオブジェクトがコンポーネントである場合だけ活性化され、disabled、focusedなど、コンポーネントの状態別にデザインを確認することができます。
Style Property Editor
PropertiesウィンドウのStyle属性を直観的に入力、修正できる編集ウィンドウで、Style Property Editorで入力、修正された値は、Propertiesウィンドウに自動的に変更されます。Style Property Editorは、下記のように構成されています。
属性 | 説明 | |
|---|---|---|
1 | Component List | 編集中のFormが持つ全てのComponent、Dataset、Animation EffectなどをListに表示 |
2 | Pseudo List | 選択されたComponentの各Pseudo別にStyle Propertyを修正できるようPseudo Listを表示 |
3 | Style Property | ComponentのStyle Propertyリストを直観的に修正できるよう表示 |
詳細は、Style Property Editorを参考にしてください。
Message Window
Output
UX-Studioでの作業中に発生する可能性のある各種メッセージを表示します。メッセージには、各種エラー、進行過程の表示メッセージなどが含まれます。
Debug
Debugウィンドウは、デバッギングモードで発生するメッセージを表示します。
Find Results
Find in Files命令の処理過程を表示します。表示された各ファイルをダブルクリックすると、該当の編集ウィンドウが開き、該当のラインが表示されます。Find in Files検索ウィンドウで‘Find results 2 window’のチェックオプションに従って‘Find Results 1’ または‘Find Results 2’に結果を表示します。
Global Bookmark
SourceまたはScript編集ウィンドウで使用されたBookmarkリストを表示します。リストに表示されたBookmarkをダブルクリックすると、編集ウィンドウが開いて該当のラインが表示されます。
アイコン | タイトル | 説明 | |
|---|---|---|---|
1 | Toggle Bookmark | カーソルの位置するBookmarkを設定及び 解除 | |
2 | Previous Bookmark | 前のBookmarkを検索してカーソルを位置 | |
3 | Next Bookmark | 次のBookmarkを検索してカーソルを位置 | |
4 | Previous Bookmark in Document | 現在の編集ウィンドウで前のBookmarkを 検索してカーソルを位置 | |
5 | Next Bookmark in Document | 現在の編集ウィンドウで次のBookmarkを 検索してカーソルを位置 | |
6 | Clear Bookmark | 設定されたBookmarkを全て解除 | |
7 | Clear Bookmark In Document | 現在の編集ウィンドウで設定された Bookmarkを全て解除 |
Project Filterのオプションを調節してBookmarkリストをフィルターすることができます。また、下記のオプション以外にBookmarkを持ったProjectリストがオプションウィンドウに追加として表示されます。
オプション | 説明 | |
|---|---|---|
1 | Show All Bookmarks | UX-Studioで設定された全てのBookmarkをリストに表示 |
2 | Show Bookmarks that marked in Current project only | 現在のProjectに該当するBookmarkだけ リストに表示 |
Global BookmarkウィンドウでBookmarkを設定、解除する場合、該当の編集ウィンドウにすぐ反映され、Bookmarkリストは各PCのUX-Studio毎に管理するため、他の場所で作業されたプロジェクトをコピーして作業する場合、Bookmarkは表示されません。
Debug Window
Breakpoints
Script編集ウィンドウで使用されたBreakpointリストを表示します。リストに表示されたBreakpointをダブルクリックすると、編集ウィンドウが開き、該当のラインが表示されます。
メニュー | アイ コン | 機能 | |
|---|---|---|---|
1 | Go To Source | 選択されたBreakpointに該当する編集ウィンドウが開き、該当のラインを表示 | |
2 | Delete | Breakpointsウィンドウで選択されたBreakpointを解除 | |
3 | Delete All | 全てのBreakpointを解除 | |
4 | Enable/Disable | Breakpointsウィンドウで選択されたBreakpointを活性化/非活性化 | |
5 | Enable/Disable All | 設定された全てのBreakpointを活性化/非活性化 |
Breakpointリストは各PCのUX-Studio毎に管理するため、他の場所で作業されたプロジェクトをコピーして作業しても、Breakpoint情報はコピーされません。
Call Stack
UX-Studioでデバッグする際にスクリプト関数が呼び出された順序を表示するメッセージウィンドウです。Call Stackで項目をダブルクリックすると、編集ウィンドウが開き、該当のラインが表示されます。
Column | 説明 | |
|---|---|---|
1 | Function | 現在、カーソルが位置する関数名 |
2 | Filename | 関数が位置するファイル名 |
3 | Line | ファイルラインの番号 |
Variables
UX-Studioでデバッグする際にカーソルが位置する関数で使用される変数を表示するウィンドウです。
Column | 説明 | |
|---|---|---|
1 | Name | 変数名 |
2 | Value | 変数に保存されたValue |
Watch
UX-Studioでデバッグする際にユーザーがScript内で使用された変数を簡単に確認するためにユーザーが直接、Watchウィンドウに変数名を入力して確認することのできるウィンドウです。
Column | 説明 | |
|---|---|---|
1 | Expression | ユーザーが入力した変数名 |
2 | Value | 変数に保存された値 |