* will automatically revert to zero after the following line).
*/
top.setExpandRatio(status, 1.0F);
// Playback controls
Button prev = new NativeButton("Previous");
Button play = new NativeButton("Play/pause");
Button next = new NativeButton("Next");
playback.addComponent(prev);
playback.addComponent(play);
playback.addComponent(next);
// Set spacing between the buttons
playback.setSpacing(true);
// Volume controls
Button mute = new NativeButton("mute");
Slider vol = new Slider();
vol.setOrientation(SliderOrientation.HORIZONTAL);
vol.setWidth("100px");
Button max = new NativeButton("max");
volume.addComponent(mute);
volume.addComponent(vol);
volume.addComponent(max);
// Status area
status.setWidth("80%");
status.setSpacing(true);
Button toggleVisualization = new NativeButton("Mode");
Label timeFromStart = new Label("0:00");
// We'll need another layout to show currently playing track and
// progress
VerticalLayout trackDetails = new VerticalLayout();
trackDetails.setWidth("100%");
Label track = new Label("Track Name");
Label album = new Label("Album Name - Artist");
track.setWidth(null);
album.setWidth(null);
Slider progress = new Slider();
progress.setOrientation(SliderOrientation.HORIZONTAL);
progress.setWidth("100%");
trackDetails.addComponent(track);
trackDetails.addComponent(album);
trackDetails.addComponent(progress);
trackDetails.setComponentAlignment(track, Alignment.TOP_CENTER);
trackDetails.setComponentAlignment(album, Alignment.TOP_CENTER);
Label timeToEnd = new Label("-4:46");
Button jumpToTrack = new NativeButton("Show");
// Place all components to the status layout and align them properly
status.addComponent(toggleVisualization);
status.setComponentAlignment(toggleVisualization, Alignment.MIDDLE_LEFT);
status.addComponent(timeFromStart);
status.setComponentAlignment(timeFromStart, Alignment.BOTTOM_LEFT);
status.addComponent(trackDetails);
status.addComponent(timeToEnd);
status.setComponentAlignment(timeToEnd, Alignment.BOTTOM_LEFT);
status.addComponent(jumpToTrack);
status.setComponentAlignment(jumpToTrack, Alignment.MIDDLE_LEFT);
// Then remember to specify the expand ratio
status.setExpandRatio(trackDetails, 1.0F);
// View mode buttons
Button viewAsTable = new NativeButton("Table");
Button viewAsGrid = new NativeButton("Grid");
Button coverflow = new NativeButton("Coverflow");
viewmodes.addComponent(viewAsTable);
viewmodes.addComponent(viewAsGrid);
viewmodes.addComponent(coverflow);
/*
* 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);