Selecting and disabling elements in CellTable

[Greg Dougherty]

I am trying to use three CellTables to make a Users and Groups panel
in my current application. Its purpose is so users can give other
users access to resources that they control (in this particular case,
choosing which people can see the information you've uploaded to a
database).

The first table is the Groups table. Groups can be added and
selected. If you are the owner of the current Group then you can
modify its settings, if not, you can't.

The second table is Users. It has two columns, a text field with the
name of the user, and a checkbox reporting whether or not the user is
a member of the selected group.

The third table is Resources. It lists the information available to
members of the current group, and any information you control that is
not available to the current group (so you can give access to that
information to the members of the group). It also has two fields, the
name of the resource, and a checkbox.

Issues I'm trying to solve:
1: How do I programmatically select a row in a table? When a user
creates a new group, I wish to select it. When the user first brings
up the panel, I'd like to select the first group (or, maybe, the first
group the person owns).

2: How do I disable a checkbox? If the user doesn't own the group,
they shouldn't be able to change anything.

TIA,

Greg

[Jeff Schwartz]

You can use one of the concrete implementations of AbstractSelectionModel to select rows and respond to row selection. CellTables and AbstractSelectionModel instances work hand-in-hand.

You connect the selection model to the cell table by calling the table's setSelectionModel method passing an instance of a selection model.

You select rows by calling the selection model's setSelected method passing an instance of the data object being displayed by the table. The row displaying that instance of the data object will then be selected

You respond to row selection by adding a SelectionChangeEvent.Handler() to the selection model by calling the selection model's addSelectionChangeHandler method. You can use this event, for instance, to load a detailed view of the selected data object such as more information, data from its children data objects, etc. etc.

Jeff

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Jeff Schwartz

[Greg Dougherty]

Hi Jeff,

Thank you. I added a SingleSelectionModel to my CellTable, and now I
can force selection of rows.

Any idea how I tell a column of CheckBoxes that they can't accept any
clicks?

Greg

On Jan 28, 10:11 am, Jeff Schwartz <jefftschwa...@gmail.com> wrote:
> You can use one of the concrete implementations of AbstractSelectionModel to
> select rows and respond to row selection. CellTables and
> AbstractSelectionModel instances work hand-in-hand.
>
> You connect the selection model to the cell table by calling the table's
> setSelectionModel method passing an instance of a selection model.
>
> You select rows by calling the selection model's setSelected method passing
> an instance of the data object being displayed by the table. The row
> displaying that instance of the data object will then be selected
>
> You respond to row selection by adding a SelectionChangeEvent.Handler() to
> the selection model by calling the selection model's
> addSelectionChangeHandler method. You can use this event, for instance, to
> load a detailed view of the selected data object such as more information,
> data from its children data objects, etc. etc.
>
> Jeff
>

> On Fri, Jan 28, 2011 at 10:49 AM, Greg Dougherty <dougherty.greg...@mayo.edu

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>
> > .

> > For more options, visit this group at
> >http://groups.google.com/group/google-web-toolkit?hl=en.
>
> --

> *Jeff Schwartz*

[Jeff Schwartz]

From a UI designer's perspective why display a column of check boxes if the user isn't allowed to click them? I wouldn't personally as a designer nor would I like that if I were a user.

If the checkbox column is in a cell table that is being rendered in response to the user having selected something from somewhere else in the view then I'd first determine if the user can or cannot check the boxes and then I would render the table accordingly.

But that is just me and the way I would do it. Now, about your question which requires a question: Did you extend Column<T,C> to use check boxes in your cell table? If you did you can extend your implementation's api even further by providing it with methods to enable and disable the checkboxes.

Jeff

To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Jeff Schwartz

[Deepak Singh]

Hi Jeff,

Similar problem i am also facing.

I want the rows to be selected with focus and then get the selected object for further action.

when the table is created appeared first, the focus should automatically go to first row and the row should automatically be selected and as focus moves through rows by using arrow keys, corresponding rows should be selected.

How can i acheive this?

Thanks

[Greg Dougherty]

Well, If they create a group, or select a group that they can modify,
then they need the checkboxes. Having them disappear and reappear
(rather than be disabled and enabled) violates the principles of UI
design that I know and agree with. Starting with the belief that the
UI should be stable and solid, and that controls should not move
(muscle memory being key to accomplishing things quickly, a UI that
moves targets around is a bad UI).

