跳至主要内容

Navigational Frame Titles

在 ChatGPT 中打开

在webforJ中，所有路由都在一个框架内渲染，该框架作为一个顶层容器，负责显示当前路由的内容。当用户在不同路由之间导航时，框架标题会动态更新，以反映当前活动视图，帮助提供用户在应用程序中的当前位置的清晰上下文。

框架的标题可以通过注解静态设置，也可以通过代码在运行时动态设置。这种灵活的方法允许开发人员定义与每个视图的目的相一致的标题，同时根据需要适应特定场景或参数。

使用注解设置框架标题​

在视图中设置框架标题的最简单方法是使用@FrameTitle注解。此注解允许您为任何路由组件定义一个静态标题，该标题将在组件渲染时应用到框架。

使用@FrameTitle注解​

@FrameTitle注解应用于类级别，允许您指定一个表示页面标题的字符串值。当路由器导航到具有此注解的组件时，指定的标题将自动设置为浏览器窗口的标题。

以下是一个示例：

@Route
@FrameTitle("仪表板")
public class DashboardView extends Composite<Div> {
  public DashboardView() {
     // 视图逻辑
  }
}

在这个示例中：

  • DashboardView类用@Route注解进行标注以定义路由。
  • @FrameTitle("仪表板")注解将框架标题设置为“仪表板”。
  • 当用户导航到/dashboard时，框架的标题将自动更新为指定的值。

这种方法对于具有静态标题且不需要根据路由上下文频繁更新的路由非常有用。

@AppTitle和@FrameTitle

如果设置了应用程序标题，则框架标题将结合使用。例如，如果应用程序将标题定义为@AppTitle("webforJ")，而框架标题设置为@FrameTitle("仪表板")，最终页面标题将为仪表板 - webforJ。如果需要，您可以在@AppTitle注解中使用format属性自定义最终标题的格式。

动态框架标题​

在需要根据应用程序状态或路由参数动态更改框架标题的情况下，webforJ提供了一个名为HasFrameTitle的接口。此接口允许组件根据当前导航上下文和路由参数提供框架标题。

实现HasFrameTitle接口​

HasFrameTitle接口包含一个名为getFrameTitle()的方法，在更新框架标题之前调用。此方法提供灵活性，可以根据导航上下文或其他动态因素动态生成标题。

@Route("profile/:id")
public class ProfileView extends Composite<Div> implements HasFrameTitle {
  private final Div self = getBoundComponent();

  public ProfileView() {
    self.add(new H1("个人资料页面"));
  }

  @Override
  public String getFrameTitle(NavigationContext context, ParametersBag parameters) {
    // 使用路由参数动态设置框架标题
    String userId = parameters.get("id").orElse("未知");
    return "个人资料 - 用户 " + userId;
  }
}

在这个示例中：

  • ProfileView组件实现了HasFrameTitle接口。
  • getFrameTitle()方法使用URL中的id参数动态生成标题。
  • 如果路由为/profile/123，标题将更新为“个人资料 - 用户 123”。
结合注解和动态标题

您可以结合静态和动态方法。如果路由组件同时具有@FrameTitle注解并实现HasFrameTitle接口，则从getFrameTitle()动态提供的标题将优先于注解中的静态值。