Layout Issues related to alignment.

[spievak]

Hi, I have a tabSet (custom widget) and a status line, in the following code. I need to align the tabSet and the status line to the bottom of the headerRightBottom Panel, I tried a lot of settings, inner panels etc.. But could not manage this.
Is there a way to load an Image and let it render using itīs defined width and height ? I tried to use autoHeight and autoWidth, but these broke the layout. I Tried to let it with the default setting but it rendered a streched image like a line.

Is there a way to evict line breaking on HTMLFlow widget using AutoWidth property ? I tried to use DOM access but the layout got weird. Maybe I need directions on how to set style attribute to widgets, should I set this after adding it to the parent widget, or after it get rendered ?

package com.agilemind.bugTest.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.VerticalAlignment;
import com.smartgwt.client.widgets.HTMLFlow;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.menu.Menu;
import com.smartgwt.client.widgets.menu.MenuBar;
import com.smartgwt.client.widgets.menu.MenuItem;

public class Bug_Test implements EntryPoint {
	
	public void onModuleLoad() {
		
		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.setAlign(Alignment.RIGHT);
		headerRightBottom.setAlign(VerticalAlignment.BOTTOM);
		headerRightBottom.setBorder("1px solid green");
		
		HLayout tabLayout = new HLayout();
		tabLayout.setBorder("1px solid red");
		tabLayout.setAutoHeight();
		tabLayout.setAlign(Alignment.LEFT);
		tabLayout.setAlign(VerticalAlignment.BOTTOM);
		
		HTMLFlow tab1 = new HTMLFlow("Tab1");
		tab1.setAutoWidth();
		tab1.setBorder("1px solid black");
		tabLayout.addMember(tab1);
		
		HTMLFlow tab2 = new HTMLFlow("Tab2");
		tab2.setAutoWidth();
		tab2.setBorder("1px solid black");
		tabLayout.addMember(tab2);
		
		HTMLFlow tab3 = new HTMLFlow("Tab3");
		tab3.setAutoWidth();
		tab3.setBorder("1px solid black");
		tabLayout.addMember(tab3);
		
		headerRightBottom.addMember(tabLayout);
		
		HTMLFlow statusLine = new HTMLFlow("Status line");
		statusLine.setAutoWidth();
		headerRightBottom.addMember(statusLine);
		
		headerRight.addMember(headerRightBottom);
		
		layout.addMember(headerRight);
		
		main.addMember(layout);
		main.draw();
		
	}
	
}

Thanks,

Rodrigo S. Cavalcanti

[sjivan]

Use GWT's Image class to get the images natural height / width.

String imgURL = "http://code.google.com/webtoolkit/images/gwt-logo.png";
Img image = new Img(imgURL);

//com.google.gwt.user.client.ui.Image
Image imageDimension = new Image(imgURL);

image.setWidth(imageDimension.getWidth());
image.setHeight(imageDimension.getHeight());

Sanjiv

[Isomorphic]

On the HTMLFlow content wrapping, one option would be to use a Label component rather than an HTMLFlow, and set 'wrap' to false.

Alternatively you could modify your content to directly suppress wrapping (For example apply a styling with whitespace 'nowrap', or surround with "<nobr>" type tags)

Thanks
Isomorphic Software Support

[jfeferman]

Image dimensions

It seems unwieldly to need to create a gwt image object for each image in the app just to be able to get the dimensions. Shouldn't smart gwt handle this internally?

Use GWT's Image class to get the images natural height / width.

String imgURL = "http://code.google.com/webtoolkit/images/gwt-logo.png";
Img image = new Img(imgURL);

//com.google.gwt.user.client.ui.Image
Image imageDimension = new Image(imgURL);

image.setWidth(imageDimension.getWidth());
image.setHeight(imageDimension.getHeight());

Sanjiv