JSF Ajax Render Eksempel

Hej, i denne vejledning vil jeg gerne beskrive, hvordan man sender AJAX-anmodning til serveren, modtager svaret og opdaterer siden i overensstemmelse hermed og vil demonstrere følgende:

• Ajax-aktiveret inputformular
• Sende og modtage data til og fra en administreret bean
• Outputside for at vise resultatet

Dette eksempel viser implementeringen af ​​ajax i jsf.

1. Introduktion

AJAX er et akronym for Asynchronous JavaScript og XML . Det er en teknik at bruge HTTPXMLObject of JavaScript til at sende data til serveren og modtage data fra serveren asynkront (dvs. uden at genindlæse hele siden). Således gør applikationen interaktiv og hurtigere.

Det gode ved AJAX i JSF er, at alt arbejdet i forbindelse med at generere en anmodning, sende en anmodning, modtage et svar og behandle det, er skjult bag veldefinerede abstraktioner.

I nedenstående vejledning vil vi have følgende komponenter:

• ajax.xhtml – En jsf-side med Ajax-komponenten til at acceptere brugerinput og vise output
• HelloBean.java – En administreret bønneklasse, som indeholder en besked, der skal vises på siden
• web.xml – Webapplikationskonfigurationsfil

Denne eksempelapplikation understøtter ajax-opkaldet med <f:ajax /> tag i jsf.

1.1 Hvordan kan det opnås?

Programmerere skal implementere <f:ajax> tag i en jsf-applikation til at håndtere ajax-opkaldene. Lad os tage et kig på tagget og forstå, hvordan det gøres:

JSF Ajax Tag

1	< f:ajax execute = "input-component-name" render = "output-component-name" />

Elementet <f:ajax> informerer JSF-motoren om, at når hændelsen indtræffer, vil komponenten angivet i execute attribut vil blive udført på serveren og komponenten specificeret i render attribut vil blive gengivet på websiden, når ajax-svaret er modtaget.

1.2 Tag-attributter

Der er flere attributter, der kan bruges med ajax-tagget, f.eks.:

#	Attribut	Beskrivelse
1.	deaktiveret	Hvis det er sandt, vil Ajax-adfærden blive anvendt på alle forældre- eller underordnede komponenter. Hvis falsk, vil Ajax adfærd blive deaktiveret.
2.	begivenhed	Hendelsen, der vil påkalde Ajax-anmodninger, for eksempel klik, ændring, sløring, tastetryk osv.
3.	udfør	Attribut execute indeholder en mellemrumssepareret liste over HTML-id'er for de elementer, der vil blive udført på serveren. I vores eksempel vil elementet med identifikator nameId blive udført, hvilket betyder, at dets værdi vil blive sat i bønnen. Attributten execute kan også indeholde fire specielle værdier:@this, @form, @all og @none. Hvis execute-attributten ikke er angivet, vil standardværdien for @this blive brugt.
4.	øjeblikkelig	Hvis det er sandt, udsendes genererede adfærdsbegivenheder under Anvend anmodningsværdier-fasen. Ellers vil begivenhederne blive udsendt under Invoke Applications-fasen.
5.	lytter	Et EL-udtryk for en metode i en backing bean kaldet under Ajax-anmodningen.
6.	fejl	Navnet på en JavaScript-tilbagekaldsfunktion i tilfælde af en fejl under Ajax-anmodningen.
7.	én begivenhed	Navnet på en JavaScript-tilbagekaldsfunktion til at håndtere UI-hændelser.
8.	render	Attributgengivelse indeholder en mellemrumssepareret liste over HTML-identifikatorer for de elementer, der vil blive opdateret på websiden, når AJAX-svaret er modtaget. Den understøtter også fire specielle værdier som execute-attribut, men standardværdien er @none.

Åbn nu Eclipse IDE, og lad os begynde at bygge applikationen!

2. JSF Ajax Render Eksempel

2.1 Anvendte værktøjer

Vi bruger Eclipse Kepler SR2, JDK 8 (1.8.0_131), Tomcat7 applikationsserver og MySQL database. Når det er sagt, har vi testet koden mod JDK 1.7, og det fungerer godt.

2.2 Projektstruktur

Lad os først gennemgå den endelige projektstruktur, hvis du er i tvivl om, hvor du skal oprette de tilsvarende filer eller mappe senere!

Fig. 1:Jsf Ajax Render Application Project Structure

2.3 Projektoprettelse

Dette afsnit vil demonstrere, hvordan man opretter et Dynamic Web Java-projekt med Eclipse. I Eclipse IDE skal du gå til File -> New -> Dynamic web project

Fig. 2:Opret dynamisk webprojekt

I vinduet Nyt dynamisk projekt skal du udfylde nedenstående detaljer og klikke på næste

