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/
Related
I was testing couple of new features of JSF and I came across Post Redirect Get.
I wanted to redirect from my first page say first.xhtml to second.xhtml.
I have a number as a property in both the managed beans and I wanted to pass it to the second bean from the first bean using request parameter.
This is my first page
<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">
<head>
<title>Landing Page</title>
</head>
<body>
<h3>Enter Number</h3>
<h:form>
<h:inputText id="input" name="number" value="#{postRedirectGet.number}" />
<h:commandButton value="redirect to result"
action="resultPage?faces-redirect=true&includeViewParams=true">
</h:commandButton>
</h:form>
</body>
</html>
And in the second page I have
<!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">
<f:metadata>
<f:viewParam name="number" value="#{postRedirectResult.number}"/>
</f:metadata>
<head>
<title>Result Page</title>
</head>
<body>
<h:form>
<h:outputText value="Number #{postRedirectGet.number}" />
<h:outputText value="Number #{postRedirectResult.number}" />
<h:commandButton value="Redirect to index" action="/index?faces-redirect=true" />
</h:form>
</body>
</html>
Now the page is doing a POST using commandButton and then redirecting to second page from first but it passes number=0 in the URL. It works if I change
<f:viewParam name="number" value="#{postRedirectResult.number}"/>
to
<f:viewParam name="number" value="#{postRedirectGet.number}"/>
but I thought the viewParam is used to set the value to a bean and not used to pass the values in URL. Could someone please explain how can we do POST and set the property of the managed bean on next page.
The problem is that the f:viewParam is used in two different ways in two scenarios . In h:link it is used to set the property of target bean , in h:commandButton it is used to compute the GET URL and then the target bean property can be set using #ManagedProperty . Is my understanding correct or can the f:viewParam be used to set the property in h:commandButton POST redirect get also.
What you seem to be missing is what includeViewParams does. Let me quote this very informative article (you should read all of it):
The other special query string parameter, includeViewParams, tells the navigation handler to include the view parameters when performing the navigation. But what view parameters should be included? The view parameters to be included when performing the navigation are declared on the to-view-id page.
So JSF looks at your resultpage.xhtml to determine which parameters to pass. And then dutifully proceeds to pass the current value of postRedirectResult#number (which at this time is unset/0).
To have the GET number parameter reflected in your bean, pass it as a real parameter:
<h:commandButton value="redirect to result"
action="resultPage?faces-redirect=true&number=4" />
See also:
What can <f:metadata>, <f:viewParam> and <f:viewAction> be used for?
There are different 4 ways to transfer data from JSF Page To Backing Bean.
We can use
f:param
f:setPropertyActionListener
f:attribute
Method expression (JSF 2.0).
Here you can try f:setPropertyActionListener as..
<h:commandButton value="redirect to result"
action="resultPage?faces-redirect=true">
<f:setPropertyActionListener target="#{postRedirectResult.number}" value=4 />
</h:commandButton>
Here is the link for this.
Is it possible to show previewtext in JSF 1.2 components, for example in inputfields, selectmenue or in outputtext and the preview text disappears, if the user clicks into one of these components?
I saw that the attribute defaultLabel can be used in Rich faces for example? Does JSF component have a similar attribute?
Thanks & Greetz
Marwief
If you mean to use placeholders, you can look for Primefaces watermark or RichFaces placeholder
another way to go : take a look at passthrough with JSF2.2
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<h:inputText value="#{item.name}" p:placeholder="my item"/>
...
that will be rendered as :
<input type="text" ... placeholder="my item">
but beware, this is HTML5
this is a simple example which demonstrates the case.
you have a form with a Panel and two commandButton, one is AJAX the other is not. by clicking on any of them, an InputText will be created in the backing bean and added to the Panel.
My managed bean:
#ManagedBean
public class DynamicPanel {
private Panel dynmaic;
public Panel getDynmaic() {
return dynmaic;
}
public void setDynmaic(Panel dynmaic) {
this.dynmaic = dynmaic;
}
public String adddynamic(){
InputText text = new InputText();
dynmaic.getChildren().add(text);
text.setValue(text.getId()+" Size= "+ dynmaic.getChildren().size());
return null;
}
public String removeall(){
this.dynmaic.getChildren().clear();
return null;
}
}
My XHTML 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://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<p:panel id="dynamic" binding="#{dynamicPanel.dynmaic}">
</p:panel>
<h:commandButton value="Add with AJAX" id="ajaxBtn" >
<f:ajax onevent="onClick" execute="#{dynamicPanel.adddynamic()}" render="dynamic" />
</h:commandButton>
<h:commandButton value="Add" action="#{dynamicPanel.adddynamic}" />
<h:commandButton value="remove all" action="#{dynamicPanel.removeall}" />
</h:form>
</h:body>
</html>
my faces-config.xml is empty.
Now, I have three issues with the code above. Could someone please clarify it to me, I'm new to JSF2.
the first is, why both command buttons behave the same? clicking on ether one would refresh the whole page.
the second issue is, why clicking on the non AJAX commandButton adds two Inputfieds at a time?
the third is, why changing the scope of the managed bean to #SessionScoped will give an error once you load the page? ( somehow just loading the page, the form issues an ajax request without me clicking on the commandButton. Why is that?
Try the following, that should work better.
<h:commandButton value="Add with AJAX" id="ajaxBtn" >
<f:ajax onevent="click" execute="ajaxBtn"
render="dynamic"
listener="#{dynamicPanel.adddynamic()}"
</h:commandButton>
As far as I know, for f:ajax execute attribute the id of the components should be given, and you should call methods such as addDynamic() in listener attribute.
When you click on the non-ajax button, it posts the whole form which also includes your ajax command. so basically your addDynamic() function is called twice, one through ajax command and the second through non-ajax command..
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 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."