App Basics

Avaa ChatGPT:ssä

Once webforJ ja sen riippuvuudet on asetettu projektiisi, olet valmis luomaan sovelluksen rakenteen. Tämä artikkeli käy läpi keskeisiä elementtejä perus webforJ-sovelluksessa, erityisesti keskittyen Application- ja HomeView-luokkiin, jotka ovat perusluokkia webforj-archetype-hello-world-starter-projektissa.

Pääsovellusluokka: Application.java

Application-luokka toimii entry pointina webforJ-sovelluksellesi, asettaen olennaiset asetukset ja reitit. Aluksi, huomaa luokan julkistus ja anotoinnit.

Tämä luokka perii ydin App-luokan webforJ:sta, tehden siitä tunnistettavan webforJ-sovelluksena. Erilaiset anotoinnit määrittävät sovelluksen teeman, otsikon ja reitityksen.

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

• @Routify: Määrittää, että webforJ:n tulee skannata com.samples.views-pakettia reittikomponentteja varten.
• @AppTitle: Määrittää otsikon, joka näkyy sovelluksen selainvälilehdellä.
• @StyleSheet: Liittää ulkoisen CSS-tiedoston, app.css, mahdollistaen mukautettujen tyylien soveltamisen sovellukseen.

Application-luokka ei sisällä muita metodeja, koska asetukset on tehty annotaatioiden kautta, ja webforJ hoitaa sovelluksen alustusprosessin.

Kun Application.java on asetettu, sovellus on nyt konfiguroitu otsikolla ja reiteillä, jotka osoittavat näkymäpakkiin. Seuraavaksi HomeView-luokan yleiskatsaus antaa käsityksen siitä, mitä näytetään, kun sovellus ajetaan.

Sovelluksen löytaminen

Yksi App -rajoitus on voimassa webforJ:ssä, mikä siirtää kaikki virheiden käsittelyvastuut Java-puolelle ja antaa kehittäjille täyden hallinnan virheiden hallintaan.

WebforJ:n käynnistysohjelmassa kaikki luokat, jotka perivät com.webforj.App, skannataan. Jos useita sovelluksia löytyy, järjestelmä etsii com.webforj.annotation.AppEntry -annotaatiota. Jos jokin löydetyistä luokista on merkitty @AppEntry-annotaatiolla, ensimmäinen kohdattu klas will will be considered the entry point.

• Jos luokka on merkitty @AppEntry, se luokka valitaan entry pointiksi.
• Jos useat luokat on merkitty @AppEntry, poikkeus heitetään, ja luetellaan kaikki löydetyt luokat.
• Jos kukaan luokista ei ole merkitty ja vain yksi App:n aliluokka on löydetty, tämä luokka valitaan entry pointiksi.
• Jos kukaan luokista ei ole merkitty ja useita App:n aliluokkia on löydetty, poikkeus heitetään, jossa yksityiskohtaisesti kerrotaan jokaisesta aliluokasta.

Virheiden käsittely

Lisätietoja virheiden käsittelystä webforJ:ssä, katso tämä artikkeli.

Päänäkymäluokka: HomeView.java

HomeView-luokka määrittelee yksinkertaisen näkymäkomponentin, joka toimii sovelluksen etusivuna. Se näyttää kentän ja painikkeen, joka tervehtii käyttäjän kirjoittamaa nimeä.

Luokan julkistus ja anotoinnit

HomeView perii Composite<FlexLayout>, joka mahdollistaa sen toimimisen uudelleenkäytettävänä komponenttina, joka koostuu FlexLayout -komponentista. @Route("/") tekee tästä sovelluksen juurireitin.

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

  private FlexLayout self = getBoundComponent();
  private TextField hello = new TextField("Mikä on nimesi?");
  private Button btn = new Button("Tervehdi");

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

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

    self.add(hello, btn);
  }
}

Komponentin alustus

Luokan sisällä useita käyttöliittymäelementtejä alustetaan ja määritellään:

private FlexLayout self = getBoundComponent();
private TextField hello = new TextField("Mikä on nimesi?");
private Button btn = new Button("Tervehdi");

• self: Pääasiallinen asettelu komponentti, joka käyttää FlexLayout, ja on määritetty elementtien säilöksi. Tämä elementti käyttää getBoundComponent() -menetelmää säilyttääkseen pääasiallisen FlexLayout:n, jota luokka sisältää.
• hello: TextField, jonka etiketti on Mikä on nimesi?, käyttäjien nimien syöttämiseksi.
• btn: Primaarityylillä varustettu Button, jonka etiketti on Tervehdi.

Asettelun konfigurointi

Asettelua (self) määritellään muutamilla keskeisillä tyyliparametreilla:

• FlexDirection.COLUMN pinotaan elementit pystysuorasti.
• setMaxWidth(300) rajoittaa leveyden 300 pikseliin tiiviimmän ulkoasun saamiseksi.
• setStyle("margin", "1em auto") keskittää asettelun marginaalilla sen ympäri.

Komponenttien lisääminen asetteluun

Lopuksi, hello-tekstikenttä ja btn-painike lisätään FlexLayout -säilöön kutsumalla self.add(hello, btn). Tämä järjestely määrittelee näkymän rakenteen, tehden lomakkeesta sekä vuorovaikutteisen että visuaalisesti keskittyneen.

Sovelluksen tyylitys

styles.css -tiedosto tarjoaa mukautettuja tyylejä webforJ-sovelluksellesi. Tämä CSS-tiedosto viitataan Application-luokassa käyttäen @StyleSheet annotaatiota, mikä mahdollistaa sovelluksen sovellusten tyyliin soveltuvien tyylien soveltamisen.

Tämä tiedosto sijaitsee projektin resources/static-hakemistossa, ja sen voi viitata verkkopalvelimen URL-osoitteen ws://app.css avulla.