h:inputText between p:selectManyCheckbox items - jsf

Is it possible, on some way, to display an h:inputText between the selectItems of a p:selectManyCheckbox?
What I'd like to have is:
checkbox1
checkbox2
inputTextIfCheckbox2IsMarked (disabled if not marked..)
checkbox 3
checkbox 4
I know how to do the enable/disable etc of the checkbox, but outside of the selectItems. I'd like to put it between them.
Is that possible on SOME way?
My solution is (with the inputText not between the selectItems):
<h:panelGrid columns="2">
<p:selectManyCheckbox converter="otherAdmissionReasonConverter"
id="otherAdmissionReasonCheckbox"
value="#{potentialDonorFileBackingBean.potentialDonorFile.generalPatientInformation.otherAdmissionReasons}"
layout="grid" columns="1">
<f:selectItems value="#{patientInformationBackingBean.otherAdmissionReasons}"
var="otherAdmissionReason"
itemValue="#{otherAdmissionReason}"
itemLabel="#{msgs['ar.'.concat(otherAdmissionReason)]}"/>
<p:ajax update="customAdmissionReasonGrid"/>
</p:selectManyCheckbox>
<h:panelGroup id="customAdmissionReasonGrid"
styleClass="customAdmissionReason">
<p:inputText id="customAdmissionReason"
disabled="#{!potentialDonorFileBackingBean.potentialDonorFile.generalPatientInformation.otherAdmissionReasonChecked()}"
value="#{potentialDonorFileBackingBean.potentialDonorFile.generalPatientInformation.customAdmissionReason}"/>
</h:panelGroup>
</h:panelGrid>
PrimeFaces: 5.2

For PrimeFaces < 5.2.3 you can't. For PrimeFaces >=5.2.3 you can use a custom layout like this (© PrimeFaces)
<h3>Custom Layout (since v5.2.3)</h3>
<p:outputPanel id="customPanel" style="margin-bottom:20px">
<p:selectManyCheckbox id="custom" value="#{checkboxView.selectedConsoles2}" layout="custom">
<f:selectItem itemLabel="Xbox SixSixSix" itemValue="Xbox SixSixSix" />
<f:selectItem itemLabel="PS9" itemValue="PS9" />
<f:selectItem itemLabel="Wii Them" itemValue="Wii Them" />
</p:selectManyCheckbox>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<h:outputLabel for="opt1" value="Xbox SixSixSix" style="display:block"/>
<p:checkbox id="opt1" for="custom" itemIndex="0" />
</div>
Some Custom Text between item 1 and 2
<div class="ui-grid-col-4">
<h:outputLabel for="opt2" value="PS9" style="display:block"/>
<p:checkbox id="opt2" for="custom" itemIndex="1" />
</div>
<div class="ui-grid-col-4">
<h:outputLabel for="opt3" value="Wii Them" style="display:block"/>
<p:checkbox id="opt3" for="custom" itemIndex="2" />
</div>
</div>
</div>
</p:outputPanel>

Related

primefaces selectOneMenu not working in Dialog

I have this dialog:
The code for this dialog:
<p:dialog header="Détails du produit" showEffect="fade" modal="true"
widgetVar="manageProductDialog" responsive="true">
<p:outputPanel id="manage-product-content" class="ui-fluid">
<p:outputPanel rendered="#{not empty productMB.selectedProduct}">
<p:graphicImage
name="images/product/#{productMB.selectedProduct.img}"
library="demo" styleClass="product-image"
rendered="#{not empty productMB.selectedProduct.img}" />
<div class="p-field">
<p:outputLabel for="name">Nom</p:outputLabel>
<p:inputText id="name" value="#{productMB.selectedProduct.name}"
required="true" />
</div>
<div class="p-field">
<p:outputLabel for="category">Catégorie</p:outputLabel>
<p:selectOneMenu id="category"
value="#{productMB.selectedProduct.category}"
layout="responsive">
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{categoryMB.categories}" var="cat" itemValue="#{cat}" itemLabel="#{cat.name}" />
</p:selectOneMenu>
</div>
<div class="p-formgrid p-grid">
<div class="p-field p-col">
<p:outputLabel for="price">Prix</p:outputLabel>
<p:inputNumber id="price"
value="#{productMB.selectedProduct.price}" symbol=" DH"
symbolPosition="s" decimalSeparator="." thousandSeparator="," />
</div>
</div>
</p:outputPanel>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton value="Enregister" icon="pi pi-check"
actionListener="#{productMB.saveProduct}"
update="manage-product-content"
process="manage-product-content #this" />
<p:commandButton value="Annuler" icon="pi pi-times"
onclick="PF('manageProductDialog').hide()"
class="ui-button-secondary" />
</f:facet>
</p:dialog>
The problem I have is that when I click on Enregister button the p:selectOneMenu is not validated even that a value was selected.
How can I solve this issue ?

