Question

嗨，我是GWT MVP模式的新手。我来自asp.net背景，目前我正在研究GWT，我被要求创建一个主页面，其中包含所有视图应该共有的菜单项。最初我使用https://developers.google.com/web-toolkit/articles/mvp-architecture-2创建了一个示例mvp项目，并且从一个视图到另一个视图的导航。如何保持一个视图不变并根据我们单击的菜单项不断更改其他视图。请帮忙

Answer 1

将屏幕划分为两个或多个区域，并为每个区域分配专用的ActivityMapper和ActivityManager。例如，一个区域可以是MenuActivityManager的“menu”，另一个区域可以是BodyActivityManager的“body”。

这是一个很好的解释： http://blog.ltgt.net/gwt-21-activities-nesting-yagni/

请注意，使用此方法有利有弊。浏览器需要几毫秒来呈现标准html。创建一个小部件mainMenu可能更容易，并将其（最重要的是，使用UiBinder）包含在每个视图中，而不是处理两个活动管理器。

Answer 2

您提到的文章来自GWT中添加的MVP支持之前。它很擅长解释这个概念，但实际的实现并不那么有用。要继续，请查看有关活动的GWT文档：https://developers.google.com/web-toolkit/doc/latest/DevGuideMvpActivitiesAndPlaces。在那里，您还可以找到解决问题的方法。简而言之，请查看ActivityManager。这管理所有活动。在活动管理器上，您可以设置一个对所有活动都是静态的窗口小部件。此小部件必须具有方法setWidget（实际上它必须实现AcceptsOneWidget）。在每个活动实现中，您都可以通过start方法获取此小部件。通过在start方法中使用该活动的特定视图调用setWidget，可以设置特定于活动的视图。这些都是非常简短的描述，但是如果你阅读上面提到的文档，你应该得到这个概念。

Answer 3

如果您使用的是UiBinder，则ui.xml文件应该是这样的，

 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>
</ui:style>

<g:DockLayoutPanel unit="EM">
    <g:north size="4">
        //Add Logo, menus or what you want to be displayed for all the pages 
    </g:north>
    <g:center>
        //Add code for your desired UI. In java code you change the UI by this "flowpanel"
        For eg: <g:FlowPanel ui:field="flowpanel" />
    </g:center>
</g:DockLayoutPanel>

然后，每次您都可以使用您的Java代码<g:center>清除并添加要在flowpanel.clear(); flowpanel.add(anyWidget you need)视图中显示的小部件。

因此<g:north>将是静态视图，<g:center>将是动态视图。现在，您将获得所需的页面。因为您每次只能在<g:center>上更改视图。

如果需要，您可以添加<g:east>，<g:west>和g:south>。

如果您不使用UiBinder，请按照以下步骤在您的Java代码中执行所有操作，

    final DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Style.Unit.EM);
    dockLayoutPanel.addNorth(any widget you need, "4"); //NorthPanel
    dockLayoutPanel.add(any widget you need);   //CenterPanel

"4"是面板的大小，您可以更改它。

喜欢这个dockLayoutPanel.addWest(any widget you need, "4"); //WestPanel dockLayoutPanel.addEast(any widget you need, "4");//EastPanel dockLayoutPanel.addSouth(any widget you need, "4"); //SouthPanel

我希望你现在有了想法。

如何使用gwt mvp创建所有视图共有的母版页或页面

3 个答案: