Integrating an App Layout

Avaa ChatGPT:ssä

Tässä vaiheessa keräät kaikki sovelluksesi osat yhteen johdonmukaiseen sovelluslayoutiin. Tämän vaiheen lopussa sovelluksesi rakenne muistuttaa läheisesti SideMenu-arkkityyppiä, ja sinulla on parempi ymmärrys siitä, miten seuraavat komponentit ja käsitteet toimivat:

Sovelluksen suorittaminen

Sovellusta kehittäessäsi voit käyttää 6-integrating-an-app-layout vertailupohjana. Näet sovelluksen käytössä:

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

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

Uuden käytettävän komponentin luominen

Aiemmassa vaiheessa, Routing and Composites, loit kaksi komposiittikomponenttia, jotka sisälsivät asiakastaulukon sisällön ja asiakaslomakkeen. Tämän vaiheen osana luot pienemmän, uudelleen käytettävän komposiittikomponentin, joka näyttää sovelluksen nimen sivuvalikossa ja "Tietoa"-sivulla. Jos päätät muuttaa sovelluksen nimeä tulevaisuudessa, sinun tarvitsee päivittää se vain tässä komponentissa.

Hakemistossa src/main/java/com/webforj/tutorial/components luo luokka nimeltä AppTitle. AppTitle:n sidottu komponentti on FlexLayout, säilytyskomponentti, jota käytetään tämän vaiheen aikana näyttämään, kuinka tehdä monimutkaisempia asetteluja. Tälle FlexLayout:lle järjestät kohteiden suunnan ja välin kohteiden välillä. Tämä tehdään käyttämällä setDirection() ja setSpacing() -metodeja.

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

Sen jälkeen käytä standardeja HTML-elementtejä luodaksesi otsikon ja alaotsikon. Header-elementin alaosan marginaalin asettaminen 0px tuo elementit lähemmäksi toisiaan, ja voit tyylitellä 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("Asiakkaan hallinta");
  private Paragraph subTitle = new Paragraph("Yksinkertainen rekisterijä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, lisätty boolean-parametri konstruktoriin antaa sinun hallita, milloin renderöidä tietyt osat komponentista, kuten alaotsikon.

AppTitle.java
// Lisää boolean-parametri
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`

Kaikkiaan uudelleen käytettävä komponentti näyttää tältä:

AppTitle.java
public class AppTitle extends Composite<FlexLayout> {
  private FlexLayout self = getBoundComponent();
  private H2 title = new H2("Asiakkaan hallinta");
  private Paragraph subTitle = new Paragraph("Yksinkertainen rekisterijä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 juuri luodun AppTitle-komponentin, on tietosivu. Tämä sivu sisältää kuvan ja AppTitle-komponentin, keskitettynä sivulle toisen FlexLayout:n avulla.

Sisällön keskittäminen `FlexLayout`:lla

Tavoitteena on keskittyä tietosivun sisältöön FlexLayout:n avulla. FlexLayout komponentti seuraa CSS flexbox -asettelumallia. FlexLayout:n metodit, kuten aiemmin käytetyt menetelmät kohteiden suuntaamiseksi pystysuoraan, ovat erilaisia tapoja järjestää kohteet.

Kohteiden järjestämisen metodit FlexLayout:ssa käyttävät suhteellista suuntajärjestelmää. Sen sijaan, että ajattelisit vaakasuoria ja pystysuoria akselia, on parempi ajatella, että akseli, joka on kohtisuorassa kohteiden kanssa, on pääakseli ja akseli, joka on kohteita vastaan kohtisuorassa, on poikkisysteemi.

Kun asetat sekä FlexJustifyContent että FlexAlignment -ominaisuudet CENTER:iksi, se keskittää kohteet sekä pää- että poikkisysteemissä FlexLayout:ssa, ja kun teet FlexLayout:n käyttämään koko vanhempaa säiliötä, se keskittää sen sivulle.

private final FlexLayout layout = new FlexLayout();

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

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

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

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

Auttaaksesi visualisoimaan, kuinka eri menetelmät toimivat, voit katsoa blogiviestiä FlexWrap your mind around webforJ's FlexLayout.

Resurssien lisääminen

Yksi kohteista, joka menee keskitettyyn FlexLayout:iin, on kuva. Tämän oppaan vuoksi voit katsella ja ladata tietosivun kuvaa GitHubista. Lataa se ja lisää se projektisi staattiseen kansioon src/main/resources/static/images ja nimeä se Files.svg.

Tämän kuvan laittaminen staattiseen kansioon mahdollistaa sen käyttämisen viittauksena verkkopalveluprotokollan avulla, kuten teit, kun viittasit CSS-tiedostoon ensimmäisessä vaiheessa, Perus sovelluksen luominen. Voit sitten käyttää sitä sovelluksessasi HTML-elementtinä seuraavasti:

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

`AboutView`:n luominen

Kuten kahdella olemassa olevalla sovellussivulla, tietosivusta tulee reititettävä näkymä. Hakemistossa src/main/java/com/webforj/tutorial/views lisää luokka nimeltä AboutView. Käytä sidottuna komponenttina FlexLayout:a, kuten teit AppTitle:n kanssa.

Koska olet nimennyt luokan AboutView:ksi, URL-kartoitukselle ei tarvitse antaa erityisarvoa; tämä sivu renderöityy oletusarvoisesti osoitteeseen http://localhost:8080/about.

Tässä on miltä se näyttää, kun käytät aikaisempien vaiheiden käsitteitä ja juuri luotuja komponentteja uuden näkymän luomiseksi keskitettyyn sisältöön:

AboutView.java
@Route()
@FrameTitle("Tietoja")
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`-reititin luominen

Se mainitaan lyhyesti Routing and Composites vaiheessa, mutta on olemassa kaksi reitityyppiä. MainView, FormView ja AboutView ovat kaikki View-reittejä, kun taas se reitityyppi, jota käytät sovelluksen sivuvalikon luomiseen, on Layout-reititin.

Layout-reitit paketoivat lapsinäkymiä ja mahdollistavat tiettyjen UI-osien pysymisen näkymien välillä, kuten sivuvalikon. Hakemistossa src/main/java/com/webforj/tutorial/layouts luo luokka nimeltä MainLayout.

Reittiulostulot

Kuten näkymäreiteillä, MainLayout tarvitsee @Route-annotaation. Koska sillä on Layout-lisäyksena, eikä layout-reitit vaikuta URL-osoitteeseen, näissä annotaatioissa ei tarvita argumentteja.

MainLayout.java
@Route
public class MainLayout {

  public MainLayout() {

  }
}

Sovellus tietää, mitkä näkymät renderöidään MainLayout:ssa, ilmoittamalla layout-luokan reittiulostimena jokaisessa näkymässä. Edellisissä vaiheissa on vain value-ominaisuus asetettuna @Route-annotaatiossaan, joten nyt sinun on ilmoitettava selkeästi, mitkä 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, joka tarvitaan FormView ja AboutView tämän vaiheen osalta, 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äkymät MainLayout:ssa, voit valita, mihin komponentit renderöityvät. Valitsemalla AppLayout:n sidotuksi komponentiksi MainLayout:lle voit tallentaa näkymät oletusarvoisesti pääsisältöalueeseen, samalla kun sinulla on erilaisia alueita, joihin voit lisätä kohteita osoitteelle.

Slotit

Monissa webforJ-säilöissä käyttämällä add()-menetelmiä lisätään UI-komponentteja pääsisältöalueeseen. AppLayout-komponentissa on useita alueita UI-komponenttien lisäämistä varten, kukin erikseen slotissa. Merkitsemällä MainLayout:n 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 sivuvalikon sekä header slotin näyttääksesi, millä sivulla käyttäjä on, ja se on sivuvalikon kytkin.

Kun laitteella on riittävästi näyttötilaa, AppLayout-komponentti näyttää laatikon. Tähän lisäät AppTitle-komponentin uudelleen ja kohteita, jotka mahdollistavat käyttäjien navigoinnin sovelluksessa.

Oletuksena AppLayout ei näytä laatikon otsikkoa, mutta käyttämällä setDrawerHeaderVisible()-menetelmää voit näyttää drawer-title slotin sisällä olevia kohteita, jotka ovat AppTitle otsikolla alaotsikon kera.

private AppLayout appLayout = new AppLayout();

// Näytä Laatikon Otsikko
appLayout.setDrawerHeaderVisible(true);

// Lisää AppTitle Laatikon Otsikkoon alaotsikon kanssa
appLayout.addToDrawerTitle(new AppTitle(true));

drawer slotin tulee sitten sisältää komponentteja, jotka mahdollistavat käyttäjien navigoinnin sovelluksessa. Käyttämällä AppNav -komponenttia on helppo luoda uusia navigointivaihtoehtoja. Jokaiselle linkille tarvitset vain luoda AppNavItem. AppNavItem-komponentit tässä oppaassa käyttävät kolmea parametria:

Linkin etiketti
Kohde-näkymä
Valinnainen Icon -komponentti, joka käyttää kuvia Tabler

Koko laatikkoasetusten ryhmittely 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("Dashbord", MainView.class,
        TablerIcon.create("archive")));
    appNav.addItem(new AppNavItem("Tietoja", AboutView.class,
        TablerIcon.create("info-circle")));
    self.addToDrawer(appNav);
  }

