ATF DOM Tree Editor Sample_j - kaisu1986/ATF GitHub Wiki
DomTreeEditor は、単純なユーザインタフェース定義ファイルを操作するサンプルエディタです。UI データは階層構造で、DomTreeEditor では TreeControl に表示されます。ツリー内の UI 要素を選択して編集できます。選択した要素のプロパティも編集できます。
このサンプルの内容は、DOM Tree Editor Programming Discussion を参照してください。
- UISchema.xsd XML スキーマを使用するデータモデルを定義する。
- DomGen を使用して、アダプタが使用する DOM メタデータを自動生成する。
- アダプタを使用して、UI データモデルを作成するために DOM を装飾する。
- IDocumentService/IDocumentClient フレームワークを使用して、ドキュメントを管理する。
- IPaletteService/IPaletteClient を使用して、UI パーツパレットを作成する。
- TreeControl、TreeControlAdapter、TreeControlEditor を使用して、UI 定義の編集可能なツリービューを表示する。
- ITreeView/IItemView インタフェースを使用して、データをツリーに適合させる。
- ContextRegistry を使用して、アクティブな編集コンテキストを追跡し、編集している場所にアプリケーションコンポーネントが常に適用されるようにする。
- ATF Editor フレームワークインタフェースである IInstancingContext、ISelectionContext、IHistoryContext、および IObservableContext を使用してデータを適合させ、元に戻す/やり直し、切り取り/貼り付け、および選択コマンドの取得に ATF コマンドコンポーネントを使用できるようにする。
- ATF PropertyEditor / GridPropertyEditor コンポーネントを使用して、選択した UI 要素のプロパティを編集可能にする。
- DomExplorer コンポーネントを使用して、診断ツールとして未処理の DOM データと拡張子を表示するための使用法を示す。
- CurveEditor コンポーネントを使用して、カーブやスプラインを作成および編集する (コントロールポイント (キー) および接線の操作を含む)。また、異なる種類のカーブ (linear, stepped, clamped, smooth) を作成する。
- \bin\wws_atf\DomTreeEditor\Release.vs2008 にある DomTreeEditor.exe をダブルクリックします。
- [DomTreeEditor] ウィンドウが表示されます。
- [UI]: UI 定義の編集可能なツリービュー。
- [Palette]: [UI] パーツパレット: [Package]、[Form]、[Shader]、[Texture]、[Font]、[Sprite]、[Text]、[Animation]。
- [Property]: 選択した要素のプロパティをリストコントロールで編集します。
- [Grid]: 選択した要素のプロパティをグリッドコントロールで編集します。
- [DomExplorer]: 未処理の DOM データを表示します。
- キャンバス: UI ファイルの内容を表示および編集します。
- [Curve]: スプラインを表示および編集します。
メニューバーには次の項目があります。
- [File]: [New] (UI の新規作成)、[Open] (既存の UI を開く)、[Save] (保存)､[Save] (名前を付けて保存)、[Save] (すべて保存)、[Close] (閉じる) および [Exit] (終了)。
- [Edit] (編集): 標準の編集機能 (切り取り、コピー、貼り付け、元に戻す/やり直しなど) のほかに、次の項目があります。
- [Keyboard] (キーボードショートカット): [Customize] ウィンドウを使用して、キーボードショートカットを設定します。
- [Load] (設定の読み込み/保存): このウィンドウを使用して、現在の DomTreeEditor の設定を保存するか、またはファイルからアプリケーション設定を読み込みます。
- [Preferences] (設定): コマンドアイコンのサイズや最後にアクティブになったドキュメントの自動読み込みなど、アプリケーションやドキュメントを設定します。
- [Window] (ウィンドウ): ペインを選択/選択解除します。
DomTreeEditor を開くと、[UI] に空の UI 定義および空の UI キャンバスが表示されます。[Palette] から [UI] の UI 定義に UI オブジェクトをドラッグアンドドロップして、データモデルを定義し操作します。最初の要素は、Package UI オブジェクトである必要があります。ほかの要素を Package オブジェクトにドラッグアンドドロップして、データモデルを定義します。要素をクリックして選択してから、タブをクリックし、各ペインを表示したり、プロパティを表示および編集したりします。UI の定義時に [DomExplorer] タブをクリックすると、未処理の DOM データが表示されます。Animation オブジェクトを選択すると、[Curve] にカーブが表示されます。