Skip to content

Script Examples

Spawning UI Components

Download ezUI File

In this example, we demonstrate how to dynamically add, move, and remove UI components in UI Builder. You can spawn any built-in or custom component, and set any of the properties, in this example we set the text and position of a button component. It is also possible to spawn components as children of other components, such as groups or tabs.

In this example UI, Users can manage the positioning and text of buttons through simple interactions, with updates immediately reflected in real-time. We also ensure that certain actions, such as moving or removing elements, are only possible when an item is selected, maintaining a smooth user experience.

Locator

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
let drag = false;
const realSize = 200;
function onPointerDown(e) {
  drag = true;
  area.setPointerCapture(e.pointerId);
}

// Variable to keep track of toggle state
let toggle = false;

/* Function to add a child control to a specific group or 
tab based on dropdown selection*/
function addChild(control: Control) {
  switch (dropdown.value) {
    case 'Group 1':
      return group1.add(control);

    case 'Group 2':
      return group2.add(control);

    case 'Tab 1':
    case 'Tab 2':
      return tabs.add(dropdown.value, control);
  }
}

// Function to enable or disable buttons based on the selected list value
function enableDisable() {
  btnMove.disabled = !list.value;
  btnRemove.disabled = !list.value;
}

// Event handler for the "Add" button click event
btnAdd.onClick = () => {
  // Create a new button with the specified text and position
  const btn = new Button({ text: text.value, top: vertex.value.y, left: vertex.value.x });

  // Add a click event listener to the new button
  btn.onClick = e => console.log("BUTTON", e.sender.text, "CLICK");

  /* Add the button's name to the list and set 
  the list's value to the button's name*/
  list.addItem(btn.name);
  list.value = btn.name;

  // Add the button to the appropriate group or tab
  addChild(btn);

  // Enable or disable the move and remove buttons
  enableDisable();
}

// Event handler for the list's change event
list.onChange = enableDisable;

// Event handler for the "Move" button click event
btnMove.onClick = () => {
  // Find the element corresponding to the selected list value
  const element = findElement(list.value as string);

  // Add the element to the appropriate group or tab
  addChild(element);
}

// Event handler for the "Remove" button click event
btnRemove.onClick = () => {
  // Delete the element corresponding to the selected list value
  deleteElement(list.value as string);

  // Remove the element's name from the list and clear the list's value
  list.removeItem(list.value);
  list.value = null;
}

// Event handler for the vertex change event
vertex.onChange = () => {
  // Find the element corresponding to the selected list value
  const element = findElement(list.value as string);
  if (!element)
    return;

  // Update the element's position based on the vertex values
  element.top = vertex.value.y;
  element.left = vertex.value.x;
}

// Event handler for the text change event
text.onChange = () => {
  // Find the button corresponding to the selected list value
  const element: Button = findElement(list.value as string);
  if (!element)
    return;

  // Update the button's text
  element.text = text.value;
}


// Initial Read
function readData() {
  updatePosition('x', vtxPosition.value.x);
  updatePosition('y', vtxPosition.value.y);
}

readData();