> Now, about your question
> which requires a question: Did you extend Column<T,C> to use check boxes in
> your cell table? If you did you can extend your implementation's api even
> further by providing it with methods to enable and disable the checkboxes.

public class UserColumn extends Column<String, Boolean> implements
FieldUpdater<String, Boolean>

My Cell is a CheckboxCell. I don't see any routines in either class
for enabling or disabling the checkbox. So, what do I override /
call?

Thanks,

Greg

On Jan 28, 11:29 am, Jeff Schwartz <jefftschwa...@gmail.com> wrote:
> From a UI designer's perspective why display a column of check boxes if the
> user isn't allowed to click them? I wouldn't personally as a designer nor
> would I like that if I were a user.
>
> If the checkbox column is in a cell table that is being rendered in response
> to the user having selected something from somewhere else in the view then
> I'd first determine if the user can or cannot check the boxes and then I
> would render the table accordingly.
>
> But that is just me and the way I would do it. Now, about your question
> which requires a question: Did you extend Column<T,C> to use check boxes in
> your cell table? If you did you can extend your implementation's api even
> further by providing it with methods to enable and disable the checkboxes.
>
> Jeff
>

> On Fri, Jan 28, 2011 at 11:59 AM, Greg Dougherty <dougherty.greg...@mayo.edu

> > <google-web-toolkit%2Bunsu...@googlegroups.com<google-web-toolkit%252Buns...@googlegroups.com>

[Jeff Schwartz]

Don't move the check boxes, just don't render them. If all user interfaces we're as rigid as that we wouldn't need a dom api to manipulate and render html on the client. A ui principle you didn't mention is don't expose useless info/ui to users.

Look, its your site so I'm just giving you something to think about.

> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

[Greg Dougherty]

Jeff,

> Don't move the check boxes, just don't render them.

So, you're saying when the user selects a group they do not own, I
should make the checkboxes disappear, leaving me with an empty column
(that, somehow, I'm going to tell to take up EXACTLY as much space as
it would if it had checkboxes in it), and that having controls appear
and disappear in the middle of a table is a superior interface to
having the controls enable and disable?

Or am I just totally not understanding you?

Greg

On Jan 28, 3:53 pm, Jeff Schwartz <jefftschwa...@gmail.com> wrote:
> Don't move the check boxes, just don't render them. If all user interfaces
> we're as rigid as that we wouldn't need a dom api to manipulate and render
> html on the client. A ui principle you didn't mention is don't expose
> useless info/ui to users.
>
> Look, its your site so I'm just giving you something to think about.

> On Jan 28, 2011 3:19 PM, "Greg Dougherty" <dougherty.greg...@mayo.edu>

> >> > <google-web-toolkit%2Bunsu...@googlegroups.com<google-web-toolkit%252Buns...@googlegroups.com>
>
> <google-web-toolkit%252Buns...@googlegroups.com<google-web-toolkit%25252Bun...@googlegroups.com>

[Jeff Schwartz]

On Tue, Feb 1, 2011 at 11:06 AM, Greg Dougherty <doughert...@mayo.edu> wrote:

Jeff,

> Don't move the check boxes, just don't render them.

So, you're saying when the user selects a group they do not own, I
should make the checkboxes disappear, leaving me with an empty column

Hi Greg,

We all have very strong beliefs when it comes to UI so I hope you understand that I am not trying to convert you over to my point of view. But to answer your question, no, I am not saying leave an empty column. I am saying don't display the column.

Jeff

[Greg Dougherty]

Ok, I've got two checkbox columns interspersed between other columns.
If I add and delete the checkbox columns based on the current user
selection in the first table, then other columns are going to be
jumping around. No?

Which takes us back to "controls moving around, destroying ability to
use muscle memory." Which is I find that solution unacceptable.

So, is it possible for me to enable or disable controls in a column in
a CellTable? Or does GWT lack that feature?

Greg

On Feb 1, 10:20 am, Jeff Schwartz <jefftschwa...@gmail.com> wrote:
> On Tue, Feb 1, 2011 at 11:06 AM, Greg Dougherty

> <dougherty.greg...@mayo.edu>wrote:

[Jeff Schwartz]

On Tue, Feb 1, 2011 at 1:15 PM, Greg Dougherty <doughert...@mayo.edu> wrote:

