Panel with Scrollbar

Hiho!
Im new to Vaadin Framework. Iam a Student and I use Vaadin for a Project, thats why i cant buy Vaadin Charts. So i use
JFreeChartWrapper.


My Problem:

I use a Panel on a Absolute Layout(1280*800).
I put my Component from JFreeChartWrapper on the Panel and then the Panel on the absoluteLayout.

My Chart Category Axe is very Weight cause i have 24hours60Minutes60Seconds Units on my chart.
What i have to do, to get a Scrollbar in the Panel to see all Values in my Chart. My Panel should have max Weight of 600px.

important Components:

  1. Absolute Layout: mainLayout
  2. Panel:panel_Chart
  3. Funktion changeToChart() → I add the Panel/Chart to the Layout

Some Code:

package de.fhstralsund.stressalerter.view;

import java.io.File;

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.data.Container;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.Property.ValueChangeListener;
import com.vaadin.server.FileResource;
import com.vaadin.server.ThemeResource;
import com.vaadin.server.VaadinService;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.Embedded;
import com.vaadin.ui.GridLayout;
import com.vaadin.ui.OptionGroup;
import com.vaadin.ui.Panel;
import com.vaadin.ui.Table;
import com.vaadin.ui.VerticalLayout;

import de.fhstralsund.stressalerter.database.DatabaseManager;

@SuppressWarnings("serial")
public class Startseite extends CustomComponent {

    @AutoGenerated
    private AbsoluteLayout mainLayout;
    @AutoGenerated
    private Panel panel_Chart;
    @AutoGenerated
    private VerticalLayout verticalLayout_1;
    @AutoGenerated
    private Table table_data;
    @AutoGenerated
    private Embedded embedded_stressalerterlogo;
    @AutoGenerated
    private OptionGroup optionGroup_view;
    @AutoGenerated
    private GridLayout gridLayout_1;
    @AutoGenerated
    private CheckBox checkBox_maxAlarm;
    @AutoGenerated
    private CheckBox checkBox_minAlarm;
    @AutoGenerated
    private CheckBox checkBox_mood;
    @AutoGenerated
    private CheckBox checkBox_intervention;
    @AutoGenerated
    private CheckBox checkBox_activity;
    @AutoGenerated
    private CheckBox checkBox_alarm;
    @AutoGenerated
    private ComboBox comboBox_Date;
    /*- VaadinEditorProperties={"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":true,"snappingDistance":10} */
    private Container tableContainer;
    private Container dateContainer;
    private DatabaseManager data;
    private Chart chart;

    /**
     * The constructor should first build the main layout, set the composition
     * root and then do any custom initialization.
     *
     * The constructor will not be automatically regenerated by the visual
     * editor.
     */
    @SuppressWarnings("deprecation")
    public Startseite() {
        // datenbank
        data = new DatabaseManager();
        buildMainLayout();
        setCompositionRoot(mainLayout);
        
        //Panel für die Chart
        panel_Chart.setImmediate(true);
        
        // Listener wenn eine checkbox aktiviert/deaktiviert wird
        ValueChangeListener checkBoxListener = new Property.ValueChangeListener() {
            public void valueChange(ValueChangeEvent event) {
                checkCheckboxes();
            }

        };
        checkBox_activity.addValueChangeListener(checkBoxListener);
        checkBox_intervention.addValueChangeListener(checkBoxListener);
        checkBox_mood.addValueChangeListener(checkBoxListener);
        checkBox_alarm.addValueChangeListener(checkBoxListener);
        checkBox_minAlarm.addValueChangeListener(checkBoxListener);
        checkBox_maxAlarm.addValueChangeListener(checkBoxListener);

        // listener combobox wenn ein neues Datum ausgewählt wird
        comboBox_Date
                .addValueChangeListener(new Property.ValueChangeListener() {
                    public void valueChange(ValueChangeEvent event) {
                        if (comboBox_Date.getValue() != null) {
                            refreshDate();
                            
                        }
                    }
                });
        // combobox mit Dates füllen
        dateContainer = data.getAllDates();
        comboBox_Date.setImmediate(true);
        comboBox_Date.setContainerDataSource(dateContainer);

        // Tabellenoptionen Spalten ausblenden/Verschieben
        table_data.setColumnReorderingAllowed(true);
        table_data.setColumnCollapsingAllowed(true);

        // Auswahl zwischen Tabelle und Diagramm mit litener
        optionGroup_view.addItem("Tabelle");
        optionGroup_view.addItem("Diagramm");
        optionGroup_view.select("Tabelle");
        optionGroup_view.setImmediate(true);
        optionGroup_view
                .addValueChangeListener(new Property.ValueChangeListener() {
                    @Override
                    public void valueChange(ValueChangeEvent event) {
                        if (optionGroup_view.getValue().toString()
                                .equals("Tabelle")) {
                            changeToTable();
                        } else {
                            changeToChart();
                        }
                    }
                });

        // Logo/Header von Stressalerter
        FileResource resource = new FileResource(new File(VaadinService
                .getCurrent().getBaseDirectory().getAbsolutePath()
                + "/WEB-INF/pics/logo.jpg"));
        embedded_stressalerterlogo.setSource(resource);
        // chart erstellen
        chart = new Chart();
        changeToTable();
        refreshDate();

    }

