Integrating an App Layout

Avaa ChatGPT:ssä

Tässä vaiheessa yhdistät kaikki sovelluksesi osat yhtenäiseksi sovelluksen ulkoasuksi. Tämän vaiheen lopussa sovelluksesi rakenne muistuttaa läheisesti SideMenu-arkkityyppiä, ja ymmärrät paremmin, kuinka seuraavat komponentit ja käsitteet toimivat:

Sovelluksen suorittaminen

Sovellusta kehittäessäsi voit käyttää 6-integrating-an-app-layout vertailukohtana. Näet sovelluksen toiminnassa:

Siirry pääkansioon, joka sisältää pom.xml-tiedoston. Tämä on 6-integrating-an-app-layout, jos seuraat GitHubin versiota.
Käytä seuraavaa Maven-komentoa ajaaksesi Spring Boot -sovellusta paikallisesti:
```
mvn
```

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

Uuden käytettävän komponentin luominen

Aiemmassa vaiheessa, Reititys ja yhdisteet, loit kaksi yhdistettyä komponenttia, jotka sisälsivät asiakastaulukon ja asiakaslomakkeen sisällön. Tässä vaiheessa luot pienemmän, käytettävän yhdisteen, joka näyttää sovelluksen nimen sivuvalikossa ja tietosivulla. Jos päätät muuttaa sovelluksen nimeä tulevaisuudessa, sinun tarvitsee vain päivittää se tässä komponentissa.

Luodaan src/main/java/com/webforj/tutorial/components-kansioon luokka nimeltä AppTitle. AppTitle:n sidottu komponentti on FlexLayout, konttikomponentti, jota käytetään tässä vaiheessa näyttämään, kuinka tehdä monimutkaisempia asetteluja. Tässä FlexLayout:issa järjestät kohteiden suunnan ja välin kohteiden välillä. Tämä tehdään käyttämällä setDirection() ja setSpacing() -menetelmiä vastaavasti.

AppTitle.java
// Tee sidotusta komponentista FlexLayout
public class AppTitle extends Composite<FlexLayout> {
  private FlexLayout self = getBoundComponent();

  public AppTitle() {

    // Järjestä kohteet pystysuoraan
    self.setDirection(FlexDirection.COLUMN);

    // Aseta väli kohteiden väliin
    self.setSpacing("0px");
  }
}

Käytä sitten standardeja HTML-elementtejä luodaksesi otsikon ja alaotsikon. Asettamalla otsikkoelementin alareunan marginaaliksi 0px tuot elementit lähemmäs toisiaan, ja voit muotoilla alaotsikon käyttäen DWC CSS -muuttujia.

AppTitle.java
public class AppTitle extends Composite<FlexLayout> {
  private FlexLayout self = getBoundComponent();
  private H2 title = new H2("Asiakashallinta");
  private Paragraph subTitle = new Paragraph("Yksinkertainen rekisteröintijärjestelmä");

  public AppTitle() {
    title.setStyle("margin-bottom", "0px");
    subTitle.setStyle("color", "var(--dwc-color-gray-50)");
    subTitle.setStyle("font-size", "var(--dwc-font-size-m)");

    self.setDirection(FlexDirection.COLUMN)
        .setSpacing("0px")
        .add(title, subTitle);
  }
}

Valinnainen renderöinti

Vaikka AppTitle on yksinkertainen, boolean-argumentin lisääminen konstruktorimenetelmään mahdollistaa sen hallinnan, milloin tietyt komponentin osat, kuten alaotsikko, renderöidään.

AppTitle.java
// Lisää boolean-argumentti
public AppTitle(boolean showSubTitle) {

  self.setDirection(FlexDirection.COLUMN)
      .setSpacing("0px")

      // Lisää otsikko oletusarvoisesti
      .add(title);

  // Näytä tarvittaessa alaotsikko
  if (showSubTitle) {
    self.add(subTitle);
  }
}

Valmis `AppTitle`

