| Timestamp | -User | -Joke | -
|---|---|---|
| {joke.timestamp} | -{joke.fullJoke} | -
@${bean.scope.simpleName}
- ${bean.nonDefaultQualifiers.map(qualifier =>
- html`${this._qualifierRenderer(qualifier)}`
- )}
- ${bean.providerType.name}
- ${bean.declaringClass.simpleName}.${bean.memberName}()`
- : html`${bean.memberName}`
- }
- `;
- }
-
- _interceptorsRenderer(bean) {
- if (bean.interceptors && bean.interceptors.length > 0) {
- return html`${interceptor.interceptorClass.name}
- ${qualifier.simpleName}`;
- }
-
- _camelize(str) {
- return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
- if (+match === 0)
- return "";
- return index === 0 ? match.toUpperCase() : match.toLowerCase();
- });
- }
-}
-customElements.define('qwc-arc-beans', QwcArcBeans);
-----
-<1> Import the Vaadin component you want to use
-<2> You can also import other functions if needed
-<3> There are some internal UI components that you can use, described below
-
-===== Using internal UI components
-
-Some https://github.com/quarkusio/quarkus/tree/main/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui[internal UI components] (under the `qui` namespace) are available to make certain things easier:
-
-- Card
-- Badge
-- Alert
-- Code block
-- IDE Link
-
-====== Card
-
-Card component to display contents in a card
-
-[source,javascript]
-----
-import 'qui-card';
-----
-
-[source,html]
-----
-Badges wrap the Vaadin theme in a component. - See https://vaadin.com/docs/latest/components/badge for more info. -
-alert with markup alert with markup alert with markup alert with markup 
+cardPageBuildItem.addPage(Page.rawDataPageBuilder("Raw data") // <1>
+ .icon("font-awesome-brands:js")
+ .buildTimeDataKey("someKey")); // <2>
----
+<1> Use the `rawDataPageBuilder`.
+<2> Link back to the key used when you added the build time data in `addBuildTimeData` on the Page BuildItem.
-Refer to the xref:all-config.adoc#quarkus-vertx-http_quarkus.http.non-application-root-path[Quarkus Vertx HTTP configuration reference]
-for details on how the non-application root path is configured.
+That will create a link to a page that renders the raw data in json:
-== Template and styling support
+image::dev-ui-raw-page-v2.png[alt=Dev UI raw page,role="center"]
-Both the `embedded.html` files and any full page you add in `/dev-templates` will be interpreted by
-xref:qute.adoc[the Qute template engine].
+==== Table data
-This also means that you can xref:qute-reference.adoc#user_tags[add custom Qute tags] in
-`/dev-templates/tags` for your templates to use.
+You can also display your Build time data in a table if the structure allows it:
-The style system currently in use is https://getbootstrap.com/docs/4.6/getting-started/introduction/[Bootstrap V4 (4.6.0)]
-but note that this might change in the future.
+[source,java]
+----
+cardPageBuildItem.addPage(Page.tableDataPageBuilder("Table data") // <1>
+ .icon("font-awesome-solid:table")
+ .showColumn("timestamp") // <2>
+ .showColumn("user") // <2>
+ .showColumn("fullJoke") // <2>
+ .buildTimeDataKey("someKey")); // <3>
+----
+<1> Use the `tableDataPageBuilder`.
+<2> Optionally only show certain fields.
+<3> Link back to the key used when you added the build time data in `addBuildTimeData` on the Page BuildItem.
+
+That will create a link to a page that renders the data in a table:
-The main template also includes https://jquery.com/[jQuery 3.5.1], but here again this might change.
+image::dev-ui-table-page-v2.png[alt=Dev UI table page,role="center"]
-=== Accessing Config Properties
+==== Qute data
-A `config:property(name)` expression can be used to output the config value for the given property name.
-The property name can be either a string literal or obtained dynamically by another expression.
-For example `{config:property('quarkus.lambda.handler')}` and `{config:property(foo.propertyName)}`.
+You can also display your build time data using a qute template. All build time data keys are available to use in the template:
-Reminder: do not use this to retrieve raw configured path values. As shown above, use `{config:http-path(...)}` with
-a known route configuration key when working with resource paths.
+[source,java]
+----
+cardPageBuildItem.addPage(Page.quteDataPageBuilder("Qute data") // <1>
+ .icon("font-awesome-solid:q")
+ .templateLink("qute-jokes-template.html")); // <2>
+----
+<1> Use the `quteDataPageBuilder`.
+<2> Link to the Qute template in `/deployment/src/main/resources/dev-ui/`.
-== Adding full pages
+Using any Qute template to display the data, for example `qute-jokes-template.html`:
-To add full pages for your Dev UI extension such as this one:
+[source,html]
+----
+| Timestamp | +User | +Joke | +
|---|---|---|
| {joke.timestamp} | +{joke.fullJoke} | +
@${bean.scope.simpleName}
+ ${bean.nonDefaultQualifiers.map(qualifier =>
+ html`${this._qualifierRenderer(qualifier)}`
+ )}
+ ${bean.providerType.name}
+ ${bean.declaringClass.simpleName}.${bean.memberName}()`
+ : html`${bean.memberName}`
+ }
+ `;
+ }
+
+ _interceptorsRenderer(bean) {
+ if (bean.interceptors && bean.interceptors.length > 0) {
+ return html`${interceptor.interceptorClass.name}
+ ${qualifier.simpleName}`;
+ }
+
+ _camelize(str) {
+ return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
+ if (+match === 0)
+ return "";
+ return index === 0 ? match.toUpperCase() : match.toLowerCase();
});
- });
- {/script}
- {#title}Cache{/title}// <4>
- {#body}// <5>
- | Name | -Size | -
|---|---|
| - {cacheInfo.name} - | -- - | -
Badges wrap the Vaadin theme in a component. + See https://vaadin.com/docs/latest/components/badge for more info. +
+alert with markup alert with markup alert with markup alert with markup