ATF DOM Tree Editor Sample_j

== ATF DomTreeEditor サンプル ==

Table of Contents 説明 DomTreeEditor が示す ATF の機能 DomTreeEditor の実行 DomTreeEditor の使用法

説明

DomTreeEditor は、単純なユーザーインターフェイス定義ファイルを操作するサンプルエディターです。UI データは階層構造で、DomTreeEditor では TreeControl に表示されます。ツリー内の UI 要素を選択して編集できます。選択した要素のプロパティも編集できます。

このサンプルの詳細は、DOM Tree Editor Programming Discussion (英語) を参照してください。

DomTreeEditor が示す ATF の機能

• UISchema.xsd XML スキーマを使用するデータモデルを定義する。
• DomGen を使用して、アダプターが使用する DOM メタデータを自動生成する。
• アダプターを使用して、UI データモデルを作成するために DOM を装飾する。
• IDocumentService/IDocumentClient フレームワークを使用してドキュメントを管理する。
• IPaletteService/IPaletteClient を使用して、UI パーツパレットを作成する。
• TreeControl、TreeControlAdapter、TreeControlEditor を使用して、UI 定義の編集可能なツリービューを表示する。
• ITreeView/IItemView インターフェイスを使用して、データをツリーに適合させる。
• ContextRegistry を使用して、アクティブな編集コンテキストを追跡し、編集している場所にアプリケーションコンポーネントが常に適用されるようにする。
• ATF インターフェイスである IInstancingContext、ISelectionContext、IHistoryContext および IObservableContext を使用してデータを適合させ、元に戻す/やり直し、切り取り/貼り付け、および選択コマンドの取得に ATF コマンドコンポーネントを使用できるようにする。
• ATF PropertyEditor/GridPropertyEditor コンポーネントを使用して、選択した UI 要素のプロパティを編集可能にする。
• DomExplorer コンポーネントを使用して、未処理の DOM データと拡張子を確認する、診断ツールとしての使用法を示す。
• CurveEditor コンポーネントを使用して、カーブやスプラインを作成および編集する (制御点 (キー) および接線の操作を含む)。また、異なる種類のカーブ (リニア、ステップ、クランプ、スムーズ) を作成する。

DomTreeEditor の実行

1. \bin\wws_atf\Release にある DomTreeEditor.exe をダブルクリックします。
2. [DomTreeEditor] ウィンドウが表示されます。

DomTreeEditor には以下のペインがあります。

• [UI]:UI 定義の編集可能なツリービュー。
• [パレット] > [UI]: パーツパレット:[Package]、[Form]、[Shader]、[Texture]、[Font]、[Sprite]、[Text]、[Animation]。
• [プロパティエディター]: 選択した要素のプロパティをリストコントロールで編集します。
• [グリッドプロパティエディター]: 選択した要素のプロパティをグリッドコントロールで編集します。
• [Dom]:未処理の DOM データを表示します。
• キャンバス: UI ファイルの内容を表示および編集します。
• [CurveEditor]: スプラインを表示および編集します。

ツールバーに含まれるボタンは、ファイル管理用が、保存、名前を付けて保存、すべて保存で、編集用が、切り取り、コピー、貼り付け、削除、元に戻す/やり直し、すべて選択です。

メニューバーには次の項目があります。

• [ファイル]: [UI]、[UI]、[保存]､[名前を付けて保存]、[すべて保存]、[閉じる] 、[最近使用したファイル]、[ファイルをピン留め] および [終了]。
• [編集]: 標準の編集機能 (切り取り、コピー、貼り付け、元に戻す/やり直しなど) のほかに、次の項目があります。
  • [キーボードショートカット]: [キーボードショートカットをカスタマイズ] ウィンドウを使用して、キーボードショートカットを設定します。
  • [設定を読み込み/保存]: 現在の設定を保存するか、またはファイルからアプリケーション設定を読み込みます。
  • [基本設定]: コマンドアイコンのサイズや最後にアクティブになったドキュメントの自動読み込みなど、アプリケーションやドキュメントを設定します。
• [ウィンドウ]: ペインを選択/選択解除します。

DomTreeEditor の使用法

DomTreeEditor を開くと、[UI] に空の UI 定義および空の UI キャンバスが表示されます。[パレット] から [UI] の UI 定義に UI オブジェクトをドラッグアンドドロップして、データモデルを定義し操作します。最初の要素は、Package UI オブジェクトである必要があります。ほかの要素を Package オブジェクトにドラッグアンドドロップして、データモデルを定義します。要素をクリックして選択してから、タブをクリックし、各ペインを表示したり、プロパティを表示および編集したりします。UI の定義時に [Dom] タブをクリックすると、未処理の DOM データが表示されます。Animation オブジェクトを選択すると、[CurveEditor] に曲線が表示されます。