Käyttöliittymäkomponentit

Avaa ChatGPT:ssä

webforJ:ssa sovelluksia luodaan moduulimaisista yksiköistä, joita kutsutaan komponenteiksi, jotka helpottavat nopeaa ja tehokasta käyttöliittymän kehittämistä. Kehyksellä on tarjolla joukko keskeisiä komponentteja, kuten painikkeet, syötekentät ja asetteluastiat. Perusteiden hallinnan jälkeen voit tutustua JavaDocs -dokumentaatioon, josta löydät yksityiskohtaisen yleiskatsauksen kaikista komponenteista ja niiden toiminnallisuuksista.

Asettelut

Asettelu komponentit tarjoavat perustan käyttöliittymien jäsentämiseen, mahdollistaen kehittäjien järjestää sisältöä tehokkaasti. Nämä komponentit tarjoavat erilaisia tapoja hallita lapsikomponenttien asettumista, sekä yksinkertaisissa että monimutkaisissa asetteluissa.

Seuraavat asettelu komponentit on suunniteltu käsittelemään laajaa valikoimaa käyttötarkoituksia, aina responsiivisista muotoilusta kehittyneeseen sisällönhallintaan.

AppLayout

Sisältökomponentti, joka tarjoaa jäsennellyn asettelun ykköstyypin sovelluksen navigointia ja sisällön järjestämistä varten.

Työkalurivi

Vaakasuuntainen sisältökomponentti, joka pitää sisällään joukon toimintopainikkeita, kuvakkeita tai muita ohjaimia, joita käytetään tyypillisesti nykyiseen kontekstiin liittyvien tehtävien suorittamiseen.

FlexLayout

Asettelu komponentti, joka järjestää lapsensa joustavan laatikon (flexbox) sääntöjen avulla responsiivista muotoilua ja tasausta varten.

ColumnsLayout

Asettelu komponentti, joka järjestää lapsensa useisiin pystysuoriin sarakkeisiin, hyödyllinen lomakkeiden ja ruudukkomaisen rakenteen luomiseen.

Splitter

Asettelu komponentti, joka jakaa käytettävissä olevan tilan kahden lapsikomponentin kesken, jolloin käyttäjät voivat muuttaa niiden kokoa vetämällä jakotankoa.

Laatikko

Liukuva paneelikomponentti, jota käytetään tyypillisesti sivunavigaation tai lisäsisällön säilyttämiseen, joka voidaan näyttää tai piilottaa.

Dialogi

Modaalinen ikkunakomponentti, joka peittää sisällön tärkeiden tietojen näyttämiseksi tai käyttäjältä vuorovaikutuksen pyytämiseksi, usein vaaditaan käyttäjän toimintaa sulkeakseen sen.

Kirjautuminen

Komponentti, joka tarjoaa valmiin käyttöliittymän käyttäjäautentikointiin, tyypillisesti sisältäen kentät käyttäjänimensä ja salasanan syöttämiseen sekä lähetyspainikkeen.

Yhdistys

Pystysuunnassa pinottu kokoelma taitettavia paneeleita, joista jokaisella on napsautettava otsikko, joka vaihtaa näkyvyyden sen runkosisällön välillä.

Sivupaneeli

Komponentti, joka järjestää sisällön useisiin välilehtiin, jolloin käyttäjät voivat vaihtaa eri näkymien tai osioiden välillä.

Kortti

Pinta, joka ryhmittelee liittyvää sisältöä ja toimintoja, alueet medialle, otsikoille, runkosisällölle ja alatunnisteille.

Tietojen syöttö

Tietojen syöttö komponentit tarjoavat keskeisiä työkaluja käyttäjän syötteen tallentamiseen ja vuorovaikutusten hallitsemiseen sovelluksessasi. Nämä komponentit ovat monipuolisia, jolloin voit helposti luoda interaktiivisia lomakkeita ja kerätä erilaisia tietotyyppejä.

Tekstikenttä

Yhden rivin syöttökomponentti tekstidatan syöttämiseen ja muokkaamiseen.

MaskattuTekstikenttä

Tekstisyöttökomponentti, joka rajoittaa käyttäjän syötteen tiettyyn muotoon tai kaavaan, tyypillisesti käytetään kentissä kuten puhelinnumerot, päivämäärät tai luottokorttinumerot.

NumeroKenttä

Komponentti, joka tarjoaa oletusarvoisen selaimessa käytettävän syöttökentän numeeristen arvojen syöttämistä varten, sisäänrakennetuilla ohjaimilla arvon lisäämiseksi tai vähentämiseksi.

MaskattuNumeroKenttä

Numeerinen syöttökomponentti, joka rajoittaa käyttäjän syötteen tiettyyn numeeriseen muotoon tai kaavaan, varmistaen kelvollisen lukutulon, kuten valuutalle, prosenteille tai muille muotoilluille numeroille.

