Question

假设我的页面有以下布局：

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

子板本身可以使用其他子板，模块化应该级联。现在我需要做些什么才能启用它？谷歌文档对我来说不是很清楚。具体地，

如何在单个文件（包或文件夹）中定义这些面板，以便将它们导入主文件？
如何导入它们（有点像PHP中的include）？
我需要对xml文件进行哪些更改（如果需要）？
如何为导入的文件定义相同的规则集，以便导入级联？也就是说，如果a导入b，b导入c和d来构建自己，c和d被导入主文件dutring import？
主CSS文件中的CSS规则是否足以用于所有导入的面板？

如果有人可以从GWT打包的默认 StockWatcher 应用程序的角度解释这一点（这样我们可以有一些共同点来理解目录结构），它将会我很容易理解。

Answer 1

您需要从面板中制作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");来执行此操作，如上例所示。

Answer 2

您要问的是自定义小部件。您可以创建一个自定义窗口小部件来表示first_panel，另一个用于表示second_panel等。然后，如果需要，您可以创建由其他窗口小部件组成的窗口小部件。每个自定义窗口小部件都是一个单独的类 - 它将由一个单独的文件表示（如果您使用Ui：Binder作为自定义窗口小部件，则表示两个文件）。

您可以在此处详细了解自定义小部件： https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCustomWidgets

如何在GWT中模块化面板

2 个答案: