I have created a side menubar using the p:sidebar component. My problem is with accessibility. Using the tab key to navigate the page loses focus inside the unopened p:sidebar component. Meaning that when i navigate trough the page using the tab key, the focus goes inside the unopened p:sidebar, focus should only appear when the sidebar is open. How to correctly implement tab focus to the component and it's content? Also the xhtml included the p:sidebar contains p:link components that doesn't get tab focus at all when the p:sidebar is open.
My p:sidebar component:
<p:sidebar widgetVar="fssidebar" fullScreen="true" styleClass="ws-sidebar" onShow="document.getElementById('menuForm:foliLink').focus()" onHide="sidebarhide()">
<p:outputPanel id="menuPanel" styleClass="" style="float: left;">
<ui:include src="menu.xhtml"/>
</p:outputPanel>
</p:sidebar>
My menu.xhtml:
<?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">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<p:outputPanel id="menupanel">
<h:commandButton value="X" style="color:white" onclick="sidebarhide();" class="close" pt:aria-label="#{acc['header.closemenu']}" tabindex="0"/>
<h:form>
<p:remoteCommand name="sidebarhide" update="#all" global="false"/>
</h:form>
<h:form id="menuForm" style="float: left;">
<p:outputPanel>
<p:link value="Link to my page" href="https://www.mypage.com" target="_blank" tabindex="0"/>
</p:outputPanel>
<p:outputPanel>
<p:link value="Main Menu" href="#{ui['main.menu.url']}" target="_blank" tabindex="0" onkeydown="if(event.key==='Tab'){PF('myInplace').display.trigger('click');event.preventDefault();}"/>
</p:outputPanel>
<p:outputPanel>
<p:commandLink value="Menu Item 1" action="loading?faces-redirect=true" global="false" tabindex="0"/>
</p:outputPanel>
<p:outputPanel>
<p:commandLink value="Menu Item 2" action="profile?faces-redirect=true" styleClass="ws-menulink ws-font" global="false" tabindex="0"/>
</p:outputPanel>
<p:outputPanel>
<p:commandLink value="Menu Item 3" action="emv?faces-redirect=true" global="false" tabindex="0"/>
</p:outputPanel>
<p:outputPanel>
<p:link value="Menu Item 4" href="www.something.com" target="_blank" tabindex="0"/>
</p:outputPanel>
<p:outputPanel>
<p:link value="Menu Item 5" href="www.something.com" target="_blank" tabindex="0"/>
</p:outputPanel>
</h:form>
</ui:composition>
Related
i'm using jsf 2.2 primefaces 6.0 and i'm trying to add "pt:data-tooltip" on my commandButton but it seems that this attribute is unknown.I need help to make it acceptable.
Here the xhtml code of all the xhtml page:
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<ui:composition template="/facelets/template.xhtml">
<ui:define name="content">
<ul class="breadcrumb">
<li><i class="ace-icon fa fa-home home-icon"></i> Acceuil</li>
<li class="active">espace Administrateur</li>
</ul>
<!-- /.breadcrumb -->
</ui:define>
<ui:define name="pageContent">
<h:form id="form">
<p:panel header="ajouter Acte Médical">
<p:messages />
<p:panelGrid id="pan" columns="3">
<p:outputLabel value="Type acte medical *:" />
<p:inputText value="#{acteBean.acteMedical.typeActe}" id="input1"
placeholder="Type de l'acte médical" required="true"
requiredMessage="indiquez une valeur">
<f:validator validatorId="av" />
<p:ajax event="blur" update="button" process="#form"/>
</p:inputText>
<p:message id="m1" for="input1" />
<p:outputLabel value="Plafond *:" />
<p:inputNumber id="i1" value="#{acteBean.acteMedical.plafond}"
symbol=" DT" symbolPosition="s" placeholder="Plafond total"
decimalSeparator="," thousandSeparator="."
disabled="#{not empty acteBean.acteMedical.pourcentage}">
<f:ajax event="keyup" render="i2" />
</p:inputNumber>
<p:message id="m2" for="i1" />
<p:outputLabel value="Pourcentage des frais de remboursement *:" />
<p:inputNumber id="i2" value="#{acteBean.acteMedical.pourcentage}"
placeholder="% des frais de remboursements" symbolPosition="s"
symbol="%" disabled="#{not empty acteBean.acteMedical.plafond}">
<f:ajax event="keyup" render="i1" />
</p:inputNumber>
<p:message id="m3" for="i2" />
<p:commandButton value="Sauvegarder" id="button" disabled="#{not facesContext.postback or facesContext.validationFailed}"
style="background:#6FDC6F;color: #FFFFFF"
styleClass="customStyleButton" action="#{acteBean.doAddActe()}"
update="#form:pan">
<p:confirm header="Confirmation" message="Êtes-vous sûr?"
icon="ui-icon-alert" />
</p:commandButton>
<p:commandButton value="Actualiser" action="#{acteBean.reset()}"
style="background:#FF0000; color: #FFFFFF"
styleClass="customStyleButton" update="#form:pan" />
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Non" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
You forgot to add the 'pt' namespace declaration
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
And you are not using the jsf 2.2 namespace declarations for the jsf components either but the older ones
i m working on a project. project main page has a layout with 2 layoutunits and each layoutunit have forms. when i run project page is loading correctly but one of layoutunit collapsible property does not work. when i click on it layoutunit is closing then opening again.
i m using primefaces 5.3 and i m not a elit user.
<p:layout fullPage="true" widgetVar="layoutWdgt">
<p:layoutUnit style=" font-size: 14px!important" position="west" collapsible="true" header="#{kullanici.adsoyadkullanici}" >
<h:form id="anamenu">
<p:panelMenu style="width: 250px; height: 600px!important">
<p:submenu label="Genel" icon="fa fa-cog">
<p:menuitem value="Ana Gösterge Tablosu 1" actionListener="#{turnPage.changePage(101)}" update="mainform:panel1" />
<p:menuitem value="Ana Gösterge Tablosu 2" actionListener="#{turnPage.changePage(102)}" update="mainform:panel1" />
</p:submenu>
<p:submenu label="Demografik Göstergeler" icon="fa fa-area-chart">
<p:menuitem value="Nüfus Piramidi" actionListener="#{turnPage.changePage(201)}" update="mainform:panel1" />
<p:menuitem value="Genel Demografik Göstergeler" actionListener="#{turnPage.changePage(202)}" update="mainform:panel1"/>
<p:menuitem value="Kırsal ve Kentsel Nüfus" actionListener="#{turnPage.changePage(203)}" update="mainform:panel1"/>
<p:menuitem value="0-14 Yaş Nüfus Oranları" actionListener="#{turnPage.changePage(204)}" update="mainform:panel1"/>
<p:menuitem value="65 Yaş Üstü Nüfus Oranları" actionListener="#{turnPage.changePage(205)}" update="mainform:panel1" />
<p:menuitem value="Toplam Yaş Bağımlılık Oranları" actionListener="#{turnPage.changePage(206)}" update="mainform:panel1" />
</p:submenu>
</p:panelMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layoutcenter" style="font-size: 14px" position="center" collapsible="true" >
<h:form id="mainform">
<p:outputPanel id="panel1">
<ui:include src="#{turnPage.pathpage}" />
</p:outputPanel>
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
What I want is to display a lightbox right after the page is loaded. I mean, when the user receives the page, the lightbox automatically shows and stays on untill it is closed. How can I do this?
<?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: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">
<ui:composition template="/WEB-INF/include/template.xhtml">
<ui:define name="title">
<h:outputText value="#{jorBundle.AppName}"></h:outputText>
</ui:define>
<ui:define name="body">
<p:lightBox width="20%" height="80%" >
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
<p:panel header="#{jorBundle.Welcome}">
<p><h:outputText value="#{jorBundle.WelcomeMessage}"></h:outputText></p>
</p:panel>
<p:panel header="Gráfico Divisões UPB" menuTitle="menu" collapsed="true" >
<p><h:outputText value="Gráfico"></h:outputText></p>
</p:panel>
</ui:define>
</ui:composition>
</html>
Thanks in advance.
You could use the primefaces javascript, which requires an ID on the lightbox.
Component:
<p:lightBox width="20%" height="80%" id='myLightBox'>
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
Javascript:
<script>
document.addEventListener("DOMContentLoaded", function() {
PF('myLightBox').show();
});
</script>
A simple solution is to set the visible attribute to true:
<p:lightBox width="20%" height="80%" visible="true">
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
i got this error while creating index.xhtml. i'm working with primefaces 3.4
in my page index ,i will display a list of zones and when i click on the add button ,a dialog window should appear.the error is :
"javax.faces.FacesException: Cannot find component with identifier "nZone" referenced from "j_idt10"."
<?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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Listes des zones</title>
<link type="text/css" rel="stylesheet" href="dot-luv/theme.css"/>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="left" header="Atividades" resizable="true" closable="true" collapsible="true">
<h:form prependId="false">
<p:commandLink value="Nouvelle Zone" actionListener="#{ZoneController.preparAddZone()}" update="nZone" oncomplete="dialogGerLivro.show()"/>
</h:form>
<h:outputLink value="#{facesContext.externalContext.requestContextPath}/j_spring_security_logout">
<h:outputText value="Sair"/>
</h:outputLink>
</p:layoutUnit>
<p:layoutUnit position="center">
<h1>Listes des zones</h1><br/>
<br/><br/>
<h:form prependId="false">
<p:dataTable id="table" var="zone" value="#{ZoneController.listZones}">
<p:column>
<f:facet name="header">
<h:outputText value="Zone"/>
</f:facet>
<h:outputText value="#{zone.nomzone}" />
</p:column>
<f:facet name="header">
<h:outputText value="Modifier"/>
</f:facet>
<p:commandButton actionListener="#{ZoneController.preparEditZone()}" value="Modifier" update="nZone" oncomplete="dialogGerLivro.show()"/>
<p:column>
<f:facet name="header">
<h:outputText value="Supprimer"/>
</f:facet>
<h:commandLink action="#{ZoneController.DeleteZone}" value="Supprimer"/>
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
</p:layout>
<p:dialog header="Ajouter Zone" widgetVar="dialogGerLivro" resizable="false" modal="true" showEffect="slide" width="500">
<h:form prependId="false">
<h:panelGrid id="nZone" columns="2" style="margin-bottom:10px">
<h:outputLabel for="titulo" value="Título:" />
<h:inputText id="titulo" value="#{ZoneController.zone.nomzone}"/>
<p:commandButton update="tabele" oncomplete="dialogGerLivro.hide();" actionListener="#{ZoneController.SaveZone}" value="Insérer Zone"/>
<p:commandButton update="tabele" oncomplete="dialogGerLivro.hide();" actionListener="#{ZoneController.UpdateZone}" value="Modifier Zone"/>
</h:panelGrid>
</h:form>
</p:dialog>
</h:body>
</ht
<h:panelGrid id="nZone" columns="2" style="margin-bottom:10px">
is inside a h:form which is another NamingContainer, where you
<p:commandLink value="Nouvelle Zone" actionListener="#{ZoneController.preparAddZone()}" update="nZone" oncomplete="dialogGerLivro.show()"/>
and
<p:commandButton actionListener="#{ZoneController.preparEditZone()}" value="Modifier" update="nZone" oncomplete="dialogGerLivro.show()"/>
Try refering to it with update=":nZone". See the link to the other question for more information.
My listener method is not fired when I close the dialog box using the close button. I don't understand why happens this...
XHTML page where dialog is located
<?xml version="1.0" encoding="ISO-8859-1"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags"
template="/templates/template.xhtml">
<ui:define name="content">
<f:view>
<p:outputPanel id="opWindowsDlgViewUser">
<p:dialog id="dlgViewUser" widgetVar="wvDlgViewUser"
header="#{personaController.titleDlgViewUser}"
dynamic="true"
modal="true" closable="true" resizable="false">
<p:ajax event="close"
listener="#{sistemaController.onCloseDlgUsuario}"/>
<p:outputPanel id="opViewUser">
<ui:include src="/content.xhtml"></ui:include>
</p:outputPanel>
</p:dialog>
</p:outputPanel>
</f:view>
</ui:define>
</ui:composition >
Listener method
public void onCloseDlgUsuario(CloseEvent event){
System.out.println("onCloseDlgUsuario");
idRol = null;
this.fechaInicial = null;
this.fechaFinal = null;
}
[UPDATE]
Add XHTMl page content.xhtml
content.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags" >
<script type="text/javascript">
function unloadPage(){
if(#{sistemaController.renderAutoCompletePersonas}){
cleanText('acUsuario_input');
document.getElementById('acUsuario_input').focus();
}
}
</script>
<p:messages showDetail="true" closable="true"/>
<h:panelGrid columns="2">
<p:outputLabel value="Usuario " for="acUsuario"
rendered="#{sistemaController.renderAutoCompletePersonas}"/>
<p:autoComplete id="acUsuario" widgetVar="wvAcUsuario" minQueryLength="3"
completeMethod="#{sistemaController.completeListPersonasDisponibles}" var="p"
value="#{sistemaController.selectedPerson}"
rendered="#{sistemaController.renderAutoCompletePersonas}" scrollHeight="200"
itemLabel="#{p.apePaterno} #{p.apeMaterno} #{p.nombre} #{p.nombre2}"
itemValue="#{p}" converter="personaConverter" >
</p:autoComplete>
</h:panelGrid>
<h:panelGrid columns="2">
<p:outputLabel value="Rol" for="sltUserRol"/>
<p:selectOneMenu id="sltUserRol" value="#{sistemaController.idRol}" >
<p:ajax event="change" update="sltUserRol" />
<f:selectItem itemLabel="--Seleccione un Rol--" noSelectionOption="true" itemDisabled="true"/>
<f:selectItems value="#{sistemaController.listRolesActivos}" var="r"
itemLabel="#{r.valor}" itemValue="#{r.id}"/>
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="3">
Acceso
<h:panelGroup>
<h:outputText value="Desde " />
<p:commandButton icon="ui-icon-refresh" title="Limpiar"
actionListener="#{sistemaController.cleanFechaInicial}" update="clnFechaInicial"/>
<p:calendar id="clnFechaInicial" value="#{sistemaController.fechaInicial}"
widgetVar="wvFechaInicial" pattern="dd/MM/yyyy" mode="inline" locale="es"/>
</h:panelGroup>
<h:panelGroup>
<h:outputText value=" Hasta "/>
<p:commandButton icon="ui-icon-refresh" title="Limpiar"
actionListener="#{sistemaController.cleanFechaFinal}" update="clnFechaFinal"/>
<p:calendar id="clnFechaFinal" value="#{sistemaController.fechaFinal}"
widgetVar="wvFechaFinal" pattern="dd/MM/yyyy" mode="inline" locale="es"/>
</h:panelGroup>
<p:commandButton id="btnGuardar" title="Guardar" icon="ui-icon-disk" value="Guardar"
rendered="#{sistemaController.renderAutoCompletePersonas}"
actionListener="#{sistemaController.addUserToSystem}"
oncomplete="unloadPage()"
update="opDlgUsuario, dtUsersSystem"/>
<p:commandButton id="btnActualizar" title="Actualizar" icon="ui-icon-disk" value="Actualizar"
rendered="#{not sistemaController.renderAutoCompletePersonas}"
actionListener="#{sistemaController.updateUserSystem}"
update="opDlgUsuario, dtUsersSystem"/>
</h:panelGrid>
</ui:composition>