How to use a TableLayout?

[sarsipius]

Hi

I would like to build a grid of 4x3 charts and I try to use the TableLayout

        ContentPanel panel = new ContentPanel();
        panel.setBodyBorder(true);
        panel.setHeading("Traces");
        
        TableLayout tableLayout = new TableLayout(4);
        tableLayout.setHeight("100%");
        tableLayout.setWidth("100%");
        tableLayout.setCellVerticalAlign(VerticalAlignment.MIDDLE);
        
        panel.setLayout(tableLayout);
        
        panel.add(chart1,new TableData());
        panel.add(chart2,new TableData());
        panel.add(chart3,new TableData());
        panel.add(chart4,new TableData());
        
        panel.add(chart5,new TableData());
        panel.add(chart6,new TableData());
        panel.add(chart7,new TableData());
        panel.add(chart8,new TableData());
        
        panel.add(chart9,new TableData());
        panel.add(chart10,new TableData());
        panel.add(chart11,new TableData());
        panel.add(chart12,new TableData());

What's wrong with this piece of code?!

The panel stays empty

Thanks

[sven]

Can you please post this code in some context, best would be some runnable testcase implementing entrypoint.

[sarsipius]

here we go:

import com.extjs.gxt.charts.client.Chart;
import com.extjs.gxt.charts.client.model.ChartModel;
import com.extjs.gxt.charts.client.model.Legend;
import com.extjs.gxt.charts.client.model.LineDataProvider;
import com.extjs.gxt.charts.client.model.Legend.Position;
import com.extjs.gxt.charts.client.model.axis.XAxis;
import com.extjs.gxt.charts.client.model.axis.YAxis;
import com.extjs.gxt.charts.client.model.charts.LineChart;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.Style.VerticalAlignment;
import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.Component;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.extjs.gxt.ui.client.widget.layout.TableLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class Test implements EntryPoint {

    public void onModuleLoad() {
        createUI();
    }

    private TraceChart dIWidget = null;
    private TraceChart dIIWidget = null;
    private TraceChart dIIIWidget = null;

    private TraceChart avRWidget = null;
    private TraceChart avLWidget = null;
    private TraceChart avFWidget = null;

    private TraceChart v1Widget = null;
    private TraceChart v2Widget = null;
    private TraceChart v3Widget = null;

    private TraceChart v4Widget = null;
    private TraceChart v5Widget = null;
    private TraceChart v6Widget = null;

    private Viewport viewport = null;

    private void createUI() {
        viewport = new Viewport();
        viewport.setLayout(new BorderLayout());

        BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);

        viewport.add(getUI(),centerData);        

        Registry.register("viewport",viewport);

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

    private Component getUI() {
        ContentPanel center = new ContentPanel();
        center.setBodyBorder(false);
        center.setHeaderVisible(false);
        center.setLayout(new RowLayout(Orientation.HORIZONTAL));

        center.add(getCenter(),new RowData(1,1));

        return center;
    }

    private Component getCenter() {
        LayoutContainer container = new LayoutContainer();
        container.setLayout(new RowLayout(Orientation.VERTICAL));

        container.add(getTracesPanel(),new RowData(1,1,new Margins(4,4,4,4)));

        return container;
    }

    private ContentPanel getTracesPanel() {
        ContentPanel panel = new ContentPanel();
        panel.setBodyBorder(true);
        panel.setHeading("Traces");

        TableLayout tableLayout = new TableLayout(4);
        tableLayout.setHeight("100%");
        tableLayout.setWidth("100%");
        tableLayout.setCellVerticalAlign(VerticalAlignment.MIDDLE);

        panel.setLayout(tableLayout);

        dIWidget = new TraceChart("dI");
        avRWidget = new TraceChart("avR");
        v1Widget = new TraceChart("v1");
        v4Widget = new TraceChart("v2");
        
        panel.add(dIWidget.getChart());
        panel.add(avRWidget.getChart());
        panel.add(v1Widget.getChart());
        panel.add(v4Widget.getChart());

        dIIWidget = new TraceChart("dII");
        avLWidget = new TraceChart("avL");
        v2Widget = new TraceChart("v2");
        v5Widget = new TraceChart("v5");

        panel.add(dIIWidget.getChart());
        panel.add(avLWidget.getChart());
        panel.add(v2Widget.getChart());
        panel.add(v5Widget.getChart());

        dIIIWidget = new TraceChart("dIII");
        avFWidget = new TraceChart("avF");
        v3Widget = new TraceChart("v3");
        v6Widget = new TraceChart("v6");

        panel.add(dIIIWidget.getChart());
        panel.add(avFWidget.getChart());
        panel.add(v3Widget.getChart());
        panel.add(v6Widget.getChart());

        return panel;
    }
    
    class TraceChart {

        private Chart chart = null;
        private ListStore<DotModel> store = null;
        private LineChart line = null;

        private final String url = "chart/open-flash-chart.swf";

        public TraceChart(String leadCode) {
            store = new ListStore<DotModel>();

            chart = new Chart(url);

            ChartModel model = new ChartModel(leadCode,"font-size: 14px; font-family: Verdana; text-align: center;");
            model.setBackgroundColour("#fefefe");
            model.setLegend(new Legend(Position.TOP,true));

            XAxis xa = new XAxis();  
            xa.setRange(0,150,10);
            model.setXAxis(xa);
            
            YAxis ya = new YAxis();  
            ya.setRange(-800,800,100);  
            model.setYAxis(ya);

            line = new LineChart();
            line.setAnimateOnShow(false);
            line.setText("");
            line.setColour("#FF0000");
            LineDataProvider lineProvider = new LineDataProvider("ordonate");
            lineProvider.bind(store);
            line.setDataProvider(lineProvider);
            model.addChartConfig(line);

            chart.setChartModel(model);
        }

        public Chart getChart() {
            return chart;
        }
    }
    
    class DotModel extends BaseModel {

        private static final long serialVersionUID = 1L;
        
        public DotModel() {
            
        }
        
        public DotModel(Integer abscissa,Integer ordonate) {
            setAbscissa(abscissa);
            setOrdonate(ordonate);
        }
        
        public Integer getAbscissa() { return get("abscissa"); }
        public void setAbscissa(Integer abscissa) { set("abscissa",abscissa); }
        
        public Integer getOrdonate() { return get("ordonate"); }
        public void setOrdonate(Integer ordonate) { set("ordonate",ordonate); }
        
    }
}

[sven]

Your Chart components are not sized. TableLayout is not sizing its children. You will need to specify sizes for the charts like:

chart.setSize(200, 200);

[sarsipius]

ok but I would like to use the whole available space
can I use such a thing: chart.setSize("100%","100%")?

[sven]

You should not use percentage sized. You need to listen to the resize event of the parent container and calculate the correct size. You will also need to implement initial sizing.

[sarsipius]

ok but when I use a BorderLayout or a RowLayout, I don't need to fix the chart size...

[sven]

BorderLayout is sizing its children. Same for RowLayout if a RowData is specified.

[sarsipius]

ok thank you

so I will use RowLayout instead of TableLayout

[sven]

You can also use tablelayout. This is for example the code for initial sizing. Just resizing is missing if parent resizes.

chart.addListener(Events.Attach, new Listener<BaseEvent>() {
          public void handleEvent(BaseEvent be) {
            chart.setSize(chart.getParent().getOffsetWidth() / 4, chart.getParent().getOffsetHeight() / 3);
          }
        });