You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@pivot.apache.org by Taro App <ap...@gmail.com> on 2010/06/07 04:25:12 UTC
Editable Table?
Hi,
I'm trying to create an editable table using Pivot's TableView. Pivot
supports TableView.RowEditor which enables one row to be editable when
double clicked, but I want to make all rows editable at the same time,
similar to input components in a dataTable in JSF, or input elements
in a table in HTML. I think it can be done with a custom
TableView.CellRenderer. To begin, I tried using
TableViewBooleanCellRenderer and TableViewTextAreaCellRenderer so I
can make editable table with checkboxes and text areas, but it didn't
work as I expected; checkboxes and text areas are disabled. I tried
setting TableView.isEnabled = true, TableViewBooleanCellRenderer
.isCheckboxDisabled = false, TableViewTextAreaCellRenderer .isEditable
= true, but it didn't fix the issue. Does anyone know how I should
proceed?
apptaro
Re: Editable Table?
Posted by Taro App <ic...@gmail.com>.
Dirk,
Thank you for the info! I'm trying it out!
apptaro
On Wed, Jun 9, 2010 at 7:15 AM, Dirk Möbius <dm...@scoop-gmbh.de> wrote:
> I suggest that you try TablePane. JSF DataTable is more like TablePane than
> TableView, because with JSF DataTable you include real editable components,
> just as TablePane does.
>
> If you surround it with a ScrollPane, it's almost like a TableView, only
> headers are missing. You can simulate that with a row of PushButtons, the
> only thing that you don't get for free is column resizing.
>
> Dirk.
>
>
> Taro App wrote
>>
>> Hi Greg,
>>
>> As I understand, a TablePane is a layout container in which you
>> arrange components, and a TableView is a data view in which you show
>> collection data. I want the latter, so I was trying to make it
>> editable. Sorry for my confusing explanation, but JSF DataTable does a
>> similar thing as TableView does, but I can make it all rows editable
>> at the same time. I'm creating a prototype of an order entry
>> application. Pivot's Form is perfect for order header data. For order
>> line data, I wanted to use a TableView. But as I wrote before, I
>> didn't succeed. Any help?
>>
>> apptaro
>>
>>
>> On Mon, Jun 7, 2010 at 8:47 PM, Greg Brown <gk...@mac.com> wrote:
>>>
>>> TableView row editors are really only meant to edit one row at a time.
>>> What you describe sounds like it might actually be more of a use case for a
>>> TablePane.
>>>
>>> On Jun 6, 2010, at 10:25 PM, Taro App wrote:
>>>
>>>> Hi,
>>>>
>>>> I'm trying to create an editable table using Pivot's TableView. Pivot
>>>> supports TableView.RowEditor which enables one row to be editable when
>>>> double clicked, but I want to make all rows editable at the same time,
>>>> similar to input components in a dataTable in JSF, or input elements
>>>> in a table in HTML. I think it can be done with a custom
>>>> TableView.CellRenderer. To begin, I tried using
>>>> TableViewBooleanCellRenderer and TableViewTextAreaCellRenderer so I
>>>> can make editable table with checkboxes and text areas, but it didn't
>>>> work as I expected; checkboxes and text areas are disabled. I tried
>>>> setting TableView.isEnabled = true, TableViewBooleanCellRenderer
>>>> .isCheckboxDisabled = false, TableViewTextAreaCellRenderer .isEditable
>>>> = true, but it didn't fix the issue. Does anyone know how I should
>>>> proceed?
>>>>
>>>> apptaro
>>>
>
>
Re: Editable Table?
Posted by Dirk Möbius <dm...@scoop-gmbh.de>.
I suggest that you try TablePane. JSF DataTable is more like TablePane
than TableView, because with JSF DataTable you include real editable
components, just as TablePane does.
If you surround it with a ScrollPane, it's almost like a TableView, only
headers are missing. You can simulate that with a row of PushButtons,
the only thing that you don't get for free is column resizing.
Dirk.
Taro App wrote
> Hi Greg,
>
> As I understand, a TablePane is a layout container in which you
> arrange components, and a TableView is a data view in which you show
> collection data. I want the latter, so I was trying to make it
> editable. Sorry for my confusing explanation, but JSF DataTable does a
> similar thing as TableView does, but I can make it all rows editable
> at the same time. I'm creating a prototype of an order entry
> application. Pivot's Form is perfect for order header data. For order
> line data, I wanted to use a TableView. But as I wrote before, I
> didn't succeed. Any help?
>
> apptaro
>
>
> On Mon, Jun 7, 2010 at 8:47 PM, Greg Brown <gk...@mac.com> wrote:
>> TableView row editors are really only meant to edit one row at a time. What you describe sounds like it might actually be more of a use case for a TablePane.
>>
>> On Jun 6, 2010, at 10:25 PM, Taro App wrote:
>>
>>> Hi,
>>>
>>> I'm trying to create an editable table using Pivot's TableView. Pivot
>>> supports TableView.RowEditor which enables one row to be editable when
>>> double clicked, but I want to make all rows editable at the same time,
>>> similar to input components in a dataTable in JSF, or input elements
>>> in a table in HTML. I think it can be done with a custom
>>> TableView.CellRenderer. To begin, I tried using
>>> TableViewBooleanCellRenderer and TableViewTextAreaCellRenderer so I
>>> can make editable table with checkboxes and text areas, but it didn't
>>> work as I expected; checkboxes and text areas are disabled. I tried
>>> setting TableView.isEnabled = true, TableViewBooleanCellRenderer
>>> .isCheckboxDisabled = false, TableViewTextAreaCellRenderer .isEditable
>>> = true, but it didn't fix the issue. Does anyone know how I should
>>> proceed?
>>>
>>> apptaro
>>
Re: Editable Table?
Posted by Greg Brown <gk...@mac.com>.
Sounds good. Seems like it might be a generally useful component - depending on how it turns out, maybe you would be willing to consider submitting it for inclusion in the platform?
On Jun 8, 2010, at 10:53 AM, Taro App wrote:
> Greg,
>
> Thank you for your reply. My understanding is that since TableView is
> designed for the single-row edit model and to be light-weight, it
> would be more complicated to make it all-row-editable. So I'm going to
> try creating a custom data-driven TablePane. Yes, it looks old-school
> with the simplified example I wrote, but I have many more columns and
> complicated validation logic to write, so I will come back with more
> questions!! :p
>
> apptaro
Re: Editable Table?
Posted by Taro App <ic...@gmail.com>.
Greg,
Thank you for your reply. My understanding is that since TableView is
designed for the single-row edit model and to be light-weight, it
would be more complicated to make it all-row-editable. So I'm going to
try creating a custom data-driven TablePane. Yes, it looks old-school
with the simplified example I wrote, but I have many more columns and
complicated validation logic to write, so I will come back with more
questions!! :p
apptaro
Re: Editable Table?
Posted by Greg Brown <gk...@mac.com>.
> Greg, the single-row edit model would work technically, but would be
> very inconvenient for users. Image order items displayed in a
> TableView...Users often need to change data in vertical manner, for
> example, to cancel some rows, or to set shipping fee to zero for some
> rows. In the single-row edit model, users would have to activate each
> row before editing, and would end up clicking twice as much.
Understood. However, a user can still only edit a single row at a time. Making them all editable at once is not going to be very efficient, as it will require creating an actual component for each cell that is currently painted by a renderer. As you noted, it is also more complicated to do.
Note that double-clicking a row is not the only way to edit it - it is just the default. You can programmatically edit a row based on other events. For example, you could have the up/down arrow keys trigger an edit of the previous/next row. You also don't need to animate the transition that opens and closes the editor. You could turn it off to improve efficiency if that makes sense for your app.
> Just for your information, in JSF, I'm doing something like this:
>
> <h:dataTable value="#{orderBean.lines}" var="line">
> <h:column>
> <f:facet name="header"><h:outputText value="Item Name"/></f:facet>
> <h:inputText id="itemName" value="#{line.itemName}" readonly="true"/>
> <h:commandButton value="Search Item" onclick="..."/>
> </h:column>
> <h:column>
> <f:facet name="header"><h:outputText value="Quantity"/></f:facet>
> <h:inputText id="quantity" value="#{line.quantity}"/>
> </h:column>
> <h:column>
> <f:facet name="header"><h:outputText value="Unit Price"/></f:facet>
> <h:inputText id="unitPrice" value="#{line.unitPrice}"/>
> </h:column>
> <h:column>
> <f:facet name="header"><h:outputText value="Delivery Date"/></f:facet>
> <t:inputDate value="#{line.deliveryDate}"/>
> </h:column>
> <h:column>
> <f:facet name="header"><h:outputText value="Cancel"/></f:facet>
> <h:selectBooleanCheckbox value="#{line.cancelFlag}"/>
> </h:column>
> ..
> </h:dataTable>
>
> Above JSF code will render order lines in table rows, with Item Name,
> Quantity, Unit Price, Delivery Date and Cancel in columns, and all the
> rows show buttons, input fields and checkboxes.
You could potentially accomplish something like this by creating a custom, data-driven subclass of TablePane. Rather than defining cell renderers, like TableView, it could allow the caller to specify Components that would be used as the cell editors. It would automatically respond to changes in the model by adding or removing rows.
This wouldn't be difficult to build. However, it doesn't seem like a very elegant solution - it reminds me of an early HTML app, before DHTML/JavaScript. But that's just my opinion. :-)
G
Re: Editable Table?
Posted by Taro App <ic...@gmail.com>.
Todd, that sounds very complicated! Since there are classes like
TableViewBooleanCellRenderer and TableViewTextAreaCellRenderer, I
expected something more simple...
Greg, the single-row edit model would work technically, but would be
very inconvenient for users. Image order items displayed in a
TableView. In columns it would show item name, quantity, price,
delivery date, shipping status, cancel status, shipping fee and other
things. Users often need to change data in vertical manner, for
example, to cancel some rows, or to set shipping fee to zero for some
rows. In the single-row edit model, users would have to activate each
row before editing, and would end up clicking twice as much. Yes, I
think the single-row edit model is very cool, but from the operational
view, I know many cases where the all-row edit model would work
better. Another reason is that our current application in JSF already
provides the all-row edit model, so I don't want to make it less
convenient for users.
My question is, is it difficult to achieve the all-row edit model
using a TableView? As I wrote, I saw classes like
TableViewBooleanCellRenderer and TableViewTextAreaCellRenderer, I
thought it is a matter of knowing how, isn't it? Or is it really
difficult as Todd said?
Just for your information, in JSF, I'm doing something like this:
<h:dataTable value="#{orderBean.lines}" var="line">
<h:column>
<f:facet name="header"><h:outputText value="Item Name"/></f:facet>
<h:inputText id="itemName" value="#{line.itemName}" readonly="true"/>
<h:commandButton value="Search Item" onclick="..."/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="Quantity"/></f:facet>
<h:inputText id="quantity" value="#{line.quantity}"/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="Unit Price"/></f:facet>
<h:inputText id="unitPrice" value="#{line.unitPrice}"/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="Delivery Date"/></f:facet>
<t:inputDate value="#{line.deliveryDate}"/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="Cancel"/></f:facet>
<h:selectBooleanCheckbox value="#{line.cancelFlag}"/>
</h:column>
..
</h:dataTable>
Above JSF code will render order lines in table rows, with Item Name,
Quantity, Unit Price, Delivery Date and Cancel in columns, and all the
rows show buttons, input fields and checkboxes.
apptaro
On Tue, Jun 8, 2010 at 4:01 AM, Greg Brown <gk...@mac.com> wrote:
> Is there any reason the single-row edit model wouldn't work for you? Even if
> you were to make all of the rows appear editable, the user can still only
> edit one of them at a time...
>
> On Jun 7, 2010, at 2:51 PM, Todd Volkert wrote:
>
> You could create your own notion of a multi-row table editor by listening
> for the user input events yourself (like double-click, etc.) and then
> opening a decorationless window or series or windows over the table view.
> The tricky is laying out your editors directly over the table cells so that
> it looks like all the cells became editable... I'd watch out for
> performance implications as well if you have a table with a large number of
> rows, and you make them all editable at once.
>
> -T
>
> On Mon, Jun 7, 2010 at 2:37 PM, Taro App <ic...@gmail.com> wrote:
>>
>> Hi Greg,
>>
>> As I understand, a TablePane is a layout container in which you
>> arrange components, and a TableView is a data view in which you show
>> collection data. I want the latter, so I was trying to make it
>> editable. Sorry for my confusing explanation, but JSF DataTable does a
>> similar thing as TableView does, but I can make it all rows editable
>> at the same time. I'm creating a prototype of an order entry
>> application. Pivot's Form is perfect for order header data. For order
>> line data, I wanted to use a TableView. But as I wrote before, I
>> didn't succeed. Any help?
>>
>> apptaro
>>
>>
>> On Mon, Jun 7, 2010 at 8:47 PM, Greg Brown <gk...@mac.com> wrote:
>> > TableView row editors are really only meant to edit one row at a time.
>> > What you describe sounds like it might actually be more of a use case for a
>> > TablePane.
>> >
>> > On Jun 6, 2010, at 10:25 PM, Taro App wrote:
>> >
>> >> Hi,
>> >>
>> >> I'm trying to create an editable table using Pivot's TableView. Pivot
>> >> supports TableView.RowEditor which enables one row to be editable when
>> >> double clicked, but I want to make all rows editable at the same time,
>> >> similar to input components in a dataTable in JSF, or input elements
>> >> in a table in HTML. I think it can be done with a custom
>> >> TableView.CellRenderer. To begin, I tried using
>> >> TableViewBooleanCellRenderer and TableViewTextAreaCellRenderer so I
>> >> can make editable table with checkboxes and text areas, but it didn't
>> >> work as I expected; checkboxes and text areas are disabled. I tried
>> >> setting TableView.isEnabled = true, TableViewBooleanCellRenderer
>> >> .isCheckboxDisabled = false, TableViewTextAreaCellRenderer .isEditable
>> >> = true, but it didn't fix the issue. Does anyone know how I should
>> >> proceed?
>> >>
>> >> apptaro
>> >
>> >
>
>
>
Re: Editable Table?
Posted by Greg Brown <gk...@mac.com>.
Is there any reason the single-row edit model wouldn't work for you? Even if you were to make all of the rows appear editable, the user can still only edit one of them at a time...
On Jun 7, 2010, at 2:51 PM, Todd Volkert wrote:
> You could create your own notion of a multi-row table editor by listening for the user input events yourself (like double-click, etc.) and then opening a decorationless window or series or windows over the table view. The tricky is laying out your editors directly over the table cells so that it looks like all the cells became editable... I'd watch out for performance implications as well if you have a table with a large number of rows, and you make them all editable at once.
>
> -T
>
> On Mon, Jun 7, 2010 at 2:37 PM, Taro App <ic...@gmail.com> wrote:
> Hi Greg,
>
> As I understand, a TablePane is a layout container in which you
> arrange components, and a TableView is a data view in which you show
> collection data. I want the latter, so I was trying to make it
> editable. Sorry for my confusing explanation, but JSF DataTable does a
> similar thing as TableView does, but I can make it all rows editable
> at the same time. I'm creating a prototype of an order entry
> application. Pivot's Form is perfect for order header data. For order
> line data, I wanted to use a TableView. But as I wrote before, I
> didn't succeed. Any help?
>
> apptaro
>
>
> On Mon, Jun 7, 2010 at 8:47 PM, Greg Brown <gk...@mac.com> wrote:
> > TableView row editors are really only meant to edit one row at a time. What you describe sounds like it might actually be more of a use case for a TablePane.
> >
> > On Jun 6, 2010, at 10:25 PM, Taro App wrote:
> >
> >> Hi,
> >>
> >> I'm trying to create an editable table using Pivot's TableView. Pivot
> >> supports TableView.RowEditor which enables one row to be editable when
> >> double clicked, but I want to make all rows editable at the same time,
> >> similar to input components in a dataTable in JSF, or input elements
> >> in a table in HTML. I think it can be done with a custom
> >> TableView.CellRenderer. To begin, I tried using
> >> TableViewBooleanCellRenderer and TableViewTextAreaCellRenderer so I
> >> can make editable table with checkboxes and text areas, but it didn't
> >> work as I expected; checkboxes and text areas are disabled. I tried
> >> setting TableView.isEnabled = true, TableViewBooleanCellRenderer
> >> .isCheckboxDisabled = false, TableViewTextAreaCellRenderer .isEditable
> >> = true, but it didn't fix the issue. Does anyone know how I should
> >> proceed?
> >>
> >> apptaro
> >
> >
>
Re: Editable Table?
Posted by Todd Volkert <tv...@gmail.com>.
You could create your own notion of a multi-row table editor by listening
for the user input events yourself (like double-click, etc.) and then
opening a decorationless window or series or windows over the table view.
The tricky is laying out your editors directly over the table cells so that
it looks like all the cells became editable... I'd watch out for
performance implications as well if you have a table with a large number of
rows, and you make them all editable at once.
-T
On Mon, Jun 7, 2010 at 2:37 PM, Taro App <ic...@gmail.com> wrote:
> Hi Greg,
>
> As I understand, a TablePane is a layout container in which you
> arrange components, and a TableView is a data view in which you show
> collection data. I want the latter, so I was trying to make it
> editable. Sorry for my confusing explanation, but JSF DataTable does a
> similar thing as TableView does, but I can make it all rows editable
> at the same time. I'm creating a prototype of an order entry
> application. Pivot's Form is perfect for order header data. For order
> line data, I wanted to use a TableView. But as I wrote before, I
> didn't succeed. Any help?
>
> apptaro
>
>
> On Mon, Jun 7, 2010 at 8:47 PM, Greg Brown <gk...@mac.com> wrote:
> > TableView row editors are really only meant to edit one row at a time.
> What you describe sounds like it might actually be more of a use case for a
> TablePane.
> >
> > On Jun 6, 2010, at 10:25 PM, Taro App wrote:
> >
> >> Hi,
> >>
> >> I'm trying to create an editable table using Pivot's TableView. Pivot
> >> supports TableView.RowEditor which enables one row to be editable when
> >> double clicked, but I want to make all rows editable at the same time,
> >> similar to input components in a dataTable in JSF, or input elements
> >> in a table in HTML. I think it can be done with a custom
> >> TableView.CellRenderer. To begin, I tried using
> >> TableViewBooleanCellRenderer and TableViewTextAreaCellRenderer so I
> >> can make editable table with checkboxes and text areas, but it didn't
> >> work as I expected; checkboxes and text areas are disabled. I tried
> >> setting TableView.isEnabled = true, TableViewBooleanCellRenderer
> >> .isCheckboxDisabled = false, TableViewTextAreaCellRenderer .isEditable
> >> = true, but it didn't fix the issue. Does anyone know how I should
> >> proceed?
> >>
> >> apptaro
> >
> >
>
Re: Editable Table?
Posted by Taro App <ic...@gmail.com>.
Hi Greg,
As I understand, a TablePane is a layout container in which you
arrange components, and a TableView is a data view in which you show
collection data. I want the latter, so I was trying to make it
editable. Sorry for my confusing explanation, but JSF DataTable does a
similar thing as TableView does, but I can make it all rows editable
at the same time. I'm creating a prototype of an order entry
application. Pivot's Form is perfect for order header data. For order
line data, I wanted to use a TableView. But as I wrote before, I
didn't succeed. Any help?
apptaro
On Mon, Jun 7, 2010 at 8:47 PM, Greg Brown <gk...@mac.com> wrote:
> TableView row editors are really only meant to edit one row at a time. What you describe sounds like it might actually be more of a use case for a TablePane.
>
> On Jun 6, 2010, at 10:25 PM, Taro App wrote:
>
>> Hi,
>>
>> I'm trying to create an editable table using Pivot's TableView. Pivot
>> supports TableView.RowEditor which enables one row to be editable when
>> double clicked, but I want to make all rows editable at the same time,
>> similar to input components in a dataTable in JSF, or input elements
>> in a table in HTML. I think it can be done with a custom
>> TableView.CellRenderer. To begin, I tried using
>> TableViewBooleanCellRenderer and TableViewTextAreaCellRenderer so I
>> can make editable table with checkboxes and text areas, but it didn't
>> work as I expected; checkboxes and text areas are disabled. I tried
>> setting TableView.isEnabled = true, TableViewBooleanCellRenderer
>> .isCheckboxDisabled = false, TableViewTextAreaCellRenderer .isEditable
>> = true, but it didn't fix the issue. Does anyone know how I should
>> proceed?
>>
>> apptaro
>
>
Re: Editable Table?
Posted by Greg Brown <gk...@mac.com>.
TableView row editors are really only meant to edit one row at a time. What you describe sounds like it might actually be more of a use case for a TablePane.
On Jun 6, 2010, at 10:25 PM, Taro App wrote:
> Hi,
>
> I'm trying to create an editable table using Pivot's TableView. Pivot
> supports TableView.RowEditor which enables one row to be editable when
> double clicked, but I want to make all rows editable at the same time,
> similar to input components in a dataTable in JSF, or input elements
> in a table in HTML. I think it can be done with a custom
> TableView.CellRenderer. To begin, I tried using
> TableViewBooleanCellRenderer and TableViewTextAreaCellRenderer so I
> can make editable table with checkboxes and text areas, but it didn't
> work as I expected; checkboxes and text areas are disabled. I tried
> setting TableView.isEnabled = true, TableViewBooleanCellRenderer
> .isCheckboxDisabled = false, TableViewTextAreaCellRenderer .isEditable
> = true, but it didn't fix the issue. Does anyone know how I should
> proceed?
>
> apptaro