Goodmorning everyone.
I am a beginner who has just started to work with Vaadin . I would like to build a master page that will then be included in the other pages ( pretty much what you do with the html ) . I would like some advice on how to begin . I made a small application consists of a single class Ui in which I added the view using the navigator . Each page is personalized but I would like that the menu ’ existing in the Home Page was repeated in every view . For this I thought of a master page .
What you need is to make a super View class containing the menu and the common layouts. Then, when creating child views extending the super view class.
What I find it most difficult is giving style and that stylish behaviour to the UI. Fortunately, by default, Vaadin gives an excelent look and feel.
ok thanks. Now I try to do so . But I did not understand something else . When I want to customize the components, for example buttons or some labels etc. in which file I should enter my rules ? in style.css file or file test.scss ? Sorry for this question but I did not understand how.
It works ! I inherited my main view and the child view works as if it were to include master page : - ) Now my problem is that i described in the last post. Can you help me?
I know in which point you are. At the beggining, I didn’t know where to begin from.
What you must know is that Vaadin uses SCSS (similar to SASS). You must enter your style rules within the .scss files, not within the css files. Vaadin has a SCSS compiler which turns the SCSS code into CSS.
So, modify or create SCSS file(s) and, afterwards, compile your Theme in eclipse:
I also do not know where to start . Then I do not speak perfect English and then the whole is even more difficult .
What you wrote is absolutely right , in fact , I tried to make some small changes and it works. I’m pretty much using the language Sass , but to understand how to use it in Vaadin is a specific guide ? Let me explain … I changed color to the description of the button in this way :
.v - button- caption
{
color: blue;
}
and this works . But how do I know how other components need to be changed ? For example if I wanted to change the color of the menubar as you would ? There is a guide that tells me how to get translated these components to work with Vaadin ? Thanks for all the answers . I hope not I wasted too much time .
If you take a look to the Vaadin book, in every component there is a part which explains to you the SCSS rules so as to modify its look. For instance if you want to modify TextArea, within the book it says:
