Can you give an example of how to create a window that contains frames.
In http://toolkit.itmill.com/demo/doc/api/com/itmill/toolkit/ui/FrameWindow.html#addComponent(com.itmill.toolkit.ui.Component)
it is said that [quote]
To add component to frame window, normal window must be first created and then attached to frame window as a frame.
[/quote] But I cannot find a way how to do that.
You could use custom layout to define frameset if you want to use them. But using “old-school” frames brings own kind of issues within browsers, e.g. inter-frame communication.
I’d keep out of old frames if possible and use other kind of layouts. In toolkit 5 we got splitpanel which is very similar to frameset concept on GUI level.
I’m trying to integrate our legacy frames into a toolkit Application. I’d like to start migrating to toolkit by first imitating the legacy frame setting, and then one by one replacing the html pages shown in the frames with the toolkit’s Components.
Can you comment on this, and perhaps provide a few best practices for this kind of a situation?
Common partern used in Toolkit4 projects is to use “div-frames” in CustomLayout. I would suggest you to start with simple static CustomLayout where application parts are put inside html-table cells. You can later rewrite you customlayout with scalable “div-frames” or migrate to Toolkit 5 that has proper splitpanes built-in.
So the main issue is that I cannot migrate to the toolkit at once, but I have to support a lot of legacy html pages. The toolkit and these pages have to interact by passing good-ol’ http parameters to each other.
Another alternative is to use iframe’s if you wish to use URL’s to load your legacy components. You could even build up an Toolkit custom component that contains only this iframe and use Toolkit for controlling where this legacy component is to be located, is it visible, what is it’s URL etc.
See e.g. example theme’s custom layout (mainLayout.html):
<!-- Toolkit components are placed with divs that have matching
location tag -->
<table>
<tr>
<td><img src="icon_intro.png" /></td>
<td width="80%"><b>This example application uses custom layouts</b></td>
<td align="right">
<!-- login components -->
<table align="right">
<tr>
<td><div location="loginUser"></div></td>
<td><div location="loginPassword"></div></td>
<td><div style="width:100px;margin-top:1em" location="loginButton"></div></td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<!-- menu component -->
<td valign="top" width="150">
<div location="menu"></div>
</td>
<!-- body component, updated by menu clicked event -->
<td valign="top">
<div location="body"></div>
</td>
</tr>
</table>
<iframe src="http://www.itmill.com" />
I see. Some options:
In principle interframe communications should work in Toolkit 4, but it is less than “battlefield proven” pattern. What you could do is to create static HTML frameset and put toolkit app into one of those frames. If open windows from toolkit, you can give windows same names as you have given for the frames. Then the windows should open inside already created frames.
I think this is what you are looking for:
int width=400;
int height=200;
String url = "www.itmill.com";
String iFrame = "<iframe height=\""+height+"\" width=\""+width+"\" src=\"http://"+url+"\" />";
Label iFrameLabel = new Label(iFrame, Label.CONTENT_XHTML);
If possible, I strongly suggest that you build up your application using Toolkit’s server-side framework (together with custom layouts perhaps). And then place bunch of “iFrameLabels” to Toolkit layouts which contain your legacy codes.
If you wish to do it cleanly on the server-side, you can wrap above iFrameLabel inside custom component with proper API calls for src, width, height etc.
Injecting multiple different Toolkit widgets inside legacy system may become a pain you do not wish to handle.
PS. Are your resources (legacy systems, Toolkit server) located on different domains? Or do they all live within single Application Server?
Thanks for the hint!
Yes, all the stuff is running on a single servlet container.
You have mentioned the forthcoming feature “splitpanel”. As we do not yet have the version 5 of the toolkit at hand, how do you suggest we should proceed in our migration?
This does not affect TK4->5 migration, as Java server-side code stays the same. Just don’t use FrameWindow component because it definitely wont work in Toolkit 5.
Hmmm, actually you will want to use splitpanel when migrating to TK5 so it means some changes in your java server-side “layouting” code, still these changes are quite trivial even if you have lots of views…
Your legacy “iframe label hack” works same way on TK5, so no issue there.