I am working on an application which fetches HTML content from the server
and displays it to the user. The content fetched from the server is a
complete HTML document. I have used UiBinder to specify UI for the view.
<g:HTMLPanel ui:field="mainPanel" styleName="ap-mainPanel"></g:HTMLPanel>
In the view I have setViewerContent(String content) method and also a
member panel for holding content[contentPanel]
public void setViewerContent(String content){
contentPanel = new HTMLPanel(content);
contentPanel.setStyleName("ap-mainPanel ap-scrollPanel"); //$NON-NLS-1$
contentPanel.addAttachHandler(new AttachEvent.Handler() {
@Override
public void onAttachOrDetach(AttachEvent event) {
if(event.isAttached())
{
System.out.println("<-- rendering complete -->");
isRenderComplete = true;
}
}
});
mainPanel.clear();
mainPanel.add(contentPanel);
addScrollHandler();}
I add a scroll handler to the contentPanel which listens to the ScrollEvent
and onScroll() calls the appropriate methods to fetch content from the
server based on whether scroll is at the top or bottom.
public void addScrollHandler() {
Event.sinkEvents(contentPanel.getElement(), Event.ONSCROLL);
contentPanel.addHandler(this, ScrollEvent.getType());}
public void onScroll( ScrollEvent event ){
if( HelperUtils.isScrollAtBottom( event.getSource() ) )
{
if(isRenderComplete)
{
System.out.println("<-- Process Down scroll START-->");
isRenderComplete = false;
getUiHandlers().reachedMaxVerticalScrollPostion();
System.out.println("<-- Process Down scroll END-->");
}
}
if( HelperUtils.isScrollAtTop( event.getSource() ) )
{
if(isRenderComplete)
{
System.out.println("<-- Process Up scroll START-->");
isRenderComplete = false;
getUiHandlers().reachedMinVerticalScrollPostion();
System.out.println("<-- Process Up scroll END -->");
}
}}
The problem I was facing was as we render the content I see calls made to
the server to fetch content continuously. New scroll events are being fired
while the content fetched from the server is being rendered. We would not
want this i.e while the content is being rendered we do not want the
ScrollEvent to be fired. I tried the above code where I have attached
AttachEvent.Handler() to contentPanel. A flag isRenderComplete is
maintained which is turned true on contentPanel attach. This flag is used
in the onScroll method before triggering any server call.This approach
seems to work.
But I am not sure if this is the correct one. Does anyone has any better
solution[s] ?If the content has images and other external stuff will they
be loaded before AttachEvent is fired ?
Also since we are creating new contentPanel everytime each fetch takes the
scrollbar to the top. I tried to add a new HTMLPanel markerPanel with
couple of line breaks to the contentPanel. Then in the onAttachOrDetach()
of contentPanel tried to scroll to the markerPanel. This did not work.
public void setViewerContent(String content){
contentPanel = new HTMLPanel(content);
markerPanel = new HTMLPanel(" <br> <br> ");
contentPanel.setStyleName("ap-mainPanel ap-scrollPanel"); //$NON-NLS-1$
contentPanel.addAttachHandler(new AttachEvent.Handler() {
@Override
public void onAttachOrDetach(AttachEvent event) {
System.out.println("<-- rendering complete -->");
if(event.isAttached())
{
markerPanel.getElement().scrollIntoView();
isRenderComplete = true;
}
}
});
mainPanel.clear();
contentPanel.add(markerPanel);
mainPanel.add(contentPanel);
addScrollHandler();}
Any suggestions ? we want the scroll to be at the bottom when we fetch new
content and the scroll event should not be fired till the content fetched
is rendered completely.
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.
