I have a facelets tag like this:
<ui:composition>
<h:outputText value="#{label}"/>
<h:inputText id="input" value="#{value}"/>
<h:message for="input"/>
</ui:composition>
Now if I inlcude this facelets tag twice on the same page, I get an exception complaining about duplicate compoment ids. One solution proposed here https://stackoverflow.com/a/21572756/1785730 was to supply a prefix for the id. However, I find it cumbersome having to come up with an id prefix every time I use this facelets tag. By the way, I don't need the id of the h:inputText outside of the tag.
So I'm thinking of two ways how I can fix this:
Is there a way to link the h:message to the h:inputText without having to specify ids?
If not, I could wrap the tag with a NamingContainer. Which element would be appropriate for that? I can't use h:form here, because that tag already goes into a form.
Your page should be like this
<f:view contracts="default" transient="false">
<ui:composition template="/template.xhtml">
<ui:define name="content">
<h:form>
inputs
</h:form>
</ui:define>
</ui:composition>
</f:view>
inside ui composition you should have ui define and in it form and inputs.
I use jsf 1.2 yet
I want to do something like this:
<c:if test="#{'1' eq '1'}">
<ui:define name="title">
<h:panelGrid columns="2" style="background-color: lightblue;">
My special super title
</h:panelGrid>
</ui:define>
</c:if>
this does not work - e.g. even though '1' eq '1' is always true, the ui:define only works when using it without c:if
Is there another way to achieve this?
The usecase is that I have a parent template.xhtml with something like this
<ui:define name="title">
#{empty pageTitle ? 'MyAppName' : pageTitle}
</ui:define>
And I have two applications, App1 and App2. For App1 I have to keep the title as is, e.g.:
#{empty pageTitle ? 'MyAppName' : pageTitle}
for App2 I have to add something fancy there, e.g. the silly panelGrid.
Is there some other semi-clean way around this?
EDIT i have to mention that both apps are using the same pages and templates
Shouldn't this line of code render a inputtext field with the placeholder text "fill me" when using html5?
<h:inputText placeholder="fill me" />
I do not see any placeholder text. I thought everything that was not JSF was passed to the browser for rendering?
I thought everything that was not JSF was passed to the browswer for rendering?
This assumption is thus wrong. Unspecified component attributes are ignored by the JSF renderers.
You have basically the following options to get it to work:
If you're already on JSF 2.2 or newer, set it as a passthrough attribute.
<... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
<h:inputText a:placeholder="fill me" />
Note that I use a XML namespace prefix of a ("attribute") instead of p as shown in the tutorial, as it would otherwise clash with default XML namespace prefix p of PrimeFaces.
Implement a custom renderer for <h:inputText> wherein you explicitly check and write the attribute.
Implement a custom component which uses the aforementioned custom renderer.
Implement a JS based solution wherein you grab the element from DOM and explicitly set the attribute.
Look for a component library which supports this out the box. PrimeFaces for example has a <p:watermark> for this purpose with nice JS based graceful degradation for browsers which does not support the placeholder attribute on inputs.
See also:
Custom HTML tag attributes are not rendered by JSF
You can achieve it either with placeholder attribute or with p:watermark if using Primefaces and JSF 2.0+ or, when JSF 2.2 available, you can use pt:placeholder attribute.
Primefaces
<p:inputText id="search_input_id" value="#{watermarkBean.keyword}"
required="true" label="Keyword" placeholder="fill me" />
Legacy browser support (Adds JS solution):
<p:inputText id="search_input_id" value="#{watermarkBean.keyword}"
required="true" label="Keyword" />
<p:watermark for="search_input_id" value="fill me" />
JSF 2.2 (without PF)
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
</h:head>
<h:body>
<h:inputText value="#{bean.value}" pt:placeholder="fill me"/>
</h:body>
</html>
Which basically generates an HTML 5
<input placeholder="fill me" />
Check out this answer.
With JSF 2.2 you can passthrough unspecified attributes like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
>
<h:inputText p:placeholder="fill me"></h:inputText>
In case you are using RichFaces, starting in version 4.3, you can use the tag "rich:placeholder" for this purpose as shown here. Basically:
<h:inputText id="myInput">
<rich:placeholder value="My placeholder text"></rich:placeholder>
</h:inputText>
Try this
<h:inputText id="name" value="#{login.userId}" class="aux1" />
<h:inputSecret id="password" value="#{login.password}" redisplay="true" class="aux2" autocomplete="off" />
<script>
$('.aux1').attr('placeholder', 'Introducir Usuario');
$('.aux2').attr('placeholder', 'Introducir Contraseña');
</script>
With jQuery, this works right for me.
It's very easy and browser independent code as BaluSc told,
In primefaces, use p:watermark to get the required functionality.
Official Demo is HERE
Use primeface 4.0. Versions below this version do not support the placeholder attribute.
use name space xmlns:pt="http://java.sun.com/jsf/passthrough".
p:inputTextarea id="textAreaValue" pt:placeholder="your text"
don't insert a new line in inputTextArea.
The simplest way to render an input field with a placeholder text is to use the elementary input tag
Example:
<input type="text" placeholder="Fill me" value="#{EL}"/>
Note: you dont have to include any namespaces
<h:head>
</h:head>
<h:body>
<h:inputText value="#{bean.value}" placeholder="fill me"/>
</h:body>
This works right for me, try it!
I am using facelets for templating in my jsf application. I would like to including a template file conditionally in ui:composition tag. If user is logged in the template must be "authorized.xhtml" and if the user is not logged in then the template must be "unauthorized.xhtml". Is there a way to do it? Thanks.
<ui:composition template="/templates/unauthorized.xhtml">
<ui:composition template="/templates/authorized.xhtml">
I am using JSF 1.2.
I would try ternary operation on isAuthorized() attribute, if you have one in your log-in bean:
<ui:composition template="#{loginbean.authorized ? '/templates/authorized.xhtml' : '/templates/unauthorized.xhtml'}">
Or use two <h:panelGroup> tags with appropriate rendered values:
<h:panelGroup rendered="#{loginbean.authorized}">
<ui:decorate template="/templates/authorized.xhtml">
</h:panelGroup>
<h:panelGroup rendered="#{not loginbean.authorized}">
<ui:decorate template="/templates/unauthorized.xhtml">
</h:panelGroup>
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<html xmlns="http://www.w3c.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css"/>
</h:head>
<h:body>
<center>
<p:panel header="Login Form" style="width: 350;">
<h:form>
<h:panelGrid columns="2" cellpadding="2">
<h:outputLabel for="#{UserManagedBean.username}" value="UserName"/>
<h:inputText value="#{UserManagedBean.username}" label="UserName"/>
<h:outputLabel for="#{UserManagedBean.password}" value="Password"/>
<h:inputSecret value="#{UserManagedBean.password}"/>
<h:commandButton type="submit" value="Login" action="#{UserManagedBean.login}"/>
</h:panelGrid>
</h:form>
</p:panel>
<div>
<h:messages/>
</div>
</center>
</h:body>
</html>
What could be the possible problem here? I really don't know.
This XML file does not appear to have any style information associated with it. The document tree is shown below.
This is a typical MSIE warning message whenever you request a X(HT)ML file which does not have a XSL stylesheet (which is basically like CSS for HTML).
That you're getting this on a Facelet page can only mean that the request URL did not match the URL pattern of the FacesServlet as definited in your webapp's web.xml. In other words, the FacesServlet has never got any chance to run, parse that Facelet file and do all the JSF works to generate a bunch of HTML so that the webbrowser has something sensible to work with.
There are 2 solutions for this problem:
Fix your request URL (the one in browser address bar) to match the URL pattern of the FacesServlet in web.xml. If it is for example <url-pattern>*.jsf</url-pattern>, then you need to replace .xhtml extension in URL by .jsf.
Change the URL pattern of your FacesServlet to <url-pattern>*.xhtml</url-pattern>. This way you do not need to worry about accidently seeing XHTML source anymore.
Please note that this all has nothing to do with "autosuggest problem". Work yourself through some basic JSF tutorials first. Our JSF wiki page has some good links.
Oh, before I forgot, the <center> element is deprecated since HTML4 in 1998. Do not use it. Use CSS margin: 0 auto;. Try to avoid reading tutorials/books older than 2 years.