Panel Scroll Bar going below web page

Hi Everyone,

I’m sure this is a very elementary question, and I apologize for those that probably get this type of question all the time, but after reading the documentation and searching the forums, I’m still confused on how to get my scroll bars to work correctly. I’ve just started using Vaadin 2 days ago, and really am enjoying how easy it is to create AJAX web apps just based on java, but am struggling with my layouts.

Currently I have an XML that I’m displaying as a Label in a Panel, but the scroll bar for the panel is going below the bottom of my window, so I’m not able to see what is in the bottom of the panel. Can someone see what I’m doing wrong? I’ve tried changing things to be an undefined size, full size, etc, but have not been able to find the correct combination to make it work right.

Thank you for any help. My code is below. Also please feel free to point out any other stupid mistakes I’ve made or better ways to do this. Like I’ve said I’ve only been using Vaadin for 2 days so am trying to absorb all of the info I can.

Thanks!
Tim

package com.windstream.oss.test.project;

import java.math.BigDecimal;
import java.sql.Clob;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import com.paetec.oss.db.oracle.OracleConnectionPool;
import com.vaadin.Application;
import com.vaadin.annotations.AutoGenerated;
import com.vaadin.data.util.BeanContainer;
import com.vaadin.event.ItemClickEvent;
import com.vaadin.event.ItemClickEvent.ItemClickListener;
import com.vaadin.terminal.Sizeable;
import com.vaadin.terminal.ThemeResource;
import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;
import com.windstream.oss.test.project.data.SaoTransaction;

public class VaadintestprojectApplication extends Application {
	
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private VerticalLayout mainLayout;
	private HorizontalLayout detailLayout;
	private VerticalLayout resultsLayout;
	private Embedded titleImage;
	private VerticalLayout searchLayout;
	private TextField searchByPSR;
	private TextField searchByCustomer;
	private Button searchButton;
	private VerticalLayout saoLayout;
	private Table saoTransactionTable;
	private Label xml;
	private Panel xmlPanel;
	
	@Override
	public void init() {
		
		Window mainWindow = new Window("Vaadin Test Project Application");
		setTheme("windstream");
		setMainWindow(mainWindow);
		mainWindow.getContent().setSizeFull();
		
		mainLayout = new VerticalLayout();
		mainLayout.setImmediate(false);
		mainLayout.setMargin(false);	
		mainWindow.addComponent(mainLayout);		
		
		// titleImage
		titleImage = new Embedded();
		titleImage.setImmediate(false);
		titleImage.setWidth(Sizeable.SIZE_UNDEFINED, 0);
		titleImage.setHeight(Sizeable.SIZE_UNDEFINED, 0);
		titleImage.setSource(new ThemeResource("img/Title.png"));
		titleImage.setType(1);
		titleImage.setMimeType("image/png");
		
		mainLayout.addComponent(titleImage);//, "top:10px; left:10px");
		
		detailLayout = new HorizontalLayout();
		mainLayout.addComponent(detailLayout);
		
		//Build search panel
		Panel searchPanel = new Panel("Search");
		searchPanel.setHeight(Sizeable.SIZE_UNDEFINED, 0);
		searchPanel.setWidth(Sizeable.SIZE_UNDEFINED, 0);
		searchPanel.getContent().setSizeUndefined();
		detailLayout.addComponent(searchPanel);//, "top:100px; left:10px");
		
		// psrSearchLayout
		buildSearchLayout();
		searchPanel.addComponent(searchLayout);	
		
	}

