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
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 :)
I'm in the same situation of continuation of pressing button twice
This is the template
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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">
<h:head>
<title>SXGA</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body style="zoom: 1;">
<h:panelGroup layout="block" styleClass="wrapper" id="wrapper">
<ui:insert name="header">
<ui:include src="/secured/template/commonHeader.xhtml" />
</ui:insert>
<ui:insert name="content">
<ui:include src="/secured/template/commonContent.xhtml" />
</ui:insert>
<ui:insert name="footer">
<ui:include src="/secured/template/commonFooter.xhtml" />
</ui:insert>
</h:panelGroup>
</h:body>
</html>
This is the header
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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>
<title>commonHeader</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:insert name="header">
<ui:include src="/secured/template/commonMenu.xhtml" />
</ui:insert>
</h:body>
</html>
This is the Menu
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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>
<title>commonMenu</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:composition>
<p:megaMenu orientation="horizontal" style="margin-top:20px">
<p:submenu label="Gestione Rapporti" icon="ui-icon-check">
<p:column>
<p:submenu label="TV.1">
<p:menuitem value="TV.1.1" url="#" />
<p:menuitem value="TV.1.2" url="#" />
</p:submenu>
<p:submenu label="TV.2">
<p:menuitem value="TV.2.1" url="#" />
<p:menuitem value="TV.2.2" url="#" />
<p:menuitem value="TV.2.3" url="#" />
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Autorizzazione Flussi" icon="ui-icon-document">
<p:column >
<p:submenu label="Sports.1">
<p:menuitem value="Sports.1.1" url="#" />
<p:menuitem value="Sports.1.2" url="#" />
</p:submenu>
<p:submenu label="Sports.2">
<p:menuitem value="Sports.2.1" url="#" />
<p:menuitem value="Sports.2.2" url="#" />
<p:menuitem value="Sports.2.3" url="#" />
</p:submenu>
</p:column>
</p:submenu>
<!-- <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" /> -->
<f:facet name="options">
<!--
<h:form>
<h:commandLink action="#{loginBean.doLogout}" value="Logout" />
</h:form>
<h:form>
<h:commandButton value="Avanti" action="#{loginBean.doLogout}" styleClass="btn btn-primary"/>
</h:form>
-->
<h:form>
<p:button value="Logout" outcome="#{loginBean.doLogout()}" id="iconOnly" icon="ui-icon-power" title="Icon Only" />
</h:form>
</f:facet>
</p:megaMenu>
</ui:composition>
</h:body>
</html>
This is the tipical page
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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">
<h:head>
<title>SXGAWEB</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:composition template="/secured/template/commonTemplate.xhtml">
</ui:composition>
</h:body>
</html>
Before I was using
<h:form>
<h:commandLink action="#{loginBean.doLogout}" value="Logout" />
</h:form>
or
<h:form>
<h:commandButton value="Avanti" action="#{loginBean.doLogout}" styleClass="btn btn-primary"/>
</h:form>
All the problem started using PrimeFaces.
With BalusC suggestion continuation of pressing button twice i have solved more or less.
<p:button ... outcome="otherViewId" />
I can't understand the real problem. Is related with templating or in general is related with the normal usage of JSF.
In https://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-790 a possible solution is the use of OmniFaces or the same script from Prime Faces http://showcase.omnifaces.org/scripts/FixViewState
A possible solution is mentioned here
how to fixe twice needed click inside JSF page?
And
h:commandButton/h:commandLink does not work on first click, works only on second click
Where the solution is the script.
I have also read
commandButton/commandLink/ajax action/listener method not invoked or input value not updated
and
Which XHTML files do I need to put in /WEB-INF and which not?.
I am using PrimeFaces's color picker (the popup version). However, when I click on the icon to bring up the color picker, it shows up below all my other content (below the submit button and not below the icon like it's supposed to do). I have tried removing my css and moving everything around to no avail. The color picker is in a <h:form>, a <div>, and a <h:panelGrid>.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Index</title>
<h:outputStylesheet name="css/styles.css" />
</h:head>
<h:body>
<div class="title"> <h1> Testing </h1> </div>
<br />
<h:form>
<div class="forms">
<h:messages />
<h:panelGrid columns="2" columnClasses="column1Class column2Class" cellpadding="10">
<h:outputText value="Test1 " />
<h:inputText value="#{userConfig.test1}" />
<h:outputText value="ColorInline1 " />
<p:colorPicker value="#{userConfig.colorInline1}" mode="inline"/>
<h:outputText value="ColorInline2: " />
<p:colorPicker value="#{userConfig.colorInline2}" mode="inline"/>
<h:outputText value="ColorPopup " />
<p:colorPicker value="#{userConfig.colorPopup}" />
<h:outputText value="Test2" />
<h:inputText value="#{userConfig.test2}" />
</h:panelGrid>
<br />
<p:commandButton action="newValsIndex" value="Submit" ajax="false"> </p:commandButton>
</div>
</h:form>
</h:body>
</html>
I was able to reproduce your problem easily, actually, in the showcase, it is working properly. The major difference is that you have less components. Testing their code alone in an empty page generate theses css/javascript includes :
<link href="/javax.faces.resource/theme.css.jspx?ln=primefaces-aristo" rel="stylesheet" type="text/css">
<link href="/javax.faces.resource/primefaces.css.jspx?ln=primefaces" rel="stylesheet" type="text/css">
<link href="/javax.faces.resource/colorpicker/colorpicker.css.jspx?ln=primefaces" rel="stylesheet" type="text/css">
<script src="/javax.faces.resource/jquery/jquery.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/primefaces.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/colorpicker/colorpicker.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/jquery/jquery-plugins.js.jspx?ln=primefaces" type="text/javascript">
As soon as you cleanup the example and keep only the p:colorPicker, the last one is missing. This looks like a PrimeFaces bug, you can work arround by adding this line in your h:head :
<h:outputScript name="jquery/jquery-plugins.js" library="primefaces" />
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.
my problem is the following,
I have a template.xhtml that i uses for layout of the my web application
<div id="header">
<ui:insert name="header">
[Top Bar content will be inserted here]
</ui:insert>
</div>
<div id="main">
<ui:insert name="main">
[Nav Bar Left content will be inserted here]
</ui:insert>
</div>
<div id="button">
<ui:insert name="button">
[Nav Bar Left content will be inserted here]
</ui:insert>
</div>
then i have a addOrder.xhtml
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
template="/WEB-INF/template/popUpInsert.xhtml">
<ui:define name="header">
<h:outputLabel value="Status" />
<rich:inplaceInput value="#{ordineController.orderToSave.status}" />
<h:outputLabel value="Code" />
<rich:inplaceInput value="#{ordineController.orderToSave.code}" />
</ui:define>
<ui:define name="main">
Here there is a data table that contains lines of the order
</ui:define>
<ui:define name="button">
<h:form>
<a4j:commandButton value="Save" action="#{ordineController.addOrder()}" />
<h:form>
</ui:define>
but when i try to save the order both status and code are null , i try to change a scope to button save (execute="#all") but nothing
What's wrong?
Add this to your page <h:messages styleClass="message" />, you will see more warnings from JSF, in your case there should be a warning about missing forms because JSF knows which elements require to be inside one. In the end it is all HTML and JavaScript so inputs need to be inside the form if you want to do a submit.
You need to put the related input components in the same form as the command component. Any input components which are not in the same form as the command component are plain ignored in the submit. Note that this is a HTML restriction, not a JSF restriction.
So, this should do for you:
<h:form>
<div id="header">
<ui:insert name="header">
[Top Bar content will be inserted here]
</ui:insert>
</div>
<div id="main">
<ui:insert name="main">
[Nav Bar Left content will be inserted here]
</ui:insert>
</div>
<div id="button">
<ui:insert name="button">
[Nav Bar Left content will be inserted here]
</ui:insert>
</div>
</h:form>
And:
<ui:define name="header">
<h:outputLabel value="Status" />
<rich:inplaceInput value="#{ordineController.orderToSave.status}" />
<h:outputLabel value="Code" />
<rich:inplaceInput value="#{ordineController.orderToSave.code}" />
</ui:define>
<ui:define name="main">
Here there is a data table that contains lines of the order
</ui:define>
<ui:define name="button">
<a4j:commandButton value="Save" action="#{ordineController.addOrder()}" />
</ui:define>
Be careful that you don't create "God" forms this way.