Zum Hauptinhalt springen

Kotlin-DSL für webforJ

Vorschau

Schreibe es in Kotlin. Behalte dein Java.

Das Kotlin-DSL erstellt webforJ-Oberflächen mit prägnanter, typsicherer Syntax. Statt imperativer Aufrufe schreiben Sie deklarativen Code, der wie eine Beschreibung des Bildschirms lesbar ist und im selben Projekt wie Ihr Java-Code kompiliert wird.

Zu einem Projekt hinzufügenMit der DSL

Die Klasse, die Sie kennen – als Builder

  • Buttonwirdbutton()
  • TextFieldwirdtextField()
  • FlexLayoutwirdflexLayout()
  • Breakwird`break`()

Schaltflächen, Felder, Layouts, Dialoge, Drawer, Listen und HTML-Elemente haben jeweils eines, das nach der Klasse in camelCase benannt ist.

Gleicher Bildschirm, zwei Sprachen

Java lesen. Lies dann Kotlin.

Beide Seiten erstellen dieselben Komponenten mit denselben webforJ-Klassen. Auf der Kotlin-Seite entfallen Setter und add()-Aufrufe: Komponenten werden ineinander verschachtelt und in Blöcken konfiguriert.

JavaHelloView.java

@Route("/hello")
public class HelloView extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();
  private TextField name = new TextField("What is your name?");
  private Button greet = new Button("Say hello");

  public HelloView() {
    greet.setTheme(ButtonTheme.PRIMARY)
        .addClickListener(e ->
            Toast.show("Welcome, " + name.getValue() + "!",
                Theme.SUCCESS));
    self.add(name, greet);
  }
}

KotlinHelloView.kt

@Route("hello")
class HelloView : Composite<FlexLayout>() {
  private val self = boundComponent

  init {
    self.apply {
      val name = textField("What is your name?")
      button("Say hello") {
        theme = ButtonTheme.PRIMARY
        onClick {
          Toast.show("Welcome, ${name.text}!", Theme.SUCCESS)
        }
      }
    }
  }
}

Was Ihnen die DSL bietet

Builder, Blöcke und Lambdas

Jede Builder-Funktion erstellt eine Komponente, fügt sie ihrem übergeordneten Container hinzu und führt einen Konfigurationsblock aus. Daraus ergibt sich der Rest der DSL.

Konfigurationsblöcke

Der Block erhält die Komponente als this, sodass Sie ihre Eigenschaften festlegen und ihre Methoden direkt aufrufen.

textField("Email") {
  placeholder = "you@example.com"   // this.placeholder
  required = true                   // this.required
  onModify { validate() }           // this.onModify(...)
}

  • Nach Komponenten benannte Builder

    Jede Komponente hat eine Funktion, die nach ihrer Klasse in camelCase benannt ist. Bei den meisten werden die Optionen, die Sie am häufigsten festlegen – etwa ein Label oder ein Platzhalter –, vor dem Block angegeben.

  • Verschachtelte Blöcke

    Komponenten mit untergeordneten Elementen akzeptieren verschachtelte DSL-Aufrufe in ihrem Block, sodass der Code die Bildschirmstruktur abbildet.

  • Ereignisse als Lambdas

    Listener verwenden mit „on“ präfixierte Methoden, die ein Lambda entgegennehmen, z. B. onClick und onModify.

  • Sicherheit des Gültigkeitsbereichs

    Untergeordnete Elemente werden nur Komponenten hinzugefügt, die sie unterstützen. Ein versehentliches Hinzufügen zu einem äußeren Bereich führt zu einem Kompilierungsfehler.

  • Styles und Klassennamen

    Die Eigenschaft styles ermöglicht den Zugriff auf CSS-Eigenschaften über eckige Klammern, wie bei setStyle() in Java. Klassennamen werden mit += hinzugefügt.

  • Neben Ihrem Java-Code

    Kotlin wird in JVM-Bytecode kompiliert. Verwenden Sie Kotlin-Composites aus Java-Klassen und verschachteln Sie Java-Komponenten mit add() in DSL-Blöcken.

DSL erweitern

Ihre eigenen Komponenten, auch als Builder

Eigene Komponenten und Bibliotheken von Drittanbietern werden über eine Erweiterungsfunktion für HasComponents in die DSL eingebunden. Der Helfer init fügt die Komponente ihrem Elternelement hinzu, führt den Block aus und gibt sie zurück. Mit der DSL erstellte zusammengesetzte Komponenten erhalten auf dieselbe Weise eine Funktion.

StarRating.kt
fun @WebforjDsl HasComponents.starRating(
  block: @WebforjDsl StarRating.() -> Unit = {}
): StarRating {
  return init(StarRating(), block)
}
Erweiterung der DSL in der Dokumentation

Erste Schritte

Kotlin hinzufügen in ein Maven-Projekt

Die Kotlin-DSL ist ab webforJ 25.12 verfügbar. Für ein Projekt, das bereits mit Maven gebaut wird, sind eine Abhängigkeit und ein Plugin erforderlich.

  1. 1

    Abhängigkeiten hinzufügen

    Fügen Sie das webforJ-Kotlin-DSL-Modul und die Kotlin-Standardbibliothek zu Ihrer pom.xml hinzu.

  2. 2

    Kotlin Maven plugin hinzufügen

    Kompiliert Ihre Kotlin- und Java-Quelldateien in einem Build. Eine separate Kotlin-Installation ist nicht erforderlich.

  3. 3

    Kotlin neben Java einsetzen

    Kotlin-Dateien können in einem eigenen Quellordner oder im selben Ordner wie Ihre Java-Dateien liegen.

  4. 4

    Ansicht schreiben und kompilieren

    Erstellen Sie eine Ansicht mit den Buildern. Maven kompiliert anschließend Ihren Kotlin-Code zusammen mit Ihrem Java-Code.

Kotlin-DSL einrichtenMit der DSL