Listview with linebreaks in column text

Discuss GUI programming with the RapaGUI plugin here
Post Reply
User avatar
mrupp
Posts: 147
Joined: Sun Jan 31, 2021 7:44 pm
Location: Switzerland
Contact:

Listview with linebreaks in column text

Post by mrupp »

Hi there

I stumbled over some inconsistencies concerning the behaviour of Listview if its items contain linebreaks.
Please have a look at the following example:

Code: Select all

@REQUIRE "RapaGUI", {Link = True}
@APPTITLE "ListView-Linebreak-Item-Test"

@BRUSH 1, "add.png", { LoadAlpha = True }
@BRUSH 2, "large_add.png", { LoadAlpha = True }

moai.CreateApp([[<?xml version="1.0" encoding="iso-8859-1"?>
	<application id="app">
		<window id="mainWindow" title="ListView-Linebreak-Item-Test" width="600" height="600">
			<vgroup>
				<hgroup frame="true" frametitle="Listview in listbox mode">
					<listview id="listview0" alternate="true" rowHeight="40" forceMode="listbox">
						<column />
					</listview>
				</hgroup>
				<hgroup frame="true" frametitle="Listview in listview mode">
					<listview id="listview1" alternate="true" rowHeight="40" forceMode="listview">
						<column title="ID" />
						<column title="Text" />
					</listview>
					<listview id="listview1.1" alternate="true" rowHeight="40" forceMode="listview">
						<column title="ID" />
						<column title="Text" />
						<column title="Text with icon" icon="true" />
					</listview>
					<listview id="listview1.2" alternate="true" rowHeight="40" forceMode="listview">
						<column title="ID" />
						<column title="Text" />
						<column title="Text with large icon" icon="true" />
					</listview>
				</hgroup>
				<hgroup frame="true" frametitle="Listview in dataview mode">
					<listview id="listview2" alternate="true" rowHeight="40" forceMode="dataview">
						<column title="ID" />
						<column title="Text" />
					</listview>
					<listview id="listview2.1" alternate="true" rowHeight="40" forceMode="dataview">
						<column title="ID" />
						<column title="Text" />
						<column title="Text with icon" icon="true" />
					</listview>
					<listview id="listview2.2" alternate="true" rowHeight="40" forceMode="dataview">
						<column title="ID" />
						<column title="Text" />
						<column title="Text with large icon" icon="true" />
					</listview>
				</hgroup>
			</vgroup>
		</window>
	</application>
]])

For Local i = 0 To 10
	Local text = "Item " .. i
	text = text .. "\n" .. text
	moai.DoMethod("listview0", "insert", "bottom", text)
	moai.DoMethod("listview1", "insert", "bottom", i, text)
	moai.DoMethod("listview1.1", "insert", "bottom", i, text, 1, text)
	moai.DoMethod("listview1.2", "insert", "bottom", i, text, 2, text)
	moai.DoMethod("listview2", "insert", "bottom", i, text)
	moai.DoMethod("listview2.1", "insert", "bottom", i, text, 1, text)
	moai.DoMethod("listview2.2", "insert", "bottom", i, text, 2, text)
Next

Repeat
	 WaitEvent
Forever
To run it, you'll also need the following images copied from the "RapaGUI/Dynamic5" example: add.png, large_add.png

Now, there are quite some differences in how this looks on different platforms:

Any platform using MUI:
Image

Windows x64:
Image

macOS x64:
Image

Result:
MUI:
+ Linebreaks are always displayed correctly
+ an explizit rowHeight is always ensured (clipping the icon if needed) and calculated correctly if not stated
+ the background of the column containing the icon is rendered correctly
- 2nd line of text is always displayed below the icon, even if there's enough space next to it (this is actually the reason why I'm using 2 columns to display the icon and some multiline text in my "SonosController" app)

Win64: in "listbox" mode:
- no multiline text is possible (well, that was to be expected, and no big deal)
- an explizit rowHeight is ignored (again, that was to be expected, and no big deal)

Win64: in "listview" mode:
- no multiline text is possible, except if there's an icon that enforces a larger rowHeight
- an explizit rowHeight is ignored, the row height seems to be calculated from an icon if present
- with an icon column present, the first column ("ID") has some strange left margin
- the background of the column containing the icon always stays white, ignoring selection and the "alternate" zebra (the icon is darkened, though)
+ multiline text (if made possible by a large icon) is displayed next to the icon, not below it

Win64: in "dataview" mode:
- no multiline text is possible for a column without icon, only the 1st line of text is displayed, the rest is cropped
+ an explizit rowHeight is applied
- an explizit rowHeight is ignored, if an icon is larger that that value
+ multiline text is possible for a column with an icon and it's displayed next to the icon, not below it
- multiline text next to an icon always has a top alignment to the icon and is clipped if being larger than the icon, stating an explizit rowHeight to gain some space doesn't help
+ the background of the column containing the icon is rendered correctly

Mac64: in "listbox" mode:
- no multiline text is possible (again, that was to be expected, and no big deal)
- unlike Windows, only the 1st line is displayed, though. It would be nice if the behaviour would be the same of all platforms using wxWidget.
- an explizit rowHeight is ignored (again, that was to be expected, and no big deal)

Mac64: in "listview" mode:
- no multiline text is possible (no matter if there's an icon or not). At least, the linebreak is replaced by a space character
- an explizit rowHeight is ignored, the row height seems to be calculated from an icon if present
+ the background of the column containing the icon is rendered correctly

Mac64: in "dataview" mode:
+ multiline text is possible
+ an explizit rowHeight is applied
- an explizit rowHeight is ignored, if an icon is larger that that value
+ the background of the column containing the icon is rendered correctly
+ multiline text is displayed next to the icon, not below it and as a surplus, nicely vertically centered

Alright, that's about it. I hope it will be possible to fix some of these bugs, although most of them will most likely be wxWidgets bugs, I guess...

And finally:
For most of these issues it's possible to work around them, although it's a bit of a hassle. Imho, the ones that hurt the most are the ones concerning "dataview" mode on Win64.

Cheers,
Michael
User avatar
airsoftsoftwair
Posts: 5433
Joined: Fri Feb 12, 2010 2:33 pm
Location: Germany
Contact:

Re: Listview with linebreaks in column text

Post by airsoftsoftwair »

Thanks for the report although I think some of the issues we see here are actually features, not bugs, e.g. several native controls on Windows might not support multi-line listview elements at all so the only widget that can probably support it all is the dataview widget because that's not a native widget.
Post Reply