i'm in trouble here. I have a JSF application that has a template file called baseTemplate.xhtml. This file is located in /resources/template folder. Follows the file code:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="cssLayout.css"/>
<h:outputStylesheet library="css" name="menu.css"/>
<h:outputStylesheet library="css" name="rodape.css"/>
<title>JSF Project</title>
</h:head>
<h:body>
<div id="estrutura">
<div class="top">
<ui:insert name="top">
<ui:include src="somefile"/>
</ui:insert>
</div>
<div id="menu">
<ui:insert name="menu">
<ui:include src="somefile"/>
</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">
</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content"></ui:insert>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include src="somefile"/>
</ui:insert>
</div>
</div>
</h:body>
</html>
In my cssLayout.css file, located inside /resources/css folder, i have the following rule:
.top {
position: relative;
height: 120px;
padding: 0;
margin: 0 0 15px 0;
background-image: url('imgSite/sisLogo.png');
background-repeat: no-repeat;
}
The image sisLogo.png is located under /resources/css/imgSite. All pages from my app are inside /pages. When i use the template, he doesn't load the image background for top, but other css properties are loaded. Seems to be a background-image url path problem. How i could solve this?
The project folder structure is as follows:
/
pages/
home.xhtml (using the template)
resources/
css/
cssLayout.css
imgSite/
sisLogo.png
templates/
baseTemplate.xhtml
CSS background images are loaded relative to the request URL of the CSS file (and thus not immediately relative to its physical location in the web content). If you explore the generated HTML output of the <h:outputStylesheet>, then you'll see that the request URL has become different. Assuming a context path of /somecontext and a FacesServlet mapping of *.xhtml, it'll look like this:
<link rel="stylesheet" type="text/css" href="/somecontext/javax.faces.resource/cssLayout.css.xhtml?ln=css" />
Note that your (improper btw) usage of the library has moved the /css to ?ln=css. You'd need to fix the background image url() accordingly so that it's properly relative to the real request URL of the CSS. E.g.
background-image: url("../resources/css/imgSite/sisLogo.png");
A more reliable way, which takes JSF resource identifier rules and FacesServlet mapping into account, is to use #{resource} in EL:
background-image: url("#{resource['css:imgSite/sisLogo.png']}");
See also:
Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
What is the JSF resource library for and how should it be used?
Your case is simple. I copy it :
/
pages/
home.xhtml (using the template)
resources/
css/
cssLayout.css
imgSite/
sisLogo.png
templates/
baseTemplate.xhtml
Small pertinent advice : when you do not know how to use relative path or when you have problem to implement it, simply use absolute path. Absolute paths have the powerful advantage in some cases to be mesured from the root. So they are more simple.
In your case, regardless of the structure, you can do this :
/Name of your project/PathToTheImage
Exemple :(Let's suppose your project is called "NewYork". It's just a name! You should do)
/NewYord/resources/css/imgSite/sisLogo.png
I suppose you know that you have to include the css path in the jsf code.
Exemple : (in your case, you have to put this in your code xhtml who need this css)
<h:outputStylesheet library="css" name="cssLayout.css" />
hope help.
Thanks
Related
This question already has answers here:
How to reference JSF image resource as CSS background image url
(2 answers)
Closed 8 years ago.
This is my css file registrationStyle.css:
body{
background-image: url("#{resources['images/blue.jpg']}");
}
My JSF page:
<?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:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>User Registration</title>
<h:outputStylesheet library="css" name="registrationStyle.css"/>
</h:head>
<h:body>
This is registration page
</h:body>
</html>
The project structure:
But it can't display image!
UPDATE
I want to using <h:graphicImage tage:
<h:graphicImage name="images/t1.jpg" library="default"/>
And i tried this:
<h:graphicImage name="t1.jpg" library="images"/>
But it says Unable to find resource default, images/t1.jpg ?
h:outputStylesheet is for loading CSS files, to include an image file inside your JSF page you should use the h:graphicImage Tag like this:
<h:graphicImage name="blue.jpg" library="images"/>
Update:
In order to load a background Image, the best solution is to follow Tiny's suggestion (within comments) and use:
body{
background-image: url("#{resource['images/blue.jpg']}");
}
See also:
Tag graphicImage
What is the JSF resource library for and how should it be used?
i'm in trouble here. I have a JSF application that has a template file called baseTemplate.xhtml. This file is located in /resources/template folder. Follows the file code:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="cssLayout.css"/>
<h:outputStylesheet library="css" name="menu.css"/>
<h:outputStylesheet library="css" name="rodape.css"/>
<title>JSF Project</title>
</h:head>
<h:body>
<div id="estrutura">
<div class="top">
<ui:insert name="top">
<ui:include src="somefile"/>
</ui:insert>
</div>
<div id="menu">
<ui:insert name="menu">
<ui:include src="somefile"/>
</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">
</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content"></ui:insert>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include src="somefile"/>
</ui:insert>
</div>
</div>
</h:body>
</html>
In my cssLayout.css file, located inside /resources/css folder, i have the following rule:
.top {
position: relative;
height: 120px;
padding: 0;
margin: 0 0 15px 0;
background-image: url('imgSite/sisLogo.png');
background-repeat: no-repeat;
}
The image sisLogo.png is located under /resources/css/imgSite. All pages from my app are inside /pages. When i use the template, he doesn't load the image background for top, but other css properties are loaded. Seems to be a background-image url path problem. How i could solve this?
The project folder structure is as follows:
/
pages/
home.xhtml (using the template)
resources/
css/
cssLayout.css
imgSite/
sisLogo.png
templates/
baseTemplate.xhtml
CSS background images are loaded relative to the request URL of the CSS file (and thus not immediately relative to its physical location in the web content). If you explore the generated HTML output of the <h:outputStylesheet>, then you'll see that the request URL has become different. Assuming a context path of /somecontext and a FacesServlet mapping of *.xhtml, it'll look like this:
<link rel="stylesheet" type="text/css" href="/somecontext/javax.faces.resource/cssLayout.css.xhtml?ln=css" />
Note that your (improper btw) usage of the library has moved the /css to ?ln=css. You'd need to fix the background image url() accordingly so that it's properly relative to the real request URL of the CSS. E.g.
background-image: url("../resources/css/imgSite/sisLogo.png");
A more reliable way, which takes JSF resource identifier rules and FacesServlet mapping into account, is to use #{resource} in EL:
background-image: url("#{resource['css:imgSite/sisLogo.png']}");
See also:
Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
What is the JSF resource library for and how should it be used?
Your case is simple. I copy it :
/
pages/
home.xhtml (using the template)
resources/
css/
cssLayout.css
imgSite/
sisLogo.png
templates/
baseTemplate.xhtml
Small pertinent advice : when you do not know how to use relative path or when you have problem to implement it, simply use absolute path. Absolute paths have the powerful advantage in some cases to be mesured from the root. So they are more simple.
In your case, regardless of the structure, you can do this :
/Name of your project/PathToTheImage
Exemple :(Let's suppose your project is called "NewYork". It's just a name! You should do)
/NewYord/resources/css/imgSite/sisLogo.png
I suppose you know that you have to include the css path in the jsf code.
Exemple : (in your case, you have to put this in your code xhtml who need this css)
<h:outputStylesheet library="css" name="cssLayout.css" />
hope help.
Thanks
net mvc4 project.
I try to display Image with help of img tag, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="header">
<h1>
Select mail service:
</h1>
<img src="C:\Users\MvcContactsImporter\Graphics\YahooLogo.jpg"/>
</div>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
But in FireFox browser I get this:
and if I change browser to Internet Explorer I get this:
The extention, name and the path of the files are correct.
Any idea what may cause to the problem and how to solve it?
Thank you in advance.
If Graphics is the folder in your project directory then give relative path to #Url.Content() and it will handle it itself.
give url this way:
<img src="#Url.Content("~/Graphics/YahooLogo.jpg")"/>
You cannot use absolute image file path. Put it inside web root folder and use relative path instead.
UPD: have a look here for examples http://www.dotnetperls.com/mappath
If you reference a file then you should add 'file://' to your image url.
Give it a try
My JSF 2.0 web project isn't rendering graphics from CSS. It loads images but it cannot load any background color or anything at all. Am I doing anything wrong here? My CSS file contains code for coloring and other things. I am using Bootstrap. My output page is plain black and white. I do not see any error messages in Eclipse.
<?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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<f:facet name="meta-tags">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aayush Mittal</title>
</f:facet>
<!-- Bootstrap -->
<f:facet name="css-files">
<h:outputStylesheet name="css/bootstrap.css"></h:outputStylesheet>
<h:outputStylesheet name="css/additional.css"></h:outputStylesheet>
<h:outputStylesheet name="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800"></h:outputStylesheet>
<h:outputStylesheet name="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"></h:outputStylesheet>
</f:facet>
<f:facet name="js-files">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<h:outputScript name="js/bootstrap.min.js"></h:outputScript>
<h:outputScript name="js/custom.js"></h:outputScript>
</f:facet>
</h:head>
<h:body class="main-body" data-spy="scroll" data-target="#navbar-collapse1" data-offset="50">
<div class="container-fluid body-prop1" id="home">
<div class="container-fluid section-contents">
<h1 class="welcome-text">Hola, Amigo!</h1>
<div class="container-fluid personal-info">
<p class="personal-info-text">
This website is my experiment with Bootstrap framework. I will try to put up my college projects and personal projects live here. I would also add some interesting stuff
including some blog posts. Feel free to "Stalk" me on Twitter, check out my code on GitHub, or just shoot me an Email if you find anything interesting.
</p>
</div>
</div>
</div>
</h:body>
</html>
This is my directory structure for the project:
OK, so I transferred all the folders - images, js, fonts, and css to a resources directory and moved that directory under WEB-INF folder. After that, I added following code to my web.xml file:
<context-param>
<param-name>
javax.faces.WEBAPP_RESOURCES_DIRECTORY
</param-name>
<param-value>/WEB-INF/resources</param-value>
And that made things to work. Now that I am following the official pattern of using the resources folder here, I had to get rid of relative paths and use only file names. Names of the folders that the files are in go to the library attribute. For example:
<h:outputStylesheet name="css/bootstrap.css"></h:outputStylesheet>
becomes
<h:outputStylesheet library="css" name="bootstrap.css"></h:outputStylesheet>
Also, the resources folder can be put in the WebContent directory as well as long as you put all that information in web.xml. I am writing these instructions just in case someone gets stuck on the same thing!
Is there a way to do that? I mean, I want to declare some css classes (either by using style tag or importing a .css resource) and be able to see those imported classes when using autocomplete in a templated view. i.e:
/resources/css/style.css:
.class1{ display: none; }
/views/template.xhtml:
(...)
<head>
<h:outputStylesheet library="css" name="style.css" />
</head>
(...)
view.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
template="/views/template.xhtml">
(...)
<h:outputText value="HiddenValue" styleClass="<CTRL+SPACE should show class1>"/>
(...)
</ui:composition>
JBoss Tools is capable of this (and many more).
How to install it is detailed in this answer.