RE: how to use a javascript source in a component

[Nebinger, David]

Sorry, Joern, I must have caught John's name when posting my question rather 
than yours.  My humblest apologies...
 
Anyway, yes this does help.  I don't know about Websphere portal, but Liferay 
has some hooks in place where I can add the necessary css and script references 
(although I have to edit the JSP files rather than staying in the JSF world).  
I'm going to try extracting the files and placing them where the hooks can 
access them rather than including them using core:resource (so the individual 
portlets do not need to have the <ui:component> stuff placed into each one).

-----Original Message-----
From: Jörn Zaefferer [mailto:[EMAIL PROTECTED]
Sent: Thursday, March 08, 2007 11:02 AM
To: MyFaces Discussion
Subject: Re: how to use a javascript source in a component


The name is "Jörn", or "Joern" :-)

Anyway, sure thing.

My list.jspx is this:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="  <http://java.sun.com/JSP/Page> 
http://java.sun.com/JSP/Page"; 
    xmlns=" http://www.w3.org/1999/xhtml";
    xmlns:h=" http://java.sun.com/jsf/html  <http://java.sun.com/jsf/html> "
    xmlns:f=" http://java.sun.com/jsf/core";
    xmlns:core=" http://mxcit.de/facelets/core";
    xmlns:c=" http://java.sun.com/jstl/core";
    xmlns:tags=" http://mxcit.de/facelets/tags";
    xmlns:ui="  <http://java.sun.com/jsf/facelets> 
http://java.sun.com/jsf/facelets";
    xmlns:t=" http://myfaces.apache.org/tomahawk";
    version="2.0">
    
<ui:composition> 
    
<core:resource value="/theme/meeting.css" />
<core:resource value="/theme/schedule.css" />
<core:resource value="/js/tom/schedule.js" />

<core:portlet styleClass="meetinglist"> 
    <h:form>
        <!-- date selection -->
        <h:commandButton
            image="/img/arrow_blue_left.jpg"
            actionListener="${listController.left}" /> 
            
         <h:outputText value="${listController.currentDate}"> 
             <f:convertDateTime type="date" timeZone="Europe/Berlin" 
dateStyle="medium" locale="de" /> 
         </h:outputText> 
        
        <h:commandButton
            image="/img/arrow_blue_right.jpg"
            actionListener="${listController.right}" />
        
        <h:commandButton
            value="New Meeting"
            immediate="true"
            actionListener="${listController.newMeeting}" />
        
        <div class="calendarblock"> 
            <t:schedule
                value="${listController.meetingSchedule}"
                action="#{listController.scheduleAction}" />
        </div>
                
        <t:inputCalendar
            value="${listController.currentDate}"
            monthYearRowClass="yearMonthHeader"
            weekRowClass="weekHeader"
            currentDayCellClass="currentDayCell" /> 
       
        
    </h:form>
</core:portlet>

</ui:composition>
</jsp:root>

Some notes: core:resource is a component that encapsulates CSS, JS and images. 
I just looks at the file extension and renders the appropiate element. 

To use t:schedule, I've extracted schedule.js and schedule.css from the 
tomahawk.jar file. The path is org.apache.myfaces.custom.schedule.resource, 
with css and js subfolders. You need domLib.js and domTT.js for schedule's 
tooltips. 

I'm using the calendar as a plain html version, no popup, therefore I don't 
need any scripts for that.

By using the .jspx extension with the xml declaration and jsp:root element, my 
IDE (eclipse-based) provides content assist for standard components, very 
handy. 

Adding the ui:composition helps to hide that declaration from the browser, 
everything outside the composition is ommited.

Does that help?