當在IE中第一次打開時，GWT代碼無法正確顯示

我有我的使用TabLayoutPanel的GWT應用程序，當我在Chrome中加載它時，一切正常。但是當我第一次加載ie9時，我沒有看到整個頁面：第一個標籤上的幾個標籤和圖像沒有加載。但是當我創建第二個選項卡然後打開第一個選項卡時，一切都很好。我在這個網站上發現了一些關於這個問題的問題，代碼是正確的。該問題必須在第一次上傳CSS。我比較了鉻和IE（第一負載和創建在TabLayoutPanel第二個選項卡之後）的代碼和這裏的結果當在IE中第一次打開時，GWT代碼無法正確顯示

鉻

<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>

我知道我張貼了大量的代碼，但我希望它相當瞭解。我在TabLayoutPanel的第一個選項卡上添加DocListTableView，並在第一次加載時在DocListTableView.ui.xml文件中僅顯示celltable + pager顯示。其他Labels和<table>元素不顯示。

編輯接口Resources和DocListTableResources我cellTable使用和他們進行正確的渲染。

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

來源

2014-12-22 olgacosta

請顯示您的java代碼。你如何將TabLayoutPanel添加到接口？ –

很難判斷實際發生了什麼問題 - 在最初的添加過程中，「DocListTableView」沒有被添加嗎？還是隻有它的資源？你能說明你如何使用DocListTableView中的'resources'和'resource'字段嗎？如果沒有更多的信息，很難說 - 也許你只需要在樣式上調用'ensureInjected（）'或者在'Scheduler.get（）。scheduleDeferred（）'中添加'DocListTableView'。 –

@Igor Klimer，我編輯了我的問題。你提出'ensureInjected（）'或'Scheduler.get（）。scheduleDeferred（）'。你能幫助我使用它嗎？ – olgacosta

感謝您的幫助，但我發現錯誤我自己。

在DocListTableView.ui.xml我使用DockLayoutPanel並將其尺寸設置爲EM。

<g:DockLayoutPanel unit='EM'>

有一個problem與IE使用EM。所以我試圖使用PX，它工作！

來源

2015-03-31 09:19:08 olgacosta

如果接頭正確加載你觸發它的第二次，可能有某種競爭條件去當視圖是最初創建和填充的。在這種情況下，Scheduler.scheduleDeferred通常有幫助：

延遲命令在瀏覽器事件循環返回後執行。

這意味着，回調中的代碼將在視圖創建並添加到DOM時執行。

至於在需要這個電話 - 我只能猜測，你知道你的密碼最好的:)我開始：

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

來源

2015-03-27 16:33:05

'Sheduler.sheduleDeferred'不適合我。但是我發現了別的東西。第一次加載的元素是那些使用''的人。例如，您的文檔列表爲空正確加載，但是'不會加載到'DocListTableView.ui.xml'中 – olgacosta

嗯，這很奇怪..但也容易測試:)只需用靜態替換'{res.status}''文本，看看是否使標籤第一次正確渲染。如果是這樣的話，那麼你可能會偶然發現GWT中的一個bug。 –

對不起，我錯了。我發現了這個問題。在'DocListTableView.ui.xml'中我使用'DockLayoutPanel'。當我用'HTMLPanel'替換它時，所有加載的內容都是正確的。也許在'TabLayoutPanel'的addind'DockLayoutPanel'中有一些特殊的特性。 – olgacosta

當在IE中第一次打開時，GWT代碼無法正確顯示

回答

相關問題