App Basics

In ChatGPT öffnen

Sobald webforJ und seine Abhängigkeiten in Ihrem Projekt eingerichtet sind, sind Sie bereit, die App-Struktur zu erstellen. Dieser Artikel beschreibt die Schlüsselaspekte einer grundlegenden webforJ-App und konzentriert sich insbesondere auf die Klassen Application und HomeView, die die grundlegenden Klassen im Starterprojekt webforj-archetype-hello-world sind.

Haupt-App-Klasse: Application.java

Die Klasse Application dient als Einstiegspunkt für Ihre webforJ-App und richtet die erforderlichen Konfigurationen und Routen ein. Zunächst beachten Sie die Deklaration und Anmerkungen der Klasse.

Diese Klasse erweitert die Kernklasse App von webforJ, wodurch sie als webforJ-App erkennbar ist. Verschiedene Anmerkungen konfigurieren das Theme, den Titel und das Routing der App.

@Routify(packages = "com.samples.views")
@AppTitle("webforJ Hello World")
@StyleSheet("ws://app.css")
public class Application extends App {
}

• @Routify: Gibt an, dass webforJ das Paket com.samples.views nach Routenkomponenten durchsuchen soll.
• @AppTitle: Definiert den Titel, der auf dem Browser-Tab der App angezeigt wird.
• @StyleSheet: Verknüpft eine externe CSS-Datei, app.css, die individuelles Styling für die App ermöglicht.

Die Klasse Application enthält keine zusätzlichen Methoden, da die Konfigurationen über Anmerkungen festgelegt werden und webforJ die Initialisierung der App übernimmt.

Mit der Einrichtung von Application.java ist die App nun mit einem Titel und Routen, die auf das Ansichts-Paket zeigen, konfiguriert. Als Nächstes gibt eine Übersicht über die Klasse HomeView Einblick, was angezeigt wird, wenn die App ausgeführt wird.

Entdecken einer App

Es gilt eine Beschränkung auf eine einzige App in webforJ, wodurch alle Fehlerbehandlungsverantwortlichkeiten auf die Java-Seite verschoben werden und Entwickler die vollständige Kontrolle über das Fehler-Management haben.

Während des Bootstrapping-Prozesses von webforJ werden alle Klassen gescannt, die com.webforj.App erweitern. Wenn mehrere Apps gefunden werden, sucht das System nach der com.webforj.annotation.AppEntry-Anmerkung. Wenn eine der gefundenen Klassen mit @AppEntry annotiert ist, wird die zuerst gefundene als Einstiegspunkt betrachtet.

• Wenn eine Klasse mit @AppEntry annotiert ist, wird diese Klasse als Einstiegspunkt ausgewählt.
• Wenn mehrere Klassen mit @AppEntry annotiert sind, wird eine Ausnahme ausgelöst, die alle gefundenen Klassen auflistet.
• Wenn keine Klasse annotiert ist und nur eine Unterklasse von App gefunden wird, wird diese Klasse als Einstiegspunkt ausgewählt.
• Wenn keine Klasse annotiert ist und mehrere Unterklassen von App gefunden werden, wird eine Ausnahme ausgelöst, die jede Unterklasse detailliert beschreibt.

Fehlerbehandlung

Für weitere Informationen zur Fehlerbehandlung in webforJ, siehe diesen Artikel.

Hauptansichtsklasse: HomeView.java

Die Klasse HomeView definiert eine einfache Ansichtskomponente, die als Startseite für die App dient. Sie zeigt ein Textfeld und einen Button an, um den eingegebenen Namen des Benutzers zu begrüßen.

Klassendeklaration und Anmerkungen

HomeView erweitert Composite<FlexLayout>, was es ihm ermöglicht, als wiederverwendbare Komponente, die aus einer FlexLayout-Komponente besteht, zu agieren. Die @Route("/") macht dies zur Root-Route der App.

@Route("/")
public class HelloWorldView extends Composite<FlexLayout> {

  private final FlexLayout self = getBoundComponent();
  private TextField hello = new TextField("Was ist Ihr Name?");
  private Button btn = new Button("Hallo sagen");

  public HelloWorldView(){
    self.setDirection(FlexDirection.COLUMN);
    self.setMaxWidth(300);
    self.setStyle("margin", "1em auto");

    btn.setTheme(ButtonTheme.PRIMARY)
        .addClickListener(e ->
          Toast.show("Willkommen bei webforJ Starter " + hello.getValue() + "!", Theme.GRAY));

    self.add(hello, btn);
  }
}

Komponenteninitialisierung

Innerhalb der Klasse werden mehrere UI-Elemente initialisiert und deklariert:

private final FlexLayout self = getBoundComponent();
private TextField hello = new TextField("Was ist Ihr Name?");
private Button btn = new Button("Hallo sagen");

• self: Die Hauptlayout-Komponente, die die FlexLayout verwendet, konfiguriert als Container für die Elemente. Dieses Element verwendet die Methode getBoundComponent(), um das Haupt-FlexLayout, das die Klasse enthält, zu speichern.
• hello: Ein TextField, das mit Was ist Ihr Name? beschriftet ist, damit Benutzer ihren Namen eingeben können.
• btn: Ein primär gestalteter Button mit der Beschriftung Hallo sagen.

Layoutkonfiguration

Das Layout (self) ist mit einigen wichtigen Stil-Eigenschaften konfiguriert:

• FlexDirection.COLUMN stapelt die Elemente vertikal.
• setMaxWidth(300) beschränkt die Breite auf 300 Pixel für ein kompaktes Layout.
• setStyle("margin", "1em auto") zentriert das Layout mit einem Rand darum.

Hinzufügen von Komponenten zum Layout

Schließlich werden das Hallo-Textfeld und der btn-Button zum FlexLayout-Container hinzugefügt, indem self.add(hello, btn) aufgerufen wird. Diese Anordnung definiert die Struktur der Ansicht und macht das Formular sowohl interaktiv als auch optisch zentriert.

Styling der App

Die Datei styles.css bietet individuelles Styling für Ihre webforJ-App. Diese CSS-Datei wird in der Klasse Application über die @StyleSheet-Anmerkung referenziert, was es der App ermöglicht, Stile auf Komponenten innerhalb der App anzuwenden.

Diese Datei befindet sich im Verzeichnis resources/static des Projekts und kann über die URL des Webservers ws://app.css referenziert werden.