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!
Related
dears,
i've followed these steps :
1) Download Bootstrap from http://getbootstrap.com/
2)Create a dynamic web project in eclipse.
3)Make sure that this dynamic web project could be run on the server.
4)Under WebContent folder, create a bootstrap folder.
5)Import files such as following from downloaded Bootstrap
resources into the newly created folder, “bootstrap” in step 3. css
folder consisting of bootstrap.min.css js consisting of
bootstrap.min.js img consisting of images Create an index.jsp and put
following within tag
But my html doesn't seem to see the css, i even wrote this line as a test but nothing appears
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
this is the whole index.html page:
<!DOCTYPE html>
<html>
<head>
<link href=”bootstrap/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
</body>
</html>
Try to change your css link declaration to
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
It has symbols with unsupported encoding.
I've been fighting a problem where my primefaces app could not locate my stylesheet using the tag
I finally "solved" it by using:
<link rel="stylesheet" type="text/css" href="css/my.css"/>
I'm still wondering why the tag didn't work, especially since I spent a while on it thinking maybe the file was in a bad location.
In the code below, when I inspect the source I don't see the link tag nor does it load the CSS file. I've left in the combinations I tried as well as the link tag which does work.
<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"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:outputStylesheet library="css" value="my.css"/>
<h:outputStylesheet value="css/my.css"/>
<link rel="stylesheet" type="text/css" href="css/my.css" />
<h1>Hello World PrimeFaces</h1>
<h:button value="xys" />
<p:editor value="uuu" />
<p:spinner />
</h:body>
</html>
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
My Grails project structure:
my-app/
grails-app/
<mostly typical grails-app structure>
views/
web/
index.gsp
app/
admin/
layouts/
main.gsp
<rest of project structure is like any other Grails app>
So you can see whereas, normally, the index page is located at grails-app/views/index.gsp, I have it at grails-app/views/web/index.gsp.
My application.properties:
app.grails.version=2.4.2
app.name=my-app
app.context=/
app.version=0.1
One section of my UrlMappings.groovy:
"/"(view:"/web/index")
My main.gsp layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title><g:layoutTitle default="MyApp"/></title>
<g:resource dir="css" file="myapp.css" />
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<g:resource dir="js" file="myapp.js" />
</body>
</html>
My index.gsp:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
When the app starts up and I view it in a browser, it is obvious that myapp.css is not being found because the page styling is all wrong. When I view page source I see:
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyApp</title>
/css/myapp.css
<meta name="layout" content="main"/>
</head>
<body>
<h1>Hello!</h1>
/js/myapp.js
</body>
</html>
So it sounds like Grails takes your app.context and uses that as the prefix for all resources. And because I haven't wired something correctly, Grails is just translating my <g:resource> tags into plaintext and printing them out in the HTML.
I guess my question is: What do I need to do so that Grails can find my CSS/JS resources?
I don't sure that tag into tag will be work correctly, so write like this:
<link rel="stylesheet" href="${resource(dir:'css', file:'myapp.css')}" charset="utf-8"/>
According to the Documentation, The resources tag generates a link (URI) string. Can be used in an href, JavaScript, Ajax call, etc.
Use the resources tag inside script or link tags to get your css/js loaded in your page like,
<link rel="stylesheet" href="<g:resource dir="css" file="myapp.css" />" charset="utf-8"/>
You can also use resources plugin, which I would recommend as it solves the purpose and has good documentation
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