Command button not visible in JSF page

Question

Im trying to test a sample JSF project but for some reason the command button are not being displayed that is given in the below page,

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:f="http://java.sun.com/jsf/core"    
   xmlns:h="http://java.sun.com/jsf/html">

   <h:body>
      <h2>Implicit Navigation</h2>
      <hr />
      <h:form>
         <h3>Using Managed Bean</h3>
         <h:commandButton action="#{navigationController.moveToPage1}" 
            value="Page1" />
         <h3>Using JSF outcome</h3>
         <h:commandButton action="page2" value="Page2" />                           
      </h:form> 
      <br/>
      <h2>Conditional Navigation</h2>
      <hr />
      <h:form>          
         <h:commandLink action="#{navigationController.showPage}"
            value="Page1">
            <f:param name="pageId" value="1" />
         </h:commandLink>   

         <h:commandLink action="#{navigationController.showPage}"
            value="Page2">
            <f:param name="pageId" value="2" />
         </h:commandLink>   

         <h:commandLink action="#{navigationController.showPage}" 
            value="Home">
            <f:param name="pageId" value="3" />
         </h:commandLink>   
      </h:form> 
      <br/>
      <h2>"From Action" Navigation</h2>
      <hr />
      <h:form>          
         <h:commandLink action="#{navigationController.processPage1}" 
         value="Page1" />               

         <h:commandLink action="#{navigationController.processPage2}" 
         value="Page2" />       

      </h:form> 
      <br/>
      <h2>Forward vs Redirection Navigation</h2>
      <hr />
      <h:form>          
         <h3>Forward</h3>
         <h:commandButton action="page1" value="Page1" />       
         <h3>Redirect</h3>
         <h:commandButton action="page1?faces-redirect=true" 
         value="Page1" />                   
      </h:form> 
   </h:body>
</html>

web.xml

<!DOCTYPE web-app PUBLIC
   "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
   "http://java.sun.com/dtd/web-app_2_3.dtd" >

   <web-app>
   <display-name>Archetype Created 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.CONFIG_FILES</param-name> 
      <param-value>/WEB-INF/faces-config.xml</param-value> 
   </context-param> 
   <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>*.xhtm</url-pattern>
   </servlet-mapping>
</web-app>

faces.config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config
   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-facesconfig_2_0.xsd"
   version="2.0">
   <navigation-rule>
      <from-view-id>home.xhtml</from-view-id>
      <navigation-case>
         <from-action>#{navigationController.processPage1}</from-action>
         <from-outcome>page</from-outcome>
         <to-view-id>page1.jsf</to-view-id>
      </navigation-case>
      <navigation-case>
         <from-action>#{navigationController.processPage2}</from-action>
         <from-outcome>page</from-outcome>
         <to-view-id>page2.jsf</to-view-id>
      </navigation-case>
   </navigation-rule>   
</faces-config>

view source html file xmlns:h="http://java.sun.com/jsf/html">

   <h:body>
      <h2>Implicit Navigation</h2>
      <hr />
      <h:form>
         <h3>Using Managed Bean</h3>
         <h:commandButton action="#{navigationController.moveToPage1}" 
            value="Page1" />
         <h3>Using JSF outcome</h3>
         <h:commandButton action="page2" value="Page2" />                           
      </h:form> 
      <br/>
      <h2>Conditional Navigation</h2>
      <hr />
      <h:form>          
         <h:commandLink action="#{navigationController.showPage}"
            value="Page1">
            <f:param name="pageId" value="1" />
         </h:commandLink>   

         <h:commandLink action="#{navigationController.showPage}"
            value="Page2">
            <f:param name="pageId" value="2" />
         </h:commandLink>   

         <h:commandLink action="#{navigationController.showPage}" 
            value="Home">
            <f:param name="pageId" value="3" />
         </h:commandLink>   
      </h:form> 
      <br/>
      <h2>"From Action" Navigation</h2>
      <hr />
      <h:form>          
         <h:commandLink action="#{navigationController.processPage1}" 
         value="Page1" />               

         <h:commandLink action="#{navigationController.processPage2}" 
         value="Page2" />       

      </h:form> 
      <br/>
      <h2>Forward vs Redirection Navigation</h2>
      <hr />
      <h:form>          
         <h3>Forward</h3>
         <h:commandButton action="page1" value="Page1" />       
         <h3>Redirect</h3>
         <h:commandButton action="page1?faces-redirect=true" 
         value="Page1" />                   
      </h:form> 
   </h:body>
</html>

Navigationcontroller

package com.tutorialspoint.test;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;

@ManagedBean(name = "navigationController", eager = true)
@RequestScoped
public class NavigationController implements Serializable {

   private static final long serialVersionUID = 1L;

   @ManagedProperty(value="#{param.pageId}")
   private String pageId;

   public String moveToPage1(){
      return "page1"; 
   }

   public String moveToPage2(){
      return "page2"; 
   }

   public String moveToHomePage(){
      return "home"; 
   }

   public String processPage1(){
      return "page"; 
   }

   public String processPage2(){
      return "page"; 
   }

   public String showPage(){
      if(pageId == null){
         return "home";
      }
      if(pageId.equals("1")){
         return "page1";
      }else if(pageId.equals("2")){
         return "page2";
      }else{
         return "home";
      }     
   }

   public String getPageId() {
      return pageId;
   }

   public void setPageId(String pageId) {
      this.pageId = pageId;
   }
}

page1.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
   xmlns:h="http://java.sun.com/jsf/html">
   <h:body>
      <h2>This is Page1</h2>        
      <h:form>
         <h:commandButton action="home?faces-redirect=true" 
            value="Back To Home Page" />            
      </h:form>     
   </h:body>
</html>

page2.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
   xmlns:h="http://java.sun.com/jsf/html">
   <h:body>
      <h2>This is Page2</h2>        
      <h:form>
         <h:commandButton action="home?faces-redirect=true" 
            value="Back To Home Page" />            
      </h:form>     
   </h:body>
</html>

Looks like you're accessing the page using a URL pattern that doesn't match with Faces Servlet URL pattern. To make sure of this, please post your web.xml Faces Servlet configuration and how you access to this page i.e. the URL you use. — Luiggi Mendoza, Jul 30 '13 at 04:54
After you opened the page in webbrowser, rightclick and choose *View Source*. Do you see JSF generated HTML output or the unparsed raw JSF source code? If the latter, that totally explains your concrete problem and the solution is already hinted/answered by Luiggi here above. — BalusC, Jul 30 '13 at 11:31
By the way, your question then duplicates http://stackoverflow.com/a/2853964 and http://stackoverflow.com/a/13515501 and http://stackoverflow.com/a/3160549 and http://stackoverflow.com/a/14156585 and http://stackoverflow.com/a/3005303 and http://stackoverflow.com/a/8041828 and http://stackoverflow.com/a/1791910 and http://stackoverflow.com/a/8097087 and http://stackoverflow.com/a/2207938 and http://stackoverflow.com/a/3331938 and http://stackoverflow.com/a/12599754 and http://stackoverflow.com/a/6477084 etc. — BalusC, Jul 30 '13 at 11:33
I have added both the files for your review..THe page is displaying only the command buttons are not visible — user1050619, Jul 31 '13 at 00:36

Boris Remus · Answer 1 · 2013-07-31T22:06:32.280

1

It's already been answered above, but I'll be specific. In your web.xml the <url-pattern> is specified as *.xhtm and your jsf files have a .xhtml extension. Note the missing letter in the pattern specification. Because of that your files aren't recognized and routed through the faces servlet. Just add the 'l' to the url-pattern in the web.xml and it should start working.

edited Jul 31 '13 at 22:06

answered Jul 31 '13 at 09:18

Boris Remus

191
1
4

Command button not visible in JSF page

1 Answers1