Icon of commandButton doesn't appear inside galleria

[carlosLainez]

Hi! When I use image attribute in a commandButton that is inside galleria, the icon doesn't appear

Code: Select all

<p:galleria id="idgalleria" value="#{albumBean.lispetfoto}" var="item" transitionInterval="0" panelWidth="435" panelHeight="345"> 
        <p:graphicImage id="idfoto" value="#{item.path}#{item.petmascota.idmascota}/#{item.name}" />
        <p:galleriaContent>  
                <h:panelGrid columns="1" style="background-color: #bfbfbf; height: 100%; width: 100%">  
                        <f:facet name="header">
                                <p:graphicImage value="#{item.path}#{item.petmascota.idmascota}/#{item.name}" />
                        </f:facet>
                        <p:commandButton id="idButtonDeleteImage" image="ui-icon ui-icon-trash" title="Eliminar" style="position:absolute;right:0px;top:10px;"/>
                </h:panelGrid>
        </p:galleriaContent>
</p:galleria>

[carlosLainez]

I think the problem is the style. Primefaces CommandButton loses style inside galleria and icon in commandbutton doesn´t appear because it is defined with "ui-icon ui-icon-trash" that is a style too. I need primefaces commandbutton inside galleria to update other components with information relative to the actual image for example the image name for deleting or the message to display in a dialog. Complete code with modifications:

Code: Select all

<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">
      
	<h:form id="form-albumcontent">
		<p:panel id="panel-albumcontent" style="padding: 0 0 0 25%">
			<p:commandButton id="idbuttonupload" title="Subir Foto" image="ui-icon ui-icon-folder-open" onclick="uploaddialog.show()" />

			<p:growl id="mensajes" showDetail="true" />
			
			<p:galleria id="idgalleria" value="#{albumBean.lispetfoto}" var="item" transitionInterval="0" panelWidth="435" panelHeight="345"> 
		        <p:graphicImage id="idfotos" value="#{item.path}#{item.petmascota.idmascota}/#{item.name}" />
		        <p:galleriaContent>  
				    <h:panelGrid columns="1" style="background-color: #bfbfbf; height: 100%; width: 100%;" styleClass="ui-corner-all">  
				        <f:facet name="header">
			            	<p:graphicImage id="idfoto" value="#{item.path}#{item.petmascota.idmascota}/#{item.name}" />
				        </f:facet>
				        <p:commandButton id="idbuttonperfil" title="Colocar como foto del Perfil" value="Perfil" onclick="confirmdialog.show()" style="width:60px;position:absolute;right:0px;top:30px;" styleClass="transparent" update="form-albumcontent:idlabelconfirmar">
				        	<f:setPropertyActionListener target="#{albumBean.strImageName}" value="#{item.name}" />
				        	<f:setPropertyActionListener target="#{albumBean.strAccionMessage}" value="La imagen se pondra como foto del Perfil" />
				        </p:commandButton>
				        <p:commandButton id="idbuttondelete" title="Eliminar foto permanentemente" value="Eliminar" onclick="confirmdialog.show()" style="width:60px;position:absolute;right:0px;top:50px;" styleClass="transparent" update="form-albumcontent:idlabelconfirmar">
				        	<f:setPropertyActionListener target="#{albumBean.strAccionMessage}" value="Eliminar Permanentemente la imagen del album" />
				        </p:commandButton>
				    </h:panelGrid>
				</p:galleriaContent>
			</p:galleria>
			<br /><br />
			
		</p:panel>

		<p:dialog id="dialogfoto" closable="true" widgetVar="uploaddialog" modal="true" showEffect="bounce" hideEffect="explode" height="200">
			<p:fileUpload id="idfileupload" fileUploadListener="#{albumBean.handleFileUpload}"  
		          mode="advanced"   
		          update="mensajes, idgalleria"  
		          sizeLimit="100000"   
		          allowTypes="/(\.|\/)(gif|jpg|png)$/"/>
		</p:dialog>
		<p:dialog id="iddialogconfirm" closable="true" widgetVar="confirmdialog" modal="true" showEffect="bounce" hideEffect="explode" height="60" width="300">  
			<div id="iddivconfirmar" style="text-align:center; position: absolute;top: 10px">
				<h:outputLabel id="idlabelconfirmar" value="#{albumBean.strAccionMessage}" />
			</div>
			<div style="position: absolute;right: 0;bottom: 0;">
				<p:commandButton id="idbuttonconfirmar" value="Confirmar"></p:commandButton>
				<p:commandButton id="idbuttoncancelar" value="Cancelar" onclick="confirmdialog.close()" />
			</div>
		</p:dialog>
	</h:form>
</ui:composition>

Other theory is that the problem is reference, when I update the message to display in dialog, logs shows this message:

13:27:32,436 INFO [org.primefaces.util.ComponentUtils] (http--127.0.0.1-8080-1) Cannot find component with identifier "form-albumcontent:idlabelconfirmar" in view.

[carlosLainez]

I've solved the problem but with the log message, the identifier form-albumcontent:idlabelconfirmar must be :form-albumcontent:idlabelconfirmar, with colon at the begining, that's the sintaxis