Easy Spring Auth

# Lab 2: Using Spring ViewComponent This lab aims to build the same application as Lab 1.\ But this time we will use Spring ViewComponent and htmx-spring-boot to delegate rendering responsibility to the ViewComponent. ### An Introduction to Spring ViewComponent A ViewComponent is a Spring-managed bean that defines a rendering context for a corresponding template, this context is called `ViewContext`. We can create a ViewComponent by annotating a class with the `@ViewComponent` annotation and defining a public nested record that implements the ViewContext interface. {% code title="SimpleViewComponent.java" %} ```java @ViewComponent public class SimpleViewComponent { public record SimpleViewContext(String helloWorld) implements ViewContext { } public SimpleView render() { return new SimpleView("Hello World"); } } ``` {% endcode %} A ViewComponent needs to have a template with the same name defined in the same package. In the template, we can access the properties of the record. {% code title="SimpleViewComponent.jte" %} ``` @param SimpleViewComponent.SimpleViewContext simpleViewContext

${simpleViewContext.helloWorld()}

``` {% endcode %} {% hint style="info" %} Spring ViewComponent wraps the underlying MVC model using Spring AOP and enables us to create the frontend in a similar way to the component-oriented JavaScript frameworks {% endhint %} ### Creating the UserMangement with Spring ViewComponent To start we need to add three dependencies to the `build.gradle.kts` file. {% code title="build.gradle.kts" %} ```kotlin implementation("de.tschuehly:spring-view-component-jte:0.8.1") implementation("io.github.wimdeblauwe:htmx-spring-boot:3.3.0") ``` {% endcode %} We can enable live-reload for Spring ViewComponent with these properties in `application.yaml`. Also, remove the `gg.jte` properties and uncomment the spring.view-component properties {% code title="application.yaml" %} ``` spring: view-component: local-development: true viewComponentRoot: lab-2/src/main/java #gg: # jte: # developmentMode: true # templateLocation: lab-2/src/main/jte ``` {% endcode %} We start by creating a `UserManagementComponent.java` file in the `de.tschuehly.easy.spring.auth.user.management` package.

@ViewComponent
public class UserManagementComponent {
  public static final String MODAL_CONTAINER_ID = "modalContainer";
  public static final String CLOSE_MODAL_EVENT = "close-modal";
  
  public record UserManagementContext() 
         implements ViewContext{}

  public ViewContext render(){
    return new UserManagementContext();
  }
}

We then create a `UserManagementComponent.jte` template in the `de.tschuehly.easy.spring.auth.user.management` package: {% code title="UserManagementComponent.jte" overflow="wrap" %} ```java @import static de.tschuehly.easy.spring.auth.user.management.UserManagementComponent.* @import de.tschuehly.easy.spring.auth.user.management.UserManagementComponent.UserManagementContext @param UserManagementContext userManagementContext Easy Spring Auth

``` {% endcode %} We add a static import to the `UserManagementComponent` class.\ The `param` is a `UserManagementContext` as we put all variables into this record. Now we will create a separate component for the table. #### UserTableComponent Create a `UserTableComponent.java` in `de.tschuehly.easy.spring.auth.user.management.table` {% code title="UserTableComponent.java" %} ```java @ViewComponent public class UserTableComponent { private final UserService userService; public UserTableComponent(UserService userService) { this.userService = userService; } public record UserTableContext() implements ViewContext{ } public static final String USER_TABLE_BODY_ID = "userTableBody"; public ViewContext render(){ return new UserTableContext(); } } ``` {% endcode %} In the last lab, we defined the `USER_TABLE_BODY_ID` in the `UserController.java`. Now define it in the `UserTableComponent.java` . Now we will create a `UserTableComponent.jte` template in the same package as the `UserTableComponent.java`: {% code title="UserTableComponent.jte" %} ```java @import de.tschuehly.easy.spring.auth.user.management.table.UserTableComponent.UserTableContext @import static de.tschuehly.easy.spring.auth.user.UserController.GET_CREATE_USER_MODAL @import static de.tschuehly.easy.spring.auth.user.management.UserManagementComponent.MODAL_CONTAINER_ID @import static de.tschuehly.easy.spring.auth.user.management.table.UserTableComponent.USER_TABLE_BODY_ID @param UserTableContext userTableContext

uuid	username	password

