l split my GWT code in different different modules like
PrintPermit.gwt.xml
EmployeeResponse.gwt.xml
Rejected.gwt.xml
and every module has its own entry point class
in my HTML host page I am calling script like
ae.init.EmployeeResponse.nocache.js
I have a menu like
Print Application
Reject Application
New application
whenever user will click on new application default new application will open
as I declare EmployeeResponse.nocache.js statically in my HTML host page.
now I want to call other modules on click button print and reject button
how can i call nocache js for print and reject modules. is there any way to dynamic call.
please help me guys.
Here's how I've done it in the past:
First of all, in the module you want to export, you need to make sure that the code you're going to export doesn't end up obfuscated. This can be accomplished with the liberal use of #JsType; this is the new way of exporting JS, available in GWT 2.8 (as opposed to JSNI).
Your module's entry point onModuleLoad can be empty; it doesn't need to do anything.
Include your JS in the HTML you want to use (maybe the same page as your "main" module)
Check JSInterop documentation (perhaps the one available here) on how you can use native JS in your GWT app (because now, your GWT module became native JS). Import the classes via JSInterop from your library, and use them.
Please be aware of the async nature of the GWT JS loading; your library will be loading in an async manner, just like any JS application (and therefore, it won't be available immediately when your page loads). To overcome this, I've placed a call to a native JS function in my library's onModuleLoad function (i.e. to make sure you notify any potential listeners that the code has loaded; because when onModuleLoad runs, the code surely loaded).
There is a example of an InterAppEventBus:
https://github.com/sambathl/interapp-eventbus
which shows the communication between two GWT applications.
I have adopted it and replaced JSNI with Elemental2 and WebStorage:
https://github.com/FrankHossfeld/InterAppEventBus
Hope that helps.
You can achieve this through separate Html file for each module.
So first of all create separate html for each application e.g. PrintPermit.html and specify corresponding nocache.js in each html.
then on your buttons in menu, add click handlers and in each on click load a corresponding html through Window.open()
e.g. for PrintPermit,
printPermitButton.addClickHandler(new ClickHandler{
#Override
public void onClick(ClickEvent arg0) {
String s = GWT.getHostPageBaseURL() + "PrintPermit.html";
Window.open(s, "PrintPermit", "");
}
});
Please note the window.open will open in new tab in browser, you can also use gwt iframe to open html in same browser page.
Each module will have corresponding nocache.js and will be loaded through html using Window.open()
Related
I am hoping to confer on a strategy for a flutter web app (as can ignore mobile cases here) to get chrome extension info for a Polkadot.js wallet from the Polkadot browser extension.
My first thought is to use dart's JS library and use the Polkadot extension JS package and then try and pull the info from there. However, I'm not sure how to properly use this in flutter as it is a whole package full of dependencies, not just a single JS file. Also it is in TS not JS. Any thoughts here?
Eg., I need a JS file to be able to call this; and for flutter to in turn call the JS file:
import {
web3Enable,
} from '#polkadot/extension-dapp';
By writing out a "bridging" layer, you can do it easily.
Firstly, create a normal javascript (or typescript) application (nothing related to Flutter). You should be able to happily use the polkadot lib in your js/ts code without any problem. You may need to learn a bit about how to develop js code normally (e.g. you can depend on polkadot using npm, etc).
One small thing is that, you should "expose" some object publicly in your js/ts code. For example, your code may look like window.myFancyFunction = function() { call_some_polkadot_function(); }. Of course you can do more things like exposing other functions/objects/...
Then, you can bundle this normal js/ts application into a .js file. This is still very normal for js/ts developers and should have nothing special to deal with here, and you still do not need to touch Flutter at this stage.
Next, load this single-filed .js file when you are loading your Flutter Web application. You may simply do this by editing your Flutter Web's html file and add <script src="my_single_filed_js_mentioned_above.js" />. Notice that, when loading this script, it simply sets window.myFancyFunction and does not do anything more. Still very trivial here, should have no problem.
Lastly, in your Flutter Web code, i.e. Dart code, call that window.myFancyFunction function. For example, Flutter Web : How to run javascript using dart js says you can do import 'dart:js' as js; js.context.callMethod('myFancyFunction', ['some arguments']);
Working in Wicket 6. My page includes a javascript reference in the html to a third party library. I have a block of additional standard utils that I include via JavaScriptHeaderItem in a renderHead in the Behavior class from a custom component.
Now, that same component needs to write some specific javascript code inline to call methods from those two includes. The problem is that the code is running before even simple variables within those includes are loaded. Wicket puts both ABOVE the 3rd party library in the header.
I want to render the code in a tag within the body to make sure that both have at least loaded before my code runs. The third party library has a DomReady event, but that at least requires the base variable to be defined.
I gather that I am meant to use FilteringHeaderResponse or HeaderResponseContainer somehow, but the examples/javadocs aren't very clear to me. Let's say my inline javascript was meant to be:
String js = "alert('Hello '" + userName + ");";
from java. It isn't, it's more complicated than that, but if it were, how would I, from a FormComponentPanel, render this inline javascript? And how can I dynamically include my custom js, but make sure it renders BELOW the 3rd party js in the header, but before my inline script runs?
I ended up using:
response.render(OnDomReadyHeaderItem.forScript(writeGridJS()));
Put your js into a file like my.js and make it a ResourceReference. Then add the libraries your code depends on as dependencies to this ResourceReference. here you got two good links on that:
http://wicketinaction.com/2012/07/wicket-6-resource-management/
http://wicket.apache.org/guide/guide/chapter14.html#chapter14_5
I have a page slider type widget from a third party that is pretty standard in that it runs some jquery code (inside an init function provided by the widget) on the HTML in your document looking for the classes of interest.
My issue is that I am using GWT so my HTML is being generated and then inserted in to the page by the GWT javascript file. The HTML being inserted has all the proper tags for the slider widget to work. So after it is added (to the DOM) I need to run the init js code so that the slider works as expected. I created a JSNI to make the call:
private native void initSlider() /*-{
Index.initLayerSlider();
}-*/;
I load Index in the head of the HTML file before the nocache.js GWT file, but I get the javascript console error when I load the site: Uncaught ReferenceError: Index is not defined so I tried
private native void initSlider() /*-{
jQuery(document).ready(function() {
Index.initLayerSlider();
});
}-*/;
and jQuery is also loaded in the head of my HTML file but I get the similar error: Uncaught ReferenceError: jQuery is not defined
How can I call this function from an external .js file from GWT? I guess I need to do something to make sure the browser has loaded and ran the .js file before GWT runs, or have GWT pause when it gets there until the .js file has been loaded. Or maybe I should approach this problem differently?
I would prefer to not have to make any modifications to the third party widget, but would be willing to make small ones if needed/possible. It has been obfuscated so it is very difficult to read.
call javascript from GWT need start with $wnd
see detail http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html
private native void initSlider() /*-{
$wnd.Index.initLayerSlider();
}-*/;
According to this FAQ, when GWT bootstraps, onModuleLoad is supossed to run before HTML body's onload event. The process detailed within that FAQ works like this:
1. The HTML document is fetched and parsing begins.
...
9. externalScriptOne.js completes. The document is ready, so onModuleLoad() fires.
...
12. body.onload() fires, in this case showing an alert() box.
But in my tests, i have checked that it doesnt work this way. Or at least not in every browser (oddly, Google Chrome in particular doesn't stick to this kind of behaviour). For example, I have this little test involving onModuleLoad and body.onLoad:
public void onModuleLoad() {
runTestFunction();
}
private native void runTestFunction() /*-{
console.log("GWT's onModuleLoad");
$wnd.loaded=true;
}-*/;
And:
<body onload="console.log('body.onLoad');if(loaded!=null) console.log('loaded var is set');">
If i launch firefox, and run this example, the console will show this:
GWT's onModuleLoad
body.onLoad
loaded var is set
But in Chrome:
body.onLoad
Uncaught ReferenceError: loaded is not defined
GWT's onModuleLoad
In the latter, onModuleLoad runs the last, thus "loaded" var is not yet available and body.onLoad code cant use it.
And what Im trying to achieve? I want some handwritten Javascript that runs within body.onload to interact with my GWT code. In this example i use this dummy "loaded" var, but in the future it should be able to call GWT functions written in Java. The problem is that i need to make sure that onModuleLoad runs first so it can export the variables and methods for javascript to access them.
So, what am i missing? Is this behaviour as unreliable as it looks like, or am i doing something wrong?
PS: i have a plan B to achieve this which is proved to work, but first i want to make sure that it isnt possible to do it this way since this should be the preferred method.
First, the latest version of the doc is at http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideBootstrap
And it says (even the GWT 1.5 version you were looking at) that "onModuleLoad() can be called at any point after the outer document has been parsed", which includes before and after window.onload.
As the doc says, GWT loads your code in an iframe (used here as a sandbox), which is asynchronous; so your code loads when both the iframe and the "body" are loaded. Depending on the time needed to load the iframe, that can be before or after window.onload (in the example, they assume it loads right away, which could be the case when the *.cache.* file is effectively in the browser's cache).
But the rule of thumb is that GWT tries hard (at least the built-in linkers) to make things start asynchronously so that it doesn't break loading of other external resources (stylesheets and images, for instance). That implies that it cannot be guaranteed to run before the window.onload (they could have guaranteed to run after window.onload, but why wait?)
Im new about this technology, but I would like to know if is possible to create new object (html elements, such div/span/and so on...) dinamically on server and send it to the client, or if i can just load the ones made on client-side when i develop it in the application.
I don't ask how to do it (i think its a delicate argument), but if I can, and (if yes) where i can get some stuff/example/tutorial to do this.
Example
What i usually do :
...
public void onSuccess(Boolean result) {
if(result) {
myFunction();
}
}
...
myFunction() {
InlineLabel label=new InlineLabel();
this.add(label)
}
What im looking for :
...
public void onSuccess(InlineLabel result) {
this.add(result)
}
So, i don't need to load in advance the Object, but load them only if i click on some button (or if i perform an action). This will save a lot of code (that is inutil, if i don't do any action) loaded (as JavaScript) on the client.
As usual, thanks for your time!
GWT does not support the pattern you showed, but you can achieve a similar effect with "code splitting": read http://code.google.com/webtoolkit/doc/latest/DevGuideCodeSplitting.html
With code splitting, the client only downloads the script it needs right away (configured by the developer). If, for example, the user navigates to a more complex area of the UI that requires more widgets, additional code will be downloaded.
I'm not entirely sure I understand your question, but please feel free to amend your question or post a comment if I've missed the mark.
The host page
A GWT app is loaded in the following (simplified) process:
A host page (HTML) is loaded
A bootstrapping script is loaded
A compiled app script is loaded
The host page can contain any HTML you want. The only requirement is that you include a <script> element that loads the GWT bootstrapping script.
As a result, you can have the server return a page that contains any server-generated markup you like.
Server-rendered HTML at runtime
Once your app is running, you can send off asynchronous requests in your code to retrieve arbitrary data from the server. One option is to retrieve server-generated HTML and insert it into your application.
For this option, you'll want to instantiate an HTML widget, then use its setHTML method to insert the server-generated markup into the widget.
Client-generated
As an alternative, you can retrieve structured data from the server via GWT RPC. Objects created on a Java-based server are serialised by GWT on the server and deserialised on the client back into regular objects. You can then pull data out of these objects using accessor methods (getName, getId, etc.). At this point, you have several options:
Generate some HTML using StringBuilder and the like, then use setHTML on an HTML widget.
Generate DOM elements with the DOM class
Set the data into widgets and add them to panels or the root panel.