加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

JSF2.0实战 - 7、自定义<h:head>

发布时间:2020-12-16 21:27:35 所属栏目:百科 来源:网络整理
导读:在继续开发新的组件前,先把前面遇到的问题解决 接上篇,如果用IE访问,是这个样子 可以看到按钮不好看,这是因为生成的css是这样的路径:/dojo4j/faces/javax.faces.resource/dojo.css?ln=dojo/resources,这会导致css中的图片相对路径不正确,无法加载图片

在继续开发新的组件前,先把前面遇到的问题解决

接上篇,如果用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","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>


生成的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>


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


下载代码

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读