* That covers the top bar. Now let's move on to the sidebar and track
* listing
*/
// We'll need one splitpanel to separate the sidebar and track listing
HorizontalSplitPanel bottom = new HorizontalSplitPanel();
rootLayout.addComponent(bottom);
// The splitpanel is by default 100% x 100%, but we'll need to adjust
// our main window layout to accomodate the height
rootLayout.setExpandRatio(bottom, 1.0F);
// Give the sidebar less space than the listing
bottom.setSplitPosition(200, Sizeable.UNITS_PIXELS);
// Let's add some content to the sidebar
// First, we need a layout to but all components in
VerticalLayout sidebar = new VerticalLayout();
sidebar.setSizeFull();
bottom.setFirstComponent(sidebar);
/*
* Then we need some labels and buttons, and an album cover image The
* labels and buttons go into their own vertical layout, since we want
* the 'sidebar' layout to be expanding (cover image in the bottom).
* VerticalLayout is by default 100% wide.
*/
VerticalLayout selections = new VerticalLayout();
Label library = new Label("Library");
Button music = new NativeButton("Music");
music.setWidth("100%");
Label store = new Label("Store");
Button vaadinTunesStore = new NativeButton("VaadinTunes Store");
vaadinTunesStore.setWidth("100%");
Button purchased = new NativeButton("Purchased");
purchased.setWidth("100%");
Label playlists = new Label("Playlists");
Button genius = new NativeButton("Geniues");
genius.setWidth("100%");
Button recent = new NativeButton("Recently Added");
recent.setWidth("100%");
// Lets add them to the 'selections' layout
selections.addComponent(library);
selections.addComponent(music);
selections.addComponent(store);
selections.addComponent(vaadinTunesStore);
selections.addComponent(purchased);
selections.addComponent(playlists);
selections.addComponent(genius);
selections.addComponent(recent);
// Then add the selections to the sidebar, and set it expanding
sidebar.addComponent(selections);
sidebar.setExpandRatio(selections, 1.0F);
// Then comes the cover artwork (we'll add the actual image in the
// themeing section)
Embedded cover = new Embedded("Currently Playing");
sidebar.addComponent(cover);
/*
* And lastly, we need the track listing table It should fill the whole
* left side of our bottom layout
*/
Table listing = new Table();
listing.setSizeFull();
listing.setSelectable(true);
bottom.setSecondComponent(listing);
// Add the table headers
listing.addContainerProperty("Name", String.class, "");
listing.addContainerProperty("Time", String.class, "0:00");
listing.addContainerProperty("Artist", String.class, "");