Headerin tekeminen

header slotin tulee sisältää kaksi kohdetta: kytkin näyttämään tai piilottamaan sivuvalikon ja tapa näyttää kehysotsikko. Molemmat nämä kohteet ovat osa Toolbar -komponenttia, toinen tapa järjestää komponentteja.

Voit sisällyttää kytkimen AppLayout laatikolle komponentilla AppDrawerToggle. Tämä komponentti on jo tyylitelty yleisesti käytetyn näkymävaihtoehtojen kuvakkeella, ja se avaa ja sulkee laatikkoa.

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

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

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

Header voi myös näyttää kehysotsikon rekisteröimällä navigointitapahtuman ja hakemalla tietoja saapuvasta komponentista, ja se on tapahtumakuuntelija, joka poistaa rekisteröinnin estämään muistivuotoja.

// Luo H1-elementti ja navigointirekisteröinti
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 kehysotsikko saapuvasta näkyluokasta
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 luotua sisältöä laatikon ja headerin sisällä AppLayout:issa:

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-annotaatiossa.

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

`MainView`:n päivittäminen

MainView:ssa vaihdat sidotun komponentin Div:stä FlexLayout:iin. Tämä mahdollistaa taulukon keskittymisen, samalla siirtäen tiettyjä komponentteja asettelun sisälle. setItemAlignment()-metodin käyttö antaa sinun valita komponentin asettelusta ja siirtää sen, joten voit pitää taulukon keskitettynä, kun taas asiakasta lisäävä painike voidaan kiinnittää asetelun yläkulmaan.

// Vaihda sidottu komponentti FlexLayout:iksi
private FlexLayout self = getBoundComponent();

// Kohdistaa painikkeen poikkisysteemin loppuun
self.setItemAlignment(FlexAlignment.END, addCustomer);

Toinen parannus, jonka voit tehdä tässä, on taulukon leveys. Sen sijaan, että se olisi kiinteä leveys, voit asettaa sen vastaamaan vanhempaa säilöä, FlexLayout:ia. Sitten tuolle FlexLayout:lle voidaan asettaa enimmäisleveys, jotta se ei veny liikaa 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ä yhteen ja tekemällä toisen metodin saadaksesi FlexLayout keskittyneenä kuten aiemmissa, MainView näyttää seuraavalta, jossa on korostetut muutokset:

MainView.java
@Route(value = "/", outlet = MainLayout.class)
@FrameTitle("Asiakkaan 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);

Sovelluksen suorittaminen​

Uuden käytettävän komponentin luominen​

Valinnainen renderointi​

Valmis AppTitle​

Tietosivun luominen​

Sisällön keskittäminen FlexLayout:lla​

Resurssien lisääminen​

AboutView:n luominen​

Layout-reititin luominen​

Reittiulostulot​

AppLayout-komponentin käyttäminen​

Slotit​

Sivuvalikon tekeminen​

Headerin tekeminen​

Valmis MainLayout​

FormView:n päivittäminen​

MainView:n päivittäminen​