Difference between revisions of "UI Editor/Getting Started"
From Virtual World Web Wiki
| Line 3: | Line 3: | ||
=== Creating New UI === | === Creating New UI === | ||
| − | # Enter a name for the piece of UI in the text field at the top of the Definition panel | + | # Enter a name for the piece of UI in the text field at the top of the [[UI Editor/Definition|Definition]] panel |
# Click "Create" | # Click "Create" | ||
# 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) | # 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) | ||
| − | # Add components by right-clicking in the Hierarchy and then use the Inspector to modify their values | + | # Add [[UI Editor/Components|components]] by right-clicking in the [[UI Editor/Hierarchy|Hierarchy]] and then use the [[UI Editor/Inspector|Inspector]] to modify their values |
# Save to write the .ui file to disk | # Save to write the .ui file to disk | ||
| Line 12: | Line 12: | ||
# Click "Load" | # Click "Load" | ||
# Browse to find the .ui file you want to modify | # Browse to find the .ui file you want to modify | ||
| − | # Add/remove/modify components with the help of the Hierarchy and the Inspector | + | # Add/remove/modify [[UI Editor/Components|components]] with the help of the [[UI Editor/Hierarchy|Hierarchy]] and the [[UI Editor/Inspector|Inspector]] |
# Save to update the existing .ui file | # Save to update the existing .ui file | ||
| Line 18: | Line 18: | ||
# Click "Load" | # Click "Load" | ||
# Browse to find the .ui file that serves as the base for your layout | # Browse to find the .ui file that serves as the base for your layout | ||
| − | # Expand the arrow next to the definition's name in the Definition tab | + | # Expand the arrow next to the definition's name in the [[UI Editor/Definition|Definition]] tab |
# Click "Load" on the Overlay line | # Click "Load" on the Overlay line | ||
# Browse to select the folder in which the overlay exists (or will be written if you are creating your overlay for the first time) | # Browse to select the folder in which the overlay exists (or will be written if you are creating your overlay for the first time) | ||
| − | # Add/remove/modify components with the help of the Hierarchy and the Inspector | + | # Add/remove/modify [[UI Editor/Components|components]] with the help of the [[UI Editor/Hierarchy|Hierarchy]] and the [[UI Editor/Inspector|Inspector]] |
# Save to write the .overlay file to disk | # Save to write the .overlay file to disk | ||
Latest revision as of 13:30, 16 November 2017
Workflows
When working with the UI editor, there are three main workflows to consider
Creating New UI
- Enter a name for the piece of UI in the text field at the top of the Definition panel
- Click "Create"
- 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)
- Add components by right-clicking in the Hierarchy and then use the Inspector to modify their values
- Save to write the .ui file to disk
Editing Existing UI
- Click "Load"
- Browse to find the .ui file you want to modify
- Add/remove/modify components with the help of the Hierarchy and the Inspector
- Save to update the existing .ui file
Using an Overlay
- Click "Load"
- Browse to find the .ui file that serves as the base for your layout
- Expand the arrow next to the definition's name in the Definition tab
- Click "Load" on the Overlay line
- Browse to select the folder in which the overlay exists (or will be written if you are creating your overlay for the first time)
- Add/remove/modify components with the help of the Hierarchy and the Inspector
- 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.
