Hello I have a form that is rendered with a panelgrid with 3 columns like this:
Label-InputField-ErrorMessage
I want to add some checkboxes but I have trouble with the alignment.
<h:panelGrid columns="3">
<h:outputText value="Όνομα:"></h:outputText>
<h:inputText id="name" value="#{regBean.name}" required="true"
requiredMessage="Παρακαλώ εισάγετε όνομα!"
>
<f:validator validatorId="nameValidator" />
</h:inputText>
<h:message id="namemsg" for="name" style="color:red"></h:message>
<h:outputText value="Επώνυμο:"></h:outputText>
<h:inputText id="surname" value="#{regBean.surname}" required="true"
requiredMessage="Παρακαλώ εισάγετε επώνυμο"
>
<f:validator validatorId="nameValidator" />
</h:inputText>
<h:message for="surname" style="color:red"></h:message>
<h:outputText value="Ενδιφέρομαι για"></h:outputText>
<h:selectManyCheckbox>
<f:selectItem itemValue="1" itemLabel="Number1 - 1" />
<f:selectItem itemValue="2" itemLabel="Number1 - 2" />
<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
<f:selectItem itemValue="4" itemLabel="Number1 - 4" />
</h:selectManyCheckbox>
<h:commandButton type="submit" value="Submit"></h:commandButton>
<h:commandButton type="reset" value="Reset"></h:commandButton>
</h:panelGrid>
Without selectboxes:
This is what I get when I add them:
I want something like this:
I tried adding html tags inside the h:panelGrid but it failed. Is there any way to achieve it only with css/html/jsf?
Thx in advnace
It was easier than I thought. I had to add layout="pageDirection" at the <h:selectManyCheckbox> and wrap the selections in a panelGroup
The fixed code:
<h:outputText value="Ενδιαφέρομαι για"></h:outputText>
<h:panelGroup layout="block">
<h:selectManyCheckbox layout="pageDirection">
<f:selectItem itemValue="1" itemLabel="Item 1" />
<f:selectItem itemValue="2" itemLabel="Item 2" />
<f:selectItem itemValue="3" itemLabel="Item 3" />
<f:selectItem itemValue="4" itemLabel="Item 4" />
</h:selectManyCheckbox>
</h:panelGroup>
Related
I am trying to use dataScroller to show elements of a database table. It shows all the elements correctly but when I try to use some actions it only works for the last element like:
<p:commandButton value="vote"
action="#{avisBean.updateAvis(in,email)}">
and
<p:commandButton value="commenter" icon="ui-icon-check"
action="#{avisBean.addAvis(in,email)}">`
and for the others nothings enters to the database just empty string. How can I correct this?
This is the code:
<h:form id="commandLink">
<p:dataScroller value="#{ideeBean.idees}" var="in" chunkSize="10"
mode="inline" scrollHeight="500">
<f:facet name="header">
Les Idées
</f:facet>
<h:panelGrid columns="1" style="width:100%"
columnClasses="logo,detail">
<!-- <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> -->
<p:outputPanel>
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="#{msg['idee.titre']}" />
<h:outputText value="#{in.titre}" style="font-weight: bold" />
<h:outputText value="#{msg['idee.description']}" />
<h:outputText value="#{in.description}"
style="font-weight: bold" />
<h:outputText value="#{msg['idee.theme']}" />
<h:outputText value="#{in.theme}" style="font-weight: bold" />
<h:outputText value="#{msg['idee.type']}" />
<h:outputText value="#{in.type}" style="font-weight: bold" />
<!-- *******************Rating**************** -->
</h:panelGrid>
</p:outputPanel>
<h:panelGrid columns="4" cellpadding="5">
<p:commandButton value="details"
action="details?faces-redirect=true"
actionListener="#{ideeBean.attrListener}">
<f:attribute name="idee" value="#{in}" />
</p:commandButton>
<!--************************************** -->
<p:selectOneMenu id="console" value="#{avisBean.avis.score}"
style="width:125px" converter="javax.faces.Integer">
<f:convertNumber integerOnly="true" />
<f:selectItem itemLabel="Choisir" itemValue="" />
<f:selectItem itemLabel="Horrible" itemValue="1" />
<f:selectItem itemLabel="médiocre" itemValue="2" />
<f:selectItem itemLabel="Bon" itemValue="3" />
<f:selectItem itemLabel="Trés Bon" itemValue="4" />
<f:selectItem itemLabel="Excellent" itemValue="5" />
</p:selectOneMenu>
<p:commandButton value="vote"
action="#{avisBean.updateAvis(in,email)}">
</p:commandButton>
</h:panelGrid>
<!-- ***************************comments******************** -->
<p:dataScroller id="growl"
value="#{ideeBean.getAllAvisList(in.id)}" var="a" chunkSize="2">
<f:facet name="header">
commentaires
</f:facet>
<f:facet name="loader">
<p:commandButton type="button" value="Plus"
icon="ui-icon-circle-triangle-s" />
</f:facet>
<h:panelGrid columns="1">
<!-- <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> -->
<p:outputPanel>
<h:panelGrid columns="4" cellpadding="5">
<h:outputText value="#{a.user_avis.nom}" />
<p:inplace id="ajax" editor="true">
<p:ajax event="save" listener="#{avisBean.updateAvis(a)}" />
<h:inputText value="#{a.commentaire}"
style="font-weight: bold" rendered="#{not empty a.commentaire}" />
</p:inplace>
<p:commandButton value="Supprimer"
action="#{ideeBean.deleteAvisById(in.id,a.id)}"
icon="ui-icon-arrowrefresh-1-w"
rendered="#{utilisateurBean.getAllAvis(a,userid)}">
<f:param name="userid" value="#{loginBean.id}"></f:param>
</p:commandButton>
</h:panelGrid>
</p:outputPanel>
</h:panelGrid>
</p:dataScroller>
<!-- ***************************************** -->
<h:panelGrid columns="1">
<p:inputTextarea rows="2" cols="50" id="comment"
value="#{avisBean.avis.commentaire}" />
<p:commandButton value="commenter" icon="ui-icon-check"
action="#{avisBean.addAvis(in,email)}">
<f:param name="email" value="#{loginBean.email}"></f:param>
</p:commandButton>
</h:panelGrid>
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="resources/images/separateurr.png" />
</h:panelGrid>
</h:panelGrid>
</p:dataScroller>
</h:form>
I want to add tooltip for selectitem while doing mouse over on each item.
Here is my code
<h:selectOneRadio id="class" styleClass="bold" rendered="# {bean.campusObject.campus=='C'}" value="#{bean.type}">
<f:selectItem itemLabel=" Dept " itemValue="1" />
<f:selectItem itemLabel="Course " itemValue="2" />
<f:selectItem itemLabel="Course with Dept" itemValue="3" />
<f:selectItem itemLabel="Specialization" itemValue="4" itemDisabled="#{!bean.level.equals('PG')}"/>
<f:ajax render="cours" ></f:ajax>
</h:selectOneRadio>
You can do it by implementing a custom layout for the selectOneRadio component as follows:
<p:selectOneRadio id="radioGroup" layout="custom"
value="#{bean.radioValue}" disabled="#{bean.disabled}">
<f:selectItems value="#{bean.radioItems}" var="r"
itemLabel="#{r.label}" itemValue="#{r}" />
<p:ajax />
</p:selectOneRadio>
<h:panelGrid columns="2" styleClass="radioLayout">
<c:forEach var="r" items="#{bean.radioItems}" varStatus="status">
<p:radioButton for="radioGroup" disabled="#{bean.disabled}"
itemIndex="#{status.index}" id="radio${r.id}" />
<h:panelGroup>
<p:outputLabel value="#{r.label}" title="Your tooltip" />
</h:panelGroup>
</c:forEach>
</h:panelGrid>
Presently I am showing error messages at top location. But I want to show at place where i want i.e. near field. means error message for user name must be near to it.
When i am placing that tag there than it is showing null resource error.
<!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"
xmlns:p="http://primefaces.org/ui">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Prime Faces Demo</title>
<link rel="stylesheet" href="second.css" type="text/css" />
</head>
<body>
<h:body>
<f:view>
<f:loadBundle var="mg" basename="messages1"></f:loadBundle>
<h:message for="firstname" style="color:red"></h:message>
<br></br>
<h:message for="lastname" style="color:red"></h:message>
<br></br>
<h:message for="pass" style="color:red"></h:message>
<br></br>
<h:message for="date" style="color:red"></h:message>
<br></br>
<h:message for="cpass" style="color:red"></h:message>
<br></br>
<h:message for="gender" style="color:red"></h:message>
<br></br>
<h:message for="nation" style="color:red"></h:message>
<br></br>
<h:message for="faci" style="color:red"></h:message>
<br></br>
<h:message for="padd" style="color:red"></h:message>
<br></br>
<h:message for="tadd" style="color:red"></h:message>
<br></br>
<h:message for="email" style="color:red"></h:message>
<br></br>
<h:message for="phone" style="color:red"></h:message>
<br></br>
<h:message for="quali" style="color:red"></h:message>
<br></br>
<h:message for="state" style="color:red"></h:message>
<br></br>
<h:message for="hobby" style="color:red"></h:message>
<br></br>
<h:message for="zone" style="color:red"></h:message>
<br></br>
<h:form>
<h:panelGrid columns="2" width="1000">
<h:panelGrid columns="2" width="600">
<p:outputLabel value="Enter first name" style="font-weight:bold"></p:outputLabel>
<h:inputText requiredMessage="#{mg.firstname}" value="#{Userdeatil.firstname}"
required="true" id="firstname">
</h:inputText>
<p:outputLabel value="Enter last name" style="font-weight:bold" ></p:outputLabel>
<h:inputText requiredMessage="#{mg.lastname}" value="#{Userdeatil.lastname}"
required="true" id="lastname">
</h:inputText>
<p:outputLabel value="Enter password" style="font-weight:bold"></p:outputLabel>
<p:password value="#{Userdeatil.password}" required="true" requiredMessage="#{mg.password}" id="pass"></p:password>
<p:outputLabel value="ReEnter password" style="font-weight:bold"></p:outputLabel>
<p:password value="#{Userdeatil.conpassword}" required="true" requiredMessage="#{mg.confrom}" id="cpass"></p:password>
<p:outputLabel value="Enter Date of Birth" style="font-weight:bold"></p:outputLabel>
<h:inputText requiredMessage="#{mg.birth}" value="#{Userdeatil.dob}"
required="true" id="date">
</h:inputText>
<p:outputLabel value="Select Gender" style="font-weight:bold" ></p:outputLabel>
<p:selectOneRadio value="#{Userdeatil.gender}" required="true" id="gender" requiredMessage="#{mg.gender}">
<f:selectItem itemValue="male" itemLabel="Male"></f:selectItem>
<f:selectItem itemValue="female" itemLabel="Female"></f:selectItem>
</p:selectOneRadio >
<p:outputLabel value="Select Nationality" style="font-weight:bold"></p:outputLabel>
<p:selectOneRadio value="#{Userdeatil.nation}" required="true" id="nation" requiredMessage="#{mg.nation}" >
<f:selectItem itemValue="indian" itemLabel="Indian"></f:selectItem>
<f:selectItem itemValue="nonindian" itemLabel="NonIndian"></f:selectItem>
<f:selectItem itemValue="nri" itemLabel="NRI"></f:selectItem>
</p:selectOneRadio >
<p:outputLabel value="Select Account Facilities" style="font-weight:bold" ></p:outputLabel>
<h:selectManyCheckbox required="true" id="faci" requiredMessage="#{mg.faci}">
<f:selectItem itemValue="1" itemLabel="Online banking"></f:selectItem>
<f:selectItem itemValue="2" itemLabel="Credit Card"></f:selectItem>
<f:selectItem itemValue="3" itemLabel="Debit Card"></f:selectItem>
<f:selectItem itemValue="4" itemLabel="All"></f:selectItem>
</h:selectManyCheckbox>
<p:outputLabel value="Permanent Address" style="font-weight:bold"></p:outputLabel>
<p:inputTextarea value="#{Userdeatil.tadd}" required="true" id="padd" requiredMessage="#{mg.padd}"></p:inputTextarea>
<p:outputLabel value="Temporary Address" style="font-weight:bold"></p:outputLabel>
<p:inputTextarea value="#{Userdeatil.padd}" required="true" id="tadd" requiredMessage="#{mg.tadd}"></p:inputTextarea>
<p:outputLabel value="Select if both are same" style="font-weight:bold"></p:outputLabel>
<p:selectBooleanCheckbox value="#{Userdeatil.same}"></p:selectBooleanCheckbox>
<p:outputLabel value="Select Zone" style="font-weight:bold"></p:outputLabel>
<h:selectOneMenu value="#{Userdeatil.zone}" id="zone" requiredMessage="#{mg.zone}">
<f:selectItem itemLabel="Northern" itemValue="" />
<f:selectItem itemLabel="Western"></f:selectItem>
<f:selectItem itemLabel="Eastern"></f:selectItem>
<f:selectItem itemLabel="Southern"></f:selectItem>
<f:selectItem itemLabel="Central"></f:selectItem>
</h:selectOneMenu>
<p:commandButton value="Submit" action="#{Userdeatil.check}"/>
</h:panelGrid>
<h:panelGrid columns="2" >
<p:outputLabel value="Enter email" style="font-weight:bold"></p:outputLabel>
<p:inputText value="#{Userdeatil.email}" required="true" id="email" requiredMessage="#{mg.email}">
</p:inputText>
<p:outputLabel value="Enter phone number" style="font-weight:bold" ></p:outputLabel>
<p:inputText value="#{Userdeatil.phone}" required="true" id="phone" requiredMessage="#{mg.phone}"></p:inputText>
<p:outputLabel value="Enter qualification" style="font-weight:bold"></p:outputLabel>
<p:inputText value="#{Userdeatil.quali}" required="true" id="quali" requiredMessage="#{mg.quali}"></p:inputText>
<p:outputLabel value="Enter State" style="font-weight:bold"></p:outputLabel>
<p:inputText value="#{Userdeatil.state}" required="true" id="state" requiredMessage="#{mg.state}"></p:inputText>
<p:outputLabel value="Enter Hobby" style="font-weight:bold"></p:outputLabel>
<p:inputMask value="#{Userdeatil.hobbey}" required="true" id="hobby" requiredMessage="#{mg.hobby}"/>
</h:panelGrid>
</h:panelGrid>
</h:form>
</f:view>
</h:body>
</body>
</html>
i have been using the code below to enter some details into a mysql table, this was working perfectly fine, except i wanted to add more validation and make it look more professional so i decided to use a primefaces library for this, while it does submit the data, it no longer passes it to the db, why is this aas the only thing i have changed is the way the user enters data for looks
heres the working original
<h:form>
<h:messages showDetail="true" />
<h:outputText value="Enter Id : "/>
<h:inputText value="#{user.userID}"/>
<br></br>
<h:outputText value="Enter Name : " />
<h:inputText value="#{user.name}" />
<br></br>
<h:outputText value="Enter your address : "/>
<h:inputText value="#{user.address}" />
<br></br>
<h:outputText value="Enter Created Date : "/>
<h:inputText value="#{user.created_date}">
<f:convertDateTime pattern="yyyy-MM-dd"/>
</h:inputText>
<br></br>
<h:outputText value="Enter email address : "/>
<h:inputText id="email" value="#{user.email}"
size="20" required="true" label="Email Address">
<f:validator validatorId="richard.test.EmailValidator" />
</h:inputText>
<br></br>
<h:message for="email" style="color:red" />
<h:commandButton value="Insert" action="#{user.add}"/>
</h:form>
This is the improved looking one but no longer works
<h:body>
<h:form id="form">
<p:panel id="panel" header="New Person" style="margin-bottom:10px;">
<p:messages id="messages" />
<h:panelGrid columns="3">
<h:outputLabel for="name" value="name: *" />
<p:inputText id="name"
value="#{user.name}" required="true" label="name"/>
<p:message for="name" />
<h:outputLabel for="address" value="address: *" />
<p:inputText id="address"
value="#{user.address}" required="true" label="address"/>
<p:message for="address" />
<h:outputLabel for="Id" value="Id *" />
<p:inputText id="Id"
value="#{user.userID}" required="true" label="Id"/>
<p:message for="Id" />
<h:outputLabel for="Date" value="Date *" />
<p:inputText id="Date"
value="#{user.created_date}" required="true" label="Date"/>
<p:message for="Id" />
</h:panelGrid>
</p:panel>
<p:commandButton value="Ajax Submit" update="panel,display" id="ajax"
actionListener="#{user.add}" styleClass="ui-priority-primary"/>
<!--<p:commandButton value="Non-Ajax Submit" actionListener="{user.add}"
ajax="false" />
-->
<p:panel id="display" header="Information" style="margin-top:10px;">
<h:panelGrid columns="2">
<h:outputText value="name " />
<h:outputText value="#{user.name}" />
</h:panelGrid>
</p:panel>
</h:form>
What would cause this from happening? The backing bean etc have not been changed at all.
I have an issue with primefaces datagrid.I am trying to update the dialog box with the selected values on click of p:commandLink.
The Dialog doesnt display any values initially but it gets updated with the previously selected values when i refresh the page and click on commandLink.
I am using primefaces-2.2.1 on JBoss 4.3.0.Any help would be appreciated.
<p:column>
<p:panel header="#{loc.loc_details}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="/user/xyz/resources/images/#{loc.loc_details}.jpg"/>
<h:outputText value="#{loc.locality}" />
<h:outputText value="#{loc.city}" />
<h:outputText value="#{loc.state}" />
<p:commandLink update="locDetail,locDetailGrid" oncomplete="locDialog.show()" title="View Detail" border="0" >
<p:graphicImage value="/user/xyz/resources/images/imagesCA6ETPOM.jpg" />
<f:setPropertyActionListener value="#{loc}"
target="#{tutorialsBean.selectedLocality}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:column>
<p:dialog header="Loc Detail" widgetVar="locDialog" modal="true">
<p:outputPanel id="locDetail" style="text-align:center;" layout="block">
<h:panelGrid id="locDetailGrid" columns="2" cellpadding="5">
<h:outputLabel for="loc_details" value="Locality Details :" />
<h:outputText id="loc_details" value="#{tutorialsBean.selectedLocality.loc_details}" />
<h:outputLabel for="city" value="City: " />
<h:outputText id="city" value="#{tutorialsBean.selectedLocality.city}" />
<h:outputLabel for="state" value="State: " />
<h:outputText id="state" value="#{tutorialsBean.selectedLocality.state}" />
<h:outputText styleClass="text_normal" value="First Name" />
<p:inputText id="fnameText" value="#{tutorialsBean.firstName}" />
<h:outputText styleClass="text_normal" value="Last Name" />
<p:inputText id="lnameText" value="#{tutorialsBean.lastName}" />
<h:outputText styleClass="text_normal" value="Email" />
<p:inputText id="emailText" value="#{tutorialsBean.email}" />
<p:commandButton id="searchButton"
value="Submit" action="#{tutorialsBean.submitValues}"
styleClass="button" />
</h:panelGrid>
</p:outputPanel>
in you commandLink add the update and process attributes in your dialog to refresh the information.
like this:
Put the ID in dialog:
<p:dialog header="Loc Detail" id="locDialog" widgetVar="locDialog" modal="true">
Put the Update to dialog:
<p:commandLink update="locDetail,locDetailGrid" oncomplete="locDialog.show()" title="View Detail" border="0" update="locDialog" process="#this" ajax="true" partialSubmit="true" >
<p:graphicImage value="/user/xyz/resources/images/imagesCA6ETPOM.jpg" />
<f:setPropertyActionListener value="#{loc}" target="#{tutorialsBean.selectedLocality}" />
</p:commandLink>