Since Facelets is a XML based view technology which eats and emits in essence XML markup, you cannot use it with a HTML4 doctype. The HTML4 doctype describes several elements which cannot be self-closing, like <link>, <meta>, <br> and <hr>. However, with XML you’re forced to close them like <link/>, <meta/>, etc. So using a … Read more
The : is a special character in CSS identifiers, it represents the start of a pseudo class selector like :hover, :first-child, etc. You would need to escape it. #phoneForm\:phoneTable { background: pink; } This only doesn’t work in IE6/7. If you’d like to support those users as well, use \3A instead (with a trailing space … Read more
Since the origin is actually not XML, but a Javabean, and the other answer doesn’t deserve to be edited into a totally different flavor (it may still be useful for future references by others), I’ll add another answer based on a Javabean-origin. I see basically three options when the origin is a Javabean. Make use … Read more
You need to put all <h:inputXxx>/<h:selectXxx> components in a <h:form> and bind their value attribute to a bean property via an EL expression like #{bean.property}, backed by a getter/setter pair. When properly set, JSF will automatically set the values in the bean when the form is submitted via a <h:commandXxx> component in the very same … Read more
Ajax updating is performed by JavaScript language in the client side. All which JavaScript has access to is the HTML DOM tree. If JSF does not render any component to the HTML output, then there’s nothing in the HTML DOM tree which can be obtained by JavaScript upon Ajax update. JavaScript cannot get the desired … Read more
Several ways. Use <h:commandScript>. Note that this is only available since JSF 2.3. <h:form> <h:commandScript name=”commandName” action=”#{bean.action}” render=”:results” /> </h:form> <h:panelGroup id=”results”> … </h:panelGroup> You can invoke it in JS as below: commandName(); The parameters can be passed as below: commandName({ name1: “value1”, name2: “value2” }); And obtained as below: String name1 = externalContext.getRequestParameterMap().get(“name1”); // … Read more
The .jsf extension is where the FacesServlet is during the JSF 1.2 period often mapped on in the web.xml. <servlet-mapping> <servlet-name>facesServlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> The .xhtml extension is of the actual Facelets file as you’ve physically placed in the webcontent of your webapp, e.g. Webapp/WebContent/page.xhtml. If you invoke this page with the .jsf extension, e.g. http://localhost:8080/webapp/page.jsf … Read more
A straightforward approach would be the following view: <h:panelGroup id=”header” layout=”block”> <h1>Header</h1> </h:panelGroup> <h:panelGroup id=”menu” layout=”block”> <h:form> <f:ajax render=”:content”> <ul> <li><h:commandLink value=”include1″ action=”#{bean.setPage(‘include1’)}” /></li> <li><h:commandLink value=”include2″ action=”#{bean.setPage(‘include2’)}” /></li> <li><h:commandLink value=”include3″ action=”#{bean.setPage(‘include3’)}” /></li> </ul> </f:ajax> </h:form> </h:panelGroup> <h:panelGroup id=”content” layout=”block”> <ui:include src=”/WEB-INF/includes/#{bean.page}.xhtml” /> </h:panelGroup> With this bean: @ManagedBean @ViewScoped public class Bean implements Serializable { private … Read more
What is the difference between those approaches? Facelet templates Use Facelet templates (as in <ui:composition>, <ui:include> and <ui:decorate>) if you want to split main page layout fragments into reuseable templates. E.g. header, menu, content, footer, etc. Examples: How to include another XHTML in XHTML using JSF 2.0 Facelets? What is the real conceptual difference between … Read more
Introduction The proper JSF 2.x way is using <h:outputStylesheet>, <h:outputScript> and <h:graphicImage> with a name referring the path relative to webapp’s /resources folder. This way you don’t need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x? Folder … Read more