``` {% endcode %} We then create a `UserRowComponent.java` class in `de.tschuehly.easy.spring.auth.user.management.table.row` package:

@ViewComponent
public class UserRowComponent {

  public record UserRowContext(EasyUser easyUser) implements ViewContext {
    public static String htmlUserId(UUID uuid) {
      return "user-" + uuid;
    }
  }

  public ViewContext render(EasyUser easyUser) {
    return new UserRowContext(easyUser);
  }
}

We then create a `UserRowComponent.jte` template in the `auth.user.management.table.row` package. ```java @import static de.tschuehly.easy.spring.auth.htmx.HtmxUtil.URI @import static de.tschuehly.easy.spring.auth.user.UserController.* @import static de.tschuehly.easy.spring.auth.user.management.UserManagementComponent.MODAL_CONTAINER_ID @import de.tschuehly.easy.spring.auth.user.management.table.row.UserRowComponent.UserRowContext @param UserRowContext userRowContext !{var uuid = userRowContext.easyUser().uuid;} <%-- (1) --%> <%-- (2) --%> ${uuid.toString()} ${userRowContext.easyUser().username} <%-- (1) --%> ${userRowContext.easyUser().password} <%-- (1) --%> ``` (1): We use the `userRowContext.easyUser()` attribute to access the user we want to render. (2): We set the id of the table row using the `UserRowContext.htmlUserId(uuid)` function ### UserTableComponent We now change the `UserTableComponent.java`: {% code title="UserTableComponent.java" %} ```java @ViewComponent public class UserTableComponent { private final UserService userService; private final UserRowComponent userRowComponent; // (1) public UserTableComponent(UserService userService, UserRowComponent userRowComponent) { this.userService = userService; this.userRowComponent = userRowComponent; // (1) } public record UserTableContext(List userTableRowList) // (2) implements ViewContext{ } public static final String USER_TABLE_BODY_ID = "userTableBody"; public ViewContext render(){ List rowList = userService.findAll() // (3) .stream().map(userRowComponent::render).toList(); // (4) return new UserTableContext(rowList); } } ``` {% endcode %} **(1):** We autowire the userRowComponent. **(2):** We add a `List` property to the `UserTableContext` **(3):** We call the `userService.findAll()` method **(4):** Then we call the autowired `userRowComponent::render` method in the `.stream().map()` function. Now we will render the `userTableRowList` in the `UserTableComponent.jte`: {% code title="UserTableComponent.jte" %} ```java @import de.tschuehly.easy.spring.auth.user.management.table.UserTableComponent.UserTableContext @import static de.tschuehly.easy.spring.auth.user.UserController.GET_CREATE_USER_MODAL @import static de.tschuehly.easy.spring.auth.user.management.UserManagementComponent.MODAL_CONTAINER_ID @import static de.tschuehly.easy.spring.auth.user.management.table.UserTableComponent.USER_TABLE_BODY_ID @param UserTableContext userTableContext @for(var row: userTableContext.userTableRowList()) <%-- (1) --%> ${row} <%-- (2) --%> @endfor

uuid	username	password

``` {% endcode %} (1): We loop through the `userTableRowList` and create a `row` loop variable. (2): We render the `row` ViewContext in the `` Now we can render the table using Spring ViewComponent in the `UserMangement.java:`

@ViewComponent
public class UserManagementComponent {
  public static final String MODAL_CONTAINER_ID = "modalContainer";
  public static final String CLOSE_MODAL_EVENT = "close-modal";
  private final UserTableComponent userTableComponent; // (1)

  public UserManagementComponent(UserTableComponent userTableComponent) {// (1)
    this.userTableComponent = userTableComponent; 
  }

  public record UserManagementContext(ViewContext userTable)
      implements ViewContext {}

  public ViewContext render(){
    return new UserManagementContext(userTableComponent.render());
  }
}

(1): We autowire the `UserTableComponent` (2): We add a `userTable` ViewContext field to the `UserManagementContext` (3): In the `UserManagementComponent.render` method we call the `userTableComponent.render` and pass it into the `UserManagementContext` constructor. In the `UserManagementComponent.jte` template, we can insert the rendered table: {% code title="UserManagementComponent.jte" %} ```html @import static de.tschuehly.easy.spring.auth.user.management.UserManagementComponent.* @import de.tschuehly.easy.spring.auth.user.management.UserManagementComponent.UserManagementContext @param UserManagementContext userManagementContext Easy Spring Auth

${userManagementContext.userTable()}

``` {% endcode %} In the UserController.java we can autowire the `UserManagementComponent` ViewComponent and render it in the index method:

@Controller
public class UserController {

  private final UserService userService;
  private final UserManagementComponent userManagementComponent;

  public UserController(UserService userService, UserManagementComponent userManagementComponent) {
    this.userService = userService;
    this.userManagementComponent = userManagementComponent;
  }

  @GetMapping("/")
  public ViewContext index() {
    return userManagementComponent.render();
  }
}

We can restart the application, navigate to and see the table rendered.

{% hint style="success" %} Lab 2 Checkpoint 1 If you are stuck you can resume at this checkpoint with: `git checkout tags/lab-2-checkpoint-1 -b lab-2-c1` {% endhint %} ### Edit User We now create the edit user functionality with Spring ViewComponent. We create an `EditUserComponent.java` in the `de.tschuehly.easy.spring.auth.user.management.edit` package: {% code title="EditUserComponent.java" %} ```java @ViewComponent public class EditUserComponent { private final UserService userService; public EditUserComponent(UserService userService) { // (1) this.userService = userService; } public ViewContext render(UUID uuid) { // (2) EasyUser user = userService.findById(uuid); // (3) return new EditUserContext(user.uuid, user.username, user.password); // (4) } public record EditUserContext(UUID uuid, String username, String password) implements ViewContext { } } ``` {% endcode %} **(1):** We first autowire the `userService` in the constructor **(2):** Then we create a render method with a `uuid` parameter. **(3):** We get the user with the `userService.findById(uuid)` method **(4):** We add the uuid, username and password of the user to the `EditUserContext` ViewContext *** We then create the `EditUserComponent.jte` template in the same package as the `EditUserComponent.java` {% code title="EditUserComponent.jte" %} ```html @import de.tschuehly.easy.spring.auth.user.management.edit.EditUserComponent.EditUserContext @import static de.tschuehly.easy.spring.auth.user.UserController.POST_SAVE_USER @param EditUserContext editUserContext

``` {% endcode %} In the `UserController.java` we remove the `UserForm` record, autowire the `EditUserComponent` and then change the `editUserModal` method to call the `editUserComponent.render` method. {% code title="UserController.java" %} ```java public static final String GET_EDIT_USER_MODAL = "/save-user/modal/{uuid}"; @GetMapping(GET_EDIT_USER_MODAL) public ViewContext editUserModal(@PathVariable UUID uuid) { return editUserComponent.render(uuid); } ``` {% endcode %} We can restart the application navigate to and the edit user modal works again.

{% hint style="success" %} Lab 2 Checkpoint 2 If you are stuck you can resume at this checkpoint with: `git checkout tags/lab-2-checkpoint-2 -b lab-2-c2` {% endhint %} ### Fix the Save User functionality In Lab1 we used HX Response headers to set the swapping functionality directly in the `UserController.java`: {% code title="UserController.java" %} ```java @PostMapping(POST_SAVE_USER) public String saveUser(UUID uuid, String username, String password, Model model, HttpServletResponse response) { EasyUser user = userService.saveUser(uuid, username, password); model.addAttribute("easyUser", user); response.addHeader("HX-Retarget", "#user-" + user.uuid); response.addHeader("HX-Reswap", "outerHTML"); response.addHeader("HX-Trigger", CLOSE_MODAL_EVENT); return "UserRow"; } ``` {% endcode %} We now want to move this functionality to the UserRowComponent. ### HtmxUtil I have already created a `HtmxUtil` class in the `de.tschuehly.easy.spring.auth.htmx` package that helps us set the HX Response Headers. We are using Wim Deblauwes htmx-spring-boot library: [github.com/wimdeblauwe/htmx-spring-boot](https://github.com/wimdeblauwe/htmx-spring-boot). It offers a HtmxResponseHeader enum with all possible values and a HxSwapType enum. We will add these convenience methods to the `HtmxUtil.java` class: {% code title="HtmxUtil.java" %} ```java public static String target(String id){ return "#" + id; } public static void retarget(String cssSelector) { setHeader(HtmxResponseHeader.HX_RETARGET.getValue(), cssSelector); } public static void reswap(HxSwapType hxSwapType){ setHeader(HtmxResponseHeader.HX_RESWAP.getValue(), hxSwapType.getValue()); } public static void trigger(String event) { setHeader(HtmxResponseHeader.HX_TRIGGER.getValue(), event); } ``` {% endcode %} Back to the `UserRowComponent` we create a `rerender` function where we use these utility functions:

public ViewContext rerender(EasyUser easyUser) {
  String target = HtmxUtil.target(UserRowContext.htmlUserId(easyUser.uuid)); // (1)
  HtmxUtil.retarget(target); 
  HtmxUtil.reswap(HxSwapType.OUTER_HTML); // (2)
  HtmxUtil.trigger(UserManagementComponent.CLOSE_MODAL_EVENT); // (3)
  return new UserRowContext(easyUser); // (4)
}

**(1):** We retarget to the id of the `` element we created with the `UserRowContext.htmlUserId()` function. **(2):** We swap the outerHTML of the target element **(3).** And we trigger the `CLOSE_MODAL_EVENT` **(4):** Finally, we return the UserRowContext with the easyUser *** In the `UserController.saveUser` method we can call the `userRowComponent.rerender` method {% code title="UserController.java" %} ```java @PostMapping(POST_SAVE_USER) public ViewContext saveUser(UUID uuid, String username, String password) { EasyUser user = userService.saveUser(uuid, username, password); return userRowComponent.rerender(user); } ``` {% endcode %} We can restart the application and navigate to and the save user function works again! {% hint style="success" %} Lab 2 Checkpoint 3 If you are stuck you can resume at this checkpoint with: `git checkout tags/lab-2-checkpoint-3 -b lab-2-c3` {% endhint %} We have the advantage that the Controller doesn't need to know how the UserRowComponent template looks and what needs to be swapped.\ The UserRowComponent offers an API to rerender a row. ### Create User Finally, we need to migrate the create user functionality to Spring ViewComponent.\ We start by creating a `CreateUserComponent` in the `de.tschuehly.easy.spring.auth.user.management.create` package:

@ViewComponent
public class CreateUserComponent {

  public record CreateUserContext() implements ViewContext{}

  public ViewContext render(){
    return new CreateUserContext();
  }
}

We now need to create a `CreateUserComponent.jte` in the same package as the `CreateUserComponent.java` {% code title="CreateUserComponent.jte" %} ```html @import static de.tschuehly.easy.spring.auth.user.UserController.POST_CREATE_USER

``` {% endcode %} We can now call the `createUserComponent.render` method in the `UserController.getCreateUserModal` method: {% code title="UserController.java" %} ```java public static final String GET_CREATE_USER_MODAL = "/create-user/modal"; @GetMapping(GET_CREATE_USER_MODAL) public ViewContext getCreateUserModal() { return createUserComponent.render(); } ``` {% endcode %} We can restart the application and navigate to and the create user modal is shown when we click on `Create User`

Finally, we need to migrate the `UserController.createUser` method.\ Currently, it looks like this:

@PostMapping(POST_CREATE_USER)
public String createUser(String username, String password, Model model, HttpServletResponse response) {
  EasyUser user = userService.createUser(username, password);
  model.addAttribute("easyUser", user);

  response.addHeader("HX-Retarget", "#" + USER_TABLE_BODY_ID);
  response.addHeader("HX-Reswap", "afterbegin");
  response.addHeader("HX-Trigger", CLOSE_MODAL_EVENT);
  return "UserRow";
}

As before we want to move this code into the `UserRowComponent.java`, by creating a new `renderNewRow` function: {% code title="UserRowComponent.java" %} ```java public ViewContext renderNewRow(EasyUser user) { String target = HtmxUtil.target(UserTableComponent.USER_TABLE_BODY_ID); HtmxUtil.retarget(target); HtmxUtil.reswap(HxSwapType.AFTER_BEGIN); HtmxUtil.trigger(UserManagementComponent.CLOSE_MODAL_EVENT); return new UserRowContext(user); } ``` {% endcode %} We can now simplify the `UserController.createUser` function: {% code title="UserController.java" %} ```java @PostMapping(POST_CREATE_USER) public ViewContext createUser(String username, String password) { EasyUser user = userService.createUser(username, password); return userRowComponent.renderNewRow(user); } ``` {% endcode %} Now if we restart the application we can save a new user and they are inserted at the start of the table.

{% hint style="success" %} Lab 2 Checkpoint 4 If you are stuck you can resume at this checkpoint with: `git checkout tags/lab-2-checkpoint-4 -b lab-2-c4` {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://tschuehly.gitbook.io/server-side-spring-htmx-workshop/lab-2-introducing-spring-viewcomponent.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.