JadePool应用范例：完善China软件项目架构（三）
五、创建后台管理页面架构
JSF2.0框架为软件工程做减法，不再强调faces-congfig.xml的重要性，这给项目的开发维护带来了非常大的方便，比较一下，struts1.x、struts2.x的做法就显得复杂了。在JSF2.0框架中定义页面模板，是直接在几个xhtml页面文件中实现的，而使用struts的tiles定义模板，除了页面文件外，还要额外定义xml配置文件，给定义、使用、维护模板都带来了困难。JSF2.0的优点远不止这些，在JSF框架已经成熟的今天，还有那么多的培训机构、软件企业痴迷于struts，那已经是选择性的落后了，会误导一大批年轻的Java WEB开发人员。
China软件项目的后台页面框架由一个Facelets模板文件和若干个Facelets模板客户端文件构成。
模板文件IndexTemplate.xhtml的内容见附件1；
模板客户端文件index.xhtml的内容见附件2；
在IndexTemplate.xhtml中，使用styleClass="my-north"修改了north布局的样式，默认样式是背景图，可能不符合正常的审美习惯。
primefaces.css文件的内容在“JadePool应用范例：完善China软件项目架构（一） ”中已经做了介绍，主要作用是修改Primefaces组件默认字体的大小。该文件位于 上下文/resources/css/路径下。
如果是在NetBeans7.xIDE中创建xhtml，请注意将字符集统一为GBK。有两个地方需要修改：
1、文件顶部，修改为<?xml version='1.0' encoding='GBK' ?>
2、文件的meta部分，修改为<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
附件1：IndexTemplate.xhtml的内容
附件2：index.xhtml的内容
JSF2.0框架为软件工程做减法，不再强调faces-congfig.xml的重要性，这给项目的开发维护带来了非常大的方便，比较一下，struts1.x、struts2.x的做法就显得复杂了。在JSF2.0框架中定义页面模板，是直接在几个xhtml页面文件中实现的，而使用struts的tiles定义模板，除了页面文件外，还要额外定义xml配置文件，给定义、使用、维护模板都带来了困难。JSF2.0的优点远不止这些，在JSF框架已经成熟的今天，还有那么多的培训机构、软件企业痴迷于struts，那已经是选择性的落后了，会误导一大批年轻的Java WEB开发人员。
China软件项目采用JSF2.0框架，后台管理页面采用JSF2.0模板技术实现。后台管理页面架构效果图如下：
China软件项目的后台页面框架由一个Facelets模板文件和若干个Facelets模板客户端文件构成。
模板文件IndexTemplate.xhtml的内容见附件1；
模板客户端文件index.xhtml的内容见附件2；
模板文件调用的primefaces.css文件的内容见附件3。
IndexTemplate.xhtml中使用Primeface3.5页面布局组件，主题样式start在web.xml文件中定义，它的代码是：
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>start</param-value>
</context-param> 用户可以参阅Primefaces网站的http://www.primefaces.org/themes.html网址选择。
在IndexTemplate.xhtml中，使用styleClass="my-north"修改了north布局的样式，默认样式是背景图，可能不符合正常的审美习惯。
primefaces.css文件的内容在“JadePool应用范例：完善China软件项目架构（一） ”中已经做了介绍，主要作用是修改Primefaces组件默认字体的大小。该文件位于 上下文/resources/css/路径下。
如果是在NetBeans7.xIDE中创建xhtml，请注意将字符集统一为GBK。有两个地方需要修改：
1、文件顶部，修改为<?xml version='1.0' encoding='GBK' ?>
2、文件的meta部分，修改为<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
附件1：IndexTemplate.xhtml的内容
<?xml version='1.0' encoding='GBK' ?>
<!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"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>China软件项目</title>
<h:outputStylesheet library="css" name="primefaces.css"/>
<style type="text/css">
.ui-selectoneradio td{border: 0px;padding: 4px;background-color: transparent;}/*去掉p:selectOneRadio中表格宽度*/
.my-north,.my-north div{margin: 0px;padding: 0px;border: 0px;color:white;background:url(none) transparent;background-color: #004360;}/*修改头部布局的样式*/
.my-menu{width:160px;}
</style>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="70" styleClass="my-north">
<h:panelGrid columns="2" style="height: 30px;">
<h:column>
<h1 style="padding: 8px;">China软件项目管理</h1>
</h:column>
<h:column>
<div style="padding: 4px;">
JSF2.0卓越的JavaWEB框架
</div>
</h:column>
</h:panelGrid>
</p:layoutUnit>
<p:layoutUnit position="south" size="40" closable="true" collapsible="true">
<div style="padding: 4px;text-align: center;">
开发设计：胡开明
<p:spacer width="10"/>
日期：2013年3月28日
</div>
</p:layoutUnit>
<p:layoutUnit position="west" size="180" header="China软件项目主菜单" collapsible="true">
<p:menu styleClass="my-menu">
<p:submenu label="基本数据管理">
<p:menuitem value="行政区划" url="#" />
<p:menuitem value="民族" url="#" />
<p:menuitem value="产品分类" url="#" />
<p:menuitem value="国民经济行业分类" url="#" />
</p:submenu>
<p:submenu label="通讯录管理">
<p:menuitem value="商务通讯录" url="#" />
</p:submenu>
<p:submenu label="资讯管理">
<p:menuitem value="RSS订阅" url="#" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">各项业务实现部分</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
附件2：index.xhtml的内容
<?xml version='1.0' encoding='GBK' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="./IndexTemplate.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<ui:define name="content">
<div style="margin:80px auto;width: 400px;border: none;">
<h2>China软件项目管理系统</h2>
<h3>内容</h3>
<ol>
<li>中国行政区划</li>
<li>中国民族</li>
<li>中国产品分类大全</li>
<li>中国行业分类</li>
<li>RSS订阅</li>
<li>商务通讯录</li>
</ol>
<h3>技术组合</h3>
<ol>
<li>JSF2.0</li>
<li>Primefaces3.5</li>
<li>JadePool1.0</li>
</ol>
</div>
</ui:define>
</ui:composition>
附件3：primefaces.css文件的内容
/*修正primefaces默认样式，参照www.primefaces.org网站的default.css实现*/
h1, h2, h3 {
margin-top: 0px;
}
h1 {
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
margin-top:20px;
}
.ui-themeswitcher a.ui-selectonemenu-label-container {
text-decoration: none !important;
}
.ui-widget {
font-size: 12px !important;
}
.ui-selectoneradio td{border: 0px;padding: 4px;background-color: transparent;}/*去掉p:selectOneRadio中表格宽度*/