# Building server-side web applications with htmx

## Setup:

Please install the following:

* Java 21
* IntelliJ IDEA Community Edition or Ultimate
* [plugins.jetbrains.com/plugin/20588-htmx-support](https://plugins.jetbrains.com/plugin/20588-htmx-support)
* [plugins.jetbrains.com/plugin/14521-jte](https://plugins.jetbrains.com/plugin/14521-jte)
* Gradle

Please clone the Git repository:

```sh
git clone https://github.com/tschuehly/htmx-spring-workshop.git
```

After opening the project, run the `Setup and build all` run configuration.

<figure><img src="https://1140842274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FveUvHIoWj41mt9oe9a7o%2Fuploads%2FWmVCoA3g1YU3Xz29EcWK%2Fimage.png?alt=media&#x26;token=0ca40819-0479-406b-97fd-793e0f3b55c0" alt=""><figcaption></figcaption></figure>

## IntelliJ Code Template

To create a new ViewComponent with one click we can create a new IntelliJ Code Template.

Go to settings -> Editor -> File and Code Templates &#x20;

Click on the little plus icon

<figure><img src="https://1140842274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FveUvHIoWj41mt9oe9a7o%2Fuploads%2FtlJCXqOexo9YP1AHpgFs%2Fimage.png?alt=media&#x26;token=abcb295d-e61a-4501-9a75-f3e9ee115789" alt=""><figcaption></figcaption></figure>

Name: `ViewComponent`

File Name: `${COMPONENT_NAME}Component.java`

```
package ${PACKAGE_NAME};

import de.tschuehly.spring.viewcomponent.core.component.ViewComponent;
import de.tschuehly.spring.viewcomponent.jte.ViewContext;

@ViewComponent
public class ${COMPONENT_NAME}Component {
  public record ${COMPONENT_NAME}Context() implements ViewContext{}

  public ViewContext render(){
    return new ${COMPONENT_NAME}Context();
  }
}
```

Select the ViewComponent and then click on the file plus icon next to the first one "Create Child Template"

<figure><img src="https://1140842274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FveUvHIoWj41mt9oe9a7o%2Fuploads%2FNm86G4eZNxMLhdH3nBvY%2Fimage.png?alt=media&#x26;token=12d126a1-db26-4d70-8221-60d42848fd12" alt=""><figcaption></figcaption></figure>

File Name: `${COMPONENT_NAME}Component.jte`

Extension: `jte`

```
@import ${PACKAGE_NAME}.${COMPONENT_NAME}Component.${COMPONENT_NAME}Context
@param ${COMPONENT_NAME}Context ${COMPONENT_NAME.substring(0,1).toLowerCase()}${COMPONENT_NAME.substring(1)}Context
```

## Info

In each lab there are checkpoints:

<figure><img src="https://1140842274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FveUvHIoWj41mt9oe9a7o%2Fuploads%2FfqIGDBzV2G7q0Lm0QtAl%2Fimage.png?alt=media&#x26;token=a595b0a6-c891-41ea-aa34-26e9e99dfb15" alt=""><figcaption></figcaption></figure>

You can find a branch for each lab with multiple checkpoint commits you can start over with or compare against if you are stuck:

<figure><img src="https://1140842274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FveUvHIoWj41mt9oe9a7o%2Fuploads%2Fgit-blob-f4729cdd5d953e0988c44203cb1ae17b1c2b3940%2Fimage%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Only the relevant imports that need to be added are shown. Imports that have already been defined before are omitted.

## Labs

### Lab 1: Server-side rendering with Spring Boot and JTE

This lab aims to build a simple user management application with base Spring Boot, JTE and htmx.

### Lab 2: Introducing Spring ViewComponent

In this lab, we refactor the application to use Spring ViewComponent and htmx-spring-boot to delegate rendering responsibility to the ViewComponents and remove it from the Controller.

### Lab 3: Inline Editing.

In this lab, we will create a group Management Page where we can add a user to a group and a navigation bar

### Lab 4: Using Spring Beans to Compose the UI

In this short lab, we will use the dependency injection capabilities of Spring to show a navigation bar where we can add new items by just creating new Components

### Lab 5: Lazy Loading

In this lab, we will lazily load the user table as it now contains a lot of users

### Lab 6: Full Text Search

In this lab, we will enable our users to search the user table.

### Lab 7: Infinite Scrolling using Pageable

In this lab, we will only load new users when we are scrolling down, improving our initial page speed

### Lab 8: Exception Messages

In this lab, we will catch Exception using a Spring Controller Advice and show them to the user in a nice form

### Lab 9: Server-Sent Events

In this lab, we will leverage the SSE capabilities of htmx to update our table live if a new user is created.


---

# 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/readme.md?ask=<question>
```

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.