Future WebListbox custom control wish list

I have seen many a time posts here from people who desperately seek a Weblistbox that would simply be “just like Desktop ListBox”. Not necessarily additional bells and whistles, but basic features that the current WebListBox lacks.

I know there are already several solutions around, but since I will probably need it for a coming project, I think about giving it a shot. My idea is to mimic as closely as possible the Desktop one. So far, here is what I feel the current control need added :

  • CellType and ColumnType setter and getter with all current types available in Desktop, including ListBox.TypeEditableTextField and ListBox.TypeEditableTextArea. The second permitting multiline input, since that is one of the advantages of WebListBox over Desktop. ListBox.TypeCheckBox or course.
  • ColumnWidthActual : actual pixels, instead of “*”
  • CellPicture, with Picture and URL, analogous to the way it works with WebImageView. The picture will show behind the text, as it does in Desktop.
  • ScrollPosition and ScrollPositionX, both getter and setter.
  • CellHelpTag. I have seen that request often and since it is possible …
  • ScrollBarHorizontal and ScrollBarVertical as boolean to hide if needed
  • MouseXY based on code that will soon be in XDev, which provides the X and Y position of the mouse in the browser without resorting to traffic intensive MouseMove.

I am confident I can bring all that to fruition. I have specifically decided to leave aside hierarchical ListBox for the moment. But is there any specific feature of the Desktop Listbox you think should be brought to WebListBox ?

I’ve only played around with the WebListBox a long time ago, and really don’t recall much. But I think I recall I needed a KeyDown event, and didn’t see a way to set the Background color of a cell. I could be wrong on both accounts now, but I think I recall those were the two limitations I ran into a couple of years ago.

CellAlignment/ColumnAlignment would be useful without having to use a CellStyle.
Also Sort(ColumnsortDirection/SortedColumn) if possible.

Knowing your expertise in WE I have no doubt you’ll succeed. Looking forward to it :slight_smile:

Keydown is not exposed by the default framework. Only keypressed. I will add that.

Background color can be set with WebStyles, like textColor, fonts, etc.

[quote=231914:@Albin Kiland]CellAlignment/ColumnAlignment would be useful without having to use a CellStyle.
Also Sort(ColumnsortDirection/SortedColumn) if possible.

Knowing your expertise in WE I have no doubt you’ll succeed. Looking forward to it :)[/quote]

As a matter of fact, styles are required in HTML5 to obtain alignment. But what I can do is set that it in such a way that it can be overridden by a Xojo WebStyle, so one could use CellAlignment alone if no other property needs to be added like text color or something else.

Sort should be possible with the same method syntax as Listbox.

exactly, and with this allow keyboard navigation

  • Drag and Drop is currently unavailable for the WebListbox
  • User adjustable column widths: similar to ListBox.ColumnsResizable
  • Listbox.RequireSelection and Listbox.SelectionType
  • A way to detect the cell coordinates of an DoubleClick (e.g. via RowFromXY, ColumnFromXY)
  • A way to intercept a selection change on click (e.g. by returning False from ListBox.CellClick event)

Having CellTextPaint would be awesome !

[quote=231940:@Tobias Bussmann]exactly, and with this allow keyboard navigation

  • Drag and Drop is currently unavailable for the WebListbox
    [/quote]

You need to define more fully what kind of drag and drop you want to obtain. Drag and drop is possible within the constraints of browsers abilities.

WebListBox always requires single selection. What would be a typical use of multiple selection ?

[quote]

  • User adjustable column widths: similar to ListBox.ColumnsResizable
  • A way to detect the cell coordinates of an DoubleClick (e.g. via RowFromXY, ColumnFromXY)[/quote]

I will see what I can do to enable users to resize columns by click and drag. It is theoretically feasible. I have to test in practice

RowFromXY and ColunnFromXY should be possible.

Already CellClick fires when a checkbox is clicked. But in Web, there is no return value to CellClick. So the closest way to prevent change would be to reinstate the previous value. I am afraid I will leave that possibility to the user.

May not be entirely impossible, but I got to deal with the underlying structure of the WebListBox, which is essentially an HTMLTable. Adding a background picture to a cell is straightforward, as it is part of a cell property. Incorporating a canvas would be a whole different ball game.
With a cell picture, though, you can pretty much do the same thing by drawing to the picture graphics layer. You will probably need to repost it in order for it to refresh.

How about the ability to sort columns with a numerical sequence (as opposed to alphanumerical)? This might also require the ability to flag a column as holding numerical strings.

I am going to implement sort the same way as Listbox does. But it is fairly easy to use HeaderPressed to implement your own numerical sort just like you would on desktop. In implementing the alignment property as suggested by Albin KIland, I noticed there is ColumnAlignment = ListBox.AlignDecimal which can flag a numerical column.

About numerical, HTML5 has done away with the char attribute that allowed aligning on dot or comma, and it is no longer supported by all current browsers. So all I could do is to right justify, and one will need to use format to make sure there is no one digit after the decimal separator.

yes i have my feedback# 41520 - make web listbox same like DeskTop listbox

The WebListBox is not able to participate in the relatively new Web Drag&Drop system of Xojo at all. What I would like to see is dragging and dropping of rows within a Listbox (reorder) and between Listboxes.

That’s not true. In a WebListbox you can get no selection as well as multi selection both by code as well as by user action. Being able to control / constraint that behaviour like on the desktop would be nice.

sure, this is possible, but a clean solution would require to get more hooks in the client side JS processing to be able to interfere from the server side, so we can actually have an influence before/how things happen and not only revert things after they happened. This however would have an trade-off on the responsiveness.

For the issues mentioned here exist already a ton of feedback reports on individual items. I doubt having one that asks for everything in once will have a better chance to get implemented quickly. Minimising the feature discrepancies between all platforms should be an overall goal anyhow…

For my pet peeves we already have implemented workarounds that at least suit our needs. But most of them are rather ugly and I would love to see a cleaner solution. @Michel Bujardet: do you plan to implement a new Listbox from scratch using the WebSDK, do you plan to extend on top of the existing WebListbox or even to “hack” interfere with the existing JS event system?

You may have already followed the very long thread I participated in with Brock Nash last year : https://forum.xojo.com/947-we-drag-and-drop-files-into-webpage which means I am quite familiar with drag and drop logic.

Reordering and drag and drop between listboxes is not impossible, it is just a lot of work. At this time, I am inclined to put it off for a version 2.

That is where I need you to spell it out. How do you want to constrain what ?

I don’t quite get it. At this time, clicking header simply do nothing special. I am working on implementing sort in there the same way as in Desktop per Albin Kiland request. If ColumnSortDirection SortNone is used, no sort takes place and you can implement whatever other kind of sort you wish.

I do not plan on going further than the desktop ListBox in that respect, like adding SortAlphabetical. This may come in a next version. I would need assistance with robust methods to do so BTW.

In principle, intercepting events from the framework is possible, but I find that risky. Since I do not have access to the framework code, it may break the app unpredictably.

I work on enhancing the WebListBox. So far, the prototype exhibits things like Cell edit or checkboxes using existing Xojo TextField and CheckBox. In that precisely it does not hook events from the framework. I use JavaScript for things like positioning controls, embedding them into the table that rows and cells are made of, or getting their XY coordinates in for instance ScrollPosition. I use elements events and properties conformant to HTML5 recommendations.

For instance KeyDown is simply part of the control HTML code and in no way tries to impede the normal order of event. The result is it fires only when a cell is in edition, and cannot be used for moving selection with arrows up and down when a cell is not edited. Since WebListBox does not get focus, the only way I could implement arrow up and down would be precisely by hooking the page events, and so far I do not see myself hacking it.

Incidentally, I do my best to never use proprietary control ID such as “_inner” to conform to Greg’s recommendations.

In general, the properties I will add are simply documented HTML5 properties of the table that I expose. Such as Cell.Picture which is simply HTML5 background-image.

So to sum it up, yes, I use JavaScript, but no, I do not intend to hack in the sense of modifying the framework properties, events and behavior.

To expand on keydown a bit, and why I do not really feel like grabbing the page event from within the listbox.

I plan on releasing a self-contained control that expands on WebListBox. As such, I do my best to get as close to the Desktop control as possible, without invading other parts of the page or other controls, because I personally never appreciate when a programmer goes beyond the perceived mandate I gave him.

A good example are those badly behaved hackish apps that install services without telling, or sever parts of the system functions. I hate some antiviruses because of that.

