Correct way to access body element

Flow
1

Hi,

I’m searching for the correct way to get access to the body element.
I want to set a background-image on it.
I don’t want to use anything else than JAVA (no Polymer, CSS class, Html-Template) as this is a JAVA Web Framework.

Currently I have a MainView which extends VerticalLayout and has the @Route(“”) Annotation.
There I try: getUI().ifPresent(ui -> ui.getElement().getStyle().set("background","url(./frontend/images/login-background.jpg) no-repeat center center fixed"));

But it seems that the code inside ifPresent is never executed (I have a breakpoint on the lambda expression).
I execute the code above in the constructor of my view as every example in the tutorials do everything in the constructor.

Because it doesn’t work I wanted to ask:
What is the correct way to get access to the body element and set the background (I want the background span over the whole page)?
At which time is getUI present and I can call it?
Why shouldn’t I use UI.getCurrent()?

Thanks in Advance,
Br

2

First of all, i disagree with you, separate ui and code is better and this should be put in css.

But the question of ui access is interesting. I made some test and getUi() doesn’t work.

But this will work :

 if(UI.getCurrent() != null){
        	UI.getCurrent().getElement().getStyle().set("background", "url(./frontend/images/login-background.jpg) no-repeat center center fixed");
        }
3

Alain HIRSCH:
First of all, i disagree with you, separate ui and code is better and this should be put in css.

But the question of ui access is interesting. I made some test and getUi() doesn’t work.

But this will work :

 if(UI.getCurrent() != null){
        	UI.getCurrent().getElement().getStyle().set("background", "url(./frontend/images/login-background.jpg) no-repeat center center fixed");
        }

That might be and I won’t argue against your opinion but can you please explain me what you mean with “separate ui and code is better” when the whole purpose of VAADIN is to create an UI on the client side? I mean in my java code I use components which do nothing more than generate UI. It’s not like I disagree itself with “separate UI and code is better” if you mean UI Code and code for Business logic but VAADIN advertises that it’s a 100% pure JAVA Web Framework without the need of CSS and HTML so at least I assume that this will be so.

For UI.getCurrent(): I also thought that but there’s a discussion on github that the Vaadin Developers assume that you use getUI() with the Optional. But it’s not mentioned how you achieve that you actually can do something with it, they just mention that you have to do it in the correct place. But I fundamently don’t understand that when all VAADIN tutorials only work in the constructor.

Here’s the link to the discussion: https://github.com/vaadin/flow/issues/3220

But I don’t know how I should set the background of the body element assuming it’s not there? :smiley:

Edit: I even tried it with the @PostConstruct from Spring-Boot. No success.

4

but VAADIN advertises that it's a 100% pure JAVA Web Framework without the need of CSS and HTML so at least I assume that this will be so

It’s not a 100% java, you have all the possibilities. You can access to all dom properties from java and that’s good.
In my opinon separate css will save you time to maintain your project. But you can do as you want and write css manually by java instructions.

As a user’s framework you will see in facts you will still have to know and write a lot off “nonjava” code.

It still web technology and espescially in vaadin 10 you will have to know about polymer and javascript if you want to make sofisticate front ui components.

But yeah that’s not the subject and sorry for that parenthesis.

getUi() should be the best approach to get the ui.

Legioth commented on 15 Aug
@ayash The reason for making the method return Optional<UI> instead of only UI is to make the developer aware of the fact that there might not be any UI instance in some cases, **and therefore be more likely to implement their logic in a way that doesn't assume it to be there.**

As you see in your link, they warn that in some cases you can’t get the UI.

I don’t know why it doesn’t return the UI for the simple case i have tested.
This could be a bug and you should create a ticket for that with an simple example to reproduce it.

5

I agree with you that you’ll still need to know and write CSS because you have to style your UI and also I agree that the styling should be “independent” from the composition of the view, but for a simple app I wanted to choose the JAVA way (that’s because “I have all the possibilities”) but somehow that’s not that easy.

I think I will add my opinion to the open github thread but anyway thank you for your answers and for your time.

Br

6

Hello. If the ifPresent() is never executed, that means that you have it in a context where the UI will never be available. You have several options:

@Route("")
public static class InitialPageConfiguratorBodyStyle extends Div
        implements PageConfigurator {
    @Override
    public void configurePage(InitialPageSettings settings) {
        settings.addInlineWithContents("body {background: url(./frontend/images/login-background.jpg) no-repeat center center fixed;}",
                InitialPageSettings.WrapMode.STYLESHEET);
    }
}
7

thx a lot. Now I got it. Still learning :slight_smile: