Задайте фоновое изображение через CSS в Vaadin 14 программно с помощью Java

В Vaadin 14 мы можем программно устанавливать некоторые значения CSS в нашем Java-коде.

Мы можем вызвать _1 _, затем getStyle < / a> и задайте имя свойства CSS вместе со значением.

Например, здесь мы устанавливаем зеленый цвет фона.

public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-color" , "Green" );

Как это сделать для свойства CSS, такого как _4 _ который принимает аргумент функции CSS с именем url?

Жесткое кодирование пути CSS не работает.

public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-image" , "cat.jpg" );

➥ Как в Vaadin Flow использовать Java, чтобы заставить CSS находить изображение, такое как "cat.jpg"?

Кроме того, каким должен быть относительный или абсолютный путь к этому файлу изображения? Я понимаю, что обычное место для статических изображений в веб-приложении Vaadin находится в папке src/main/resources.


css background-image vaadin vaadin-flow
person Basil Bourque    schedule 22.10.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

В случае "простого Java-сервлета" (не Spring, не- CDI) Проект Vaadin, файл должен находиться в /src/main/webapp

В случае весны: /src/main/resources/META-INF/resources/img

Взято из официальных документов здесь: Памятка по ресурсам

И, как заметил @symlink в комментариях, вы должны использовать синтаксис url('filename') для ссылки на изображение в css: Свойство CSS background-image

Например, если у меня есть файл с именем cat.jpg внутри /src/main/webapp/images, то это устанавливает getElement().getStyle().set("background-image","url('images/cat.jpg')");

Вот еще один пример с файлом изображения cat.jpg в src/main/webapp без вложения в папку images. Это веб-приложение Vaadin 14.0.10, использующее опцию стека технологий Plain Java Servlet в Начните новый проект с Страница Ваадина.

снимок экрана с файлом cat.jpg в папке проекта src / main / webapp.

Ниже приведен исходный код для всего представления, использующего это изображение в качестве фона.

Обратите внимание на первую строку конструктора, в которой мы передаем "url('cat.jpg')" в качестве аргумента. Посмотрите, как мы использовали одинарные кавычки вокруг имени файла для встраивания в строку Java без экранирования. К счастью, спецификация CSS допускает использование одинарных кавычек (') или двойных кавычек («) - довольно удобно для программистов Vaadin, встраивающих CSS в код Java.

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-image" , "url('cat.jpg')" );

        Button button = new Button( "Click me" , event -> Notification.show( "Clicked!" ) );
        add( button );
    }
}

И скриншот этого веб-приложения в действии. Изображение обрезано из-за небольшой высоты VerticalLayout. Макет короткий, потому что он содержит только кнопку, метка которой Click me слабо видна синим текстом на левом краю. Обрезанная мордашка кошки повторяется на странице, как это принято в CSS по умолчанию.

снимок экрана веб-приложения Vaadin 14.0.10 с изображением кошки в фоновом режиме

person anasmi    schedule 23.10.2019