You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@myfaces.apache.org by Martin Koci <ma...@gmail.com> on 2011/06/07 21:29:38 UTC
[core] best way for editable table
Hi,
how to do editable table in JSF? Not with all rows/cell in editable
state, only with those ones which user switch with icon to update
state.
Example:
<a:column id="emailColumn">
<a:inputText id="email" value="#{rowData.email}" />
</a:column>
<a:column>
<h:commandButton value="Switch to update"
actionListener="#{rowData.switchToUpdate}" />
</a:column>
Solution 1:
add ValueExpression to attribute determines state of component:
<a:inputText id="email" value="#{suser.email}" displayValueOnly="#{!
rowData.editableState}"/>
This solution has serious disadvantages:
-- you must add expression to each component
-- for required additional expression is needed:
required="#{rowData.required}"
-- evaluation of VEs for each row is very slow
Solution 2:
use DataModelListener
Use o implementation of DataModelListener and when UIData scrolls to
row, set property of component directly:
uiComponent.setDisplayValueOnly(true|false)
Disadvantages:
-- dependency on DataModel as value for UIData
-- cannot be done from plain XHTML
What do you think about this problem? Do you know any elegant solution
for this?
Thanks,
Kočičák
Re: [core] best way for editable table
Posted by Martin Koci <ma...@gmail.com>.
Hi,
thanks all for answers.
After more thinking about it what I need is probably custom
rowStatePreserver.
JSF already mandates working with states for each row in UIdata. There
are two modes:
1) rowStatePreserved = false (old one): only editableValueHolder and its
submittedValue, localValue, value and submittedValue are preserved
2) rowStatePreserved = true: full state of component per-row is
preserved
What can make editable dataTable very easy is possibility to plug-in
custom behaviour to row state iteration. Internally myfaces use in
UIData Map<clientId,States) for row states. If you want to switch
different row to different modes, you must also provide such map:
Map<String id, State> where State = {"required"="true",
"displayValueOnly"="false"} etc.
Example of possible APIs:
<a:dataTable rowStatePreserver="#{myStatePreserver}">
MyRowStatePreserver extends javax.faces...DefaultRowStatePreserver
RowKeySet rowsInEditableMode;
States states;
public void setRowState(Object rowKey, UIComponent c) {
super.setRowState(rowKey, c)
if (rowsInEditableMode.contains(rowKey) {
State state = states.get(c.getId());
c.setRequired(state.isRequired)
c.setDisplayValueOnly(state.isDisplayValueOnly)
}
}
What do you think about it?
Regards,
Kočičák
Çağatay Çivici píše v St 08. 06. 2011 v 10:01 +0300:
> I have implemented something similar in PrimeFaces via cellEditor
> component which can take any editable component as a child;
>
>
> http://www.primefaces.org/showcase-labs/ui/datatableEditing.jsf
>
> On Jun 7, 2011, at 11:05 PM, Werner Punz wrote:
>
> > I opted for approach 1 in one project i have on github, speed is not
> > really an issue since you display only a handful of datasets anyway,
> > but I tried to keep the editable information outside of the
> > lifecycle
> > to avoid unnecessary saves and restores.
> >
> > Werner
> >
> >
> >
> >
> > Am 07.06.11 21:29, schrieb Martin Koci:
> > > Hi,
> > >
> > >
> > > how to do editable table in JSF? Not with all rows/cell in
> > > editable
> > > state, only with those ones which user switch with icon to update
> > > state.
> > >
> > > Example:
> > > <a:column id="emailColumn">
> > > <a:inputText id="email" value="#{rowData.email}" />
> > > </a:column>
> > >
> > > <a:column>
> > > <h:commandButton value="Switch to update"
> > > actionListener="#{rowData.switchToUpdate}" />
> > > </a:column>
> > >
> > >
> > > Solution 1:
> > > add ValueExpression to attribute determines state of component:
> > >
> > > <a:inputText id="email" value="#{suser.email}"
> > > displayValueOnly="#{!
> > > rowData.editableState}"/>
> > >
> > > This solution has serious disadvantages:
> > > -- you must add expression to each component
> > > -- for required additional expression is needed:
> > > required="#{rowData.required}"
> > > -- evaluation of VEs for each row is very slow
> > >
> > >
> > > Solution 2:
> > > use DataModelListener
> > >
> > > Use o implementation of DataModelListener and when UIData scrolls
> > > to
> > > row, set property of component directly:
> > > uiComponent.setDisplayValueOnly(true|false)
> > >
> > > Disadvantages:
> > > -- dependency on DataModel as value for UIData
> > > -- cannot be done from plain XHTML
> > >
> > >
> > >
> > > What do you think about this problem? Do you know any elegant
> > > solution
> > > for this?
> > >
> > > Thanks,
> > >
> > > Kočičák
> > >
> > >
> > >
> > >
> >
> >
> >
>
> Çağatay Çivici
> Principal Consultant
> PrimeFaces Lead | JSF EG Member
>
> Prime Teknoloji
> Bilkent Cyberpark, A-303d
> 06800 Ankara/Turkey
> Tel: +90 312 265 05 07
> http://www.prime.com.tr
>
>
Re: [core] best way for editable table
Posted by Çağatay Çivici <ca...@gmail.com>.
I have implemented something similar in PrimeFaces via cellEditor component which can take any editable component as a child;
http://www.primefaces.org/showcase-labs/ui/datatableEditing.jsf
On Jun 7, 2011, at 11:05 PM, Werner Punz wrote:
> I opted for approach 1 in one project i have on github, speed is not really an issue since you display only a handful of datasets anyway, but I tried to keep the editable information outside of the lifecycle
> to avoid unnecessary saves and restores.
>
> Werner
>
>
>
>
> Am 07.06.11 21:29, schrieb Martin Koci:
>> Hi,
>>
>>
>> how to do editable table in JSF? Not with all rows/cell in editable
>> state, only with those ones which user switch with icon to update
>> state.
>>
>> Example:
>> <a:column id="emailColumn">
>> <a:inputText id="email" value="#{rowData.email}" />
>> </a:column>
>>
>> <a:column>
>> <h:commandButton value="Switch to update"
>> actionListener="#{rowData.switchToUpdate}" />
>> </a:column>
>>
>>
>> Solution 1:
>> add ValueExpression to attribute determines state of component:
>>
>> <a:inputText id="email" value="#{suser.email}" displayValueOnly="#{!
>> rowData.editableState}"/>
>>
>> This solution has serious disadvantages:
>> -- you must add expression to each component
>> -- for required additional expression is needed:
>> required="#{rowData.required}"
>> -- evaluation of VEs for each row is very slow
>>
>>
>> Solution 2:
>> use DataModelListener
>>
>> Use o implementation of DataModelListener and when UIData scrolls to
>> row, set property of component directly:
>> uiComponent.setDisplayValueOnly(true|false)
>>
>> Disadvantages:
>> -- dependency on DataModel as value for UIData
>> -- cannot be done from plain XHTML
>>
>>
>>
>> What do you think about this problem? Do you know any elegant solution
>> for this?
>>
>> Thanks,
>>
>> Kočičák
>>
>>
>>
>>
>
>
Çağatay Çivici
Principal Consultant
PrimeFaces Lead | JSF EG Member
Prime Teknoloji
Bilkent Cyberpark, A-303d
06800 Ankara/Turkey
Tel: +90 312 265 05 07
http://www.prime.com.tr
Re: [core] best way for editable table
Posted by Martin Koci <ma...@gmail.com>.
Hi,
yes I use 1. for small tables, but consider table 200 x 200.
Then you must have required, displayValueOnly, disabled etc for each
component - that means 200x200x3 evaluated expression during *one* JSF
phase.
Regards,
Kočičák
Werner Punz píše v Út 07. 06. 2011 v 22:05 +0200:
> opted
Re: [core] best way for editable table
Posted by Werner Punz <we...@gmail.com>.
I opted for approach 1 in one project i have on github, speed is not
really an issue since you display only a handful of datasets anyway, but
I tried to keep the editable information outside of the lifecycle
to avoid unnecessary saves and restores.
Werner
Am 07.06.11 21:29, schrieb Martin Koci:
> Hi,
>
>
> how to do editable table in JSF? Not with all rows/cell in editable
> state, only with those ones which user switch with icon to update
> state.
>
> Example:
> <a:column id="emailColumn">
> <a:inputText id="email" value="#{rowData.email}" />
> </a:column>
>
> <a:column>
> <h:commandButton value="Switch to update"
> actionListener="#{rowData.switchToUpdate}" />
> </a:column>
>
>
> Solution 1:
> add ValueExpression to attribute determines state of component:
>
> <a:inputText id="email" value="#{suser.email}" displayValueOnly="#{!
> rowData.editableState}"/>
>
> This solution has serious disadvantages:
> -- you must add expression to each component
> -- for required additional expression is needed:
> required="#{rowData.required}"
> -- evaluation of VEs for each row is very slow
>
>
> Solution 2:
> use DataModelListener
>
> Use o implementation of DataModelListener and when UIData scrolls to
> row, set property of component directly:
> uiComponent.setDisplayValueOnly(true|false)
>
> Disadvantages:
> -- dependency on DataModel as value for UIData
> -- cannot be done from plain XHTML
>
>
>
> What do you think about this problem? Do you know any elegant solution
> for this?
>
> Thanks,
>
> Kočičák
>
>
>
>