Creating a Basic App

Avaa ChatGPT:ssä

In Projektin asetukset loit webforJ-projektin. Nyt on aika luoda projektin pääluokka ja lisätä interaktiivinen käyttöliittymä webforJ-komponentteja käyttäen. Tässä vaiheessa opit seuraavista asioista:

• WebforJ:n ja Spring Bootin käyttävien sovellusten aloituspisteestä
• WebforJ- ja HTML-elementtien komponenteista
• CSS:n käyttämisestä komponenttien tyylittämiseen

Tämän vaiheen suorittaminen luo version 1-creating-a-basic-app.

Sovelluksen suorittaminen

Sovellusta kehittäessäsi voit käyttää 1-creating-a-basic-app vertailuna. Näet sovelluksen toiminnassa:

1. Siirry ylimmälle tasolle hakemistoon, joka sisältää pom.xml-tiedoston, tämä on 1-creating-a-basic-app, jos seuraat GitHubin versiota.

2. Suorita seuraava Maven-komento Spring Boot -sovelluksen suorittamiseksi paikallisesti:

   mvn

Sovelluksen suorittaminen avaa automaattisesti uuden selaimen osoitteessa http://localhost:8080.

Aloituspiste

Jokaisessa webforJ-sovelluksessa on yksi luokka, joka laajentaa App. Tätä opasta varten, sekä muissa julkaistuissa webforJ-projekteissa, sitä kutsutaan yleensä nimellä Application. Tämä luokka on pakkaus, jonka nimi vastaa Projektin asetuksissa käyttämääsi groupId-arvoa:

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

Application-luokassa SpringApplication.run() -metodi käyttää asetuksia sovelluksen käynnistämiseen. Erilaiset anotoinnit ovat sovelluksen asetuksia varten.

Application.java

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

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

Annotoinnit

@SpringBootApplication on keskeinen annotaatio Spring Bootissa. Aseta tämä annotaatio pääluokkaan merkitäksesi sen sovelluksesi lähtökohtana.

@BundleEntry, @AppTheme ja @AppProfile ovat vain muutamia webforJ-annotaatioita, joita voit käyttää, kun haluat eksplisiittisesti asettaa asetuksia.

• @BundleEntry lisää tiedoston src/main/frontend:istä sovelluksen frontend-pakettiin. Tässä vaiheessa se lataa CSS-tiedoston, jonka tulet luomaan myöhemmin CSS:n tyylittelyssä.

• @AppTheme hallitsee sovelluksen visuaalista teemaa. Jos se asetetaan system:iksi, sovellus ottaa automaattisesti käyttäjän suosiman teeman: light, dark tai dark-pure. Tietoja mukautettujen teemojen luomisesta tai oletusteemojen ylittämisestä löytyy Teemoista.

• @AppProfile auttaa määrittämään, miten sovellus esitetään käyttäjälle asennettavana sovelluksena installoitavana sovelluksena. Vähintään tämä annotaatio tarvitsee name:n sovelluksen täydelle nimelle ja shortName:n, jota käytetään, kun tilaa on rajoitetusti. shortName:n ei tule ylittää 12 merkkiä.

Käyttöliittymän luominen

Luodaksesi käyttöliittymäsi, sinun on lisättävä HTML-elementtien komponentteja ja webforJ-komponentteja. Tällä hetkellä sinulla on vain yksisivuinen sovellus, joten lisäät komponentteja suoraan Application-luokkaan. Tämä tehdään ylikirjoittamalla App.run() -metodi ja luomalla Frame, jolle lisätään komponentteja.

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

  // Luo käyttöliittymäkomponentit ja lisää ne kehykseen

}

HTML-elementtien käyttäminen

Voit lisätä standardeja HTML-elementtejä sovellukseesi HTML-elementtien komponenttien avulla. Luo uusi instanssi komponentista ja käytä sitten add()-metodia sen lisäämiseksi Frame:een:

// Luo säiliö käyttöliittymäelementeille
Frame mainFrame = new Frame();

// Luo HTML-komponentti
Paragraph tutorial = new Paragraph("Opasohjelma!");

// Lisää komponentti säiliöön
mainFrame.add(tutorial);

WebforJ-komponenttien käyttäminen

Vaikka HTML-elementit ovat hyödyllisiä rakenteen, semantiikan ja kevyiden käyttöliittymäkokonaisuuksien suhteen, webforJ-komponentit tarjoavat monimutkaisempaa ja dynaamisempaa käyttäytymistä.

Alla oleva koodi lisää Button -komponentin, muuttaa sen ulkonäköä setTheme()-metodilla ja lisää tapahtumakuuntelijan, joka luo Viesti-dialogin komponentin, kun painiketta napsautetaan. Useimmat webforJ-komponenttimenetelmät, jotka muokkaavat komponenttia, palauttavat komponentin itsensä, joten voit ketjuttaa useita metodeja tiiviimpää koodia varten.

// Luo säiliö käyttöliittymäelementeille
Frame mainFrame = new Frame();

// Luo webforJ-komponentti
Button btn = new Button("Tietoja");

// Muokkaa webforJ-komponenttia ja lisää tapahtumakuuntelija
btn.setTheme(ButtonTheme.PRIMARY)
  .addClickListener(e -> OptionDialog.showMessageDialog("Tämä on opasohjelma!", "Tietoja"));

// Lisää komponentti säiliöön
mainFrame.add(btn);

CSS:n tyylittely

Useimmilla webforJ-komponenteilla on sisäänrakennetut menetelmät, joilla voidaan tehdä yleisiä tyylimuutoksia, kuten koon ja teeman säätämistä.

// Aseta Kehyksen leveys CSS-avainsanan avulla
mainFrame.setWidth("fit-content");

// Aseta Painikkeen maksimi-leveys pikseleinä
btn.setMaxWidth(200);

// Aseta Painikkeen teema PRIMARY:ksi
btn.setTheme(ButtonTheme.PRIMARY);

Näiden menetelmien lisäksi voit tyylittää sovellustasi CSS:llä. Tyylittely-osiossa minkä tahansa komponentin dokumentointisivulla on erityisiä tietoja asiaankuuluvista CSS-ominaisuuksista.

WebforJ:ssa on myös suunniteltu CSS-muuttujien sarja, jota kutsutaan DWC-tokeniksi. Katso Tyylittely -dokumentaatiosta yksityiskohtaiset tiedot siitä, miten webforJ-komponentteja tyylitetään, ja miten käyttää näitä tokenia.

CSS:n lisääminen frontend-pakettiin

On parasta käyttää erillistä CSS-tiedostoa, jotta kaikki pysyy järjestettynä ja ylläpidettävänä. Luo tiedosto nimeltä card.css hakemistoon src/main/frontend/css, seuraavalla CSS-luokkakuvannolla:

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);
}

Lisää sitten tiedosto frontend-pakettiin Application.java:sta käyttämällä @BundleEntry("css/card.css"). Polku on suhteellinen src/main/frontend:iin.

Frontend-pakettityökalu

Opasprojektin Maven-asetukset käynnistävät webforJ:n frontend-valvojan, kun käynnistät sovelluksen mvn:llä, joten muutokset hakemiston src/main/frontend alla kootaan uudelleen kehityksen aikana. Lisätietoja löytyy Frontend-pakettityökalusta.

CSS-luokkien lisääminen komponentteihin

Voit dynaamisesti lisätä tai poistaa luokkien nimiä komponentteihin käyttämällä addClassName() ja removeClassName() -menetelmiä. Tässä oppaassa käytetään vain yhtä CSS-luokkaa:

mainFrame.addClassName("card");

Valmis Application

Application-luokkasi pitäisi nyt näyttää seuraavan kaltaiselta:

Application.java

@SpringBootApplication
@BundleEntry("css/card.css")
@AppTheme("system")
@AppProfile(name = "Asiakassovellus", 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("Opasohjelma!");
    Button btn = new Button("Tietoja");

    btn
      .setTheme(ButtonTheme.PRIMARY)
      .setMaxWidth(200)
      .addClickListener(e ->
        OptionDialog.showMessageDialog("Tämä on opasohjelma!", "Tietoja")
      );

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

Useita sivuja

Monimutkaisemmassa sovelluksessa voit jakaa käyttöliittymän useisiin sivuihin parempaa järjestelyä varten. Tätä käsitellään myöhemmin tässä oppaassa Reititys ja koostekomponentit.

Seuraava vaihe

Kun olet luonut toimivan sovelluksen, jossa on peruskäyttöliittymä, seuraava vaihe on lisätä tietomalli ja näyttää tulokset Table-komponentissa Työskentely datan kanssa.