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

最新推荐文章于 2024-09-13 23:32:49 发布

xixixi9988

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量2.8k

点赞数

文章标签： jsf jsf2.0 框架前端 dojo

本文链接：https://blog.csdn.net/xixixi9988/article/details/25046399

版权

本文主要介绍了在JSF2.0开发中，由于IE浏览器下CSS路径错误导致的按钮样式问题。通过修改组件Renderer类中的@ResourceDependency，只使用name属性，解决了CSS资源加载失败的问题。同时，为了避免重复生成<script>标签，作者提出自定义<h:head>标签的方法，集中处理必需的代码引用，减少组件间的重复，并给出了Head.java的相关实现代码。

摘要由CSDN通过智能技术生成

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

接上篇，如果用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_FAM