Re: A simple Wicket component to render a Vue app

[Andrea Del Bene]

Thank you Kent!

On Sat, 20 Jan 2024, 12:31 Ernesto Reinaldo Barreiro, 
wrote:

> Thanks for sharing!
>
> On Sat, Jan 20, 2024 at 12:49 AM Kent Tong  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.
> > How to use
> >
> > Suppose that you want a Vue app on an HTML page like below:
> >
> > https://.../vue.js";>
> > 
> > 
> > var app = Vue.createApp({
> > data() {
> > return {a: 4, b: "Hi"};
> > },
> > template: `{{a}} {{b}}`,
> > methods {
> > m1() {
> > console.log(this.a);
> > }
> > },
> > });
> > app.mount('#app1')
> > 
> >
> > 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:
> >
> > 
> >com.ttdev
> >wicket-vue-app-core
> >1.0.2
> > 
> >
> > Your Wicket page should be like:
> >
> > import com.ttdev.WicketVueApp;
> > public class GetStartedDemo extends WebPage {
> >   public GetStartedDemo() {
> > HashMap 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:
> >
> > 
> >{{a}} {{b}}
> >
> > The WicketVueApp component will generate the desired HTML and js code
> > inside the  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:
> >
> > 
> >{{a}} {{b}}
> >
> > 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 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 > 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
>

Re: A simple Wicket component to render a Vue app

[Ernesto Reinaldo Barreiro]

Thanks for sharing!

On Sat, Jan 20, 2024 at 12:49 AM Kent Tong  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.
> How to use
>
> Suppose that you want a Vue app on an HTML page like below:
>
> https://.../vue.js";>
> 
> 
> var app = Vue.createApp({
> data() {
> return {a: 4, b: "Hi"};
> },
> template: `{{a}} {{b}}`,
> methods {
> m1() {
> console.log(this.a);
> }
> },
> });
> app.mount('#app1')
> 
>
> 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:
>
> 
>com.ttdev
>wicket-vue-app-core
>1.0.2
> 
>
> Your Wicket page should be like:
>
> import com.ttdev.WicketVueApp;
> public class GetStartedDemo extends WebPage {
>   public GetStartedDemo() {
> HashMap 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:
>
> 
>{{a}} {{b}}
>
> The WicketVueApp component will generate the desired HTML and js code
> inside the  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:
>
> 
>{{a}} {{b}}
>
> 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 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 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

Re: wicket 10 production ready plan

[Thies Edeling]

Great work, thanks Martin and the rest of the team!

Thies

On Wed, Jan 10, 2024, 07:29 Martin Grigorov  wrote:

> Hi,
>
> We work on the non-technical tasks (press release, announcement, etc.).
> IMO it should be released in the next few weeks!
>
> Martin
>
> On Wed, Jan 10, 2024 at 7:13 AM any sdk  wrote:
>
> > Hello wicket team,
> >
> > May I ask you when the wicket 10 production ready version will be
> released?
> >
> >
> >
> https://stackoverflow.com/questions/77790782/apache-wicket-10-production-release-date
> >
>