<p:selectOneMenu> generates input field behind select box

I'm trying to associate a label tag with my dropdown menu to make it accessible to screen readers. I've noticed that when using p:selectOneMenu primefaces generates an input element that should not be there. When applying p:outputLabel, it appears to work fine (ie you click on the label text and focus moves to the dropdown menu). However it turns out that the focus is in fact moving to the input element and the select element is not keyboard accessible (tabindex="-1"). Here's an example taken from the primefaces website:
http://www.primefaces.org/showcase/ui/input/oneMenu.xhtml
<h:form>
<p:messages autoUpdate="true" />
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:outputLabel for="console" value="Basic:" />
<p:selectOneMenu id="console" value="#{selectOneMenuView.console}" style="width:125px">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
<p:outputLabel for="car" value="Grouping: " />
<p:selectOneMenu id="car" value="#{selectOneMenuView.car}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.cars}" />
</p:selectOneMenu>
<p:outputLabel for="city" value="Editable: " />
<p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.cities}" />
</p:selectOneMenu>
<p:outputLabel for="advanced" value="Advanced:" />
<p:selectOneMenu id="advanced" value="#{selectOneMenuView.theme}" converter="themeConverter" panelStyle="width:180px"
effect="fade" var="t" style="width:160px" filter="true" filterMatchMode="startsWith">
<f:selectItems value="#{selectOneMenuView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />
<p:column style="width:10%">
<h:outputText styleClass="ui-theme ui-theme-#{t.name}" />
</p:column>
<p:column>
<h:outputText value="#{t.displayName}" />
</p:column>
</p:selectOneMenu>
</h:panelGrid>
<p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-check" />
<p:dialog header="Values" modal="true" showEffect="bounce" widgetVar="dlg" resizable="false">
<p:panelGrid columns="2" id="display" columnClasses="label,value">
<h:outputText value="Basic:" />
<h:outputText value="#{selectOneMenuView.console}" />
<h:outputText value="Grouping:" />
<h:outputText value="#{selectOneMenuView.car}" />
<h:outputText value="Editable" />
<h:outputText value="#{selectOneMenuView.city}" />
<h:outputText value="Advanced:" />
<h:outputText value="#{selectOneMenuView.theme.displayName}" />
</p:panelGrid>
</p:dialog>
When you look at the page with just the html loaded, you can see each p:selectOneMenu generates an input as well as a select.
<td>
<label id="j_idt88:j_idt91" class="ui-outputlabel ui-widget" for="j_idt88:console_focus">Basic:</label>
</td>
<div id="j_idt88:console" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" style="width:125px">
<div class="ui-helper-hidden-accessible">
<input id="j_idt88:console_focus" name="j_idt88:console_focus" type="text" autocomplete="off">
</div>
<div class="ui-helper-hidden-accessible">
<select id="j_idt88:console_input" name="j_idt88:console_input" tabindex="-1" data-p-label="Basic" data-p-hl="onemenu">
<option value="">Select One</option><option value="Xbox One">Xbox One</option>
<option value="PS4">PS4</option>
<option value="Wii U">Wii U</option>
</select>
</div>
<label id="j_idt88:console_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">Select One</label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
</div>
</div>
I'm looking to have the dropdown menu to behave like the JSF one h:selectOneMenu (when it comes to accessibility). Specific to the example, I want the "Basic:" label associated with it's dropdown menu so that when you click "Basic" focus moves to the dropdown menu. I also want a screen reader to actually treat it as a select element rather than an input element. So far I can't find a way to do this because of that input element that's generated. I'm currently using Primefaces 5.2. Does anyone know a way to prevent this input element from being generated?
I gave up on the p:selectOneMenu for two reasons : it is not accessible and it is a pain to use on a mobile device because it doesn't bring the native control picker (the "spinning wheel" on the iPad for instance).
Instead I use the h:selectOneMenu customized with something like :
<h:selectOneMenu
styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all #{component.valid ? '' : 'ui-state-error'}"
onmouseover="$(this).addClass('ui-state-active')"
onmouseout="$(this).removeClass('ui-state-active')"
onfocus="$(this).addClass('ui-state-active ui-state-focus')"
onblur="$(this).removeClass('ui-state-active ui-state-focus')"/>
It doesn't look that bad, it is accessible and it works well with mobile device.

