Question

我有我的GWT应用程序和TabLayoutPanel，当我在Chrome中加载它时，一切都很好。但是，当我第一次在ie9中加载它时，我没有得到整页：第一个选项卡上的几个标签和图像没有加载。但是当我创建第二个选项卡然后打开第一个选项卡时，一切都很好。我在这个网站上发现了一些关于代码正确的问题。问题必须是第一次上传css。我比较了Chrome和IE中的代码（第一次加载和在TabLayoutPanel中创建第二个标签后），这里是结果

铬

<head> 
   <link rel="stylesheet" href="http://127.0.0.1:8888/myproject/Upload.css">
   <style>
      #loader{position:fixed;......A LOT OF STYLES...
   </style>
</head> 
<body style="margin: 0px;">

IE（首次加载）

<head> 
   <link rel="stylesheet" href="http://127.0.0.1:8888/myproject/Upload.css">
   <style></style>
   <style></style>
</head>
<body style="margin: 0px;">
<iframe>
   ...
   <div style="height: 0px;">
   ...
   <div style="top: 0px; bottom: 0px;">
</iframe>

IE（在TabLayoutPanel中创建第二个标签后）

<head> 
<link rel="stylesheet" href="http://127.0.0.1:8888/myproject/Upload.css">
   <style></style>
   <style></style>
</head>
<body style="margin: 0px;">
<iframe>
   ...
   <div style="height: 68px;">
   ...
   <div style="top: 68px; bottom: 221px;">
</iframe>

请帮帮我。我该怎么办？我需要在第一次加载时正确加载页面。

Java代码

    public void onModuleLoad() {
       startAuthApplication();
}
    private void startAuthApplication() {
         AppController appController = new AppController();
         appController.go(RootLayoutPanel.get());
    }
/********************************************************************/
            public class AppController{
                public void go(final HasWidgets container) {
                    SystemPresenter systemPresenter = new SystemPresenter(AppFactory.getSystemView());
                    systemPresenter.go(container);
                }
            }
/********************************************************************/
        public class SystemPresenter{
        private final SystemView systemView;

            public SystemPresenter(SystemView systemView) {
                this.systemView = systemView;
            }

            public void go(HasWidgets container) {
                container.clear();
                container.add(systemView.asWidget());
            }
        }
/********************************************************************/
    public class AppFactory {
        private static SystemView systemView;
        private static TabPanelViewImpl tabPanelView;

        public static SystemView getSystemView() {
            if (systemView == null) {
                systemView = new SystemViewImpl();
            }
            return systemView;
        }

        public static TabPanelViewImpl getTabPanelView() {
            if (tabPanelView == null) {
                tabPanelView = new TabPanelViewImpl();
            }
            return tabPanelView;
        }
    }
/********************************************************************/
    public class SystemViewImpl extends Composite implements SystemView {

        interface Binder extends UiBinder<DockLayoutPanel, SystemViewImpl> {
        }

        private static Binder binder = GWT.create(Binder.class);

        @UiField(provided = true)
        TabPanelViewImpl tabPanelView;

        public SystemViewImpl() {
            tabPanelView = AppFactory.getTabPanelView();
            initWidget(binder.createAndBindUi(this));
        }
    }
