如何模塊化面板在GWT

假設我有我的頁面佈局如下：如何模塊化面板在GWT

vertical panel mainbody = new VerticalPanel; 

//beginning of 1st sub-vertical panel 
VerticalPanel first_panel = new verticalPanel(); 
first_panel.add(...); 
//other such stuff, end of first_panel 
mainbody.add(first_panel); 

//beginning of 2nd sub-vertical panel 
VerticalPanel second_panel = new verticalPanel(); 
second_panel.add(...); 
//other such stuff, end of first_panel 
mainbody.add(second_panel); 

//beginning of 3rd sub-vertical panel 
VerticalPanel third_panel = new verticalPanel(); 
third_panel.add(...); 
//other such stuff, end of first_panel 
mainbody.add(third_panel); 

//end of mainbody 
RootPanel.get().add(mainbody);

我想模塊化它，使得每個子板（first_panel，second_panel和third_panel）屬於單個文件，所以一些進口後，我就可以在主要頁面代碼這做的伎倆：

vertical panel mainbody = new VerticalPanel; 

mainbody.add(first_panel); 
mainbody.add(second_panel); 
mainbody.add(third_panel); 

//end of mainbody 
RootPanel.get().add(mainbody);

子板本身可以使用其他子板，爲其模塊化應該級聯。現在我需要做些什麼來實現這個功能？ Google文檔對我來說不是很清楚。具體而言，

如何在單個文件（包或文件夾）中定義這些面板，以便它們可以導入到主文件中？
如何導入它們（有點像使用PHP中的include）？
我需要對xml文件做什麼更改（如果有的話）？
如何爲導入的文件定義相同的一組規則，以便導入級聯？也就是說，如果a進口b,b進口c和d構建自己，c和d導入到主文件dutring導入？
在主CSS文件中的CSS規則是否足以適用於所有導入的面板？

如果有人可以從默認的StockWatcher應用程序，它自帶的GWT包裝（使我們可以有一些共同點理解的目錄結構）的觀點解釋了這一點，這將是容易的，我理解。

來源

2013-01-21 SexyBeast

你需要做一個Widget出來的面板。

package com.example.widgets // Make this package whatever you want 

import com.google.gwt.user.client.ui.Composite 

public class FirstPanel extends Composite{ 

    private VerticalPanel verticalPanel; 

    public FirstPanel(){ 

     verticalPanel = new VerticalPanel(); 

     // All composites must call initWidget() in their constructors. 
     initWidget(verticalPanel); 

     // For your CSS 
     setStyleName("example-SomeStyle"); 

     // Continue constructing object ... 
    } 

}

每次使用構造函數時，需要精確調用initWidget()。它將小部件設置爲由組合包裝。檢查文檔here。

然後你就可以使用它，像這樣

VerticalPanel mainPanel = new VerticalPanel(); 

FirstPanel firstPanel = new FirstPanel(); 
mainPanel.add(firstPanel);

上面應該回答1點
如果你的Widget是不是在同一個包上面的代碼你需要導入它。對於上面的示例：import com.example.widget.FirstPanel
需要的XML文件
是，進口會像你描述的級聯中進行任何更改。
只要您在小部件中聲明樣式名稱，主CSS中的CSS規則就足夠了。你可以通過調用setStyleName("example-SomeStyle");來做到這一點，如上例所示。

來源

2013-01-22 02:08:08 enrybo

有一件事。我已經開發了基於面板的一切。那麼現在如果我使用小部件，爲面板定義的任何功能（比如'click'，'mouseup'等事件處理程序）是否會受到干擾？ – SexyBeast

順便說一句，我編輯了我的第4點，看看現在是否清楚.. :) – SexyBeast

而我不明白的目錄結構。如果你想到StockWatcher應用程序，有一個名爲'com.google.gwt.sample.stockwatcher.client'的包，它本身包含3個''java'文件，'StockWatcher.java'，'GreetingService.java'和'GreetingServiceAsync.java' 。我是否應該將組件面板放在這個包中，以便我可以像import「import com.google.gwt.sample.stockwatcher.client.subpanel_1」一樣導入它？ – SexyBeast

你在問什麼叫做自定義小部件。您可以創建一個自定義小部件來表示first_panel，另一個可以表示second_panel等。然後，您可以根據需要製作由其他小部件組成的小部件。每個自定義小部件都是一個單獨的類 - 它將由一個單獨的文件（或者如果您使用Ui：Binder爲您的自定義小部件創建兩個文件）表示。

你可以閱讀更多有關自定義部件在這裏： https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCustomWidgets

來源

2013-01-21 23:36:42

如何模塊化面板在GWT

回答

相關問題