I saw on richfaces showcase that the best way to use rich:tabPanel with dynamic tabs is with a4j:repeat, but this doesn't work in my application.
This is my code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Java EE 6 Starter Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</h:head>
<h:body>
<h:form>
<div id="topArea">
<ui:insert name="topArea"/>
</div>
<div id="mainArea">
<ui:insert name="mainArea"/>
</div>
<div id="footerArea">
<ui:insert name="footerArea"/>
</div>
</h:form>
</h:body>
</html>
In topArea, I have this menu:
<rich:panelMenu>
<rich:panelMenuItem label="Clienti" name="Clienti" action="#{tabsBean.addTab()}" render="tabsPanel" />
</rich:panelMenu>
in mainArea, I have this tabPanel:
<rich:tabPanel id="tabsPanel" switchType="client" activeItem="#{tabsBean.activeTab}" >
<a4j:repeat value="#{tabsBean.tabs}" var="tab">
<rich:tab name="#{tab.name}">
<f:facet name="header">#{tab.name}</f:facet>
<h:form>
<h:outputText value="Enter Name:" />
<h:inputText id="input" />
<h:outputText value="Enter you interests:" />
<h:inputTextarea cols="17" rows="3" />
<h:outputText value="Choose your favourite color" />
<h:selectOneMenu>
<f:selectItem itemLabel="Red" itemValue="0" />
<f:selectItem itemLabel="Black" itemValue="1" />
<f:selectItem itemLabel="Green" itemValue="2" />
<f:selectItem itemLabel="White" itemValue="3" />
</h:selectOneMenu>
</h:form>
</rich:tab>
</a4j:repeat>
</rich:tabPanel>
My troubles are:
The tabs are not created
Why does the showcase use a nested form? Won't nested forms cause trouble?
Thanks
Dynamic tabs with a4j:repeat are supported since 4.3.0.Final only, refer here for more details:
http://www.bleathem.ca/blog/2013/01/dynamic-panels-with-a4jrepeat.html
For earlier versions c:forEach items="#{tabsBean.tabs}" var="tab" can be used.
Related
I'm working on a JSF project, all is working fine for the moment except for one thing: when I select a page from the left side bar, it is loaded correctly, when I click on a button, the button stays pressed but the action is not called.
button pressed but no action called
When I refresh the page and press it again, it works fine.
This happens to the other pages too.
Do you have any idea why is this happening ?!
I'm here to provide more details if needed!
The managed bean name and scope:
#ManagedBean(name="ModerateurBean")
#SessionScoped
The code of one of my pages:
<ui:composition template="template/default/main.xhtml"
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"
xmlns:b="http://bootsfaces.net/ui"
>
<ui:define name="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:commandButton process="singleDT" update=":form:ajouter" icon="ui-icon-plus" value="Ajouter" oncomplete="PF('ajouterDialog').show()" />
<p:dataTable id="singleDT" var="o" value="#{ModerateurBean.listMod}" selectionMode="single" selection="#{ModerateurBean.selectedModerateur}" rowKey="#{o.id_personne}" valueChangeListener="#{ModerateurBean.valChanged}" onchange="submit()">
<p:column headerText="Nom ">
<h:outputText value="#{o.nom}" />
</p:column>
<p:column headerText="Prénom ">
<h:outputText value="#{o.prenom}" />
</p:column>
<p:column headerText="Cin ">
<h:outputText value="#{o.cin}" />
</p:column>
<p:column headerText="Adresse ">
<h:outputText value="#{o.adresse}" />
</p:column>
<p:column headerText="Numéro Téléphone ">
<h:outputText value="#{o.numtel}" />
</p:column>
</p:dataTable>
<p:commandButton process="singleDT" update=":form:voir" icon="ui-icon-search" value="Voir" oncomplete="PF('voirDialog').show()" />
<p:commandButton process="singleDT" update=":form:modifier" icon="ui-icon-pencil" value="Modifier" oncomplete="PF('modifierDialog').show()" />
<p:commandButton process="singleDT" update=":form:supprimer" icon="ui-icon-trash" value="Supprimer" oncomplete="PF('supprimerDialog').show()" />
<!-- dialog voir admin -->
<p:dialog header="Details administrateur" widgetVar="voirDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="voir" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Nom" style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.prenom}" />
<h:outputText value="Cin " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.cin}" />
<h:outputText value="Adresse " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.adresse}" />
<h:outputText value="Numéro Téléphone " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.numtel}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
<!-- dialog modifier moderateur -->
<p:dialog header="Modifier moderateur" widgetVar="modifierDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="modifier" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Nom" style="color:black" />
<p:inputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black" />
<p:inputText value="#{ModerateurBean.selectedModerateur.prenom}" />
<h:outputText value="Cin " style="color:black"/>
<p:inputText value="#{ModerateurBean.selectedModerateur.cin}" />
<h:outputText value="Adresse " style="color:black" />
<p:inputTextarea rows="6" cols="33" value="#{ModerateurBean.selectedModerateur.adresse}"/>
<h:outputText value="Numéro Téléphone " style="color:black" />
<p:inputMask id="phoneWithExt18" value="#{ModerateurBean.selectedModerateur.numtel}" mask="(999) 999-9999? x99999"/>
</p:panelGrid>
</p:outputPanel>
<p:commandButton action="#{ModerateurBean.ModifierModerateur}" icon="ui-icon-pencil" value="Modifier" update="#form" />
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('modifierDialog').hide()" />
</p:dialog>
<!-- dialog ajouter moderateur -->
<p:dialog header="Ajouter moderateur" widgetVar="ajouterDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="ajouter" style="text-align:center;">
<p:panelGrid columns="2" columnClasses="label,value">
<h:outputText value="Nom" style="color:black" />
<p:inputText value="#{ModerateurBean.nom}" />
<h:outputText value="Prénom " style="color:black" />
<p:inputText value="#{ModerateurBean.prenom}" />
<h:outputText value="Sexe " for="sexe" style="color:black" />
<p:selectOneMenu id="sexe" value="#{ModerateurBean.sexe}">
<f:selectItem itemValue="" itemLabel=" --selectionnez-- "></f:selectItem>
<f:selectItem itemValue="1" itemLabel="Homme"></f:selectItem>
<f:selectItem itemValue="2" itemLabel="Femme"></f:selectItem>
</p:selectOneMenu>
<h:outputText value="Cin " style="color:black" />
<p:inputText value="#{ModerateurBean.cin}" />
<h:outputText value="Adresse " style="color:black"/>
<p:inputTextarea rows="6" cols="33" vvalue="#{ModerateurBean.adresse}"/>
<h:outputText value="Numéro Téléphone " style="color:black" />
<p:inputMask id="phoneWithExt1" value="#{ModerateurBean.numtel}" mask="(999) 999-9999? x99999"/>
</p:panelGrid>
</p:outputPanel>
<p:commandButton update="#form" icon="ui-icon-check" value="Sauvegarder" action="#{ModerateurBean.AjouterModerateur}" oncomplete="PF('ajouterDialog').hide()" >
<f:ajax render="singleDT" update="#form"/></p:commandButton>
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('ajouterDialog').hide()" />
</p:dialog>
<!-- dialog supprimer moderateur -->
<p:dialog header="Supprimer moderateur" widgetVar="supprimerDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="supprimer" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Id " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.id_personne}" />
<h:outputText value="Nom" style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.prenom}" />
</p:panelGrid>
</p:outputPanel>
<p:commandButton value="Supprimer" action="#{ModerateurBean.SupprimerModerateur}" icon="ui-icon-trash" oncomplete="PF('supprimerDialog').hide()" update="#form" >
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('supprimerDialog').hide()" />
<p:confirm header="Confirmation" message="Etes vous sur?" icon="ui-icon-alert" />
</p:commandButton>
<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:dialog>
</h:form>
</div>
</div>
</div>
</ui:define>
</ui:composition>
The images : image 1
image 2
image 3
image 4 : When i click on a button
Resume of the problem :
My problem was that when i click on a button it stays pressed but when i refresh the page it starts working normaly.
The solution :
i am working with facelets, so i have a template as you can see it here template structure
In main.xhtml i gather them and define styesheets and scripts in the head section, i work also with primefaces 6.x.
After i investagated in the console of Chrome Console of Chrome , the googlable errors stated that the probleme was in the conflict between primefaces and jquery that i manualy added.
what i did is remove all the jquery scripts and it started working again.
see the diffrence in the two codes :
main.xhtml (before)
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:b="http://bootsfaces.net/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>App Gestion d'Absence</title>
</f:facet>
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="bootstrap/css/bootstrap.min.css" />
<h:outputStylesheet name="css/dashboard.css" />
<h:outputStylesheet name="metisMenu/metisMenu.min.css" />
<h:outputStylesheet name="bootstrap/css/sb-admin-2.css" />
<h:outputStylesheet name="morrisjs/morris.css" />
<h:outputStylesheet name="morrisjs/morris.min.js" />
<h:outputStylesheet name="morrisjs/morris.js" />
<h:outputStylesheet name="font-awesome/css/font-awesome.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
<h:outputStylesheet name="vendor/morrisjs/morris.css"/>
<!-- <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
<!-- jQuery -->
<h:outputScript library="bootstrap" name="bootstrap.js" />
<h:outputScript library="bootstrap" name="bootstrap.min.js" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h:outputScript library="js" name="sb-admin-2.js" />
<h:outputScript library="js" name="sb-admin-2.min.js" />
</f:facet>
<f:facet name="last">
</f:facet>
</h:head>
<h:body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="leftMenu">
<ui:insert name="leftMenu">
<ui:include src="leftMenu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
<!-- <div>
<ui:include src="content.xhtml"/>
</div> -->
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</html>
main.xhtml (after)
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:b="http://bootsfaces.net/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gestion Absence ISMO</title>
</f:facet>
<link rel="shortcut icon" href="#{resources['images/favicon.ico']}" type="image/x-icon" />
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="css/dashboard.css" />
<h:outputStylesheet name="bootstrap/css/sb-admin-2.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
<!-- <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />
<h:outputScript name="bootstrap/js/bootstrap.js" />
</f:facet>
<f:facet name="last">
</f:facet>
</h:head>
<h:body>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="leftMenu">
<ui:insert name="leftMenu">
<ui:include src="leftMenu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
<!-- <div>
<ui:include src="content.xhtml"/>
</div> -->
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</html>
i hope this will help someone :)
im using:
JSF 2.1
RichFaces 4.5.2.Final
Omnifaces 2.0
I have a Table that i want to reuse as datable or subtable depends of the page that i use the component, i want to put and if but it doesnt work, here is my code:
<!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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://omnifaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:tablas="http://java.sun.com/jsf/composite/tablas"
>
<!-- INTERFACE -->
<composite:interface>
<composite:attribute name="listaPaqueteItems" required="true" />
<composite:attribute name="subtable" required="false" default="false" />
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<c:if test="#{!cc.attrs.subtable}">
<rich:dataTable id="tabla_items_del_paquete"
value="#{cc.attrs.listaPaqueteItems}"
var="p"
rowKeyVar="row_tabla_items_del_paquete"
rows="10"
rowClasses="odd-row, even-row"
styleClass="stable">
</c:if>
<c:if test="#{cc.attrs.subtable}">
<rich:collapsibleSubTable id="subtable">
</c:if>
<rich:column>
<f:facet name="header">
<h:outputText value="#" />
</f:facet>
<h:outputText value="#{row_tabla_items_del_paquete + 1}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="#{msgs['abm.paquete.item.tabla.codigo']}" />
</f:facet>
<h:outputText value="#{p.producto.codigo}" />
</rich:column>
<rich:column colspan="2">
<f:facet name="header">
<h:outputText value="#{msgs['abm.paquete.item.tabla.nombre']}" />
</f:facet>
<b>
<h:outputText value="#{p.producto.nombre}" />
</b>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="#{msgs['abm.paquete.item.tabla.descuento.final']}" />
</f:facet>
<h:outputText value="#{p.descuentoFinal}" />
</rich:column>
<c:if test="#{!cc.attrs.subtable}">
</rich:dataTable>
</c:if>
<c:if test="#{cc.attrs.subtable}">
</rich:collapsibleSubTable>
</c:if>
</composite:implementation>
</html>
Basically the problem is that isnt valid XHTML, any idea to accomplish this scenario and try to reuse this code as table or subtable, one possible idea is externally the <rich:colum> tags in another template and wrapper that in datable or subtable something like this:
<rich:collapsibleSubTable
expanded="#{false}"
id="tabla_periodos"
rowKeyVar="row_subtable"
expandMode="client"
value="#{p.periodoDescuentos}"
var="per"
rendered="#{not empty p.periodoDescuentos}"
>
<!-- Include Columns-->
</rich:collapsibleSubTable>
I think that will work but maybe is another way to do the same better.
You can create facelet tag with following code:
TAG (myTable.xhtml):
<c:if test="#{!subtable}">
<rich:dataTable id="tabla_items_del_paquete"
value="#{listaPaqueteItems}"
var="p"
rowKeyVar="row_tabla_items_del_paquete"
rows="10"
rowClasses="odd-row, even-row"
styleClass="stable">
<ui:insert>
</rich:dataTable>
</c:if>
<c:if test="#{subtable}">
<rich:collapsibleSubTable id="subtable">
<ui:insert>
</rich:collapsibleSubTable>
</c:if>
USAGE:
<my:mytable>
... your dataTable content
</my:mytable>
I am trying to build a wizard using ui:include in a RichFaces 4 popupPanel and navigation-rules in the faces-config.xml, but on completing the actions in the backing bean, the page does not navigate to the target page. I have checked to ensure that the bean executes as expected and that it provides the expected outcome.
The JSF page and the included page are listed below:
<rich:popupPanel modal="true" id="addSvcAcctPanel" autosized="true">
<rich:messages id="addSvcAcctPanelMessages" globalOnly="false"
styleClass="message" />
<a:outputPanel id="includeAddSvcAcct">
<ui:include src="/layout/addSvcAccPg2.xhtml" />
</a:outputPanel>
<h:form id="closeSvcAcctForm">
<div class="buttons">
<a:commandButton styleClass="save" id="closeAddSvcBtn"
value="close"
onclick="#{rich:component('addSvcAcctPanel')}.hide()"
render="hasAgentsAccItm,svcAccAccordItm,svcAcctsTab,svcAccInfo,agentPanel,ServiceAccts,noticesAccordion">
<rich:tooltip direction="topRight" mode="client" showDelay="300"
styleClass="tooltip" layout="block">
<span style="white-space: wrap">Click on the 'Close'
button to close this panel and return to the main screen. If you
have any unsaved information on this page, it will be lost when
you click close.</span>
</rich:tooltip>
</a:commandButton>
</div>
</h:form>
</rich:popupPanel>
The inserted JSF code for the two panels is as follows:
Pg 1.....
<?xml version="1.0" encoding="UTF-8" ?>
<h:form xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
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:rich="http://richfaces.org/rich"
xmlns:richext="http://java.sun.com/jsf/composite/richext"
xmlns:a="http://richfaces.org/a4j">
<rich:panel id="addSvcAcctPanelContent" headerClass="head2" style="height:100%;">
<f:facet name="header">
<h:outputText styleClass="med_black_type_bold_facet"
value="Add a Service Account" />
</f:facet>
<h:panelGrid columns="3">
<h:outputText styleClass="med_black_type_bold"
value="Department" id="companyLabel" />
<rich:select styleClass="med_black_type" id="companySelect"
required="true" value="#{main.selected_company}" render="acctWarning, accountLabel1" valueChangeListener="#{main.determineProperAccountName}">
<f:selectItem
itemLabel="Please select an Organisation"
itemValue="" />
<f:selectItems value="#{country_companies}" />
<a:ajax event="selectitem" render="acctWarning, accountLabel1, acctNumberExplain, acctIdHeader, acctIDHelp" execute="#this"/>
</rich:select>
<rich:message for="companySelect" style=" width : 330px;" />
<h:outputText styleClass="med_black_type_bold"
value="Account 'Nickname'" id="nicknameLabel" />
<h:inputText styleClass="med_black_type" id="nickname"
value="#{main.alias}" onfocus="#{rich:component('nickNameHelpPanel')}.show()"
onblur="#{rich:component('nickNameHelpPanel')}.hide()">
<rich:validator />
<!-- <f:ajax event="focus" execute="#this" onevent="#{rich:component('nickNameHelpPanel')}.show()"/>
<f:ajax event="blur" execute="#this" onevent="#{rich:component('nickNameHelpPanel')}.hide()"/> -->
</h:inputText>
<rich:message for="nickname" style=" width : 330px;" />
<richext:spacer width="30" />
<h:outputText id="acctWarning" styleClass="med_blue_type_bold"
value="Enter the #{main.accountProperName} below - numbers and letters only! No dots or dashes." />
<richext:spacer width="30" />
<h:outputText styleClass="med_black_type_bold"
value="#{main.accountProperName}" id="accountLabel1" />
<h:inputText styleClass="med_black_type" id="account"
value="#{main.account_id}" onfocus="#{rich:component('acctIDHelpPanel')}.show()"
onblur="#{rich:component('acctIDHelpPanel')}.hide()">
<rich:validator />
<!-- <f:ajax event="focus" execute="#this" onevent="#{rich:component('acctIDHelpPanel')}.show()"/>
<f:ajax event="blur" execute="#this" onevent="#{rich:component('acctIDHelpPanel')}.hide()"/> -->
</h:inputText>
<rich:message for="account" style=" width : 330px;" />
</h:panelGrid>
<div class="buttons">
<a:commandButton styleClass="save" id="addServiceCompany"
value="save" action="#{main.addAccount}" render="includeAddSvcAcct, includeAddSvcAcct1"/>
</div>
</rich:panel>
</h:form>
Pg 2.....
<?xml version="1.0" encoding="UTF-8" ?>
<h:form xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
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:rich="http://richfaces.org/rich"
xmlns:richext="http://java.sun.com/jsf/composite/richext"
xmlns:a="http://richfaces.org/a4j">
<rich:panel>
<h:outputText value="The service account has been successfully added." styleClass="med_black_type"/>
</rich:panel>
The relevant excerpt from the faces-config is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="2.1"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd">
<navigation-rule>
<from-view-id>/layout/addSvcAccPg2.seam</from-view-id>
<navigation-case>
<from-action>#{main.outcome}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/layout/addSvcAccPg3.seam</to-view-id>
</navigation-case>
</navigation-rule>
<application>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>bg</supported-locale>
<supported-locale>de</supported-locale>
<supported-locale>en</supported-locale>
<supported-locale>fr</supported-locale>
<supported-locale>tr</supported-locale>
</locale-config>
</application>
</faces-config>
The method from the backing bean is as follows:
public String addAccount() {
String retVal = "failed";
try {
getSAFctx.addService(getIntUserId(), 1, selected_company,
account_id, alias);
retVal = "success";
} catch (Exception e) {
System.out.println(e.getMessage());
} finally {
return retVal;
}
}
I have tried to this using pages.xml, *.pages.xml and rich:togglePanel (which for some reason, does not permit commandButtons to engage backing beans). Does anyone have any suggestions that can help? Does anyone know how to make this wizard work?
Thanks in advance.
Dave.
From the above code it is clear that once the page /layout/addSvcAccPg2.seam is included inside the rich:popupPanel , then it will lead to situation having same ID's for two different components's in a single page .
You have used ID="addSvcAcctPanel" for rich:popupPanel and rich:panel. This is a common issue with richfaces and creates page navigation problems .
Just make them different and try once again .
I defined a custom tag like:
<?xml version="1.0" encoding="UTF-8"?>
<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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:composite="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<composite:interface>
<composite:attribute name="terminal" />
<composite:attribute name="prefix" />
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<h:panelGrid columns="3" columnClasses="titleCell">
<h:outputLabel for="#{prefix}nodeId" value="Node Id" />
<h:selectOneMenu id="#{prefix}nodeId"
value="#{cc.attrs.terminal.nodeId}"
converter="javax.faces.Integer">
<f:selectItems
value="#{terminalController.availableNodeIds}" />
<rich:validator />
</h:selectOneMenu>
<rich:message for="#{prefix}nodeId" id="cnodeIdMsg" />
<h:outputLabel for="#{prefix}maxcon" value="Max Connections" />
<h:inputText id="#{prefix}maxcon"
value="#{cc.attrs.terminal.maxConnections}">
<rich:validator />
</h:inputText>
<rich:message for="#{prefix}maxcon" />
</h:panelGrid>
</composite:implementation>
</html>
When I use it within a rich:popupPanel
<my:terminalForm prefix="c" terminal="#{newTerminal}"/>
everything works fine.
At another place in the same file (also rich:popupPanel)
<my:terminalForm prefix="e" terminal="#{terminalController.editTerminal}"/>
all values in my form don't get the initialized. I suspected the expression #terminalController.editTerminal} to not get expanded correctly. But when I write the tags from the custom tag explicit
<h:inputText id="#{prefix}maxcon"
value="#{terminalController.editTerminal.maxConnections}">
<rich:validator />
</h:inputText>
everything would work also, but using the custom tag for only one expansion would be pointless.
What could be wrong?
Does anyone more experienced have an idea how I could debug this issue?
The cc.attrs is missing in front of prefix ?!
I'm working with JSF2 and I want to display a map with the object gmap. As I saw, gmap object doesn't exist anymore with richfaces 4.x, so I tried to import the gmap4jsf.jar to render my map...
To have an exemple I took a part of my code from the Richfaces demo here : Richfaces live demo
The map is displayed well, but if I want to control it (change the type, zoom,...) with the jsf elements from the rich:panel, I get an error in Firebug : "map is undefined"...
Can somebody help me to find out the problem please because I didn't find the answer in other thread...
Here is my code:
<!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:rich="http://richfaces.org/rich"
xmlns:m="http://code.google.com/p/gmaps4jsf/"><h:head><title>JSF 2.0: Ajax Support</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=myPersonnalKeyIsWrittenHere"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style>.optionList {height: 30px;}</style></h:head><h:body>
<div id="container">
<ui:include src="tpl/menu.xhtml" />
<h1>Gmap4Jsf</h1>
<div align="center">
<f:view contentType="text/html">
<h:panelGrid columns="2">
<h:form id="mapform" prependId="false">
<m:map var="map" mapVar="map" gmapKey="#{gmapBean.gmapkey}" id="map" />
</h:form>
<h:panelGroup>
<h:form>
<rich:tabPanel switchType="ajax" width="350" height="400">
<rich:tab label="Using Google Map API">
<h:panelGrid columns="2" columnClasses="optionList">
<h:outputText value="Controls:" />
<h:panelGroup>
Hide
Show
<br />
</h:panelGroup>
<h:outputText value="Zoom:" />
<rich:inputNumberSlider id="zoom" showInput="false"
minValue="1" maxValue="18" value="#{gmapBean.zoom}"
onchange="map.setZoom(this.value)" />
<h:outputText value="Map Type:" />
<h:panelGroup>
<a href="javascript: void 0"
onclick="map.setMapType(G_NORMAL_MAP)">Normal</a>
<a href="javascript: void 0"
onclick="map.setMapType(G_SATELLITE_MAP)">Satellite</a>
<a href="javascript: void 0"
onclick="map.setMapType(G_HYBRID_MAP)">Hybrid</a>
<br />
</h:panelGroup>
</h:panelGrid>
</rich:tab>
<rich:tab label="Using Ajax with JSON">
<rich:dataGrid var="place" value="#{gmapBean.point}"
columns="2">
<h:graphicImage onclick="showPlace('#{place.id}')"
style="cursor:pointer" value="resource://#{place.pic}" />
</rich:dataGrid>
</rich:tab>
</rich:tabPanel>
</h:form>
</h:panelGroup>
</h:panelGrid>
</f:view>
</div>
</div>
Ok I found it out...
I had to define the name of the Javascript variable generated by JSF.
So, I just added the attribut "jsVariable" to my gmap element.
<m:map jsVariable="map" var="map" mapVar="map" gmapKey="#{gmapBean.gmapkey}" id="map" />
Bye