Re: how to use a javascript source in a component

[Jörn Zaefferer]

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";
   xmlns="http://www.w3.org/1999/xhtml";
   xmlns:h="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";
   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?