Facelet组件布局和javascript

我有一个关于javascript在facelet组件中的位置的问题。这更多的是关于最佳实践/风格，而不是编程问题，但我觉得我想到的所有解决方案充其量都是黑客。好的，下面是我的场景：

我有一个facelet模板，就像我的faces和apache Trinidad一样

<ui:composition>
<f:view locale="#{myLocale}">
    <ui:insert name="messageBundles" /><!--Here we add load bundle tags-->

    <tr:document mode="strict" styleClass="coolStyleDoc">

        <f:facet name="metaContainer">
            <!--This trinidad defined facet is added to HTML head-->
            <tr:group> <!-- blah bal my own styles and js common to all  -->
                <ui:insert name="metaData" />
            </tr:group>
        </f:facet>
        <tr:form usesUpload="#{empty usesUpload ? 'false' : usesUpload}">
            <div id="formTemplateHeader">
                <ui:insert name="contentHeader" />
            </div>
            <div id="formTemplateContentContainer">
                <div id="formTemplateContent">
                    <ui:insert name="contentBody" />
                </div>
            </div>
            <div id="formTemplateFooter">
                <ui:insert name="contentFooter">
                </ui:insert>
            </div>
        </tr:form>
<!-- etc...--->

现在，希望使用此模板的facelet将如下所示：

<ui:composition template="/path/to/my/template.jspx">

    <ui:define name="bundles">
        <custom:loadBundle basename="messagesStuff" var="bundle" />
    </ui:define>

    <ui:define name="metaData">
        <script>
        <!-- cool javascript stuff goes here-->
        </script>
    </ui:define>

    <ui:define name="contentHeader">
        <!-- MY HEADING!-->
    </ui:define>

    <ui:define name="contentBody">
        <!-- MY Body!-->
    </ui:define>

    <ui:define name="contentFooter">
        <!-- Copyright/footer stuff!-->
    </ui:define>
</ui:composition>

所有这些都非常有效，但我的问题是当我想在这个页面中使用facelet组件时。如果facelet组件有自己的javascript代码jQuery之类的东西，我如何使它包含在生成的html的头部分中？

---

任何帮助都将不胜感激。请让我知道，如果这是不清楚或什么。。。提前感谢

您可以通过以下方式将脚本包括在内：

或

---

您可以通过以下任一方式包括脚本：

或

---

假设使用JSF2 Facelets，您应该能够使用/tags做一些事情

---

假设使用JSF2 Facelets，您应该能够使用/tags做一些事情

---

大家好，以防有人也感到疑惑，像我一样坚持使用旧的jsf，或者出于某种原因不能使用McDowell提出的方法，下面是我最终如何做到这一点的。这是一种懒惰的人的方式，只由惯例而不是代码强制执行

这是我的页面，它使用模板进行布局。您可以看到它嵌入了customFacelet组件两次

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:tr="http://myfaces.apache.org/trinidad"
xmlns:custom="http://mycompany.com/jsf/custom">

<ui:composition template="/path/to/template.jspx">

    <ui:define name="bundles">
        <custom:loadBundle basename="bundleName" var="msgs" />
    </ui:define>

    <ui:define name="metaData">
      <!-- Custom facelet javascript part only -->
        <custom:faceletComponent type="metaData" />
    </ui:define>

    <ui:define name="contentHeader">
        <!-- Fixed header stuff -->
    </ui:define>

    <ui:define name="contentBody">
      <!-- Lots of tables and graphs and awesome content first .... -->

      <!-- Custom facelet again, this time with content only  -->
        <custom:faceletComponent type="content" data="#{bean.data}"/>
    </ui:define>

    <ui:define name="contentFooter">
        <!-- Fixed footer stuff -->
    </ui:define>

</ui:composition>

这是facelet，它为js和内容分别定义了渲染区域

<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>

---

大家好，以防有人也感到疑惑，像我一样坚持使用旧的jsf，或者出于某种原因不能使用McDowell提出的方法，下面是我最终如何做到这一点的。这是一种懒惰的人的方式，只由惯例而不是代码强制执行

这是我的页面，它使用模板进行布局。您可以看到它嵌入了customFacelet组件两次

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:tr="http://myfaces.apache.org/trinidad"
xmlns:custom="http://mycompany.com/jsf/custom">

<ui:composition template="/path/to/template.jspx">

    <ui:define name="bundles">
        <custom:loadBundle basename="bundleName" var="msgs" />
    </ui:define>

    <ui:define name="metaData">
      <!-- Custom facelet javascript part only -->
        <custom:faceletComponent type="metaData" />
    </ui:define>

    <ui:define name="contentHeader">
        <!-- Fixed header stuff -->
    </ui:define>

    <ui:define name="contentBody">
      <!-- Lots of tables and graphs and awesome content first .... -->

      <!-- Custom facelet again, this time with content only  -->
        <custom:faceletComponent type="content" data="#{bean.data}"/>
    </ui:define>

    <ui:define name="contentFooter">
        <!-- Fixed footer stuff -->
    </ui:define>

</ui:composition>

这是facelet，它为js和内容分别定义了渲染区域

<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>

---

嗯，也许我不清楚，但我知道我可以在facelet中嵌入js，但可重用的facelet组件通常是一个片段，即它不包含100%正确的html。在我的例子中，我将一个facelet嵌入到使用该模板的页面中。嵌入的facelet只能定义。。。例如。那么，我如何在嵌入的facelet页面中添加javascript，该页面将在主HTML输出的标记中呈现。这更清楚吗？好吧，把它放在模板中，然后用定义它？好吧，也许我不清楚，但我知道我可以在facelet中嵌入js，但可重用的facelet组件通常是一个片段，即它不包含100%正确的html。在我的例子中，我将一个facelet嵌入到使用该模板的页面中。嵌入的facelet只能定义。。。例如。那么，我如何在嵌入的facelet页面中添加javascript，该页面将在主HTML输出的标记中呈现。这更清楚吗？好吧，把它放在模板中，然后用定义它？该死，我希望我使用的是JSF2.0。各种各样的好东西，比如注释和你发布的这个解决方案！唉，现在仍然坚持旧版本1.1！！。也许有一种方法可以使用修改组件树的自定义组件来模拟这种行为？嗯，我可以调查一下，虽然这东西有点超出我的舒适度。谢谢你的回复。。。我没有足够的经验来支持yetDamn，我希望我使用的是JSF2.0。各种各样的好东西，比如注释和你发布的这个解决方案！唉，现在仍然坚持旧版本1.1！！。也许有一种方法可以使用修改组件树的自定义组件来模拟这种行为？嗯，我可以调查一下，虽然这东西有点超出我的舒适度。谢谢你的回复。。。我还没有足够的经验去投票

<!-- This facelet requires the metaData sections to be placed in the header

    Required Attributes:

    NAME            TYPE                        DESCRIPTION
    =====           =====                       ============
    type            String                  One of ['metaData', 'content']. Determines which section to render
    data      MyBeanType      Get all the facelet data              

-->
<ui:composition>

    <tr:group rendered="#{type eq 'metaData'}">
      <!-- All of this should go in the header-->
        <script type="text/javascript">
            Event.observe(document, 'dom:loaded', function(e) {
      //Funky jQuery stuff here that does tranitions and animations etc
    });
        </script>
    </tr:group>

    <tr:group rendered="#{type eq 'content'}">
      <!-- Here is the facelet content, shared widget html etc
    This part relies on the javascript above
  -->
    </tr:group>
</ui:composition>