/********************************************************************/
public class TabPanelViewImpl extends Composite implements TabPanelView,
        DocListEditDraftEventHandlers {

    interface TabPanelViewImplBinder extends
            UiBinder<TabLayoutPanel, TabPanelViewImpl> {
    }

    private static TabPanelViewImplBinder binder = GWT
            .create(TabPanelViewImplBinder.class);
    private TabPanelPresenter presenter;

    @UiField(provided = true)
    TabLayoutPanel tabPanel;

    private DocListTableView docListTableView;

    public TabPanelViewImpl() {
        super();
        tabPanel = new TabLayoutPanel(30, Unit.PX);
        docListTableView = AppFactory.getDocListTableView();
        tabPanel.add(docListTableView, "List of Docs");
        initWidget(binder.createAndBindUi(this));
    }
/********************************************************************/
public class DocListTableView extends Composite {

    interface DocListTableViewUiBinder extends
    UiBinder<Widget, DocListTableView> {
    }

    private static DocListTableViewUiBinder uiBinder = GWT
            .create(DocListTableViewUiBinder.class);

    private final DocListTableConstants constants = GWT
            .create(DocListTableConstants.class);

    private final Resources resources = GWT.create(Resources.class);

    private final DocListTableResources resource = GWT
            .create(DocListTableResources.class);

    @UiField(provided = true)
    CellTable<DocList> cellTable;

    @UiField
    Label emptyLabel;
    @UiField(provided = true)
    Label userLabel;

    public DocListTableView() {
        userLabel = new Label("User: "
                + AppFactory.getUserInfo().getUserName());
        initWidget(uiBinder.createAndBindUi(this));
    }
/********************************************************************/

DocListTableView.ui.xml

<ui:with field="res"
        type="com.myproject.client.resources.DocListTableConstants" />
<g:DockLayoutPanel unit='EM'>
        <g:north size='5'>
            <g:HTMLPanel addStyleNames="{docListStyle.center}">
                <g:HorizontalPanel width="100%">
                    <g:cell horizontalAlignment="ALIGN_LEFT">
                        <g:Label addStyleNames="{docListStyle.label}" ui:field="userLabel" />
                    </g:cell>
                </g:HorizontalPanel>
                <g:HorizontalPanel width="100%">
                    <g:cell horizontalAlignment="ALIGN_CENTER">
                        <g:Label addStyleNames="{docListStyle.label} {docListStyle.centerLabel}"
                            text="{res.label}" />
                    </g:cell>
                </g:HorizontalPanel>
            </g:HTMLPanel>
        </g:north>
        <g:center>
            <g:HTMLPanel addStyleNames="{docListStyle.center1}">
                <g:HorizontalPanel width="100%">
                    <g:cell horizontalAlignment="ALIGN_CENTER">
                        <g:Label ui:field="emptyLabel" visible="false">Your document list is empty</g:Label>
                    </g:cell>
                </g:HorizontalPanel>

                <table cellspacing='0' cellpadding='0'>
                    <tr>
                        <td valign='top'>
                            <ct:CellTable addStyleNames='{docListStyle.panel1}'
                                ui:field='cellTable' />
                        </td>
                    </tr>
                    <tr>
                        <td align='center'>
                            <my:DocListSimplePager ui:field='pager'
                                visible="false" />
                        </td>
                    </tr>
                </table>
            </g:HTMLPanel>
        </g:center>
        <g:south size='10'>
            <g:HTMLPanel addStyleNames="{docListStyle.center}">
                <g:Label addStyleNames="{docListStyle.label}               {docListStyle.centerLabel}"
                    text="{res.status}" />
                <table>
                    <tr>
                        <td>
                            <g:Image url="images/status/draft.png"></g:Image>
                        </td>
                        <td>
                            <div class="{docListStyle.label}">
                                <ui:text from='{res.draft}' />
                            </div>
                        </td>
                        <td>
                            <g:Image url="images/status/accept.png"></g:Image>
                        </td>
                        <td>
                            <div class="{docListStyle.label}">
                                <ui:text from='{res.accept}' />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <g:Image url="images/status/send.png"></g:Image>
                        </td>
                        <td>
                            <div class="{docListStyle.label}">
                                <ui:text from='{res.send}' />
                            </div>
                        </td>
                        <td>
                            <g:Image url="images/status/get.png"></g:Image>
                        </td>
                        <td>
                            <div class="{docListStyle.label}">
                                <ui:text from='{res.get}' />
                            </div>
                        </td>
                    </tr>
                </table>
            </g:HTMLPanel>
        </g:south>
    </g:DockLayoutPanel>

我知道我发布了很多代码，但我希望它能够理解。我在DocListTableView的第一个标签上添加了TabLayoutPanel，在第一次加载时只在DocListTableView.ui.xml文件中添加了celltable + pager。其他Labels和<table>元素未显示。

修改我在cellTable中使用的接口Resources和DocListTableResources正确呈现。

import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;

public interface Resources extends ClientBundle {

    @Source("draft.png")
    ImageResource draft();

    @Source("edit.png")
    ImageResource edit();
...
}
import com.google.gwt.user.cellview.client.CellTable;

public interface DocListTableResources extends CellTable.Resources {
    public interface DocListTableStyle extends CellTable.Style {
    };

    @Override
    @Source({ "DocListTableStyle.css" })
    DocListTableStyle cellTableStyle();

}

EDIT2

import com.google.gwt.i18n.client.ConstantsWithLookup;

public interface DocListTableConstants extends ConstantsWithLookup {
    public String label();

    public String status();

    public String draft();
...

Answer 1

如果第二次触发标签时标签正确加载，则最初创建和填充视图时可能会出现某种竞争条件。在这种情况下，Scheduler.scheduleDeferred通常会有所帮助：

在浏览器事件循环返回后执行延迟命令。

意思是，在创建视图并将其添加到DOM时，将执行回调中的代码。

至于哪里需要这个电话 - 我只能猜测，你最了解你的代码:)我开始：

Scheduler.get().scheduleDeferred(new ScheduledCommand() {
    @Override
    public void execute() {
        tabPanel.add(docListTableView, "List of Docs");
    }
});

Answer 2

感谢您的帮助，但我自己发现了错误。

在DocListTableView.ui.xml我使用DockLayoutPanel并在EM中设置尺寸。

<g:DockLayoutPanel unit='EM'>

IE使用EM时有一个problem。所以我尝试使用PX并且它有效！

在IE中首次打开时，GWT代码无法正确呈现

2 个答案: