Layouts des composants Facelet et javascript

J'ai une question concernant le placement de javascript dans les composants facelet. Il s'agit plus d'une meilleure pratique/style que d'un problème de programmation, mais j'ai l'impression que toutes les solutions auxquelles j'ai pensé ont été au mieux des hacks. Ok voici mon scénario:Layouts des composants Facelet et javascript

J'ai un modèle Facelet comme si (mes visages, et 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...--->

Maintenant, un Facelet qui veut utiliser ce modèle ressemblerait à ce qui suit :

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

Tout cela fonctionne très bien, mais le problème que j'ai est quand je veux utiliser un composant facelet à l'intérieur de cette page. Si le composant facelet a son propre code javascript (jQuery stuff etc), comment puis-je faire en sorte que ce code javascript est inclus dans la section d'en-tête du html généré? Toute aide serait appréciée. S'il vous plaît laissez-moi savoir si cela est pas clair ou quelque chose ... merci à l'avance

Source

2010-06-15 Java Drinker

Vous pouvez inclure le script soit:

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

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

Source

2010-06-15 19:06:31 Bozho

Eh bien, peut-être que je n'était pas clair, mais je sais que je peux intégrer js dans le facelet, mais un composant facelet réutilisable est habituellement un fragment, c'est-à-dire qu'il ne contient pas 100% de html propre. Dans mon cas, j'introduis un facelet dans une page qui utilise le template. La facette incorporée ne peut définir que

...

par exemple. Alors, comment pourrais-je ajouter javascript dans la page facelet intégrée qui serait rendue dans la balise de la sortie HTML principale. Est-ce plus clair? –

Eh bien, il suffit de le mettre dans le modèle avec «», puis définissez-le avec «»? – Bozho

En supposant que les Facelets JSF2, vous devriez être capable de faire quelque chose avec les étiquettes 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>

Source

2010-06-15 21:02:18 McDowell

Merde, j'aurais aimé utiliser jsf 2.0. Toutes sortes de bonnes choses comme des annotations et cette solution que vous avez posté! Hélas, coincé avec l'ancienne version pour l'instant (1.1!!). Peut-être existe-t-il un moyen de simuler ce comportement en utilisant un composant personnalisé qui modifie l'arborescence des composants? Hmmm, je pourrais me pencher là-dessus, même si un peu hors de mon niveau de confort avec ce genre de choses. Merci pour la réponse ... Je n'ai pas assez exp pour upvote encore –

Salut tout le monde, juste au cas où quelqu'un se demande aussi, et coincé comme moi avec le vieux JSF, ou ne pouvait pas utiliser la méthode proposée par McDowell pour une raison quelconque, voici comment je fini par faire il. C'est un peu paresseux, imposé seulement par convention, pas par le code.

Voici donc ma page qui utilise le modèle pour sa mise en page. Vous pouvez voir qu'il incorpore deux fois le composant 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>

Et voici le Facelet, qui définit des zones rendues séparément pour js et contenu ...

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

Source

2010-06-17 12:59:12

Layouts des composants Facelet et javascript

Répondre

Questions connexes