GWT:如何弄清楚HTMLPanel渲染是否完整

时间:2014-10-14 06:35:37

标签: javascript html gwt

我正在开发一个从服务器获取HTML内容并将其显示给用户的应用程序。从服务器获取的内容是完整的HTML文档。我已经使用UiBinder来为视图指定UI。

<g:HTMLPanel ui:field="mainPanel" styleName="ap-mainPanel">
</g:HTMLPanel>

在视图中我有setViewerContent(String 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();
}

我向contentPanel添加一个滚动处理程序,它监听ScrollEvent,onScroll()调用相应的方法从服务器获取内容 根据滚动位于顶部还是底部。

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 -->");
        }

    }
}

我遇到的问题是,当我们呈现内容时,我看到对服务器的调用是为了持续获取内容。在呈现从服务器获取的内容时,将触发新的滚动事件。我们不希望这样,即在呈现内容时我们不希望触发ScrollEvent。我尝试了上面的代码,我已将AttachEvent.Handler()附加到contentPanel。保留一个标志isRenderComplete,在contentPanel attach上变为true。在触发任何服务器调用之前,此标志在onScroll方法中使用。这种方法似乎有效。

但我不确定这是否正确。有没有人有更好的解决方案?

此外,由于我们每次创建新的contentPanel都会将滚动条带到顶部。我尝试向contentPanel添加一个带有几个换行符的新HTMLPanel markerPanel。然后在contentAnel的onAttachOrDetach()中尝试滚动到markerPanel。这没用。

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();
}

有什么建议吗?我们希望在获取新内容时滚动位于底部,并且在完全呈现所提取的内容之前不应触发滚动事件。

1 个答案:

答案 0 :(得分:0)

在呈现内容后添加滚动处理程序,并在分离面板时将其删除

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;    
                addScrollHandler();
            }
            else
            {
                isRenderComplete = false;   
                removeScrollHandler();
            }

        }
    });
    mainPanel.clear();
    contentPanel.add(markerPanel);
    mainPanel.add(contentPanel);
}