imagecropper with atribute image in primefaces doesn't crop although image is loaded - jsf

if I change
image="#{pageContext.servletContext.contextPath}/upload
/#{fileUploadController.imagemTemporaria}"
and put
image="/imagens/#{fileUploadController.imagemTemporaria}"
the image is loaded. on the other hand, the method crop stops to work.
my images are in F:\imagens-retaguarda\imagens
my descriptor contains the following
<property name="alternatedocroot_1" value="from=/imagens/*
dir=F:\imagens-retaguarda\" />
do you know why that happens?
below is my code.
<h:form>
<p:outputPanel id="outputPanelUpload">
<h:panelGrid columns="2">
<h:outputText value="Imagem" rendered="#{fileUploadController.exibeBotao}"/>
<h:outputText value="Pré-visualização" rendered="#{fileUploadController.exibeBotao}"/>
<p:imageCropper id="imageCropperImagemTemporaria"
value="#{fileUploadController.croppedImage}"
image="#{pageContext.servletContext.contextPath}/upload/#{fileUploadController.imagemTemporaria}"
initialCoords="0,0,50,50"
maxSize="250,163"
minSize="30,30" />
<h:panelGroup rendered="#{fileUploadController.exibirPreVisualizacao}">
<p:graphicImage value="#{fileUploadController.imagemEnviada}" cache="false"/>
</h:panelGroup>
</h:panelGrid>
<br/>
<p:commandLink action="#{fileUploadController.crop}" update="outputPanelUpload" rendered="#{fileUploadController.exibeBotao}" value="Pré-visualizar" id="preVisualizar"/>
</p:outputPanel>
<br/>
<br/>
<p:fileUpload fileUploadListener="#{fileUploadController.enviarImagem}" sizeLimit="1000000" auto="true" update="outputPanelUpload" label="Escolher"/>
</h:form>

There is a restriction on p:imageCropper that it doesnt work with alternate docroot in glassfish
from primefaces forum
ImageCropper can crop local images in webroot and external images
located with http://. I don't think it is a bug but more like a
limitation as it doesn't support glassfish specific stuff like this.
link to above quoute by optimus.
Some friendly forum user has put together a codesnippet on how to construct the complete url. Havnt tested it myself, but conceptually it should work.
<p:imageCropper id="croppedImg"
value="#{controller.croppedImage}"
image="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}/Screens/Image.png"
initialCoords="10,10,200,200" />
link

Related

Primefaces Carousel showing all content in one page

I am using Primefaces 6.1 and if I do this in a plain xhtml page, it actually works fine. However, my problem is that I need to adopt the corporate look and feel and I am not enough of a CSS guru to know where to start debugging the issue that results from the inherited styles that cause the carousel to render all content in a list on the first "page", clicking on the other tabs shows empty content. I am trying to have each tab contain an iframe so I though that might be the problem. So, I tried simply using a simple example, slightly modified from the primefaces showcase:
<p:carousel numVisible="1" headerText="Tabs" style="margin-bottom:0" >
<p:tab title="Content I">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText
value="content 1" />
</h:panelGrid>
</p:tab>
<p:tab title="Content II">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText value="Content 2" />
</h:panelGrid>
</p:tab>
<p:tab title="Content III">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText value="Content 3" />
</h:panelGrid>
</p:tab>
</p:carousel>
However, the output still gets rendered like this...
Carousel screenshot
How do I get it to use the proper style shown in the Primefaces showcase and/or debug the problematic inherited CSS from the corporate CSS templates? Is there a way to force the standard primefaces function local to my application that would override the inherited issues?

How to show a loading image (using a4j)?

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.

omnifaces highlight component is not working with richfaces 4 bean validation

I have the maven dependency for omnifaces for version 1.11 (as my target is JDK 1.6). Richfaces 4.5.6 final, myfaces 2.2.8. And, against a viewscoped bean I have got this xhtml:
<ui:define name="content">
<f:loadBundle basename="au.com.erb.facility.ui.facility"
var="property" />
<o:highlight styleClass="error" />
<h:panelGrid columns="2">
<rich:validator event="change">
<o:outputLabel value="#{property.absClientNumber}" for="input1" />
<h:inputText id="input1"
value="#{facilityBean.facilityForEdit.alternateKey.absClientNumber}"
label="ABS Client Number" />
<o:outputLabel value="#{property.facilityid}" />
<h:inputText
value="#{facilityBean.facilityForEdit.alternateKey.facilityId}"
label="Facility Id" />
<h:outputLabel value="#{property.rfsAccountGroup}" />
<h:inputText value="#{facilityBean.facilityForEdit.rfsAccountGroup}"
label="RFS Account Group" />
<h:outputLabel value="#{property.rfsAcctCustomerNumber}" />
<h:inputText
value="#{facilityBean.facilityForEdit.rfsAcctCustomerNumber}"
label="RFS Account Customer Number" />
<h:outputLabel value="#{property.rfsAcctLedger}" />
<h:inputText value="#{facilityBean.facilityForEdit.rfsAcctLedger}"
label="RFS Account Ledger" />
</rich:validator>
</h:panelGrid>
</ui:define>
<!-- Buttons that performs actions on a selected record -->
<!-- or navigate to a relevant screen -->
<ui:define name="buttons">
<h:commandButton id="submitButton" value="#{property.submitLabel}"
action="#{facilityBean.save}" styleClass="wideButton"
onclick="#{rich:component('progressWaitModalPanel')}.show()" />
<h:commandButton id="closeButton" value="#{property.closeLabel}"
action="#{facilityBean.close}" styleClass="wideButton"
immediate="true" />
<rich:popupPanel id="progressWaitModalPanel" modal="true">
<f:facet name="header">
<h:outputText value="Processing your request ...." />
</f:facet>
<h:panelGrid columns="1"
style="width: 100%; border-width: 0px; text-align: center;">
<h:outputText value="Please wait..." styleClass="dataValueStyle" />
</h:panelGrid>
</rich:popupPanel>
</ui:define>
The result is nothing. No higlight. No clue what's going on. Have I missed any installation step? I have the css and xmlnamespace in place. Anything else?
I tried to add required="true" as it was shown in the example, but that did not work either. Not sure whether it is due to richfaces bean validation issue.
The <o:highlight> works server side, based on a.o. UIInput#isValid() in JSF component tree. The <rich:validator> works client side and doesn't manipulate JSF component tree.
This indeed doesn't go well together.
I briefly looked into the HTML/JS code of the <rich:validator> showcase and it appears that they don't add a marker style class to the input elements when it's invalid (e.g. PrimeFaces does), so it's going to be hard to write a workaround when continuing the <rich:validator> approach.
You've basically following options:
Maunally write an oncomplete script which finds the validation error messages and then finds the associated inputs and then set the desired marker style class on it.
Report an issue to RichFaces guys and ask them to add a marker style class to invalid inputs via <rich:validator>, so you could style them individually.
Drop <rich:validator> and replace it by server side validation via <f:ajax>.

