feat: Add Element and Composite components

[hyyan]

closes #399 , #427, #436

The PR removes the outdated WebComponent class and introduces the ElementComposite class, designed for creating new components based on a native, custom-element, or a web component. ElementComposite extends the newly introduced Composite class. This class acts as a blueprint for composite components, high-level constructs aimed at encapsulating and managing specific Component instances. It mandates that any subclass extending it must define the type of Component it will manage, thereby ensuring that a subclass of Composite is inherently connected to its corresponding Component.

ElementComposite is linked to the Element class, which represents an HTML Element. It offers methods for setting and retrieving HTML content, manipulating properties, adding event listeners to the element, and executing JavaScript through a fluent async API.

The Engine uses these new APIs in: AppLayout, Dialog , Drawer, Youtube and GoogleChart components

Composite Sample

import org.dwcj.App;
import org.dwcj.component.Composite;
import org.dwcj.component.button.Button;
import org.dwcj.component.field.TextField;
import org.dwcj.component.layout.flexlayout.FlexLayout;
import org.dwcj.component.window.Frame;
import org.dwcj.component.window.Panel;
import org.dwcj.exceptions.DwcjException;

public class CompositeDemo extends App {

  @Override
  public void run() throws DwcjException {
    Frame window = new Frame();
    window.add(new TodoInput());
  }

  public static class TodoInput extends Composite<Panel> {

    @Override
    protected void onDidCreate(Panel container) {
      FlexLayout layout = FlexLayout.create().horizontal().build();
      Button add = new Button("Add Todo");
      TextField text = new TextField("What is Todo?");
      container.add(text, add);

      add.onClick(e -> {
        msgbox(text.getValue());
      });

      container.add(layout);
    }
  }
}

ElementComposite Sample

import java.awt.Color;
import org.dwcj.annotation.Attribute;
import org.dwcj.annotation.JavaScript;
import org.dwcj.component.element.ElementComposite;
import org.dwcj.component.element.PropertyDescriptor;
import org.dwcj.component.element.annotation.NodeName;

/**
 * QRCode Generator using Shoelace QRCode component.
 *
 * @author Hyyan Abo Fakher
 */
@JavaScript(
    value = "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace.js",
    attributes = {@Attribute(name = "type", value = "module")})
@NodeName("sl-qr-code")
public final class QRCode extends ElementComposite {

  private final PropertyDescriptor<String> VALUE = PropertyDescriptor.property("value", "");
  private final PropertyDescriptor<Integer> SIZE = PropertyDescriptor.property("size", 200);
  private final PropertyDescriptor<String> COLOR = PropertyDescriptor.property("fill", "#000000");

  /**
   * Create a new QRCode.
   */
  public QRCode() {
    super();
  }

  /**
   * Create a new QRCode with the given value.
   *
   * @param value the value of the QRCode
   */
  public QRCode(String value) {
    super();
    this.setValue(value);
  }

  /**
   * Create a new QRCode with the given value and size.
   *
   * @param value the value of the QRCode
   * @param size the size of the QRCode
   */
  public QRCode(String value, int size) {
    super();
    this.setValue(value);
    this.setSize(size);
  }

  /**
   * Get the value of the QRCode.
   *
   * @return the value of the QRCode
   */
  public String getValue() {
    return get(VALUE);
  }

  /**
   * Set the value of the QRCode.
   *
   * @param value the value of the QRCode
   */
  public QRCode setValue(String value) {
    set(VALUE, value);
    return this;
  }

  /**
   * Get the size of the QRCode.
   *
   * @return the size of the QRCode
   */
  public int getSize() {
    return get(SIZE);
  }

  /**
   * Set the size of the QRCode.
   *
   * @param size the size of the QRCode
   */
  public QRCode setSize(int size) {
    set(SIZE, size);
    return this;
  }

  /**
   * Get the color of the QRCode.
   *
   * @return the color of the QRCode
   */
  public Color getColor() {
    String hex = get(COLOR);
    return Color.decode(hex);
  }

  /**
   * Set the color of the QRCode.
   *
   * @param color the color of the QRCode
   */
  public QRCode setColor(Color color) {
    String hex = String.format("#%02x%02x%02x", color.getRed(), color.getGreen(), color.getBlue());
    set(COLOR, hex);
    return this;
  }
}

Element Sample

import org.dwcj.App;
import org.dwcj.component.element.Element;
import org.dwcj.component.window.Frame;
import org.dwcj.exceptions.DwcjException;

public class ElementDemo extends App {

  @Override
  public void run() throws DwcjException {
    Frame frame = new Frame();

    Element input = new Element("input", "Enter any text");
    Element button = new Element("button", "Select All");
    button.addEventListener("click", e -> {
      input.callJsFunctionAsync("select");
    });

    frame.add(input, button);
  }
}

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
10 Code Smells

No Coverage information
0.4% Duplication