Creating a Basic App

Openen in ChatGPT

In Project Setup heb je een webforJ-project gegenereerd. Nu is het tijd om de hoofdklasse voor het project te creëren en een interactieve interface toe te voegen met behulp van webforJ-componenten. In deze stap leer je over:

Het instappunt voor apps die webforJ en Spring Boot gebruiken
webforJ en HTML-elementcomponenten
CSS gebruiken om componenten op te maken

Het voltooien van deze stap creëert een versie van 1-creating-a-basic-app.

De app uitvoeren

Terwijl je aan je app werkt, kun je 1-creating-a-basic-app gebruiken als vergelijking. Om de app in actie te zien:

Navigeer naar de bovenliggende directory met het pom.xml-bestand, dit is 1-creating-a-basic-app als je de versie op GitHub volgt.
Gebruik de volgende Maven-opdracht om de Spring Boot-app lokaal uit te voeren:
```
mvn
```

De app wordt automatisch geopend in een nieuwe browserwindow op http://localhost:8080.

Het instappunt

Elke webforJ-app bevat een enkele klasse die App uitbreidt. Voor deze tutorial en andere gepubliceerde webforJ-projecten wordt deze meestal Application genoemd. Deze klasse bevindt zich in een pakket dat is genoemd naar de groupId die je hebt gebruikt in Project Setup:

1-creating-a-basic-app
│   .editorconfig
│   .gitignore
│   pom.xml
│   README.md
│
├───.vscode
├───src/main/java
│   └──com/webforj/tutorial
│       └──Application.java
└───target

Binnen de Application-klasse gebruikt de SpringApplication.run()-methode de configuraties om de app te starten. De verschillende annotaties zijn voor de configuraties van de app.

Application.java
@SpringBootApplication
@BundleEntry("css/card.css")
@AppTheme("system")
@AppProfile(name = "Customer Application", shortName = "CustomerApp")
public class Application extends App {

  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }
}

Annotaties

De @SpringBootApplication is een kernannotatie in Spring Boot. Je plaatst deze annotatie op de hoofklasse om deze te markeren als het startpunt van je app.

@BundleEntry, @AppTheme, en @AppProfile zijn slechts enkele van de webforJ-annotaties die beschikbaar zijn wanneer je expliciet configuraties wilt instellen.

@BundleEntry voegt een bestand van src/main/frontend toe aan de frontend-bundel van de app. In deze stap laadt het het CSS-bestand dat je later zult maken in Styling met CSS.
@AppTheme beheert het visuele thema van de app. Als het is ingesteld op system, past de app automatisch het favoriete thema van de gebruiker aan: light, dark, of dark-pure. Voor informatie over het creëren van aangepaste thema's of het overschrijven van de standaardthema's, zie het artikel Thema's.
@AppProfile helpt configureren hoe de app zich aan de gebruiker presenteert als een installable app. Minimaal heeft deze annotatie een name nodig voor de volledige naam van de app en een shortName voor gebruik wanneer de ruimte beperkt is. De shortName mag niet langer zijn dan 12 tekens.

Een gebruikersinterface creëren

Om je UI te creëren, moet je HTML-elementcomponenten en webforJ-componenten toevoegen. Voor nu heb je alleen een single-page app, dus je voegt componenten rechtstreeks toe aan de Application-klasse. Om dit te doen, overschrijf je de App.run()-methode en maak je een Frame aan om componenten toe te voegen.

@Override
public void run() throws WebforjException {
  Frame mainFrame = new Frame();

  // Maak UI-componenten en voeg ze toe aan het frame

}

HTML-elementen gebruiken

Je kunt standaard HTML-elementen aan je app toevoegen met HTML-elementcomponenten. Maak een nieuwe instantie van de component en gebruik de add()-methode om deze aan de Frame toe te voegen:

// Maak de container voor de UI-elementen
Frame mainFrame = new Frame();

// Maak de HTML-component
Paragraph tutorial = new Paragraph("Tutorial Application!");

// Voeg de component toe aan de container
mainFrame.add(tutorial);

webforJ-componenten gebruiken

Hoewel HTML-elementen nuttig zijn voor structuur, semantiek en lichte UI-behoeften, bieden webforJ-componenten complexer en dynamisch gedrag.

De onderstaande code voegt een Button component toe, verandert het uiterlijk met de setTheme()-methode en voegt een gebeurtenislus toe om een Message Dialog component te creëren wanneer op de knop wordt geklikt. De meeste webforJ-componentmethoden die een component wijzigen, retourneren de component zelf, zodat je meerdere methoden kunt ketenen voor compactere code.

