Introduksjon til primefaces
1. Introduksjon
Primefaces er en åpen kildekode UI-komponentpakke for Java Server Faces (JSF) applikasjoner.
I denne opplæringen vil vi gi en introduksjon til Primefaces, og demonstrere hvordan du konfigurerer den og bruker noen av hovedfunksjonene.
2. Oversikt
2.1. Java Server Faces
Java Server Faces er en komponentorientert rammeverk for å bygge brukergrensesnitt for Java-webapplikasjoner. JSF-spesifikasjonen er formalisert gjennom Java Community Process og er en standardisert skjermteknologi.
Mer om JSF i vårmiljø finner du her.
2.2. Primefaces
Bygget på toppen av JSF, Primefaces støtter rask applikasjonsutvikling ved å tilby forhåndsbygde UI-komponenter som kan legges til ethvert prosjekt.
I tillegg til Primefaces er det også Primefaces Extensions-prosjektet. Dette fellesskapsbaserte open source-prosjektet gir flere komponenter i tillegg til de vanlige.
3. Programoppsett
For å demonstrere noen Primefaces-komponenter, la oss lage en enkel webapplikasjon ved hjelp av Maven.
3.1. Maven-konfigurasjon
Primefaces har en lett konfigurasjon med bare en krukke, så la oss legge avhengigheten til vår for å komme i gang pom.xml:
org.primefaces primefaces 6.2 Den siste versjonen finner du her.
3.2. Controller - Managed Bean
La oss deretter lage bønneklassen for komponenten vår:
@ManagedBean (name = "helloPFBean") offentlig klasse HelloPFBean {}Vi må gi en @ManagedBean kommentar for å binde kontrolleren vår til en visningskomponent.
3.3. Utsikt
Til slutt, la oss erklære Primefaces-navneområdet i vårt.xhtml fil:
4. Eksempel på komponenter
For å gjengi siden, start serveren og naviger til:
//localhost:8080/jsf/pf_intro.xhtml4.1. PanelGrid
La oss bruke PanelGrid som en utvidelse til standard JSF panelGrid:
Her har vi definert en panelGrid med to kolonner og sett outputText fra JSF-fasetter for å vise data fra en administrert bønne.
Verdiene deklarert i hver outputText tilsvare fornavn og etternavn eiendommer deklarert i vår @ManagedBean:
privat streng fornavn; privat streng etternavn; La oss ta en titt på vår første, enkle komponent:
4.2. Velg OneRadio
Vi kan bruk velg OneRadio komponent for å gi en alternativ funksjonalitet:
Vi må erklære verdivariabelen i bakebønnen for å holde radioknappens verdi:
private strengkomponenterSuite; Dette oppsettet vil resultere i en alternativknapp på 2 alternativer som er knyttet til den underliggende String eiendom componentSuite:
4.3. Data bord
Neste, la oss bruke data bord komponent for å vise data i en tabelloppsett:
På samme måte må vi tilby en Bean-eiendom for å oppbevare dataene for tabellen vår:
private List teknologier; Her har vi en liste over forskjellige teknologier og deres versjonsnumre:
4.4. Ajax With InputText
Vi kan også bruk p: ajax for å tilby Ajax-funksjoner til komponentene våre.
La oss for eksempel bruke denne komponenten til å bruke en uskarphet:
Følgelig må vi gi egenskaper i bønnen:
private String inputText; private String outputText; I tillegg må vi også tilby en lyttermetode i bønnen vår for AJAX uskarphet:
offentlig tomrom onBlurEvent () {outputText = inputText.toUpperCase (); }Her har vi ganske enkelt konvertert teksten til store bokstaver for å demonstrere mekanismen:
4.5. Knapp
I tillegg til det kan vi også bruke p: commandButton som en utvidelse til standarden h: commandButton komponent.
For eksempel:
Som et resultat har vi med denne konfigurasjonen knappen som vi bruker til å åpne dialog (ved hjelp av ved trykk Egenskap):
4.6. Dialog
Dessuten, for å gi funksjonaliteten til dialogen, kan vi bruke p: dialog komponent.
La oss også bruke knappen fra det siste eksemplet for å åpne dialog ved klikk:
I dette tilfellet har vi en dialog med den grunnleggende konfigurasjonen som kan utløses ved hjelp av commandButton beskrevet i forrige avsnitt:
5. Primefaces Mobile
Primefaces Mobile (PFM) gir et UI-sett for å lage Primefaces-applikasjoner for mobile enheter.
Av denne grunn støtter PFM responsiv design justert for mobile enheter.
5.1. Konfigurasjon
Til å begynne med må vi aktivere mobilnavigasjonsstøtte i vårt ansikter-config.xml:
org.primefaces.mobile.application.MobileNavigationHandler 5.2. Navneplass
For å bruke PFM-komponenter må vi ta med PFM-navneområdet i vårt .xhtml fil:
xmlns: pm = "// primefaces.org/mobile"I tillegg til standard Primefaces-krukken, er det ikke behov for noe ekstra bibliotek i vår konfigurasjon.
5.3. RenderKit
Sist, må vi gi RenderKit, som brukes til å gjengi komponentene i mobilmiljøet.
I tilfelle en enkelt PFM-side i en applikasjon, kan vi definere en RenderKit inne på siden vår:
Med en fullstendig PFM-applikasjon kan vi definere vår RenderKit på applikasjonens omfang inne ansikter-config.xml:
PRIMEFACES_MOBILE 5.4. Eksempelside
La oss lage eksempel PFM-side:
Som vi kan se, brukte vi side, topptekst og innhold komponent fra PFM for å bygge et enkelt skjema med en overskrift:
Videre brukte vi vår bakebønne for sjekk og navigering av brukerinngang:
public String go () {if (this.magicWord! = null && this.magicWord.toUpperCase (). tilsvarer ("BAELDUNG")) {return "pm: suksess"; } returner "pm: feil"; }I tilfelle et riktig ord, navigerer vi til neste side:
Denne konfigurasjonen resulterer i dette oppsettet:
I tilfelle feil ord, navigerer vi til neste side:
Denne konfigurasjonen vil resultere i dette oppsettet:
Merk at PFM er utfaset i versjon 6.2 og vil bli fjernet i versjon 6.3 til fordel for et responsivt standardsett.
6. Konklusjon
I denne opplæringen har vi forklart fordelene ved å bruke Primefaces JSF-komponentpakken og demonstrert hvordan du konfigurerer og bruker Primefaces i et Maven-basert prosjekt.
I tillegg introduserte vi Primefaces Mobile, UI-kit spesialisert for mobile enheter.
Som alltid blir kodeeksemplene fra denne opplæringen gitt på GitHub.
