Navigational Frame Titles
In webforJ, all routes are rendered within a Frame, which serves as a top-level container responsible for displaying the content of the current route. As users navigate between different routes, the Frame Title is updated dynamically to reflect the active view, helping provide clear context on the user's current location within the app.
The title of a frame can be set either statically using annotations or dynamically through code at runtime. This flexible approach allows developers to define titles that align with the purpose of each view, while also adapting to specific scenarios or parameters as needed.
Frame title with annotations
The simplest way to set the title of a frame in view is by using the @FrameTitle
annotation. This annotation allows you to define a static title for any route component, which is then applied to the frame when the component is rendered.
Using the @FrameTitle
annotation
The @FrameTitle
annotation is applied at the class level and allows you to specify a string value that represents the title of the page. When the router navigates to a component with this annotation, the specified title will be automatically set for the browser window.
Here’s an example:
@Route
@FrameTitle("Dashboard")
public class DashboardView extends Composite<Div> {
public DashboardView() {
// view logic
}
}
In this example:
- The
DashboardView
class is annotated with@Route
to define the route. - The
@FrameTitle("Dashboard")
annotation sets the frame title to "Dashboard". - When the user navigates to
/dashboard
, the title of the frame will automatically update to the specified value.
This method is useful for routes that have a static title and don't require frequent updates based on the route’s context.
@AppTitle
and @FrameTitle
If the app title is set, the frame title will incorporate it. For example, if the app defines the title as @AppTitle("webforJ")
and the frame title is set as @FrameTitle("Dashboard")
, the final page title will be Dashboard - webforJ
. You can customize the format of the final title in the @AppTitle
annotation by using the format
attribute if needed.
Dynamic frame titles
In cases where the frame title needs to change dynamically based on the state of the app or route parameters, webforJ provides an interface called HasFrameTitle
. This interface allows components to provide a frame title based on the current navigation context and route parameters.
Implementing the HasFrameTitle
interface
The HasFrameTitle
interface contains a single method getFrameTitle()
, which is invoked before the frame's title is updated. This method provides the flexibility to generate a title dynamically based on the navigation context or other dynamic factors.
@Route("profile/:id")
public class ProfileView extends Composite<Div> implements HasFrameTitle {
public ProfileView() {
getBoundComponent().add(new H1("Profile Page"));
}
@Override
public String getFrameTitle(NavigationContext context, ParametersBag parameters) {
// Dynamically set the frame title using route parameters
String userId = parameters.get("id").orElse("Unknown");
return "Profile - User " + userId;
}
}
In this example:
- The
ProfileView
component implements theHasFrameTitle
interface. - The
getFrameTitle()
method dynamically generates a title using theid
parameter from the URL. - If the route is
/profile/123
, the title will be updated to "Profile - User 123".
You can combine both static and dynamic methods. If a route component has both a @FrameTitle
annotation and implements the HasFrameTitle
interface, the dynamically provided title from getFrameTitle()
will take precedence over the static value from the annotation.