How to clear p:autoComplete values on page refresh or click back on browser in JSF using PrimeFaces?

using p:autoComplete to display city name and test name. Here i select one city name and/or test name Then refresh page Still displayed selected values and also after search goes to another page and then clicked on Back arrow on browser values are not clear.
Here we are using <p:autoComplete> to display dropdown values. Here is my code.
I tried with jQuery.
<script>
$(function () {
$("#homePageForm").attr("autocomplete", "off");
});
</script>
But it is not working.
<h:form id="homePageForm" styleClass="serform">
<p:panel id="validate_home" >
<div class="serbox subsel mydropbox">
<p:autoComplete dropdown="true"
required="true"
requiredMessage="Testname required"
id="testDD"
forceSelection="true"
maxlength="6"
cache="true"
update="testMsg"
queryDelay="100"
value="#{searchController.testName}"
completeMethod="#{searchController.completeTest}">
</p:autoComplete>
<p:message for="testDD" id="testMsg" />
<p:watermark for="testDD" value="Search TestName" id="testWatermark" />
</div>
<div class="serbox subsel mydropbox">
<p:autoComplete dropdown="true"
required="true"
requiredMessage="City Name required"
id="cityDD"
forceSelection="true"
maxlength="6"
cache="true"
queryDelay="100"
value="#{searchController.city}"
completeMethod="#{searchController.completeCity}">
<p:ajax event="itemSelect"
listener="#{searchController.onItemSelect}"
update="localityDD" />
</p:autoComplete>
<p:message for="cityDD" />
<p:watermark for="cityDD" value="Search City" id="cityWatermark" />
</div>
<div class="serbox subsel mydropbox">
<p:autoComplete dropdown="true"
required="false"
id="localityDD"
requiredMessage="Locality required"
forceSelection="true"
maxlength="6"
cache="true"
queryDelay="100"
value="#{searchController.locality}"
completeMethod="#{searchController.completeLocality}">
</p:autoComplete>
<p:watermark for="localityDD"
value="Search Locality"
id="localityWatermark" />
</div>
<div class="serbox subsel mydropbox">
<p:calendar required="false"
requiredMessage="Date required"
id="date"
value="#{searchController.date}"
pattern="MM/dd/yyyy">
<p:watermark for="date" value="Search Date" id="dateWatermark" />
</p:calendar>
<p:message for="date" />
</div>
<div class="serbox hserbtn">
<p:commandLink id="searchBtn"
update="validate_home"
action="#{searchController.simpleSearch}">
<p:graphicImage value="images/search_home.png" alt="" title="" />
</p:commandLink>
</div>
</p:panel>
</h:form>

Editable p:selectOneMenu

