How to write CSS in Vaadin 6?

Question

I'm doing a project in Vaadin 6. I created all the layouts for my project. But, I got stuck in CSS styling. I couldn't find any easy way to apply CSS styles to my layouts.

I saw this example in Book of Vaadin.

<body>
<div id="v-app">
<div>
   <div class="v-orderedlayout">
    <div>
       <div class="v-panel">
        <div class="v-panel-caption">Log In</div>
        <div class="v-panel-content">
           <div class="v-orderedlayout">
            <div>
               <div>
                <div class="v-caption">
                  <span>Username:</span>
                </div>
               </div>
               <input type="text" class="v-textfield"/>
            </div>
            <div>
               <div>
                <div class="v-caption">
                  <span>Password:</span>
                </div>
               </div>
               <input type="password"
                      class="v-textfield"/>
            </div>
            <div>
              <button type="button"
                      class="v-button">Login</button>
              </div>
           </div>
        </div>
        <div class="v-panel-deco"/>
        </div>
       </div>
    </div>
   </div>
</div>

In that; they got a default class name for all the components they add. But, In my project, I didn't get the default class names for all the component I add.

Instead of getting styles applied through classes, I'm getting styles applied through inline function. I think, it is because I adjusted the size of the components when I design the layouts.

My Code:

<div style="height: 781px; width: 762px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
<div style="overflow: hidden; height: 781px; width: 762px;" class="v-verticallayout">
<div style="overflow: hidden; margin: 0px; width: 762px; height: 781px;">
<div style="height: 573px; width: 762px; overflow: hidden; padding-left: 0px; padding- top: 0px;">
<div style="float: left; margin-left: 0px;">
<div class="v-customcomponent" style="height: 573px; width: 762px;">
<div class="v-absolutelayout" style="height: 573px; width: 762px;">
<div style="position: relative; overflow: hidden; height: 573px; width: 762px;">
<div class="v-absolutelayout-wrapper" style="top: 0px; left: 0px; right: 0px; bottom: 0px;">
<div class="v-tabsheet v-tabsheet-hover-closable hover-closable" style="overflow: hidden; height: 573px; width: 762px;">

Does this happened because I adjusted the size of the components during when I design the layouts? or Is this common?
How to avoid this inline styling?
Styling in Vaadin seems to be a little difficult. If I am wrong can someone show me the best and standard way to apply styles?
And Do I need to follow any standards or method to design layouts to avoid inline styling? . . .

Christopher Poile · Accepted Answer · 2013-03-28 23:13:50Z

3

In Vaadin 6 any component styling done within Java code (for example, component.setWidth() and so on) is inserted directly as inline css. If you don't want it inline, you can define those rules by hand in the styles.css file under your VAADIN/themes/themename/ directory, and set the @Theme("themename") annotation on your Application class.

But if you want to do CSS styling, you really should move to Vaadin 7 -- Jouni and others have really cleaned everything up remarkably (primarily by dropping legacy IE support), which makes styling using CSS actually practical. You also get to use SASS now. For more info, look at the Vaadin Wiki.

Edit:
To answer #4 on your list, my approach is to make a CustomComponent that has a CustomLayout (link) as the base layout. (Or instead of extending CustomComponent you could extend CustomLayout, I suppose.) I use a pageXLayout.html as the skeleton or template, and wherever I want an interactive or changeable part of the page (button, edit field, graph, 'view', etc) I put a <div location="componentY"></div> tag. Then you can fill in those divs whenever you need to (on initialization, on lazy loading, in response to server event or user-interaction, etc.), even remove them and replace them as needed.

So, that may all be too obvious. But the great thing about this way of building up a page is that as long as you not do any server-side sizing or any changes that would affect the component's visual style, you will have a final html page that is completely absent of any inline styling. You can do all visual styling through changing the existing Vaadin css classes or by adding your own id (component.setId("myId")) or class (component.addStyleName("myStyle")). You could also just add ids and class names to the location div itself (<div location="componentY" class="myClass"></div>) if that's easier. But sometimes those styles might be overridden by the component's own Vaadin-based css (which you can change yourself in your myTheme.scss or myTheme.css file).

(The previous is assuming Vaadin 7. 6 might still add inline styling, I forget.)

Anyway, that's how I've ended up building what is essentially designer-friendly html and css-based single-page webapps the easy way. You can even add whatever javascript-based front-end chrome you want, but that's a bit more indepth and tricky with the way GWT apps handle page reloading and state.

edited Mar 28, 2013 at 23:13

answered Mar 27, 2013 at 14:42

Christopher Poile

9841 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gugan Mohan Over a year ago

Hello Christopher. I have no issues in applying styles. But, my problem is those inline styles. Is really setWidth() & setHeight() and so on are the reasons for those inline styles?

Henri Kerola Over a year ago

@Gugan This is how Vaadin 6 works. You should not try to override sizes on CSS.

Gugan Mohan Over a year ago

@Henri I'm not only trying to override sizes. I'm not getting a class name for many of the div's.

Henri Kerola Over a year ago

@Gugan, what do you mean? You add a class name for a component by saying mycomp.addStylename("foobar")?

Christopher Poile Over a year ago

@Gugan yep, the inline styles are produced by java-side component sizing/spacing/etc. Henri is right (of course -- he's on the Vaadin team :) you can set a component's classname, but in Vaadin 6 the div structure is... verbose. It's much cleaner in Vaadin 7.

Collectives™ on Stack Overflow

How to write CSS in Vaadin 6?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related