Käyttöliittymäkomponentit

Yritysnäytön jokainen osa, Valmis Javassa.

webforJ on full-stack Java-kehys yritysten verkkosovelluksiin: rakennat koko sovelluksen näyttöineen Java-kielellä. Sen komponentit kattavat asettelun, tietojen syöttämisen, valintaikkunat, tietojen näyttämisen ja palautteen. Jokainen komponentti on Java-luokka, jonka luot, määrität ja lisäät asetteluun.

Avaa komponenttigalleria Selaa käyttötarkoituksen mukaan

Komponentit galleriassa: 57
Tyypitetyt HTML-elementit: 29
Sisäänrakennetut teemat: 3
Ryhmät tarkoituksen mukaan: 5

Tarkoituksen mukaan

Valitse ryhmä ja sitten komponentti. Jokainen ruutu avaa komponentin oman sivun dokumentaatiossa.

Asettelu

Näytön rakenne: sovelluskehykset, työkalurivit, flex- ja sarakeasettelut, jaetut paneelit ja pinnat.

8 komponenttia

Lomakkeet ja syötekentät

Kaikki käyttäjän kirjoittama, valitsema tai lataama – teksteistä ja numeroista päivämääriin, syöttömaskeihin, listoihin ja tiedostoihin.

20 komponenttia

Data ja sisältö

Näytä tietueita, hierarkioita, kaavioita ja suoratoistettua tekstiä sekä lataa lisää vieritettäessä.

8 komponenttia

Palaute ja valintaikkunat

Kerro käyttäjille, mitä tapahtuu, pyydä heitä vahvistamaan ja kerää arvo, tiedosto tai kirjautumistiedot.

12 komponenttia

Koostumus

Omat komponenttisi, Rakennettu omiemme pohjalta.

webforJ käyttää koostamista periytymisen sijaan. Et peri Button-komponenttia. Kirjoitat luokan, joka laajentaa Composite-komponenttia, yhdistät siihen komponentteja ja päätät, mitkä metodit muu sovelluksesi voi nähdä.

SearchBar.java

public class SearchBar extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();
  private TextField searchField;
  private Button searchButton;

  public SearchBar() {
    searchField = new TextField("Search");
    searchButton = new Button("Go");

    self.setDirection(FlexDirection.ROW)
      .add(searchField, searchButton);
  }
}

Yksi luokka, yksi yksikkö.
Composite kapseloi yhden sidotun komponentin ja sen sisäisen rakenteen, joten hakupalkista, osoitelomakkeesta tai kokonaisesta koontinäyttökortista tulee uudelleenkäytettävä luokka.
Valitset API:n.
Kutsujat näkevät vain esiin tuomasi metodit, toisin kuin perinnässä, jossa kaikki on näkyvissä.
Sisäänrakennetut komponentit säilyvät ennallaan.
Sisäänrakennetut komponentit ovat final, joten niiden alla oleva verkkokomponentti pysyy yhtenäisenä ja ennakoitavana. Oma logiikkasi sijoittuu niiden ympärille, ei niiden sisään.

Komponenttien koostaminen Komponenttien ymmärtäminen

Joukon ulkopuolella

Eikö kuulu joukkoon? Käytä mitä tahansa komponenttia verkossa.

Liiketoimintakomponentit ovat lähtökohta, eivät päätepiste. Jokainen HTML-elementti on Java-luokka, ja mistä tahansa web-komponentista voi tulla sellainen.

29 HTML-elementtiä
Itse sivu kirjoitettuna
webforJ tarjoaa tyypitetyllä Java-rajapinnalla komponentteja, jotka vastaavat suoraan HTML:n vakioelementtejä, kuten Div-, Paragraph-, otsikko-, luettelo-, Img- ja Anchor-elementtejä.
HTML-komponentit
Web components
Mikä tahansa web-komponentti käärittynä
ElementComposite kapseloi mukautetun HTML-elementin tai kolmannen osapuolen verkkokomponentin ja tuo sen ominaisuudet, attribuutit ja tapahtumat käytettäviksi Java API:n kautta.
Yhdistelmäelementti
npm-paketit
npm-rekisteri Javasta käsin
Frontend-bundleri muuntaa luokan annotaatiot käännetyiksi frontend-resursseiksi, joten komponentti voi tuoda mukanaan tarvitsemansa npm-paketin.
Frontend-paketointityökalu

Suunnittelujärjestelmäsi

Onko sinulla oma suunnittelujärjestelmä? Ota se mukaan.

webforJ-komponentit ovat vaihtoehto, eivät vaatimus. Jos suunnittelujärjestelmäsi toimitetaan web-komponentteina, teet niille kääreen kerran ja rakennat koko sovelluksen niiden avulla Javalla.

