Script Examples

Emit Functionality

Emit Example:
Download ezUI File

Candidate Component:
Download ezUI File

In this example, we illustrate how to use the emit functionality to handle user interactions within a Candidate Component. Users can input data such as first and last names and select a headshot. The system listens for changes in these fields and dynamically updates the component's data, emitting a 'candidateChange' event with the new information.

1. The first step is to create a 'Candidate' component, in order to do this:

   • press the UI Manager button
   • go to the Components section
   • press + and type in the component name
   • press Create and then Open.

   

2. Import the Candidate.ezui file, then save the created component.

3. Duplicate the Studio window, open some template.
4. Import the Emit Example.ezui file.
5. In the Components section press Add component button.
6. Choose the component you have just created, press Update.
7. In the Components list find your component (it is in the bottom of the list), drag&drop it to the appropriate section, and delete the excessive one component instead of it.
8. Instead of nameControl in the script, please type the Name of your Component and press Save.

This ensures that the component reflects the latest user input in real-time. The design ensures smooth user interactions, with updates happening instantly as data changes are detected.

Emit Example:

let drag = false;
const realSize = 200;
function onPointerDown(e) {
  drag = true;
  area.setPointerCapture(e.pointerId);
}

function onPointerUp(e) {
  drag = false;
  area.releasePointerCapture(e.pointerId);
}

// Function to initially read and set position data
function readData() {
  updatePosition('x', vtxPosition.value.x); // Update x position based on the current value
  updatePosition('y', vtxPosition.value.y); // Update y position based on the current value
}

readData();

Candidate Component:

let drag = false;
const realSize = 200;
function onPointerDown(e) {
  drag = true;
  area.setPointerCapture(e.pointerId);
}


function onPointerUp(e) {
  drag = false;
  area.releasePointerCapture(e.pointerId);
}
export function getData() {
  const name = `${firstName.value} ${lastName.value}`; // Combine first and last name
  const headshot = mediaBrowser.value; // Get headshot from media browser
  return { name, headshot }; // Return an object with name and headshot
}

// Function to handle changes and emit data
function onChange() {
  emit('candidateChange', getData()); // Emit 'candidateChange' event with data
}

// Register onChange function for input fields
firstName.onChange = onChange;
lastName.onChange = onChange;
mediaBrowser.onChange = onChange

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

readData();