I am looking to compile my gwt application into a single, monolithic, cross-browser compatible .html file. Ultimately, I'm trying to design an Amazon mechanical turk template via gwt. These templates must be a single .html file, since they are hosted on Amazon's machines. The .html file can reference external sources, but via absolute address only since I have no control over the file hierarchy.
It does not concern me that the monolithic file will load slower than having separate files for each browser. I am developing a fairly simple web form containing only client-side code that will be seen by very few people. Therefore, speed and cross-browser correctness are not primary concerns.
I have found that by adding the following line to my MODULE_NAME.gwt.xml I can generate a single javascript file that works exclusively for a single browser (e.g. firefox as shown below):
<set-property name="user.agent" value="gecko">
I then embed the generated code into my .html file, and it works for the single browser specified. Unfortunately, when I try opening the .html file in other browsers, the gwt generated javascript does not load.
Is there a linker command that I can add to this file that will do the trick? I tried to invoke the SingleScriptLinker via:
<add-linker name="sso" />
but got the following error:
[ERROR] The module must have exactly
one distinct permutation when using
the Single Script Linker.
I also attempted to tweak the contents of the generated javascript files in order to make them compatible enough to embed in the .html file, but the javascript generated by gwt is too confusing (even in the detailed output mode). Is there a walk-through for how to do this?
I'm using the gwt eclipse plugin on OSX.
As luck would have it, I have found a workaround soon after posting my question:
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/79e9634110487490
In short, the answer is to use cross-site scripting.
Add the following line to MODULE_NAME.gwt.xml:
< add-linker name="xs" />
gwt will generate a MODULE_NAME.nocache.js file as well as some MD5.cache.js files (note the MD5 files end with .js, not .html).
Compile your application
Now, put all of these .js files on server A.
Modify your MODULE_NAME.html file to contain an absolute reference to MODULE_NAME.nocache.js on server A.
Upload MODULE_NAME.html to server B.
The cross-site linker makes everything work.
Related
I am new to web programming but have experience working on perl scripts that have to do with file processing. Recently got a copy of MVC project source code. As I am trying to come to terms with template files, control & view modules, one question that came across is:
I see the template file in .tt extension(mypage.tt), there is the control module in .pm extension(MyPage.pm)) containing handler function to call the template and call to process subroutine in the View module(View.pm). But how does it generate .pl or html. I can't seem to find a perl executable or html file in the project. What should i enter in my url under
localhost/myapp/....
to call execute the script
I have loaded the project in my local directory with apache & mod_perl installed. Would be helpful if someone can explain if i need to write a perl script to call the handler function in the .pm file and generate the html if that's not too much to ask for :).
You project, if it is really a mod_perl app will have Apache configuration that maps URLs to handler methods.
Template files with a .tt extension typically are from the Template Toolkit, and perform their generation step by calling a method called process() on an instance of Template.
So you need to find the Apache handlers. They will tell you which methods are running, and then you can read hose methods to see how the template toolkit is being employed to generate the HTML.
In Target 8: Define a Custom DOM Tag, the reader is told about custom DOM tags that can be created by extending other tags. A sample is described for an example called "x-converter" before listing the files as "These files implement the app:".
The three files are...
a drseuss.html file (not sure why there's a sudden deviation in the project name and the HTML file, as opposed to the matching names in previous tutorials...),
a converter-element.html file,
and a convertercomponent.dart file.
I tried creating a new application in the latest Dart editor, and replaced the default HTML file contents with that of drseuss.html, replaced the default dart file contents with that of convertercomponent.dart, and added converter-element.html file.
After fixing an include issue (the file from the tutorial refers to drseuss.css and not the default project name's CSS file), I only see the following in the Chromium browser.
As you can see, the element described in the tutorial (converter-element) doesn't show up. Why don't the files provided for the project result in what's shown in the tutorial?
For reference, here's what's shown in the tutorial.
Web UI requires the build.dart script which compiles the various components into the executable output HTML+Dart.
Take a look at the parent folder in the github src that you reference, and you will see the build.dart script.
In addition, you will need the pubspec.yaml from that folder, too, which includes web_ui package, which brings in the dwc tool(Dart Web Components compiler) used by build.dart.
Take a look at the article Tools for Web UI for more information about dwc and build.dart, and Target 6 - Getting Started with Web UI which covers similar ground, but in a tutorial format.
The compiled JavaScript output of a GWT application is divided into various files, for instance
*.cache.html
*.gwt.rpc
hosted.html
*.nocache.js
...
I know this is done with the purpose of minimizing the size of the JavaScript, which has to be downloaded by users. For instance so that a Firefox user does not have to load the JavaScript specifically compiled for IE6.
However, especially for small GWT applications it might often be faster to download a single file of say 500kb rather than make two sequential requests first for the 5kb *.nocache.js script and then for the rest of the app (cache.html files, etc.).
This leads me to the question: Is there any framework or procedure to bundle the output of the GWT compiler into a single JavaScript file?
First, you can merge all permutations in a single file by using so-called "soft permutations".
Then, you can inline your *.nocache.js into the HTML host page (e.g. using a JSP's #include directive) to cut one additional request (you might have to add a <meta name=gwt:property content='baseUrl=myapp'> where myapp is the subfolder where the .nocache. files are located).
AFAIK that's what Google are doing for their GWT apps.
Alternatively, you can run the permutation selection on the server-side if you can totally replace the selection script (*.nocache.js) with server-side content negotiation (based on User-Agent and Accept-Language request headers for instance) that can directly generates a <script> tag for the appropriate *.cache.js file (provided you use the xsiframe linker).
AFAIK, Google use all these techniques for their GWT apps (such as Google Groups). For a small app, though, I'm not sure it's worth the effort…
Also, the last two techniques work best when your HTML host page is already dynamic and therefore already non-cacheable; otherwise you're mostly moving the problem, not solving it.
I wonder whether the sso linker can be used when you collapse all properties and soft-permutations down to a single hard permutation.
Yes, but it's maybe not something you want. See this answer: https://stackoverflow.com/a/4453716/66416 to this stackoverflow question: Merge GWT generated files.
I found another way to accomplish this: Writing a custom Linker for GWT. Two examples for linkers which compile into a single JavaScript file are:
GwtNodeLinker.java from Gwt Node project
ServerSingleScriptLinker.java from Env.js project
Greetings,
I'm looking for a way to launch a GWT module when a user clicks on an XML file and have the module consume the xml data. Ideally I would like to render the XML in a rich manner and would prefer to use GWT controls instead of having to lay it out by hand via xslt + javascript.
I'm supposing one way would be to point the xml to a well known xslt that creates a simple html page that forces a redirect to the gwt module but how would I transfer the xml data to said module to allow for enhanced formatting?
Another way would be to have the process that produces the xml also include the bootstrap gwt module but it would be creating multiple bootstrap instances over time and pollute the user's directory.
The use case is that a user would run this app on their local machine which outputs an XML file. If they try and view the xml file in a browser, I'd like to have the GWT module take over and present the data accordingly. I would rather they not have to go to a page and upload the data manually.
Appreciate any ideas on the matter.
TIA
If it's something that runs on the user's machine, I would recommend to ship an executable, or generate a parallel HTML file to present the data. JavaScript run from file:/// will not be able to acces the filesystem.
If there's a way for the client side GWT code to pre-process a file on the client computer?
For example, to calculate a checksum of it before submitting the file to the server.
No it is not possible. The manipulation of the file is done by the browser, not the HTML code.
Think about it, GWT is 100% javascript. And javascript has no access whatsoever of the file in your computer. That would be an pretty big security risk! GWT "wraps" the file input box so it can be displayed inside the GWT panel. But once you press the "upload" button, the upload is done by the browser.
You could do file manipulation with another technology however. Java applets for example. But that is outside of GWT area...
Using GWT, there is no way to read files on the client side yet. However, in HTML5, you can read files without uploading to a server using the "File API".
Links are provided below.
File API tutorial on html5rocks.com
Example of how to use File API in GWT via JSNI
I'm pretty sure that because GWT code compiles to pure JavaScript, there isn't a way without requiring some third-party browser plugin.
Do you mean from an <input type="file"...> file upload field in a form?
The short answer is no-- file uploads are handled by the browser, and are sent directly to the server (as an ENCODING_MULTIPART POST). And security restrictions on JavaScript mean there's no way to workaround that restriction.