Question

I would like to integrate jQuery-DatePicker in my web application.

I downloaded the scrips, the css and the images and put them in the corresponding directories: scripts, css and images.

I then defined them in scripts.xhtml:

<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">

<h:outputScript library="scripts" name="jquery-1.3.2.min.js"/>
<h:outputScript library="scripts" name="jquery-ui-1.7.1.custom.min.js"/>
<h:outputScript library="scripts" name="daterangepicker.jQuery.js"/></ui:composition>

and styles.xhtml;

<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">

<h:outputStylesheet library="css" name="commons.css"/>
<h:outputStylesheet library="css" name="styles.css"/>
<h:outputStylesheet library="css" name="doi.css"/>
<h:outputStylesheet library="css" name="ui.daterangepicker.css"/>
<h:outputStylesheet library="css" name="redmond/jquery-ui-1.7.1.custom.css"/>   

<!-- PRINT STYLES -->
<!-- Note: there is currently no way to determine the "media" attribute with h:outputStylesheet -->
<link rel="stylesheet" media="print" href="${facesContext.externalContext.requestContextPath}/javax.faces.resource/css/print.css.xhtml" type="text/css" /></ui:composition>

The problem is that all the related images are not loaded/found.

For ex. the background is hardcoded in the css -> background-image: url(“images/ui-icons_d8e7f3_256x240.png”) which is not the corresponding path…

Do I have to specify something else somewhere? I can’t imagine I have to manually change all the paths in the scripts and css…

Answer 1

Those images have to be in the /images subfolder of the /css folder.

---

Unrelated to the concrete problem, you’re not really using library the right way. It should represent a common library of a “theme”. But you seem to have them all in a default library, so you should actually be declaring the resources as follows:

<h:outputScript name="scripts/jquery-1.3.2.min.js"/>
<h:outputScript name="scripts/jquery-ui-1.7.1.custom.min.js"/>
<h:outputScript name="scripts/daterangepicker.jQuery.js"/>

<h:outputStylesheet name="css/commons.css"/>
<h:outputStylesheet name="css/styles.css"/>
<h:outputStylesheet name="css/doi.css"/>
<h:outputStylesheet name="css/ui.daterangepicker.css"/>
<h:outputStylesheet name="css/redmond/jquery-ui-1.7.1.custom.css"/>   

Also, the media attribute support is present on <h:outputStylesheet> since JSF 2.1:

<h:outputStylesheet media="print" name="css/print.css" />