I'm having issues with rich:dragSupport inside an ui:repeat. The component is displayed correctly but the drag action isn't called.
This code works:
<a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
<rich:dragSupport dragIndicator=":indicator" dragType="type" dragValue="CALENDAR" reRender="editPanel">
<rich:dndParam name="label" value="Calendar" />
</rich:dragSupport>
<h:outputText value="Calendar"></h:outputText>
</a4j:outputPanel>
But this does not:
<ui:repeat value="#{formBuilderManagerBean.inputElements}" var="input">
<a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
<rich:dragSupport dragIndicator=":indicator" dragType="type" dragValue="#{input.componentId}" reRender="editPanel">
<rich:dndParam name="label" value="#{msg[input.name]}" />
</rich:dragSupport>
<h:outputText value="#{msg[input.name]}"/>
</a4j:outputPanel>
</ui:repeat>
The input object's getComponentId() method doesn't even get called!
HALP!
Apparently using <c:forEach> instead of <ui:repeat> works.
Related
I am using PF v.5.3.5 and JSF v.2.2.8. It is a frequent topic in SO. I noticed that there is a bug in PF v.5.3.5 documentation related to the appendTo attribute.
1st approach
The p:confirmDialog is rendered and commandbuttons are rendered but actions does not work and message is not rendered if it is placed inside of nested h:form.
2st approach
If I place this dialog outside of main h:form it is not rendered at all also if I add the global="true" attribute.
3st approach
The p:confirmDialog is rendered and commandbuttons are rendered but actions does not work and message is rendered if the nested h:form is removed.
<h:form>
...
<p:confirmDialog id="askSessionDialog1" widgetVar="askSessionDialog1" severity="alert"
appendTo="#(body)" rendered="#{treeData.askSessionDialogRendered}" visible="#{treeData.askSessionDialogRendered}">
<h:form>
<f:facet name="message">
<h:outputText value="#{msg.WEB_ADMIN_PAGES_TREESEGMENT_NOSESSION}" escape="false"/>
</f:facet>
<p:commandButton value="#{msg.WEB_BUTTONS_OK}" action="#{treeData.save(false, true)}" icon="fa fa-check"
update="#(form)" type="button" />
<p:commandButton value="#{msg.WEB_BUTTONS_CANCEL}" action="#{treeData.setAskSessionDialogRendered(false)}"
icon="fa fa-close" onclick="PF('askSessionDialog1.hide()')" update="#(form)" type="reset" />
</h:form>
</p:confirmDialog>
...
</h:form>
BECKEND PART
setAskSessionDialogRendered(true);
RequestContext.getCurrentInstance().update("treeSegmentForm askSessionDialog askTurnOffDialog askSessionDialog1 askTurnOffDialog1");
Thanks in advance for constructive posts and comments.
SOLVED
This is the best approach that works for me now.
<h:form>
...
<p:confirmDialog id="askSessionDialog" widgetVar="askSessionDialog" severity="alert"
appendTo="#(body)" rendered="#{treeData.askSessionDialogRendered}" visible="#{treeData.askSessionDialogRendered}">
<f:facet name="message">
<h:outputText value="#{msg.WEB_ADMIN_PAGES_TREESEGMENT_NOSESSION}" escape="false"/>
</f:facet>
<h:form>
<p:commandButton value="#{msg.WEB_BUTTONS_OK}" icon="fa fa-check" type="button" accesskey="o">
<p:ajax event="click" listener="#{treeData.save(false, true)}" oncomplete="PF('askSessionDialog').hide()"
update="#(form)" />
</p:commandButton>
<p:commandButton value="#{msg.WEB_BUTTONS_CANCEL}" icon="fa fa-close" type="reset" accesskey="c">
<p:ajax event="click" listener="#{treeData.setAskSessionDialogRendered(false)}"
onsuccess="PF('askSessionDialog').hide()" update="#(form)" />
</p:commandButton>
</h:form>
</p:confirmDialog>
...
</h:form>
BACKEND
setAskSessionDialogRendered(true);
RequestContext.getCurrentInstance().update("treeSegmentForm");
SPACIAL THANKS TO: #YagamiLight
He helped me to kick off my solution.
I have a form with a button that opens a Rich:modalPanel with another form inside and two buttons at bottom; Close and Save.
Close: executes onclick="#{rich:component('mp')}.hide() and hides the modalPanel.
Save: validates the fields of the forms shows an error if is not complete, if the form is correct saves in db. reset the form but not close the Rich:modalPanel.
I want to close the Rich:modalPanel only if the form is ok and saves but i cant do it. I tried with:
Inserting Javascript:
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}" onclick="#{rich:component('mp')}.hide()"/><br />
and
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}" oncomplete="#{rich:component('mp')}.hide()"/><br />
Using only RichFaces:
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}">
<rich:componentControl for="mp" operation="hide" event="onclick" />
</a4j:commandButton><br />
and
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}">
<rich:componentControl for="mp" operation="hide" event="oncomplete" />
</a4j:commandButton><br />
But this codes always closes (or hide) the modalPanel, not only if the save is complete. Is it another way to close this modalPanel only if the save is ok?.
The Error popup is:
<a4j:outputPanel ajaxRendered="true">
<h:messages id="error" styleClass="error"></h:messages>
</a4j:outputPanel>
<rich:modalPanel id="panel2" width="350" height="100" zindex="4000" showWhenRendered="${persona.hayErrores || persona.exito}">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="${msg.error}" rendered="#{persona.hayErrores}"></h:outputText>
<h:outputText value="${msg.info}" rendered="#{persona.exito}"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/estilos/general/img/iconos/close.png" style="cursor:pointer" id="hidelink2"/>
<rich:componentControl for="panel2" attachTo="hidelink2" operation="hide" event="onclick"/>
</h:panelGroup>
</f:facet>
<a4j:outputPanel ajaxRendered="true">
<h:outputText value="#{persona.listaErrores}" rendered="#{persona.hayErrores}" styleClass="error"/>
<h:outputText value="#{msg.personaExito}" rendered="#{persona.exito}"/>
</a4j:outputPanel>
</rich:modalPanel>
Solved:
Just adding another rich:componentControl with conditions in popup message showing validation.
// If its wrong, only closes this popup
<rich:componentControl for="panel2" attachTo="hidelink2" operation="hide" event="onclick" rendered="#{persona.hayErrores}" />
// If its ok, closes this popup and 'mp' modalPanel
<rich:componentControl for="panel2,mp" attachTo="hidelink2" operation="hide" event="onclick" rendered="#{persona.exito}" />
You can use oncomplete attribute of a4j:commandButton, like
<a4j:commandButton action="#{persona.guardarAuxiliar}"
oncomplete="Richfaces.hideModalPanel('mp')"
value="#{msg.guardar}" reRender="personaForm" />
or with condition
oncomplete="if (#{!yourAction.hasErrors}) Richfaces.hideModalPanel('mp')"
Classical case with checking validation errors
oncomplete="if (#{facesContext.maximumSeverity == null}) {Richfaces.hideModalPanel('mp');}"
i have to edit a row in a table using rich faces 4 and modal panel. I am new one so please tell me in details and i know to make a table in rich faces. i already searched so many things but not getting any fruitful
See answer for question "Richfaces: show details in popup [commandbutton, action and popupPanel]". It works in RichFaces 4.x with rowClick.
Or here is example with commandLink:
<a4j:commandLink action="#{actionBean.setupTransactionDetails}"
event="onclick" render="transactionDetails"
oncomplete="#{rich:component('transactionDetails')}.show()"
styleClass="rich-link">
<h:outputText value="#{res.transactionType}" />
<f:setPropertyActionListener value="#{res.transactionId}"
target="#{profile.transactionId}" />
</a4j:commandLink>
But I prefer updated version like this:
<a4j:jsFunction name="showDetail" action="#{actionBean.setupTransactionDetails}"
oncomplete="#{rich:component('transactionDetails')}.show();"
render="transactionDetails">
<a4j:param name="id" assignTo="#{profile.transactionId}"
converter="javax.faces.Long" />
</a4j:jsFunction>
<rich:dataTable id="txnTable" rows="#{referenceData.recordsPerPage}"
style="width: 100%" rowClasses="oddrow, evenrow"
value="#{profile.transactions}" var="res" sortMode="single">
<h:column width="110">
<f:facet name="header">
<h:outputText value="#{msg.transactionType}" />
</f:facet>
<a4j:commandLink onclick="showDetail('#{res.transactionId}');"
value="#{res.transactionType}" />
</h:column>
</rich:dataTable>
<rich:popupPanel id="transactionDetails" autosized="true"
style="max-height:600px;">
<!-- f:facet name="header" and f:facet name="controls" here -->
<h:form id="transactionDetailsForm">
<!-- some details here -->
</h:form>
</rich:popupPanel>
Profile backing bean
private Long transactionId; // + getter and setter
Action backing bean
public void setupTransactionDetails() {
Transaction txn = DAO.getInstance().get(Transaction.class, getProfile().getTransactionId());
transactionForm.setup(txn);
}
In case if you use EL 2.2 (or higher) you can call action bean method with parameter.
I have paid a decent hair tribute to this one
Why in the world, Label 1 and Label 2 have different vertical alignments?
<s:Form width="100%">
<s:FormHeading width="100%" label="Heading" />
<s:FormItem width="100%" label="Label 1">
<s:HGroup verticalAlign="bottom">
<s:Label text="Size" fontSize="40"/>
<s:Label text="Mb"/>
</s:HGroup>
</s:FormItem>
<s:FormItem width="100%" label="Label 2">
<s:HGroup verticalAlign="middle">
<s:VGroup horizontalAlign="center">
<s:Label text="Set1" />
<s:Label text="{this.set1}" fontSize="40"/>
<s:Label text="Days" />
</s:VGroup>
<s:Label text="+" fontSize="40" />
<s:VGroup horizontalAlign="center">
<s:Label text="Set2" />
<s:Label text="{this.set2}" fontSize="40" />
<s:Label text="Days" />
</s:VGroup>
</s:HGroup>
</s:FormItem>
</s:Form>
Bug or feature? The label of a FormItem is aligned with the baseline of the FormItem's content. A picture says more than a thousand words, so I'll show you what happens:
So it turns out to be a feature (thanks for asking this question: I didn't know this myself until today).
In order to "fix" this feature, you'll have to create a custom skin: create a skin class by copying the original spark.skins.spark.FormItemSkin.
Find the element called labelDisplay; it should look like this:
<s:Label id="labelDisplay"
fontWeight="bold"
left="labelCol:0" right="labelCol:5"
bottom="row1:10" baseline="row1:0"/>
See that baseline attribute? That's what's causing the undesired behaviour.
You can simply remove it; the label will then always align to the bottom. If you wish to align it to the vertical center, you could alter it like this:
<s:Label id="labelDisplay" fontWeight="bold" verticalAlign="middle"
left="labelCol:0" right="labelCol:5" top="row1:10" bottom="row1:10"/>
Now all you need to do, is applying your custom skin to your FormItem:
<s:FormItem skinClass="my.custom.FormItemSkin">
Or in case of more frequent usage:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
s|FormItem.centeredLabel {
skinClass: ClassReference("my.custom.FormItemSkin");
}
</fx:Style>
<s:FormItem styleName="centeredLabel">
<rich:dataTable id="companyList" var="company"
value="#{companyList.resultList}"
rowClasses="odd-row, even-row"
rendered="#{not empty companyList.resultList}">
<rich:column width="25px" style="text-align:center;">
<f:facet name="header">#{messages.Edit}</f:facet>
<a4j:commandLink reRender="companyPanel"
oncomplete="#{rich:component('companyPanel')}.show()"
style="align: center;"> <f:setPropertyActionListener target=
"#{companyHome.instance}"
value="#{company}" />
<rich:toolTip value="#{messages.Edit}" />
</a4j:commandLink>
</rich:column>
<h:column>
<f:facet name="header">
#{messages.companyName}</f:facet>
#{company.companyName}
</h:column>
</rich:dataTable>
Hi I have some problem my rich datatable. All operation work normally , I search some data in dataTable ,I get true list in datatable but, If I try to update some data in column , wrong instance coming. Forexample , I choose banana which name is my data , but it brings before searching data not bring banana. I do not understand why. Sorry my english.
Not sure but, have you tried this
<f:setPropertyActionListener target="#{companyHome.id}" value="#{company.id}" />
instead of
<f:setPropertyActionListener target="#{companyHome.instance}" value="#{company}" />