基于UiBinder实现GWT应用的移动端友好布局方案咨询

1. 响应式设计策略 #

基于CSS媒体查询的样式切换 #

利用UiBinder内嵌样式或ClientBundle定义媒体查询，针对不同屏幕宽度切换组件显示状态。比如隐藏桌面导航、显示汉堡按钮：

<ui:style>
  .desktopMenu { display: block; }
  .mobileMenuBtn { display: none; }
  
  @media (max-width: 767px) {
    .desktopMenu { display: none; }
    .mobileMenuBtn { display: block; }
  }
</ui:style>

<g:Button styleName="{style.mobileMenuBtn}" ui:field="mobileMenuBtn">☰</g:Button>
<g:HorizontalPanel styleName="{style.desktopMenu}" ui:field="desktopNav">
  <!-- 桌面导航项 -->
</g:HorizontalPanel>

监听窗口尺寸动态调整组件 #

通过ResizeHandler监听窗口变化，在代码层动态调整组件布局或样式：

public class MainViewImpl extends Composite implements MainView {
  @UiField FlowPanel contentPanel;

  public MainViewImpl() {
    initWidget(uiBinder.createAndBindUi(this));
    Window.addResizeHandler(event -> {
      if (event.getWidth() < 768) {
        contentPanel.setStyleName("mobile-content-layout");
      } else {
        contentPanel.setStyleName("desktop-content-layout");
      }
    });
  }
}

选择响应式布局面板 #

优先使用LayoutPanel、FlowPanel等支持百分比布局的容器，避免固定坐标的AbsolutePanel。比如用LayoutPanel实现自适应分栏：

<g:LayoutPanel width="100%" height="100%">
  <g:layer left="0" right="0" top="0" height="60px">
    <!-- 顶部导航栏 -->
  </g:layer>
  <g:layer left="0" right="0" top="60px" bottom="0">
    <!-- 自适应内容区 -->
  </g:layer>
</g:LayoutPanel>

2. UiBinder移动端设计技巧 #

条件注入组件 #

用@UiField(provided=true)结合设备检测，为不同终端加载对应组件：

public class MainViewImpl extends Composite implements MainView {
  @UiField(provided=true) Widget navigation;

  public MainViewImpl() {
    boolean isMobile = Window.getClientWidth() < 768;
    navigation = isMobile ? new MobileNavigation() : new DesktopNavigation();
    initWidget(uiBinder.createAndBindUi(this));
  }
}

对应的UiBinder模板：

<g:FlowPanel>
  <ui:field name="navigation"/>
  <!-- 其他内容 -->
</g:FlowPanel>

复用通用组件模板 #

通过<ui:include>引入通用组件模板，仅用样式区分终端表现：

<!-- common/Button.ui.xml -->
<ui:UiBinder xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <g:Button styleName="{style.baseButton}">
    <ui:insert/>
  </g:Button>
</ui:UiBinder>

<!-- 移动端页面引用 -->
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:g="urn:import:com.google.gwt.user.client.ui"
             xmlns:common="urn:import:com.yourproject.common">
  <ui:style>
    .baseButton { padding: 8px 16px; font-size: 14px; }
  </ui:style>
  <common:Button>提交</common:Button>
</ui:UiBinder>

条件编译渲染 #

在.gwt.xml定义设备属性，结合<ui:if>实现模板条件渲染：

<!-- gwt.xml配置 -->
<define-property name="device.type" values="desktop,mobile"/>
<set-property-fallback name="device.type" value="desktop"/>

<!-- UiBinder中使用 -->
<ui:if test='com.google.gwt.core.client.GWT.getModuleName().equals("mobile")'>
  <g:Button ui:field="mobileOnlyBtn">移动端专属按钮</g:Button>
</ui:if>

3. 代码复用方案 #

MVP模式分离逻辑与视图 #

定义统一Presenter处理业务逻辑，桌面/移动端分别实现View接口，Presenter仅通过接口交互：

// 通用Presenter逻辑
public class MainPresenterImpl implements MainPresenter {
  private final MainView view;
  private final UserServiceAsync userService;

  public MainPresenterImpl(MainView view) {
    this.view = view;
    userService = GWT.create(UserService.class);
  }

  @Override
  public void onSubmitForm(String data) {
    userService.saveData(data, new AsyncCallback<Void>() {
      @Override
      public void onSuccess(Void result) { view.showSuccessMessage(); }
      @Override
      public void onFailure(Throwable caught) { view.showErrorMessage(caught.getMessage()); }
    });
  }
}

// 桌面端View实现
public class DesktopMainViewImpl extends Composite implements MainView { /* 桌面UI逻辑 */ }

// 移动端View实现
public class MobileMainViewImpl extends Composite implements MainView { /* 移动端UI逻辑 */ }

抽离共享业务类 #

将API调用、数据转换等逻辑抽成独立工具类，供多终端共用：

public class UserUtils {
  public static String formatUserName(User user) {
    return user.getFirstName() + " " + user.getLastName();
  }
}

// 桌面/移动端均可调用
String formattedName = UserUtils.formatUserName(currentUser);

延迟绑定实现多终端适配 #

在.gwt.xml中配置不同设备的类绑定，编译时自动生成对应版本：

<replace-with class="com.yourproject.mobile.MobileMainViewImpl">
  <when-type-is class="com.yourproject.MainView"/>
  <when-property-is name="device.type" value="mobile"/>
</replace-with>

<replace-with class="com.yourproject.desktop.DesktopMainViewImpl">
  <when-type-is class="com.yourproject.MainView"/>
  <when-property-is name="device.type" value="desktop"/>
</replace-with>

代码中直接获取实例即可：

MainView view = GWT.create(MainView.class);
MainPresenter presenter = new MainPresenterImpl(view);

内容的提问来源于stack exchange，提问作者d1vyanshu_Nayak