Question to all:

My application has a requirement to display items in lists at various times. These lists need to be very visual, much more so than just a standard Listbox. I have attached an example with a typical "Rich List" highlighted.

In order to achieve this I have created my own component called TPagedListPanel. Essentially it works in an owner-draw manner (for those of you who know WIN32). You tell it how many items you have to display and it fires events to ask for layout and content of each item that it needs to display. It also has a paging capability to handle large lists page by page (although this is not relevant per se).

This all works ok on Chrome and Safari (and indeed Firefox) however on IE the performance really suffers. This is most obvious at the point when the TPagedListPanel builds its initial list. For each item it will create a TPanel to hold the item and several TLabels and TImages within this panel to display text and images relating to the item. Adding, say, 50 of these TPanels as children of the TPagedListPanel is very fast in the webkit browsers (sub 1 second) but very, very slow in IE8 (maybe 20 secs) and even IE9 (maybe 5 secs).

I am assuming that there is little I can do about this due to the poor JavaScript engine inside IE? However, is there another way to solve this problem that either (a) doesn't require the creation of so many components or (b) uses a mechanism that is more IE friendly?

In short, what is the best way to display large lists where each item might require an icon, a state image and several labels?

Thanks
Mark

On 26/11/12 21:29, Mark Brooks wrote:
> Question to all:
>
> My application has a requirement to display items in lists at various times. These lists need to be very visual, much more so than just a standard Listbox. I have attached an example with a typical "Rich List" highlighted.
>
> In order to achieve this I have created my own component called TPagedListPanel. Essentially it works in an owner-draw manner (for those of you who know WIN32). You tell it how many items you have to display and it fires events to ask for layout and content of each item that it needs to display. It also has a paging capability to handle large lists page by page (although this is not relevant per se).
>
> This all works ok on Chrome and Safari (and indeed Firefox) however on IE the performance really suffers. This is most obvious at the point when the TPagedListPanel builds its initial list. For each item it will create a TPanel to hold the item and several TLabels and TImages within this panel to display text and images relating to the item. Adding, say, 50 of these TPanels as children of the TPagedListPanel is very fast in the webkit browsers (sub 1 second) but very, very slow in IE8 (maybe 20 secs) and even IE9 (maybe 5 secs).
>
> I am assuming that there is little I can do about this due to the poor JavaScript engine inside IE? However, is there another way to solve this problem that either (a) doesn't require the creation of so many components or (b) uses a mechanism that is more IE friendly?
>
> In short, what is the best way to display large lists where each item might require an icon, a state image and several labels?
>
> Thanks
> Mark
>
Mark, you can try issuing BeginUpdate/EndUpdate on the TPagedListPanel
during child panel creation (just like Delphi) and see if that helps.

I think ultimately IE performance is just not as good as other browsers.

--
Rick

<<Mark, you can try issuing BeginUpdate/EndUpdate on the TPagedListPanel
during child panel creation (just like Delphi) and see if that helps.

I think ultimately IE performance is just not as good as other browsers.

Rick>>

Hi Rick,

Thanks for the response. The timings are WITH the BeginUpdate / EndUpdate constructs in place. I think, like you, that maybe IE8 and IE9 are just too slow to handle this. Nonetheless, there are plenty of HTML5 apps out there that seem able to present "rich lists" in IE. I guess they are using some heavily tweaked JavaScript to achieve this, something which may be difficult to replicate in EWB?

<<Thanks for the response. The timings are WITH the BeginUpdate / EndUpdate constructs in place. I think, like you, that maybe IE8 and IE9 are just too slow to handle this. Nonetheless, there are plenty of HTML5 apps out there that seem able to present "rich lists" in IE. I guess they are using some heavily tweaked JavaScript to achieve this, something which may be difficult to replicate in EWB??>>

Update 1: The main performance hit seems to be with the TPanel components. The TLabels and TImages are being created / added quite quickly.

Update 2: BeingUpdate and EndUpdate seem to have zero effect when adding lots of panels but can reduce the time significantly (circa 50%) when adding lots of labels or images.

Er?

Mark,

<< Update 1: The main performance hit seems to be with the TPanel
components. The TLabels and TImages are being created / added quite quickly.

Update 2: BeingUpdate and EndUpdate seem to have zero effect when adding
lots of panels but can reduce the time significantly (circa 50%) when adding
lots of labels or images. >>

Can you send me the application, or at least a link to the application
(non-compressed please) ?  I can trace it from here and see what's going on,
and recommend a fix.  Usually BeginUpdate/EndUpdate is all you need, so I'm
thinking that you're referencing something in IE that is forcing a
layout/redraw event.

BTW, wow, just wow, on that interface.

Tim Young
Elevate Software
www.elevatesoft.com

<<Can you send me the application, or at least a link to the application>>

Yup. No problem. Instructions as follows:

1. Please go to https://demo.castrum.co.uk/elevate/cs
2. Login with Username and Password (I have sent to your email)
3. From the Home View click the cloud (top right) for the Spaces View
4. From the Spaces View select the Demo Workspace (lefthand side)
5. Click Content on the righthand side for the Content View
6. From the Content View click Tim's Folder on the lefthand side
7. Click the document called "Notes For Tim" on the righthand side for the Item View
8. From the Item View click the document thumbnail
9. Phew ..............

<<BTW, wow, just wow, on that interface. >

Thanks very much. This is just Phase 1. We have some big plans for EWB.

On 12/3/2012 3:08 PM, Tim Young [Elevate Software] wrote:
> BTW, wow, just wow, on that interface.

Agreed.

Tim should just license couple of those screenshots for the EWB product
page and look sales take off

Once of those technical articles on building more complex controls out
of existing ones might be a nice thing as well.

Raul

<<Agreed.

Tim should just license couple of those screenshots for the EWB product
page and look sales take off

Once of those technical articles on building more complex controls out
of existing ones might be a nice thing as well.

Raul>>

Appreciated Raul.

And no need to license - just use 'em!

Mark,

<< And no need to license - just use 'em! >>

I'm going to hold you to that.

Thanks,

Tim Young
Elevate Software
www.elevatesoft.com

Mark,

The design of your sample is really great!

Since I am using a similar way to display medical examinations in a
list, I am very interested how you realized the scrollbar.

As you see on the attached screenshot, the scrollbar is the only thing
that doesn't match the colors used in the form. That's why I'd like to
"customize" it. But no idea how.

If you want to share your ideas, that would be greatly appreciated.

Thanks Uli