The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

dialloma (72) [Avatar] Offline
#1
Hello all,

I want to make the extensible width panel in GWT. For example, I have a horizontalPanel that content two others VerticalPanel. I want to that, the horizontalPanel take 100% as width i.e all of the client Window width. And, I want to that, the others tow VerticalPanel takes each 50% of the last HorizontalPanel. Natutaly, I writed the following code:

public class MonPanel1 extends Composite {

private HorizontalPanel hPanel = new HorizontalPanel();

private VerticalPanel vPanel1 = new VerticalPanel();
private VerticalPanel vPanel2 = new VerticalPanel();

public MonPanel1() {
initWidget(hPanel);

setWidth("100%");
hPanel.setWidth("100%");

hPanel.add( vPanel1);
hPanel.add( vPanel2);

int w = Window.getClientWidth();

vPanel1.setWidth("50%");
vPanel2.setWidth("50%");

vPanel1.add(new Button("Panel 1 "));
vPanel2.add(new HTML("Panel 2 "));

vPanel1.addStyleName("dialloma-vPanel1");
vPanel2.addStyleName("dialloma-vPanel2");
hPanel.addStyleName("dialloma-hPanel");
}
}


result is not the one for that I waited. Please, try to execute this code in your own computer.

In the second part, I have tried the following code and the result is now fine:

public class MonPanel1 extends Composite {

private HorizontalPanel hPanel = new HorizontalPanel();

private VerticalPanel vPanel1 = new VerticalPanel();
private VerticalPanel vPanel2 = new VerticalPanel();

public MonPanel1() {
initWidget(hPanel);

setWidth("100%");
hPanel.setWidth("100%");

hPanel.add( vPanel1);
hPanel.add( vPanel2);

int w = Window.getClientWidth();

vPanel1.setWidth(w/2+"px");
vPanel2.setWidth(w/2+"px");

vPanel1.add(new Button("Panel 1 "));
vPanel2.add(new HTML("Panel 2 "));

vPanel1.addStyleName("dialloma-vPanel1");
vPanel2.addStyleName("dialloma-vPanel2");
hPanel.addStyleName("dialloma-hPanel");
}
}


My question is, what is the in the first case i.e my first example. Why I didn't use the synthaxe: vPanel1.setWidth("50%");
I think, it whil be natural if we can use it. Please help me. have a good day

dialloma
dialloma (72) [Avatar] Offline
#2
Re: How to Make the exxtensible width panel ?
always any response for me ?Please help. Thank you in advance

dialloma