Ok, I've got two checkbox columns interspersed between other columns.
If I add and delete the checkbox columns based on the current user
selection in the first table, then other columns are going to be
jumping around.  No?

Greg,

Use GWT's Ajax abilities to dynamically render the other cell tables with or without the columns in question or instead just hide and show the columns accordingly . It is quite simple and I don't understand what you mean by 'then other columns are going to be jumping around. No?" No, they wont.


Good luck.

Jeff

[Greg Dougherty]

Jeff:

Column 1 : Column 2 ; Column 3
Column 1 :Column 3
Column 1 : Column 2 ; Column 3

Column 3 has just "jumped around". It was at an X offset of 300, then
200, then 300

If I disable column 2, column 3 doesn't move. If I hide column 2,
column 3 does move. This makes hiding column 2 a BAD thing to do.

Column 2 is related to column 1. It is NOT related to column 3.
Therefore, we cannot switch the order of columns 2 and 3 without
damaging the user's understanding of the data being presented by the
columns.

I do not, and will not, hard code the positions of user interface
elements. I make a great deal of use of HorizontalPanel, and do not
use "Standard doctype" for anything (if / when GWT stops supporting
Quirks mode, I'll most likely stop upgrading GWT, because I can't
think of anything they might add that could be worth having to
explicitly tell everything where to go).

I've got three tables in an align left HorizontalPanel. The center
table has one of the checkbox Column's that I'm concerned about.
Hiding / deleting / removing / not rendering that column causes the
table to its right to move.

All these things are the kind of reason why disabling controls was
invented way back in the early dawn of the GUI. The question is does
GWT support that basic feature in CellTables?

Do you know the answer to that question? If so, could you impart that
answer to the rest of us?

Greg

On Feb 1, 1:13 pm, Jeff Schwartz <jefftschwa...@gmail.com> wrote:
> On Tue, Feb 1, 2011 at 1:15 PM, Greg Dougherty

> <dougherty.greg...@mayo.edu>wrote:

[Jeff Schwartz]

On Tue, Feb 1, 2011 at 3:38 PM, Greg Dougherty <doughert...@mayo.edu> wrote:

Jeff:

Column 1 : Column 2 ; Column 3
Column 1 :Column 3
Column 1 : Column 2 ; Column 3

I thought you said column, Geg, not an individual row's cells and naturally I took that then to mean all check boxes within a column. Is that what you said or do I have a pencil sticking out of my head :)?

In any case it's now obvious what your intention is so here's one way to do this but it is by no means the only way:

Iterate row by row through your cell table and for each row iterate through each of its cells. If a cell contains a checkbox that needs to be disabled then get the cell's inner html which will be a checkbox. Once you have the checkbox just set it's enabled property to false or better yet hide the checkbox by setting its display attribute to none.

There are numerous GWT methods that can assist you in iterating over the DOM and in particular a table. For instance, I use TableElement often, especially TableElement.as which assert that the given Element is compatible with a TableElement and automatically typecast it. Once I have a valid TableElement reference I can then get a reference to its rows by calling its getRows method - just remember to compensate for any table header rows you may have. Once you have a NodeList<TableRowElement> use its TableRowElements to obtain the cells by calling it getCells method. Once you have the cells you can then iterate over each one and do with them as you like.

Jeff

Jeff
 

[Jeff Schwartz]

BTW if you are using paging then you will have to do this in response to a rows range change event which I am not sure is even possible.

--
Jeff Schwartz

[Greg Dougherty]

Hi Jeff,

I ended up writing my own version of CheckboxCell (rather, taking the
code for it, and making my own class with modifications).

First change: I added a boolean field "disabled", and a setEnabled
call.
Second change: I redid render so it has 4 options (checked | unchecked
x enabled | disabled)
Third change: removed all the code for keeping track of its value,
since my getValue and FieldUpdater take care of that.

Result, a disable able CheckboxCell that behaves the way I expect it
to.

(The purpose of the graphic was to show how hiding col 2, the checkbox
column, moves col 3, a non-checkbox column, since you didn't seem to
understand why I consider the show / hide to be a bad thing.)

Greg

On Feb 1, 2:59 pm, Jeff Schwartz <jefftschwa...@gmail.com> wrote:
> On Tue, Feb 1, 2011 at 3:38 PM, Greg Dougherty

> <dougherty.greg...@mayo.edu>wrote: