使用 ui:composition 时如何在页面上添加不同的 javascript答案

【问题标题】：How to add different javascripts on a page when using ui:composition使用 ui:composition 时如何在页面上添加不同的 javascript
【发布时间】：2012-01-25 09:10:18
【问题描述】：

我正在使用一个带有 ui:composition 的页面，就像这样

<?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"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui" 
    xmlns:f="http://java.sun.com/jsf/core">

    <h:head>

        <title></title>

    </h:head>

    <h:body>

        <ui:composition template="./WEB-INF/templates/layout.xhtml">

            <ui:define name="title">#{faqAddUpdate.actionState} FAQ</ui:define>
            <ui:define name="content">

                <h:form id="faqAddUpdateForm" style="border-color: #000000;width: 960px;position: absolute;left: 150px;" prependId="false">
                ....
                ....

                </h:form>

            </ui:define>

        </ui:composition>

    </h:body>
</html>

我的 layout.xhtml 是这样的

<?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:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html">

    <h:head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="textext/javascript" src="ckeditor/ckeditor.js" >
            <ui:insert name="script"></ui:insert>
        </script>

        <title>
            <ui:insert name="title">Login</ui:insert> 
        </title>

    </h:head>
    <h:body>
        <div id="top">
            <ui:insert name="top">
                <ui:include src="header.xhtml" id="header"/>
            </ui:insert>
        </div>
        <div>
            <div id="content">
                <ui:insert name="content"></ui:insert>
            </div>
        </div>
        <div id="bottom" style="position: absolute;top: 675px;width: 100%" align="center">
            <ui:insert name="bottom">
                <ui:include src="footer.xhtml" id="footer"/>
            </ui:insert>
        </div>
    </h:body>
</html>

在我的页面上我正在使用类似的东西

<h:body>

    <ui:composition template="./WEB-INF/templates/layout.xhtml">
        <ui:define name="script"></ui:define>
        <ui:define name="title">#{faqAddUpdate.actionState} FAQ</ui:define>
        <ui:define name="content">
        ....
       </ui:define>

   </ui:composition>

这将在我的页面头部部分添加 javascript 标记。现在我想问我是否想在我的页面上添加另一个 .js 文件。我将不得不像这样在我的 layout.xhtml 页面中定义另一个 ui:insert name="script"？

<script type="textext/javascript" src="js/1.js" >
        <ui:insert name="script"></ui:insert>
</script>

<script type="textext/javascript" src="js/2.js" >
        <ui:insert name="script"></ui:insert>
</script>

等等。或者我有什么技巧可以在我的 layout.xhtml 中定义一次脚本标记，然后根据 src 属性将它插入到我的 ui:composition 页面上？

谢谢

【问题讨论】：

标签： jsf-2

【解决方案1】：

您不必使用 ui:inserts 执行此操作。无论您需要在页面中的何处添加 javascript 文件。只需使用资源 API 像这样添加。

<h:outputScript library="javascript" name="1.js" target="head" />

为此创建文件夹 WebContent/resources/javascript 并将 1.js 放入 javascript 文件夹中。

【讨论】：

是的，但我正在使用 ui:composition。如果我在页面标题标签中使用这一行，那么 ui:composition 会丢弃它之外的所有标签。所以这在 ui:composition 的情况下不起作用。我已经做了。我将不得不在我的布局页面<ui:insert name="script"></ui:insert> 中使用类似的东西，然后在我的 ui:composition 页面中，我将不得不使用这个<ui:define name="script"><h:outputScript library="Javascripts" name="jquery-1.7.1.js"/> </ui:define> <ui:define name="script"><h:outputScript library="Javascripts" name="1.js"/> </ui:define>。这是对的。
只需将<h:outputScript target="head"> 行放在<ui:define name="content"> 中。
@BalusC 谢谢哥们，你上面的评论拯救了我的下午。

【解决方案2】：

<h:head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>
        <ui:insert name="title">Login</ui:insert> 
    </title>

    <ui:insert name="script"></ui:insert>

</h:head>

<h:body>
    <div id="top">
        <ui:insert name="top">
            <ui:include src="header.xhtml" id="header"/>
        </ui:insert>
    </div>
    <div>
        <div id="content">
            <ui:insert name="content"></ui:insert>
        </div>
    </div>
    <div id="bottom" style="position: absolute;top: 675px;width: 100%" align="center">
        <ui:insert name="bottom">
            <ui:include src="footer.xhtml" id="footer"/>
        </ui:insert>
    </div>
</h:body>

然后在你的页面中使用这样的东西

<h:body>
    <ui:composition template="./WEB-INF/templates/Review_Template.xhtml">

        <ui:define name="title">FAQ Review</ui:define>

        <ui:define name="script"><h:outputScript library="Javascripts" name="jquery-1.7.1.js"/> </ui:define>
        <ui:define name="script"><h:outputScript library="Javascripts" name="1.js"/> </ui:define>
        <ui:define name="content">
            <h:form id="FaqGridForm" prependId="false" >
                ....
            </h:form>

        </ui:define>
    </ui:composition>
</h:body>

你的 Javascripts 文件夹应该在里面，resources 文件夹，正如 Ravi 在他的回答中提到的 :)

谢谢

【讨论】：