How to set placeholder in editable <p:selectOneMenu>?
In editable <p:selectOneMenu> of PrimeFaces, initial UI looks as below:
http://www.primefaces.org/showcase/ui/input/oneMenu.xhtml
(see the editable menu)
Is there a way to place a placeholder which says text like "Click to enter manual input" or to make user aware that this dropdown is editable.
Find the code snippet below for reference.
<div class="setupDataSection">
<div class="pageCenter pageCenterShortened">
<div style="float: left;" class="sectionTitle sectionTitleInline">
<h:outputLabel value="Tenant "/>
</div>
<div style="float: left; padding-left: 40px;">
<p:selectOneMenu id="tenant"
styleClass="ddlPOS"
style="width: 190px;"
label="Tenant"
value="#{onBoardingAction.selTenant}"
editable="true">
<p:watermark for="tenant"
value="Search with a keyword"
id="watermark" />
<f:selectItem itemLabel="Add new tenant" />
<f:selectItems value="#{onBoardingAction.tenants}" />
<p:ajax event="change"
execute="#this"
update="tenant region POS"
listener="#{onBoardingAction.settingRegions()}" />
</p:selectOneMenu>
</div>
</div>
</div>
Primefaces call it watermark SEE, If your SelectOneMenu is empty this water martk's text automatically appears
<p:watermark for="fileSize" value="Search with a keyword" id="watermark" />
Update
I have tested your code and It work fine for me if you are using template maybe your CSS overriding component try this, I just put p:watermark outside the component code:
<f:selectItem itemLabel="Add new tenant" />
<f:selectItems value="#{onBoardingAction.tenants}" />
<p:ajax event="change"
execute="#this"
update="tenant region POS""
listener="#{onBoardingAction.settingRegions()}" />
</p:selectOneMenu>
<p:watermark for="tenant"
value="Search with a keyword"
id="watermark" />
HOPE RESOLVED :)

JSF2 or primefaces p:selectManyCheckbox styling with icons

One question who styled manycheckboxes with icons?
<p:selectManyCheckbox value="#{Step4Bean.selectedItems}" id="tag-list" >
<f:selectItems value="#{Step4Bean.allItems}" var="item" itemLabel="#{item}" itemValue="#{item}"/>
</p:selectManyCheckbox>
I have check boxes with 6 items , I must have 2 rows with 3 items in each row, near each item must be one icon.
How we can solve this?
Here is a output example link
http://jpeg.am/images/?i=5692b9db7ea1d060bc7c97bcc788d6b8.jpg
PF already had the Grid layout for this component.
<h3>Grid Layout</h3>
<p:selectManyCheckbox id="grid" value="#{checkboxView.selectedCities}" layout="grid" columns="3">
<f:selectItems value="#{checkboxView.cities}" var="city" itemLabel="#{city}" itemValue="#{city}" />
</p:selectManyCheckbox>
But the latest PF 5.2.3 and 5.3-SNAPSHOT has custom layout options
<h3>Custom Layout (since v5.2.3)</h3>
<p:outputPanel id="customPanel" style="margin-bottom:20px">
<p:selectManyCheckbox id="custom" value="#{checkboxView.selectedConsoles2}" layout="custom">
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectManyCheckbox>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<p:checkbox id="opt1" for="custom" itemIndex="0" />
</div>
<div class="ui-grid-col-4">
<p:checkbox id="opt2" for="custom" itemIndex="1" />
</div>
<div class="ui-grid-col-4">
<p:checkbox id="opt3" for="custom" itemIndex="2" />
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<h:outputLabel for="opt1" value="Xbox One" />
</div>
<div class="ui-grid-col-4">
<h:outputLabel for="opt2" value="PS4" />
</div>
<div class="ui-grid-col-4">
<h:outputLabel for="opt3" value="Wii U" />
</div>
</div>
</div>
</p:outputPanel>
Not sure how and if the latest functionaly can be used with an <f:selectItems/> or only with multiple <f:selectItem/>. I suspect the latter
See also:
- See http://www.primefaces.org/showcase/ui/input/manyCheckbox.xhtml
(examples taken from the PF showcase!)

Resources