UI Editor/Getting Started

Workflows

When working with the UI editor, there are three main workflows to consider

Creating New UI

1. Enter a name for the piece of UI in the text field at the top of the Definition panel
2. Click "Create"
3. Choose whether you want to create the UI as a "Window" (with move/resize/title/close functionality) or as a "Base Window" (just a panel to add content to)
4. Add components by right-clicking in the Hierarchy and then use the Inspector to modify their values
5. Save to write the .ui file to disk

Editing Existing UI

1. Click "Load"
2. Browse to find the .ui file you want to modify
3. Add/remove/modify components with the help of the Hierarchy and the Inspector
4. Save to update the existing .ui file

Using an Overlay

1. Click "Load"
2. Browse to find the .ui file that serves as the base for your layout
3. Expand the arrow next to the definition's name in the Definition tab
4. Click "Load" on the Overlay line
5. Browse to select the folder in which the overlay exists (or will be written if you are creating your overlay for the first time)
6. Add/remove/modify components with the help of the Hierarchy and the Inspector
7. Save to write the .overlay file to disk

After completing any of these three workflows, you can use the JavaScript window to reload an existing package or load a new one.

Admin Note: Eventually we will have an integrated package editor to allow testing, packaging, and uploading all from within Curio.