    /**
     * wenn ein neues Datum in der ComboBox ausgewählt wird müssen die
     * Sensordaten abgerufen werden
     */
    private void refreshDate() {
        String date;
        if (comboBox_Date.getValue() == null) {
            date = "";
        } else {
            date = comboBox_Date.getValue().toString();
        }
        if (optionGroup_view.getValue().toString().equals("Tabelle")) {
            tableContainer = data.getTable(data.getDateId(date));
            table_data.setContainerDataSource(tableContainer);
            setTableHeader();
            checkCheckboxes();
        } else {
            changeToChart();
        }
    }

    /**
     * einstellungen werden für die Tabelle vorgenommen
     */
    public void changeToTable() {    
        panel_Chart.setVisible(false);
        table_data.setVisible(true);
        checkBox_minAlarm.setVisible(false);
        checkBox_maxAlarm.setVisible(false);
        checkBox_alarm.setVisible(false);
        checkBox_activity.setValue(true);
        checkBox_mood.setValue(true);
        checkBox_intervention.setValue(true);
        
    }

    /**
     * einstellungen werden für das Diagramm vorgenommen
     */
    public void changeToChart() {
        panel_Chart.setVisible(true);
        String date;
        if (comboBox_Date.getValue() == null) {
            date = "";
        } else {
            date = comboBox_Date.getValue().toString();
        }
        chart.createNewResult();
        panel_Chart.setContent(chart.refreshTable(data
                .getDateId(date)));
        table_data.setVisible(false);
        checkBox_minAlarm.setVisible(true);
        checkBox_maxAlarm.setVisible(true);
        checkBox_alarm.setVisible(true);
        checkBox_activity.setValue(true);
        checkBox_mood.setValue(true);
        checkBox_intervention.setValue(true);
    }

    /*
     * überprüfen welche checkboxen gesetzt sind
     */
    private void checkCheckboxes() {

        // abfrage ob in der checkbox tabelle ausgewählt ist
        if (optionGroup_view.getValue().toString().equals("Tabelle")) {
            if (checkBox_activity.getValue() == true) {
                table_data.setColumnCollapsed("activityName", false);
            } else {
                table_data.setColumnCollapsed("activityName", true);
            }
            if (checkBox_mood.getValue() == true) {
                table_data.setColumnCollapsed("moodName", false);
            } else {
                table_data.setColumnCollapsed("moodName", true);
            }
            if (checkBox_intervention.getValue() == true) {
                table_data.setColumnCollapsed("interventionName", false);
            } else {
                table_data.setColumnCollapsed("interventionName", true);
            }
        }

    }

    public void setTableHeader() {
        Object[] columns = new Object[]
 { "time", "frequency", "activityName",
                "moodName", "interventionName" };
        table_data.setVisibleColumns(columns);
        // set column headers
        table_data.setColumnHeaders(new String[] { "Zeit", "Herzfrequenz",
                "Aktivität", "Stimmung", "Intervention" });
    }

