Jsf 2 如何在使用ui:composition时在页面上添加不同的Java脚本_Jsf 2

Jsf 2 如何在使用ui:composition时在页面上添加不同的Java脚本

jsf-2

Jsf 2 如何在使用ui:composition时在页面上添加不同的Java脚本,jsf-2,Jsf 2,我正在使用一个带有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"

我正在使用一个带有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>

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

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


#{faqAddUpdate.actionState}FAQ
....
....

我的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: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>

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

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


登录

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

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

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

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


#{faqAddUpdate.actionState}FAQ
....

这是在我的页面标题部分添加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页面

谢谢

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

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

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


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

登录

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

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

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

<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文件夹中，正如拉维在回答中提到的：）

谢谢

ya，但我正在使用ui:composition。如果我在我的页面标题标记中使用这一行，那么ui:composition会丢弃它之外的所有标记。因此，这在ui:composition的情况下不起作用。我已经做到了。我将不得不在我的布局页面

中使用类似的内容，然后在我的ui:composition内部页面中，我将不得不使用此

。这是正确的。只要把那句

放在

@BalusC里面就行了。谢谢你，伙计，你上面的评论救了我一个下午。