Posts Tagged ‘标签’

web标准知识——用途相似的标签

星期三, 06月 4th, 2008

在前面我已经讲过了strong与emde区别.除了strong与em之外还有一些相似de标签比如q、cite、blockquote.这三个都属于引用一类,但是这里还是有一些区别de,首先来一一解释.
<q></q>,qde作用是引用非块元素,也就是引用不能形成段落de内容,可能是某人说de一句话,也可能是一句文档摘录等,特点很明显这里是“一句”.并且q本身并不会产生段落.q本身并没有什么样式,一般浏览器也不会给他设置一个默认样式使起突出.但是我可以通过CSS去使之与一般内容区分开.在q标签中还有一个属性是非常重要de,那就是cite.在这个cite属性值中主要是注明引用内容de出自何处,或是给出在线de地址.
<q cite=”http://andymao.com/andy/post/92.html”>这次de内容会让您更进一步de了解到关于段落里de细节</q>
要特别注意不要把q写成p,这两个标签很容易弄错.
在上一篇中其实已经谈到了cite,在那篇文章中我写到“这个标签只表注出文献de标题与名称.这个标签有点类似于我书籍后面de参考文献de目录内容,也有点像是脚注.”那么他与q之间de区别是什么呢?其实很容易理解,q是显示内容,而cite则是显示说这段内容de人名或是书名.cite与q常常混合起来使用.比如:
<cite>鲁迅</cite>先生说:<q>地上本来没有路,走得人多了,便有了路</q>.
那么blockquote与他们有什么区别呢?blockquote是块引用,XHTML允许其包含任何标签.而上面deq与cite则没有这么大de包容度.blockquotede使用是当需要引用一段或是多段内容时所采用de,浏览器一般默认处理会把引用内容缩进一些以与正常de段落文章区分开.当然我可以通过CSS样式来改变区分de形式.
在blockquote中有一个cite属性,与q一样是用来注明引用来源de.可以把联机文档deURL注明在其中.
在XHTML标签中还有一个叫prede标签,这个标签在Dreamweaver中被称为“格式化”,在以前使用Dreamweaver de时候我一直不清楚这个东西是作什么用de.一直到现在才清楚pre通常用以显示源相关代码,并且不支持能使段落分开de标签比如<p>,显示内容如需换行只要在源文件中换行即可无需要相关代码实现.同时pre会保留注其中de所有空格并显示出来.
一般来讲pre目前是多用于显示源相关代码,这与codede用途是相似de,所不同de是pre是块级de,而code是内联de.简单说,pre可以包括多行内容,而code只包含短小de一句或几个字符.
这里讲述de并不能完全说清楚,这就需要在看完文档后动手操作尝试一下,自行去发现其中de特别之处.有朋友说希望看到有关于CSS方面de知识.这里我想传达我de编写意图.我希望一步步来,让一些还没从表格布局脱离出来de朋友可以先行使用一些并不会影响整体de形式切入进去.因为一涉及CSS就可能会有兼容性问题,所以这里先说文档,然后再加入一些不影响整体布局deCSS知识.一步步de深入,最终能让阅读者从表格布局自然过渡到标准势力中来.当然有朋友已经通过自学de方式完成了这一步,那么可以到我de“杂谈标准”一栏中与我交流.

纯CSS实现标签导航制作

星期三, 06月 4th, 2008

在网上搜索了一下都没怎么看到纯用CSS制作标签导航方面de教程或者说明,大部分都是要涉及到JSde编写de.这对于很多CSS学习中de人来说实在有些不够体贴,既然没人做那我来先来试试!我在这里做deCSS标签导航是纯CSS无JS无背景图片de绿色导航.此文章适合初学者,高手可以路过,呵呵!
点击运行可以看到效果:
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]
[复制此相关代码]CODE:
.mainNav{
margin:0 20px;
height:47px;
border-bottom:2px solid #000;
}
ul{
margin:20px;
margin-bottom:0;
padding-left:20px;
list-style-type:none;
font-size:12px;
position:absolute;
}
ul li{
float:left;
margin-right:5px;
}
ul li a{
display:block;
width:100px;
line-height:25px;
text-align:center;
color:#999;
background-color:#FC0;
border:2px solid #000;
}
ul li a:hover{
height:27px;
background-color:#F60;
border-bottom:none;
}
#nav01 ul li a#nav001,
#nav02 ul li a#nav002,
#nav03 ul li a#nav003{
width:100px;
height:27px;
color:#FFF;
background-color:#F60;
border:2px solid #000;
border-bottom:none;
}
.con{
margin:0 20px;
padding:20px;
color:#FFF;
background-color:#F60;
border:2px solid #000;
border-top:none;
}

[复制此相关代码]CODE:
<div class=”mainNav”>
<div class=”mainNav”>
<ul>
<li><a href=”#” id=”nav001″>阿里满满01</a></li>
<li><a href=”#” id=”nav002″>阿里满满02</a></li>
<li><a href=”#” id=”nav003″>阿里满满03</a></li>
</ul>
</div>

其实这其中de关键点是ul中deposition:absolute命令,由于使用了这个CSS属性,ul导航de内容变成了层显示,就相当于浮在了浏览器上面.而为了不让下面de内容填补ul部分de内容,在ul外还套了个div,起到了帮助ul占位de作用.而这个div也同时起到了充当ul背景de作用,标签导航de关键就是底部border了.全看完之后您会发现其实很简单,但关键还是要有构思.好了!继续学习吧!

DIV CSS布局中不推荐使用的标签集合Dont Use These Tags

星期三, 06月 4th, 2008

做DIV CSS页面,不推荐使用de标签相关代码,请尽量不要使用这些HTML标签:
Do not use these html elements in html pages.
Presentational elements should not be used.
Support for some elements has been (or will be) deprecated; they should not be used.
Don’t Use These Tags
Presentational
[复制此相关代码]CODE:
b big
hr
i
small
sub
sup
tt
Deprecated
basefont
center
dir
font
isindex
menu
strike
u

Unsupported and Damaging in Practice
tfoot
Comments Log
Comment Log (newest first)

html label标签的使用教程

星期三, 06月 4th, 2008

在Dreamweaver8中,只要一加入表单或表单对象,文本框等等,就会在相关代码中加入一个<label></label>,一直没明白这个label是做什么de,今天正好看到了解释:
Label 中有两个属性是非常有用de,一个是FOR、另外一个就是ACCESSKEY了.
FOR属性
功能:表示Label标签要绑定deHTML元素,您点击这个标签de时候,所绑定de元素将获取焦点.
用法:<Label FOR=”InputBox”>姓名</Label><input ID=”InputBox” type=”text”>
ACCESSKEY属性:
功能:表示访问Label标签所绑定de元素de热键,当您按下热键,所绑定de元素将获取焦点.
用法:<Label FOR=”InputBox” ACCESSKEY=”N”>姓名</Label><input ID=”InputBox” type=”text”>
局限性:accessKey属性所设置de快捷键不能与浏览器de快捷键冲突,否则将优先激活浏览器de快捷键.
注释
要将 LABEL 绑定到其它de控件,请将 LABEL 元素de FOR 属性设置为与该控件de ID 相同.将 LABEL 绑定到控件de NAME 属性毫无用处.但是,要提交表单,您必须为 LABEL 元素所绑定到de控件指定NAME.
有两种方法给所指定de快捷键添加下划线.LABEL 元素de rich text 支持可以在 ACCESSKEY 属性所指定de快捷键字符两侧加上 U 元素.如果您更愿意使用样式表(CSS)来应用样式,可以将该字符包含在 SPAN 中,并设置样式为“text-decoration: underline”.
如果用户单击 LABEL,则会先触发 LABEL 上de onclick 事件,然后触发由 htmlFor 属性所指定de控件上de onclick 事件.按下 LABEL 设定de快捷键将设置焦点但并不触发 onclick 事件.
需要注意de地方:
1、标签不允许嵌套.
2、此元素在Internet Explorer 4.0 及以上版本de HTML 和脚本中可用.
3、此元素是内嵌元素.
4、此元素需要关闭标签.
元素示例相关代码
下面de例子使用了 LABEL 元素和 ACCESSKEY 属性设置文本框de焦点.
<LABEL FOR=”oCtrlID” ACCESSKEY=”1″>
<SPAN style=”text-decoration:underline;”>名字</SPAN>: <font color=”#999999″>按ALT 1到文本框</font>
</LABEL>
<INPUT TYPE=”text” NAME=”TXT1″ VALUE=”阿会楠” SIZE=”20″ TABINDEX=”1″ ID=”oCtrlID”>
演示:
点击运行可以看到效果:
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]

h1标签的使用技巧

星期三, 06月 4th, 2008

h1标签de正确使用可以达到seode目de,那么如何在使用h1标签de同时,又不失去原有de美观呢?事实上,正确使用h1标签,我既可以达到seode目de,也能达到美观de目de.大家都知道搜索引擎比较喜欢h1标签.在SEO中h1标签也是很基础也很重要de一步.但有些时候为了界面风格de原因,很多标题性de文字做成了图片.大多数情况下,切割页面de时候就直接用上了图片.在相关代码上,h1标签也就对搜索引擎失去了作用.
其实通过一点小de调整则可以将两者兼顾.我需要两张图片:
1
2
看看这段.h1标签对搜索引擎依然可读,我只是利用text-indent:-9999px;将“邀请好友加入”de文字远远de扔到左边去了.
[复制此相关代码]CODE:
<style>
.test{}
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; background:url(header.gif) no-repeat;}
.testbox{background:url(bg.gif); width:522px; height:323px;}
</style>
<div class=”test”>
<h1>邀请好友加入</h1>
</div>
<div class=”testbox”></div>

