Problem with layout, where is going the flow ?

[Nico33]

Hi all,

I have problem with understanding how layout works ...

This are shot of what I have and what I would like to have. Sometimes it is better than a long explanation...

I don't understand why when there's not enough place, the flow doesn't continue ...

That is my sample code :


public class TestApp implements EntryPoint
{
public void onModuleLoad()
{
Viewport viewport = new Viewport();
viewport.setLayout(new AnchorLayout());

ContentPanel cp = new ContentPanel();
cp.setHeading("Row");
cp.setLayout(new RowLayout(Orientation.HORIZONTAL));

cp.add(getChart(), new RowData(400, 300));

LayoutContainer subContainer = new LayoutContainer();
subContainer.setLayout(new FlowLayout());
LayoutContainer container = new LayoutContainer();
container.setLayout(new RowLayout(Orientation.HORIZONTAL));
for (int i = 0 ; i < 5 ; i++)
{
container.add(getChart(), new RowData(250, 250, new Margins(5)));
}
subContainer.add(container);
cp.add(subContainer, new RowData(1, 1));
cp.setSize(400, 200);
viewport.add(cp , new AnchorData("100% 100%", new Margins(10)));

RootPanel.get().add(viewport);
}

private Chart getChart()
{
String url = /*!Helper.isExplorer() ? "../../" :*/ "";
url += "chart/open-flash-chart.swf";
final Chart chart = new Chart(url);
chart.setBorders(true);
chart.setChartModel(getPieChartData());
return chart;
}

private ChartModel getPieChartData()
{
ChartModel cm = new ChartModel("Test chart", "font-size: 14px; font-family: Verdana; text-align: center;");
cm.setBackgroundColour("#fffff5");
Legend lg = new Legend(Position.RIGHT, true);
lg.setPadding(10);
cm.setLegend(lg);

PieChart pie = new PieChart();
pie.setAlpha(0.5f);
pie.setNoLabels(true);
pie.setTooltip("#percent#");
pie.setColours("#00aa00", "#ff0000");

double done = 70;
double notDone = 100 - done;

pie.addSlices(new PieChart.Slice(done, "","done"));
pie.addSlices(new PieChart.Slice(notDone, "", "not done"));

cm.addChartConfig(pie);
return cm;
}
}Thanks in advance for your help.

Best regards

[Nico33]

I've believed that TableRowLayout could save my life, but it fit's on width.

How can it overflow and go below ?

[Nico33]

I finally achieved doing something that seems to be what I what.
But I don't really like how I've done that ... with setStyleAttribute ... float ... left ... clear ...

Do you think this code is acceptable ?


public class TestApp implements EntryPoint
{
public void onModuleLoad()
{
Viewport viewport = new Viewport();
viewport.setLayout(new AnchorLayout());

Portal p = new Portal(2);
p.setSize("100%", "100%");
p.setColumnWidth(0, .33);
p.setColumnWidth(1, .67);

Portlet left = new Portlet(new FitLayout());
left.add(getChart(false));
p.add(left, 0);

Portlet right = new Portlet();

LayoutContainer container = new LayoutContainer();
container.setScrollMode(Scroll.AUTO);
container.setLayout(new FlowLayout());
for (int i = 0 ; i < 7 ; i++)
{
container.add(getChart(true));
}
Html html = new Html();
html.setStyleAttribute("clear", "both");
container.add(html);
right.add(container);
p.add(right, 1);


viewport.add(p , new AnchorData("100% 100%", new Margins(10)));

RootPanel.get().add(viewport);
}

private Chart getChart(boolean add)
{
String url = /*!Helper.isExplorer() ? "../../" :*/ "";
url += "chart/open-flash-chart.swf";
final Chart chart = new Chart(url);
chart.setBorders(true);

if (add)
chart.setStyleAttribute("float", "left");
chart.setWidth(250);
chart.setHeight(250);

chart.setChartModel(getPieChartData());
return chart;
}

private ChartModel getPieChartData()
{
ChartModel cm = new ChartModel("Test chart", "font-size: 14px; font-family: Verdana; text-align: center;");
cm.setBackgroundColour("#fffff5");
Legend lg = new Legend(Position.RIGHT, true);
lg.setPadding(10);
cm.setLegend(lg);

PieChart pie = new PieChart();
pie.setAlpha(0.5f);
pie.setNoLabels(true);
pie.setTooltip("#percent#");
pie.setColours("#00aa00", "#ff0000");

double done = 70;
double notDone = 100 - done;

pie.addSlices(new PieChart.Slice(done, "","done"));
pie.addSlices(new PieChart.Slice(notDone, "", "not done"));

cm.addChartConfig(pie);
return cm;
}
}Isn't there a better way to do that ?

Thanks for your answers