// Maak de container voor de UI-elementen
Frame mainFrame = new Frame();

// Maak de webforJ-component
Button btn = new Button("Info");

// Wijzig de webforJ-component en voeg een gebeurtenislus toe
btn.setTheme(ButtonTheme.PRIMARY)
  .addClickListener(e -> OptionDialog.showMessageDialog("Dit is een tutorial!", "Info"));

// Voeg de component toe aan de container
mainFrame.add(btn);

Styling met CSS

De meeste webforJ-componenten hebben ingebouwde methoden om veelvoorkomende stijlwijzigingen aan te brengen, zoals grootte en thematisering.

// Stel de breedte van het Frame in met een CSS-sleutelwoord
mainFrame.setWidth("fit-content");

// Stel de maximale breedte van de Button in met pixels
btn.setMaxWidth(200);

// Stel het thema van de Button in op PRIMARY
btn.setTheme(ButtonTheme.PRIMARY);

Naast deze methoden kun je je app stylen met CSS. De sectie Styling van de documentatiepagina van een component bevat specifieke details over de relevante CSS-eigenschappen.

WebforJ wordt ook geleverd met een set ontworpen CSS-variabelen die DWC-tokens worden genoemd. Zie de documentatie over Styling voor gedetailleerde informatie over hoe je webforJ-componenten kunt stylen en hoe je de tokens kunt gebruiken.

CSS aan de frontend-bundel toevoegen

Het is het beste om een afzonderlijk CSS-bestand te hebben om alles georganiseerd en onderhoudbaar te houden. Maak een bestand genaamd card.css aan in src/main/frontend/css, met de volgende CSS-klasse-definitie:

card.css
.card {
  display: grid;
  gap: var(--dwc-space-l);
  padding: var(--dwc-space-l);
  margin: var(--dwc-space-l) auto;
  border: thin solid var(--dwc-color-default);
  border-radius: 16px;
  background-color: var(--dwc-surface-3);
  box-shadow: var(--dwc-shadow-xs);
}

Voeg dan het bestand toe aan de frontend-bundel vanuit Application.java door @BundleEntry("css/card.css") te gebruiken. Het pad is relatief ten opzichte van src/main/frontend.

Frontend-bundelaar

De Maven-configuratie van het tutorial-project start de webforJ-frontend-watcher wanneer je de app met mvn start, zodat wijzigingen onder src/main/frontend tijdens de ontwikkeling opnieuw worden opgebouwd. Voor meer informatie, zie Frontend-bundelaar.

CSS-klassen aan componenten toevoegen

Je kunt dynamisch class-namen aan componenten toevoegen of verwijderen met de methoden addClassName() en removeClassName(). Voor deze tutorial wordt er slechts één CSS-klasse gebruikt:

mainFrame.addClassName("card");

Voltooid `Application`

Je Application-klasse zou er nu ongeveer zo uit moeten zien:

Application.java
@SpringBootApplication
@BundleEntry("css/card.css")
@AppTheme("system")
@AppProfile(name = "Customer Application", shortName = "CustomerApp")
public class Application extends App {

  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }

  @Override
  public void run() throws WebforjException {
    Frame mainFrame = new Frame();
    Paragraph tutorial = new Paragraph("Tutorial App!");
    Button btn = new Button("Info");

    btn
      .setTheme(ButtonTheme.PRIMARY)
      .setMaxWidth(200)
      .addClickListener(e ->
        OptionDialog.showMessageDialog("Dit is een tutorial!", "Info")
      );

    mainFrame.setWidth("fit-content").addClassName("card").add(tutorial, btn);
  }
}

Meerdere pagina's

Voor een complexere app kun je de UI opdelen in meerdere pagina's voor betere organisatie. Dit concept wordt later in deze tutorial behandeld in Routing en Composites.

Volgende stap

Nadat je een functionele app met een basisgebruikersinterface hebt gemaakt, is de volgende stap om een gegevensmodel toe te voegen en de resultaten weer te geven in een Table-component in Werken met Gegevens.

De app uitvoeren​

Het instappunt​

Annotaties​

Een gebruikersinterface creëren​

HTML-elementen gebruiken​

webforJ-componenten gebruiken​

Styling met CSS​

CSS aan de frontend-bundel toevoegen​

CSS-klassen aan componenten toevoegen​

Voltooid Application​

Volgende stap​