Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/innoq/comptus
https://github.com/innoq/comptus
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/innoq/comptus
- Owner: innoq
- Created: 2023-06-27T10:54:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-05T07:58:03.000Z (15 days ago)
- Last Synced: 2024-11-05T08:33:43.256Z (15 days ago)
- Language: Java
- Size: 144 KB
- Stars: 4
- Watchers: 11
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Comptus
[](https://www.apache.org/licenses/LICENSE-2.0)
[](https://github.com/innoq/comptus/issues)
[](https://github.com/innoq/comptus/actions/workflows/main.yml)
Comptus is a [Thymeleaf](https://www.thymeleaf.org) dialect for creating reuseable & encapsulated view components.
Like [ViewComponents](https://viewcomponent.org/) or [Angular components](https://angular.io/guide/component-overview) Comptus uses real Java classes to represent a component. Each time a component is used anywhere a new instance of this class ist created and a component template is rendered based upon this instance.
## Getting started
All you have to do is registering Comptus is your Spring Boot Application by doing something like this:
```java
@SpringBootApplication
public class ThymeleafComptusApplication {
@Bean
public ComptusDialect comptusDialect() {
return new ComptusDialect("com.name.of.your.compontents.package");
}
}
```
## Defining a component
A comptus component consists of two parts, a java class which extends
`com.innoq.comptus.core.Component` and a HTML template.
E.g. a `Button` component would be based upon the following class:
```java
package com.name.of.your.compontents.package;
public class Button extends com.innoq.comptus.core.Component {
public Button(ComponentContext context) {
super(context);
}
}
```
There also needs to be a Thymeleaf template which is rendered each time the component is used.
The Button's template should be placed under `/resources/templates/components/button.html` and could look like this:
```html
```
## Using components
Now you can use `` everywhere in your thymeleaf templates like this:
```html
Click me!
```
This will produce the following HTML:
```html
Click me!
```
## Methods and attributes
Now let's think about providing data to your component from the outside. Maybe we want to style a button
based upon it's "styling" like `Click me!`.
You can access these attributes for your component e.g. inside of your Button's constructor:
```java
private String styling;
public Button(ComponentContext context) {
super(context);
styling = stringAttribute("styling").orElse(null);
}
```
Now we'll have to use this information to render different HTML in our component template.
This could be done by making the instance variable `styling` a `public` field.
But this could also be done by providing methods in your component's class:
```
public String getClassNames() {
return "my-button %s".formatted("cta".equals(styling) ? "primary" : "default");
}
```
and calling this method from your component template:
```html
```
### Complex attributes
The `th:` attribute based approach doesn't work when you want to pass other objects from your view model to your component. So `` won't work since `th:*` would convert everything `toString()` at the end and all your component would see is a String.
So Comptus also defines the `co:*` attributes on all `` elements like:
```
```
Now you can access your object inside your component using:
```
MySpecialPOJO myData = attribute("my-data", MySpecialPOJO.class).orElse(null);
```
## Slots
TBD (see [src/test/resources/templates/slots.html](src/test/resources/templates/slots.html))
## Context
TBD (see [src/test/resources/templates/context.html](src/test/resources/templates/context.html))
## License
comptus is Open Source software released under the
[Apache 2.0 license](http://www.apache.org/licenses/LICENSE-2.0.html).