Primefaces: Does any get p:effect to work on Glassfish

Here is my code. When I click the link Comment, a inputTextarea and commandButton suppose to appear
<h:outputLink id="link" value="javascript:void(0)">
<h:outputText value="Comment"/>
<p:effect type="fade" event="click" for="reply">
<f:param name="mode" value="'show'"/>
</p:effect>
</h:outputLink>
<h:panelGrid id="reply" style="display:none;">
<h:inputTextarea id="keyword" rows="2" />
</h:panelGrid>
</h:outputLink>
When I click on the link, nothing seem to happen, nothing appear. Any idea. I run this on Glassfish. The showcase from primeface.org is running under Tomcat.
There are two problems:
First, according to the PrimeFaces User Guide the appear effect is not supported.
Following is the list of effects supported by PrimeFaces.
blind
clip
drop
explode
fold
puff
slide
scale
bounce
highlight
pulsate
shake
size
transfer
So change the p:effect to:
<p:effect type="blind" event="click" for="reply">
<f:param name="mode" value="'show'" />
</p:effect>
Second, the generated source of the link tells the following:
<a href="javascript:void(0)">Comment<script type="text/javascript">
YAHOO.util.Event.addListener('j_idt6:j_idt7', 'click', function(e) {
jQuery(PrimeFaces.escapeClientId('j_idt6:reply')).effect('blind',{mode:'show'},1000);
});</script></a>
The client ID j_idt6:j_idt7 doesn't appear anywhere in the source. It has to be the link itself. So adding an id to the h:outputLink should fix it. Look like a bug in PrimeFaces.

Absolute reRendering using RichFaces

My problem is that RichFaces reRender does not work 'under' the current element in the element tree; only upper elements get rerendered.
Is there any way to access lower elements with AJAX?
Any help would be appreciated!
Daniel
EDIT I edited this question to a more general one. See revisions if interested in the original question.
reRender works with providing an the id of the target object you want to reRender (inside the same naming container - form most often)
the id should be a unique string, according to html spec
reRender allows dynamic value - i.e. reRender="#{myBean.currentItemsToRerender}
Based on that I think you should be able to achieve what you want (although it's not entirely clear)
Update:
UIComponent.findComponent(..) has a well-defined algorithm for resolving ids. So for absolute referencing your reRendered id should start with : and then continue through the hierarchy of the naming containers.
Here is an example where changePanel111() changes the content of a lower element:
<h:form id="form" prependId="true">
<rich:panel id="PANEL1">
<h:outputText id="PANEL1TEXT" value="#{ajaxTestBean.panel1}"/>
<rich:panel id="PANEL11">
<h:outputText id="PANEL11TEXT" value="#{ajaxTestBean.panel11}"/>
<rich:panel id="PANEL111">
<h:outputText id="PANEL111TEXT" value="#{ajaxTestBean.panel111}"/>
</rich:panel>
</rich:panel>
<rich:panel id="PANEL12">
<h:outputText id="PANEL12TEXT" value="#{ajaxTestBean.panel12}"/>
<br/>
<a4j:commandLink value="CHANGE PANEL12" action="#{ajaxTestBean.changePanel12}">
<a4j:support reRender="PANEL12" event="onclick"/>
</a4j:commandLink>
<br/>
<a4j:commandLink value="CHANGE PANEL111" action="#{ajaxTestBean.changePanel111}">
<a4j:support reRender="form:PANEL111" event="onclick"/>
</a4j:commandLink>
</rich:panel>
</rich:panel>
</h:form>
Notice how the lower element needs to be identified as form:PANEL111.
Hope this helps!
reRender can point to any component outside the form as well. For example this works:
<h:form>
<a4j:commandButton reRender="panel"/>
</h:form>
<h:panelGrid id="panel">
...
</h:panelGrid>
For my MyFaces+Richfaces App, <rich:panel> tag was not working as described in the selected answer. When I changed it to <a4j:outputPanel ajaxRendered="true" />, it started working as given here "<a4j:commandLink> Not Rerendering"
Configuration: MyFaces 2.1.10(Facelets used for templating) and Richfaces 4.2.3.
Hope this will help.

Resources