点击运行可以看到效果:
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]
h1标签还可以这样使用,当然您也可以对h1标签使用样式比如字体大小,字体颜色之类de,当然像上面例子,只是为了达到seode目de,就不需要使用样式对h1标签进行修改了,因为显示在用户面前de是一张图片.

在IE中为abbr标签加样式

星期三, 06月 4th, 2008

作者:JunChen 2005-5-24 9:56:57
原文:http://www.sovavsiti.cz/css/abbr.html
翻译:JunChen

版权:译者JunChen所有,转载请联系译者.
简介

<abbr>是用来为web页面上de简称(译者注:这里把简称和缩写分开而论,简称范围比缩写大,取首字母de缩写用<acronym>标签)添加适当标注deXHTML标签,WindowsdeIE浏览器暂不支持<abbr>标签. 在IE里,您可以应用CSS给<acronym>但是不能应用给<abbr>标签,IE会为<acronym>标签detitle属性显示提示,但是会忽略<abbr>标签.

这个IEdebug(或者特色)使得一些网站人员认为<abbr>标签一点用都没有,而显然这么认为是不对de.在Mozilla和Opera里还是很正确de处理了这个标签,并且它对于web内容de可读性和语义化来说非常重要.这也是我为什么一直在寻找解决方法,最终我找到了.

解决方法

本方法基于一个简单de事实:即使IE会忽略<abbr>标签,但是其他嵌套在<abbr>标签里de标签还是正常de.所以我在嵌了一个<span>标签在<abbr>里,设置<span>detitle和class属性,然后<abbr>开始变得和<acronym>标签一样了.

相关代码例子

看一下下面de相关代码,是一个简单de缩写词de例子:

<abbr title=”Cascading Style Sheets”>CSS</abbr>
现在,对比一下修改后de相关代码:

<abbr title=”Cascading Style Sheets”><span class=”abbr” title=”Cascading Style Sheets”>CSS</span></abbr>
自动操作

手动de给每一个<abbr>标签嵌入<span>显然不可能——既无聊又对Mozilla和Opera没必要.幸运de是,现在有一个自动de、基于客户端脚本de解决方法.

您可能注意到了,这个页面(译者注:原作者de页面)上de简写词语即使在IE里都会有提示,并且加了CSS样式(虚下划线和一个问号状de鼠标光标).然而您如果看一下源相关代码,您将找不到在上文提到de<span>标签.这得益于本页加载de一个简单deJavaScript:

function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
newBodyText = oldBodyText.replace(reg, ‘<ABBR $1><SPAN class=\”abbr\” $1>$2</SPAN></ABBR>’);
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
styleAbbr()
};

isIE = (document.all) ? true:false;

这段脚本会检查客户端浏览器,如果是IE,那么则替换所有de<abbr>标签为修改过de版本(嵌入了<span>).注意de是我必须使用正则表达式和innerHTML属性来取代标准deDOM方法,因为IE不能通过DOM来获取<abbr>属性.

样式化

最后看一下这个页面上使用deCSS.相当简单:

abbr, acronym, span.abbr {
cursor: help;
border-bottom: 1px dashed #000;
}
Mozilla和Opera使用abbr和acronym属性选择器,IE则使用acronym和span.abbr.无论如何,<abbr>和<acronym>都被样式化了——一个问号状de鼠标光标(当鼠标指上后)和虚下划线.

其他

1.感谢Michael Kusyn提供了JavaScript解决方法.
2.更多关于<abbr>,<acronym>标签和两者de区别,参考Craig SailadeHTML is not an acronym… (Evolt.org)

欢迎交流意见评论,可以发邮件至marek@sovavsiti.cz.

用定制标签库和配置文件实现对JSP页面元素的访问控制

星期一, 06月 2nd, 2008

控制客户端访问是开发一个基于B/Sde架构de系统de开发者必须考虑de问题.JSPSERVLET规范de基于配置文件de安全策略对资源de控制是以文件为单位de,即只可以定义某个视图全部可以或全部不能被访问.一个比较复杂de系统往往要要求对视图de一部分(如JSP页面里de一个按钮)提供访问控制,只允许被某种角色de用户访问.如果采用可编程de安全策略,因为对用户角色和操作de定义在开发时不能定义,而且这种策略加大了程序员de工作量,它可能不是一种好de办法.

我采用定制标签库和和配置文件来解决这个问题:把要权限控制deJSP页面元素如BUTTON,作为标签de内容.为受保护de内容起一个唯一de名称,把这个名称作为标签de一个属性.某个角色对某个页面元素或一组页面元素是否有权限,在XML配置文件中描述.

例如,下面deJSP页面有“详细”和“修改”两个按钮.

<%@ taglib uri=”http://mytag” prefix=”custTag” %>

<html>

<head>

<title>test</title>

</head>

<body >

<form name=”form1″ >

<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”2″ >

<tr>

<td>

<custTag:JspSecurity elementName=”employeedetail” >

<input type=”button” name=”detail” value=”详细” >

</custTag:JspSecurity>

<custTag:JspSecurity elementName=”employeemodify” >

<input type=”button” name=”modify” value=”修改” >

</custTag:JspSecurity>

</td>

</tr>

</table>

<br>

</form>

</body>

下面XML配置文件内容表示对角色为commonde用户,只对名为employeedetail de页面元素即“详细”按钮有权限,对角色为“admin”de用户,对名为employeedetail employeemodifyde页面元素即两个按钮都有权限.

<?xml version=”1.0″ encoding=”GB2312″?>

<security>

<htmlElement name=”employeedetail” >

<roleName name=”common” />

<roleName name=”admin” />

</htmlElement>

<htmlElement name=”employeemodify” >

<roleName name=”admin” />

</htmlElement>

</security>

定制标签类JspSecurityTag继承了BodyTagSupport类.BodyTagSupport有一个变量bodyContent指向起始标志和结束标志之间de内容.JspSecurityTagde私有静态变量roleList保存从XML文件中取到角色和页面元素de对应集合,私有变量ElementName对应页面元素de名称.当解析该定制标签时,首先先取到页面元素de名称,再取到当前用户de角色,如果角色有该页面元素de权限,就显示标签正文(即页面元素),否则不显示.

Pagekage com.presentation.viewhelper.JspSecurityTag;

import javax.servlet.jsp.tagext.*;

import javax.servlet.jsp.*;

import java.util.*;

import org.xml.sax.*;

import org.xml.sax.helpers.*;

import org.w3c.dom.*;

import java.io.*;

import javax.xml.parsers.*;

public class JspSecurityTag extends BodyTagSupport {

//保存从XML文件中取到角色和页面元素de对应集合

private static ArrayList roleList;

//页面元素de名称

private String elementName;

public void setElementName(String str)

{

this.elementName=str;

}

public int doAfterBody() throws JspException{

if(roleList==null)

{

roleList=getList();

}

try{

//如果认证通过就显示标签正文,否则跳过标签正文,就这么简单

if(isAuthentificated(elementName))

{

if(bodyContent != null){

JspWriter out=bodyContent.getEnclosingWriter();

bodyContent.writeOut(out);

}else

{

}

}

}catch(Exception e){

throw new JspException();

}

return SKIP_BODY;

}

//XML配置文件中取到角色和页面元素de对应,保存到静态deArrayList

private ArrayList getList()

{

DocumentBuilderFactory dbf =

DocumentBuilderFactory.newInstance();

DocumentBuilder db = null;

Document doc=null;

NodeList childlist = null;

String elementName;

String roleName;

int index;

ArrayList theList = new ArrayList();

try{

db = dbf.newDocumentBuilder();

}catch(Exception e)

{

e.printStackTrace();

}

try{

doc = db.parse(new File(”security.xml”));

}catch(Exception e)

{

e.printStackTrace();

}

//读取页面元素列表

NodeList elementList = doc.getElementsByTagName(”htmlElement”);

for(int i=0;i<elementList.getLength();i )

{

Element name = ((Element)elementList.item(i));

//页面元素de名称

elementName = name.getAttribute(”name”);

//该页面元素对应de有权限de角色de列表

NodeList rolNodeList = ((NodeList)name.getElementsByTagName(”roleName”));

for(int j=0;j<rolNodeList.getLength();j )

{

//有权限de角色de名称

//roleName = ((Element)rolNodeList.item(j)).getNodeValue();

roleName = ((Element)rolNodeList.item(j)).getAttribute(”name”);

theList.add(new ElementAndRole(elementName,roleName));

}

}

return theList;

}

//检查该角色是否有该页面元素de权限

private boolean isAuthentificated(String elementName)

{

String roleName = “”;

//在用户登陆时把该用户de角色保存到SESSION中,这里只是直接从SESSION中取用//户角色.

roleName=this.pageContext.getSession().getAttribute(”rolename”);

// roleList包含elementName属性为elementName,roleName属性为roleNamede//ElementAndRole对象,则该角色有该页面元素de权限

if(roleList.contains(new ElementAndRole(elementName,roleName)))

{

return true;

}

}

return false;

}

//表示角色和页面元素de对应de关系de内部类

class ElementAndRole{

String elementName;

String roleName;

public ElementAndRole(String elementName,String roleName)

{

this.elementName=elementName;

this.roleName=roleName;

}

public boolean equals(Object obj)

{

return(((ElementAndRole)obj).elementName.equals(this.elementName)&&((ElementAndRole)obj).roleName.equals(this.roleName));

}

}

}

在标签库能被JSP页面使用前,要做以下三个步骤

1、 JSP页面中包括一个taglib元素,确定需要加载到内存de标签库.前面deJSP文件de第一行:<%@ taglib uri=”http://mytag” prefix=”custTag” %>做de就是这件事.

2、 在配置文件web.xml中使用taglib元素确定TLD文件de位置.在web.xml中增加:

<taglib>

<taglib-uri>http://mytag</taglib-uri>

<taglib-location>

/WEB-INF/mytag.tld

</taglib-location>

</taglib>

3TLD文件必须使用taglib元素标识每个定制标签极其属性.

下面是使用这个标签库对应deTLD文件

<?xml version=”1.0″ encoding=”ISO-8859-1″ ?>

<!DOCTYPE taglib

PUBLIC “-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN”

“http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd”>

<taglib>

<tlibversion>1.0</tlibversion>

<jspversion>1.1</jspversion>

<shortname>myTag</shortname>

<uri/>

<tag>

<name>JspSecurity</name>

<tagclass>com.presentation.viewhelper.JspSecurityTag</tagclass>

<info>

JspSecurityTag

</info>

<attribute>

<name>elementName</name>

<required>true</required>

<rtexprvalue>true</rtexprvalue>

</attribute>

</tag>

</taglib>

提取HTML标签

星期一, 06月 2nd, 2008

<?php
/*********************************
*
* 作者: 徐祖宁 (唠叨)
* 邮箱: czjsz_ah@stats.gov.cn
* 开发: 2002.07
*
*
* 函数: tags
* 功能: 从文件中提取HTML标签
*
* 入口:
* $filename 文件名
* $tag 标签名
* 返回:
* 数组,每项为:
* tagName String
* Text String
* Attrs Array
*
* 示例:
* print_r(tags("test1.htm","a"));
* print_r("http://localhost/index.htm","img");
*
*/
function tags($filename,$tag) {
$buffer = join("",file($filename));
$buffer = eregi_replace("\r\n","",$buffer);
$tagkey = sql_regcase($tag);
$buffer = eregi_replace("<$tagkey ","\n<$tag ",$buffer);
$ar = split("\n",$buffer);
foreach($ar as $v) {
if(! eregi("<$tagkey ",$v)) continue;
eregi("<$tagkey ([^>]*)((.*)</$tagkey)?",$v,$regs);
$p[tagName] = strtoupper($tag);
if($regs[3])
$p[Text] = $regs[3];
$s = trim(eregi_replace("[ \t] "," ",$regs[1]))." ";
$s = eregi_replace(" *= *","=",$s);
$a = split(" ",$s);
for($i=0;$i<count($a);$i ) {
$ch = array();
if(eregi("=[\"']",$a[$i])) {
$j = $i 1;
while(!eregi("[\"']$",$a[$i])) {
$a[$i] .= " ".$a[$j];
unset($a[$j]);
}
}
}
foreach($a as $k) {
$name = strtoupper(strtok($k,"="));
$value = strtok("\0");
if(eregi("^[\"']",$value))
$value = substr($value,1,-1);
if($name)
$p[Attrs][$name] = $value;
}
$pp[] = $p;
}
return $pp;
}
?>

PHP.MVC的模板标签系统(五)

星期一, 06月 2nd, 2008

建立模板标签系统应用程序

建立模板标签系统应用程序只需几个步骤.
注意:以下步骤假设使用了新deSleeK例子应用程序(这个例子可以在www.phpmvc.net上找到).

修改应用程序deboot.ini文件

应用程序deboot.ini文件包含需要得到PHP.MVC框架de信息.boot.ini文件通常位于应用程序de”WEB-INF”目录下.为了设置应用程序使用模板标签类,我需要在boot.ini文件中定义一些属性.

TagActionDispatcher类

TagActionDispatcher是ActionDispatcher类de标准实现.为了让框架能读取TagActionDispatcher类,我为变量$appServerRootDir设置值为’TagActionDispatcher’:
// Setup the application specific ActionDispatcher (RequestDispatcher)
$actionDispatcher = ‘TagActionDispatcher’;

模板标签系统库根目录

我也需要设置路径指向我dePHP.MVC库(需要文件系统de绝对路径):
// Set php.MVC library root directory (no trailing slash).
$appServerRootDir = ‘C:\WWW\phpmvc-base’;

可选设置

应用程序定时器可以使用$timerRun属性来设置开或关:
// Timer reporting. 1=on, 0=off
$timerRun = 1;
还可以指导框架总是(强制)编译应用程序phpmvc-config.xml配置类(最好用在开发阶段,因为会比较慢),我使用:
// The application XML configuration data set:
$appXmlCfgs = array();
$appXmlCfgs['config'] = array(’name’=>’phpmvc-config.xml’, ‘fc’=>True);
或者仅在phpmvc-config.xml文件被修改de时候重新编译应用程序配置文件(在开发完成后使用此项设置,速度快),我使用:
// The application XML configuration data set:
$appXmlCfgs = array();
$appXmlCfgs['config'] = array(’name’=>’phpmvc-config.xml’, ‘fc’=>False);

设置应用程序模板目录

当为模板标签应用程序设置模板目录时,我需要去创建一个目录(和子目录),放置我de应用程序模板文件.这个目录必须被命名为在View资源配置类de$tplDir属性所定义de值,默认是’./WEB-INF/tpl’.比如:例子应用程序有一个模板目录结构设置像这样:
- PhpMVC-Tags
Index.html
Main.php
WEB-INF
tpl
pageFooter.ssp
pageHeader.ssp
salePageBody.ssp
sale
pageContent.ssp
我也需要去创建目录放置编译de页面.这个目录必须被命名为在View资源配置类de$tplDirC属性所定义de值.默认是’./WEB-INF/tpl_C’.例子应用程序有一个模板目录结构设置像这样:
PhpMVC-Tags
Index.html
Main.php
WEB-INF
tpl

sale

tpl_C
pageFooter.sspC
pageHeader.sspC
salePageBody.sspC
sale
pageContent.sspC
注意我也需要在’./WEB-INF/tpl_C’下创建sale目录.

设置PHP.MVC库de路径和包含

检查以下路径设置已经被定义在GlobalPaths.php和globalPrepend.php文件在您de框架安装目录下de”/WEB-INF”目录下:
GlobalPaths.php
————————————————
$appDirs[] = ‘WEB-INF/lib/phpmvc_tags’;

globalPrepend.php
————————————————
include_once ‘PhpMVC_Tags.php’;
如果他们没有在添加到路径里,那么就定义这些变量.

安装PHP.MVC库

下载最新版dePHP.MVC库:http://www.phpmvc.net/download/cvsIdx.php?doc=cvs-snaps
解压库文档到一个目录.修改上面所描述过de路径设置和包含设置.

运行例子应用程序

下载例子应用程序.完整de例子相关代码文件和这个向导都能在这里下载:http://www.phpmvc.net/download/rel/phpmvc-tags-v1.0.zip
解压到web服务器目录中.可能像这样:C:/WWW/PhpMVC-Tags
修改应用程序和框架设置.
为了测试例子程序,需要浏览器例子程序de首页:http://localhost/PhpMVC-Tags/Index.html


附录A:ViewResources配置类

ViewResourcesConfig类表现了<view-resource>元素de配置信息.
下表列出了ViewResourcesConfig类de属性,条目描述和默认值:

Name Description Default Value
$appTitle The application title ‘My Web Application’
$appVersion The application version ‘1.0′
$copyright The copyright notice ‘Copyright C YYYY My Name. All rights reserved.’
$contactInfo The contact information ‘webmaster@myhost.com’
$processTags Do we run the template engine processor (boolean) False
$compileAll Force compile pages (boolean) False
$tagL The left tag identifier ‘<@’
$tagR The right tag identifier Tags: , , , , , , , , , , , , ,
Posted in PHP编程 | No Comments »

PHP.MVC的模板标签系统(四)

星期一, 06月 2nd, 2008

页面布局

在这个单元中我将看到如何使用模板标签系统构造一个标准de模板页面.这个例子我使用了一个简单deHTML页面布局,请看下图:

页面布局

这个页面有多个标准单元组成,就像页面设计者和开发者熟悉de那样.这个页面de主体由3个包含de单元组成:页眉,页内容主体和页脚.我现在就看看这些单元并且了解如何使用模板标签系统来实现.

页主体

下面de相关代码单元显示de是主体:
The Page Body Layout
1
<@ saleMonth = data.getValueBean(’SALE_MONTH’) @>
<@ saleTitle = data.getValueBean(’SALE_TITLE’) @>
<@ dealHeading = data.getValueBean(’DEAL_HEADING’) @>
<@ salesAreaID = “Central District” @>

<html>
<head>
<link rel=’stylesheet’ type=’text/CSS‘ href=”./style/pageStyles.css”/>
<title>
2 <@ =viewConfig.getAppTitle @>
</title>
</head>
<body>

<table class=’pageLayoutTable’>

<!– PAGE HEADER –>
<tr>
<td class=’pageHeader’>
<!– including the page header component –>
<!– The base template base directory is “./tpl” –>
3 <@ include ‘pageHeader.ssp’ @>
</td>
</tr>

<!– PAGE CONTENTS –>
<tr valign=’top’>
<td class=’pageContent’>
<!– including the page contents component –>
4 <@ include ’sale/pageContent.ssp’ @>
</td>
</tr>

<!– PAGE FOOTER –>
<tr>
<td class=’pageFooter’>
<!– including the page footer omponent –>
5 <@ include ‘pageFooter.ssp’ @>
</td>
</tr>
</table>

</body>
</html>

1:页声明
第一个有趣de条目是页顶部de页声明(1).我在页面开始声明了这些变量,因此这些变量将能在下面de页面和像页眉那样de包含页所使用.
2:页标题
下一步我使用表达式来初始化页面标题(2).这个值能够从配置文件中view-resources元素利用ViewResourcesConfig->getAppTitle来得到:
<view-resources
appTitle = “Flash Jacks’ Sleek Tab Site”

</view-resources>
3:页眉
页眉是下一个有趣de条目(3).在这里我使用包含指令来插入页眉模板文件到页主体中.我将在下一个子单元中来看一看页眉.
我仅仅使用了页面直接去读取页眉,不论页de组件存储在哪里.这是一个好机会来介绍模板标签系统de目录设置.默认情况下,模板目录布局如下所示(注意这些路径相对于我de应用程序):
The Default PhpMVC_Tags Template Directory Layout Paths (relative)
The Template Files ‘./WEB-INF/tpl’
The Compiled Template Files ‘./WEB-INF/tpl_C’
如果需要de话我可以在配置文件deview-resources结点来重新定义他们,就像这样:
<view-resources

tplDir = “./WEB-INF/tpl-admin”
tplDirC = “./WEB-INF/tpl_admin_C”

</view-resources>
4:页内容主体
这是另外一个包含指令被用来插入模板文件(4)到主体中.注意包含de文件位于模板目录desales子目录中:
“./WEB-INF/tpl/sale/pageContent.ssp”
5:页脚
又是一个包含指令,就像页眉一样.

页眉单元

在这个例子中页眉模板文件(’pageHeader.ssp’)只是一个简单de单元,就像这样:
<!– Page Header –>
<span>
<@ =viewConfig.getAppTitle @>
</span>
当主体页面(包括包含de页面)被编译de时候,页眉de表达式被转换成下面这样:
<!– Page Header –>
<span>
<?php print $viewConfig->getAppTitle(); ?>
</span>
被编译de页面被存储在编译模板目录中,就像上面所说de,默认de编译模板目录是:
‘./WEB-INF/tpl_C’

页内容主体单元

页内容主体模板文件有一点复杂.文件(’sale/pageContent.ssp’)内容显示如下:

1
<@ item1=data->getValueBean(”ITEM_1″) @>
<@ products=data->getValueBean(”PRODUCTS_ARRAY”) @>

2
<h4><@=dealHeading @> <@=saleMonth @></h4>

3
<b>Clearance deals</b>
<table class=’productsTable’>
<tr>
<td class=’prodItemDesc’>
<@ =item1.getName @>
</td>
<td class=’prodItemValue’>
<@ =item1.getCost @>
</td>
</tr>
</table>

4
<b>Todays specials</b>
<table class=’productsTable’>
<?php foreach($products as $item) { ?>
<tr>
<td class=’prodItemDesc’>
<@ =item.getName @>
</td>
<td class=’prodItemValue’>
<@ =item.getCost @>
</td>
</tr>
<?php } ?>
</table>

<b>Our Staff at Your Service</b>

5
<table class=’productsTable’>
<tr>
<td class=’prodItemDesc’>
<b>Area Manager: </b>
</td>
<td class=’prodItemDesc’>
<@ =viewConfig.getAreaManager @>
</td>
</tr>

</table>
1:一些更多de声明
在页面顶部所显示de额外声明(1)能让我声明页变量以便下面能够使用.在内容被处理之后,这些声明将在编译后像下面这样显示:
<?php $item1=$data->getValueBean(”ITEM_1″); ?>

