> For the complete documentation index, see [llms.txt](https://tschuehly.gitbook.io/server-side-spring-htmx-workshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tschuehly.gitbook.io/server-side-spring-htmx-workshop/lab-4-using-spring-beans-to-compose-the-ui.md).
# Lab 4: Using Spring Beans to Compose the UI
As you have seen in Lab 3 we have a lot of duplication between the `UserManagementComponent` and the `GroupManagementComponent` ViewComponent.\\
We start by creating an`LayoutComponent` in `de.tschuehly.easy.spring.auth.web.layout`. We have a ViewContext parameter and the modal-related constants.
{% code title="LayoutComponent.java" %}
```java
@ViewComponent
public class LayoutComponent {
public static final String MODAL_CONTAINER_ID = "modalContainer";
public static final String CLOSE_MODAL_EVENT = "close-modal";
public record LayoutContext(ViewContext content)
implements ViewContext {}
public ViewContext render(ViewContext content) {
return new LayoutContext(content);
}
}
```
{% endcode %}
In the template, we define the shared HTML between the pages.
{% code title="LayoutComponent.jte" %}
```html
@import static de.tschuehly.easy.spring.auth.web.layout.LayoutComponent.CLOSE_MODAL_EVENT
@import static de.tschuehly.easy.spring.auth.web.layout.LayoutComponent.MODAL_CONTAINER_ID
@import de.tschuehly.easy.spring.auth.web.layout.LayoutComponent.LayoutContext
@param LayoutContext layoutContext
Easy Spring Auth
${layoutContext.content()}
```
{% endcode %}
Now we can use the LayoutComponent in the `GroupController` and `UserController`.
We autowire the `LayoutComponent` and the `GroupTableComponent` and call their render method in the endpoint method:
{% code title="GroupController.java" %}
```java
public static final String GROUP_MANAGEMENT = "/group-management";
@GetMapping(GROUP_MANAGEMENT)
public ViewContext groupManagementComponent(){
return layoutComponent.render(groupTableComponent.render());
}
```
{% endcode %}
In the `UserController` we autowire the `LayoutComponent` and the `UserTableComponent` and call their render methods in the endpoint method.
{% code title="UserController.java" %}
```java
public static final String USER_MANAGEMENT_PATH = "/";
@GetMapping(USER_MANAGEMENT_PATH)
public ViewContext userManagementComponent() {
return layoutComponent.render(userTableComponent.render());
}
```
{% endcode %}
We can now navigate to [localhost:8080](http://localhost:8080/) and [localhost:8080/group-management](http://localhost:8080/group-management) and both pages still work.
{% hint style="success" %}
Lab-4 Checkpoint 1
If you are stuck you can resume at this checkpoint with:
`git checkout tags/lab-4-checkpoint-1 -b lab-4-c1`
{% endhint %}
But as we now see, there is no longer a navigation bar. \
The `UserManagementComponent` and the `GroupManagementComponent` are not used anymore. Instead, we can use them to define the page links displayed in the Navigation Bar.
We start by creating an `Page` interface in `de.tschuehly.easy.spring.auth.web`. We define a NavigationItem record and a navigationItem method.
{% code title="Page.java" %}
```java
public interface Page {
record NavigationItem(String displayName, String URI){}
NavigationItem navigationItem();
}
```
{% endcode %}
We can now slim down the `UserManagementComponent` that defines the NavigationItem and the path to the Endpoint. We can also delete the `UserManagementComponent.jte` template.
{% code title="UserManagementComponent.java" %}
```java
@Component
public class UserManagementComponent implements Page {
@Override
public NavigationItem navigationItem() {
return new NavigationItem("User Management", UserController.USER_MANAGEMENT_PATH);
}
}
```
{% endcode %}
{% hint style="warning" %}
We now need to fix `CLOSE_MODAL_EVENT` and the `MODAL_CONTAINER_ID` in the `UserRowComponent` and `UserTableComponent` .
We replace the incorrect imports with imports to the `LayoutComponent`
{% endhint %}
Now in the `LayoutComponent`, we can use Autowiring to get all Pages as a List and aggregate all `NavigationItems` into a List and pass it into the ViewContext
{% code title="LayoutComponent.java" %}
```java
@ViewComponent
public class LayoutComponent {
private final List pageList;
public LayoutComponent(List pageList) {
this.pageList = pageList;
}
public ViewContext render(ViewContext content) {
List navigationItemList = pageList.stream()
.map(Page::navigationItem).toList();
return new LayoutContext(content, navigationItemList);
}
public record LayoutContext(ViewContext content, List navigationItemList) implements ViewContext {
}
}
```
{% endcode %}
In the `LayoutComponent.jte` template we can now show a link for each page defined in the Spring ApplicationContext.\
Replace the `