Embed JSP into GWT module without IFRAME
270 views
Skip to first unread message
koollx
Dec 17, 2007, 5:04:11 PM12/17/07
to Google Web Toolkit
We are thinking of building a UI using GWT. One of the issues is how
to use the existing JSPs that represent portions of the page (almost
like portlets). We want the page to be GWT top to bottom, but
somewhere on the page we need to be able to add a DIV that would
contain output of JSP page. That JSP DIV can have forms that should
submit asynchronously.
I haven't seen any solutions on the net for this yet. IFRAME is a poor
option because of session sharing, back button and the clunkiness of
the whole concept (the page content is always coming from the same
site, it's just rendered using different technology).
The solution I have in mind is writing a GWT custom component that is
represented as a DIV. It would make an asynchronous call to the JSP
page either using GWT RPC or jQuery to obtain the pure HTML output. To
handle the form submission I would use jQuery form plugin that submits
only the form asynchronously, not the entire page.
Has anyone solved this problem yet?
Does anyone have better ideas?
to use the existing JSPs that represent portions of the page (almost
like portlets). We want the page to be GWT top to bottom, but
somewhere on the page we need to be able to add a DIV that would
contain output of JSP page. That JSP DIV can have forms that should
submit asynchronously.
I haven't seen any solutions on the net for this yet. IFRAME is a poor
option because of session sharing, back button and the clunkiness of
the whole concept (the page content is always coming from the same
site, it's just rendered using different technology).
The solution I have in mind is writing a GWT custom component that is
represented as a DIV. It would make an asynchronous call to the JSP
page either using GWT RPC or jQuery to obtain the pure HTML output. To
handle the form submission I would use jQuery form plugin that submits
only the form asynchronously, not the entire page.
Has anyone solved this problem yet?
Does anyone have better ideas?
Peter Blazejewicz
Dec 18, 2007, 3:03:51 PM12/18/07
to Google Web Toolkit
hi,
I don't understand why you are so suspicious about iFrame,
If you don't use GWT History support (you're to use JSP engine) the
only iframe tag generated in your page at runtime AND at client side
(sic!) will be frame containing your compiled javascript code but not
any markup (UI) elements,
here is example:
having html:
<html>
<head>
<title>Wrapper HTML for FlashTest</title>
<meta name='gwt:module'
content='com.google.code.swfobject.gwt.FlashTest'/>
<link type="text/css" rel='stylesheet' href='FlashTest.css'/>
</head>
<body>
<!-- examle existing markup -->
<div id="content">
<h2>Example page</h2>
<ul>
<li>
<a href="http://www.google.com/" target="_self">Google home page</
a>
</li>
<li>
<a href="http://groups.google.com/group/Google-Web-Toolkit/"
target="_self">Google Web Toolkit forum</a>
</li>
</ul>
</div>
<!-- gwt module source source -->
<script language="javascript"
src="com.google.code.swfobject.gwt.FlashTest.nocache.js"></script>
<div id="gwtapplication"></div>
</body>
</html>
(no history support) using a code:
RootPanel rootPanel = RootPanel.get("gwtapplication");
clickMeButton = new Button();
rootPanel.add(clickMeButton);
clickMeButton.setText("Click me!");
clickMeButton.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello, GWT World!");
}
});
will generate:
<html><head><title>Wrapper HTML for FlashTest</title>
<meta name="gwt:module"
content="com.google.code.swfobject.gwt.FlashTest">
<link type="text/css" rel="stylesheet" href="FlashTest.css"></
head><body>
<!-- examle existing markup -->
<div id="content">
<h2>Example page</h2>
<ul>
<li>
<a href="http://www.google.com/" target="_self">Google home page</
a>
</li>
<li>
<a href="http://groups.google.com/group/Google-Web-Toolkit/"
target="_self">Google Web Toolkit forum</a>
</li>
</ul>
</div>
<!-- gwt module source source -->
<script language="javascript"
src="com.google.code.swfobject.gwt.FlashTest.nocache.js"></script>
<script src="http://localhost:8888/
com.google.code.swfobject.gwt.FlashTest/
com.google.code.swfobject.gwt.FlashTest.nocache.js?compiled"></script>
<script>com_google_code_swfobject_gwt_FlashTest.onInjectionDone('com.google.code.swfobject.gwt.FlashTest')</
script>
<div id="gwtapplication">
<button class="gwt-Button" type="button">Click me!</button>
</div>
<iframe src="http://localhost:8888/
com.google.code.swfobject.gwt.FlashTest/
945E0D25E0E8B23A9E171050A109B458.cache.html" style="border: medium
none ; position: absolute; width: 0pt; height: 0pt;"
id="com.google.code.swfobject.gwt.FlashTest"></iframe>
</body>
</html>
now try using navigation in that page and you will see it will work I
think,
in your case you should use custom markup generated as subclasses of
UIObject instead of Widget (GWT Tookit ui elements are based on Widget
and by default sinks events),
you don't have any form as I understand, simply use RequestBuilder
with POST request and custom params to your serlvet,
regards,
Peter
I don't understand why you are so suspicious about iFrame,
If you don't use GWT History support (you're to use JSP engine) the
only iframe tag generated in your page at runtime AND at client side
(sic!) will be frame containing your compiled javascript code but not
any markup (UI) elements,
here is example:
having html:
<html>
<head>
<title>Wrapper HTML for FlashTest</title>
<meta name='gwt:module'
content='com.google.code.swfobject.gwt.FlashTest'/>
<link type="text/css" rel='stylesheet' href='FlashTest.css'/>
</head>
<body>
<!-- examle existing markup -->
<div id="content">
<h2>Example page</h2>
<ul>
<li>
<a href="http://www.google.com/" target="_self">Google home page</
a>
</li>
<li>
<a href="http://groups.google.com/group/Google-Web-Toolkit/"
target="_self">Google Web Toolkit forum</a>
</li>
</ul>
</div>
<!-- gwt module source source -->
<script language="javascript"
src="com.google.code.swfobject.gwt.FlashTest.nocache.js"></script>
<div id="gwtapplication"></div>
</body>
</html>
(no history support) using a code:
RootPanel rootPanel = RootPanel.get("gwtapplication");
clickMeButton = new Button();
rootPanel.add(clickMeButton);
clickMeButton.setText("Click me!");
clickMeButton.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello, GWT World!");
}
});
will generate:
<html><head><title>Wrapper HTML for FlashTest</title>
<meta name="gwt:module"
content="com.google.code.swfobject.gwt.FlashTest">
<link type="text/css" rel="stylesheet" href="FlashTest.css"></
head><body>
<!-- examle existing markup -->
<div id="content">
<h2>Example page</h2>
<ul>
<li>
<a href="http://www.google.com/" target="_self">Google home page</
a>
</li>
<li>
<a href="http://groups.google.com/group/Google-Web-Toolkit/"
target="_self">Google Web Toolkit forum</a>
</li>
</ul>
</div>
<!-- gwt module source source -->
<script language="javascript"
src="com.google.code.swfobject.gwt.FlashTest.nocache.js"></script>
<script src="http://localhost:8888/
com.google.code.swfobject.gwt.FlashTest/
com.google.code.swfobject.gwt.FlashTest.nocache.js?compiled"></script>
<script>com_google_code_swfobject_gwt_FlashTest.onInjectionDone('com.google.code.swfobject.gwt.FlashTest')</
script>
<div id="gwtapplication">
<button class="gwt-Button" type="button">Click me!</button>
</div>
<iframe src="http://localhost:8888/
com.google.code.swfobject.gwt.FlashTest/
945E0D25E0E8B23A9E171050A109B458.cache.html" style="border: medium
none ; position: absolute; width: 0pt; height: 0pt;"
id="com.google.code.swfobject.gwt.FlashTest"></iframe>
</body>
</html>
now try using navigation in that page and you will see it will work I
think,
in your case you should use custom markup generated as subclasses of
UIObject instead of Widget (GWT Tookit ui elements are based on Widget
and by default sinks events),
you don't have any form as I understand, simply use RequestBuilder
with POST request and custom params to your serlvet,
regards,
Peter
JavaJosh
Dec 18, 2007, 4:37:57 PM12/18/07
to Google Web Toolkit
You can do anything with GWT that you can do with JavaScript, so if
you have a soln in mind using jQuery it will work with GWT. I've not
seen this pattern before, and would personally be concerned about a
few things:
1. Stripping the daughter HTML page of it's headers (necessary before
adding content to a div)
2. Interaction between daughter scripts and top-level scripts
3. Dealing with the form's response. This could be another page, a
redirect, an error page, or...anything.
4. Interaction between daughter CSS and top level CSS.
There may even be more issues (same origin may bite you if your
daughter page is HTTPS, for example). The system could work well if
you constrain the system: e.g. no daughter scripts or CSS, no
redirects, error pages that are basic HTML, nothing fancy. And of
course you must ensure that the headers don't have any important
information before you strip them! That could bite in a variety of
interesting ways.
If you're dealing with a legacy system that doesn't conform to these
requirements, you may be better off "decorating" all of your JSPs with
a GWT module that writes itself into the page. Yes, it will look a bit
jarring to the user, but the scripts will be cached and the pages will
load nicely, and it's remarkable what users will get used to if they
must (just look at how they endure Windows Vista!)
Or you could use an iframe. :)
Regards,
josh
you have a soln in mind using jQuery it will work with GWT. I've not
seen this pattern before, and would personally be concerned about a
few things:
1. Stripping the daughter HTML page of it's headers (necessary before
adding content to a div)
2. Interaction between daughter scripts and top-level scripts
3. Dealing with the form's response. This could be another page, a
redirect, an error page, or...anything.
4. Interaction between daughter CSS and top level CSS.
There may even be more issues (same origin may bite you if your
daughter page is HTTPS, for example). The system could work well if
you constrain the system: e.g. no daughter scripts or CSS, no
redirects, error pages that are basic HTML, nothing fancy. And of
course you must ensure that the headers don't have any important
information before you strip them! That could bite in a variety of
interesting ways.
If you're dealing with a legacy system that doesn't conform to these
requirements, you may be better off "decorating" all of your JSPs with
a GWT module that writes itself into the page. Yes, it will look a bit
jarring to the user, but the scripts will be cached and the pages will
load nicely, and it's remarkable what users will get used to if they
must (just look at how they endure Windows Vista!)
Or you could use an iframe. :)
Regards,
josh
Alex Kalinovsky
Dec 26, 2007, 11:09:25 AM12/26/07
to Google-We...@googlegroups.com
Gentlemen,
Thanks for your suggestions and ideas. Maybe I need to give a little more background about the task at hand. We have a legacy application with lots of pages and components implemented in JSP/Struts/jQuery. We are trying to move the architecture to GWT but we need to be able to reuse existing pages/portlets until they are rewritten too (we are avoiding big-bang conversion as it would be too costly). We currently use SiteMesh so it would be fairly easy to strip existing pages/portlets off CSS and page tags like <head> and <body>. Our app haa portal-like presentation where a page can contain portlets and reusable fragments. Here are reasons why I don't want to use IFRAME:
- It breaks the logical page into N physical pages that are treated as separate independent pages by the browser. Each page will have it's own request/response and potentially session. Even the initial loading of the page with 5 portlets would end up being done in 6 requests - 1 for the container page and 5 for each portlet.
- We just jQuery and other JavaScript manipulation across the page. IFRAME would limit our ability to effectively iterate over the elements of the page and manipulate the page as a whole
- We use and need to use partial page updates so even inside IFRAME we need to be able to do AJAX. So ideal solution would enable us to make asynchronous roundtrips to the server to fetch any portion of a page.
I've implemented a class RemoteHTML that extends com.google.gwt.user.client.ui.HTML and uses jQuery forum plugin to submit the form. It works like a charm and if there is interest I can create a Google project for it.
Summing up, I think for integration of foreign content into your app's page IFRAME may be a better solution because it isolates the two applications from each other
For integrating your own JSPs I think my RemoteHTML is better because it's cleaner and more efficient.
Thanks for your suggestions and ideas. Maybe I need to give a little more background about the task at hand. We have a legacy application with lots of pages and components implemented in JSP/Struts/jQuery. We are trying to move the architecture to GWT but we need to be able to reuse existing pages/portlets until they are rewritten too (we are avoiding big-bang conversion as it would be too costly). We currently use SiteMesh so it would be fairly easy to strip existing pages/portlets off CSS and page tags like <head> and <body>. Our app haa portal-like presentation where a page can contain portlets and reusable fragments. Here are reasons why I don't want to use IFRAME:
- It breaks the logical page into N physical pages that are treated as separate independent pages by the browser. Each page will have it's own request/response and potentially session. Even the initial loading of the page with 5 portlets would end up being done in 6 requests - 1 for the container page and 5 for each portlet.
- We just jQuery and other JavaScript manipulation across the page. IFRAME would limit our ability to effectively iterate over the elements of the page and manipulate the page as a whole
- We use and need to use partial page updates so even inside IFRAME we need to be able to do AJAX. So ideal solution would enable us to make asynchronous roundtrips to the server to fetch any portion of a page.
I've implemented a class RemoteHTML that extends com.google.gwt.user.client.ui.HTML and uses jQuery forum plugin to submit the form. It works like a charm and if there is interest I can create a Google project for it.
Summing up, I think for integration of foreign content into your app's page IFRAME may be a better solution because it isolates the two applications from each other
For integrating your own JSPs I think my RemoteHTML is better because it's cleaner and more efficient.
Reply all
Reply to author
Forward
0 new messages