Skip to content

Get Start

The UI Editor is a powerful built-in visual editor provided by ldlib. You can use it to easily design your UI, use it in your own mods, or use it through Java / KubeJS.

1. Get Start

How to open the UI Editor

In general, you can open it by command/ldlib ui_editor, which will use ./minecraft/ldlib/.. as its workspace.

image

Main Screen

image

  1. Menu: New/Save/Open UI projects. You can also import/export Resources here.
  2. Configurator: Basically all the setup happens here.
  3. Resources: available resources, e.g. color, texture, lang entries.

Create a new project

When you first use it, click it to create an empty UI project. (If you are making UI for MBD, select the MBD project)

image

No surprise, you'll see the follow case.

image

  1. ToolBox: Contains all the available UI widgets(components).
  2. Root Widget: The whole project has one and only one root widget, which is created by the system and you cannot delete it.

2. Basic

image

  1. red frame are selected widgets.
  2. blue frame is the widget that mouse is hovering over it.

Multi-Select

Press ctrl to multi-select / cancle-select widget.

Drag Selected Widgets

image

  1. Hold down alt + left-clicked, if you see the arrows (all directions) then you can drag it.
  2. Anyway, you could also modify position by a configurator.

Scale Selected Widgets

image

  1. Hold down alt + right-clicked, if you see the arrows (right bottom) then you can scale it.
  2. Anyway, you could also modify size by a configurator.

Add a Widget

All widgets (except the Root) need to be added to a father (parent) widget that accepts it, and we call such father (parent) widget as Group Type widget (e.g. Group, Tab Group, Scrollable Group).

image

  1. You can find all available widgets in the toolbox.
  2. Drag a widget into a Group Type widget.
  3. Rendering a green frame if such widget can accept it.

Move widget from one Groug to another Group

Sometimes you may want to modify the parent control.

  1. You can do this by the menu (right-clicking page) and cut/copy to the selected parent widget.
  2. A better way is to press the shiftand move it into the new Group.

image Rendering a green frame if such widget can accept it.

Adjust Children Widgets Order

In general, all the Group widgets have a children tab in its configurator, showing all children, you can adjust their order by dragging.

image

Right-click the page to open the menu.

image

  1. All operations will be performed on selected widgets.
  2. Basic operations
  3. Align: availabe when you select multi widgets.