Re: Are GWT widgets "heavy" ?

"This causes the browser to recalculate and repaint the page each time you append a single search item to the DOM"

I think this is true only if he uses some async method that allow the browser to repaint. If not, then the repaint occures only once, when the search results loop finished

2016. július 5., kedd 17:53:26 UTC+2 időpontban Jens a következőt írta:

I wouldn't call them heavy but I would not use a widget in cases I don't need events, e.g. taking a UiBinder example:

<g:FlowPanel>
  <g:FlowPanel addStyleName="{style.container}">

    <g:FlowPanel addStyleName="{style.left}">
       <g:Label ui:field="....">click me 1</g:Label>

       <g:Label ui:field="....">click me 2</g:Label>

    </g:FlowPanel>
    <g:FlowPanel addStyleName="{style.right}">
       <g:Label ui:field="....">click me 1</g:Label>

       <g:Label ui:field="....">click me 2</g:Label>

    </g:FlowPanel>
  </g:FlowPanel>
</g:FlowPanel>

In the above you are only interested in events for your labels and all the FlowPanels do not provide real value. IF you are familiar with HTML and CSS then you could use

<g:HTMLPanel>
  <div class="{style.container}">
    <div class="{style.left}">
       <g:Label ui:field="....">click me 1</g:Label>
       <g:Label ui:field="....">click me 2</g:Label>
    </div>
    <div class="{style.right}">
       <g:Label ui:field="....">click me 1</g:Label>
       <g:Label ui:field="....">click me 2</g:Label>
    </div>
  </div>
</g:HTMLPanel>

The above uses less DOM operations to build the UI and needs less memory because there are fewer JavaScript objects pointing to DOM elements (= less GWT widgets).

Some side notes: 

• When you build a large list of widgets as in your search result, then do not append all the search result entries to a container in a for-loop if that container is already attached to the DOM. This causes the browser to recalculate and repaint the page each time you append a single search item to the DOM. Instead detach the container, fill it with the search results and then attach it again (or create a new container and replace the old one).
  
• Use pagination
• If you can't use pagination for any reason, consider only render the items that are visible. If you have 1000 search results but only 20 are visible in the scroll panel, then only render 40 or so and render additional entries when the user scrolls to them.
• Only show the top 20 search results and add a "show more" button or let users redefine their search until their desired result is in the top 20.

Basically if your list is so long that it starts to get slow then you most likely have a general usability/UI problem because nobody will scroll through such long lists anyways.

-- J.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.