Hi,
I have written a simple Wicket component that allows you to easily render a
Vue 3 app in Java. This component is implemented in about just 130 lines of
code (including Java, HTML and js), so there is no risk in using it.
<https://github.com/freemant2000/WicketVueApp#how-to-use>How to use
Suppose that you want a Vue app on an HTML page like below:
<script src="https://.../vue.js";></script>
<div id="app1"></div>
<script>
var app = Vue.createApp({
data() {
return {a: 4, b: "Hi"};
},
template: `<span @click='m1()'>{{a}} {{b}}<span>`,
methods {
m1() {
console.log(this.a);
}
},
});
app.mount('#app1')
</script>
And you want to generate this from a Wicket page. To do that, you can use
the WicketVueApp component provided by this project.
First, add the dependency:
<dependency>
<groupId>com.ttdev</groupId>
<artifactId>wicket-vue-app-core</artifactId>
<version>1.0.2</version>
</dependency>
Your Wicket page should be like:
import com.ttdev.WicketVueApp;
public class GetStartedDemo extends WebPage {
public GetStartedDemo() {
HashMap<String, Object> state = new HashMap<>();
state.put("a", 4);
state.put("b", "Hi");
WicketVueApp vwa=new WicketVueApp("wva",
new Model(state),
"m1() {console.log(this.a);}");
add(vwa);
}
}
The template is provided in the HTML markup:
<html><body><div wicket:id="wva">
<span @click='m1()'>{{a}} {{b}}<span></div></body></html>
The WicketVueApp component will generate the desired HTML and js code
inside the <div> automatically. Now, run your Wicket webapp as usual and
you will see the Vue app working on your Wicket page.
Handling Vue events in Wicket
In the example above, suppose that you want to handle the click on the
server side (Wicket), all you need to do is to call a js method named "cb"
(standing for "call back") as shown below:
<html><body><div wicket:id="wva">
<span @click='cb()'>{{a}} {{b}}<span></div></body></html>
This cb method will use Wicket's ajax mechanism to send the request to the
Wicket side, where you can handle it by overriding the OnVueEvent method:
public class GetStartedDemo extends WebPage {
public GetStartedDemo() {
HashMap<String, Object> state = new HashMap<>();
state.put("a", 4);
state.put("b", "Hi");
WicketVueApp vwa=new WicketVueApp("wva",
new Model(state)) {
@Override
public void onVueEvent(AjaxRequestTarget target, Map<String,
Object> data) {
state.put("b", state.get("b")+"!");
}
};
add(vwa);
}
}
The cb method will automatically send the current state of the Vue app back
to the WicketVueApp component on server, which will use the data to update
itself own state, before calling its onVueEvent method. This way you will
have access to the latest state of the Vue app in the browser.
In this method you can further modify the state, which will be sent back to
the browser automatically to refresh the Vue app. Here, in this example,
the "b" variable's value will have an exclamation mark added to it.
Note that the AjaxRequestTarget one of the parameters, you can add other
ajax Wicket components to the target to have them refreshed.
<https://github.com/freemant2000/WicketVueApp#handling-vue-events-in-wicket>
--
Kent Tong
IT author and consultant, child education coach
