jwebmp-vertx
Portable connector between JWebMP and Vert.x 5 powered by GuicedEE. Provides automatic page routing, AJAX event pipeline, data component servlet, CSS endpoint, site-loader script, WebSocket broadcasting via event bus, user-agent detection, and call-scope integration. Use when working with JWebMP Vert.x integration, HTTP routing, AJAX handling, WebSocket communication, or building reactive web applications with JWebMP.
Best use case
jwebmp-vertx is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Portable connector between JWebMP and Vert.x 5 powered by GuicedEE. Provides automatic page routing, AJAX event pipeline, data component servlet, CSS endpoint, site-loader script, WebSocket broadcasting via event bus, user-agent detection, and call-scope integration. Use when working with JWebMP Vert.x integration, HTTP routing, AJAX handling, WebSocket communication, or building reactive web applications with JWebMP.
Teams using jwebmp-vertx should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/jwebmp-vertx/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How jwebmp-vertx Compares
| Feature / Agent | jwebmp-vertx | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Portable connector between JWebMP and Vert.x 5 powered by GuicedEE. Provides automatic page routing, AJAX event pipeline, data component servlet, CSS endpoint, site-loader script, WebSocket broadcasting via event bus, user-agent detection, and call-scope integration. Use when working with JWebMP Vert.x integration, HTTP routing, AJAX handling, WebSocket communication, or building reactive web applications with JWebMP.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# JWebMP Vert.x
Portable connector between JWebMP and Vert.x 5, powered by GuicedEE.
## Core Features
- **Automatic Page Routing** — `@PageConfiguration` classes auto-registered
- **AJAX Event Pipeline** — Fully reactive request handling
- **Data Component Servlet** — Serves `IDataComponent` as JSON
- **CSS Endpoint** — On-demand CSS rendering
- **Site-Loader Script** — JS bootstrap template
- **WebSocket Broadcasting** — Event bus bridge (direct or STOMP)
- **User-Agent Detection** — Per call-scope via UADetector
- **Call-Scope Integration** — Every handler enters `CallScope`
## Quick Start
### 1. Annotate a Page
```java
@PageConfiguration(url = "/")
public class HomePage extends Page<HomePage> { }
```
### 2. Start GuicedEE
```java
IGuiceContext.instance().inject();
// Routes registered automatically
```
### 3. Routes Created
- `GET /` — serves `HomePage`
- `GET /jwscr` — site-loader script
- `POST /jwajax` — AJAX event receiver
- `GET /jwdata` — data component endpoint
- `GET /jwcss` — CSS endpoint
## HTTP Routes
| Route | Method | Handler | Purpose |
|---|---|---|---|
| `@PageConfiguration.url()` | GET | `configurePageServlet` | Renders annotated `IPage` as HTML |
| `/jwajax` | POST | `configureAjaxReceiveServlet` | Processes AJAX event calls |
| `/jwdata` | GET | `configureDataServlet` | Serves `IDataComponent` JSON |
| `/jwcss` | GET | `configureCSSServlet` | Renders page-level CSS |
| `/jwscr` | GET | `configureInternalDataServlet` | Serves site-loader JS |
## Request Lifecycle
```
HTTP Request
└─ Vert.x Router
└─ Route handler
└─ CallScope enter
├─ CallScopeProperties populated
│ ├─ RoutingContext
│ ├─ HttpServerRequest
│ ├─ HttpServerResponse
│ └─ Stream ID
├─ Handler logic (render/AJAX/data/CSS/script)
└─ CallScope exit
```
## AJAX Flow (Reactive)
```
POST /jwajax
└─ bodyHandler (event loop)
├─ Deserialize AjaxCall from JSON
├─ Resolve event class → IEvent
├─ Run AjaxCallInterceptors
└─ triggerEvent.fireEvent(call, response) → Uni
├─ onItem → write JSON response
└─ onFailure → structured error JSON
```
### AJAX Example
```java
public class ButtonClickEvent extends OnClickAdapter {
@Override
public void onClick(AjaxCall<?> call, AjaxResponse<?> response) {
// Process event
String param = call.getParameters().get("key");
// Update DOM
response.addComponent(new Div<>().setText("Result: " + param));
}
}
```
## WebSocket Broadcasting
Two `IGuicedWebSocket` implementations:
### Direct Event Bus
```java
public class VertXEventBusBridgeIWebSocket implements IGuicedWebSocket {
@Override
public void broadcastMessage(String groupName, Object message) {
vertx.eventBus().publish(groupName, message);
}
}
```
### STOMP Event Bus (Default)
```java
public class VertXStompEventBusBridgeIWebSocket implements IGuicedWebSocket {
@Override
public void broadcastMessage(String groupName, Object message) {
vertx.eventBus().publish("/toStomp/" + groupName, message);
}
}
```
Bound by default in `JWebMPVertxBinder`.
## User-Agent Detection
Call-scoped `ReadableUserAgent`:
```java
@Inject
private ReadableUserAgent userAgent;
public void process() {
String browser = userAgent.getName();
String version = userAgent.getVersionNumber().toVersionString();
String os = userAgent.getOperatingSystem().getName();
}
```
## Data Components
Serve dynamic data as JSON:
```java
public class UserDataComponent implements IDataComponent {
@Override
public Object renderData() {
return userRepository.findAll();
}
}
```
Access via: `GET /jwdata?component=UserDataComponent`
## CSS Endpoint
Render page-level CSS on demand:
```java
@PageConfiguration(url = "/dashboard")
public class DashboardPage extends Page<DashboardPage> {
public DashboardPage() {
Div<?, ?, ?> container = new Div<>();
container.getCss()
.getBackground().setBackgroundColor$(ColourNames.AliceBlue);
getBody().add(container);
}
}
```
Access via: `GET /jwcss?page=DashboardPage`
## Site-Loader Script
Template-driven JS bootstrap at `/jwscr`:
```javascript
var JW_SERVER_ADDRESS = '${serverAddress}';
var JW_PAGE_CLASS = '${pageClass}';
var JW_USER_AGENT = '${userAgent}';
var JW_REFERRER = '${referrer}';
```
## Configuration
| Environment Variable | Default | Purpose |
|---|---|---|
| `BIND_JW_PAGES` | `true` | Enable/disable automatic page routing |
Disable page binding:
```bash
export BIND_JW_PAGES=false
```
## Call-Scope Properties
Every HTTP handler populates:
```java
@Inject
private CallScopeProperties properties;
public void process() {
RoutingContext ctx = properties.getRoutingContext();
HttpServerRequest req = properties.getRequest();
HttpServerResponse res = properties.getResponse();
String streamId = properties.getStreamId();
}
```
## Jackson Configuration
Vert.x `DatabindCodec` mapper aligned with GuicedEE:
- Quoted field names
- Single-quote tolerance
- Null handling
## Key Classes
- `JWebMPVertx` — Main module + `VertxHttpServerConfigurator`
- `JWebMPVertxBinder` — Binds `ReadableUserAgent`, `IGuicedWebSocket`, Jackson config
- `ReadableUserAgentProvider` — Call-scoped UA parser
- `VertXEventBusBridgeIWebSocket` — Direct event bus broadcasting
- `VertXStompEventBusBridgeIWebSocket` — STOMP-prefixed broadcasting
## JPMS Module
```java
module com.jwebmp.vertx {
requires transitive com.jwebmp.client;
requires transitive com.jwebmp.core;
requires transitive com.guicedee.vertx.web;
requires transitive com.guicedee.guicedinjection;
requires transitive com.guicedee.jsonrepresentation;
provides IGuiceModule with JWebMPVertx, JWebMPVertxBinder;
provides VertxHttpServerConfigurator with JWebMPVertx;
}
```
## Installation
```xml
<dependency>
<groupId>com.jwebmp</groupId>
<artifactId>jwebmp-vertx</artifactId>
</dependency>
```
## Error Handling
### InvalidRequestException
Structured error for invalid AJAX requests:
```json
{
"error": "Invalid request",
"message": "Component not found",
"code": 400
}
```
### Generic Errors
```json
{
"error": "Internal error",
"message": "Exception details",
"code": 500
}
```
## Common Patterns
### Custom Route
```java
public class CustomConfigurator implements VertxRouterConfigurator {
@Override
public void configureVertxRouter(Router router) {
router.get("/api/custom").handler(ctx -> {
ctx.response()
.putHeader("Content-Type", "application/json")
.end("{\"status\":\"ok\"}");
});
}
}
```
Register via `module-info.java`:
```java
provides VertxRouterConfigurator with CustomConfigurator;
```
### WebSocket Broadcasting
```java
@Inject
private IGuicedWebSocket webSocket;
public void notifyUsers(String message) {
webSocket.broadcastMessage("notifications", message);
}
```
### User-Agent Based Logic
```java
@Inject
private ReadableUserAgent userAgent;
public IPage<?> getPage() {
if (userAgent.getDeviceCategory() == DeviceCategory.SMARTPHONE) {
return new MobilePage();
}
return new DesktopPage();
}
```
## Dependencies
```
com.jwebmp.vertx
├── com.jwebmp.client
├── com.jwebmp.core
├── com.guicedee.vertx.web
├── com.guicedee.guicedinjection
├── com.guicedee.jsonrepresentation
├── io.vertx.core
├── io.vertx.web
└── net.sf.uadetector.core
```
## References
- Module: `com.jwebmp.vertx`
- Vert.x: 5.x
- Java: 25+
- License: Apache 2.0Related Skills
jwebmp-webawesome
WebAwesome icon integration for JWebMP — modern, open-source icon library. Provides 1,500+ icons with solid/regular styles, sizing, rotation, animation, and CSS utilities. Drop-in FontAwesome alternative with fresh designs. Use when working with WebAwesome icons, modern icon designs, or as FontAwesome alternative in JWebMP applications.
jwebmp-webawesome-pro
WebAwesome Pro integration for JWebMP with premium icons and features. Extends jwebmp-webawesome with additional styles, premium icons, and advanced features. Use when working with WebAwesome Pro icons or premium WebAwesome features in JWebMP applications.
jwebmp-weather-icons
Weather Icons font library for JWebMP providing weather icon fonts. Use when displaying weather-related icons.
jwebmp-waypoints
Waypoints jQuery plugin for JWebMP triggering functions when elements enter the viewport. Use when implementing scroll-based interactions and animations.
jwebmp-waves-effect
Waves material design ripple effect for JWebMP creating Material Design click ripples on elements. Use when adding Material Design interaction effects.
jwebmp-tsclient
TypeScript client generation for JWebMP plugins. Provides annotations and utilities for generating TypeScript interfaces, components, services, and modules from Java code. Supports @TsDependency, @TsDevDependency, @NgComponent, @NgDataService, @NgRestClient annotations. Use when creating JWebMP plugins that generate TypeScript code, defining npm dependencies, building Angular-integrated components, or generating typed Angular REST client services.
jwebmp-toastr
Toastr jQuery notification plugin integration for JWebMP displaying non-blocking toast notifications. Use when showing transient user notifications and alerts.
jwebmp-themify-icons
Themify Icons font library for JWebMP providing a comprehensive icon font collection. Use when adding Themify icons to projects.
jwebmp-skycons
Skycons animated weather icons for JWebMP creating beautiful animated SVG weather visualizations. Use when rendering weather data with animated icons.
jwebmp-session-storage
Browser Session Storage integration for JWebMP providing client-side temporary data storage for the browser session. Use when storing temporary user session data.
jwebmp-prism
Prism syntax highlighter integration for JWebMP providing powerful code highlighting with line numbers, copy button, and themes. Use when displaying highlighted code with advanced features.
jwebmp-prettify
Google Prettify syntax highlighter integration for JWebMP. Use when displaying and highlighting code snippets.