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ä vuorovaikutteinen käyttöliittymä webforJ-komponenttien avulla. Tässä vaiheessa opit:

  • Sovellusten pääsisäänkäynnistä, jotka käyttävät webforJ:ta ja Spring Bootia
  • webforJ- ja HTML-elementtikomponenteista
  • CSS:n käytöstä komponenttien muotoilemiseksi

Tämän vaiheen suorittaminen luo version [1-luodaan-perussovellus] (https://github.com/webforj/webforj-tutorial/tree/main/1-creating-a-basic-app).

Sovelluksen suorittaminen​

Kun kehität sovellustasi, voit käyttää [1-luodaan-perussovellus] (https://github.com/webforj/webforj-tutorial/tree/main/1-creating-a-basic-app) vertailukohtana. Näet sovelluksen toiminnassa:

  1. Siirry ykköstason hakemistoon, joka sisältää pom.xml-tiedoston, tämä on 1-luodaan-perussovellus, jos seuraat GitHubin versiota.

  2. Käytä seuraavaa Maven-komentoa suorittaaksesi Spring Boot -sovelluksen paikallisesti:

    mvn

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

Pääsääntö​

Jokaisessa webforJ-sovelluksessa on yksi luokka, joka laajentaa App. Tämän oppaan ja muiden julkaistujen webforJ-projektien osalta sitä kutsutaan yleisesti Application:iksi. Tämä luokka on paketissa, jonka nimi perustuu käyttämääsi groupId:hen Projektin asetukset:

1-luodaan-perussovellus
│   .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. Eri annotaatiot ovat sovelluksen asetuksia varten.

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

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

Annotaatit​

@SpringBootApplication on ydannotaatio Spring Bootissa. Asetat tämän annotaation pääluokkaan merkitäksesi sen sovelluksesi aloituspisteeksi.

@StyleSheet, @AppTheme ja @AppProfile ovat vain joitain lukuisista webforJ-annotaatioista, joita voit käyttää, kun haluat määrittää asetuksia selvästi.

  • @StyleSheet upottaa CSS-tiedoston verkkosivulle. Lisää tietoja siitä, miten vuorovaikuttaa tietyn CSS-tiedoston kanssa, löytyy myöhemmin kohdasta Muotoilu CSS:llä.

  • @AppTheme hallitsee sovelluksen visuaalista teemaa. Jos se on asetettu system, sovellus ottaa automaattisesti käyttäjän suosiman teeman: light, dark tai dark-pure. Tietoa mukautettujen teemojen luomisesta tai oletusteemojen ylikirjoittamisesta löydät Teemat -artikkelista.

  • @AppProfile auttaa määrittämään, miten sovellus esitetään käyttäjälle asennettavana sovelluksena. Vähintään tämä annotaatio tarvitsee name sovelluksen koko nimeksi ja shortName käytettäväksi, kun tilaa on rajoitetusti. shortName ei saisi ylittää 12 merkkiä.

Käyttöliittymän luominen​

Luodaksesi käyttöliittymäsi, sinun on lisättävä HTML-elementtikomponentteja ja webforJ-komponentteja. Tällä hetkellä sinulla on vain yhden sivun sovellus, joten lisäät komponentit suoraan Application-luokkaan. Tätä varten ylikirjoitat App.run()-metodin ja luot Frame:n, johon 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ö​

Voit lisätä standardeja HTML-elementtejä sovellukseesi HTML-elementtikomponenttien avulla. Luo uusi instanssi komponentista ja käytä add()-metodia lisätäksesi se Frame:en:

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

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

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

webforJ-komponenttien käyttö​

Vaikka HTML-elementit ovat hyödyllisiä rakenteessa, semantiikassa ja kevyissä käyttöliittymätarpeissa, webforJ-komponentit tarjoavat monimutkaisempaa ja dynaamisempaa käyttäytymistä.

Alla oleva koodi lisää Button -komponentin, muuttaa sen ulkoasua setTheme()-metodilla ja lisää tapahtumakuuntelijan luodakseen Message Dialog -komponentin, kun painiketta napsautetaan. Suurin osa webforJ-komponenttien metodeista, jotka muokkaavat komponenttia, palauttaa itse komponentin, 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("Info");

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

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

Muotoilu CSS:llä​

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

// Aseta kehykseen leveys CSS-avaimen avulla
mainFrame.setWidth("fit-content");

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

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

Näiden metodien lisäksi voit muotoilla sovellustasi käyttämällä CSS:ää. Jokaisen komponentin dokumentointisivun Muotoilu-osiossa on erityisiä tietoja asiaankuuluvista CSS-ominaisuuksista.

webforJ:lla on myös joukko suunniteltuja CSS-muuttujia, joita kutsutaan DWC-tokeneiksi. Katso Muotoilu -dokumentaatio tarkkoja tietoja webforJ-komponenttien muotoilusta ja tokenien käytöstä.

CSS-tiedoston viittaaminen​

On parasta pitää erillinen CSS-tiedosto, jotta kaikki pysyy järjestyksessä ja helposti ylläpidettävissä. Luo tiedosto nimeltä card.css hakemistoon src/main/resources/static/css, jossa on seuraava CSS-luokkakuvasto:

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

Tämän jälkeen viittaa tiedostoon Application.java käyttämällä @StyleSheet-annotaatiota CSS-tiedoston nimen kanssa. Tässä vaiheessa se on @StyleSheet("ws://css/card.css").

Verkkopalvelinprotokolla

Tässä oppaassa käytetään verkkopalvelinprotokollaa CSS-tiedoston viittaamiseen. Lisätietoja siitä, miten 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() -metodeja. 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
@StyleSheet("ws://css/card.css")
@AppTheme("system")
@AppProfile(name = "Asiakkaan sovellus", shortName = "AsiakasApp")
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("Oppimisohjelma!");
    Button btn = new Button("Info");

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

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

}
Useita sivuja

Monimutkaisemmassa sovelluksessa voit jakaa käyttöliittymän useisiin sivuihin paremman järjestelyn vuoksi. Tätä käsitellään myöhemmin tässä oppaassa kohdassa Reititys ja yhdistelmät.

Seuraava vaihe​

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