Problems with using extra style names in 6.0 and its new theme

Hi everybody !

I started to play with the 6.0.0 and a new theme and got a small problem. Not sure, is this a theme bug or Im doing something wrong, so here is the problem:

I want to make the header area of the application with a “black” style. The layouting is as follows:

  • header area is a VerticalLayout, with setStyleName set to “black”. It contains a couple of HorizontalLayouts inside with no custom style name set.
  • navigation area is a VerticalLayout with a Tree component on it, with a custom style set to “blue” (set to layout, not to the tree)
  • center area is a VerticalLayout with a TabSheet on it. Again, no custom style name is set.

The problem is that when application starts or new user makes a session , the tree items text as well as TabSheet tabs are rendered very poorly:

But if I’ll reload a browser page, everything comes to peace:

The problem happens every time application starts, so it does not seem to be related to local browser cache, I tried from several browsers (Safari, FF3).

Hmm, it seems like the menu and the tabsheet are somehow trying to adapt to the black style. Are you sure you’re applying the black stylename only to the upper layout, and the other layouts are not contained within it (because the stylename will inherit to any contained layouts as well)?

Source code would help a lot, too.

I did a similar view myself, and didn’t run into any problems.

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

popping-up the post, as Im afraid it might be lost in time due to people absence for JavaOne :wink:
Any idea on what can be causing such behavior ?

So, it seems no idea on what’s could be wrong ? :slight_smile: 6.0.1 did not fix it either

Hi Dimitri, and my major apologies for forgetting this issue during JavaOne and on my vacation that followed it!

I’ll take another look at this next thing tomorrow and see if I could reproduce the oddities. Hang in there! :slight_smile:

Hi Jouni,
hope you had a great vacation :slight_smile:

Thanks, I did. Can’t beat the Finnish country-side with a summer cottage, moderate renovation and lots of sun :slight_smile:

Back to the topic, it looks like you’re somehow applying a “black” stylename on the main window on the first render. I don’t know how your app gets initialized, but in the stripped-down code you provided no such style was set.

So check with e.g. Firebug after the initial render, when the issue is present, do you have a classname “black” in the same DIV that has classname “v-view”. That’s most likely the cause of this.

Jouni, I owe you a wide glass of best beer, when I’ll get visit Finland :slight_smile:

The reason of artifacts was just a single line in init method

getMainWindow ().setStyleName ( "black" );

Do not remember how I got this there… seems really need to finally plan a vacation :wink:

Thanks a lot for the hint, it is fixed now :slight_smile: