JSF template not applied - jsf

I'm running into a problem with JSF and templating. I'm following this tutorial but the only output I see is the one I'm defining in my index.xhtml with
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
my custom content
</ui:define>
without adding the footer and header even though I'm not defining/overwriting the default one in my index file.
If I view the source in the browser it's showing up the same way as in my index.xhtml with ui:composition etc. So it looks like it's not "converting" it to HTML.
The relevant parts of my web.xml:
<servlet>
<description>Controller Servlet for data input</description>
<display-name>InputServlet</display-name>
<servlet-name>InputServlet</servlet-name>
<servlet-class>form.controller.InputServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>InputServlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
My directory structure looks like this:
http://i.imgur.com/ZslOQNr.png
Thanks!

You're using the wrong servlet.
JSF comes with its own servlet, the FacesServlet.
Get rid of the InputServlet from web.xml altogether and map JSF's FacesServlet as follows:
<servlet>
<servlet-name>facesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>facesServlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
That should do it.
See also:
Our JSF wiki page - contains a Hello World and several links to sane tutorials

Related

Using Primefaces Push to Update Datatable

I'm trying to update a datatable after a row is added using primepush. Meaning, I want user1 to update the datatable and user2 should see the added row without refreshing the page.
My Primefaces version is 5.2 and Atmosphere runtime version is 2.3.3
Here's my relevant code which I tried to implement based on Primefaces Showcase and the User Guide:
web.xml:
<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">
<display-name>PrimeFaces Web Application</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
<filter>
<filter-name>AccessFilter</filter-name>
<filter-class>view.AccessFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>AccessFilter</filter-name>
<url-pattern>/secured/*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>Push Servlet</servlet-name>
<servlet-class>org.primefaces.push.PushServlet</servlet-class>
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Push Servlet</servlet-name>
<url-pattern>/primepush/*</url-pattern>
</servlet-mapping>
</web-app>
Backing Bean:
#ManagedBean
#ViewScoped
#PushEndpoint("/main")
public class MainBean implements Serializable{
...
public void addContact(ActionEvent event){
... // database operations
Contact con = new Contact();
contacts.add(con); // this is an ArrayList
EventBus eventBus = EventBusFactory.getDefault().eventBus();
eventBus.publish("/main", contacts);
}
#OnMessage(encoders = {JSONEncoder.class})
public ArrayList<Contact> getContacts(){
return contacts;
}
}
main.xhtml:
...
<p:commandButton value="Add Contact" update=":form:datatable"
actionListener="#{mainBean.addContact}" ajax="true"/>
<h:form id="form">
<p:dataTable id="datatable" var="contact" value="#{mainBean.contacts}"
selectionMode="single" rowKey="#{contact.firstName}"
selection="#{mainBean.selectedContact}">
<p:column headerText="First Name">
<h:outputText value="#{contact.firstName}"/>
</p:column>
<p:column headerText="Last Name">
<h:outputText value="#{contact.lastName}"/>
</p:column>
</p:dataTable>
</h:form>
<p:socket channel="/main">
<p:ajax event="message" update=":form:datatable"/>
</p:socket>
When I try to add a row to the table, no errors occur but some rows just get lost. When I refresh, the table reloads as the way it should. The added row is also not passed between different users. User2 still needs to refresh to see the changes after user1 adds a value to the table.
I've also tried the suggestions in this link with no success. I'm pretty new to primepush and the examples I found online (other than the User Guide) are for really old versions of Primefaces and push feature seems to changed a lot after Primefaces 5. Any help is appreciated.
Edit: I've also tried these links: link, link, link.
Edit 2: I've logged if the push is working and it seems that it is indeed. When I navigate to the page which has push enabled, I can observe on the console that it gets activated. However, when I try to update the table, the get method of the list which is filling the table is called three times consecutively after pushing...

Why does <h:link> change destination extension from .html to .xhtml?

I'm using JSF 2.1 and I'm experiencing some problems with the <h:link> tag. I'm trying to have the link's outcome point from my XHTML file to a plain HTML file. However, when I run my web application, the .html extension in link's generated URL is automatically converted to a .xhtml extension.
Here is my Facelet file:
<h:body>
<h:form>
<h:link value="animation" outcome="#{contentForm.ccAnimationLink}"/>
</h:form>
<h:body>
Here is my contentForm bean:
package my.app.content;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
#ManagedBean
#RequestScoped
public class ContentForm implements Serializable {
private static final long serialVersionUID = -8463354828156798513L;
private String ccAnimationLink = "";
#PostConstruct
public void init() {
ccAnimationLink = "/content/cc/CC_animation/story.html";
}
public String getCcAnimationLink() {
return ccAnimationLink;
}
public void setCcAnimationLink(String ccAnimationLink) {
this.ccAnimationLink = ccAnimationLink;
}
}
Now, when I run this application, I get the following error:
Unable to find matching navigation case from view ID '/content/modifiedcc.xhtml' for outcome '/content/cc/CC_animation/story.html'
I made sure that I had the URL correct, so I created a story.xhtml file in that location as well. With that file there it runs without errors.
If I pull the source for the generated page, I can see that the <h:link> was correctly changed to an "a href" tag, as follows:
animation
For some reason though the URL changes from story.html, like I have it in my bean, to story.xhtml.
How can I make sure that it stays as story.html and not change it to xhtml?
Here is my web.xml file as well:
<display-name>MyWebApp</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<welcome-file-list>
<welcome-file>jsf/login/login.xhtml</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>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
I tried adding the following to the web.xml, this didn't make a difference:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
I'm sure this has a very simple solution which I'm just missing right now. Help would be highly appreciated. I hope the question is clear.
JSF 2.0+ has introduced <h:link> component that takes a navigation case outcome in its outcome attribute and autogenerates the right URL on its own. This is why you had the error without adding yet another mapping for the faces servlet: just reread the error. It is useful for creation of inter-JSF application navigation.
Alternatively, there has always been a <h:outputLink> component that takes an URL in its value attribute instead. It is useful for creation of navigation external to a JSF application.
Be sure to read the classics from BalusC on the issue: When should I use h:outputLink instead of h:commandLink?.
That said, consider the following components:
<h:link outcome="/destination" value="link" />
<h:outputLink value="/destination.html">
outputLink
</h:outputLink>
The former component will translate its outcome into an actual URL, by appending a faces servlet mapping, while the latter one will leave its value as-is.
So, your problem will be solved by using the following component:
<h:outputLink value="#{contentForm.ccAnimationLink}">
Animation
</h:outputLink>

How to pass url parameters to JSF/xHTML?

I know this has been asked multiple times but mine is a slightly diff question.
I have a JSF page which queries a database and throws results, before i move to JSF, i used to do this in JSP and it was working fine.
When i was using JSP below is the link format i used to use
http://localhost:8080/blmdatabase/index.jsp?SearchString=Name&Category=Contact&Submit=Submit
My index.jsp used to capture the values using param.SearchString & param.Category, and 'Submit' used to activate the 'submit' button for the search.
How do i do the same for xHTML/JSF ?
Here is what i tried ...
http://localhost:8080/blmdatabase/index.xhtml?search=#{some search string}
In my index.xhtml
<td>
<f:metadata>
<f:viewParam name="search" value="#{databaseSearch.searchstring}" />
</f:metadata>
<p:inputText id="searchstring" size="20" maxlength="20" value="#{databaseSearch.searchstring}"/> <p:commandButton id="submit" icon="ui-icon-search" title="Search Database" update="panel" actionListener="#{databaseSearch.customerList}" />
</td>
in my databaseSearch.java
#ManagedBean(name = "databaseSearch")
#SessionScoped
public class databaseSearch implements Serializable {
public String searchstring;
//getter and setter for searchstring
}
Also, i would need it 'Submit' the form .... I am new to this, so please excuse me if this was already discussed before ...
Also if i specific index.html , my jsf components would not load, just a blank page. like if i go
http://localhost:8080/blmdatabase/
my primefaces components load fine, but if i do
http://localhost:8080/blmdatabase/index.xhtml
it does not, so now i am wondering how to pass the parameters :(
Web.xml
<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>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
You could 'submit' your form adding <f:event type="preRenderView"> inside the <f:metadata> tag.
<f:metadata>
<f:viewParam name="search" value="#{databaseSearch.searchstring}" />
<f:event type="preRenderView" listener="#{databaseSearch.doSearch}" />
</f:metadata>
This way, you could implement how your bean will search for this specific query string
public void doSearch(ComponentSystemEvent event) {
if(!searchString.isEmpty()) {
// Do your search here
}
}
Your Faces Servlet maps to anything that's hold in the faces virtual folder:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
So http://localhost:8080/blmdatabase/index.xhtml URL won't be parsed through Faces Servlet. You must use http://localhost:8080/blmdatabase/faces/index.xhtml, note the use of faces/ before your index.xhtml file, also note that your <welcome-file> also points to faces/index.xhtml.
The downside of this URL pattern is that Faces Servlet would also process non-facelets resources like JavaScript files (.js), Style files (.css), images (*.png, *.jpg) and others. A better Faces Servlet mapping would be:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
In this way, Faces Servlet will process xhtml pages only and you won't need the faces virtual folder anymore. With this change, now you can access to http://localhost:8080/blmdatabase/index.xhtml with no problems.
you could use a method in the class dataBaseSearch:
if(searchString != null){
//execute a query in database
// return result to a variable(resultSet or list)
}
and use getter and setter to get the the resultSet or List
and render the result in a datatable.

Servlet mapping jsf

I'm asking myself which way is the best for servlet mapping in jsf? And Why?
Especially I'm wondering always about the different suffix of the facelet resources and the suffix of the url-pattern of the servlet-mapping. My servlet mapping is always coherent to the suffix of my resources.
For Example if I'm using xhtml as facelets my servlet mapping does it also:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
But I see examples where the resources are xhtml files and the servlet mapping is on jsf?
For Example:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
So which way is the best way?
And also I'm wondering why the second way working at all?
For now you won't need an answer on which servlet mapping to use, I think. You would probably be better of with some reading first.
I have taken the liberty to find two related questions which might open your eyes a little considering JSF and the file extension.
What is the difference between creating JSF pages with .jsp or .xhtml or .jsf extension
JSF Facelets: Sometimes I see the URL is .jsf and sometimes .xhtml. Why?

JSF PrimeFaces simple example: blank page only

I tried this example using Primefaces-3.3.1, JSF 2.1, Glassfish 3.1.2 and IntelliJ IDEA 11.1.3 as IDE. Added PF's jar to WEB-INF/lib directory and created 'test.jsf', where I putted the example.
As a result I see blank page. Chrome understands it like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"><head></head><body><h:head>
</h:head>
<h:body>
<p:editor>
</p:editor></h:body>
</body></html>
What's wrong?
Thanks.
looks like you should modify your web.xml
like this
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
take a look at this JSF 2.0 Hello World Example 4. JSF 2.0 Serlvet Configuration
Sometimes when you build a JSP or XHTML page, and you enter in the navigator it doesn't work like a JSF page.
To fix it you need to view the web.xml and change the url-pattern like said Daniel before.
For example, if you have a page called:
index.jsp
and you have this in your web.xml
< url-pattern>*.jsf< /url-pattern>
You need to access through the URL
http:// localhost:8080/project/index.jsf

Resources