0

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

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

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

  1. 如何在单个文件（包或文件夹）中定义这些面板，以便可以将它们导入主文件？

  2. 我如何导入它们（有点像include在 PHP 中）？

  3. 我需要对xml文件进行哪些更改（如果需要）？

  4. 如何为导入的文件也定义相同的规则集，以便导入级联？也就是说，如果aimportsb和bimports cand dto 构造自己，两者c和d都被导入到主文件中导入？

  5. 主 CSS 文件中的CSS规则是否足以满足所有导入的面板？

如果有人能从随附的默认StockWatcher应用程序的角度解释这一点GWT（以便我们可以对理解目录结构有一些共同点），我将很容易理解。

4

2 回答 2

3

你需要制作一个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()构造函数时都需要调用一次。它将小部件设置为由组合包装。在此处查看文档。

然后你就可以像这样使用它了

VerticalPanel mainPanel = new VerticalPanel();

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

  1. 以上应该回答第1点

  2. 如果您的 Widget 与上面的代码不在同一个包中，则需要导入它。对于上面的例子：import com.example.widget.FirstPanel

  3. 无需在 XML 文件中进行任何更改

  4. 是的，导入将按照您的描述进行级联。

  5. 只要您在小部件中声明样式名称，主 CSS 中的 CSS 规则就足够了。您可以通过调用来做到这一点，setStyleName("example-SomeStyle");如上例所示。

于 2013-01-22T02:08:08.703 回答
1

您要问的是所谓的自定义小部件。您可以创建一个自定义小部件来代表 first_panel，另一个代表 second_panel 等。然后，如果需要，您可以制作包含其他小部件的小部件。每个自定义小部件都是一个单独的类 - 它将由一个单独的文件表示（或者如果您使用 Ui:Binder 作为自定义小部件，则使用两个文件）。

您可以在此处阅读有关自定义小部件的更多信息： https ://developers.google.com/web-toolkit/doc/latest/DevGuideUiCustomWidgets

于 2013-01-21T23:36:42.117 回答