I have this JSF tabs with JQuery and AJAX. But there is a bug that I cannot find. This is the JSF page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>DX-57 History Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" />
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"></script>
<link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/mytabs.js"></script>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="greenBand" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Dashboard" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_application.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:650px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:form prependId="false">
<h:panelGroup id="tabs" layout="block">
<ul>
<c:forEach items="#{ApplicationController.tabs}" var="tab">
<li>#{tab.tabid}</li>
<h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{ApplicationController.switchPages(tab.tabid)}" style="display:none">
<f:ajax render="tabs"></f:ajax>
</h:commandButton>
</c:forEach>
</ul>
<c:forEach items="#{ApplicationController.tabs}" var="tab">
<h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq ApplicationController.selectedTab}">
<ui:include src="#{tab.tabfilename}"></ui:include>
</h:panelGroup>
</c:forEach>
</h:panelGroup>
</h:form>
</div>
<div id="settingsdivb" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px">
</div>
</div>
</div>
</h:body>
</html>
This is the code of the managed bean:
import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
// or import javax.faces.bean.SessionScoped;
import javax.inject.Named;
/* include SQL Packages */
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.sql.DataSource;
import javax.annotation.Resource;
import javax.faces.context.FacesContext;
import javax.inject.Inject;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
// or import javax.faces.bean.ManagedBean;
import org.glassfish.osgicdi.OSGiService;
#Named("ApplicationController")
#SessionScoped
public class Application implements Serializable {
public Application() {
}
/* Call the Oracle JDBC Connection driver */
#Resource(name = "jdbc/Oracle")
private DataSource ds;
#PostConstruct
public void init() {
tabs = new ArrayList<MyTabObject>();
tabs.add(new MyTabObject("ApplicationTabMain.xhtml", "Main"));
tabs.add(new MyTabObject("ApplicationTabModel.xhtml", "Model"));
tabs.add(new MyTabObject("ApplicationTabSettings.xhtml", "Settings"));
}
String selectedTab = "Main";
public String getSelectedTab() {
return selectedTab;
}
public void setSelectedTab(String selectedTab) {
this.selectedTab = selectedTab;
}
public String switchPages(String selTab) {
selectedTab = selTab;
return "Application.xhtml";
}
List<MyTabObject> tabs;
public List<MyTabObject> getTabs() {
return tabs;
}
public void setTabs(List<MyTabObject> tabs) {
this.tabs = tabs;
}
////
public class MyTabObject {
String tabfilename;
String tabid;
public String getTabfilename() {
return tabfilename;
}
public void setTabfilename(String tabfilename) {
this.tabfilename = tabfilename;
}
public String getTabid() {
return tabid;
}
public void setTabid(String tabid) {
this.tabid = tabid;
}
public MyTabObject(String tabfilename, String tabid) {
super();
this.tabfilename = tabfilename;
this.tabid = tabid;
}
}
}
The JSF page has these tabs:
ApplicationTabMain.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:panelGroup>
<h:form>
Main
</h:form>
</h:panelGroup>
</ui:composition>
</h:body>
</html>
ApplicationTabModel.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:panelGroup>
<h:form>
Model
</h:form>
</h:panelGroup>
</ui:composition>
</h:body>
</html>
ApplicationTabSettings.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:panelGroup>
<h:form>
Settings
</h:form>
</h:panelGroup>
</ui:composition>
</h:body>
</html>
For now I have only plain JSF tabs without any Java code. This is the problem:
The content of the tabs is not displayed. In firebug I get this error:
uncaught exception: jQuery UI Tabs: Mismatching fragment identifier.
How I can fix this error?
There are indications you may use incompatible jquery/jqueryui versions according to this: http://forum.jquery.com/topic/uncaught-exception-jquery-ui-tabs-mismatching-fragment-identifier-5-2-2010
Try switching back to jquery 1.3.2 if you are not already.
Related
I am trying to implement facebook based sign in . Everything works however i don't know how to handle the refresh case that is once a user is redirected to the page how and the user clicks on refresh it triggers another request , how do i handle that ?
package com.example.demo.controllers;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.view.RedirectView;
import com.example.demo.FbService.FbService;
#Controller
#RequestMapping("/")
public class FbController {
#Autowired
private FbService facebookService;
#GetMapping("/createFacebookAuthorization")
public RedirectView createFacebookAuthorization(){
return new RedirectView(facebookService.createFacebookAuthorizationURL());
}
#GetMapping("/facebook")
public String createFacebookAccessToken(#RequestParam("code") String code){
String accToken=facebookService.createFacebookAccessToken(code);
Object obj=facebookService.getName(accToken);
return "details";
}
#RequestMapping("/")
public ModelAndView firstPage() {
return new ModelAndView("welcome");
}
}
package com.example.demo.FbService;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.social.facebook.api.Facebook;
import org.springframework.social.facebook.api.impl.FacebookTemplate;
import org.springframework.social.facebook.connect.FacebookConnectionFactory;
import org.springframework.social.oauth2.AccessGrant;
import org.springframework.social.oauth2.OAuth2Operations;
import org.springframework.social.oauth2.OAuth2Parameters;
import org.springframework.stereotype.Service;
#Service
public class FbService {
#Value("${spring.social.facebook.appId}")
String facebookAppId;
#Value("${spring.social.facebook.appSecret}")
String facebookSecret;
public String createFacebookAuthorizationURL(){
FacebookConnectionFactory connectionFactory = new FacebookConnectionFactory(facebookAppId, facebookSecret);
OAuth2Operations oauthOperations = connectionFactory.getOAuthOperations();
OAuth2Parameters params = new OAuth2Parameters();
params.setRedirectUri("http://localhost:8080/facebook");
params.setScope("public_profile,email");
return oauthOperations.buildAuthorizeUrl(params);
}
public String createFacebookAccessToken(String code) {
FacebookConnectionFactory connectionFactory = new FacebookConnectionFactory(facebookAppId, facebookSecret);
AccessGrant accessGrant = connectionFactory.getOAuthOperations().exchangeForAccess(code, "http://localhost:8080/facebook", null);
return accessGrant.getAccessToken();
}
public Object getName(String accessToken) {
Facebook facebook = new FacebookTemplate(accessToken);
String[] fields = {"id", "name","email"};
return facebook.fetchObject("me", String.class, fields);
}
}
details.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Login</title>
</head>
<body>
<div style="border: 1px solid #ccc; padding: 5px; margin-bottom: 20px;">
Welcome
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Login</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<base href="/" />
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/webjars/font-awesome/css/font-awesome.min.css"></link>
</head>
<body>
<div style="border: 1px solid #ccc; padding: 5px; margin-bottom: 20px;">
Validate using Facebook |
</div>
</body>
</html>
The starting page which sends the request
The redirected page which works fine
The error that appears after refresh is done
I know why it is coming but don't know what would be the solution to prevent it .
Any help would be appreciated .
I have seen many questions around the same topic but none of them helped. In fact I am beginning learning primefaces.
Here is my xhtml page (template):
<?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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<f:view contentType="text/html" locale="en">
<h:head>
<title><ui:insert name="title">Master Data</ui:insert></title>
<h:outputStylesheet library="css" name="layout.css"/>
<h:outputStylesheet library="css" name="jsfcrud.css"/>
<h:outputScript library="js" name="jsfcrud.js"/>
</h:head>
<h:body>
<p:growl id="growl" life="3000" />
<h:panelGroup layout="block" styleClass="slogan">
<h:outputText value="Master Data Web module for single line v 1.0"/>
</h:panelGroup>
<h:form id="mainForm" prependId="false">
<h:panelGrid columns="2" columnClasses="chaptersMenuColumn,chaptersContentColumn">
<h:form>
<f:ajax render=":content">
<p:menu>
<p:submenu label="Master Data Sections">
<p:menuitem value="KPI" action="#{KpiBean.setPage('create')}" />
<p:menuitem value="Queues" url=""/>
<p:menuitem value="Causes" url=""/>
<p:menuitem value="SubCauses" url=""/>
</p:submenu>
</p:menu>
</f:ajax>
</h:form>
<h:panelGroup id="content" layout="block">
<ui:include src = "../views/#{KpiBean.page}.xhtml"/>
</h:panelGroup>
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
And here my Bean:
#Named
#SessionScoped
public class KpiBean implements Serializable {
private String page= "View";
#PostConstruct
public void init() {
page = "View"; // Default include.
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
When I launch my Glassfish server and deploy the build I get that error:
javax.faces.view.facelets.TagAttributeException: /templates/template.xhtml #47,78 <ui:include src="../views/#{KpiBean.page}.xhtml"> Invalid path : ../views/.xhtml
at com.sun.faces.facelets.tag.ui.IncludeHandler.apply(IncludeHandler.java:129)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:137)
actually your bean is available under the name kpiBean (camelCase naming, first letter in lowercase).
ı do not get any warning or error messages in console. debug mode breakpoints does not work in valueChangeListener method in bean class. another methods work at debug mode in bean class. ı tried also ajax with listener.(ı am using maven) does anbody have idea?
xhtml file:
<?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:b="http://bootsfaces.net/ui"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
<ui:composition template="/template/template.xhtml">
<ui:define name="menu">
<ui:include src="/template/menu.xhtml">
<ui:param name="menuId" value="4"></ui:param>
</ui:include>
</ui:define>
<ui:define name="content">
<ui:include src="../template/progress.xhtml"></ui:include>
<h:form id="nameForm">
<h:outputScript library="primefaces" name="jquery/jquery.js"
/>
<b:column col-xs="12" col-md="8">
<b:panel style="width:80%">
<b:panelGrid colSpans="4,8">
<p:tabView id="tabView" style="min-width:450px;" >
<p:tab title="..." >
<b:panelGrid colSpans="3,9" columns="2"
cellpadding="10">
<p:selectOneMenu value="#{beanController.a}"
id="AId"
valueChangeListener="#{beanController.aSelected}" onchange="submit()">
<p:ajax event="change"/>
<f:selectItems
value="#{beanController.aList}" />
</p:selectOneMenu>
</b:panelGrid>
</p:tab>
beanController.java:
#ManagedBean(name = "beanController")
#ViewScoped
public class BeanController {
public void aSelected(ValueChangeEvent event){
You can use <f:ajax />, like that :
<f:ajax event="blur" listener="#{beanController.updateDataListener}" update=":#{p:component('tabView')}"/>
#ManagedBean(name = "beanController")
#SessionScoped
public class BeanController implements Serializable{
private String a;
public void updateDataListener(AjaxBehaviorEvent event)
{
......
}
}
I have 2 questions here for the code below.
The first one is, how can I have an itemValue in selectItem for my selectOneRadio as a return value from a function? I know this is working for a normal itemValue, if I put just "0", it shows up on the next page, but any of the getCaseValueByIndex() returns nothing.
My second question is, instead of listing each selectItem one by one, can i dynamically create them? What I was thinking is creating a function called getCasesCount which would return the size of the cases array (in this case, its 6) and then run a for loop like so:
for (int i = 0; i < casesCount; i++) {
<f:selectItem itemValue="#{CustomBuild.getCaseValueByIndex(i)}" itemLabel="# {CustomBuild.getCaseKey(i)}"/>
}
So then what would happen is that would create the same code I have but dynamically so that If i added or removed items in my LinkedHashMap, the code would reflect those changes rather than crashing for an outofbounds or null pointer error.
index.xhtml
<!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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<title>Jadestar's PC Solutions</title>
</head>
<body>
<h4>Please choose your components.</h4>
<h4>To be eligible for the system builder's discount,
you must select at least <span class ='highlight'> 1 </span> component from each category.</h4>
<br></br>
#{CustomBuild.initialize()}
<h3>Computer Case</h3>
<h:form>
<h:selectOneRadio value="#{CustomBuild.chosenCase}">
<f:selectItem itemValue="#{CustomBuild.getCaseValueByIndex(0)}" itemLabel="#{CustomBuild.getCaseKeyByIndex(0)}"/>
<f:selectItem itemValue="#{CustomBuild.getCaseValueByIndex(1)}" itemLabel="#{CustomBuild.getCaseKeyByIndex(1)}"/>
<f:selectItem itemValue="#{CustomBuild.getCaseValueByIndex(2)}" itemLabel="#{CustomBuild.getCaseKeyByIndex(2)}"/>
<f:selectItem itemValue="#{CustomBuild.getCaseValueByIndex(3)}" itemLabel="#{CustomBuild.getCaseKeyByIndex(3)}"/>
<f:selectItem itemValue="#{CustomBuild.getCaseValueByIndex(4)}" itemLabel="#{CustomBuild.getCaseKeyByIndex(4)}"/>
<f:selectItem itemValue="#{CustomBuild.getCaseValueByIndex(5)}" itemLabel="#{CustomBuild.getCaseKeyByIndex(5)}"/>
</h:selectOneRadio>
<br></br>
<h:commandButton id="submit" value="submit" action="responsePage" />
</h:form>
</body>
</html>
responsePage.xhtml
<!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://xmlns.jcp.org/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<title>Response</title>
</head>
<body>
<h4><h:outputText escape="false" value="#{CustomBuild.chosenCase}"/></h4>
<h:form prependId="false">
<h:commandButton id="backButton" value="Back" action="index" />
</h:form>
</body>
</html>
CustomBuild.java
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package Part1;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.servlet.http.HttpSession;
/**
*
* #author Administrator
*/
#ManagedBean(name = "CustomBuild")
#SessionScoped
public class CustomBuild implements Serializable {
LinkedHashMap <String, String> cases = new LinkedHashMap<String, String>();
String chosenCase;
public String getChosenCase() {
return chosenCase;
}
public void setChosenCase(String chosenCase) {
this.chosenCase = chosenCase;
}
public float getCaseValueByKeyFloat(String key) {
float caseValueByValue = Float.parseFloat(cases.get(key));
return caseValueByValue;
}
public String getCaseKeyByIndex(int index) {
Object newKey = cases.keySet().toArray()[index];
//String tempKey = getCaseValueByIndex(index);
//String newKey = getCaseKeyByValue(tempKey);
return newKey.toString();
}
public String getCaseValueByIndex(int index) {
String caseValue = (new ArrayList<String>(cases.values())).get(index);
return caseValue;
}
public void initialize() {
cases.put("59.95" ,"Eleo 500 $59.95");
cases.put("79.95" ,"Eleo 700 $79.95");
cases.put("99.95" ,"Star Maker $99.95");
cases.put("104.95" ,"Anzooc 1200 $104.95");
cases.put("119.95" ,"Eleo 900 $119.95");
cases.put("139.95" ,"Criticase 1000 $139.95");
}
public CustomBuild() {
System.out.println("Custom Computer");
}
}
You can create an object which holds your key and value pairs.
After that you can use a list of these objects in your bean and use the following code in the xhtmls:
<h:selectOneRadio value="#{CustomBuild.chosenCase}">
<f:selectItems value="#{CustomBuild.getCases}" var="case" itemValue="#{case.value}" itemLabel="#{case.key}" />
</h:selectOneRadio>
Note: if you use an object in selectItem's value, you will need a converter, and to set the proper value you will need a proper equals in your bean.
If you want to stick with the hashmap, here a possible solution for you:
<h:selectOneRadio value="#{CustomBuild.chosenCase}">
<f:selectItems value="#{CustomBuild.cases.keySet()}" var="key" itemValue="#{CustomBuild.getValueByKez(key)}" itemLabel="#{key}" />
</h:selectOneRadio>
I'm new to jsf.
I'm trying to send value to java bean from commandButton to change src in ui:include and render it with ajax so I when clicked commandButton I could refresh part from the page without load the whole page
and below is my code
\\\\\\\ The Bean File
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
#Named("urls")
#RequestScoped
public class URLPagesBean
{
private String urlSRC = "";
public String getUrlSRC() {
return urlSRC;
}
public void setUrlSRC(String urlSRC) {
this.urlSRC = urlSRC;
}
public String getURL()
{
String url = "";
if(urlSRC == "page1" || urlSRC == "" || urlSRC == null)
{
url = "page1.xhtml";
}
else if (urlSRC == "page2")
{
url = "page2.xhtml";
}
return url;
}
}
/////////////
The Index file
\\\\\\\\\\\\\\\\\\\\\\
<h:body >
<h:panelGroup layout="block" styleClass="mainContentBox">
<h:panelGroup layout="block" styleClass="mainTopBox">
<h:panelGroup layout="block" styleClass="logoBox"></h:panelGroup>
</h:panelGroup>
<h:form id="subMenuForm">
<h:panelGroup layout="block" styleClass="mainLiftBox">
<h:panelGroup id="msgBoard" layout="block" styleClass="mainMenuButtons">Message Board
<h:panelGroup layout="block" styleClass="subMenuBox">
<h:commandButton id="showMsgBoard" styleClass="subMenuButtonCommand" value="Page1"/>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="mainMenuButtons">Registrations Book
<h:panelGroup layout="block" styleClass="subMenuBox">
<h:commandButton id="registrInternalApprov" styleClass="subMenuButtonCommand" value="Page2">
<f:ajax render="mainCenterBox" />
</h:commandButton>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup id="mainCenterBox" styleClass="mainCenterBox" layout="block">
<ui:include id="centerView" src="#{urls.URL}"/>
</h:panelGroup>
</h:form>
</h:panelGroup>
</h:body>
///////////////////////////////////////
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://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Page 1</title>
</h:head>
<h:body>
<ui:fragment>
Page 1
</ui:fragment>
</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://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Page 2</title>
</h:head>
<h:body>
<ui:fragment>
Page 2
</ui:fragment>
</h:body>
</html>
///////////////////////////
Use action attribute of h:commandButton like
<h:commandButton value="Submit"
action="#{registrationAction.submitRegistration}" />