SalasanaKenttä

Yhden rivin syöttökomponentti salasanojen turvalliseen syöttämiseen ja peittämiseen.

PäivämääräKenttä

Komponentti, joka tarjoaa oletusarvoisen selaimessa käytettävän päivämäärävalitsimen päivämäärän valitsemiseksi syöttökentän kautta.

MaskattuPäivämääräKenttä

Päivämääräsyöttökomponentti, joka pakottaa tietyn päivämäärämuodon tai kaavan, varmistaen että käyttäjä syöttää kelvollisen päivämäärän määritellyn maskin mukaan.

AikaKenttä

Komponentti, joka tarjoaa oletusarvoisen selaimessa käytettävän aikavalitsimen aikarajan valitsemiseksi syöttökentän kautta.

MaskattuAikaKenttä

Aikasyöttökomponentti, joka pakottaa tietyn aikamuodon tai kaavan, varmistaen että käyttäjä syöttää kelvollisen ajan määritellyn maskin mukaan.

PäivämääräAikaKenttä

Komponentti, joka tarjoaa oletusarvoisen selaimessa käytettävän päivämäärän ja ajan valitsimen sekä päivämäärän että ajan valitsemiseksi yhdellä syöttökentällä.

VäriKenttä

Komponentti, joka tarjoaa oletusarvoisen selaimessa käytettävän väri-selectorin, joka sallii käyttäjien valita värin syöttökentästä.

Tekstialue

Monirivinen tekstisyöttökomponentti, joka sallii käyttäjien syöttää tai muokata suurempia tekstikappaleita.

Valintaruutu

Komponentti, joka edustaa binäärivaihtoehtoa, sallien käyttäjien vaihtaa valitun (totta) tai ei-valitun (epätosi) tilan välillä.

RadioPainike

Komponentti, joka sallii käyttäjien valita yhden vaihtoehdon keskuudestaan, joka on keskenään poissulkeva.

Kytkin

Vaihtokomponentti, joka sallii käyttäjien vaihtaa kahden tilan, kuten päälle/pois tai totta/epätosi, välillä liukuvan toiminnan avulla.

ValintaRuutu

Komponentti, joka tarjoaa alasvetoluettelon ennalta määritellyistä vaihtoehdoista, sallien käyttäjien valita yhden vaihtoehdon listasta.

YhdistelmäLaatikko

Komponentti, joka yhdistää alasvetoluettelon muokattavan tekstisyöttökentän kanssa, sallien käyttäjien valita joko vaihtoehdon listasta tai syöttää oman arvonsa.

ListaLaatikko

Komponentti, joka näyttää vieritettävän luettelon vaihtoehdoista, sallien käyttäjien valita yksi tai useampi kohde listasta.

Lähetä

Inline-tiedostonvalitsin, joka sallii käyttäjien valita yhden tai useampia tiedostoja paikalliselta koneelta ja ladata ne palvelimelle, vetämällä ja pudottamalla, suodattimini ja per-tiedosto-tapahtumaseurannalla.

Valintalaatikot

Valintalaatikot tarjoavat tavan esittää käyttäjille vaihtoehtoja tai pyytää heiltä vahvistusta ennen toiminnan etenemistä. Nämä komponentit ovat tärkeitä interaktiivisten, päätöksiä ohjaavien työnkulkujen luomisessa, mahdollistaen käyttäjien vahvistaa, peruuttaa tai valita erilaisia vaihtoehtoja selkeällä ja jäsennellyllä tavalla.

ViestiDialogi

Dialogikomponentti, jota käytetään näyttämään tiedotuksia tai varoituksia käyttäjälle, tyypillisesti yhdellä OK-painikkeella viestin hyväksymiseksi.

VahvistusDialogi

Dialogikomponentti, joka kysyy käyttäjältä, haluaako hän vahvistaa vai peruuttaa toiminnon, tyypillisesti tarjoamalla Kyllä ja Ei tai OK ja Peruuta painikkeet.

SyöttöDialogi

Dialogikomponentti, joka pyytää käyttäjää syöttämään tekstiä tai tietoa, tyypillisesti tarjoamalla syöttökentän sekä toimintopainikkeet, kuten OK ja Peruuta.

TiedostonValintaDialogi

Dialogikomponentti, joka mahdollistaa käyttäjien selata ja valita tiedostoja palvelimen tiedostojärjestelmästä.

TiedostonLähetysDialogi

Dialogikomponentti, joka mahdollistaa käyttäjien ladata tiedostoja paikallisesta tiedostojärjestelmästä sovellukseen.

TiedostonTallennusDialogi

Dialogikomponentti, joka mahdollistaa käyttäjien tallentaa tiedostoja määriteltyyn sijaintiin palvelimen tiedostojärjestelmässä.

