Huge rendering performance on a popupwindow-like class
Frank
the abilitily to pick out a single item out of a list of about 5000
items(in a scroll panel). I tried implementing this with a dialogbox,
but for some reason i couldn't get the dialog box to be draggable.
Searching through this forum I found a class that does exactly what i
needed....I have extended this class in order to make it possible to
add my 5000 items into the popup, while attaching a clicklistener to
every one of these items. The loading of the 5000 items is done on
the initial load of the page, and now i just want to use the show()
method so that the popup method shows up when the user clicks on a
given icon.
My problem is that my whole application freezes for a very long time
once I call the show() method(this only happens when theres a huge
number of items in the popup's scroll panel). I was thinking that
maybe there would be a way to buffer the popup panel's content so that
only a fixed number of items are loaded into the popup at a time, and
when the user scrolls down, the popup fetches the next set of items
from the list of 5000 to display. Anyone have any other suggestions or
hints on how I could achieve this? Thank you for your time
Francois
here is my accompanying classes:
=============================================
import com.google.gwt.user.client.ui.FocusPanel;
import com.google.gwt.user.client.ui.HasAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.MouseListenerAdapter;
public class PopupWindow extends PopupPanel{
private VerticalPanel inner = new VerticalPanel();
private DragListener dragListener = new DragListener();
private FocusPanel caption = new FocusPanel();
private Label captionText = new Label();
private HorizontalPanel n = new HorizontalPanel();
private AbsolutePanel c = new AbsolutePanel();
private ScrollPanel content = new ScrollPanel();
private Image close = new Image("closeIcon.GIF");
public PopupWindow(String text) {
captionText.setText(text);
n.add(captionText);
n.add(close);
n.setCellHorizontalAlignment(close,HasAlignment.ALIGN_RIGHT);
n.setWidth("100%");
close.setStyleName("close");
close.addClickListener(new ClickListener(){
public void onClick(Widget sender){
hide();
}
});
caption.setStyleName("Caption");
caption.addMouseListener(dragListener);
caption.add(n);
c.add(content);
content.setStyleName("Content");
inner.add(caption);
inner.add(c);
inner.setStyleName("PopBody");
add(inner);
addStyleName("PopWindow");
}
public void setContentPanel(Widget widget){
content.add(widget);
}
public void setContenPanelScrollHeight(String arg){
content.setHeight(arg);
}
public void setText(String text){
captionText.setText(text);
}
private class DragListener extends MouseListenerAdapter {
private boolean dragging;
private int dragStartX;
private int dragStartY;
public void onMouseDown(Widget sender, int x, int y) {
dragging = true;
dragStartX = x;
DOM.setCapture(caption.getElement());
dragStartY = y;
}
public void onMouseMove(Widget sender, int x, int y) {
if(dragging){
int absX = x +sender.getAbsoluteLeft();
int absY = y +sender.getAbsoluteTop();
setPopupPosition(absX - dragStartX, absY -
dragStartY);
}
}
public void onMouseUp(Widget sender, int x, int y) {
dragging = false;
DOM.releaseCapture(caption.getElement());
}
}
=========================================================
mport java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
public class ListFilterPopup extends PopupWindow {
private boolean itemIsSelected = false;
private String selectedItem = "";
private int selectedIndex = 0;
private VerticalPanel container = new VerticalPanel();
private TextBox filterTxtBox;
private String scrollHeight = "0px";
public ListFilterPopup(String ScrollHeight) {
super("Please Select an Item");
scrollHeight = ScrollHeight;
}
public void setListData(ArrayList data){
int index = 0;
for(Iterator iter = data.iterator();iter.hasNext();index++){
String listItemString = (String)iter.next();
Label listItem = new Label(listItemString);
listItem.setStyleName("ListFilterPopupItem");
listItem.addClickListener(new
dataItemClickListener(listItemString,index));
container.add(listItem);
}
setContenPanelScrollHeight(scrollHeight);
setContentPanel(container);
}
public void reset(){
filterTxtBox.setText("");
filterTxtBox.setEnabled(true);
selectedItem = "";
selectedIndex = 0;
}
public void setFilterTextBox(TextBox txtBox){
filterTxtBox = txtBox;
}
public String getSelectedItem(){
return selectedItem;
}
public int getSelectedIndex(){
return selectedIndex;
}
private class dataItemClickListener implements ClickListener{
private String dataItem="";
private int index=0;
public dataItemClickListener(String DataItem, int Index){
dataItem = DataItem;
index = Index;
}
public void onClick(Widget sender){
itemIsSelected = true;
selectedItem = dataItem;
filterTxtBox.setText(selectedItem);
filterTxtBox.setEnabled(false);
selectedIndex = index;
hide();
}
}
}
========================================================
Mat Gessel
> I currently have an application in which i must provide the user with
> the abilitily to pick out a single item out of a list of about 5000
> items(in a scroll panel). I tried implementing this with a dialogbox,
> but for some reason i couldn't get the dialog box to be draggable.
Even simple DialogBoxes drag a bit slow in hosted mode. You may get
better results in web mode.
> Searching through this forum I found a class that does exactly what i
> needed....I have extended this class in order to make it possible to
> add my 5000 items into the popup, while attaching a clicklistener to
> every one of these items. The loading of the 5000 items is done on
> the initial load of the page, and now i just want to use the show()
> method so that the popup method shows up when the user clicks on a
> given icon.
Limiting creation of listeners may help. The developer guide discusses
this here:
http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.UserInterface.EventsAndListeners.html
> My problem is that my whole application freezes for a very long time
> once I call the show() method(this only happens when theres a huge
> number of items in the popup's scroll panel). I was thinking that
> maybe there would be a way to buffer the popup panel's content so that
> only a fixed number of items are loaded into the popup at a time, and
> when the user scrolls down, the popup fetches the next set of items
> from the list of 5000 to display. Anyone have any other suggestions or
> hints on how I could achieve this? Thank you for your time
One approach is to drop a table into a scroll panel and populate rows
when scrolled. You would use the native scrolling mechanizm and would
need to determine which rows become visible. This was discussed
previously, though I don't know if anyone got it to work:
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/ce6745cac4080743/425aae3604a5a553
Another approach is to write your own list widget. You would emulate
the scroll bars with divs/images and have total control. This is
basically what Swing does. One of the arguments for Sun made for Swing
vs. SWT is that items in a JList are lightweight (i.e. each item does
not necessarily have an associated native object), and therefore can
handle huge sizes with ease.
-= Mat
--
Mat Gessel
http://www.asquare.net
Frank
that didn't solve the problem.... I will try to Try your second
approach, populating the rows while scrolling.
Thank you for your time,
Francois