Siirry pääsisältöön

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-komponenttien avulla. Tässä vaiheessa opit:

  • Sovellusten sisäänkäyntipiste webforJ:n ja Spring Bootin avulla
  • webforJ- ja HTML-elementtikomponentit
  • CSS:n käyttäminen komponenttien tyylittämiseen

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

Sovelluksen ajaminen​

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

  1. Siirry pääkansioon, joka sisältää pom.xml tiedoston, tämä on 1-creating-a-basic-app, jos seuraat mukana GitHubin versiota.

  2. Käytä seuraavaa Maven komentoa ajaaksesi Spring Boot sovellusta paikallisesti:

    mvn

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

Sisäänkäyntipiste​

Jokaisessa webforJ-sovelluksessa on yksi luokka, joka laajentaa App. Tätä tutoriaalia ja muita julkaistuja webforJ-projekteja varten se on yleisesti nimeltään Application. Tämä luokka sijaitsee paketissa, joka on nimetty käyttämäsi groupId:n mukaan, jonka käytit Projektin asetuksissa:

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

Application-luokan sisällä SpringApplication.run()-metodi käyttää konfiguraatioita sovelluksen käynnistämiseen. Erilaiset annotaatiot ovat sovelluksen konfiguraatioita varten.

Application.java
@SpringBootApplication
@StyleSheet("ws://css/card.css")
@AppTheme("system")
@AppProfile(name = "Asiakassovellus", shortName = "Asiakassovellus")
public class Application extends App {

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

Annotaatit​

@SpringBootApplication on keskeinen annotaatio Spring Bootissa. Laitat tämän annotaation pääluokkaan merkitäksesi sen sovelluksesi aloituspisteeksi.

@StyleSheet, @AppTheme, ja @AppProfile ovat vain muutamia monista webforJ-annotaatioista, jotka ovat käytettävissä, kun haluat erikseen asettaa konfiguraatioita.

  • @StyleSheet upottaa CSS-tiedoston verkkosivulle. Lisätietoja siitä, kuinka vuorovaikuttaa tietyn CSS-tiedoston kanssa, on myöhemmin kohdassa Tyylitettäessä CSS:llä.

  • @AppTheme hallitsee sovelluksen visuaalista teemaa. Jos se on asetettu system, sovellus omaksuu automaattisesti käyttäjän suosiman teeman: light, dark tai dark-pure. Lisätietoja erilaisten teemojen luomisesta tai oletusteemojen ylikirjoittamisesta löytyy Teemat artikkelista.

  • @AppProfile auttaa konfiguroimaan, miten sovellus esitetään käyttäjälle asennettavana sovelluksena. Vähimmäisvaatimuksena tällä annotaatiolla on name sovelluksen täydelle nimelle ja shortName käytettäväksi, kun tilaa on rajallisesti. shortName ei saisi ylittää 12 merkkiä.

Käyttöliittymän luominen​

Luodaksesi käyttöliittymäsi, sinun täytyy lisätä HTML-elementtikomponentteja ja webforJ-komponentteja. Tällä hetkellä sinulla on vain yksisivuinen sovellus, joten lisäät komponentit suoraan Application-luokkaan. Tätä varten ylitse App.run()-metodin ja luo Frame, johon voit lisätä komponentteja.

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

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

}

HTML-elementtien käyttäminen​

Voit lisätä standardeja HTML-elementtejä sovellukseesi HTML-elementtikomponenttien avulla. Luo uusi komponenttitapaus, ja käytä add()-metodia lisätäksesi sen Frameen:

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

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

// 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ävaatimusten kohdalla, webforJ-komponentit tarjoavat monimutkaisempaa ja dynaamisempaa käyttäytymistä.

Alla oleva koodi lisää Button komponentin, muuttaa sen ulkonäköä setTheme()-metodilla, ja lisää tapahtumakuuntelijan luodakseen Message Dialog komponentin, kun painiketta napsautetaan. Useimmat webforJ-komponenttien metodit, jotka muokkaavat komponenttia, palauttavat itse komponentin, joten voit ketjuttaa useita metodeja tiiviimpää koodia varten.

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

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

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

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

Tyylitys CSS:llä​

Useimmilla webforJ-komponenteilla on sisäänrakennettuja metodeja yleisten tyylimuutosten, kuten koon ja teeman, tekemiseen.

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

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

// Aseta painikkeen teema PRIMARYksi
btn.setTheme(ButtonTheme.PRIMARY);

Nämä menetelmät lisäksi voit tyylittää sovellustasi CSS:llä. Tyylittely-osiossa minkä tahansa komponentin asiakirjasivulla on tarkkoja tietoja soveltuvista CSS-ominaisuuksista.

webforJ:llä on myös joukko suunniteltuja CSS-muuttujia, joita kutsutaan DWC-tokeneiksi. Katso Tyylitys asiakirjasta saadaksesi tarkkaa tietoa siitä, kuinka tyylittää webforJ-komponentteja ja kuinka käyttää tokeneja.

CSS-tiedoston viittaaminen​

On parasta omistaa erillinen CSS-tiedosto, jotta kaikki pysyy järjestyksessä ja helposti ylläpidettävänä. Luo tiedosto nimeltä card.css sisään src/main/resources/static/css, seuraavalla CSS-luokkadefiniitiolla:

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

Viittaa sitten tiedostoon Application.java käyttämällä @StyleSheet annotaatiota CSS-tiedoston nimellä. Tällä vaiheella se on @StyleSheet("ws://css/card.css").

Verkkopalvelin protokolla

Tässä tutoriaalissa käytetään verkkopalvelinprotokollaa CSS-tiedoston viittaamiseen. Lisätietoja siitä, kuinka tämä toimii, katso Resurssien hallinta.

CSS-luokkien lisääminen komponentteihin​

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

mainFrame.addClassName("card");

Valmis Application​

Application-luokkasi tulisi nyt näyttää seuraavalta:

Application.java
@SpringBootApplication
@StyleSheet("ws://css/card.css")
@AppTheme("system")
@AppProfile(name = "Asiakassovellus", shortName = "Asiakassovellus")
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("Tutoriaalisovellus!");
    Button btn = new Button("Info");

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

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

}
Useita sivuja

Monimutkaisemmassa sovelluksessa voit jakaa käyttöliittymän useisiin sivuihin paremman järjestämisen vuoksi. Tämä käsite käsitellään myöhemmin tässä tutoriaalissa kohdassa Reititys ja yhdistelmät.

Seuraava vaihe​

Kun olet luonut toimivan sovelluksen perustason käyttöliittymällä, seuraava vaihe on lisätä tietomalli ja näyttää tulokset Table komponentissa kohdassa Työskentely datan kanssa.