HTMLPane (IFrame) communication...

[spievak]

Hi,

I already did a lot of investigations looking
for a solution to the iframe element retrieval and communication, but could not find some good answers or examples.
The problem is that we need the inter document comunication, we implement a specification that says that the communication must occurs and we cannot get rid of this or replace by another approach.
WE need to put the HTMLPane inside a HLayout, this HLayout has a Stack on the right and this frame, lets call "content", must fill the entire available space left. I tried to call getElement() on the HTMLPane to search for the iframe element, and I got it, but every time that i got this element, the "content" got releaded. So, I set the RedrawOnResize to false on it. This solved the problem but now i get two scrollbars, seems that the container that wrap the HTMLPane thinks that the iframe is big, or something like that.

On this example, if we remove the [iframe.getElement()] the layout get correct, but with it, the layout brokes on the first draw.

And seems that using the [iframe.getElement()], the layout get broken and the iframe always reload when a resize event occurs on its hierarchy.

VLayout main = new VLayout();
		main.setWidth100();
		main.setHeight100();
		
		HLayout layout = new HLayout();
		layout.setWidth100();
		layout.setBorder("1px solid blue");
		layout.setAutoHeight();
		
		Img image = new Img("http://code.google.com/webtoolkit/images/gwt-logo.png");
		image.setWidth(100);
		image.setHeight(100);
		//image.setAutoHeight();
		//image.setAutoWidth();
		image.setLayoutAlign(Alignment.CENTER);
		image.setLayoutAlign(VerticalAlignment.CENTER);
		layout.addMember(image);
		
		VLayout headerRight = new VLayout();
		headerRight.setWidth("*");
		headerRight.setHeight("*");
		headerRight.setBorder("1px solid red");
		
		Menu menus[] = new Menu[2];
		
		Menu menu = new Menu();
		menu.setTitle("Menu1");

		MenuItem item = new MenuItem("Item 1");
		menu.addItem(item);
		item = new MenuItem("Item 2");
		menu.addItem(item);
		item = new MenuItem("Item 3");
		menu.addItem(item);
		
		menus[0] = menu;
		
		menu = new Menu();
		menu.setTitle("Menu2");

		item = new MenuItem("Item 1");
		menu.addItem(item);
		item = new MenuItem("Item 2");
		menu.addItem(item);
		item = new MenuItem("Item 3");
		menu.addItem(item);
		
		menus[1] = menu;
		
		MenuBar menuBar = new MenuBar();
		menuBar.setAlign(Alignment.RIGHT);
		menuBar.setMenus(menus);
		
		headerRight.addMember(menuBar);
		
		HLayout headerRightBottom = new HLayout();
		headerRightBottom.setHeight100();
		headerRightBottom.setAlign(Alignment.LEFT);
		headerRightBottom.setAlign(VerticalAlignment.BOTTOM);
		headerRightBottom.setBorder("1px solid green");
		
		HLayout tabLayout = new HLayout();
		tabLayout.setBorder("1px solid red");
		tabLayout.setAlign(Alignment.LEFT);
		tabLayout.setHeight100();
		tabLayout.setWidth100();
		
		Label tab1 = new Label("Tab1");
		tab1.setValign(VerticalAlignment.BOTTOM);
		tab1.setAutoWidth();
		tab1.setBorder("1px solid black");
		tabLayout.addMember(tab1);
		
		Label tab2 = new Label("Tab2");
		tab2.setValign(VerticalAlignment.BOTTOM);
		tab2.setAutoWidth();
		tab2.setBorder("1px solid black");
		tabLayout.addMember(tab2);
		
		Label tab3 = new Label("Tab3");
		tab3.setValign(VerticalAlignment.BOTTOM);
		tab3.setAutoWidth();
		tab3.setBorder("1px solid black");
		tabLayout.addMember(tab3);
		
		headerRightBottom.addMember(tabLayout);
		
		Label statusLine = new Label("Status line");
		statusLine.setValign(VerticalAlignment.BOTTOM);
		statusLine.setWrap(false);
		statusLine.setAutoWidth();
		headerRightBottom.addMember(statusLine);
		
		headerRight.addMember(headerRightBottom);
		
		layout.addMember(headerRight);
		
		HLayout content = new HLayout();
		HLayout left = new HLayout();
		left.setBorder("1px solid blue");
		left.setShowResizeBar(true);
		HLayout right = new HLayout();
		right.setBorder("1px solid green");
		
		HTMLPane iframe = new HTMLPane();
		iframe.setContentsType(ContentsType.PAGE);
		iframe.setContentsURL("http://www.google.com/");
iframe.setRedrawOnResize(false);
		iframe.getElement();
		right.addMember(iframe);
		
		content.setMembers(left, right);
		
		main.setMembers(layout, content);
		main.draw();

thanks,

Rodrigo.

[Isomorphic]

getElement() is a core GWT API that does not apply to SmartGWT.

If you want to implement inter-document communication, create an HTMLPane and create your own IFrame inside it as part of HTMLPane.contents(), give it an ID in the HTML, and access it via the low-level GWT APIs for dealing with DOM elements.

There's lots and lots of cross-browser differences and bugs you'll need to take into account, and it would be best to Google for a known working implementation you can start from.

If you prefer to have the whole problem packages as a nice neat SmartGWT API, consider Feature Sponsorship.