GWT自定义小部件需要很长时间才能创建

时间:2013-12-06 20:57:46

标签: gwt widget rendering

我有一个显示自定义tweeter Feed列表的视图,例如小部件。以下是小部件的模板:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
            xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style type="com.ziplly.app.client.widget.TweetWidget.Style"
            src="tweetwidget.css">
    </ui:style>
    <ui:with type="com.ziplly.app.client.resource.ZResources" field="resources"/>

    <g:HTMLPanel ui:field="tweetPanel" addStyleNames="{style.tweetPanel}">
            <div class='{style.tweet_block}'>
                    <div class='{style.tweet_image}'>
                            <b:Image ui:field="authorImage" />
                    </div>
                    <div class='{style.tweet_content_section}'>
                            <div class="{style.tweetActionDropdown}">
                                    <b:Dropdown text="edit">
                                            <b:NavLink ui:field="editTweetLink">Edit</b:NavLink>
                                            <b:NavLink ui:field="deleteTweetLink">Delete</b:NavLink>
                                            <b:NavLink ui:field="reportSpamLink">Report Spam</b:NavLink>
                                    </b:Dropdown>
                            </div>
                            <div class="{style.tweet_content}">
                                    <span class='{style.tweet_text}' ui:field="tweetContentSpan" />
                                    <b:TextArea ui:field="tweetContentTextArea"
                                            addStyleNames="{style.tweetContentTextArea}" />
                                    <g:HTMLPanel ui:field="tweetEditButtonPanel">
                                            <b:Button type="PRIMARY" size="SMALL" ui:field="saveBtn">save</b:Button>
                                            <b:Button size="SMALL" ui:field="cancelBtn">cancel</b:Button>
                                    </g:HTMLPanel>
                            </div>
                            <div class='tweet_actions'>
                                    <div>
                                            <div class='{style.tweet_action_link}'>
                                                    <g:Anchor ui:field="likeTweetLink" addStyleNames="{style.smalltext}">Like</g:Anchor>
                                            </div>
                                            <div class='{style.tweet_action_link}'>
                                                    <g:Anchor ui:field="commentLink" addStyleNames="{style.smalltext}">Comment</g:Anchor>
                                            </div>
                                            <div class='{style.tweet_sender_link}'>
                                                    posted by
                                                    <g:Anchor ui:field="authorProfileLink">
                                                            <span class="smalltext" ui:field="authorName" />
                                                    </g:Anchor>
                                                    on
                                                    <span ui:field="timeCreated" />
                                            </div>
                                    </div>
                            </div>
                    </div>
            </div>
            <g:HTMLPanel addStyleNames="{style.people_liked_section}" ui:field="tweetLikePanel">
            </g:HTMLPanel>
            <div class="{style.commentSectionDiv}">
                    <g:HTMLPanel addStyleNames="{style.tweetCommentSection}" ui:field="tweetCommentSection">
                    </g:HTMLPanel>
                    <g:HTMLPanel>
                            <b:TextArea ui:field="commentInputTextBox" addStyleNames="{style.commentInputTextBox}" />
                            <div class="{style.commentInputActionSection}">
                                    <b:Button type="PRIMARY" size="SMALL" ui:field="commentBtn">comment</b:Button>
                                    <b:Button size="SMALL" ui:field="cancelCommentBtn">cancel</b:Button>
                            </div>
                    </g:HTMLPanel>
            </div>
    </g:HTMLPanel>
</ui:UiBinder> 

我正在使用以下内容来填充视图:

final long time1 = System.currentTimeMillis();
for (final TweetDTO tweet : tweets) {
    final long time11 = System.currentTimeMillis();
    final TweetWidget tw = new TweetWidget();
    tw.setWidth(tweetWidth);
    final long time12 = System.currentTimeMillis();
    tw.setPresenter(presenter);
    tw.displayTweet(tweet);
    final long time13 = System.currentTimeMillis();
    communityWallPanel.add(tw);
    final long time14 = System.currentTimeMillis();

    System.out.println("Time to create tweet widget: " + (time12 - time11) + " to render: " + (time13 - time12) + " to addToPanel: " + (time14 - time13));
    tweetWidgetMap.put(tweet.getTweetId(), tw);
}

final long time2 = System.currentTimeMillis();
System.out.println("Time to render wall: " + (time2 - time1));

平均而言,我看到在页面上呈现每个小部件大约300多毫秒。在300毫秒中,280+用于创建该模板。从模板创建窗口小部件似乎太长时间了。任何帮助将不胜感激。

0 个答案:

没有答案
相关问题