• Indtast projektets navn og projektplacering
• Vælg Target runtime som Apache Tomcat v7.0 fra rullemenuen
• Vælg konfiguration som JavaServer Faces v.2.2-projekt fra dropdown-menuen (dette er påkrævet for at downloade java-serverens ansigtsfunktioner i dit projekt)

Fig. 3:Projektdetaljer

Lad alt være som standard i dette vindue, da vi vil lave den nødvendige java-fil på et senere tidspunkt. Du skal blot klikke på næste, så lander vi på webmodulvinduet

Fig. 4:Java Src-vindue

Forlad context_root i webmodulvinduet og content_directory værdier som standard (du kan dog ændre context_root). men lad os beholde den som standardværdi for den første applikation). Du skal blot markere Generer web.xml-implementeringsbeskrivelse afkrydsningsfeltet, og klik på næste

Fig. 5:Webmodulvindue

I vinduerne JSF Capabilities kræver vi download af afhængighederne (ikke tilgængelig som standard), så vores projekt er konfigureret som et JSF-modul i Eclipse. Tilføj JSF-funktionerne til webprojektet ved at klikke på download-ikonet (omkranset i fig. 6) og download JSF 2.2 Mojarra-implementeringen

Fig. 6:JSF-kapacitetsvindue

Et nyt pop op-vindue åbnes, hvor det automatisk viser JSF-biblioteket. Vælg JSF 2.2-biblioteket, og klik på næste (bibliotekets navn og downloaddestination udfyldes automatisk)

Fig. 7:Vinduet til download af JSF-kapaciteter

Marker afkrydsningsfeltet licens, og klik på Afslut. Eclipse vil downloade JSF 2.2-biblioteket og vil vise dem i JSF-funktionsvinduerne (dvs. Fig. 6)

Fig. 8:JSF-kapacitetslicensvindue

Nu vil JSF-implementeringsbibliotekerne blive opført på kapacitetssiden. Marker afkrydsningsfeltet (JSF2.2 (Mojarra 2.2.0)), og lad alt andet være standard. Klik på Udfør

Fig. 9:JSF Capabilities Library Selection Window

Eclipse vil oprette projektet med navnet JSF Ajaxrender i arbejdsområdet og web.xml vil blive konfigureret til at acceptere JSF-anmodningerne. Den vil have følgende kode:

web.xml

010203040506070809101112131415161718192021222324252627282930313233

<? xml version = "1.0" encoding = "UTF-8" ?> < web-app xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xmlns = "http://java.sun.com/xml/ns/javaee" xsi:schemaLocation = "http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id = "WebApp_ID" version = "3.0" >      < display-name >JSF Ajaxrender</ display-name >      < welcome-file-list >          < welcome-file >index.html</ welcome-file >          < welcome-file >index.htm</ welcome-file >          < welcome-file >index.jsp</ welcome-file >          < welcome-file >default.html</ welcome-file >          < welcome-file >default.htm</ welcome-file >          < welcome-file >default.jsp</ welcome-file >      </ welcome-file-list >      < servlet >          < servlet-name >Faces Servlet</ servlet-name >          < servlet-class >javax.faces.webapp.FacesServlet</ servlet-class >          < load-on-startup >1</ load-on-startup >      </ servlet >      < servlet-mapping >          < servlet-name >Faces Servlet</ servlet-name >          < url-pattern >/faces/*</ url-pattern >      </ servlet-mapping >      < context-param >          < description >State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</ description >          < param-name >javax.faces.STATE_SAVING_METHOD</ param-name >          < param-value >client</ param-value >      </ context-param >      < context-param >          < param-name >javax.servlet.jsp.jstl.fmt.localizationContext</ param-name >          < param-value >resources.application</ param-value >      </ context-param >      < listener >          < listener-class >com.sun.faces.config.ConfigureListener</ listener-class >      </ listener > </ web-app >

Lad os begynde at bygge applikationen!

3. Applikationsbygning

Nedenfor er de trin, der er involveret i udviklingen af ​​denne applikation:

3.1 Oprettelse af kildefil

Til demoen bruger vi en simpel formularapplikation. Højreklik på projekt WebContent -> New -> File

Bemærk :I JSF 2.0 anbefales det at oprette en JSF-side i xhtml-format, et filformat med filtypenavnet .xhtml

Fig. 10:Filoprettelse

Et pop op-vindue åbnes. Bekræft den overordnede mappes placering som JSF Ajaxrender/WebContent og indtast filnavnet som ajax.xhtml . Klik på Udfør

Fig. 11:ajax.xhtml

3.1.1 Implementering af kildefil

Her i ajax.xhtml , vil vi sætte <f:ajax> tag inde i XHTML-elementet, som udløser AJAX-anmodningen. Det er meget praktisk, fordi vi ikke behøver at skrive nogen JavaScript-kode.

Tip

• Den udfør attribut for <f:ajax /> element angiver, at kun de her specificerede elementer sendes til serveren. I vores tilfælde er det kun nameId vil blive sendt til serveren til behandling.
• gengivelsen attributten for <f:ajax /> element vil opdatere komponenten med id'et messageId hvis ajax-anmodningen er afsluttet.

Tilføj følgende kode til det:

ajax.xhtml

0102030405060708091011121314151617181920212223242526272829303132333343536373839

<! DOCTYPE HTML> < html lang = "en" xmlns = "http://www.w3.org/1999/xhtml" xmlns:f = "http://java.sun.com/jsf/core" xmlns:h = "http://java.sun.com/jsf/html" > < h:head >      < meta charset = "utf-8" name = "viewport" content = "width=device-width, initial-scale=1" http-equiv = "X-UA-Conpatible" />      < link type = "text/css" rel = "stylesheet" href = "https://examples.javacodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/3.3.7/css/bootstrap.min.css" />         < title >JSF Ajax Render</ title >      < style type = "text/css" >          #ajaxForm {              margin: 18px;          }          .nameTextbox {              margin-left: 12px;          }          #btn {              padding: 12px 0px 0px 0px;          }          #output {              padding-top: 12px;              color: green;          }      </ style > </ h:head > < h:body >      < center >< h2 >JSF Ajax Render Example</ h2 ></ center >      < h:form id = "ajaxForm" >                < div id = "input" >               < h:outputLabel value = "Enter Name:" />< h:inputText id = "nameId" styleClass = "nameTextbox" value = "#{helloBean.name}" />          </ div >          < div id = "btn" >              < h:commandButton value = "Say Hello" styleClass = "btn btn-primary btn-sm" >                  < f:ajax execute = "nameId" render = "messageId" />              </ h:commandButton >          </ div >          < div id = "output" >              < h4 >< h:outputText id = "messageId" value = "#{helloBean.message}" /></ h4 >          </ div >      </ h:form > </ h:body > </ html >

3.2 Java-klasseoprettelse

Lad os oprette de nødvendige java-filer. Højreklik på src-mappen New -> Package

Fig. 12:Java-pakkeoprettelse

Et nyt pop-vindue åbnes, hvor vi indtaster pakkenavnet som com.ajaxrender.example

Fig. 13:Java-pakkenavn (com.ajaxrender.example)

Når pakken er oprettet i applikationen, bliver vi nødt til at oprette den nødvendige administrerede bean. Højreklik på den nyoprettede pakke New -> Class

Fig. 14:Java-klasseoprettelse

Et nyt pop-vindue åbnes og indtast filnavnet som HelloBean . Den administrerede bønneklasse vil blive oprettet inde i pakken com.ajaxrender.example

Fig. 15:Java-klasse (HelloBean.java)

3.2.1 Implementering af Managed Bean Class

Nedenfor er den administrerede bønne, som bruges af applikationen. Det, der er vigtigt her, er, at bønnen ikke har nogen viden om, at AJAX vil blive brugt. Tilføj følgende kode til det:

HelloBean.java

0102030405060708091011121314151617181920212223242526

package com.ajaxrender.example; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class HelloBean {      public String name;      public String getName() {          return name;      }      public void setName(String name) {          this .name = name;      }      public String getMessage() {          String response = "" ;          if (name != null ) {              response = "Ajax Message: Hello, " + name + "!" ;          }          return response;      } }

4. Projektimplementering

Når vi er klar med alle ændringerne, lad os kompilere og implementere applikationen på tomcat7-serveren. For at implementere applikationen på tomcat7 skal du højreklikke på projektet og navigere til Run as -> Run on Server

Fig. 16:Sådan implementeres applikation på Tomcat

Tomcat vil implementere applikationen i sin webapps-mappe og vil starte dens udførelse for at implementere projektet, så vi kan gå videre og teste det i browseren.

Fig. 17:Tomcat-behandling

Åbn din yndlingsbrowser og tryk på følgende URL. Outputsiden vil blive vist.

http://localhost:8085/JSFAjaxrender/faces/ajax.xhtml

Servernavn (localhost) og port (8085) kan variere i henhold til din tomcat-konfiguration

5. Projektdemo

Nu er vi færdige med oprettelsen af ​​applikationen, og det er tid til at teste applikationen. Adgang til siden:ajax.xhtml , vil vi se eksempelformularsiden.

Fig. 18:Ajax-aktiveret formularside

Indtast navnet, og tryk på knappen Sig hej. Du vil se følgende resultat uden sideopdatering.

Fig. 19:Resultatside

Håber dette hjalp :)

6. Konklusion

Gennem dette eksempel lærte vi om Ajax-implementeringen i jsf. Al koden til dette eksempel blev implementeret ved hjælp af Tomcat7-applikationsserveren.

7. Download Eclipse Project

Dette var et JSF Ajax Render-eksempel med Eclipse og Tomcatjsf