Can I create GWT Widget in javascript code?

[Zhang Alex]

For example:

 I have a vue app and classic gwt application,  The gwt application have lot of module .

but I only want to one module (eg: A query UI) integration  to my vue app using js

How can I done this?

Tks.

[lofid...@gmail.com]

Never wrap a Widget with JsInterop before... but just like in this article I wrapped a Calculator with JsInterop so that afterwards I could use it from JavaScript.

https://bit.ly/WebJavaStory

Did you try to wrap your Widget with JsInterop?

[Zhang Alex]

since now not yet!

I have a large application build with gwt 2.8 + Gxt

recently, other company need integration  some UI  into it's web application, eg:  div

Does JsInterop suitable my Scene

Thank for your example case

[Boris Brudnoy]

Would vue-gwt (https://github.com/VueGWT/vue-gwt) help your scenario?

Boris Brudnoy

Web Software Engineer | LinkedIn | StackOverflow

I created RecipeLot.com, a companion for culinary enthusiasts. Check it out.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit/29710f11-149d-4eae-8915-54010c0586e7n%40googlegroups.com.

[Andrea Stocchero]

Charba is a library which is wrapping CHART.JS to provide charts in GWt and J2Cl appliation and for GWT a chat can be a widget. Almost everything by JSINTEROP.

https://github.com/pepstock-org/Charba/tree/master/src/org/pepstock/charba/client/gwt/widgets

https://github.com/pepstock-org/Charba

[Thomas Broyer]

I would:

1. create a new *.gwt.xml with a new EntryPoint that won't launch the GWT app but instead expose a function (using JsInterop) to "run" your module
2. that function would use receive an element ID and use RootPanel.get(id) to put the GWT UI inside (that's not the only way, but definitely the easiest); ideally it would also return a function that you would call from Vue at "unmount", but could instead return the RootPanel so it could be passed to another function exposed by the module's onModuleLoad.
3. the "unmount" callback would simply call RootPanel.detachNow(rootPanel)

That way, the Vue app could actually load the GWT module immediately, but then only use it by calling its exposed function when it needs to display the GWT module; and when it no longer needs it, it should properly "detach" it.

[lofid...@gmail.com]

I build a simple example: https://github.com/lofidewanto/gwt-widget-jsinterop

I also found some answer in StackOverflow but it's all Java based (see the README above). What I understood is that the Widget should be called from a pure JS (VueJS or whatever JS).

• Calculator.java -- Composite Widget
• JS uses the Calculator: testcalculator-nowait.js

I use ScriptInjector to inject testcalculator-nowait.js. 

If I tried to use this JS testcalculator-withwait.js directly in index.html it seems that it cannot find the Calculator class. I have the feeling that the Calculator JsInterop hasn't been loaded but the testcalculator-withwait.js already running. Using ScriptInjector makes this possible (testcalculator-nowait.js) but I don't think, that this was the question.

Maybe Thomas could check, I'm not sure how to "wait" in JS until the JsInterop class is loaded... 

Cheers,

Lofi

[lofid...@gmail.com]

OK, it's working now with: setTimeout

https://github.com/lofidewanto/gwt-widget-jsinterop/blob/main/src/main/java/com/github/lofi/public/testcalculator-withwait.js

Now you can see in the example how to call your Widget from JavaScript... Just simple as creating that object and use as you wish...

var calculator = new Calculator("From JS withwait");
element.appendChild(calculator.getAsElement());

Cheers,
Lofi

[Zhang Alex]

Expose GWT widget also work same way?
 Using your project pom.xml can''t package , like this:

"

https://raw.githubusercontent.com/intendia-oss/rxjava-gwt/mvn-repo/org/junit/platform/junit-platform-launcher/1.6.2/junit-platform-launcher-1.6.2.jar 404 

"

Tks.

[lofid...@gmail.com]

Hmm... cannot see what do you mean about expose?

[Zhang Alex]

Sorry Let explain more detail.

In your example, I can access exposed java class (Calculator) and call function calculateSum, but it's common function not contain any gwt UI widget

Does export gwt UI module also work by use same way?

Tks

lofid...@gmail.com <lofid...@gmail.com> 于2021年3月3日周三 下午4:44写道：

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit/08ac0642-7109-46dd-b2d1-fd06b3907bc3n%40googlegroups.com.

[Zhang Alex]

Yes, It could be ok. 

I will try it later. 

Thank you. Regards

Thomas Broyer <t.br...@gmail.com> 于2021年3月3日周三 上午2:36写道：

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit/b828a4d6-8cec-4b43-a80c-bb1ec1e22250n%40googlegroups.com.

[lofid...@gmail.com]

The Calculator in my example above is a GWT Widget ;-) See: https://github.com/lofidewanto/gwt-widget-jsinterop/blob/main/src/main/java/com/github/lofi/client/Calculator.java

I made a new example here: https://github.com/lofidewanto/gwt-widget-jsinterop

So this doesn't have anything to do with the Calculator in my article ;-) Sorry for the name maybe I need to rename it to CalculatorComposite ;-)

As you can see here, I append the Composite into a node in JS (as Element):

var calculator = new Calculator("From JS withwait");
element.appendChild(calculator.getAsElement());

See https://github.com/lofidewanto/gwt-widget-jsinterop/blob/main/src/main/java/com/github/lofi/public/testcalculator-withwait.js

Just checkout the example https://github.com/lofidewanto/gwt-widget-jsinterop and run it... you'll see that I add Widget into the HTML with JS...

Cheers,

Lofi

[Zhang Alex]

Oh. Tks. 

I see it. 

Awesome project, You should publish a article for this knowledge.

lofid...@gmail.com <lofid...@gmail.com> 于2021年3月3日周三 下午5:11写道：

To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit/186fceea-f903-4f90-92ac-812569bd99ean%40googlegroups.com.

[lofid...@gmail.com]

;-)

Thanks, I'll try...

Cheers,
Lofi