What happens when Xojo Web adds drag and drop support, supercharges WebListBox, and packs in 40+ changes? Let’s find out!
Drag and Drop Support
The biggest thing this time is that we’ve added general drag and drop support for web. From now on, any visual control can be dragged or accept drops.. That includes controls created using the Web SDK, allowing you (and third-party developers!) to increase the user experience on your web projects.
Now, imagine new ways of updating a Database application. For example, creating a “Form Builder”, a full “Website Builder” or even a “Database Schema” web application where the user can drag elements from a library and drop them into the editor. Are you scheduling posts on social networks using a WebDatePicker? What about using a calendar view with drag and drop support?
We’ve included a drag and drop Kanban board example. Take a look at the blog post to learn more about it.
How cool is that?
While drag and drop can make your app easier to work with for some users, it can also be an accessibility barrier for other users. Just remember to offer an alternative way for interacting with your application. In a full featured Kanban app, for example, the user should still be able to change the status of a task from the task details screen, using a regular WebPopupMenu (or any other accessible method)
WebListBox Updates
Speaking of dragging things, WebListBox also now supports reordering rows using the mouse. Just enable the new Allow Row Reordering property (which is Off by default) and you are all set.
This can also be set programmatically at runtime with AllowRowReordering. Once the user finishes a reorder, the RowsReordered event is called, allowing you to persist the changes in your database, for example.
Another requested feature was to allow users to perform inline edits. WebListBox received some new methods and events to handle this:
- ColumnTypeAt: To make a whole column editable
- CellTypeAt: To override the ColumnTypeAt on specific cells
- EditCellAt: A method you can use to begin the edit on specific cells
- CellAction Event: Allowing you to persist the changes made by the user
This is also supported when using a WebDataSource.
And not only are TextField and TextArea supported, CheckBox is also part of the WebListBox.CellTypes enumeration, to match what DesktopListBox supports:
Last, but not least, we’ve decided to split CellTextAt into two different methods. Until now, you could get and set the caption of a cell using CellTextAt, but also a WebListBoxCellRenderer. This could cause trouble because a Variant was being returned, that could be either a String or a WebListBoxCellRenderer so, when not being used carefully, it could raise IllegalCastException at runtime.
From now on, CellTextAt will only support String. If you want to get or set a cell renderer, you will have to use CellRendererAt instead. This makes the API more obvious.
If you were using CellTextAt for getting and setting cell renderers, you will need to update your code to use CellRendererAt instead.
Wrapping Up
This release empowers Xojo Web projects to meet more user needs, no JavaScript required. Drag and drop finally joins the party, filling a critical gap from the old Web 1 framework.
Be sure to dig into the release notes, as 2025r1 packs over 40 changes for the web target alone.
I’d love to hear how you’re weaving these updates into your projects! Drop some screenshots or screen recordings in a new forum thread or shoot me a private message if you prefer.
Happy coding!
Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.