使用 URL 历史和导航 API

本章节包含使用 URL 历史记录和导航 API 的示例。

假设有 Event 实体和 EventInfo 界面,用来展示选中事件的信息。

EventInfo 界面控制器包含 @Route 注解,用来指定此界面的路由:

@UiController("eventInfo")
@UiDescriptor("event-info.xml")
@Route("event-info")
public class EventInfo extends Screen {
}

然后,用户可以在浏览器的地址栏输入 http://localhost:8081/#main/event-info 来打开此界面:

event info route

当界面打开时,地址还包含一个状态标记。

状态映射至 URL

假设 EventInfo 界面每次展示一个事件的信息,并且能控制切换事件。此时,你也需要在 URL 中反应当前查看的事件,这样可以拷贝 URL,以便将来粘贴地址就可以打开查看此特定事件的界面。

下面的代码实现了将选中事件映射至 URL:

@UiController("eventInfo")
@UiDescriptor("event-info.xml")
@Route("event-info")
public class EventInfo extends Screen {
    @Autowired
    protected EntityComboBox<Event> eventField;

    @Autowired
    protected UrlRouting urlRouting;

    @Subscribe("selectBtn")
    protected void onSelectBtnClick(Button.ClickEvent e) {
        Event event = eventField.getValue(); (1)
        if (event == null){
            urlRouting.replaceState(this); (2)
            return;
        }
        String serializedEventId = UrlIdSerializer.serializeId(event.getId()); (3)

        urlRouting.replaceState(this, ImmutableMap.of("event_id", serializedEventId)); (4)
    }
}
1 EntityComboBox 获取当前事件。
2 如果没有选中事件,删除 URL 参数。
3 使用 UrlIdSerializer 工具类对事件的 id 进行序列化。
4 用包含序列化事件 id 参数的新状态替换当前的 URL 状态。

结果是,当用户选中事件然后点击 Select Event 按钮时,应用程序 URL 会变化:

event info url change

UrlParamsChangedEvent

现在实现最后一个需求:当用户输入带路由和 event_id 参数的 URL 时,应用程序必须展示相应事件的界面。

下面是在界面控制器订阅 UrlParamsChangedEvent 的示例代码:

@Subscribe
protected void onUrlParamsChanged(UrlParamsChangedEvent event) {
    String serializedEventId = event.getParams().get("event_id"); (1)

    UUID eventId = (UUID) UrlIdSerializer.deserializeId(UUID.class, serializedEventId); (2)

    eventField.setValue(dataManager.load(Event.class).id(eventId).one()); (3)
}
1 UrlParamsChangedEvent 获取参数值。
2 对事件 id 进行反序列化。
3 加载事件实例并设置到界面控件