Facelet 组件布局和 javascript

Question

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

我有一个这样的 facelet 模板（我的面孔和 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 的东西等），我怎样才能使该 javascript 代码包含在生成的 html 的标题部分中？ 任何帮助，将不胜感激。请让我知道如果这不清楚或什么...提前谢谢

Answer 1

假设 JSF2 Facelets，您应该能够使用 h:head/h:outputScript 标签做一些事情。

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>JSF2</title>
    </h:head>
    <h:body>
        Hello from Facelets
        <h:outputScript target="head">
        <![CDATA[
          document.write("<!-- this will render in the head tag -->");
        ]]>
        </h:outputScript>
    </h:body>
</html>

Answer 2

大家好，以防万一有人也想知道，像我一样坚持使用旧的 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" ?>

<!-- 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>

Answer 3

您可以通过以下方式包含脚本：

• <script type="text/javascript" src="externalScript.js"></script>

• 或

  <script type="text/javascript">
  //<![CDATA[
  ....
  //]]>
  </script>