Hey there!
I came to vaadin after building websites manually with html, joomla, a proprietary framework professionally. I’ve fallen in love with how easy pretty much everything is to accomplish. I’m currently building an interactive website for a grass roots festival. However, I’m bumping my head into some theming issues that feel like they should be easily resolved.
How do I accomplish this in Vaadin? I get the feeling somehow the reindeer theme is interacting with me in a way that sabotages this very basic website builders trick.
Secondly and possibly similar: I noticed that
CSS:
body {background : url(sweet_pattern.png)}
doesn’t work. Why is this? And what should I do to get around it or achieve the same effect?
Thirdly.
Wha’ts the most basic theming option an OCD like me can use in vaadin to get the vaadin widgets to work while still allowing me to work with CSS unhindered as I am used to doing with other websites?
And finally, I have the feeling I may be swimming against the stream by doing the things the way I am used to doing them. I have searched for vaadin layouting tutorials. But they’re all very basic. No one I could find has written a piece on how to fully customize a webpage. I’m shooting for a basic three column design inside a 920px wide wrapper with a header+menubar above it and a footer below it. I can ofcourse use vertical and horizontal layours to achieve all but the wrapper. But I’d like to somehow define the main components inside my css and then use vaadin inside those components.
First, I would advice to use the
Valo theme instead of Reindeer. Reindeer is old, and not really suitable anymore for modern app development. Valo was just released a few months ago, and will be the way forward.
Then to your questions.
The margin: 0 auto; trick only works for block level elements, so first check that the element you’re trying to center is a block element. Also, the core layouts in Vaadin offer easy alignment with layout.setComponentAlignment(child, Alignment.MIDDLE_CENTER);
The background color of a Vaadin app is defined for the .v-app element, not the body. So in order to get the body background color visible, set the .v-app elements background color to transparent (or set it’s color instead of body).
The Base theme (which Reindeer, Runo and Chameleon extend) is the most bare-bones starting point you can have. Valo doesn’t extend Base, but it can be configured to produce something quite close to it, by adjusting its
variables, functions and mixins .
To have the maximum amount of control over your layouts as a CSS developer/designer, I would suggest you take a look at the CustomLayout component, which is basically a HTML template where you can drop in other components.
Hope these help get you up to speed again! And feel free to ask more if something is unclear.
Thank you for your elaborate response. I will need to spend some evenings to explore all your suggestions. But you covered all the bases. So I expect this to help out a great deal.
It did. I managed to get the layout I desired with the background I desired… So thank you Jouni!
I did bump into something new.
setCaption() sets a title on many things, including verticallayouts and formlayouts. It signifies that caption in a style named v-caption. I can use CSS to set that caption. But then every fieldname in a fieldname/field combination also lights up.
I thought up a workaround, by setting a stylename and then using the .v-caption-[stylename]
to set the headers of forms specifically. However, I get the feeling there should be a way to signify them directly and separately from the fieldname/field items.
I also have a question about OptionGroup. I can get it to show in horizontal, and vertical directions. Is there a way to get it to show over multiple columns?
In Valo, there’s a built-in style name you can use: ValoTheme.OPTIONGROUP_HORIZONTAL. For a column layout, you will need to either use CSS columns or create two separate OptionGroups on the server and manage the selection state then manually between the two (really not ideal).
