ATF DOM Tree Editor Sample

Table of Contents Description ATF Features Demonstrated by DomTreeEditor Run DomTreeEditor How to Use DomTreeEditor

Description

DomTreeEditor is a sample editor that operates on simple User Interface definition files. The UI data is hierarchical and DomTreeEditor displays it in a TreeControl. You can select and edit UI elements in the tree, and you can edit the properties on the selected elements.

To learn about the programming of this sample, see DOM Tree Editor Programming Discussion.

ATF Features Demonstrated by DomTreeEditor

• Define a data model using a UISchema.xsd XML schema.
• Use of DomGen to autogenerate DOM metadata for use by adapters.
• Use of adapters to decorate the DOM to create a UI data model.
• Use of IDocumentService / IDocumentClient framework to manage documents.
• Use of IPaletteService / IPaletteClient to create a UI parts palette.
• Use of TreeControl, TreeControlAdapter, TreeControlEditor to display an editable tree view of the UI definition.
• Use of ITreeView / IItemView interfaces to adapt data to a tree.
• Use of ContextRegistry to track the active editing context, so application components always apply where the user is editing.
• Use of the ATF interfaces IInstancingContext, ISelectionContext, IHistoryContext and IObservableContext to adapt data so that ATF command components can be used to get undo/redo, cut/paste, and selection commands.
• Use of ATF PropertyEditor/GridPropertyEditor components to allow property editing on selected UI elements.
• Use of the DomExplorer component to show how it can be used to view the raw DOM data and extensions as a diagnostic tool.
• Use of the CurveEditor component to create and edit curves or splines, including working with control points (keys) and tangents, and to create different kinds of curves (linear, stepped, clamped, smooth).

Run DomTreeEditor

1. Double-click the DomTreeEditor.exe in \bin\wws_atf\Release.
2. The DomTreeEditor window appears.

DomTreeEditor has the following panes:

• UI Tree Lister: editable tree view of the UI definition
• Palette (UI Objects): the UI parts palette: Package, Form, Shader, Texture, Font, Sprite, Text, Animation
• Property Editor: edit the selected element's property in a list control
• Grid Property Editor: edit the selected element's property in a grid control
• DOM Explorer: view the raw DOM data
• Canvas: view and edit the UI file contents.
• Curve Editor: view and edit splines.

The toolbar contains buttons for file management: save, save as, and save all, and editing: cut, copy, paste, delete, undo/redo, and select all.

The menu bar contains:

• File: create a new UI, open an existing UI, Save, Save as, Save all, Close, Recent Files and Pin/Unpin open file to Recent Files, and Exit DomTreeEditor.
• Edit: in addition to the standard editing functions (cut, copy, paste, and so on), Edit provides:
  • Keyboard Shortcuts: use the Customize Keyboard Shortcuts window to set up keyboard shortcuts.
  • Load or Save Settings: use the Load and Save Settings window to save current DomTreeEditor application settings, or to load application settings from a file.
  • Preferences: set application and document preferences, such as command icon size and auto-load the last active documents.
• Window: select and deselect panes.

How to Use DomTreeEditor

DomTreeEditor opens with an empty UI definition in the UI Tree Lister and an empty UI canvas. Drag and drop UI objects from the Palette onto the UI definition in the UI Tree Lister to define and work with a data model. The first element must be a Package UI object. Drag and drop other elements onto the Package object to define your data model. Click an element to select it, then click the tabs to display the various panes, view and edit properties, and so on. Click the DOM Explorer tab to view the raw DOM data as you define the UI. Select an Animation object to see curves in the Curve Editor.