Menu
I was wondering if I can use <h:outputStylesheet/> to link CSS from an external resources. I want to link the Yahoo Grids. Using the following code, I got a RES_NOT_FOUND:
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:tcmt="http://java.sun.com/jsf/composite/tcmt/component">
<h:head>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" target="head" />
</h:body>
</html>
265
The h:outputStylesheet tag renders an HTML element of the type "link" with type "text/css". This tag is used to add external stylesheet file to JSF page.
External stylesheets use the <link> tag inside the head element. The rel attribute explains the relation the link has to our document. The value in this case will always be stylesheet , since that is what we're creating a link to. The href attribute is the link to our stylesheet.
You can keep using plain HTML for that:
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />
When you use the <h:graphicImage/> or <h:outputStylesheet/> or <h:outputScript/>, then the file needs to be inside the /resources folder of the web application itself. See also How to reference CSS / JS / image resource in Facelets template? But if the file is not provided by the web application, then you should use plain HTML <img/> or <link/> or <script></script> for this.
Instead of plain HTML <link/> you can also download this .css and put in the /resources folder of the web application so that you can use <h:outputStylesheet/>.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
