XML + XSL + JS 构建小型Web App (一)

原创 2003年08月04日 10:08:00

XML + XSL + JS 构建小型Web App


 摘要: 本文介绍如何使用XML,XSL技术,做到内容和显示样式的分离。采用到的其他技术包括:xmldom , javascript 。

关键字:xml , xsl , javascript ,web application, xmldom。

前一段时间应聘一份兼职, 要求提供作品,我就赶了这么一个东西出来,后来觉得太简陋了,没有好意思拿出手,但就这么扔掉又觉得可惜,其中也实现了一些想法。幸好可以放在这儿,如果对大家有点帮助,那荣幸之至。

分以下几个方面分别介绍这个“小东西”:需求和设计 , 具体实现, 小结 。

一、需求和设计

需求:

做一个个人简历的小型web应用,要求以下功能:
1.可以选择不同的样式风格察看简历的内容,并根据不同需要对内容进行筛选排序。
2.可以对内容的内容样式进行管理。
3.对简历进行管理需要输入密码。
4.简历文件拷贝到其他电脑上仍然可以完成上面的操作。

基于以上四点需求,做如下分析:

1.采用多个文件完成需求(htm 文件,js文件, xml文件 和 xsl 文件)。使用xml文件作setting 文件(配置文件)和数据记录文件,xsl文件作为样式信息记录文件,js文件中放实现“业务逻辑”的javascript function。用户访问htm文件,调用这些功能。
2.简历信息用xml文件进行存储,通过采用不同的样式单文件进行转换实现不同样式风格察看和对内容进行筛选的需求。
3.使用javascript 和 dom 技术操作xml文件,实现对简历内容的编辑功能。
4.密码加密存储。

设计:

有两种思路可以考虑采用,如下:
1)文件清单,框架如下:
index.htm        //入口文件,通过显示/隐藏层达到显示不同内容的目的
index.htm.files  //文件夹
 |- js           //文件夹, 存放javascript文件
 |- data  //文件夹, 存放数据文件,xml格式
 |- styles  //文件夹, 存放样式文件,xsl格式
 |- images //文件夹
  - setting.xml  //配置文件,xml格式

2)文件清单,框架如下:
index.htm        //入口文件,使用frame
index.htm.files  //文件夹
 |- js           //文件夹, 存放javascript文件
 |- data  //文件夹, 存放数据文件,xml格式
 |- styles  //文件夹, 存放样式文件,xsl格式
  - setting.xml  //配置文件,xml格式
  - welcome.htm  //欢迎页
  - disp.htm  //显示简历
  - edit.htm  //编辑简历
  - set.htm  //设置/修改 密码,显示样式
两种思路各有优点,思路 1)不用解决页间传递参数的问题,思路2)整体结果更清晰,便于代码的管理扩展。
我采用思路 1),不用页间传递参数,程序比较稳定,客户端浏览器适应性强。这种思路中对div的使用类似于ASP.NET中的ASP:Panel 。

基于这样的框架设计,内容相关的信息保存在 xml文件里, 显示样式的信息记录在 xsl 文件中,很方便的就可以更换显示样式。代码的重用率很高。这一点可以在后面具体实现的过程中深切的体会到。这本身也是xml技术倡导的原则和明显优势 。

 

 

     

XML + XSL + JS 构建小型Web App (六)

xs:sequence>   xs:complexType>   xs:complexType name="技术专长元素类型">       xs:sequence>          xs:elem...
  • stationxp
  • stationxp
  • 2003年08月04日 10:09
  • 900

XML + XSL + JS 构建小型Web App (八)

根据schema文件,准备一份 xml  测试用文件, 存放 在 data 目录下record.xml履历列表 xmlns:xsi="http://www.w3.org/2001/XMLSchema-...
  • stationxp
  • stationxp
  • 2003年08月04日 10:10
  • 733

XML + XSL + JS 构建小型Web App (五)

Record.xsd的源代码: W3C Schema  作者:刘海龙 xiaoleilong@mail.biti.edu.cn-->xs:schema xmlns:xs="http://www.w3....
  • stationxp
  • stationxp
  • 2003年08月04日 10:09
  • 874

XML + XSL + JS 构建小型Web App (十四)

3. index.htm                           table{cellpadding:0;cellspacing:0;border-collapse:collapse;} ...
  • stationxp
  • stationxp
  • 2003年08月02日 18:42
  • 909

XML + XSL + JS 构建小型Web App (十三)

tr>                       th>技术专长th>                       td colspan="4">                          ...
  • stationxp
  • stationxp
  • 2003年08月04日 10:13
  • 1072

XML + XSL + JS 构建小型Web App (七)

xs:complexType>                 xs:sequence>                    xs:element name="项目经验元素" maxOccurs="...
  • stationxp
  • stationxp
  • 2003年08月04日 10:09
  • 762

XML + XSL + JS 构建小型Web App (十)

2. index.htm.files/styles/normal.xsl现在制作样式单文件,运行效果图:(美工没有规整,将就看 :))...
  • stationxp
  • stationxp
  • 2003年08月04日 10:12
  • 1090

XML + XSL + JS 构建小型Web App (二)

二 具体实现下面逐页介绍实现的过程1. index.htm.files/data/record.xml首先要决定的是存储数据的“数据结构”。和其他web app开发类似 , 一般是首先要作数据库建模,...
  • stationxp
  • stationxp
  • 2003年08月04日 10:09
  • 1215

XML + XSL + JS 构建小型Web App (四)

[ 反复报错,出离愤怒中!!!我也不想每篇分这么小。再次愤怒  ]图三 record.xsd 结构图细节2...
  • stationxp
  • stationxp
  • 2003年08月04日 10:09
  • 785

XML + XSL + JS 构建小型Web App (九)

  简历元素>             开始年月>                 年>2000年>                 月>9月>             开始年月>          ...
  • stationxp
  • stationxp
  • 2003年08月04日 10:10
  • 851
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:XML + XSL + JS 构建小型Web App (一)
举报原因:
原因补充:

(最多只允许输入30个字)