Facelet学习(1) Facelet tag和ui composition标签
Facelet学习(一) Facelet tag和ui composition标签
一.Facelet tag和ui composition
如果要使用自己的tag, 那么先要在某个地方注册, docbook里面提到可以在一个jar包的meta-inf目录里面放入 *.taglib.xml文件, 或者在web.xml里面注册. 我现在没有打jar包, 所以先试试往web.xml加. 加上以后,就要对应的写tag了. facelet的tag不一定就是java类, 呵呵,我一开始也没有转过弯来,其实它的tag可以是另外一个xhtml文件,嗯嗯, 好. 完了就可以真正写一个xhtml, 调用这个tag来使用定义好的模板.
首先, 在web.xml开头加上:
<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>/WEB-INF/facelet-taglibs/echo.taglib.xml</param-value>
</context-param>
要注意的是, 这些tag的模板要在/WEB-INF目录下面, 我就试过放在应用的顶级目录pages里面, 结果测试一直显示空白, 因为facelet找不到我定义的tag
然后是开始定义这个tag, 建立/WEB-INF/facelet-taglibs/echo.taglib.xml
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://www.myfaces.com/facelets/tags</namespace>
<tag>
<tag-name>tree2</tag-name>
<source>../../tree2.xhtml</source>
</tag>
<tag>
<tag-name>datatable</tag-name>
<source>../../datatable.xhtml</source>
</tag>
</facelet-taglib>
注意的是, <source>tpl/echo.xhtml</source>, source标明的文件也要在WEB-INF里面.namespace可以随便命名, 这是给后来引用的.
最后是/pages/myecho.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:tutorial="http://tutorial.facelets">
<body>
<tutorial:echo msg="#{param.message}"/>
</body>
</html>
ui composition
在web.xml添加context-param:
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
这里我们可以看到，我们之后使用的都将是xhtml而不是传统的jsp。
在faces-config.xml里面声明view-handler：
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
那么当我们使用导航规则<navigation-rule>的时候，就会导航到.xhtml页面了。
Ok，配置完成。
二.如何使用facelet？
facelet布局强大的地方就是使用了模板，这个模板是一个xhtml文件，我们需要在这个xhtml里面设置一些<ui:insert>，例如我们先建一个template.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns=http://www.w3.org/1999/xhtml
xmlns:ui="http://java.sun.com/jsf/facelets">
<head><meta> http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title><ui:insert name="title">这里我们填写默认title</ui:insert></title>
</head>
<body>
Hi,facelet<br/>
<ui:insert name="content"></ui:insert>
<body>
</html>
这个xhtml很容易理解，首先设置xmlns命名空间，就是jsp的<@taglib>，ui就相当于<@taglib>的prefix，值就相当于<@taglib>的uri。我们使用到了facelet的<ui:insert>标签。这个标签表示使用这个模板的页面需要扩展的位置，位置名就是name属性的值啦。如果使用模板的页面没扩展这个位置，那么就使用默认值。
好，编写使用这个模板的页面composition.xhtml：
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns=http://www.w3.org/1999/xhtml
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="template.xhtml">
<ui:define name="content"><h:outputText value="我们在这里扩展content啦" /></ui:define >
</ui:composition>
<body>
</html>
这个页面你可以看到我添加了JSF的自定义标签声明，也就相当于声明了<@taglib>。
然后ui:composition的template属性选择调用那个模板，ui:define的那么属性选择扩展哪个位置。
在这个页面，我没有扩展title位置，仅仅扩展了content位置，然后输出h:outputText的值。
Ok，测试一下，运行项目，然后去到composition.xhtml。
我们会看到页面的title显示“这里我们填写默认title”
页面里面则显示：
Hi,facelet
我们在这里扩展content啦
一.Facelet tag和ui composition
如果要使用自己的tag, 那么先要在某个地方注册, docbook里面提到可以在一个jar包的meta-inf目录里面放入 *.taglib.xml文件, 或者在web.xml里面注册. 我现在没有打jar包, 所以先试试往web.xml加. 加上以后,就要对应的写tag了. facelet的tag不一定就是java类, 呵呵,我一开始也没有转过弯来,其实它的tag可以是另外一个xhtml文件,嗯嗯, 好. 完了就可以真正写一个xhtml, 调用这个tag来使用定义好的模板.
首先, 在web.xml开头加上:
<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>/WEB-INF/facelet-taglibs/echo.taglib.xml</param-value>
</context-param>
要注意的是, 这些tag的模板要在/WEB-INF目录下面, 我就试过放在应用的顶级目录pages里面, 结果测试一直显示空白, 因为facelet找不到我定义的tag
然后是开始定义这个tag, 建立/WEB-INF/facelet-taglibs/echo.taglib.xml
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://www.myfaces.com/facelets/tags</namespace>
<tag>
<tag-name>tree2</tag-name>
<source>../../tree2.xhtml</source>
</tag>
<tag>
<tag-name>datatable</tag-name>
<source>../../datatable.xhtml</source>
</tag>
</facelet-taglib>
注意的是, <source>tpl/echo.xhtml</source>, source标明的文件也要在WEB-INF里面.namespace可以随便命名, 这是给后来引用的.
最后是/pages/myecho.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:tutorial="http://tutorial.facelets">
<body>
<tutorial:echo msg="#{param.message}"/>
</body>
</html>
ui composition
在web.xml添加context-param:
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
这里我们可以看到，我们之后使用的都将是xhtml而不是传统的jsp。
在faces-config.xml里面声明view-handler：
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
那么当我们使用导航规则<navigation-rule>的时候，就会导航到.xhtml页面了。
Ok，配置完成。
二.如何使用facelet？
facelet布局强大的地方就是使用了模板，这个模板是一个xhtml文件，我们需要在这个xhtml里面设置一些<ui:insert>，例如我们先建一个template.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns=http://www.w3.org/1999/xhtml
xmlns:ui="http://java.sun.com/jsf/facelets">
<head><meta> http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title><ui:insert name="title">这里我们填写默认title</ui:insert></title>
</head>
<body>
Hi,facelet<br/>
<ui:insert name="content"></ui:insert>
<body>
</html>
这个xhtml很容易理解，首先设置xmlns命名空间，就是jsp的<@taglib>，ui就相当于<@taglib>的prefix，值就相当于<@taglib>的uri。我们使用到了facelet的<ui:insert>标签。这个标签表示使用这个模板的页面需要扩展的位置，位置名就是name属性的值啦。如果使用模板的页面没扩展这个位置，那么就使用默认值。
好，编写使用这个模板的页面composition.xhtml：
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns=http://www.w3.org/1999/xhtml
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="template.xhtml">
<ui:define name="content"><h:outputText value="我们在这里扩展content啦" /></ui:define >
</ui:composition>
<body>
</html>
这个页面你可以看到我添加了JSF的自定义标签声明，也就相当于声明了<@taglib>。
然后ui:composition的template属性选择调用那个模板，ui:define的那么属性选择扩展哪个位置。
在这个页面，我没有扩展title位置，仅仅扩展了content位置，然后输出h:outputText的值。
Ok，测试一下，运行项目，然后去到composition.xhtml。
我们会看到页面的title显示“这里我们填写默认title”
页面里面则显示：
Hi,facelet
我们在这里扩展content啦