setWidth("33%");
setPadding(10);
setContents("<b>No alignment</b>");
setBackgroundColor("red");
}});
hLayoutLayoutSpacers.addMember(new LayoutSpacer()); // Note the use of the LayoutSpacer
hLayoutLayoutSpacers.addMember(new Canvas() {{
setHeight(40);
setWidth("33%");
setPadding(10);
setContents("<b>Centered in remaning space</b>");
setBackgroundColor("green");
}});
hLayoutLayoutSpacers.addMember(new LayoutSpacer()); // Note the use of the LayoutSpacer
// 4. VLayout with layout.align = 'center'
//
// This centers the members along the vertical axis of the VLayout.
// Note that the members have a specified height that is less than the
// height of the VLayout -- otherwise, you would not see the centering
// visually!
final VLayout vLayoutAlignCenter = new VLayout();
// Specifying the height creates space within which to center the members.
vLayoutAlignCenter.setWidth100();
vLayoutAlignCenter.setHeight100();
vLayoutAlignCenter.setLayoutMargin(6);
vLayoutAlignCenter.setMembersMargin(6);
vLayoutAlignCenter.setBorder("1px dashed blue");
vLayoutAlignCenter.setAlign(Alignment.CENTER);
vLayoutAlignCenter.addMember(new Canvas() {{
setHeight(40);
setWidth(40);
setBackgroundColor("red");
}});
vLayoutAlignCenter.addMember(new Canvas() {{
setHeight(40);
setWidth(40);
setBackgroundColor("green");
}});
vLayoutAlignCenter.addMember(new Canvas() {{
setHeight(40);
setWidth(40);
setBackgroundColor("blue");
}});
// 5. VLayout with member.layoutAlign = 'center' (or layout.defaultLayoutAlign = 'center')
//
// This centers every member along the horizontal axis of the VLayout.
// If you don't want to center *every* member horizontally, you can
// instead specify the layoutAlign property on individual members.
// Note that the width of the members is fixed -- if they filled
// the layout, you wouldn't see the centering.
final VLayout vLayoutDefaultLayoutAlign = new VLayout();
// Specifying the width creates space within which to center the members.
vLayoutDefaultLayoutAlign.setWidth100();
vLayoutDefaultLayoutAlign.setHeight100();
vLayoutDefaultLayoutAlign.setLayoutMargin(6);
vLayoutDefaultLayoutAlign.setMembersMargin(6);
vLayoutDefaultLayoutAlign.setBorder("1px dashed blue");
vLayoutDefaultLayoutAlign.setDefaultLayoutAlign(Alignment.CENTER); // As promised!
vLayoutDefaultLayoutAlign.addMember(new Canvas() {{
setHeight(40);
setWidth(40);
setBackgroundColor("red");
}});
vLayoutDefaultLayoutAlign.addMember(new Canvas() {{
setHeight(40);
setWidth(40);
setBackgroundColor("green");
}});
vLayoutDefaultLayoutAlign.addMember(new Canvas() {{
setHeight(40);
setWidth(40);
setBackgroundColor("blue");
}});
// 6. VLayout with LayoutSpacers
//
// This example uses LayoutSpacers as members to center one member in the space
// remaining after the first member is drawn. Note that it is the positioning
// of the two LayoutSpacer members that creates the centering ... no alignment
// property is used.
final VLayout vLayoutLayoutSpacers = new VLayout();
// Specifying the width creates space for the LayoutSpacers to distribute.
vLayoutLayoutSpacers.setWidth100();
vLayoutLayoutSpacers.setHeight100();
vLayoutLayoutSpacers.setLayoutMargin(6);
vLayoutLayoutSpacers.setMembersMargin(6);
vLayoutLayoutSpacers.setBorder("1px dashed blue");
// Note no alignment property! It's all done with LayoutSpacers
vLayoutLayoutSpacers.addMember(new Canvas() {{
setWidth100();
setHeight("33%");
setPadding(10);
setContents("<b>No alignment</b>");
setBackgroundColor("red");
}});
vLayoutLayoutSpacers.addMember(new LayoutSpacer()); // Note the use of the LayoutSpacer
vLayoutLayoutSpacers.addMember(new Canvas() {{
setWidth100();
setHeight("33%");
setPadding(10);
setBackgroundColor("green");
setContents("<b>Centered in remaning space</b>");
}});
vLayoutLayoutSpacers.addMember(new LayoutSpacer()); // Note the use of the LayoutSpacer
// The rest of the code is merely to organize the examples visually.
HLayout mainLayout = new HLayout();
mainLayout.setWidth100();
mainLayout.setHeight100();