[メニュー] View について (Toolbars)
※本記事は以下のサイトから転載し、翻訳をしたものになります（一部加筆修正しています）。
http://cafe.naver.com/xplatform101/38
Viewは、UXStudioの中で表示されるツールバーやステータス表示ウィンドウ、プロパティウィンドウ、ナビゲーションウィンドウなどを制御するところです。
基本的に、各Viewは、UXStudioを使用しているユーザーの状態に応じて変化します。
フォームを編集するときと、CSSファイルを編集するとき、デバッグするときではそれぞれ表示されるプロパティが異なります。
もちろん、ユーザーが任意に必要な配置を[View]メニューを使用してコントロールすることができます。
（残念な点は、特定の状態に応じた配置を別々に指定することはできません。Eclipseのパースペクティブに慣れている方は、ちょっと不便そう）
基本的なメニューは次のとおりです。
- Toolbars
- Component Toolbox
- Status Bar
- Project Explorer
- Properties
- Style Property Editor
- Output
- Debug
ツールバーは、次のような機能を制御します。
Standard
[File]メニューの機能を主に提供しています。その他の設定とシステムの情報が提供されます。
ツールバーの各項目は状態に応じて有効になったり、無効になったりします。
Align
デザインモードでは、各オブジェクトの整列を設定します。
この機能を使えば自動的にオブジェクトを並べ替えることができますが、ガイドラインを使用して手動で並べ替えることもできます。
ガイドラインは、デザインモードで画面の上や左にある巻尺部分をクリックすれば表示されます。
TextStyle
フォント属性と段落属性を定義します。
Component（Objects）
以前はコンポーネントでしたが、オブジェクトにメニュー名が変わりましたね。
TypeDefinitionを変更すると、コンポーネントツールバーに表示される内容が変わります（カスタムコンポーネントが入ることもあるんです）。
Debug
デバッグについては、この間詳しく説明しました。
デバッグの基礎http://cafe.naver.com/xplatform101/26内容を参照してください。
Bookmark
ブックマークウィンドウにも同じ機能が提供されます。
ADL / Theme
ADLやテーマを簡単に変更できます。
テーマはデフォルトのテーマとカスタムテーマを選択することができます。
CSS Selector
スタイルシートの編集に使用されるツールバーです。
エクスプローラで右クリックしたときと同じ機能を提供しています。
Go to Sourceは、そのままダブルクリックしても同じ動作になります。
選択肢を作成したり、追加するときに、複数のオプションがありますが、基本的に生成すると関連するプロパティがすべて開かれますので、その中から必要な属性をすべて選択します。
Compress All、Uncompressは、セレクタで使用していない属性を見せる否かの機能を提供します。
[メニュー] Edit について
※本記事は以下のサイトから転載し、翻訳をしたものになります（一部加筆修正しています）。
http://cafe.naver.com/xplatform101/36
Editメニューは、他の開発ツールとそれほど変わりません。
しかし、項目によってサポートされる機能が少しずつ異なるため、知っておく必要があります。
Undo、Redoは、他のツールと同じ機能です。
違うのは保持する履歴を変更できるところです。Undo可能な履歴を保持しすぎると、パフォーマンス問題が発生することがあります（もちろん、最近の環境では少ないですが）。
設定からDesignモードの最大Undo回数を指定することができます。
デフォルト値は1024ですね。1024もあれば十分でしょう。
1024回もUndoが必要というのは、何か開発プロセス上の問題があるでしょう。バックアップをとったり、バージョン管理するなど、むしろ開発プロセスに手をいれなければならないと思います。
Cut、Copy、Paste、Paste Special、Deleteは、一般的な機能です。
ソースコードの中の文字列だけではなく、Designモードのビジュアルコンポーネントや、Datasetのような目に見えないコンポーネントにも同様に適用されます。
一つ変わった機能があります。それはPaste Specialです。
デザインモードでのみ使用できる機能です。
コンポーネントをコピーすると、様々なプロパティやイベントも一緒にコピーされます。
しかし、コピーをするとき、すべてを必要とするものではないので、オプションでコピーする情報を選択できる機能を提供します。
属性、スタイル、イベント、バインディング情報のようなものが含まれます。
ショートカットはCtrl + Shift + Vです。
Select Allは、すべて選択です。
Find、Find in Filesは検索機能です。ソース編集ウィンドウで文字列を単純に検索する機能と、プロジェクト中のすべてのファイルから文字列を検索する機能を提供しています。
Findは、ソース編集ウィンドウに見つかった文字列を表示してくれます。
Find in Filesでは、Find Resultsウィンドウにその内容を行単位で表示します。
行をダブルクリックすれば、ファイルが開いてその行に移動します。
参考までに検索結果ウィンドウは、2つまで使用可能です。 [検索]ダイアログボックスで、オプションで2回の結果ウィンドウを使用するかを選択できます。
Replaceは置換機能です。他のツールと同様に、正規表現を使用できます。
Goto Lineは編集ウィンドウで、目的の行に直接移動する機能を提供します。
Bookmarkは文字通りブックマーク機能です。ソースコードだけをサポートするのではなく、CSSやXMLコードなど、プロジェクトの中のすべての文字列で作られたコードに対してサポートします。
メモを残す機能はないですが、タイトルを変更できる機能があり、どのような内容なのかも管理できます。
Comment Selectionは、選択した行をコメントアウトする機能です。
ショートカットは「/」で、ブロックに文字列が選択された場合にのみ使えます。
一行をコメントする場合には、「/ * ... * /」を使用し、複数行の場合には、「/ /」を使用します。
複数行の場合に「/ * ... * /」を使用したほうがよさそうですが、コメントを解除するときに、簡単に一部だけを解除できるよう「/ /」を使用しています。
コメント解除はUnComment Selectionを使用します。
Refresh File Statusの場合には、[File]メニューのReloadと同じように、特に用途はなさそうです。
おそらく、デザインモードとソースモードを同期するためのメニューではないかな思いますが、すでに自動的に同期をサポートしているので.. ^ ^
このくらい知っていれば、[Edit]メニューを使いこなすことができるのではないかと思います。
[メニュー] Fileについて
※本記事は以下のサイトから転載し、翻訳をしたものになります（一部加筆修正しています）。
http://cafe.naver.com/xplatform101/35
UXStudioを使いこなせるようになるためには、メニューバーを理解することが重要です。ブログの一番最初でも紹介しましたが、さらに細かく整理してみましょう。
使用しているUXStudioのバージョンは9.2.0.80バージョンです。現在TOBESOFTの韓国ホームページで配布されている体験版です。
http://www.tobesoft.co.kr/support/experience/index.jsp
[File]メニューから始めましょう。
[File]メニューは、プロジェクトやフォームを作成し、作成したプロジェクトやフォームを再度開いて見ることができます。また、プロジェクトを別々に保存できるエクスポート機能とインポート機能を提供しています。
そして、基本的な印刷機能も提供しています。
他の開発ツールとの大きな違いはないです。
File
--- New
------- Project
------- Item（Form、User Object）
------- File（Style Sheet、XML、Script、Xtheme）
プロジェクトの作成については、既に何度も紹介しましたが。。。＾＾
プロジェクトを作成するときに、画面レイアウトに使用するテンプレートを選択できます。
簡単なアプリケーションを作成するときはUXStudioが提供するデフォルトのテンプレートを使用すると、フレームの大きな変更なしに作業が可能です。
しかし、一定規模以上のプロジェクトであれば、プロジェクトテンプレートを選択することを推奨します。
プロジェクトテンプレートは、[File]メニューの下にあるMake a Project Templateを活用することができます。
名前はプロジェクトテンプレートですが、大きいプロジェクトではなくても、頻繁に使うテンプレートを共有できます。
Itemは、画面を作成するためのFormやUser Objectを作成するときに使用します。
User Objectは、特定の目的のために拡張されたコンポーネントを作成するものです。
たとえば、Buttonを拡張して新しいSuper Buttonコンポーネントを作成することができ、こうして作られた新しいコンポーネントは、メニューに追加されてすぐに適用することができます。
User Objectについては話が長くなりそうなので今後取り上げるようにします。
スタイルシートの場合には、単純にエディタを提供するだけでなく、必要な項目をフォームに追加できるように、様々な機能を提供します。
一般的には、以前に作成されたファイルを持って修正しますが、新しいアイテムを追加する場合にも、このようなツールのサポートによって本当に楽に作業ができます。
XMLやスクリプトは、特別な内容はなく、テーマはイメージとスタイルシートなどと一緒に提供されるため、テーマの中でスタイルシートの編集を直接連携してくれています。
画像の編集はサポートしていませんが、プレビュー機能はサポートしています。
--- Open
------- Project
------- File
新しいプロジェクトやファイルを作成するときと同様に、開く作業の時にも作業に適した画面レイアウトを自動的に提供します。
それぞれのパースペクティブを別々に保存する機能はありません。
Reloadはプロジェクトを再表示ローディング機能です（いつ使うかよくわかりません...）
--- Deploy
------- Project
------- Current File
------- Settings
作業されたファイルをデプロイする際に使用するオプションです。運用フェーズに入ると、別のポリシーに従うと思いますが、開発段階では、さまざまな環境にデプロイすることが必要な場合があり、その時に役に立つと思います。
Close、Close Projectはオープンファイルやプロジェクトを閉じてくれます。
Recent Files、Projectsには、最近使用したファイルやプロジェクトが4つずつ表示されます。
表示されるファイルやプロジェクトの数は、Tools> Options> Environment> General> Recent filesで変更できます。
Launch Projectは文字通りプロジェクトを実行する機能です。ショートカットはCtrl + F5キーです。
Importはプロジェクトやファイルをインポートする機能を提供しています。メニューを経由せずにファイルエクスプローラーでプロジェクトファイルを選択するか、目的のファイルを選択してマウスのドラッグ＆ドロップでもインポートができます。
Export projectは後でImportするために、プロジェクトをエクスポートする機能です。
Make Project Templateは、上で話をした機能です。また次の機会に説明します。
Print、Print Setupは、他のツールとあまり変わらないと思います。
マニュアルには、ソースやスクリプトの出力のための用途だと書いてありますが、現在はソースだけ出力されます。
最後にSave the Project as Compiled XMLという長いタイトルを持つメニューは、
文字通り圧縮されXML形式で保存できます。
テキストエディタで開いてみると次のように文字が化けて表示されます。
[File]メニューを簡単に説明しようと思いましたが、長くなりました。
User ObjectとMake a Project Templateの内容は、次の機会に。
イベント概要 - Obejct
※本記事は以下のサイトから転載し、翻訳をしたものになります（一部加筆修正しています）。
http://cafe.naver.com/xplatform101/34
XPLATFORMがEDAを基に作られたと言っても、すべてのObjectがイベント処理の対象ではありません。
前回も話したように、イベントは "注目すべきの状態の変化"を持っている場合に使われます。
XPLATFORMでイベントの処理対象となるObjectは、主に動的に状態に変化があるものです。
UXStudioでイベントの登録ができるObjectは次のとおりです。
* ADL
ADL（Application） - アプリケーションのロード/開始/終了などのイベント
- onload、onloadingglobalvariables、onloadtypedefinition、onbeforeexit、onexitなど
Frame - Frame Objectから発生するイベント。 FrameイベントはChildFrameとFormと緊密な関係を持っています。
- onclose、onactivateなど
Tray - Trayで発生するイベント
- ondbclick、onlbuttonup、onrbuttonup
Application Menu - Application Menuで発生するイベント
* Global Variable
Datasets
- cancolumnchange、canrowposchange、oncolumnchanged、onload、onrowposchanged、onrowsetchanged、onvaluechanged
* Service
Formで、Component、Invisible Object
- これくらいですが、ほとんどすべてのObjectが対象ですね（泣）。
イベントを考慮するときに、よく誤解される部分の一つが転移です。
親 - 子の関係を持つobjectが配列されている場合に、イベントが順番に発生する処理を分かっていないと、エラーと認識することがあります。
次のような簡単なフォームがあるとします。
フォームの中にDivがあり、その中にボタンがあります。
横にあるのは、イベントログを撮ってくれるTextAreaです。
ボタンをクリックするとイベントがどのように行わるでしょうか？
それはイベントごとに異なります。
XPLATFORMの場合、すべてのイベントが親に転移されません。
同じボタンのイベントでもonrbuttondownような場合には、転移になりますがonclickなどの場合には、転移がありません。
転移される場合には、デフォルト値が転移になるように設定されています。
もちろん、イベントを受け取って処理をしなければ問題ありませんが、ボタンとDivから別の形式で処理をする必要のある場合には、ボタンのイベントが親に転移されないようにする必要があります。
function Div00_Button00_onrbuttondown（obj：Button、e：MouseEventInfo）
{
TextArea00.value + = "button" + "from：" + e.fromobject;
}
一般的に、ボタンでイベントを作成すると、上記のようなコードが生成されます。
戻り値をつけなくてもエラーとして処理されません。デフォルト値があるからです。
このような場合には、イベントがButton> Div> Formに流れるようになって、各コンポーネントにイベントを処理するプロセスがある場合、そのプロセスを処理します。
しかし、ここで親に転移されないようにするには、戻り値を定義しようとしています。
function Div00_Button00_onrbuttondown（obj：Button、e：MouseEventInfo）
{
TextArea00.value + = "button" + "from：" + e.fromobject;
return true;
}
これくれれば上位コンポーネントでイベントが発生しません。
イベント発生時に渡されるイベント情報オブジェクトから、様々な情報を取得することができます。
例えば、MouseEventInfoの中にはfromobjectというプロパティがあり、実際のイベントがどこで発生しているのかを追跡することができます。
イベントを処理するときにもう一つ注意すべき点は、データを変更させる場合です。
例えば、カレンダーのspinを使って日付を変更させる場合は、上、下のボタンをクリックするたびに、onspinイベントが発生します。
この時、イベントハンドラの中でコンポーネントのvalueをそのまま持って使えばいけません。イベントが発生した瞬間、その関数内ではまだvalueが更新されていないです。
だからイベント処理以降に変更される値を使用する場合は、イベントハンドラに渡されるCalendarSpinEventInfoイベント情報のpostvalueプロパティの値を使用します。このプロパティで、変更後の値を参照することができます。
イベントの基礎 - EDA (イベント 基盤 アーキテクチャ)
※本記事は以下のサイトから転載し、翻訳をしたものになります（一部加筆修正しています）。
http://cafe.naver.com/xplatform101/33
イベントについては、基礎が不足していると、ある段階まで行くと限界に達してしまいます。
一般的なWebプログラミングモデルに慣れてしまうと、イベントを適切に使用するよりも、既存の使い慣れた方法を使用してしまいます。
ところが、こういった場合、最適なパフォーマンスを担保することが難しくなります。さらには誤ったイベント処理によって取り返しのつかない問題をもたらしたります（特にこのような問題は、テスト中には発見されません。大体の場合はこのようなシナリオは考慮せずテストケースを作成するからです）。
XPLATFORMのアプリケーションは、EDAを基本にしています。
イベント駆動アーキテクチャ（Event Driven Architecture）の略で、プログラミングに限定される概念ではなくもっと汎用的な概念です。
ウィキペディアの定義を見ると、自動車の例を挙げています。
http://en.wikipedia.org/wiki/Event-driven_architecture
http://bigstory.tistory.com/entry/Event-Driven-Architecture
販売中（for sale）の自動車が、顧客に購入され、「販売済」（sold）に状態が変わると、自動車の状態の変化を検出したシステムでイベントが発生し、財務、マーケティング、関連部門システムに自動的に転送されます。そして転送されたイベントは、各システムの要件に応じて適切な処理がされます。
http://onepixelahead.com/2010/08/11/leveraging-event-driven-architectures/
ここで重要なのは、分散されたシステム間でイベントが生成・送信され、必要に応じて処理されるシステムアーキテクチャということです。そして、各イベントは、注目すべき状態の変化（notable thing）を意味します。
EDAを構成する要素は、大きくイベントコンストラクタ（Event generator）、イベントチャネル（Event channel）、イベント処理エンジン（Event processing engine）の3つに区分されます。
イベントコンストラクタはシステムの状態変化を検出して、標準化された形式のイベントを生成します。
イベントチャネルは、イベントを各システムに配信する役割をします。
そしてイベント処理エンジンでは、受信したイベントを適切に処理し、必要に応じてイベントを発生させたりします。
EDAを適用することは、異なるトランザクションを接続し、イベント処理に伴う流れを持つようになるので、おなじみのワークフローモデルを思い起こさせます。
EDAの議論でよく出てくるのがloosely coupledの話です。
イベント生成側は生成されたイベントの処理を管理しません。イベントの発生と処理が分離され、これに伴う柔軟性を確保することができます。
このような基礎的な概念を持ってXPLATFORMのイベントを処理すると、もっと簡単に理解できると思います。
絵を書いてみましょう - GraphicPath (３)
※本記事は以下のサイトから転載し、翻訳をしたものになります（一部加筆修正しています）。
http://cafe.naver.com/xplatform101/32
これで最後のステップです。
GraphicPathを使用すると、ベクトルグラフィックスの利点である拡大と縮小が可能になります。
企業用のアプリケーションを作りながら、一見絵を描くツールは必要なさそうですが、意外に多くの部分でこれが必要となります。
組織図やダイアグラムを描くときなど、描画ツールなしで描こうとすると大変だとおもいます。
カーブは3次ベジェ曲線（Cubic Bezier Curve）形式に従います。
ベジェ曲線は不規則な曲線を表現するために、フランスの数学者、ベジェ（Bezier P.）が数学的に作成した曲線だそうです。
言葉であれこれ説明するよりも、この絵を見るのがわかりやすいでしょう。
http://www.itk.ilstu.edu/faculty/javila/svg/svg_drawing1/cubic_curve.htm
各点とその点のコントロールポイントが同じになれば、コントロールできるポイントがありません。
例えば、M 100 100 c 0 0 0 0 100 100のようにデータが定義されている場合
100,100座標点で200,200座標点間に直線が引かれます。
データが定義されてなければ、各コントロールポイントを活用して、描きたい曲線を描くことができます。
GraphicPathの各属性は、dataプロパティを直接指定することもできますが、UXStudioで編集も可能です（しかし、直接編集するのは少し難しいでしょう）。
設定されたGraphicPath領域内で右クリックすると、GraphicPath Editの項目が表示されますが、指定された値をGUI環境で変更できる編集状態になります。
コントロールポイントの位置に応じて、必要な曲線を作成することができます。
塗りつぶしと同時に動作させると立体的な面を作成することもできます。
作業を終えると、右クリックして、End Editを選択します。
ちなみにGraphicPathは、ツールバー上ではその他のアイコンで表示されています。
変更したい場合は、プロジェクトエクスプローラでTypeDefinitionをダブルクリックすれば編集可能ダイアログボックスが表示されます。
そこでGraphicPathを選択してImageカラムの値を変更します。
よく使う機能ではありませんが、このように変更が可能です。
他のアイコンも気に入らない場合は自由に変えることができます。
ただし初期化機能などはありませんのでご注意くださいね。
絵を書いてみましょう - GraphicPath (２)
※本記事は以下のサイトから転載し、翻訳をしたものになります（一部加筆修正しています）。
http://cafe.naver.com/xplatform101/31
今回は楕円、円弧を見てみましょう。
楕円と円弧と言いましたが、円を描く時も同様に適用します。
厳密に言えば完全な円ではありません。しかし、一般的なモニターで見たときほとんど区別がつかないので、円とします。
前回の投稿でご紹介したGraphicPathの属性は、実際はSVGの仕様に基づいて作られました。
http://www.w3.org/TR/SVG/paths.html
内容を見ると、ほぼ似ていると思ってもよいでしょう。
SVGソースをそのまま持ってくれば同じように実装されますが、若干の違いがあったりします。
A（elliptical arg）のargumentは次の通りです。
nRx nRy nAngle bLargearcflag bSweepflag nX nY
まず、nRx、nRyはX軸半径、Y軸半径に対応しています。
nRxとnRyの値が同じであれば、楕円ではなく円になります。
nAngleは回転角度です。nAngleを変化させると、その角度に応じて楕円の方向が変わります。
下の図は、M 300.0 350.0 A 150 150 0 1 1 50 50に設定した状態です。
X、Y軸半径が同じであるため円形です。
円弧の終点を開始点に近づけたければ、円弧の終点を表すargumentであるnX nYを0に近づけてください。
ただし0にするとだめで、2以上の値を指定して、最後にpathを終えるzを追加すれば、円弧の開始点と終点の間の小さな穴を埋めることができます。
次は、M 300.0 350.0 A 100 150 0 1 1 50 50に設定した状態です。
X軸半径がY軸半径よりも小さいので、Y軸方向にとがった卵形が作成されました。
次の図は、M 300.0 350.0 A 100 150 45 1 1 50 50に設定した状態です。
回転角度を45度に設定したため、図のような形になりました。
動的に応用すれば、アニメーション効果も出せるでしょう。
しかし、アニメーションは別のコンポーネントを提供するので、あえて使用する必要はありません。
bLargearcflagとbSweepflagは言葉で説明するとややこしいですが、W3C仕様に記載されている下図を見るとわかりやすいです。
楕円はここまでして、次の時間には、カーブについて説明します。
UXStudioで編集するときに、スクリプトやインライン属性に挿入することができ、下の図のように編集ダイアログボックスで項目を追加することもできます。
