|
阅读：6108回复：0
平台页面自定义ss标签实现
需求描述：
在编写xhtml的时候，我们会引进一个ss标签库 <html xmlns:ss="http://www.sunsheen.cn/jfids/ui"> </html>，我们在使用ss标签库里面的标签时，都会加上ss <ss:viewPort layout="border"></ss:viewPort>那我们怎样自己编写一个类似ss这样的标签库？像这样 <!-- 使用我们自己的标签库ss1 --> <html xmlns:ss1="http://www.sunsheen.cn/jfids/ui/sstest" ></html>又怎样在标签库里面添加可以使用的标签？像这样 <!-- 使用我们自己的标签 --> <ss1:sstest src="http://www.baidu.com" title="123" region="center"> </ss1:sstest> 下面的例子描述了怎样自定义一个标签库，并在标签库里面添加标签 图片：图4.png 
开发步骤： 1.新建js（我的是sstest.js） // 继承一个panel,在afterRender方法里面填加iframe
JFUI.IMyPanel = JFUI.extend(JFUI.Panel, {
// 此方法在渲染后调用
afterRender : function(){
// 创建一个iframe
var iframeObj = document.createElement("iframe");
// 设置高度
iframeObj.width="100%";
// 设置宽度
iframeObj.height="100%";
// 设置边界线
iframeObj.style.border="0px";
// 设置路径
iframeObj.src=this.src;
// 将此对象添加到页面上
this.body.dom.appendChild(iframeObj);
// 调用父类panel的afterRender方法，渲染
JFUI.Panel.superclass.afterRender.call(this);
}
});
// 注册自定义panel，这样我们就可以用xtype获取到此对象
JFUI.reg('iframePanel', JFUI.IMyPanel);
2.新建java类（我的是Sstest.java） package com.sstest;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import javax.el.ELException;
import javax.faces.FacesException;
import javax.faces.component.UIComponent;
import com.sun.facelets.FaceletContext;
import com.sun.facelets.FaceletException;
import com.sun.facelets.tag.TagConfig;
import com.sunsheen.jfids.ui.functions.ConfigDefFunction;
import com.sunsheen.jfids.ui.tags.ATag;
// 注意继承ATag
public class Sstest extends ATag {
// 构造函数
public Sstest(TagConfig config) {
super(config);
}
public Object doApply(Map attMap, FaceletContext ctx, UIComponent parent)
throws IOException, FacesException, FaceletException, ELException {
// 将我们定义的控件放到map里面，第一个参数是固定的，第二参数是我们JFUI.reg('iframe // Panel', JFUI.IMyPanel)的第一个参数
attMap.put("xtype", "iframePanel");
// 引用我们的js
this.addScript("<script language=\"javascript\" src=\"com/sstest/sstest.js\"></script>");
if (!tagStack.get().isEmpty()) {
List items = ConfigDefFunction.getList(parentConfig.get(), "items");
ConfigDefFunction.addToList("items", attMap, items, 1);
}
return attMap;
}
}
3.复制和改造extjsf.taglib.xml 在extjsf.taglib.xml同级目录下新建我们自己的xml。 记住！必须是extjsf.taglib.xml的同级目录，extjsf.taglib.xml目录（WebRoot/WEB-INF/facelets/tags/extjsf.taglib.xml） extjsf名称可以随便改，但是必须以taglib.xml后缀结尾。 描述：extjsf.taglib.xml目录 图片：extjsf目录.png 
我自己新建了一个（sstest.taglib.xml） <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
<!-- 这里我们自定义一个名字 -->
<namespace>http://www.sunsheen.cn/jfids/ui/sstest</namespace>
<tag>
<!-- 标签名称 -->
<tag-name>sstest</tag-name>
<!-- 我们所编写的Java类路径 -->
<handler-class>
com.sstest.Sstest
</handler-class>
</tag>
</facelet-taglib>
4.新建页面（我的是sstest.xhtml） <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 第三行，我们引进我们自己在xml里面定义的名字，取一个别名叫ss1 -->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ss="http://www.sunsheen.cn/jfids/ui"
xmlns:ss1="http://www.sunsheen.cn/jfids/ui/sstest"
xml:lang="en" lang="en">
<ss:viewPort layout="border">
<!-- 使用我们自己的标签 -->
<ss1:sstest src="http://www.baidu.com" region="center"></ss1:sstest>
</ss:viewPort>
</html>这样我们就可以运行我们的xhtml了。
描述：效果图 图片：效果图.png  [best_for_ys于2016-04-08 00:06编辑了帖子]
|
|
|