	@AutoGenerated
	private void buildSearchLayout() {
		// common part: create layout
		searchLayout = new VerticalLayout();
		searchLayout.setImmediate(false);
		searchLayout.setWidth(Sizeable.SIZE_UNDEFINED, 0);
		searchLayout.setHeight(Sizeable.SIZE_UNDEFINED, 0);
		searchLayout.setMargin(true);
		searchLayout.setSpacing(true);
		
		
		// search PSR
		searchByPSR = new TextField();
		searchByPSR.setCaption("PSR Number");
		searchByPSR.setImmediate(false);
		searchByPSR.setWidth(Sizeable.SIZE_UNDEFINED, 0);
		searchByPSR.setHeight(Sizeable.SIZE_UNDEFINED, 0);
		searchByPSR.setRequired(false);
		searchLayout.addComponent(searchByPSR);
		searchLayout.setComponentAlignment(searchByPSR, Alignment.BOTTOM_LEFT);
		
		// search Customer
		searchByCustomer = new TextField();
		searchByCustomer.setCaption("Customer Number");
		searchByCustomer.setImmediate(false);
		searchByCustomer.setWidth(Sizeable.SIZE_UNDEFINED, 0);
		searchByCustomer.setHeight(Sizeable.SIZE_UNDEFINED, 0);
		searchByCustomer.setRequired(false);
		searchLayout.addComponent(searchByCustomer);
		searchLayout.setComponentAlignment(searchByCustomer, Alignment.BOTTOM_LEFT);
		
		// searchButton
		searchButton = new Button();
		searchButton.setCaption("Search");
		searchButton.setImmediate(true);
		searchButton.setWidth(Sizeable.SIZE_UNDEFINED, 0);
		searchButton.setHeight(Sizeable.SIZE_UNDEFINED, 0);
		searchButton.setDisableOnClick(true);
		
		searchButton.addListener(new Button.ClickListener() {
			
			/**
			 * 
			 */
			private static final long serialVersionUID = 1L;

			@Override
			public void buttonClick(ClickEvent event) {
				
				//Need to remove elements so we don't keep building to the side.
				if (resultsLayout != null) {
					resultsLayout.removeAllComponents();
				}
				
				resultsLayout = new VerticalLayout();
				detailLayout.addComponent(resultsLayout);
				
				buildSaoLayout();
				resultsLayout.addComponent(saoLayout);//, "top:100px; left:250px");
				
				//re enable the searchButton
				searchButton.setEnabled(true);
			}
		});
		
		searchLayout.addComponent(searchButton);
		searchLayout.setComponentAlignment(searchButton, Alignment.BOTTOM_RIGHT);
		
	}
	
	private void buildSaoLayout() {
		// common part: create layout
		saoLayout = new VerticalLayout();
		saoLayout.setSizeUndefined();
		
		saoLayout.setImmediate(false);
		saoLayout.setWidth(Sizeable.SIZE_UNDEFINED, 0);
		saoLayout.setHeight(Sizeable.SIZE_UNDEFINED, 0);
		saoLayout.setMargin(true);
		saoLayout.setSpacing(true);

		
		// saoTransaction
		saoTransactionTable = new Table();
		BeanContainer<Integer, SaoTransaction> transactions = new BeanContainer<Integer, SaoTransaction>(SaoTransaction.class);
		
		transactions.setBeanIdProperty("id");
		
		ArrayList<SaoTransaction> saoTransactions = null;
		try {
			saoTransactions = getSaoOrders((String) searchByCustomer.getData(), Integer.valueOf((String) searchByPSR.getValue()));
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		for (SaoTransaction saoTransaction : saoTransactions) {
						
			transactions.addBean(saoTransaction);
		}
		
		saoTransactionTable.setContainerDataSource(transactions);
		
		saoTransactionTable.setColumnHeader("id", "Transaction Id");
		saoTransactionTable.setColumnHeader("customerNumber", "Customer Number");
		saoTransactionTable.setColumnHeader("orderNumber", "PSR Number");
		saoTransactionTable.setColumnHeader("saoOrderNumber", "SAO Order Number");
		saoTransactionTable.setColumnHeader("transactionTimestamp", "Transaction Timestamp");
		
		saoTransactionTable.setSelectable(true);
		
		saoTransactionTable.setImmediate(false);
		saoTransactionTable.setDescription("SAO Transaction");
		saoTransactionTable.setWidth(Sizeable.SIZE_UNDEFINED, 0);
		saoTransactionTable.setHeight(Sizeable.SIZE_UNDEFINED, 0);
		
		saoTransactionTable.addListener(new ItemClickListener() {
			
			/**
			 * 
			 */
			private static final long serialVersionUID = 1L;

			@Override
			public void itemClick(ItemClickEvent event) {
				
				buildXmlLayout((BigDecimal) event.getItemId());
				
			}
		});
		
		saoLayout.addComponent(saoTransactionTable);
		saoLayout.setComponentAlignment(saoTransactionTable, Alignment.TOP_LEFT);
	}

	private void buildXmlLayout(BigDecimal id) {
		
		xmlPanel = new Panel();
		
		try {
			xml = new Label(getTransactionXML(id));
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		xml.setContentMode(Label.CONTENT_PREFORMATTED);
		
		[b]
xmlPanel.addComponent(xml);
		xmlPanel.setWidth("675px");
		xmlPanel.setHeight("500px");
		xmlPanel.setScrollable(true);
[/b]
		
		resultsLayout.addComponent(xmlPanel);//, "top:450px; left:262px");
	}


    public ArrayList<SaoTransaction> getSaoOrders(String customerNumber, Integer orderNumber) throws SQLException {

		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		ArrayList<SaoTransaction> saoTransactions = new ArrayList<SaoTransaction>();
		
		try {
			conn = OracleConnectionPool.getPool("tbs").getConnection();
			
			String sql = null;
			
			if (customerNumber != null) {
				sql = "Select * from asapit.PT_SCP_TRANSACTION where customer_number = ?";
			}
			
			if (orderNumber != null) {
				sql = "Select * from asapit.PT_SCP_TRANSACTION where order_number = ?";
			}
			
			ps = conn.prepareStatement(sql);
			
			if (customerNumber != null) {
				ps.setString(1, customerNumber);
			}
			
			if (orderNumber != null) {
				ps.setInt(1, orderNumber);
			}
			
			rs = ps.executeQuery();
			
			while (rs.next()) {
				
				SaoTransaction saoTransaction = new SaoTransaction();
				saoTransaction.setId(rs.getBigDecimal("ID"));
				saoTransaction.setCustomerNumber(rs.getString("customer_number"));
				saoTransaction.setOrderNumber(rs.getInt("order_number"));
				saoTransaction.setTransactionTimestamp(rs.getTimestamp("transaction_time"));
				saoTransaction.setSaoOrderNumber(rs.getString("sao_order_response"));
			
				saoTransactions.add(saoTransaction);
			}
		}
		catch (Exception e) {
			System.out.println(e);
		}
		finally {    
			try {
				if (rs != null) {
					rs.close();
				}
            } catch (SQLException e) {
            }
			
        	try {
        		if (ps != null) {
        			ps.close();
        		}
            } catch (SQLException e) {
            }
    				
    		try {
    			if (conn != null) {
    				conn.close();
    			}
    		} catch (Exception e) {
    		}
        }
				
		return saoTransactions;
		
	}
    
public String getTransactionXML(BigDecimal id) throws SQLException {
		
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		String transactionXml = null;
		
		try {
			conn = OracleConnectionPool.getPool("tbs").getConnection();
			
			
			String sql = "Select * from asapit.PT_SCP_TRANSACTION where id = ?";
			
			ps = conn.prepareStatement(sql);
			
			ps.setBigDecimal(1, id);
			
			rs = ps.executeQuery();
			
			while (rs.next()) {
				
				Clob clob = rs.getClob("transaction_xml");
				
				transactionXml = clob.getSubString(1, (int) clob.length());
			}
		}
		catch (Exception e) {
			System.out.println(e);
		}
		finally {    
			try {
				if (rs != null) {
					rs.close();
				}
            } catch (SQLException e) {
            }
			
        	try {
        		if (ps != null) {
        			ps.close();
        		}
            } catch (SQLException e) {
            }
    				
    		try {
    			if (conn != null) {
    				conn.close();
    			}
    		} catch (Exception e) {
    		}
        }
				
		return transactionXml;
		
	}

}

I believe I found the cause to my problem. I didn’t have a setContent for the main window. After adding mainWindow.setContent(mainLayout); things started to work as I was expecting.