Thanks for sharing! On Sat, Jan 20, 2024 at 12:49 AM Kent Tong <kent.tong...@gmail.com> wrote:
> 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 > -- Regards - Ernesto Reinaldo Barreiro
