Facelet組件的佈局和javascript

我有一個關於在facelet組件中放置javascript的問題。這更多的是關於最佳實踐/風格而不是編程問題，但我覺得所有我認爲最好的解決方案都是黑客。好吧，這裏是我的情況：Facelet組件的佈局和javascript

我有像這樣一個模板的facelet（我的臉，和Apache特立尼達和多巴哥）......

<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 stuff等），我怎樣才能讓它的JavaScript代碼包含在生成的html的頭部分？任何幫助，將不勝感激。請讓我知道這是不明確或東西...在此先感謝

來源

2010-06-15 Java Drinker

可以包括由兩種腳本：

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

或

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

來源

2010-06-15 19:06:31 Bozho

好吧，也許我不清楚，但我知道我可以嵌入js在facelet中，但可重用的facelet組件通常是一個片段，即它不包含100％正確的html。就我而言，我將一個facelet嵌入到使用該模板的頁面中。例如，嵌入的小平面只能定義

...

。所以我怎麼才能在嵌入的facelet頁面中添加javascript，這個頁面會在主HTML輸出的標記中呈現。這更清楚嗎？ – 2010-06-15 20:33:48

那麼，只需將它放在模板中用''然後用''定義它呢？ – Bozho 2010-06-16 07:57:35

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

來源

2010-06-15 21:02:18 McDowell

該死的，我希望我使用jsf 2.0。各種好的東西，如註釋和你發佈的這個解決方案！唉，現在堅持舊版本（1。1！）。也許有一種方法可以使用修改組件樹的自定義組件來模擬此行爲？嗯，我可以看看，雖然這個東西有點超出我的舒適程度。感謝您的回覆......我沒有足夠的exp來積極參與 – 2010-06-15 23:53:53

大家好，以防萬一有人也想知道，並堅持像我這樣的老JSF，或無法使用由麥克道爾提出了一些原因，這種方法，這裏是我落得這樣做它。這是一種懶惰的方式，只能按照慣例強制執行，而不是代碼。

所以這裏是我的頁面使用它的佈局模板。你可以看到它嵌入了兩次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>

來源

2010-06-17 12:59:12

Facelet組件的佈局和javascript

回答

相關問題