Difference between revisions of "UI Editor/Getting Started"

From Virtual World Web Wiki
Jump to: navigation, search
(Created page with "When working with the UI editor, there are three main workflows to consider *Creating a new piece of UI *Editing an existing piece of UI *Using an Overlay to modify UI provid...")
 
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
== Workflows ==
 
When working with the UI editor, there are three main workflows to consider
 
When working with the UI editor, there are three main workflows to consider
  
−
*Creating a new piece of UI
+
=== Creating New UI ===
−
*Editing an existing piece of UI
+
# Enter a name for the piece of UI in the text field at the top of the [[UI Editor/Definition|Definition]] panel
−
*Using an Overlay to modify UI provided by another Service Provider
+
# 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 [[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
  
 +
=== Editing Existing UI ===
 +
# Click "Load"
 +
# Browse to find the .ui file you want to modify
 +
# 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
  
−
Creating New UI
+
=== Using an Overlay ===
−
* Start by entering a name for the piece of UI you want to create
+
# Click "Load"
−
* Click "Create"
+
# Browse to find the .ui file that serves as the base for your layout
−
* 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)
+
# Expand the arrow next to the definition's name in the [[UI Editor/Definition|Definition]] tab
−
* Add components by right-clicking in the Hierarchy and then use the Inspector to modify their values
+
# Click "Load" on the Overlay line
−
* Save to write the .ui file to disk
+
# 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 [[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
  
−
Editing Existing UI
+
After completing any of these three workflows, you can use the JavaScript window to reload an existing package or load a new one.  
−
* 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
+
''Admin Note: Eventually we will have an integrated package editor to allow testing, packaging, and uploading all from within Curio.''
−
* 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
+
[[Category:UI Editor]]
−
* 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
+

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

  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.

Retrieved from "http://wiki.virtualworldweb.com/index.php?title=UI_Editor/Getting_Started&oldid=4619"