Yep, “black” style set only to header VerticalLayout and “blue” style set only to navigation VerticalLayout. Layouts are assembled as follows:
(I stripped-out all logic-related lines of code to reduce the post size, but all UI manipulation left as is)
Here is the right navigation bar:
public class ConsoleNavigator extends VerticalLayout
{
private Tree navigationTree = new Tree();
public ConsoleNavigator()
{
super();
initUI();
}
private void initUI ()
{
setStyleName ( "blue" );
setHeight ( "100%" );
setWidth ( "300px" );
setMargin ( true );
navigationTree.setWidth ( null );
navigationTree.setHeight ( "100%" );
addComponent ( navigationTree );
setExpandRatio ( navigationTree, 1.0f );
}
}
Now, here is the black top header bar:
public class ConsoleHeader extends VerticalLayout
{
private HorizontalLayout header1 = new HorizontalLayout ();
private HorizontalLayout header2 = new HorizontalLayout ();
private Label title = new Label ( TM.get ( "console.main.product.name" ) );
private Label info = new Label ( String.format ( TM.get ( "console.main.product.version" ),
ArchiveSystemVersionManager.getVersionNumber (),
ArchiveSystemVersionManager.getBuildNumber (),
ArchiveSystemVersionManager.getDevelopmentStatusInfo () ) );
private Button btnExit = new Button ( TM.get ( "console.main.button.exit" ) );
public ConsoleHeader ()
{
super ();
initUI ();
}
private void initUI ()
{
setStyleName ( "black" );
setWidth ( "100%" );
setMargin ( false );
setSpacing ( false );
header1.setMargin ( true );
header2.setMargin ( true );
header1.setHeight ( null );
header2.setHeight ( null );
header1.setSpacing ( false );
header2.setSpacing ( false );
title.setStyleName ( "h1" );
btnExit.setStyleName ( "small" );
header1.setWidth ( "100%" );
header2.setWidth ( "100%" );
header1.addComponent ( title );
header1.addComponent ( btnExit );
header2.addComponent ( info );
header1.setComponentAlignment ( title, Alignment.TOP_LEFT );
header1.setComponentAlignment ( btnExit, Alignment.TOP_RIGHT );
header1.setExpandRatio ( title, 1.0f );
header2.setComponentAlignment ( info, Alignment.TOP_LEFT );
addComponent ( header1 );
addComponent ( header2 );
}
}
Now, here is how this all assembled in the main window:
public class ConsoleMainWindow extends Window
{
ConsoleHeader header = new ConsoleHeader();
ConsoleNavigator navigator = new ConsoleNavigator();
TPTMultiView content = new TPTMultiView ( true );
public ConsoleMainWindow()
{
super();
setCaption ( TM.get ("console.main.title") );
initUI();
}
private void initUI ()
{
VerticalLayout layout = new VerticalLayout ();
layout.setMargin ( false );
layout.setSpacing ( false );
layout.setHeight ( "100%" );
setContent ( layout );
HorizontalLayout centerLayout = new HorizontalLayout ();
centerLayout.setMargin ( false );
centerLayout.setSpacing ( false );
centerLayout.setWidth ( "100%" );
centerLayout.setHeight ( "100%" );
centerLayout.addComponent ( navigator );
centerLayout.addComponent ( content );
centerLayout.setExpandRatio ( content, 1.0f );
content.setMargin ( true );
layout.addComponent ( header );
layout.addComponent ( centerLayout );
layout.setExpandRatio ( centerLayout, 1.0f );
}
}
That’s all. TPTMultiView is a multi view component from my contrib/tpt package, however it is based just on vertical layout (extends it) and does not set any styles inside.
Thanks for all your help,
Dmitri