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.
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
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!
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
This page doesn't get the table styles from the style sheet. If I put the same styles in the page itself, they are applied. What could cause this? The css file name is correct and is read by other pages.
<!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">
<head>
<title>Pagelinks | Known Issues</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="pagelinks_windows.css" />
<!-- style>
#known_issues th, #known_issues td {
font-size: 13px;
text-align: left;
}
</style -->
</head>
<body>
<h1>Known Issues</h1>
<p>
Known bugs and issues are listed here.</p>
<table id="known_issues">
<tr><th>Tracking No.</th><th>Category</th><th>Description</th><th>Status</th><th>Workaround</th></tr>
<tr><td>plt001</td><td>Site</td><td>Site navigation broken on Internet Explorer 8</td><td>Closed</td><td>None. That browser version has a major bug involving javascript objects. Users must upgrade to Internet Explorer 9.</td></tr>
<tr><td>plt002</td><td>Site</td><td>Saints and feasts do now show description</td><td>Open</td><td>None. The description data for the Saints and the feasts is being compiled.</td></tr>
</table>
<br/>
<br/>
Test if the content of the css file is visible.
Try to open it in the browser.
Common possible error when letters-case (A\a and so on) in file-names differs - this willn't work on *nix hosting servers, ever if it worked localy on windows.
Another common situation: when is error in path to file from current file-directory.
Are your stylesheets in the same root directory as this html file? Common practice is to put stylesheets, js, includes, etc into different directories. Perhaps you follow this convention and simply forgot href="css/pagelinks_windows.css"? Hard to find the answer to your problem without much more information but it's usually something small you're missing. One of those that you end up with a forehead-slap once you find it :)
What does your stylesheet look like?
I think you might have some conflicting css, try adding your table style at the VERY bottom of pagelinks_windows.css