    @AutoGenerated
    private AbsoluteLayout buildMainLayout() {
        // common part: create layout
        mainLayout = new AbsoluteLayout();
        mainLayout.setImmediate(false);
        mainLayout.setWidth("1280px");
        mainLayout.setHeight("800px");
        
        // top-level component properties
        setWidth("1280px");
        setHeight("800px");
        
        // comboBox_Date
        comboBox_Date = new ComboBox();
        comboBox_Date.setCaption("Auswahl des Tages");
        comboBox_Date.setImmediate(false);
        comboBox_Date.setDescription("Auswahl des Tages");
        comboBox_Date.setWidth("140px");
        comboBox_Date.setHeight("24px");
        mainLayout.addComponent(comboBox_Date, "top:202.0px;left:20.0px;");
        
        // gridLayout_1
        gridLayout_1 = buildGridLayout_1();
        mainLayout.addComponent(gridLayout_1, "top:202.0px;left:200.0px;");
        
        // optionGroup_view
        optionGroup_view = new OptionGroup();
        optionGroup_view.setStyleName("Ansicht");
        optionGroup_view.setCaption("Ansicht");
        optionGroup_view.setImmediate(false);
        optionGroup_view.setDescription("Ansicht");
        optionGroup_view.setWidth("160px");
        optionGroup_view.setHeight("40px");
        mainLayout.addComponent(optionGroup_view, "top:260.0px;left:20.0px;");
        
        // embedded_stressalerterlogo
        embedded_stressalerterlogo = new Embedded();
        embedded_stressalerterlogo.setImmediate(false);
        embedded_stressalerterlogo.setWidth("617px");
        embedded_stressalerterlogo.setHeight("169px");
        embedded_stressalerterlogo
                .setSource(new ThemeResource("pics/logo.jpg"));
        embedded_stressalerterlogo.setType(1);
        embedded_stressalerterlogo.setMimeType("image/png");
        mainLayout.addComponent(embedded_stressalerterlogo,
                "top:11.0px;right:484.0px;");
        
        // table_data
        table_data = new Table();
        table_data.setImmediate(false);
        table_data.setWidth("640px");
        table_data.setHeight("220px");
        mainLayout.addComponent(table_data, "top:233.0px;left:200.0px;");
        
        // panel_Chart
        panel_Chart = buildPanel_Chart();
        mainLayout.addComponent(panel_Chart, "top:233.0px;left:200.0px;");
        
        return mainLayout;
    }

    @AutoGenerated
    private GridLayout buildGridLayout_1() {
        // common part: create layout
        gridLayout_1 = new GridLayout();
        gridLayout_1.setImmediate(false);
        gridLayout_1.setWidth("-1px");
        gridLayout_1.setHeight("22px");
        gridLayout_1.setMargin(false);
        gridLayout_1.setSpacing(true);
        gridLayout_1.setColumns(8);
        
        // checkBox_alarm
        checkBox_alarm = new CheckBox();
        checkBox_alarm.setCaption("Alarm");
        checkBox_alarm.setImmediate(false);
        checkBox_alarm.setWidth("-1px");
        checkBox_alarm.setHeight("-1px");
        gridLayout_1.addComponent(checkBox_alarm, 0, 0);
        
        // checkBox_activity
        checkBox_activity = new CheckBox();
        checkBox_activity.setCaption("Aktivität");
        checkBox_activity.setImmediate(false);
        checkBox_activity.setWidth("-1px");
        checkBox_activity.setHeight("-1px");
        gridLayout_1.addComponent(checkBox_activity, 1, 0);
        
        // checkBox_intervention
        checkBox_intervention = new CheckBox();
        checkBox_intervention.setCaption("Intervention");
        checkBox_intervention.setImmediate(false);
        checkBox_intervention.setWidth("-1px");
        checkBox_intervention.setHeight("-1px");
        gridLayout_1.addComponent(checkBox_intervention, 2, 0);
        
        // checkBox_mood
        checkBox_mood = new CheckBox();
        checkBox_mood.setCaption("Stimmung");
        checkBox_mood.setImmediate(false);
        checkBox_mood.setWidth("-1px");
        checkBox_mood.setHeight("-1px");
        gridLayout_1.addComponent(checkBox_mood, 3, 0);
        
        // checkBox_minAlarm
        checkBox_minAlarm = new CheckBox();
        checkBox_minAlarm.setCaption("min. Alarm");
        checkBox_minAlarm.setImmediate(false);
        checkBox_minAlarm.setWidth("-1px");
        checkBox_minAlarm.setHeight("-1px");
        gridLayout_1.addComponent(checkBox_minAlarm, 4, 0);
        
        // checkBox_maxAlarm
        checkBox_maxAlarm = new CheckBox();
        checkBox_maxAlarm.setCaption("max. Alarm");
        checkBox_maxAlarm.setImmediate(false);
        checkBox_maxAlarm.setWidth("-1px");
        checkBox_maxAlarm.setHeight("-1px");
        gridLayout_1.addComponent(checkBox_maxAlarm, 5, 0);
        
        return gridLayout_1;
    }

