JadePool应用范例:完善China软件项目架构(三)

五、创建后台管理页面架构
        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模板技术实现。后台管理页面架构效果图如下:

JadePool应用范例:完善China软件项目架构(三)_第1张图片




        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中表格宽度*/









你可能感兴趣的:(JadePool应用范例:完善China软件项目架构(三))