Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 10 of 10 total
Thread Architecture / Performance Question
Mon, Nov 26 2012 5:29 AMPermanent Link

Mark Brooks

Slikware

Avatar

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



Attachments: Spaces_Search.tiff
Mon, Nov 26 2012 6:18 AMPermanent Link

Rick

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
Mon, Nov 26 2012 6:49 AMPermanent Link

Mark Brooks

Slikware

Avatar

<<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?
Mon, Nov 26 2012 8:41 AMPermanent Link

Mark Brooks

Slikware

Avatar

<<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?
Mon, Dec 3 2012 3:08 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

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. Smile

Tim Young
Elevate Software
www.elevatesoft.com
Wed, Dec 5 2012 5:20 AMPermanent Link

Mark Brooks

Slikware

Avatar

<<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. Smile>

Thanks very much. This is just Phase 1. We have some big plans for EWB.
Thu, Dec 6 2012 1:59 PMPermanent Link

Raul

Team Elevate Team Elevate

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

Agreed.

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

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

Raul
Thu, Dec 6 2012 3:10 PMPermanent Link

Mark Brooks

Slikware

Avatar

<<Agreed.

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

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!
Tue, Dec 11 2012 12:30 AMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

Mark,

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

I'm going to hold you to that. Wink

Thanks,

Tim Young
Elevate Software
www.elevatesoft.com
Thu, Dec 27 2012 12:22 PMPermanent Link

Uli Becker

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. Smile

Thanks Uli





Attachments: Clip1.png
Image