Here we go.
pom.xml
web.xml
FooBar.java
index.xhtml
And as you fill in the firstname you will see that echo is updated and seen in the browser!
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>biz.tugay</groupId> <artifactId>jsfajaxhelloworld</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>jsfajaxhelloworld</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>javax.faces</groupId> <artifactId>javax.faces-api</artifactId> <version>2.2</version> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.2.13</version> </dependency> <dependency> <groupId>javax.el</groupId> <artifactId>el-api</artifactId> <version>2.2</version> <scope>provided</scope> </dependency> </dependencies> <build> <finalName>jsfajaxhelloworld</finalName> <plugins> <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>9.2.1.v20140609</version> <configuration> <scanIntervalSeconds>2</scanIntervalSeconds> <webApp> <contextPath>/</contextPath> </webApp> </configuration> </plugin> </plugins> </build> </project>
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0"> <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>*.xhtml</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.xhtml</welcome-file> </welcome-file-list> </web-app>
FooBar.java
package biz.tugay.jsftags; import javax.faces.bean.ApplicationScoped; import javax.faces.bean.ManagedBean; @ManagedBean @ApplicationScoped public class FooBar { private String firstname; public void setFirstname(String firstname) { this.firstname = firstname; } public String getFirstname() { return firstname; } }
index.xhtml
<!DOCTYPE html> <html xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"> <h:head> <title>Index</title> </h:head> <h:body> <h:form> <h:inputText id="firstname" value="#{fooBar.firstname}"> <f:ajax event="keyup" render="echo"/> </h:inputText> <br /> </h:form> <br /> <h:outputText id="echo" value="#{fooBar.firstname}"/> </h:body> </html>
And as you fill in the firstname you will see that echo is updated and seen in the browser!