Vuorovaikutus ja näyttö

Tämä kategoria sisältää komponentteja, jotka helpottavat käyttäjävuorovaikutuksia ja näyttävät visuaalisesti tietoja tai sovellustiloja. Nämä komponentit auttavat käyttäjiä navigoimaan sovelluksessa, käynnistämään toimintoja ja ymmärtämään etenemistä tai tuloksia dynaamisten visuaalisten elementtien kautta.

Taulukko

Komponentti, jota käytetään tietojen esittämiseen rakenteellisessa, taulukkotyyppisessä muodossa riveillä ja sarakkeilla, tukien ominaisuuksia kuten lajittelua ja sivutusta.

GoogleCharts

Komponentti, joka integroituu Google Charts:iin esittääkseen erilaisia kaavioita ja visuaalisia datan esityksiä sovelluksessa.

Painike

Napsautettava komponentti, joka käynnistää toiminnon tai tapahtuman painettaessa.

Toast

Kevyt, ei-loisiva ilmoituskomponentti, joka näyttää lyhyesti viestin käyttäjälle ennen kuin se katoaa automaattisesti.

Ilmoitus

Komponentti, joka näyttää tärkeitä viestejä tai varoituksia huomattavassa muodossa käyttäjän huomion kiinnittämiseksi.

Raha

Pieni tunnistekomponentti, joka esittää laskentoja, tiloja tai lyhyitä metatietoja, tukien teemoja, kokoja ja kuvakkeita.

TyöpöydänIlmoitus

Komponentti, joka hyödyntää selaimen natiivin Ilmoitus-API:ta hälyttämään käyttäjiä mukautetulla työpöydän ilmoituksella.

Navigaattori

Mukautettava sivutuksensuunnittelu komponentti datan joukkojen läpi navigoimiseen, tukea ensimmäisen, viimeisen, seuraavan, edellisen painike ja pikakuuden kenttiä.

Etenemispalkki

Komponentti, joka visuaalisesti esittää tehtävän tai prosessin edistystä, tyypillisesti esitettynä vaakasuorana palkkina, joka täyttyy edistymisen myötä.

Liukusäädin

Komponentti, joka sallii käyttäjien valita arvon määritellyltä alueelta vetämällä kahvaa radalla.

TyönKäynnistin

Sovelluslaajuinen visuaalinen indikaattori, tyypillisesti pyörimispainike, joka ilmoittaa, että yleinen prosessi on käynnissä.

Lataaminen

Rajattu lataamisindikaattori, joka näkyy tietyssä vanhemmassa komponentissa, ilmoittaen että sisältöä tai dataa ollaan lataamassa siinä osassa.

Pyörivä

Komponentti, joka näyttää pyörivän animaation, tyypillisesti käytetään indikoimaan, että prosessi tai toiminta on käynnissä.

SovellusNav

Komponentti, joka tarjoaa navigointimenun sovelluksessa, tyypillisesti käytetään linkkien tai navigointikohteiden listaamiseen eri osioiden tai näkymien vaihtamiseksi.

Kuvake

Komponentti, joka näyttää graafisen symbolin tai kuvan, jota käytetään usein toiminnan, tilan tai kategorian esittämiseen käyttöliittymässä.

Päätelaite

Komponentti, joka simuloituu komentoriviliittymän (CLI) sovelluksessa, sallien käyttäjien syöttää ja suorittaa tekstipohjaisia komentoja.

ÄärettömänRullaus

Komponentti, joka lataa lisää kohteita vierittäessä, näyttää latauskuormitteen ja seuraa, milloin kaikki sisältö on haettu.

Päivitys

Komponentti, joka sallii vetämällä päivitä -vuorovaikutuksen vieritettävissä säilöissä—ihanteellinen dynaamisen datan lataamiseen.

Puu

Komponentti, joka näyttää hierarkkista dataa, sallien käyttäjien laajentaa, supistaa ja vuorovaikuttaa syvennettyjen kohteiden kanssa.

Profiili

Komponentti, joka näyttää käyttäjäprofiilikuvia tai alkukirjaimia, tukee erilaisia kokoja, muotoja ja teemoja.

MarkdownKatsoja

Komponentti, joka näyttää markdown-sisältöä edistyksellisellä merkki merkiltä -renderöinnillä, ihanteellinen tekoäly-chat-käyttöliittymiin ja striimattavaan tekstiin.

Jatka oppimista

ArtikkeliJava responsive web app layout: side navigation in webforJArtikkeliwebforJ Components: What Ships With the FrameworkArtikkeliJava file upload: build a web UI with the webforJ UploadArtikkeliCard component in Java: build dashboard cards with webforJArtikkeliFlexWrap your mind around webforJ's FlexLayoutArtikkeliDesign Effective Forms Using the TextField