I want to create gallery for images which uses <p:galleryImage/>. The problem is that when gallery contains a lot of images it download all of them and after that shows them. It is really annoying and it must work in different way. Now gallery looks like this:
<p:lightBox>
<h:commandButton class="button button-1-3 graphics-portfolio-plakaty" onclick="plakaty.show();" />
<f:facet name="inline">
<p:galleria value="#{galleryBean.imageNames}" var="imageName" panelWidth="800" panelHeight="500">
<p:graphicImage value="/gallery?img=#{imageName}" cache="false" />
</p:galleria>
</f:facet>
</p:lightBox>
I want to load images using ajax so it should look like this.
<p:lightBox>
<h:commandButton class="button button-1-3 graphics-portfolio-plakaty" onclick="plakaty.show();" />
<f:facet name="inline">
<p:galleria value="#{galleryBean.imageNames}" var="imageName" panelWidth="800" panelHeight="500">
<p:graphicImage value="/gallery?img=#{imageName}" cache="false">
<p:ajax event="ready" />
</p:graphicImage>
</p:galleria>
</f:facet>
</p:lightBox>
I'm new in JSF so there may be so better way to do this or how can I load image using ajax?
Related
I tried to use draggable component https://www.primefaces.org/showcase/ui/dnd/draggable.xhtml for inputTextArea component but it does not work for me. Do you know any workarounds for making input components draggable?
My code:
<p:outputPanel>
<p:inputTextarea id="test">
</p:inputTextarea>
</p:outputPanel>
<p:draggable for="test" containment="parent" />
I don't have any errors in console. But drag function does not work as it work for p:panel, for example.
try to wrap the component in a panel and assign "for" to that panel.
<p:outputPanel>
<p:panel id="test">
<p:inputTextarea />
</p:panel>
<p:draggable for="test" containment="parent"/>
</p:outputPanel>
The following code in my .xhtml works fine:
<h:commandButton id="btnConsultar"
action="#cadastrarProponenteBean.consultarCnpj}"
value="#{messages.tx_consultar}"
styleClass="btnAcao" />
But, when I add a4j:support:
<h:commandButton id="btnConsultar"
action="#{cadastrarProponenteBean.consultarCnpj}"
value="#{messages.tx_consultar}"
styleClass="btnAcao">
<a4j:support event="onclick" />
</h:commandButton>
the application breaks, I get strange errors, and my validation messages('getFacesContext().addMessage') are not shown.
Since I'm using a4j:support just to show a loading gif when user clicks, any advice on how to fix this problem?
I'm using JSF and RichFaces.
PS: already tried a4j:commandButton instead of h:commandButton but same problems...
You should use <a4j:status> similar to:
<a4j:status id="ajaxstatus" rendered="true">
<f:facet name="start">
<h:panelGroup>
<h:graphicImage value="/images/loading.gif" />
</h:panelGroup>
</f:facet>
<f:facet name="stop">
</f:facet>
</a4j:status>
I have it in template. Loading image is displayed during any long action.
I have a JSF page using richfaces with a few help buttons like this:
<rich:componentControl for="panelHelp" event="oncomplete" operation="show" />
The panel called is this:
<rich:modalPanel id="panelHelp" minHeight="250" minWidth="500"
keepVisualState="true" resizeable="true" moveable="true">
<f:facet name="header">
<h:outputText value="Help" />
</f:facet>
<f:facet name="controls">
<h:commandLink value="">
<h:graphicImage value="/close2.png" title="Close" />
<rich:componentControl for="panelHelp" event="onclick" operation="hide" />
</h:commandLink>
</f:facet>
<h:panelGrid columns="1" width="100%">
<h:outputText escape="false" id="txtHelp"
value="#{msgHelp}" style="width: 100%; height: 190px" />
</h:panelGrid>
</rich:modalPanel>
However, whenever I press the button to close the panel, it reloads the whole page, instead of simply hiding the panel.
Am I doing something wrong, or is there a better way to do this?
I'm using richfaces version 3.3.3
Use a4j:commandLink instead of h:commandLink and provide an a4j:support as well. This should fix the problem.
It's reloading the entire page because of your use of the <h:commandLink/>, which is going to trigger the entire JSF request processing lifecycle. To get your desired results you don't need the command link component. All you really need is:
<f:facet name="controls">
<h:graphicImage id="closeButton" value="/close2.png" title="Close" />
<rich:componentControl attachTo="closeButton" for="panelHelp" event="onclick" operation="hide" />
</f:facet>
What we're doing here is firing the <rich:componentControl/> on click of the image; there's no need for a link. I'm assuming you're using Richfaces 3.X. (RF 4.X has deprecated the attachTo attribute)
Above answer will work in Richfaces 3.x, If you are using Richfaces 4.x then the given code will work.
<f:facet name="controls">
<h:graphicImage value="/close2.png" >
<rich:componentControl target="closeButton" operation="hide" event="click" />
</h:graphicImage>
</f:facet>
Add disableDefault="true" attribute to your rich:componentControl to disable default behavior of the link on click.
i have an issue with nested UI components which is probably a known bug in PrimeFaces and Mojara. However I have no idea how can i solve it.
We have a image gallery with uploader and I want to be able to delete images from the datagrid, so
XHTML:
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{pictureManagementBean.handleFileUpload}"
mode="advanced"
update="gallery messages"
auto="true"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
/>
<p:growl id="messages" showDetail="true"/>
<p:dataGrid var="item" value="#{pictureManagementBean.pictures}" id="gallery">
<p:panel header="#{item.pictureName}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="#{item.thumbnailDir}" />
<h:outputText value="#{item.createdate.toString()}" />
<p:commandLink value="Delete"
action="#{pictureManagementBean.removePicture(item.idpicture)}" ajax="false"/>
</h:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
Basically what is not working at the momment - at all - is the commandLink Delete in the DataGrid. The rest is fine.
Is there any walkaround to this? I've tried: columns, ajax, no ajax... nothing works. All i can do is get the button outside the DataGrid. But that's not really what I want.
Any help apprecieated.
[small thing: surprisingly I have used commandLink in DataTable and Columns with no problem! ]
Primefaces 3.4RC1 from maven. (didnt work on 3.3.1 either)
ok so I've found one thing:
inside <p:dataGrid> if I use anything BUT p:columns its not working.
But then the view is terrible... should I just use CSS to fix it?
#Maple_shaft you are so right!
correct code:
<p:dataGrid var="item" value="#{pictureManagementBean.pictures}" id="gallery">
<p:column>
<p:panel header="#{item.pictureName}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="#{item.thumbnailDir}" />
<h:outputText value="#{item.createdate.toString()}" />
<p:commandLink value="Delete"
action="#{pictureManagementBean.removePicture(item.idpicture)}" ajax="false"/>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>
So just simple column element. I've just places it wrong before. Thanks so much.
Of course backing bean is #ViewScoped!
I wrote a web program in the Netbeans IDE 7.1.2 in java server faces
and I have a problem with ui:repeat tag
<h:form id="arrangmentForm" rendered="false" >
<ui:repeat value="#{arrangement.arItemArrangment}" var="itemArrangment" >
<h:panelGrid style="position: absolute;top:#{itemArrangment.place.top / 10}px;left: #{itemArrangment.place.left/10}px;height: 30px;width:30px">
<h:commandLink id="linkItemArrangment" actionListener="#{arrangement.showbtnArrangement()}" style="text-decoration: none;color: black">
<p:graphicImage value="../images/#{itemArrangment.place.objType}.jpg" />
<h:outputText value="#{itemArrangment.place.objTitle}" />
<br />
<h:outputText value="#{itemArrangment.gethOrder().gethOrdersTotal()}" />
<br />
<f:setPropertyActionListener value="#{itemArrangment}" target="#{arrangement.selectPlace}" />
</h:commandLink>
</h:panelGrid>
</ui:repeat>
</h:form>
This code works fine in Netbeans.
When I tried to deploy my program to a web server (Tomcat7, Glassfish open source and enterprise edition) the ui tag didn't work, though, and in my web browser I just receive the form tag and nothing else.
You have rendered="false" in your h:form so nothing is display. It's the normal behavior.
If you want to display the content of the form remove the rendered="false"