Change header height for a Window

[cguven]

v8.2p_2012-06-01/PowerEdition Deployment (built 2012-06-01)
Firefox 10.0.4


Hello,

I'm trying to alter the height of a header on a window. The method I'm using to accomplish this can be seen in the code below.

class MyWindow extends com.smartgwt.client.widgets.Window {
	public MyWindow() {
		Map<String, Object> headerDefaults = new HashMap<String, Object>();
		headerDefaults.put("height", 45);
		setAttribute("headerDefaults", headerDefaults, true);
	}
}

public class MyTest implements EntryPoint {
    public void onModuleLoad() {
    	com.smartgwt.client.widgets.Window window = new MyWindow();
    	window.setWidth(600);
    	window.setHeight(300);
    	
    	CheckboxItem cheese = new CheckboxItem("Cheese");
    	cheese.setHeight(18);
    	CheckboxItem bread  = new CheckboxItem("Bread");
    	bread.setHeight(18);
    	
    	DynamicForm form = new DynamicForm();
    	form.setFields(cheese, bread);
    	form.setNumCols(2);
    	
    	HLayout header = new HLayout();
    	header.setMembers(form);
    	
    	ListGrid listGrid = new ListGrid();
    	
    	VLayout layout = new VLayout();
    	layout.setMembers(listGrid);
    	
    	window.setHeaderControls(header);
    	window.addItem(layout);
    	window.draw();
    }
}
}

While this successfully changes the height and displays the widgets, the actual header strip/style doesn't seem to have expanded. How can I have the gray bar extend to the height I've specified?

(see attached screenshot for clarification)

Note how "Bread" doesn't appear to be in the header.

[cguven]

This is still an issue. Any updates?

[Isomorphic]

In some themes, the Window header bar appearance is actually achieved via a specialized EdgedCanvas on the window widget.
The thick top border appears to be part of the "header" but it's actually something separate and increasing the height of the header will not increase the height of that border.

This is required in order to support certain appearances, (rounded corners, gradients, etc) which are difficult to achieve via simple media in a way that can scale if the header-size changes.
In the latest SmartGWT release (9.0) we take advantage of some CSS3 features to avoid doing this where we can, but we still use this approach for older browsers.

You basically have three options here:

1) You could create a customized version of the window which has a different set of edge properties, including loading media with a taller header-bar image to accomodate the taller header.

2) You could back off to a simpler version of Window where the header is rendered with an appearance where scaling vertically is not a problem (no vertical color gradient, etc).

3) If you're working with the latest version of SmartGWT, and you have knowledge of which browsers your end users will be using, you can rely on the updated skins with CSS3 features to handle this for you

In terms of implementation of 1) or 2) - we'd recommend you start by looking inside the load_skin.js file to see the javascript code responsible for applying custom edged-canvas properties to the default Window class, and perhaps comparing with the load-skin file for a simpler skin where this approach is not taken, such as the old "fleet" skin.

Regards
Isomorphic Software

[cguven]

Went with #1 and created images with a larger top height. Then did the following:

setEdgeImage("[SKINIMG]WindowLargeHeader/window.png");
setAttribute("edgeTop", 46, true);

Seemed to work well. Thank you. Your explanation was very helpful.