Kaiken kaikkiaan käytettävän komponentin tulisi näyttää seuraavalta:

AppTitle.java
public class AppTitle extends Composite<FlexLayout> {
  private FlexLayout self = getBoundComponent();
  private H2 title = new H2("Asiakashallinta");
  private Paragraph subTitle = new Paragraph("Yksinkertainen rekisteröintijärjestelmä");

  public AppTitle(boolean showSubTitle) {
    title.setStyle("margin-bottom", "0");
    subTitle.setStyle("color", "var(--dwc-color-gray-50)");
    subTitle.setStyle("font-size", "var(--dwc-font-size-m)");

    self.setDirection(FlexDirection.COLUMN)
        .setSpacing("0px")
        .add(title);

    if (showSubTitle) {
      self.add(subTitle);
    }
  }
}

Tietosivun luominen

Ensimmäinen paikka, johon lisätään juuri luotu AppTitle-komponentti, on tietosivu. Tämä sivu sisältää kuvan ja AppTitle-komponentin, keskitettynä sivulla toisen FlexLayout:n avulla.

Sisällön keskipistettä käyttämällä `FlexLayout`

Tavoitteena on keskittää tietosivun sisältö FlexLayout:n avulla. FlexLayout-komponentti seuraa CSS flexbox -asettelu mallia. FlexLayout:n menetelmät, kuten aiemmin käytetyt menetelmät, joita käytetään kohteiden suuntaamiseen pystysuoraan, ovat eri tapoja järjestää kohteita.

Kohteiden järjestämiseen FlexLayout:ssa käytetään suhteellista suuntausjärjestelmää. Sen sijaan, että ajattelisit vaakasuoria ja pystysuoria akselia, on parempi ajatella akselia, joka on kohteiden suuntaan rinnakkainen, pääakselina, ja akselia, joka on kohteiden suuntaan kohtisuora, poikittaisakselina.

Asettamalla sekä FlexJustifyContent että FlexAlignment -ominaisuudet CENTER keskität kohteet sekä pää- että poikittaisakselilla FlexLayout:ssa, ja tekemällä FlexLayout:n, joka vie koko vanhemman komponentin tilan, saat sen keskitettyä sivulle.

private final FlexLayout layout = new FlexLayout();

// Täytä koko tila vanhemmasta elementistä
layout.setSize("100%", "100%");

// Aseta pääakseli pystysuoraksi
layout.setDirection(FlexDirection.COLUMN);

// Keskitä kohteet poikittaisakselilla
layout.setAlignment(FlexAlignment.CENTER);

// Keskitä kohteet pääakselilla
layout.setJustifyContent(FlexJustifyContent.CENTER);

Auttaaksesi visualisoimaan kuinka eri menetelmät toimivat, tarkista blogikirjoitus FlexWrap your mind around webforJ's FlexLayout.

Resurssien lisääminen

Yksi elementti, joka tulee menemään keskitettyyn FlexLayout:iin, on kuva. Tämän oppaan osalta voit katsella ja ladata tietosivun kuva GitHubista. Kun olet ladannut sen, lisää se projektisi staattiseen kansioon src/main/resources/static/images ja nimeä se Files.svg.

Kuvan sijoittaminen staattiseen kansioon mahdollistaa sen viittaamisen käyttämällä Webserver-protokollaa, kuten teit viitatessasi CSS-tiedostoon ensimmäisessä vaiheessa, Yksinkertaisen sovelluksen luominen. Sen jälkeen voit käyttää sitä sovelluksessasi HTML-elementtinä seuraavasti:

private Img fileImg = new Img("ws://images/Files.svg");

`AboutView`-luominen

Kuten kahdella olemassa olevalla sovellussivulla, tietosivu on reititettävä näkymä. Luodaan src/main/java/com/webforj/tutorial/views-kansioon luokka nimeltä AboutView. Käytä sidottuna komponenttina FlexLayout:ia, kuten teit AppTitle:n kanssa.

