I implemented a jsf 2.0 component which should display jQuery's Datepicker. It works just fine but the images referenced in the css are not found. The *.js and the *.css are found but the links to images are not.
Here's the code of my component
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:c="http://java.sun.com/jsp/jstl/core"
xmlns:cc="http://java.sun.com/jsf/composite">
<head>
<title>jQuery - Datepicker</title>
</head>
<body>
<cc:interface>
<cc:editableValueHolder name="input"/>
</cc:interface>
<cc:implementation>
<h:outputStylesheet library="stats" name="jquery/css/jquery-ui-1.8.16.custom.css" />
<h:outputScript library="stats" name="jquery/js/jquery-1.7.1.min.js" target="head"/>
<h:outputScript library="stats" name="jquery/js/jquery-ui-1.8.17.custom.min.js" target="head"/>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
jq("[id$=#{cc.clientId}]").datepicker({
showOn : 'focus',
duration : 10,
changeMonth : true,
changeYear : true,
dayNamesMin : ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
currentText : 'Heute',
dateFormat : 'dd-mm-yy',
yearRange : '-3:+3',
showButtonPanel : true,
closeText : 'Schliessen',
});
});
</script>
<h:panelGroup>
<h:inputText id="#{cc.clientId}" value="#{cc.attrs.value}" style="width:80px;"/>
</h:panelGroup>
</cc:implementation>
</body>
</html>
in the css the images are references like this (jQuery css):
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url('/stats-webapp/images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url('/stats-webapp/images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_f6cf3b_256x240.png); }
My Filepath is following
datepicker.xhtml -> src/main/webapp/resources/stats/datepicker.xhtml
javascript files -> src/main/webapp/resources/stats/jquery/js/jquery*.js
css files -> src/main/webapp/resources/stats/jquery/css/jquery*.css
images -> src/main/webapp/resources/stats/jquery/css/images/.
Even if i reference those images inside the css path with absolute paths my browser won't find it (when i start the chrome developer tools, i cannot find the files either)
Thanks for the help
You're serving the CSS file as a JSF resource. It will be served from /javax.faces.resource folder in URL and it will also get the FacesServlet mapping like /faces/* or *.xhtml in URL. It would make the path-relative CSS background image URLs invalid. You'd need to alter the CSS backgorund image URLs accordingly to be served as JSF resources as well. The canonical approach is to make use of the resource mapper in EL #{resource}:
.some {
background-image: url(#{resource['stats:jquery/css/images/foo.png']});
}
An alternative is to use OmniFaces UnmappedResourceHandler so that you don't need to modify the CSS files.
Again another alternative is to grab a JSF UI component library which has already a jQuery based date picker based component in its assortiment, such as PrimeFaces <p:calendar>.
We can't know how your server's folder structure is set up, but try adding a leading a leading slash to your file paths "/images etc."
Related
I linked my stylesheet to my base html file.
<title> <link rel="stylesheet" type="text/css" href="style.css">
and when i click go to link it goes to the right file. i can change the background color and all of the other margins. but when i insert a url the css seems to find the picture but doesnt load up to the html and if i click preview non of the images does load.
picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
link your css under header tag not title tag as title tag is referring to Website Title.
<header>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
and the typo mentioned in comments, and ensure your destination is correct.]
p/s (typo)
picture{
background-image:url(img/header.jpg);
}
Like this below code paste in your html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="etbplaza.nl/css/style_basic.css"; />
</head>
<body>
<div class="picture"> your code hre </div>
</body>
</html>
CSS
.picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
This might be a typo:
picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
picture has no class nor id selector which might causing the problem and/or may be try to use url('img/header.jpg'); within quotes. or url('../img/header.jpg') but we don't know where is the image is located.
Also try this:
Inspect Element
hover over the path and see is there the path is being loaded if yes
your image would show there
See this technique
change background-image:url(img/header.jpg/); to background-image:url(img/header.jpg); also make sure the /path/to/file is correct and if picture is a div class then it will be like .picture in your css
you have to use the css as in the form of class or id and try the code as
.picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg);
}
or as id
#picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg);
}
surly you got the preview of the Image to your HTML page.
Please check the path of css file is correct or not.
i am using ready-made template(with css and j-queries) in my java ee app. all the primefaces components are rendered properly except the panelgrid control of primefaces 3.2.
it is displayed with border. i want it without border.
i have removed all the table styling from the css of custom ready-made template.
still the border is there.
when i remove the readymade template, the panelgrid is rendered perfectly without any border. how do i remove the border and what is the cause of this problem?
edited:
xhtml file:
<!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:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AP administration panel - A massive administration panel</title>
</h:head>
<h:body>
<div>
<h:form>
<p:panelGrid columns="2" style="border: none">
<h:outputText value="scrip symbol"/>
<p:inputText value=""/>
<p:commandButton value="submit"/>
</p:panelGrid>
</h:form>
</div>
</h:body>
</html>
When overriding PrimeFaces default styles, you have to specify a CSS selector of at least the same strength or to specify a stronger selector. The strength of a CSS selector (the cascading rules) is specified in the W3 CSS specification and clearly explained in this article: Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade.
Based on PrimeFaces own CSS, the following selectors should do:
.ui-panelgrid tr, .ui-panelgrid td {
border: none;
}
Just put them in a .css file which you include by <h:outputStylesheet> inside the beginning of the <h:body> so that it will be included after PrimeFaces own style.
<h:body>
<h:outputStylesheet name="layout.css" />
...
</h:body>
See also:
How to remove border from specific PrimeFaces p:panelGrid?
How do I override default PrimeFaces CSS with custom styles?
Update: As per your update, your CSS doesn't seem to be loaded at all. You should have noticed this by verifying the HTTP traffic in browser builtin webdeveloper toolset (press F12 in Chrome/IE9/Firebug) and seeing that it returned a HTTP 404 error. When using <h:outputStylesheet> you need to put the CSS file in the /resources folder of the webcontent. So you must have a /resources/css/mycss.css in order to be able to use <h:outputStylesheet name="css/mycss.css" />.
See also:
How to reference CSS / JS / image resource in Facelets template?
I registered account into oracle.com web site and I saw something very interesting:
See the input field of the telephone number into the form. How I can reproduce the same into JSF input form? Is this made by CSS?
CODE UPDATE
<?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">
<h:head>
<script type="text/javascript">
<!-- input field shadow -->
var placeholder = "test field"
$("input").on({
focus: function() {
if (this.value == placeholder) {
$(this).val("").removeClass("shadow");
}
},
blur: function() {
if (this.value == "") {
$(this).val(placeholder).addClass("shadow");
}
}
}).trigger("blur");
</script>
</h:head>
<h:body>
<h1>JSF 2 textbox example with shadow</h1>
<h:form>
<h:inputText value="#{userBean.userName}" />
<h:commandButton value="Submit" action="user" />
</h:form>
</h:body>
</html>
I tested this code but it's not working. Maybe I need to call the JavaScript code as function into the <h:inputText> tag?
This is new since HTML5. It's the placeholder attribute, which is also known as "watermark" before the HTML5 era.
<input type="text" name="phone" placeholder="e.g. +994 (12) 491 2345" />
This works of course only in browsers supporting HTML5. When using JSF, this works only with JSF components supporting the new HTML5 placeholder attribute. The standard JSF <h:inputText> doesn't support this natively (yet). You'd need to look for a 3rd party component library supporting this. Among them is PrimeFaces with its <p:watermark> component:
<h:inputText id="phone" value="#{register.user.phone}" />
<p:watermark for="phone" value="e.g. +994 (12) 491 2345" />
This will check if HTML5 is supported and then use placeholder, otherwise it will bring in some JS/jQuery magic to simulate the same. Nothing of this all is done by CSS.
If using PrimeFaces is not an option for some reason, you'd need to reinvent it yourself in flavor of a custom component and/or a custom piece of JS/jQuery, exactly like <p:watermark> is doing under the covers.
I think they are using jquery's watermark to do that way. Attached is the firebug view of that page which shows that
In case if you have no possibility to use PrimeFaces, as #BalusC stated, you can use JavaScript/jQuery code like this:
var placeholder = "e.g. +358 (11) 123-45-67"
$("input").on({
focus: function() {
if (this.value == placeholder) {
$(this).val("").removeClass("shadow");
}
},
blur: function() {
if (this.value == "") {
$(this).val(placeholder).addClass("shadow");
}
}
}).trigger("blur");
CSS class shadow has font color: #bbb.
DEMO: http://jsfiddle.net/rYAbU/
I have the page which has the following tags:
<h:head>
<h:outputStylesheet name="style.css" library="css" />
</h:head>
and some kind of dataScroller:
<rich:dataScroller for="productsList" id="scroller" maxPages="10">
Now I'm trying to override dataScroller default css style by adding
.rf-ds { background: black; }
in my style.css file.
I don't see any changes. When I open firebug I see both .rf-ds classes one is coming from my css and is disabled and second one is default dataScroller class.
How can I override default class?
try to add !important to your css like this:
.rf-ds { background: black !important; }
see
http://www.electrictoolbox.com/using-important-css/
Try <link rel="stylesheet" type="text/css" href="/resources/css/style.css" /> in your <head></head>
.From what I have seen, RichFaces loads CSS attached with <link> after it has loaded its own CSS, giving your CSS precedence.
In our project we needed to customize a lot of components's css and IMHO adding !important is not such an elegant solution (its more like a hack). Hence we took this approach.
i'm new in jsf, i would like to know how i can reuse others .jsf pages without 'copy paste' them.
In .jsp i do:
// head.jsp
<head> ... </head>
// top.jsp
<body> ... </body>
Then i include them in my new .jsp
// index.jsp
<%#include file="head.jsp" %>
<%#include file="top.jsp" %>
...
How can i do this with jsf ?
i'm trying this way:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<ui:include src="components/head.xhtml" />
</h:head>
<h:body>
<ui:include src="components/top.xhtml" />
</h:body>
</html>
But is not working..
Any idea ?
Best regards,
Valter Henrique.
Facelets is the default view technology for JSF2, so I would use its <ui:include> tag here. Make sure your paths are correct - they should start with webapp root, one containing WEB-INF - and also make sure the included facelets contain <ui:composition> tag around the included content. Anything outside this tag will be ignored.
Try looking for the "import" tag in the core library.
I think ui:include might be for facelets rather than plain jsf.