GXT框架：门户布局与拖放功能详解

### GXT框架：门户布局与拖放功能详解 #### 1. 应用启动与状态监控 当运行应用程序时，选择一个Feed或Item，会在状态栏中看到一条消息。这是因为我们创建了一个额外的控制器，它会监控事件并向用户报告状态，这展示了多个控制器如何观察应用事件。 #### 2. GXT框架组件解耦优势 GXT框架允许我们将应用程序的不同组件解耦，使它们不再相互依赖，而是对事件做出响应。这种设计模式提高了代码的可维护性和可扩展性。 #### 3. 门户与Portlet ##### 3.1 Portlet类 Portlet类继承自ContentPanel，提供了一种特殊的面板类型，用户可以使用Portal容器在视口中重新定位它，类似于桌面应用程序中的窗口。创建Portlet的代码示例如下： ```java Portlet portlet = new Portlet(); portlet.setHeight(150); portlet.setHeading("Example Portlet"); ``` 可以通过以下代码固定Portlet，防止其被重新定位： ```java portal.setPinned(true); ``` Portlet继承了标准ContentPanel的所有功能。 ##### 3.2 Portal类 Portal是Portlet组件的特殊容器，它是一个包含多个LayoutContainer组件的容器，这些组件使用ColumnLayout进行排列。每个LayoutContainer组件又可以包含使用RowLayout排列的Portlet组件。Portal支持Portlet组件的拖放操作，包括在列内更改行位置和在Portal内更改列位置。 创建一个两列的Portal（第一列占30%宽度，第二列占70%宽度）的代码如下： ```java Portal portal = new Portal(2); portal.setColumnWidth(0, 0.3); portal.setColumnWidth(1, 0.7); ``` 向每列添加Portlet的代码示例： ```java Portlet portlet1 = new Portlet(); portlet1.setHeight(150); portlet1.setHeading("Example Portlet 1"); portal.add(portlet1, 0); Portlet portlet2 = new Portlet(); portlet2.setHeight(150); portlet2.setHeading("Example Portlet 2"); portal.add(portlet2, 1); ``` ##### 3.3 ToolButton 可以像在ContentPanel中一样，向Portlet的头部添加ToolButton组件，使Portlet更像桌面应用程序中的窗口。示例代码如下： ```java portlet.getHeader().addTool(new ToolButton("x-tool-minimize")); portlet.getHeader().addTool(new ToolButton("x-tool-maximize")); portlet.getHeader().addTool(new ToolButton("x-tool-close")); ``` #### 4. 创建门户控制器和Portlet视图 ##### 4.1 添加新事件类型 在现有的AppEvents类中添加一个名为NewPortletCreated的新EventType，当创建新Portlet时触发该事件： ```java public static final EventType NewPortletCreated = new EventType(); ``` ##### 4.2 创建门户控制器 创建一个名为PortalController的新类，继承自Controller： ```java public class PortalController extends Controller { ``` ##### 4.3 创建门户视图 创建一个名为PortalView的新类，继承自View，并设置其控制器： ```java public class PortalView extends View { public PortalView(PortalController portalController) { super(portalController); } } ``` ##### 4.4 初始化门户控制器 在PortalController中创建一个变量来保存PortalView，并重写initialize方法来设置视图： ```java private PortalView portalView; @Override public void initialize() { super.initialize(); portalView = new PortalView(this); } ``` ##### 4.5 注册事件类型 在PortalController的构造函数中注册需要观察的事件类型，包括NewPortletCreated和Error： ```java public PortalController() { registerEventTypes(AppEvents.NewPortletCreated ); registerEventTypes(AppEvents.Error); } ``` ##### 4.6 处理事件 重写handleEvent方法，将除错误事件外的所有事件转发到视图，错误事件暂时记录到GWT日志中： ```java @Override public void handleEvent(AppEvent event) { EventType eventType = event.getType(); if (eventType.equals(AppEvents.error)) { GWT.log("Error", (Throwable) event.getData()); } else { forwardToView(portalView, event); } } ``` ##### 4.7 初始化门户视图 在PortalView中创建一个两列的Portal组件，并设置列宽： ```java private final Portal portal = new Portal(2); @Override protected void initialize() { portal.setColumnWidth(0, 0.3); portal.setColumnWidth(1, 0.7); final Viewport viewport = new Viewport(); viewport.setLayout(new FitLayout()); viewport.add(portal); RootPanel.get().add(viewport); } ``` ##### 4.8 处理新Portlet创建事件 在PortalView中实现handleEvent方法，处理NewPortletCreated事件： ```java @Override protected void handleEvent(AppEvent event) { EventType eventType = event.getType(); if (eventType.equals(AppEvents.NewPortletCreated )) { } } ``` ##### 4.9 修改入口点方法 在RSSReader类的onModuleLoad方法中，创建PortalController并移除转发Init AppEvent的代码： ```java public void onModuleLoad() { final FeedServiceAsync feedService = GWT.create(FeedService.class); Registry.register(RSSReaderConstants.FEED_SERVICE, feedService); Dispatcher dispatcher = Dispatcher.get(); dispatcher.addController(new PortalController()); } ``` #### 5. 创建导航Portlet ##### 5.1 创建导航Portlet类 创建一个名为NavPortlet的新类，继承自Portlet，并设置标题、布局和高度： ```java public class NavPortlet extends Portlet { public NavPortlet() { setHeading("Navigation"); setLayout(new FitLayout()); setHeight(610); } } ``` ##### 5.2 添加ID常量 在RSSReaderConstants类中添加一个新常量作为该Portlet的ID： ```java public static final String NAV_PORTLET = "navPortlet"; ``` ##### 5.3 设置Portlet ID 在NavPortlet的构造函数中设置Portlet的ID： ```java public NavPortlet() { setHeading("Navigation"); setLayout(new FitLayout()); setHeight(610); setId(RSSReaderConstants.NAV_PORTLET); } ``` ##### 5.4 添加内容面板 创建一个新的NavPanel实例，隐藏其头部并添加到Portlet中： ```java public NavPortlet() { setHeading("Navigation"); setLayout(new FitLayout()); setHeight(610); setId(RSSReaderConstants.NAV_PORTLET); NavPanel navPanel = new NavPanel(); navPanel.setHeaderVisible(false); add(navPanel); } ``` ##### 5.5 通知门户 通过Dispatcher转发一个NewPortletCreated事件，将该Portlet作为数据负载： ```java public NavPortlet() { setHeading("Navigation"); setLayout(new FitLayout()); setHeight(610); setId(RSSReaderConstants.NAV_PORTLET); NavPanel navPanel = new NavPanel(); navPanel.setHeaderVisible(false); add(navPanel); Dispatcher.forwardEvent(AppEvents.NewPortletCreated , this); } ``` ##### 5.6 处理新Portlet创建事件 在PortalView中创建一个名为onNewPortletCreated的方法，根据Portlet的ID将其添加到相应的列中： ```java private void onNewPortletCreated (AppEvent event) { final Portlet portlet = (Portlet) event.getData(); ```