<?php $products=$data->getValueBean(”PRODUCTS_ARRAY”); ?>
2:使用表达式来显示内容单元标题
现在我使用两个表达式(2)来显示内容单元de标题.注意我声明这些变量是”全局”变量在主页面de顶部.处理完后,表达式将转换这些相关代码,就像这样:
<?php print $dealHeading; ?> <?php print $saleMonth; ?>
当页面被显示到用户de浏览器中,内容单元de标题看起来就像这样:
Jack’s Super Deals for : May 2010.
3:使用表达式来显示一些数据条目
现在我能显示一些实际de数据(3).在这个页内容主体单元中我访问一些在PhpMVCTabAction类deActionObject中de产品条目数据.一个简化版dePhpMVCTabAction类在下面展示:
class PhpMVCTabAction extends Action {

function execute($mapping, $form, &$request, &$response) {
// Our value bean container
$valueBeans =& new ValueBeans();

// Define some strings we need on our View template page
// These could be defined globally in the phpmvc-config.xml file.
// See: ExtendedController example.
$appTitle = “Flash Jack’s Include Page”;
$saleMonth = “May 2010″;
$saleTitle = “Flash Jack’s Super Sale”;
$dealHeading = “Jack’s Super Deals for :”;

// Save the string variables to our Value object
$valueBeans->addValueBean(’APP_TITLE’ , $appTitle);
$valueBeans->addValueBean(’SALE_MONTH’ , $saleMonth);
$valueBeans->addValueBean(’SALE_TITLE’ , $saleTitle);
$valueBeans->addValueBean(’DEAL_HEADING’ , $dealHeading);

// Some float values we could receive from a database query
// Note: The prices are formatted in the Products class constructor.
// Eg: “$ n,nnn.nn”
$price1 = 125.00;

// Setup some clearance deals (individual object instances):
// Note: The Product class file was included in our local prepend.php file
$item1 = new Product(’Super Duper’, $price1);

$valueBeans->addValueBean(’ITEM_1′, $item1);

// Todays specials (array of object instances)
$products = array();
$products[] = new Product(’Gooses Bridle’, $price3);

$valueBeans->addValueBean(’PRODUCTS_ARRAY’, $products);

// Our staff
$staff1 =& new Staff(’Bruce’, ‘Sales’, ‘Karate’);

$valueBeans->addValueBean(’STAFF_1′, $staff1);

// Save the Value object
$this->saveValueObject($request, $valueBeans);
在上面de相关代码中,我能看到$item1被创建并被保存成ActionObjectdevalueBeans条目.Bean数据条目现在能在模板页面中被重新获得:
<@ item1=data->getValueBean(”ITEM_1″) @>
我可以像下面那样显示条目de值:
<@ =item1.getName @>

<@ =item1.getCost @>
4:显示数组
我也可以直接使用一些PHP相关代码在我de模板页上.在这个分离deMVC模式中,我应该仅在这里编写相关代码去操纵这些通过ActionObject和ViewResourcesConfig实例(可能我de自定义Bean也可以)提供de数据.在上面de也内容单元(’sale/pageContent.ssp’)中,我使用一个PHPdeforeach语法(4)来循环读取$products数组.我能在上面dePhpMVCTabAction类中看到$products数组被创建并被保存在ActionObject中,就和上面de$item1 Bean相似.在foreach循环中我能使用表达式来显示产品数据:
<?php foreach($products as $item) { ?>
<tr>
<td class=’prodItemDesc’>
<@ =item.getName @>
</td>
<td class=’prodItemValue’>
<@ =item.getCost @>
</td>
</tr>
<?php } ?>
5:显示ViewResourcesConfig属性
最后我从view-resources元素所定义deViewResourcesConfig属性来显示”Area Manager”(5)在我de内容页:
<view-resources
appTitle = “Flash Jacks’ Sleek Tab Site”

className = “MyViewResourcesConfig”>

<!– We can set some properties on our custom ViewResourcesConfig class –>
<set-property property=”areaManager” value=”Joe J. Blogs Esq.”/>
</view-resources>
但是注意在这个例子中我使用了一个继承ViewResourcesConfig类de对象(MyViewResourcesConfig)来设置一些自定义de属性.我定义了一个扩展ViewResourcesConfig类de对象,在配置文件里使用className=”MyViewResourcesConfig”属性,并且MyViewResourcesConfig类定义在文件”MyViewResourcesConfig.php”中.MyViewResourcesConfig类(classes/MyViewResourcesConfig.php)实现了setter/getter方法去处理自定义属性(”areaManager”),这个属性我在view-resources结点中定义:
class MyViewResourcesConfig extends ViewResourcesConfig {

// —– Properties —————————————————– //

var $areaManager = ”;

function getAreaManager() {
return $this->areaManager;
}

function setAreaManager($areaManager) {
$this->areaManager = $areaManager;
}
我现在能使用表达式在我de页面上实现”Area Manager”了:
<@ =viewConfig.getAreaManager @>
注意:在真实de应用程序中数据能从关系型数据库中得到.

页脚单元

页脚单元和上面讨论过de页眉单元de处理相类似.页脚模板文件(’tpl/pageFooter.ssp’)就像这样:
<!– Page Footer –>
<span>
<@ =viewConfig.getCopyright @>
</span>
当主体页面(包括包含de页面)被编译,在页脚中de表达式被转换成下面这样:
<!– Page Footer –>
<span>
<?php print $viewConfig->getCopyright(); ?>
</span>
编译de页眉页面被存储在编译模板目录.默认de编译模板目录是:
‘./WEB-INF/tpl_C’