ansaurus

Question

Facelet components layouts and javascript

Answer 1

A:

You can include the script by either:

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

or

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

Bozho 2010-06-15 19:06:31

Well, maybe I was unclear, but I know I can embed js in the facelet, but a re-usable facelet component is usually a fragment, i.e. it does not contain 100% proper html. In my case, I am embedding a facelet into a page that uses the template. The embedded facelet may only define <table>...</table> for instance. So how could I add javascript in the embedded facelet page that would get rendered in the <head> tag of the main HTML output. Is that clearer?

Java Drinker 2010-06-15 20:33:48

Well, just put it in the template with `<ui:insert>` and then define it with `<ui:define>` ?

Bozho 2010-06-16 07:57:35

Answer 2

+2 A:

Assuming JSF2 Facelets, you should be able to do something with the h:head/h:outputScript tags.

<?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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"&gt;
    <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>

McDowell 2010-06-15 21:02:18

Damn, I wish I were using jsf 2.0. All kinds of good stuff like annotations and this solution you posted! Alas, stuck with the old version for now (1.1!!). Perhaps there is a way to simulate this behavior using a custom component that modifies the component tree? Hmmm, I could look into that, although a little bit out of my comfort level with this stuff. Thanks for the response... I don't have enough exp to upvote just yet

Java Drinker 2010-06-15 23:53:53

Answer 3

+1 A:

Hey everyone, just in case anyone was also wondering, and stuck like me with the old jsf, or couldn't use the method proposed by McDowell for some reason, here is how i ended up doing it. It's sort of a lazy man's way, enforced only by convention, not code.

So here is my page that uses the template for it's layout. You can see that it embeds the customFacelet component twice.

<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"&gt;

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

And here is the facelet, that defines separately rendered areas for js and content...

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

Java Drinker 2010-06-17 12:59:12

ansaurus

tags:

views:

answers:

Facelet components layouts and javascript

related questions