Integrating an App Layout

Avaa ChatGPT:ssä

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

• FlexLayout
• Reittilähtö
• AppLayout
• AppNav

Sovelluksen käynnistäminen

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

1. Siirry ylin taso hakemistoon, joka sisältää pom.xml-tiedoston. Tämä on 6-integrating-an-app-layout, jos seuraat GitHubin versiota.

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

   mvn

Sovelluksen käynnistäminen avaa automaattisesti uuden selaimen osoitteessa http://localhost:8080.

Uuden käytettävän komponentin luominen

Aiemmassa vaiheessa, Reititys ja Yhdistelmät, loit kaksi yhdistelmäkomponenttia, jotka sisälsivät asiakastaulukon ja asiakaslomakkeen sisällön. Tässä vaiheessa luot pienemmän, uudelleenkäytettävän yhdistelmäkomponentin, joka näyttää sovelluksen nimen sivupalkissa sekä tietoa-sivulla. Jos päätät muuttaa sovelluksen nimeä tulevaisuudessa, sinun tarvitsee vain päivittää se tähän komponenttiin.

Hakemistossa src/main/java/com/webforj/tutorial/components luo luokka nimeltä AppTitle. AppTitle-komponentti tulee olemaan FlexLayout, joka on konttikomponentti, jota käytetään tämän vaiheen aikana näyttämään, kuinka tehdä monimutkaisempia asetteluja. Tällä FlexLayout-komponentilla järjestät kohteiden suunnan ja niiden väliset välihaut. Tämä tehdään käyttämällä setDirection() ja setSpacing() menetelmiä.

AppTitle.java

// Tee sidottu komponentti FlexLayoutiksi
public class AppTitle extends Composite<FlexLayout> {
  private FlexLayout self = getBoundComponent();

  public AppTitle() {

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

    // Aseta välihauta kohteiden välillä
    self.setSpacing("0px");
  }
}

Käytä sitten standardeja HTML-elementtejä luodaksesi otsikon ja alaotsikon. Asettaessasi otsikko-elementin alaosan marginaalin 0px:ksi, tulet lähemmäksi toisiaan, ja voit muotoilla alaotsikon käyttämällä DWC CSS -muuttujia.

AppTitle.java

public class AppTitle extends Composite<FlexLayout> {
  private FlexLayout self = getBoundComponent();
  private H2 title = new H2("Asiakas Hallinta");
  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 renderointi

Vaikka AppTitle on yksinkertainen, boolean-argumentin lisääminen konstruktorimenetelmään sallii sinun hallita, milloin renderoida komponentin tiettyjä osia, kuten alaotsikon.

AppTitle.java

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

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

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

  // Valinnaisesti näytä alaotsikko
  if (showSubTitle) {
    self.add(subTitle);
  }
}

Valmis AppTitle

Kaikki yhdessä uudelleenkäytettävä komponentti näyttää seuraavalta:

AppTitle.java

public class AppTitle extends Composite<FlexLayout> {
  private FlexLayout self = getBoundComponent();
  private H2 title = new H2("Asiakas Hallinta");
  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);
    }
  }
}

Tietoa-sivun luominen

Ensimmäinen paikka, johon lisätään uusi AppTitle-komponentti, on tietoa-sivu. Tämä sivu sisältää kuvan ja AppTitle-komponentin, joka on keskitetty sivulle toisen FlexLayout-komponentin avulla.

Sisällön keskittäminen FlexLayoutilla

Tavoitteena on keskittää tietoa-sivun sisältö käyttämällä FlexLayout-komponenttia. FlexLayout-komponentti noudattaa CSS flexbox -asettelu mallia. Menetelmät FlexLayout-komponentille, kuten aikaisemmin käytetyt, sisältävät kohteiden suuntaamista pystysuoraan.

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 rinnakkain kohteiden kanssa pääakselina, ja akselia, joka on kohtisuorassa kohteisiin, poikkiakselina.

Asettamalla sekä FlexJustifyContent että FlexAlignment ominaisuudet arvoon CENTER keskittää kohteet sekä pää- että poikkiakseliin FlexLayout:issa, ja tekemällä FlexLayout:sta vanhemman kontin täydellinen, tekee sen keskitettynä sivulla.

