RichFaces UI structure and pittfalls
Hi,
I am new to RF and am having difficulties with making a simple CRUD project in this framework.
What the end user essentially wants is a simple table with the ability to select a row, when this happens the action buttons on the left of this table change (enable/disable)
So for example when one would press the "Add item" a popupPanel would appear with a small form with just 2 text fields, a save and cancel button.
The problems I currently face are:
- Sometimes the action of the save button in said popupPanel is not triggered, on other occasions, like when first submitting an empty form and then a filled one, it does work.
- When triggering a create/update or delete of an item I ask the table to be re-rendered, this does not happen however and in order to see the updated list I must refresh the page.
- The extendedDataTable's column widths are ignoring percentages, using <rich:column width="100%"> does nothing and seems similar to auito, while <rich:column width="400px" scales it properly to 400 pixels. using CSS classes does not change anything, so is there a way to have percentage based column widths for chaning resolutions?
- In my code I now have one form which surrounds both my action buttons and my table, and another form which surrounds my popupPanel. Is this a wise decision or should I do it differently? I ended up this way since splitting it up made it even worse both in layout and behaviour.
- As I am used to different platforms than JSF I was also wondering if the general approach to my code is a good strategy or how I should do this otherwise.
- Notice the render attributes for the commandButton action bar, I set it to @form out of desperation but nothing there seems to work. Does the render occur before or after the action or am i simply using the wrong type?
Below is my index.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<!-- head omitted for clarity -->
<h:body>
<h:form>
<h:panelGrid columns="2" columnClasses="menuColumn,contentColumn"
height="100%" width="90%">
<!-- Action button bar -->
<h:panelGrid columns="1" columnClasses="cols" height="100%"
width="24">
<a4j:commandButton type="image" image="/resources/img/page_add.png"
execute="@form" render="edit_form" action="#{liveCycleProxyController.addMapping}"
oncomplete="#{rich:component('popup')}.show();">
<rich:tooltip value="#{rs['controls.add']}" for="btnAdd" />
</a4j:commandButton>
<a4j:commandButton type="image" image="/resources/img/page_white_edit.png"
execute="@form" render="edit_form" action="#{liveCycleProxyController.updateMapping}"
oncomplete="#{rich:component('popup')}.show();">
<rich:tooltip value="#{rs['controls.update']}" for="btnUpdate" />
</a4j:commandButton>
<a4j:commandButton type="image" image="/resources/img/delete.png"
execute="@form" render="@form"
action="#{liveCycleProxyController.removeMapping}">
<rich:tooltip value="#{rs['controls.delete']}" for="btnDelete" />
</a4j:commandButton>
</h:panelGrid>
<rich:extendedDataTable var="mapping" id="mappingTable"
noDataLabel="#{rs.noItemsFound}" selectionMode="single"
selection="#{liveCycleProxyController.selection}"
value="#{liveCycleProxyController.mappings}">
<a4j:ajax execute="@form" event="selectionchange"
listener="#{liveCycleProxyController.selectionListener}"/>
<f:facet name="header">
<h:outputText value="#{rs.mappingTableHeader}" />
</f:facet>
<rich:column width="300px">
<f:facet name="header">
<h:outputText value="#{rs.keyColumnHeader}" />
</f:facet>
<h:outputText value="#{mapping.mappingName}" />
</rich:column>
<rich:column width="300px">
<f:facet name="header">
<h:outputText value="#{rs.valueColumnHeader}" />
</f:facet>
<h:outputText value="#{mapping.url}" />
</rich:column>
</rich:extendedDataTable>
</h:panelGrid>
</h:form>
<!-- Mapping popup -->
<a4j:region>
<h:form id="edit_form">
<rich:popupPanel id="popup" modal="true" autosized="true"
resizeable="false" domElementAttachment="form" >
<f:facet name="header">
<h:outputText value="#{rs.mappingData}" />
</f:facet>
<h:inputHidden name="id"
value="#{liveCycleProxyController.id}" />
<h:outputLabel value="#{rs.keyColumnHeader}: " for="txtName" />
<h:inputText id="txtName"
value="#{liveCycleProxyController.mappingName}" />
<h:message for="txtName"/>
<br />
<h:outputLabel value="#{rs.valueColumnHeader}: " for="txtUrl" />
<h:inputText id="txtUrl"
value="#{liveCycleProxyController.url}" />
<h:message for="txtUrl"/>
<br />
<p class="submit">
<a4j:commandButton id="save" value="Save"
render="mappingTable"
action="#{liveCycleProxyController.save}" type="submit"
oncomplete="#{rich:component('popup')}.hide(); "
/>
<a4j:commandButton id="cancel" value="Cancel"
action="#{liveCycleProxyController.cancel}" ajaxSingle="true"
immediate="true" oncomplete="#{rich:component('popup')}.hide(); " />
</p>
</rich:popupPanel>
</h:form>
</a4j:region>
</h:body>
</html>
and in attachment the included Java Bean,
If anyone is able to point me in the right direction I would very much appreciate this.
If what I want to do with RF is impossible (I worked with Flex and ExtJS before) then that would be a sad thing, given all the Ajax functionality being present.
But the examples that are present in the showcase are very limited in showing me a proper way of how to work with the framework, so that's why I need more help to find my way
Thanks in advance!
