JadePool运用范例：完善China软件项目架构（三）

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

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

1楼u0100635581小时前: 好。。。。。。。。。。。。。。。。。。。。。。。。。

JadePool运用范例：完善China软件项目架构（三）

相关推荐