private final FlexLayout layout = new FlexLayout();

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

// Tee pääakselista pystysuora
layout.setDirection(FlexDirection.COLUMN);

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

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

Auttaaksesi visualisoimaan, miten eri menetelmät toimivat, katso blogikirjoitusta FlexWrap your mind around webforJ:n FlexLayout.

Resurssien lisääminen

Yksi keskitettävästä FlexLayout:sta olevista kohteista on kuva. Tällä oppaalla voit katsella ja ladata tietoa-sivun kuvaa GitHubista. Lataamisen jälkeen lisää se projektisi staattiseen hakemistoon src/main/resources/static/images ja nimeä se Files.svg.

Tämän kuvan asettaminen staattiseen hakemistoon mahdollistaa sen viittaamisen Webpalvelin -protokollan avulla. Sitten voit käyttää sitä sovelluksessasi HTML-elementtinä, kuten näin:

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

AboutView -luominen

Kuten kahdella aiemmalla sovellussivulla, tietoa-sivu tulee olemaan reittikohde. Hakemistossa src/main/java/com/webforj/tutorial/views lisää luokka nimeltä AboutView. Käytä sidottuna komponenttina FlexLayout-komponenttia, kuten teit AppTitle:ssa.

Koska olet nimennyt luokan AboutView, URL-kartoitukselle ei tarvitse antaa mukautettua arvoa; tämä sivu renderöityy oletuksena osoitteessa http://localhost:8080/about.

Tässä on, miltä näyttää, kun käytät aikaisemman vaiheen käsitteitä yhdessä juuri luotujen komponenttien kanssa luodaksesi uuden näkymän, jolla on keskitetty sisältö:

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-reitin luominen

Kaikkia aiemmissa vaiheissa mainittuja reittityyppejä, Layout-reittejä käytetään lapsinäkymien ympäröimiseen, jolloin tietyt käyttöliittymän osat voivat pysyä jatkuvina näkymien välillä, kuten sivupalkki. Hakemistossa src/main/java/com/webforj/tutorial/layouts luo luokka nimeltä MainLayout.

Reittilähtö

Kuten näkymäreiteissä, myös MainLayout tarvitsee @Route-annotaation. Koska sillä on Layout-pääte ja layout-reitit eivät vaikuta URL-osoitteeseen, tätä annotaatiota ei tarvitse varustaa argumenteilla.

MainLayout.java

@Route
public class MainLayout {

  public MainLayout() {

  }
}

Sovellus tietää, mitä näkymiä renderöidään MainLayout:n sisällä julistamalla layout-luokan reittilähtöksi (/docs/routing/route-hierarchy/route-outlets) jokaisessa näkymässä. Aiemmissa vaiheissa on vain value-ominaisuus asetettuna @Route-annotaatioissa, joten nyt sinun täytyy eksplisiittisesti ilmoittaa, mitkä value ja outlet -ominaisuudet ovat näkyluokille.

MainView

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

FormView

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

AboutView

@Route(outlet = MainLayout.class)

Viimeiset viimeistelyt

Tämä on viimeinen muutos, joka vaaditaan FormView ja AboutView -reittien kohdistamiseen tässä vaiheessa, joten muista päivittää @Route-annotaatiot näille näkymille ennen sovelluksen suorittamista.

AppLayout-komponentin käyttäminen

Nyt kun sovelluksesi renderöi näkymät MainLayout:ssa, voit valita, mihin nuo komponentit renderöidään. Valitsemalla AppLayout sidottuna komponenttina MainLayout:lle, voit säilyttää näkymät oletuksena pääsisältöalueella, mutta myös antaa eri alueita lisätä asioita yläpalkkiin ja sivupalkkiin.

Slotit

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

Tässä vaiheessa käytät drawer-title ja drawer slotteja luodaksesi sivupalkin, sekä header slotin näyttääksesi, missä sivussa käyttäjä on ja kytkimen sivupalkkiin.

Sivupalkin luominen

Kun laitteessa on riittävästi näyttötilaa, AppLayout-komponentti näyttää laatikon. Täällä lisäät AppTitle-komponentin jälleen ja kohteita, jotka mahdollistavat käyttäjien navigoida sovelluksessa.

