Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Update Flow-Hilla layout documentation #3666

Open
wants to merge 8 commits into
base: latest
Choose a base branch
from
Open

fix: Update Flow-Hilla layout documentation #3666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ecb7c53
fix: Update Flow-Hilla layout documentation
caalador Sep 13, 2024
82a358d
Apply suggestions from code review
caalador Sep 24, 2024
ce13580
fix configuration to match explanation
caalador Sep 24, 2024
e0899f9
Merge branch 'latest' into issues/2709-update-hilla-doc
caalador Sep 24, 2024
6bb030c
Merge branch 'latest' into issues/2709-update-hilla-doc
mshabarov Sep 27, 2024
0c3858a
Merge branch 'latest' into issues/2709-update-hilla-doc
mshabarov Sep 27, 2024
12b40ea
add link to menuRegistry page
caalador Sep 27, 2024
0fe5e5b
Merge branch 'latest' into issues/2709-update-hilla-doc
mshabarov Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 14 additions & 22 deletions articles/flow/integrations/hilla.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,9 +222,11 @@
----

[[hilla-server-side-layout]]
[role="since:com.vaadin:vaadin@V24.5"]
== Flow Server Side Layout for Hilla Views
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By the way, this chapter should give a link to https://vaadin.com/docs/latest/flow/advanced/menu-registry#creating-client-routes-menu-on-server to make it clear for readers how to create a dynamic menus. For hilla layouts it is mentioned, so should be the same for flow layout.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added at the end


It's possible to use a Flow server side main layout for both server views and Hilla client views. The server view needs to implement [classname]`RouterLayout` and be annotated with[annotationname]`@Layout`.
It's possible to use a Flow server side main layout for both server views and Hilla client views.
The server view needs to implement [classname]`RouterLayout` and be annotated with[annotationname]`@Layout`.

[source,java]
----
Expand All @@ -234,44 +236,34 @@
}
----

If the application is using access protection, add [annotationname]`@AnonymousAllowed` on the `MainView` so that the request is not denied.

For more information on `RouterLayout`, see <<../routing/layout.adoc#,Router Layouts & Nested Router Targets>>.

For Hilla views to use the server side layout, copy [filename]`routes.tsx` and add the `withLayout` call to route builder.
Information on dynamic menu item generation, see <<../advanced/menu-registry#,Menu Registry>>.

[source,javascript]
----
import { RouterConfigurationBuilder } from '@vaadin/hilla-file-router/runtime.js';
import Flow from 'Frontend/generated/flow/Flow';
import fileRoutes from 'Frontend/generated/file-routes';

export const { router, routes } = new RouterConfigurationBuilder()
.withFileRoutes(fileRoutes)
.withLayout(Flow)
mshabarov marked this conversation as resolved.
Show resolved Hide resolved
.withFallback(Flow)
.protect()
.build();
----
[NOTE]
If the application is using access protection add [annotationname]`@AnonymousAllowed` on the `MainView` so that the request is not denied.

Hilla views will automatically use the server side layout if a matching one exists, and no hilla layout is available for the view.

Check warning on line 246 in articles/flow/integrations/hilla.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Will] Avoid using 'will'.

Raw Output:
{"message": "[Vaadin.Will] Avoid using 'will'.", "location": {"path": "articles/flow/integrations/hilla.adoc", "range": {"start": {"line": 246, "column": 13}}}, "severity": "WARNING"}

Check failure on line 246 in articles/flow/integrations/hilla.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Terms] Use 'Hilla' instead of 'hilla'.

Raw Output:
{"message": "[Vale.Terms] Use 'Hilla' instead of 'hilla'.", "location": {"path": "articles/flow/integrations/hilla.adoc", "range": {"start": {"line": 246, "column": 92}}}, "severity": "ERROR"}

This tells the builder that `Flow` should be used as a main layout for Hilla views where `ViewConfig` contains `flowLayout: true`.
To have a Hilla view ignore the server side layout ViewConfig contains the `flowLayout` value that if set to `false` will ignore automatic server layout.

Check warning on line 248 in articles/flow/integrations/hilla.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Will] Avoid using 'will'.

Raw Output:
{"message": "[Vaadin.Will] Avoid using 'will'.", "location": {"path": "articles/flow/integrations/hilla.adoc", "range": {"start": {"line": 248, "column": 118}}}, "severity": "WARNING"}

.Sample Client File with Configuration
.Sample Client File With Configuration
[source,javascript]
----
export const config: ViewConfig = {
flowLayout: true
flowLayout: false
};

export default function ClientView() {
return (
<HorizontalLayout theme="spacing" style={{ alignItems: 'baseline' }}>
<p>Client layout with server side main layout</p>
<p>Client layout without server side main layout</p>
mshabarov marked this conversation as resolved.
Show resolved Hide resolved
</HorizontalLayout>
);
}
----

If the `flowLayout` is not defined or set to `false`, the view won't ask the server for a route layout to embed into. Also, only one layout type (Hilla react or Flow) is supported at one time.
[NOTE]
Only one layout type (Hilla react or Flow) is supported at one time.

[discussion-id]`9da82521-5074-42b6-82a5-88fc207987d0`
4 changes: 2 additions & 2 deletions articles/flow/routing/layout.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ order: 40

All parent layouts of a navigation target component have to implement the [interfacename]`RouterLayout` interface. You can define a parent layout by adding the [annotationname]`@Layout` annotation to the class, or by using the optional element `layout` from the `@Route` annotation.


[role="since:com.vaadin:vaadin@V24.5"]
=== Automatic Layout Using `@Layout`

The value for the [annotationName]`@Layout` annotation path has to be unique for the project. Otherwise, the resolver won't be able to determine which layout component should be used. Having multiple [annotationName]`@Layout` annotations with the same path throws an exception.
Expand Down Expand Up @@ -53,7 +53,7 @@ public class CompanyComponent extends Component {

When using the <<route#,`@Route("path")`>> annotation to define a route, the component renders by default in the `<body>` tag on the page when there is no `@Layout` for `RouterLayout`. This is because the element returned by [methodname]`HasElement.getElement()` is attached to the `<body>` tag.


[role="since:com.vaadin:vaadin@V24.5"]
=== Layout Matching Routes

To configure which routes a [annotationname]`@Layout` annotated [classname]`RouterLayout` handles, the prefix of the route's path can be given for the value.
Expand Down
Loading