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来处理，造成每个组件都生成这段代码

2、每个组件都在生成<script>require([ "dojo/parser", ...... ]);</script>

避免重复生成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", component);
writer.writeAttribute("type", "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", "async: true, parseOnLoad: true", 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", target = "head"),
@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>

生成的textBoxTest.xhtml源代码

<!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>

可以看到最终页面上生成的代码优化了很多

下载代码