Koska olet nimennyt luokan AboutView, ei ole tarvetta antaa mukautettua arvoa URL-kartoitukselle; tämä sivu renderöidään http://localhost:8080/about -osoitteeseen oletusarvoisesti.

Tässä on, miltä näyttää, kun käytät aiempien vaiheiden käsitteitä ja juuri luotuja komponentteja uuden näkymän luomiseksi keskitetyllä sisällöllä:

AboutView.java
@Route()
@FrameTitle("Tietoa")
public class AboutView extends Composite<FlexLayout> {
  private FlexLayout self = getBoundComponent();
  private Img fileImg = new Img("ws://images/Files.svg");

  public AboutView() {
    fileImg.setWidth(250);
    self.setSize("100%", "100%")
        .setDirection(FlexDirection.COLUMN)
        .setAlignment(FlexAlignment.CENTER)
        .setJustifyContent(FlexJustifyContent.CENTER)
        .add(fileImg, new AppTitle(false));
  }
}

`Layout`-reitinvaiheen luominen

Tässä mainitaan lyhyesti Reititys ja yhdisteet -vaiheessa, mutta on olemassa kaksi reititystyyppiä. MainView, FormView ja AboutView ovat kaikki View -reitityksiä, kun taas reititystyyppi, jota käytät luodaksesi sovelluksen sivuvalikon, on Layout -reititys.

Layout-reititykset kääriävät lapsinäkymiä ja sallivat tiettyjen käyttöliittymän osien pysyä voimassa näkymien yli, kuten sivuvalikko. Luodaan src/main/java/com/webforj/tutorial/layouts-kansioon luokka nimeltä MainLayout.

Reititysreitit

Kuten näkymäreitityksissä, MainLayout tarvitsee @Route -annotaation. Koska sillä on Layout -päätteet, eikä layout-reititykset vaikuta URL-osoitteeseen, tämä annotaatio ei tarvitse lainkaan argumentteja.

MainLayout.java
@Route
public class MainLayout {

  public MainLayout() {

  }
}

Sovellus tietää, mitkä näkymät renderöidään MainLayout-sisällä, ilmoittamalla layout-luokan reititysreitiksi jokaisessa näkymässä. Aiempien vaiheiden @Route-annotaatioissa on vain asetettu value-ominaisuus, joten nyt sinun täytyy nimenomaisesti ilmoittaa, mitä value- ja outlet-ominaisuudet ovat näkyluokille.

MainView
FormView
AboutView

@Route(value = "/", outlet = MainLayout.class)

@Route(value = "customer/:id?<[0-9]+>", outlet = MainLayout.class)

@Route(outlet = MainLayout.class)

Viimeiset silaukset

Tämä on viimeinen muutos vaadittu FormView ja AboutView -vaiheessa, joten muista päivittää @Route-annotaatio näille näkymille ennen kuin suoritat sovelluksesi.

`AppLayout`-komponentin käyttäminen

Nyt, kun sovelluksesi renderöi näkymiä MainLayout:n sisällä, voit valita, minne komponentit renderöidään. Valitsemalla AppLayout:n sidotuksi komponentiksi MainLayout:lle voit tallentaa näkymät oletusarvoisesti pääsisältöalueelle, kunhan sinulla on erilaisia alueita, joihin voit lisätä elementtejä yläosaan ja sivuvalikkoon.

Paikat

Monissa webforJ-konteissa add()-menetelmien käyttö lisää käyttöliittymäkomponentteja pääsisältöalueelle. AppLayout-komponentissa on useita alueita käyttöliittymäkomponenttien lisäämiseen, jokainen erikseen. Merkitsemällä MainLayout layout-reititykseksi ja asettamalla sen sidotuksi komponentiksi AppLayout, näkymät renderöityvät automaattisesti pääsisältöpaikkaan.

Tässä vaiheessa käytät drawer-title- ja drawer-paikkoja luodaksesi sivuvalikon, ja header-paikka näyttää, millä sivulla käyttäjä on ja sisältää päävalikkopainikkeen.

