JSF2.0实战 - 7、自定义<h:head>
在继续开发新的组件前,先把前面遇到的问题解决 接上篇,如果用IE访问,是这个样子
可以看到按钮不好看,这是因为生成的css是这样的路径:/dojo4j/faces/javax.faces.resource/dojo.css?ln=dojo/resources,这会导致css中的图片相对路径不正确,无法加载图片,要解决这个问题,只有让css变成/dojo4j/faces/javax.faces.resource/dojo/resources/dojo.css才行。修改组件Renderer类中的@ResourceDependency,不用JSF建议的library="xxx",name="xxx"方式,而是只用name="xxx"。 修改代码为: @ResourceDependencies({ @ResourceDependency(name = "dojo/resources/dojo.css",target = "head"),@ResourceDependency(name = "dijit/themes/claro/claro.css",target = "head")}) 可以看到按钮加载了背景图片,要好看一些了。后面我们做的组件都会采用这种方式,即只用name,不用library。因为library除了在url后面生成一个?ln=xxx,几乎没什么用处。 下面处理这两个问题: 1、由于引用dojo.js的<script>标签要设置data-dojo-config属性,因此无法在Render类上加@ResourceDependency来处理,造成每个组件都生成这段代码 避免重复生成script代码最简单的解决方案就是自定义<h:head>标签,加载必需的代码,判断组件引用并过滤重复内容。这样做的好处是可以把必需引用的js文件写在head中,不需要每个组件再重复生成代码,缺点就是页面内不适合再用其他的js框架或JSF框架,那样容易引起冲突。
Head.java package org.dojo4j.component; import javax.faces.component.FacesComponent; import javax.faces.component.html.HtmlHead; @FacesComponent(Head.COMPONENT_TYPE) //直接继承JSF基础组件HtmlHead public class Head extends HtmlHead { public static final String COMPONENT_FAMILY = "dojo4j.component"; public static final String COMPONENT_TYPE = "dojo4j.component.head"; @Override public String getFamily() { return COMPONENT_FAMILY; } } HeadRenderer.java package org.dojo4j.component; import java.io.IOException; import java.util.ArrayList; import java.util.List; import java.util.Map; import javax.faces.component.UIComponent; import javax.faces.component.UIViewRoot; import javax.faces.context.FacesContext; import javax.faces.context.ResponseWriter; import javax.faces.render.FacesRenderer; import javax.servlet.http.HttpServletRequest; @FacesRenderer(componentFamily = Head.COMPONENT_FAMILY,rendererType = Head.COMPONENT_TYPE) //直接继承com.sun.faces.renderkit.html_basic.HeadRenderer,修改部分渲染代码 public class HeadRenderer extends com.sun.faces.renderkit.html_basic.HeadRenderer { @Override public void encodeEnd(FacesContext context,UIComponent component) throws IOException { HttpServletRequest request = (HttpServletRequest) context.getExternalContext().getRequest(); ResponseWriter writer = context.getResponseWriter(); //加入dojo.css引用,因为每个dojo组件都需要dojo.css支持,所以加到head里避免重复生成 writer.startElement("link",component); writer.writeAttribute("type","text/css",null); writer.writeAttribute("rel","stylesheet",null); writer.writeAttribute("href",request.getContextPath() + context.getExternalContext().getRequestServletPath() + "/javax.faces.resource/dojo/resources/dojo.css",null); writer.endElement("link"); //加入dojo.js引用,因为每个dojo组件都需要dojo.js支持,所以加到head里避免重复生成 writer.startElement("script","text/javascript",null); writer.writeAttribute("src",request.getContextPath() + context.getExternalContext().getRequestServletPath() + "/javax.faces.resource/dojo/dojo.js",null); writer.writeAttribute("data-dojo-config","async: true,parSEOnLoad: true",null); writer.endElement("script"); encodeHeadResources(context,component); writer.endElement("head");//writer.startElement("head");在父类的encodeBegin里 } private void encodeHeadResources(FacesContext context,UIComponent component) throws IOException { ResponseWriter writer = context.getResponseWriter(); List<String> requires = new ArrayList<String>(); //require加入必需的dojo/parser requires.add("dojo/parser"); UIViewRoot viewRoot = context.getViewRoot(); for (UIComponent resource : viewRoot.getComponentResources(context,"head")) { Map<String,Object> attributes = resource.getAttributes(); String name = (String) attributes.get("name"); //把引用的dojo库中的js文件,转换成require写法,不引入js文件 if (name.startsWith("dojo/") || name.startsWith("dijit/") || name.startsWith("dojox/")) { if (name.endsWith(".js")) { String path = name.substring(0,name.lastIndexOf(".")); if (!requires.contains(path)) requires.add(path); continue; } } resource.encodeAll(context); } //生成dojo require方式的代码 writer.startElement("script",component); writer.write("require(["); String tmp = ""; for (int i = 0; i < requires.size(); i++) { writer.write(tmp + """ + requires.get(i) + """); tmp = ","; } writer.write("]);"); writer.endElement("script"); } } faces-config.xml <component> <component-type>dojo4j.component.head</component-type> <component-class>org.dojo4j.component.Head</component-class> </component> dojo4j.taglib.xml <tag> <tag-name>head</tag-name> <component> <component-type>dojo4j.component.head</component-type> <renderer-type>dojo4j.component.head</renderer-type> </component> </tag> 修改TextBoxRenderer.java,删除下面这部分代码 // 引入dojo.js,因为要加入data-dojo-config属性,因此无法用@ResourceDependency方式,只能输入script标签,以后改用其他方式 writer.startElement("script",component); HttpServletRequest request = (HttpServletRequest) context.getExternalContext().getRequest(); writer.writeAttribute("src",request.getContextPath() + context.getExternalContext().getRequestServletPath() + "/javax.faces.resource/dojo/dojo.js",null); writer.writeAttribute("data-dojo-config",null); writer.endElement("script"); // 引入dijit/form/TextBox,略显啰嗦,以后改用其他方式 writer.startElement("script",component); writer.write("require([ "dojo/parser","dijit/form/TextBox" ]);"); writer.endElement("script"); 修改@ResourceDependencies为 @ResourceDependencies({ // 默认采用claro皮肤,以后再采取其他方式换肤 @ResourceDependency(name = "dijit/themes/claro/claro.css",@ResourceDependency(name = "dijit/form/TextBox.js",target = "head")}) 这样,组件共用的代码都放置在head中,避免每个组件重复编写代码 修改textBoxTest.xhtml,把<h:head>换成<d4j:head> <d4j:head> <meta charset="utf-8" /> <title>TextBox Test</title> </d4j:head>
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://java.sun.com/jsf/passthrough"> <head id="j_idt2"> <meta charset="utf-8" /> <title>TextBox Test</title> <link type="text/css" rel="stylesheet" href="/dojo4j/faces/javax.faces.resource/dojo/resources/dojo.css" /> <script type="text/javascript" src="/dojo4j/faces/javax.faces.resource/dojo/dojo.js" data-dojo-config="async: true,parSEOnLoad: true"></script> <link type="text/css" rel="stylesheet" href="/dojo4j/faces/javax.faces.resource/dijit/themes/claro/claro.css" /> <script type="text/javascript" src="/dojo4j/faces/javax.faces.resource/jsf.js?ln=javax.faces"></script> <script> require([ "dojo/parser","dijit/form/TextBox","dijit/form/Button" ]); </script> </head> <body class="claro"> <!-- 先用claro样式,以后换其他方式换肤 --> <form id="form1" name="form1" method="post" action="/dojo4j/faces/test/textBoxTest.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="form1" value="form1" /> <!-- prependId去掉JSF自动生成的ID前缀,如j_idt1,j_idt2... --> <input type="text" name="j_idt6" id="j_idt6" data-dojo-id="j_idt6" data-dojo-type="dijit/form/TextBox" /><input id="j_idt7" type="submit" name="j_idt7" value="Click Me" id="j_idt7" label="Click Me" data-dojo-id="j_idt7" data-dojo-type="dijit/form/Button" onclick="mojarra.ab(this,event,'action','@form','text');return false" /><span id="text"></span><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-2582773261651117086:1796796122005148629" autocomplete="off" /> </form> </body> </html> 可以看到最终页面上生成的代码优化了很多
下载代码 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |