Компоновка компонентов Facelet и JavaScript - PullRequest
Новая
       5

Компоновка компонентов Facelet и JavaScript

1 голос
/ 15 июня 2010

У меня есть вопрос относительно размещения 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...--->

Теперь фейслет, который хочет использовать этот шаблон, будет выглядеть следующим образом: 

<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? Любая помощь будет оценена. Пожалуйста, дайте мне знать, если это не ясно, или что-то ... заранее спасибо

Ответы [ 3 ]

4 голосов
/ 16 июня 2010

Предполагая 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>
1 голос
/ 17 июня 2010

Привет всем, на всякий случай, если кому-то тоже интересно, и он застрял, как я, со старым 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>

А вот грань, которая определяет отдельно отображаемые области для 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>

0 голосов
/ 15 июня 2010

Вы можете включить скрипт:

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

  • или 

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