Oletuksena AppLayout ei näytä laatikon otsikkoa, mutta käyttämällä setDrawerHeaderVisible()-menetelmää voit näyttää kohteita, jotka ovat drawer-title slotissa, ja jotka ovat AppTitle sen alaotsikko näkyvissä.

private AppLayout appLayout = new AppLayout();

// Näytä Laatikkohäntä
appLayout.setDrawerHeaderVisible(true);

// Lisää AppTitle Laukkohäntään sen alaotsikon kanssa
appLayout.addToDrawerTitle(new AppTitle(true));

drawer slotin tulisi sitten sisältää komponentit, jotka mahdollistavat käyttäjien navigoida sovelluksessa. Käyttämällä AppNav komponenttia on helppo luoda uusia navigointivaihtoehtoja. Jokaiselle linkille sinun tarvitsee vain luoda AppNavItem. AppNavItem komponentit tämän oppaan aikana käyttävät kolmea parametria:

• Linkin etiketti
• Kohteen näkymä
• Valinnainen Icon komponentti, joka käyttää kuvia Tabler

Ryhmittäminen kaikki laatikon asetukset MainLayout:ssa 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("Dashboard", MainView.class,
        TablerIcon.create("archive")));
    appNav.addItem(new AppNavItem("About", AboutView.class,
        TablerIcon.create("info-circle")));
    self.addToDrawer(appNav);
  }
}

Yläpalkin luominen

header slotin tulisi sisältää kaksi kohdetta: kytkin, joka näyttää tai piilottaa sivupalkin, ja tapa näyttää kehyksen otsikko. Molemmat kohteet ovat Työkalupalkki komponentin sisällä, joka on toinen tapa järjestää komponentteja.

Voit sisällyttää kytkimen AppLayout-laatikon tuomaan AppDrawerToggle-komponentin. Tämä komponentti on jo muotoiltu yleisesti käytetyllä ikonilla piilotettuihin valikko vaihtoehtoihin, ja kohdistaa laatikon avautumaan ja sulkeutumaan.

// Luo säilökomponentit
private AppLayout appLayout = new AppLayout();
private Toolbar toolbar = new Toolbar();

// Lisää Työkalupalkki AppLayoutin yläpalkkiin
appLayout.addToHeader(toolbar);

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

Yläpalkki voi myös näyttää kehyksen otsikon käyttämällä navigointitapahtumaa saadaksesi tietoja sisään tulevasta komponentista ja tapahtuman kuuntelijaa tilauspoiston estämiseksi muistivuodoilta.

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

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

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

// Hae kehyksen otsikko saapuvasta näkymä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 laatikolle ja yläpalkille AppLayout-sisällä:

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 -päivitys

Kuten aiemmin mainittiin, ainoa muutos FormView-näkymän osalta oli @Route-annotaatiossa.

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

MainView -päivitys

MainView:lle vaihdat sidotun komponentin Div:stä FlexLayout:iin. Tämä mahdollistaa taulukon keskittämisen, ja voit myös siirtää tiettyjä komponentteja asettelun sisällä. Käyttämällä setItemAlignment()-menetelmää voit valita komponentin asettelusta ja siirtää sitä, jotta voit säilyttää taulukon keskitettynä, samalla kiinnittäen asiakaslisäyspainikkeen yläoikeaan asettelun kulmaan.

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

// Kohdistaa painikkeen poikkiaxisnan loppupäähän
self.setItemAlignment(FlexAlignment.END, addCustomer);

Toinen parannus, jonka voit tehdä tässä, on taulukon leveys. Kiinteän leveuden sijaan voit asettaa sen vastaamaan vanhempaan konttiin, FlexLayout:iin. Sitten tuo FlexLayout voi olla enimmäisleveys, jotta se ei venyisi liian suureksi suuremmilla näytöillä.

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

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

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

Yhdistämällä nämä ja luomalla toinen menetelmä saadaksesi FlexLayout keskitettynä, näyttää MainView seuraavilta korostetuilla muutoksilla:

MainView.java

@Route(value = "/", outlet = MainLayout.class)
@FrameTitle("Asiakas Taulukko")
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ää Asiakas", ButtonTheme.PRIMARY,
      e -> Router.getCurrent().navigate(FormView.class));

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