To me, a control should not take over for instance the page events, because it is not supposed to do so. It is supposed to behave within the confines of itself.

Now, arrows up, down, left and right. In principle, KeyPressed should report it. Problem is, IE which is the immense majority of web clients simply does not report arrow keys in KeyPressed. Eeek.
The behaved workaround I think is to provide an add on for WebPage that makes it able to “see” arrow keys with all browsers. So I will probably release a small, separate utility that adds KeyDown to WebPage. With that, users will be able to move selection in my enhanced WebListBox, as well as use ScrollPosition to scroll.

I’m not questioning that.

…which is perfectly understandable. I just wanted to mention it on the ‘wish list’

For example I’d like to set kindof RequireSelection to disallow total deselection and use kind of SelectionType to disallow multi-selection.

I was talking about CellClick and control over selection change, not Sorting here.

What you write about the approach you are going to take sounds quite reasonable and clean to me. Looking forward to see what comes out of it. I often found me having difficulties combining a clean design and reaching a certain feature within the Web framework, but my JS knowledge is limited.

[quote=232158:@Tobias Bussmann]Reordering and drag and drop between listboxes is not impossible, it is just a lot of work. At this time, I am inclined to put it off for a version 2.
…which is perfectly understandable. I just wanted to mention it on the ‘wish list’[/quote]

It is noted.

[quote=232158:@Tobias Bussmann]That is where I need you to spell it out. How do you want to constrain what ?
For example I’d like to set kindof RequireSelection to disallow total deselection and use kind of SelectionType to disallow multi-selection.[/quote]

With RequireSelection, Looks to me you are asking for something that should be in your code. I never used it in Desktop but from what I read, seems a bit overkill. Let us say I want to remove all selection from a LB. Let us say I go from zero to n, then n will remain selected. But I can also go down to 0. At any rate the decision to keep a given row selected should IMO rest to the programmer.

Disallowing multiple selection seems of the same vein. Especially since the WebListBox does not do multiple selection naturally by user click.

I will see what I can do as I go along, but am not making any promise.

[quote=232158:@Tobias Bussmann]I was talking about CellClick and control over selection change, not Sorting here.
[/quote]

So what would you like to do ? Prevent CellClick entirely ? Something else ?

There are things that the nature of the web will render inherently difficult. Sure, a good mastery of JS can help, but sometimes, it is simply necessary to abstain, or choose a slightly different feature.

Talking about things inherently difficult to do in Web, dragging the right side of a column and updating all the other ones in the process real time as in Desktop is probably close to impossible, or require a huge amount of JS code. The closest I may be able to do is to modify the width of the column on the left when dragging the separator, but the update to the other columns on the right will happen only upon MouseUp.

Like for drag and drop, this may come with V2.

As stated previously the WebListbox does both situations naturally by user click. Currently, preventing this in user code means tracking states and changes and reverting to previous state in case of an unwanted change. With this we likely get into race conditions and flicker. But naturally, priority and importance of such features are highly depending on the individual use. That’s why I said ‘pet peeves’… I have a solution, just one I don’t like :wink:

Not necessarily preventing CellClicks entirely but I’d like to be able to decide what shall happen if they occur. e.g. performing an action, Changing or not changing selection… having that control would make dealing with the topic above way more easy.

In practice, there are several difficulties. In order to cleanly prevent cellclick while keeping something that enables you to still get the cell that was clicked requires placing an onmousedown event manager on every cell. Not out of this world, but a bit heavy.

Then comes the inherent asynchronous nature of the web. When the event comes to Xojo, it has already taken place. So it is too late to decide whether or not to cancel it as you would do in Desktop.

The best I can think of is an inhibitCellClick flag that would simply still trigger a custom event like ClickedCell so you know what has been clicked, but eat the MouseDown event so CellClick would not fire. Off the top of my head and untested, of course. I shall look into it when I have a chance.

But this would mean you will have to manage selection, checkbox state change, EditCell.

[quote=231914:@Albin Kiland]CellAlignment/ColumnAlignment would be useful without having to use a CellStyle.
Also Sort(ColumnsortDirection/SortedColumn) if possible.[/quote]

Completed :slight_smile:

Sweet! :smiley:
thumbs up

I just implemented a new ColumnType : Listbox.TypeNumerical = 5.

Now if SortedColumn is of that type, sort is numerical instead of alphabetical.