JSF 2：如何正确构建组件？答案

【问题标题】：JSF 2: How build components correctly?JSF 2：如何正确构建组件？
【发布时间】：2011-07-27 14:06:27
【问题描述】：

我是 JSF 的新手，我正在努力学习它，因为我看到了它的好处。我有一个用 HTML 构建的网站，现在我想创建一些部分的模板，例如 <head> 部分、侧边栏、顶部菜单、页脚等。我了解到在 JSF 中这些将被称为“组件”。

应该是这样的，例如：

<html>
    <h:head>
        <title>Example</title>
        <ui:include src="/resources/component/head.xhtml"></ui:include>
    </h:head>
    <h:body>
    //....
    <ui:include src="/resources/component/footer.xhtml"></ui:include>    
    </h:body>
</html>

我已经尝试过类似上面的操作，但是我的 .css 样式不能正确应用到我的 div 中。 javascript 文件也是如此。

我想将所有内容都传递给 JSF。我想知道这样做是否值得。大家觉得呢？

在 JSF 中创建模板和组件的最佳方法是什么，为什么我尝试导入这些文件时我的样式和 javascript 不能正常工作？

我正在尝试做的最好的方法是什么？

最好的问候，瓦尔特·恩里克。

【问题讨论】：

昨天有人问过类似的问题：stackoverflow.com/questions/6822000/…
@BalusC：那个确实有很好的解释和有用的链接到复合组件wiki（很好的示例组件：P）。另一个非常相似的问题如下：stackoverflow.com/questions/5281623/…
@Arjan：哈哈，确实我想不出更好的学校例子；）这是一个完美的用例。

标签： java templates jsf jsf-2

【解决方案1】：

在 JSF 中，既有模板也有组件。组件不是模板的另一个词。

您展示的示例不太可能是组件的候选者，但实际上是由（Facelets）模板完成的：

<html xmlns="http://www.w3.org/1999/xhtml"    
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Example</title>
        <ui:include src="/resources/component/head.xhtml"/>
    </h:head>
    <h:body>
        <ui:insert name="content"/>    
        <ui:include src="/resources/component/footer.xhtml"/>
    </h:body>
</html>

现在个别页面可以使用这个模板，然后被称为template clients：

<?xml version="1.0" encoding="UTF-8"?> 

<ui:composition
    xmlns:ui="http://java.sun.com/jsf/facelets"     
    template="/templates/master.xhtml">

    <ui:define name="content">
        Some content for this page.
    </ui:define>
</ui:composition>

注意模板中名为content 的部分的定义，模板客户端为其提供实际内容。

Components 可以通过 Java 或称为 composite-components 的特殊 Facelets 页面创建。复合组件基本上将许多现有组件和标记组合在一起，形成可以轻松重用的新组件。例如。一个非常简单的复合组件，没有任何参数：

<?xml version="1.0" encoding="UTF-8"?> 

<ui:composition
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:cc="http://java.sun.com/jsf/composite"
>
    <cc:interface/>

    <cc:implementation>    
        <p>
            <h:outputText value="&amp;nbsp;" escape="false"/>
        </p>        
    </cc:implementation>

</ui:composition>

如果你把它放在[web content]/resources/foo/emptyLine.xhtml，你可以在你的模板上使用它作为<foo:emptyLine/>。例如

<?xml version="1.0" encoding="UTF-8"?> 

<ui:composition
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:m4n="http://java.sun.com/jsf/composite/foo"
    template="/templates/master.xhtml">

    <ui:define name="content">
        Some content for this page.
        <foo:emptyLine/>
    </ui:define>
</ui:composition>

有时includes 和composite components 和第三种变体facelets tags 感觉有点相似。一般来说，您可以将包含用于基本上非常特定于单个页面的内容，而将组件用于您在许多位置重复使用的内容。 composite components 和 facelets tags 之间的区别更加微妙，但在许多情况下，composite components 可以被认为是两者中更现代的变体。

【讨论】：

提示：要触发 XML 语法高亮以使其读起来更漂亮，请将  添加到代码顶部。另见meta.stackexchange.com/q/81970 和meta.stackexchange.com/q/72082。带有[jsf] 标记的问题默认情况下会这样做，但更主要的[java] 标记已覆盖它。
@Arjan Tijms,@BalusC，我更新了我的帖子，你能看看吗？
@Valter：也许您应该为此提出一个新问题，因为这是一个相关但仍然相当不同的问题。