    @AutoGenerated
    private Panel buildPanel_Chart() {
        // common part: create layout
        panel_Chart = new Panel();
        panel_Chart.setImmediate(false);
        panel_Chart.setWidth("100px");
        panel_Chart.setHeight("30px");
        
        // verticalLayout_1
        verticalLayout_1 = new VerticalLayout();
        verticalLayout_1.setImmediate(false);
        verticalLayout_1.setWidth("100.0%");
        verticalLayout_1.setHeight("100.0%");
        verticalLayout_1.setMargin(false);
        panel_Chart.setContent(verticalLayout_1);
        
        return panel_Chart;
    }
}

16710.png

Hello,

Vaadin panels should show scrollbars by default if its content overflows its width. Unfortunately I don’t have prior experience with JFreeChartWrapper so I can’t help you there.

You don’t set any width or height on “chart”, so you get the defaults


http://demo.vaadin.com/javadoc/com.vaadin.addon/vaadin-charts/1.0.0/com/vaadin/addon/charts/Chart.html#Chart()
:

Default dimensions are 100% width and 400px height.

If you want a horizontal scrollbar you need to set an actual width on the chart

I dont use Vaadin Charts :frowning: to expensive for a Students Project. I Use JFreeChart…
I tried some oher code, so the panel works well. but i dont get a larger width from JfreeChartWrapper. But thats not a Problem for this forum. Thank u anyway!

Hans

Ah. Read it and then forgot it…

At line 191 you set the content of panel_Chart to chart.refreshTable(…)
I assume “refreshTable” just returns self, so you set the content to “chart”

“chart” is an instance of “Chart”. As you say, this is not the Vaadin chart. I assume this is your own class?
You don’t set any width or height on it in this source. Do you set a width/height in the Chart constructor, or in “refreshTable”?

if your “Chart” extends JFreeChartWrapper you should get a default size of 809px by 500px, according to Google, and then you should have scrollbars on the Panel, since the Panel is 100px by 30px.

U r right. chart is an instance of my Class Chart. and chart.refreshTable() returns the component from JFreeChartWrapper:

[code]
/**
*
* @param dateID
* id vom ausgewählten Tag
* @return component -Gibt ein Vaadin component zurück
*/
public JFreeChartWrapper refreshTable(long dateID) {

    chart = ChartFactory.createLineChart("Frequenz/Zeit Übersicht", // chart
            // title
            "Zeit", // domain axis label
            "Frequenz", // range axis label
            createDataset(dateID), // data
            PlotOrientation.VERTICAL, // orientation
            true, // include legend
            true, // tooltips
            false // urls
            );
    
    CategoryPlot plot = (CategoryPlot) chart.getPlot();
    ValueAxis valueAxis = plot.getRangeAxis();        
    valueAxis.setRange(70, 100);
    
    CategoryAxis categoryAxis = plot.getDomainAxis();            
    categoryAxis.setCategoryLabelPositions(CategoryLabelPositions.UP_45);

    JFreeChartWrapper wrapChart = new JFreeChartWrapper(chart);        
    
    return wrapChart;
}

[/code]U r right. i get the Scrollbars in the Panel. First i thought its a problem from wrong configuration of the Vaadin Panel. But now i think/know that my problem is that i cant use a JFreeChart ChartPanel on a JFreeChartWrapper. Because i configure the size of the chart with the chartpanel. so i cant configure the Chart byself.

So i think i have to search in the JFreeChart forums to find some other solutions^^

Sorry for my bad english and thx for ur help