Kun laitteessa on riittävästi näyttötilaa, AppLayout-komponentti näyttää laatikon. Tähän lisäät AppTitle:n uudelleen ja elementtejä, jotka sallivat käyttäjien navigoida sovelluksessa.

Oletusarvoisesti AppLayout ei näytä laatikon otsikkoa, mutta käyttämällä setDrawerHeaderVisible() -menetelmää voit näyttää elementtejä, jotka sijaitsevat drawer-title-paikassa, joka on AppTitle sen alaotsikon kanssa.

private AppLayout appLayout = new AppLayout();

// Näytä laatikon otsikko
appLayout.setDrawerHeaderVisible(true);

// Lisää AppTitle laatikon otsikkoon alaotsikon kanssa
appLayout.addToDrawerTitle(new AppTitle(true));

drawer-paikan tulee sitten sisältää komponentit, jotka sallivat käyttäjien navigoida sovelluksessa. Käyttämällä AppNav -komponenttia, voit helposti luoda uusia navigointivaihtoehtoja. Jokaiselle linkille sinun tarvitsee vain luoda AppNavItem. AppNavItem-komponentit tässä oppaassa käyttävät kolmea parametria:

Linkin etiketti
Kohdevuosi
Valinnainen Icon -komponentti, käyttämällä kuvia Tablerista

Kaikkien laatikon asetusten kokoaminen MainLayout-luokassa näyttää seuraavalta:

MainLayout
@Route
public class MainLayout extends Composite<AppLayout> {
  private AppLayout self = getBoundComponent();
  private AppNav appNav = new AppNav();

  public MainLayout() {
    setDrawer();
  }

  private void setDrawer() {
    self.setDrawerHeaderVisible(true)
        .addToDrawerTitle(new AppTitle(true));

    appNav.addItem(new AppNavItem("Koontinäyttö", MainView.class,
        TablerIcon.create("archive")));
    appNav.addItem(new AppNavItem("Tietoa", AboutView.class,
        TablerIcon.create("info-circle")));
    self.addToDrawer(appNav);
  }

Ylätunnisteen tekeminen

header-paikan tulee sisältää kaksi elementtiä: vaihtokytkin sivuvalikon näyttämiselle tai piilottamiselle ja tapa näyttää kehysotsikko. Molemmat näistä elementeistä ovat Toolbar -komponentin sisällä, joka on toinen tapa järjestää komponentteja.

Voit sisällyttää vaihtokytkimen AppLayout -laatikolle AppDrawerToggle -komponentilla. Tämä komponentti on jo tyylitelty yleisesti käytetyllä ikonilla piilotetuille valikkovaihtoehdoille, ja kohdistaa laatikon avattavaksi ja suljettavaksi.

// Luo kontainerikomponentit
private AppLayout appLayout = new AppLayout();
private Toolbar toolbar = new Toolbar();

// Lisää Toolbar AppLayout -ylätunnisteeseen
appLayout.addToHeader(toolbar);

// Lisää AppDrawerToggle työkalupalkkiin
toolbar.addToStart(new AppDrawerToggle());

Ylätunniste voi myös näyttää kehysotsikon käyttämällä navigointitapahtumaa, jotta saadaan yksityiskohtia saapuvasta komponentista, ja tapahtumakuuntelijaa poistamaan rekisteröinnin estääkseen muistivuotot.

// Luo H1-elementti ja navigointirekisteröinti
private H1 title = new H1("");
private ListenerRegistration<NavigateEvent> navigateRegistration;

// Rekisteröi tapahtuma navigointihetkellä
navigateRegistration = Router.getCurrent().onNavigate(this::onNavigate);

// Poista kuuntelijat ennen MainLayoutin tuhoamista
@Override
protected void onDidDestroy() {
  if (navigateRegistration != null) {
    navigateRegistration.remove();
  }
}

// Hae kehysotsikko saapuvasta näkymän luokasta
private void onNavigate(NavigateEvent ev) {
  Component component = ev.getContext().getComponent();
  if (component != null) {
    FrameTitle frameTitle = component.getClass().getAnnotation(FrameTitle.class);
    title.setText(frameTitle != null ? frameTitle.value() : "");
  }
}

Valmis `MainLayout`

Tässä on MainLayout, jossa on luodut sisällöt laatikkoon ja ylätunnisteeseen AppLayout:ssa:

MainLayout.java
@Route
public class MainLayout extends Composite<AppLayout> {
  private AppLayout self = getBoundComponent();
  private H1 title = new H1("");
  private ListenerRegistration<NavigateEvent> navigateRegistration;
  private Toolbar toolbar = new Toolbar();
  private AppNav appNav = new AppNav();

  public MainLayout() {
    setHeader();
    setDrawer();
    navigateRegistration = Router.getCurrent().onNavigate(this::onNavigate);
  }

  private void setHeader() {
    self.addToHeader(toolbar);

    toolbar.addToStart(new AppDrawerToggle());
    toolbar.addToTitle(title);
  }

`FormView`:n päivittäminen

Kuten aiemmin mainittiin, ainoa muutos FormView:lle oli @Route -annotaatio.

@Route(value = "customer/:id?<[0-9]+>", outlet = MainLayout.class)

`MainView`:n päivittäminen

MainView:lle muutat sidotun komponentin Div:stä FlexLayout:ksi. Tämä mahdollistaa taulukon keskittämisen, samalla kun siirrät tiettyjä komponentteja asetteluun. Käyttämällä setItemAlignment()-menetelmää voit valita komponentin asettelusta ja siirtää sen, jotta voit pitää taulukon keskitettynä samalla, kun ankkuroit asiakasta lisäävän painikkeen asettelun oikeaan yläkulmaan.

// Muuta sidottu komponentti FlexLayout:ksi
private FlexLayout self = getBoundComponent();

// Kohdista painike poikittaisakselin päähän
self.setItemAlignment(FlexAlignment.END, addCustomer);

Toinen parannus, jonka voit tässä tehdä, on taulukon leveys. Kiinteän leveyden sijaan voit asettaa sen vastaamaan sen vanhempaa komponenttia, FlexLayout:ia. Sitten tuon FlexLayout:n on oltava enimmäisleveys, jotta se ei veny liikaa suurilla näytöillä.

private FlexLayout self = getBoundComponent();
private Table<Customer> table = new Table<>();

self.setSize("100%", "100%");
self.setMaxWidth(2000);

table.setSize("100%", "294px");

Kun yhdistetään nämä yhdessä ja tehdään toinen menetelmä saadaksesi FlexLayout:n keskitettynä kuten aiemmissa, MainView näyttää seuraavalta korostetuin muutoksin:

MainView.java
@Route(value = "/", outlet = MainLayout.class)
@FrameTitle("Asiakastaulukko")
public class MainView extends Composite<FlexLayout> {
  private final CustomerService customerService;
  private FlexLayout self = getBoundComponent();
  private Table<Customer> table = new Table<>();
  private Button addCustomer = new Button("Lisää asiakasta", ButtonTheme.PRIMARY,
      e -> Router.getCurrent().navigate(FormView.class));

  public MainView(CustomerService customerService) {
    this.customerService = customerService;
    addCustomer.setWidth(200);
    buildTable();
    setFlexLayout();
    self.add(addCustomer, table);

Sovelluksen suorittaminen​

Uuden käytettävän komponentin luominen​

Valinnainen renderöinti​

Valmis AppTitle​

Tietosivun luominen​

Sisällön keskipistettä käyttämällä FlexLayout​

Resurssien lisääminen​

AboutView-luominen​

Layout-reitinvaiheen luominen​

Reititysreitit​

AppLayout-komponentin käyttäminen​

Paikat​

Sivuvalikon tekeminen​

Ylätunnisteen tekeminen​

Valmis MainLayout​

FormView:n päivittäminen​

MainView:n päivittäminen​