Im getting this exception when the view try to renders, im using the icefaces validators tags in a simple ice form, also im using spring to instantiate the managed beans but it is working correctly in other pages, SO i dont feel spring is the problem ... this is the exception :
java.lang.UnsupportedOperationException: Implement SWF integration at
com.icesoft.util.SeamUtilities.getSpringFlowId(SeamUtilities.java:542)
at
com.icesoft.faces.renderkit.dom_html_basic.FormRenderer.encodeBegin(FormRenderer.java:146)
at
com.icesoft.faces.component.ext.renderkit.FormRenderer.encodeBegin(FormRenderer.java:42)
at
org.icefaces.impl.renderkit.RendererWrapper.encodeBegin(RendererWrapper.java:50)
at
javax.faces.component.UIComponentBase.encodeBegin(UIComponentBase.java:824)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1641)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1646)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1646)
at
com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:389)
at
com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:127)
at
com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:117)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:97) at
com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:135)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:309) at
org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at
org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at
org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at
org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
at
org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
at
org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at etc.....
This the code of my page:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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:ice="http://www.icesoft.com/icefaces/component"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:include src="generic-modules/header.xhtml" />
<h:body>
<ui:include src="generic-modules/header-navigation.xhtml" />
<div id="bd">
<div class="registration">
<div class="form">
<ice:form>
<ice:inputText id="Name" value="#{applicant.name}" partialSubmit="true">
<f:validateLength maximum="45" minimum="5" />
</ice:inputText>
<ice:message style="color: red;" id="nameError" for="name" />
<br />
<ice:inputText id="Address" value="#{applicant.address}" partialSubmit="true">
<f:validateLength maximum="45" minimum="10" />
</ice:inputText>
<ice:message style="color: red;" id="addressError" for="address" />
<br />
<ice:inputText id="Workplace" value="#{applicant.workplace}" partialSubmit="true">
<f:validateLength maximum="45" minimum="10" />
</ice:inputText>
<ice:message style="color: red;" id="workplaceError" for="workplace" />
<br />
<ice:inputText id="Telephone" value="#{applicant.telephone}" partialSubmit="true">
<f:validateLength maximum="10" minimum="8" />
</ice:inputText>
<ice:message style="color: red;" id="telephoneError" for="telephone" />
<br/>
<ice:inputText id="Photo" value="#{applicant.photo}" partialSubmit="true">
<f:validateLength maximum="80" minimum="2" />
</ice:inputText>
<ice:message style="color: red;" id="photoError" for="photo" />
<br/>
<ice:inputText id="Username" value="#{applicant.username}" partialSubmit="true">
<f:validateLength maximum="10" minimum="8" />
</ice:inputText>
<ice:message style="color: red;" id="usernameError" for="username" />
<br/>
<ice:inputText id="Password" value="#{applicant.password}" partialSubmit="true">
<f:validateLength maximum="10" minimum="8" />
</ice:inputText>
<ice:message style="color: red;" id="passwordError" for="password" />
<br/>
<ice:commandButton value="Register" actionListener="#{applicant.save}" />
<br />
<!-- <ice:outputText value="Age: " />
<ice:outputText value="" /> -->
</ice:form>
</div>
</div>
</div>
</h:body>
</html>
I dont know what is wrong because im only using the code of the icefaces tutorials, i appreciate if anyone can help me
Presently, I don't believe there is a solution to this issue. I was working on the same thing yesterday for about 8 hours. See this page on the icefaces bug tracker: . They actually have the issue marked resolved, and have tutorials that claim that icefaces integrates with SWF 2.X, but the simple fact of the matter is this little line of code in their seamutilities.java class:
if (true)
{
throw new UnsupportedOperationException("Implement SWF integration");
}
I've tried running various version of icefaces before the fix was implemented on up through the current beta, and I still have issues. I'm going to say presently, the two are not compatible.
i am getting this exception with ice forums, and as a workaround i use jsf form instead of iceforums and so far it's working fine with me.
Related
Context:
We are migrating our project from Axon Ivy 6.3 to Axon Ivy 8. In Axon Ivy 6.3, we use Primefaces 6, and in Axon Ivy 8, we use Primefaces 7.
We have our project with Axon Ivy 6.3 running on our staging server, the glitch issue doesn't happen there. However, on our dev server, where the Axon Ivy project version 8 is running, the issue happens.
So I guess it has something to do with the version of Primefaces.
Here is some of the code that we're using, I hope this can provide enough information.
We have custom numberSlider component, which contains an input field and a <p:slider>.
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<cc:interface>
<cc:attribute name="value" required="true"/>
<cc:attribute name="componentId" required="true" type="java.lang.String"/>
<cc:attribute name="minValue" default="0"/>
<cc:attribute name="maxValue" default="100"/>
<cc:attribute name="step" default="1"/>
<cc:attribute name="label" type="java.lang.String"/>
<cc:attribute name="inputStyleClass" type="java.lang.String"/>
<cc:attribute name="widgetVar" type="java.lang.String"/>
<cc:editableValueHolder name="input" targets="#{cc.attrs.componentId}Input" />
<cc:clientBehavior name="slideEnd" targets="#{cc.attrs.componentId}Slider" event="slideEnd" />
<cc:clientBehavior name="inputChange" targets="#{cc.attrs.componentId}Input" event="change" />
</cc:interface>
<cc:implementation>
<h:outputScript name="numberslider.js?v=#{cachedVersion}" library="js" target="head"/>
<h:outputStylesheet library="css" name="componentnumber.slider.min.css?v=#{cachedVersion}"/>
<p:outputLabel value="#{cc.attrs.label}" for="#{cc.attrs.componentId}Input" styleClass="c-blue label"/>
<p:inputNumber id="#{cc.attrs.componentId}Input" value="#{cc.attrs.value}"
styleClass="input #{cc.attrs.inputStyleClass}" decimalPlaces="0" thousandSeparator="'" minValue="0" maxValue="2000000">
</p:inputNumber>
<p:message for="#{cc.attrs.componentId}Input" id="#{cc.attrs.componentId}InputMessage"/>
<div class="spacing-small"></div>
<div class="range">
<p:outputPanel styleClass="slider__tooltipBlock">
<i class="arrow-up"></i>
<p:outputLabel styleClass="slider__tooltipLabel" id="#{cc.attrs.componentId}SliderTooltipLabel" value="#{cc.attrs.value}">
<f:convertNumber type="number" locale="de_CH"/>
</p:outputLabel>
</p:outputPanel>
<p:slider id="#{cc.attrs.componentId}Slider" widgetVar="#{cc.attrs.widgetVar}" styleClass="slider__line"
for="#{cc.attrs.componentId}Input"
step="#{cc.attrs.step}" maxValue="#{cc.attrs.maxValue}" minValue="#{cc.attrs.minValue}"
display="#{cc.attrs.componentId}SliderTooltipLabel">
</p:slider>
<script type="text/javascript">
$(document).ready(function(){
MF.component.numberSlider.initSliderToolTip('#{cc.attrs.widgetVar}');
})
</script>
</div>
</cc:implementation>
</ui:composition>
And this is the way we use that component:
<div class="column medium-6">
<com:numberSlider id="amount" componentId="amount" value="#{tranche.amount}"
label="#{ivy.cms.co('/xx/xxx/xxx/xx/component/product/tranches/amount')}"
minValue="0" maxValue="2000000" step="50000" widgetVar="amountSlider#{varStatus.index}">
<p:ajax event="inputChange" listener="#{logic.onInputChange(varStatus.index)}"
partialSubmit="true"
update="#([id$='productVariant']) #([id$='flexibilityPanel']) #([id$='houseOverlayDataVariant']) #([id$='houseOverlayData'])"
process="#([id$='productVariant'])"
oncomplete="updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse();"/>
<p:ajax event="slideEnd" listener="#{logic.onInputChange(varStatus.index)}"
partialSubmit="true"
update="#([id$='productVariant']) #([id$='flexibilityPanel']) #([id$='houseOverlayDataVariant']) #([id$='houseOverlayData'])"
process="#([id$='productVariant'])"
oncomplete="updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse()"/>
</com:numberSlider>
</div>
Behavior
When we drag and drop the slider on staging, then release the mouse, the UI is updated smoothly.
When we drag and drop the slider on dev, then release the mouse, the UI has one glitch, the slider disappears and then reappears quickly. Some CSS has not been applied first when the glitch happens, then when the slider appears again, the CSS then applied correctly.
I expect the UI get changed the same way on both two versions.
I've checked the rendered html code for both version, and I don't know why they're different.
Primefaces 6 rendered html:
<div class="column medium-6">
<label id="j_id_h4:j_id_h7:j_id_l2:0:amount:j_id_li" class="ui-outputlabel ui-widget c-blue label" for="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input">Höhe</label><span id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput" class="ui-inputNum ui-widget input "><input id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input" name="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all pe-inputNumber" role="textbox" aria-disabled="false" aria-readonly="false"><input id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_hinput" name="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_hinput" type="hidden" autocomplete="off" value="1050000"></span>
<div id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInputMessage" aria-live="polite" data-display="both" data-target="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput" data-redisplay="true" class="ui-message"></div>
<div class="spacing-small"></div>
<div class="range">
<div id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountSlider" class="slider__line ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 52.5%;">
<div id="j_id_h4:j_id_h7:j_id_l2:0:amount:j_id_lm" class="ui-outputpanel ui-widget slider__tooltipBlock">
<i class="arrow-up"></i><label id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountSliderTooltipLabel" class="ui-outputlabel ui-widget slider__tooltipLabel">1'050'000</label>
</div>
</span>
</div>
<script type="text/javascript">
$(document).ready(function(){
MF.component.numberSlider.initSliderToolTip('amountWidgetVar');
})
</script>
</div>
</div>
Primefaces 7 rendered html
<div class="column medium-6">
<label id="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l3" class="ui-outputlabel ui-widget c-blue label" for="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input">Höhe</label><span id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput" class="ui-inputnumber ui-widget input "><input id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input" name="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input" type="text" value="1100000" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" aria-labelledby="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l3" onchange="PrimeFaces.ab({s:"j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput",e:"change",f:"mainForm",p:"#([id$='productVariant'])",u:"#([id$='productVariant']) #([id$='flexibilityPanel']) #([id$='houseOverlayDataVariant']) #([id$='houseOverlayData'])",ps:true,onco:function(xhr,status,args){updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse();;}});" data-p-label="Höhe" data-p-con="javax.faces.Integer" data-p-hl="inputnumber" role="textbox" aria-disabled="false" aria-readonly="false"><input id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_hinput" name="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_hinput" type="hidden" autocomplete="off" data-p-label="Höhe" data-p-con="javax.faces.Integer" data-p-hl="inputnumber" value="1100000"></span>
<div id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInputMessage" aria-live="polite" data-display="both" data-target="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput" data-redisplay="true" class="ui-message"></div>
<div class="spacing-small"></div>
<div class="range">
<div id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountSlider" class="slider__line ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 55%;">
<div id="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l7" class="ui-outputpanel ui-widget slider__tooltipBlock">
<i class="arrow-up"></i><label id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountSliderTooltipLabel" class="ui-outputlabel ui-widget slider__tooltipLabel">1'100'000</label>
</div>
</span>
</diva>
<script type="text/javascript">
$(document).ready(function(){
MF.component.numberSlider.initSliderToolTip('amountSlider0');
})
</script>
</div>
</div>
Pimefaces 6 renders the html without the onchange part.
This question already has an answer here:
Custom JSF validator message for a single input field
(1 answer)
Closed 7 years ago.
how to add my own message for the client side validation in JSF.
<div class="ui-grid-row">
<div class="ui-grid-col-3" align="left">
<h:outputLabel for="cmpny" value="Company Name:" style="font-weight:bold" />
</div>
<div class="ui-grid-col-2">
<p:inputText id="cmpny" value="#{userData.cmpny}">
<f:validateLength minimum="10" />
<p:ajax execute="currentInput" update="company" event="blur" />
</p:inputText>
</div>
<div class="ui-grid-col-1" />
<div class="ui-grid-col-1">
<p:message for="cmpny" id="company" display="icon" />
</div>
<div class="ui-grid-col-5"></div>
</div>
</div>
<div class="ui-grid-col-3" align="left">
<h:outputLabel for="fnm" value="First Name:*" />
</div>
<div class="ui-grid-col-2">
<p:inputText id="fnm" value="#{userData.fnm}" validatorMessage="First Name cannot be left blank and must be greater than 3 characters" >
<f:validateLength minimum="4" />
<p:ajax execute="currentInput" update="firstname" event="blur" process="#this" />
</p:inputText>
</div>
<div class="ui-grid-col-7"><p:message for="fnm" id="firstname" display="icon,text"/></div>
With the help of "validatorMessage" attribute, I am able to show customized messages when ever the validation fails for the primeface elements like (inputText,calendar etc..,),.
You need to supply a message bundle via javascript. See PrimeFacesLocales for examples.
PrimeFaces User Guide, 7. Client Side Validation / 7.4 Messages.
Using f:ajax component with h:selectManyListbox, it is firing the listener method but not refreshing the rendering list.
I have Market. When I select market it needs to display Sub-Markets. Initial page load will have all the Markets and Sub-Markets, but it needs to filter when user selects "Market".
Using below code:
<ui:fragment id="uda2" rendered="#{udaList.index eq 1}">
<div class=" row form-group" >
<label class="col-sm-2" for="sel-service">Market:</label>
<div class="col-sm-10">
<h:selectManyListbox style="width:360px;" multiple="" pt:aria-required="true" required="required" pt:data-toggle="chosen"
disabled="# {licenseSelectionBean.isFieldEnabled(FormFieldsEnum.ITEM_UDA2)}"
id="#{FormFieldsEnum.ITEM_UDA2.getFieldCode()}" size="1"
name="#{FormFieldsEnum.ITEM_UDA2.getFieldCode()}"
value="#{licenseSelectionBean.selectedItemUda2}"
styleClass="sel-chosen">
<f:selectItems var="uda2"
value="#{licenseSelectionBean.selectUda2}" />
<f:ajax event="change" execute="#this" render="#this udalist3"
listener="#{licenseSelectionBean.onChangeFilter()}" />
</h:selectManyListbox>
</div>
</div>
</ui:fragment>
<ui:fragment rendered="#{udaList.index eq 2}">
<div class="row form-group" >
<label class="col-sm-2" for="sel-service">Sub-Market:</label>
<div class="col-sm-10">
<h:selectManyListbox style="width:360px;" multiple="" pt:aria-required="true" required="required" pt:data-toggle="chosen"
disabled="#{licenseSelectionBean.isFieldEnabled(FormFieldsEnum.ITEM_UDA3)}"
size="1"
pt:name="udalist3"
value="#{licenseSelectionBean.selectedItemUda3}"
pt:id="udalist3"
styleClass="sel-chosen">
<f:selectItems var="uda3"
value="#{licenseSelectionBean.selectUda3}" />
<!-- <f:ajax render="#{FormFieldsEnum.ITEM_UDA4.getFieldCode()}"
listener="#{licenseSelectionBean.onChangeFilter()}" /> -->
</h:selectManyListbox>
</div>
</div>
</ui:fragment>
Used "pt" for pass-through because JSF prefixing dynamic id.
How to resolve this problem?
Simple solution. Replace
<f:ajax event="change" execute="#this" render="#this udalist3"
listener="#{licenseSelectionBean.onChangeFilter()}" />
with
<f:ajax event="change" execute="#this" render="#form"
listener="#{licenseSelectionBean.onChangeFilter()}" />
This might cause some unnecesarry traffic. You can also encapsulate the second ui:fragment in a panelgroup, e.g.
<h:panelGroup id="wrapper">
<ui:fragment rendered="#{udaList.index eq 2}">
....
</h:panelgroup>
and add replace "udalist3" with "wrapper" in the f:ajax render attribute.
I've been asked to refactor the following code, which works:
<a4j:commandButton type="image"
image="/someImage.gif"
action="#{SomeViewController.someDeleteAction}"
onclick="return confirm('#{msg['a.message']}');"
render="someDataTableWithItems">
<f:setPropertyActionListener
target="#{SomeViewModel.selectedItem}" value="#{item}" />
</a4j:commandButton>
..to an alternative which allowed to use a custom popup to confirm the action. This snippet is embedded into a column inside a rich:dataTable component. #{item} is a reference to the object assigned to the row where this button is (defined in the dataTable as var="item").
I decided to do a JSF composite component (first one I do) to have something I could reuse. It's based on this answer by elias
<!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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:cc="http://java.sun.com/jsf/composite">
<cc:interface>
<cc:attribute name="message" default="#{msg['a.default.message']}" />
<cc:attribute name="header"
default="#{msg['a.default.header']}" />
<cc:attribute name="action" required="true"
method-signature="java.lang.String action()" />
<cc:attribute name="actionListener" required="false"
method-signature="java.lang.String action()" />
<cc:attribute name="value" default="Send" />
<cc:attribute name="cancelBtn" default="#{msg['a.default.cancel']}" />
<cc:attribute name="confirmBtn" default="#{msg['a.default.ok']}" />
<cc:attribute name="render" default="#form" />
<cc:attribute name="type" default="submit" />
<cc:attribute name="image" required="false"/>
<cc:attribute name="tooltip" required="false" />
</cc:interface>
<cc:implementation>
<a4j:commandButton type="#{cc.attrs.type}" rendered="#{empty cc.attrs.actionListener and not empty cc.attrs.image}"
image="#{cc.attrs.image}" value="#{cc.attrs.value}"
oncomplete="#{rich:component('somePopup')}.show()">
<rich:tooltip followMouse="false" showDelay="1000" rendered="#{not empty cc.attrs.tooltip}">
#{cc.attrs.tooltip}
</rich:tooltip>
</a4j:commandButton>
<a4j:commandButton type="#{cc.attrs.type}" rendered="#{not empty cc.attrs.actionListener and not empty cc.attrs.image}"
actionListener="#{cc.attrs.actionListener}"
image="#{cc.attrs.image}" value="#{cc.attrs.value}"
oncomplete="#{rich:component('somePopup')}.show()">
<rich:tooltip followMouse="false" showDelay="1000" rendered="#{not empty cc.attrs.tooltip}">
#{cc.attrs.tooltip}
</rich:tooltip>
</a4j:commandButton>
<a4j:commandButton type="#{cc.attrs.type}" rendered="#{empty cc.attrs.actionListener and empty cc.attrs.image}"
value="#{cc.attrs.value}"
oncomplete="#{rich:component('somePopup')}.show()">
<rich:tooltip followMouse="false" showDelay="1000" rendered="#{not empty cc.attrs.tooltip}">
#{cc.attrs.tooltip}
</rich:tooltip>
</a4j:commandButton>
<a4j:commandButton type="#{cc.attrs.type}" rendered="#{not empty cc.attrs.actionListener and empty cc.attrs.image}"
actionListener="#{cc.attrs.actionListener}" value="#{cc.attrs.value}"
oncomplete="#{rich:component('somePopup')}.show()">
<rich:tooltip followMouse="false" showDelay="1000" rendered="#{not empty cc.attrs.tooltip}">
#{cc.attrs.tooltip}
</rich:tooltip>
</a4j:commandButton>
<rich:popupPanel id="somePopup"
header="#{cc.attrs.header}" autosize="true" resizeable="false">
<p>#{cc.attrs.message}</p>
<a4j:commandButton action="#{SomeViewController.someDeleteAction}" <!-- It should be #{cc.attrs.action} but I just put this for debug -->
value="#{cc.attrs.confirmBtn}" render="#{cc.attrs.render}"
oncomplete="#{rich:component('somePopup')}.hide()">
<cc:insertChildren />
</a4j:commandButton>
<h:commandButton value="#{cc.attrs.cancelBtn}"
onclick="#{rich:component('somePopup')}.hide(); return false;" />
</rich:popupPanel>
</cc:implementation>
</html>
..and replace the previous a4j:commandButton with this:
<my:buttonConfirm type="image" id="someID"
image="/someImage.gif"
action="#{SomeViewController.someDeleteAction}"
message="#{msg['a.confirmation.message']}"
render="someDataTableWithItems"
tooltip="#{msg['a.tooltip.message']}">
<f:setPropertyActionListener for="someID"
target="#{SomeViewModel.selectedItem}" value="#{item}" />
</my:buttonConfirm>
The popup appears and you can cancel the action, but when confirming it, SomeViewModel is reinstantiated again, losing the previous bean in scope.
The scope is a custom view scope got from here
I then changed the scope of the model to this one:
#Component("SomeViewModel")
#ViewScoped
Although I tried to use #ManagedBean instead of #Component, the app gave me autowiring errors so I left #Component. The scope was now kept.
I don't know whether the mix of JSF and Spring annotations on this way may have any other consequences.
However the scope of SomeViewModel was now fine, the f:setPropertyActionListener target was never set and the action #{SomeViewController.someDeleteAction} was never called. I have been unable to debug this (not sure where to put breakpoints to see what happens in the middle).
Thanks in advance for your help.
The <f:setPropertyActionListener> does not attach to a component id, but to an ActionSource. See this answer for how to do it.
Edit:
Basically instead of <f:setPropertyActionListener for="buttonId"> you'll have
<cc:interface>
<cc:actionSource name="source" targets="buttonId" />
…
</cc:interface>
<cc:implementation>
<a4jcommandButton id="buttonId" … />
</cc:implementation>
And point to it by <f:setPropertyActionListener for="source">.
After trying some suggestions and researching a little on my own I concluded that there is some kind of problem when using a4j:commandButton inside a rich:popupPanel. Action methods are not being called and attributes defined on f:setPropertyActionListener are not being setted. I have been unable to find out what is exactly getting lost in there.
I've seen examples on the Internet with a4j:commandButton inside a popup so I am not sure if this is caused by any of my dependencies. I use jsf-api 2.1.19, jsf-impl 2.1.19-jbossorg-1 and richfaces 4.3.5.Final.
This is the workaround I finally did. I hope it can be helpful to anyone with the same problem I had:
confirmButton.xhtml
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:cc="http://java.sun.com/jsf/composite">
<cc:interface>
<cc:attribute name="message"
default="Some message" />
<cc:attribute name="header"
default="Some header" />
<cc:attribute name="cancelBtn" default="No" />
<cc:attribute name="confirmBtn" default="Yes" />
<cc:attribute name="type" default="submit" />
<cc:attribute name="icon" required="false" />
<cc:attribute name="image" required="false" />
<cc:attribute name="action"
targets="popupConfirmButton" />
<cc:actionSource name="confirmListeners"
targets="popupConfirmButton" />
</cc:interface>
<cc:implementation>
<a4j:commandButton type="#{cc.attrs.type}"
image="#{cc.attrs.image}"
oncomplete="#{rich:component('popupConfirm')}.show()">
</a4j:commandButton>
<a4j:commandButton id="popupConfirmButton"
style="visibility: hidden;" render="#{cc.attrs.render}">
</a4j:commandButton>
<rich:popupPanel id="popupConfirm" header="#{cc.attrs.header}"
autosized="true" width="475" resizeable="false">
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popupConfirm')}.hide(); return false;" />
</f:facet>
<h:panelGrid columns="2">
<h:graphicImage value="#{cc.attrs.icon}" height="64" width="64" />
<p>#{cc.attrs.message}</p>
</h:panelGrid>
<br />
<div align="right">
<a4j:commandButton value="#{cc.attrs.confirmBtn}"
onclick="#{rich:element('popupConfirmButton')}.click();
#{rich:component('popupConfirm')}.hide();" />
<h:commandButton value="#{cc.attrs.cancelBtn}"
onclick="#{rich:component('popupConfirm')}.hide(); return false;" />
</div>
</rich:popupPanel>
</cc:implementation>
</html>
Component usage
<my:confirmButton type="image" image="someButtonImage.gif"
icon="someWarningImage.gif"
action="#{SomeViewController.doStuff}"
message="Some message"
render="someComponentID">
<f:setPropertyActionListener for="confirmListeners"
target="#{SomeViewModel.someProperty}" value="foo" />
</my:confirmButton>
I have designed a composite component that looks something like this:
<cc:interface>
<cc:attribute name="value" required="true" />
<cc:attribute name="title" required="true" />
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<div class="inputTile">
<div class="inputTitle">
<span>#{cc.attrs.title}</span>
</div>
<div class="inputTileContent">
<input type="text" value="#{cc.attrs.value}" />
</div>
</div>
</cc:implementation>
I am trying to load this onto a div on my web page through AJAX.
Any ideas on how to do that?
Something like this maybe?
<h:panelGroup id="foo" layout="block">
<your:composite rendered="#{bean.loadCompositeInDiv}" />
</h:panelGroup>
<h:commandButton value="Load composite in div" action="#{bean.setLoadCompositeInDiv(true)}">
<f:ajax render="foo" />
</h:commandButton>
with
#ManagedBean
#ViewScoped
public class Bean {
private boolean loadCompositeInDiv;
// Getter+setter
}