01
Kääri komponentit
ElementComposite muuntaa jokaisen mukautetun elementin Java-luokaksi ja tuo sen ominaisuudet, attribuutit ja tapahtumat saataville Java API:n kautta.
02
Toimita ne yhtenä moduulina.
Frontend-bundleri antaa luokan määrittää tarvitsemansa npm-paketit, joten wrapperit kuljettavat suunnittelujärjestelmänsä mukanaan. Sovelluksen tarvitsee lisätä vain riippuvuus.
03
Rakenna sovellus tavalliseen tapaan
Reititys, tietoturva ja tietojen sidonta toimivat samalla tavalla. Kääritty komponentti, joka toteuttaa ValueAware, sitoutuu malliin kuten mikä tahansa sisäänrakennettu kenttä.

Näyttösi säilyttävät yrityksesi jo suunnitteleman ilmeen. Taustalla on edelleen webforJ.

Yhdistelmäelementti Frontend-koontityökalu

Käytetään Javasta

Komponentti on olio luot koodilla `new`.

Asetat sen tilan tyypitetyillä metodeilla, kuuntelet sen tapahtumia lambdoilla ja lisäät sen konttiin. Näyttö on Java-koodia, eikä synkronoitavaa mallipohjaa ole.

Komponenttien käyttäminen Komponenttien koostaminen

Lisää komponentteja säilöön

FlexLayout container = new FlexLayout();

container.add(new Button("Click Me"));

TextField nameField = new TextField("Name");
TextField emailField = new TextField("Email");
Button submitButton = new Button("Submit");

container.add(nameField, emailField, submitButton);

Muuta tilaa tapahtumien perusteella

// Reveal an additional field when a checkbox is checked
TextField advancedField = new TextField("Advanced setting");
advancedField.setVisible(false);

CheckBox enableAdvanced = new CheckBox("Show advanced settings");
enableAdvanced.addValueChangeListener(e -> advancedField.setVisible(e.getValue()));

// Enable a button only when the required field has a value
Button submitButton = new Button("Submit");
submitButton.setEnabled(false);

TextField nameField = new TextField("Name");
nameField.addValueChangeListener(e -> submitButton.setEnabled(!e.getValue().isBlank()));

Teeman mukauttaminen

Yksi suunnittelujärjestelmä jokaisen komponentin takana.

webforJ sisältää DWC-nimisen suunnittelujärjestelmän. Sen CSS-muuttujat eli design-tokenit määrittävät värit, typografian, reunukset ja välit, ja kaikki komponentit käyttävät niitä. Kun muutat tokenia, kaikki sitä käyttävät komponentit päivittyvät.

Sama kenttä, painikkeet, kytkin, merkki ja edistymispalkki vaaleassa teemassa.

lightOletus. Vaalea tausta, hienovarainen päävärin sävy.

Sama kenttä, painikkeet, kytkin, merkki ja edistymispalkki tummassa teemassa.

darkTumma tausta, hienovarainen päävärisävy.

Kolme sisäänrakennettua teemaa

light, dark ja dark-pure, joka poistaa pääsävyn ja käyttää puhtaita neutraaleja harmaan sävyjä. Vaihda teemaa ajon aikana komennolla App.setTheme() ilman uudelleenkoontia.

Käyttöjärjestelmän mukainen

Rekisteröi vaalea ja tumma teema ja välitä "system". webforJ valitsee käyttäjän asetusta vastaavan teeman ja vaihtaa teemaa, kun asetus muuttuu.

@AppTheme("system")
@AppLightTheme("light")
@AppDarkTheme("dark")
class MyApp extends App {
  // app code
}

Uudista brändi muutamalla tokenilla

Ylikirjoita sisäänrakennettujen teemojen seed-tokenit, niin kaikki komponentit saavat uuden ilmeen. Shadow part -osilla pääset komponentin sisään, kun token ei riitä.

:root {
  --dwc-color-primary-seed: #6366f1;
  --dwc-font-size: var(--dwc-font-size-l);
}

Teemat CSS-muuttujat Varjo-osat Tyylien yleiskatsaus

Galleria

Avaa galleria ja katso kaikki 57.

Dokumentaation galleriassa esitellään kaikki komponentit esikatseluineen ja lyhyine kuvauksineen samoissa neljässä osiossa kuin dokumentaatiossa.

Avaa komponenttigalleria Takaisin dokumentaation etusivulle

54liiketoimintakomponentit+29HTML-elementit+Mikä tahansaweb component

Asettelu

Lomakkeet ja syötekentät

Data ja sisältö

Navigointi ja toiminnot

Palaute ja valintaikkunat

Omat komponenttisi, Rakennettu omiemme pohjalta.

Yksi luokka, yksi yksikkö.

Valitset API:n.

Sisäänrakennetut komponentit säilyvät ennallaan.

Eikö kuulu joukkoon? Käytä mitä tahansa komponenttia verkossa.

Itse sivu kirjoitettuna

Mikä tahansa web-komponentti käärittynä

npm-rekisteri Javasta käsin

Onko sinulla oma suunnittelujärjestelmä? Ota se mukaan.

Kääri komponentit

Toimita ne yhtenä moduulina.