zoukankan      html  css  js  c++  java
  • 用Demo 去学习页面显示(template)技术:【取数SQL脚本 + XML 树形结构document + XSL样式表语句 = html 页面显示】

    A:首先说一下本人对此技术的见解,

      缺点1:它不是一个好的页面显示技术,表现在多点,把简单的html分成了数据+结构样式,必然给使用者带来复杂度。

      缺点2:它不是一个很好控制的一个显示技术,why?简单的html可以用IE浏览器就可以测试寻找到细节上的问题,做修改容易,然而使用这个技术必然依赖编辑和调试xsl的

                   工具软件(我使用的是 Altova XMLSpy,该软件借助它能将xml+xsl打印成fop文件来查看细节),详细的操作调试大家可以自己先看一下它的使用手册,从表面上看打印

                   出来的是 基于Java 生成的fop 文件,还有在使用xsl的时候涉及到的知识点有:『xpath:xml节点路径;xsl-fo:格式化XML数据的语言;』

      优点1:说是优点其实也是它的主要用途,对于一些很严格的用户需求,在系统中有这样一个功能,用户查看自己的所有个人信息,并且将信息以letter信件发送到用户的邮箱,

        这个时候此技术就是最好的选择,首先它可以将页面生成fop格式文件,所有的信件都可以使用一个 template (code:xsl样式表语句),结合系统当前用户信息依照模板将

                  数据填充到模板中然后生成letter邮件。虽然jsp+jquery 可以实现页面数据的加载,但是如果用户有打印数据个人信息的需要,此方法生成的fop文件将类似pdf文件具备

        打印美观特点。

      优点2:使用简单,和html标签的使用如出一辙。

    Demo 如下:

           1:先创建简单的xml文件,xml的作用大家可以百度一下,个人理解可以做小型数据库使用,将简单的数据分装到xml中,封装的过程其实就是我们说的SQL脚本从数据库将需要的数据sql获取到(我也不太清楚,需要继续学习),大体意思是:xml在整个系统中起到的作用是桥梁的作用,从数据库获取数据交给xml存储,然后xsl格式语句去给xml中的数据排队,最后相互取值依赖,达到自定义格式化显示数据。

    xml文件名:student.xml

    <?xml version="1.0" encoding="utf-8"?>
    
    <root> <student id="1000"> <name>张三</name> <sex>male</sex> <age>15</age> </student> <student id="1001"> <name>李四</name> <sex>female</sex> <age>15</age> </student> <student id="1002"> <name>赵五</name> <sex>male</sex> <age>16</age> </student> </root>

        2:创建xsl 文件,起到自定义格式作用;

         xsl文件名为:student.xsl

    <?xml version="1.0" encoding="utf-8"?>
    <xsl:stylesheet version="1.0" 
            xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
            xmlns:msxsl="urn:schemas-microsoft-com:xslt" 
            xmlns:js="http://www.example.com/results" 
            extension-element-prefixes="js msxsl">        
    <xsl:output method="html" encoding="utf-8"/>
    <xsl:template match="/">
    <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;</xsl:text>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title>学生清单</title>
            <script>
                function random(){
                    return Math.random();
                }
            </script>
        </head>
        <body>
            <table border="1" cellpadding="5" cellspacing="0">
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
                <xsl:for-each select="/root/student[age = 15 ]">            <!-- 这里可以 对 循环中的 数据 进行 筛选  -->
                    <tr>
                        <td>
                            <xsl:value-of select="@id"/>
                        </td>
                        <td>
                            <xsl:value-of select="name"/>
                        </td>
                        <td>
                            <xsl:value-of select="age"/>
                        </td>
                        <td>                    
                                <xsl:if test="sex='male'">
                                    <xsl:value-of select="'男'"/>
                                </xsl:if>
                                <xsl:if test="sex='female'">
                                    <xsl:value-of select="'女'"/>
                                </xsl:if> 
                        </td>
                    </tr>
                </xsl:for-each>
            </table>   
        </body>
    </html>
    </xsl:template>
    </xsl:stylesheet>

    这里的代码是网上查找的一种简单写法,生成的文件是html页面,(主要是大家能理解这种思想【将数据和格式分开的思想】)如果是fop文件可以查看xml使用手册,提供一个

    xsl文件模板给大家,大家可以尝试去使用xsl-fo编写 template.附上本人使用的截图:

    各个标签的作用:

     

    随笔总结:

        写到这里感觉想要表达的意思大家应该可以明白一点,但完全明白还需要按照这个思路去实践。本人不才只能理解到这里,不喜勿喷,希望大家共同进步!!!

    下一个随笔,我将以《java web轻量级-开发面试教程》这本书的思路去总结。有志同道合的”码友“欢迎一起学习一起总结。

    Design By Ankermaker 

  • 相关阅读:
    QML Image Element
    QML基本可视化元素--Text
    联想笔记本电脑的F1至F12键盘问题。怎么设置才能不按FN就使用F1
    Qt Creator 黑色主题配置
    虚拟机配置
    虚拟机下安装ubuntu后root密码设置
    联想(Lenovo)小新310经典版进bios方法
    带有对话框的父窗口
    添加菜单的窗口
    添加组件的窗口
  • 原文地址:https://www.cnblogs.com/Ankermaker/p/7551697.html
Copyright © 2011-2022 走看看