Vaadin

Ve Vaadin 8 bylo možné přidat ikonu komponentě následovně:

Button button = new Button("Detail", VaadinIcons.EYE);

Ve Vaadin 10 došlo k drobné změně:

Button button = new Button("Detail", VaadinIcon.EYE.create());

V tomto příspěvku ukážu, jak vytvořit ve Vaadin 8 tlačítka, která se přizpůsobí velikosti prohlížeče. Pokud bude mít prohlížeč šířku větší než 500px, rozbrazí se tlačítko včetně popisku. Pokud bude šířka menší než 500px, zobrazí se pouze ikona.

VerticalLayout layout = new VerticalLayout();
layout.addStyleName("flexible-layout");
Responsive.makeResponsive(layout);

Button btnAir = new Button("Airplane", VaadinIcons.AIRPLANE);
btnAir.addStyleName("flexible-button");
Button btnBoat = new Button("Boat", VaadinIcons.BOAT);
btnBoat.addStyleName("flexible-button");
Button btnEye = new Button("Eye", VaadinIcons.EYE);
btnEye.addStyleName("flexible-button");
Button btnUser = new Button("User", VaadinIcons.USER);
btnUser.addStyleName("flexible-button");
layout.addComponents(btnAir, btnBoat, btnEye, btnUser);

Tlačítku přidávám styl flexible-button a layoutu flexible-layout. Aby to fungovalo, je ještě potřeba udělat layout responsivní pomocí statické metody Responsive.makeResponsive().

Ostylování pomocí css. Zde třídě flexible-layout přidávám range a určuji, jak má v daném rozsahu vypadat styl třídy flexible-button.

@import "../valo/valo.scss";

@mixin mytheme {
    @include valo;

    // Insert your own theme rules here
  
	.flexible-layout {
	    background: black;
	    color: white;
	
	.flexible-layout[width-range~="0-499px"] {
	    .flexible-button .v-button-caption {
	    	display: none;
	    }
	}
	
	.flexible-layout[width-range~="500px-"] {
	    .flexible-button .v-button-caption {}
	    
	}
}

A takto to vypadá

TextChangeListener je listener pro TextChangeEvent, která vznikne, když uživatel edituje textový obsah pole (nejčastěji psaním textu z klávesnice či vložení textu do textového pole). V následujícím příkladu vytvoříme dvě textová pole a prvnímu dáme TextChangeListener s tím, že hodnota vepsaná do prvního textového pole se změní na velká písmena a zobrazí v druhém textovém poli.

final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);

TextField tf1 = new TextField("First");
TextField tf2 = new TextField("Second");

tf1.addTextChangeListener(new TextChangeListener() {
	@Override
	public void textChange(TextChangeEvent event) {
		tf2.setValue(event.getText().toUpperCase());
	}
});

layout.addComponents(tf1, tf2);

V Javě 8 je možný tento zápis:

final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);

TextField tf1 = new TextField("First");
TextField tf2 = new TextField("Second");

tf1.addTextChangeListener(event -> {
	tf2.setValue(getValue(event.getText().toUpperCase()));
});

layout.addComponents(tf1, tf2);

Výsledek

VerticalLayout má ve výchozím nastavení šířku 100% a výšku nedefinovánu (undefined). To znamená, že na šířku se roztáhne do velikosti okna prohlížeče a výška se přizpůsobí velikosti komponent, které obsahuje. Pokud je výška větší než okno prohlížeče, objeví se posuvník.

final VerticalLayout layout = new VerticalLayout();
Label l1 = new Label("Ahoj");
Label l2 = new Label("Nazdar");
Label l3 = new Label("Čau");

layout.addComponents(l1, l2, l3);

setContent(layout);

Pozicování komponent se provádí pomocí metody setComponentAlignment(). Tato metoda se volá až po přidání komponent do layoutu.

Číst dálVaadin a VerticalLayout

Vaadin obsahuje řadu ikon k okamžitému použití. Tyto ikony se lehce dají přidávat komponentám pomocí metody setIcon(). Ukážeme si to na příkladu s komponentou Label.

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();

        Label banLB = new Label("label text");
        layout.addComponent(banLB);
        banLB.setCaption("label caption");
        banLB.setIcon(VaadinIcons.BAN);

        Label keyLB = new Label("label text");
        layout.addComponent(keyLB);
        keyLB.setCaption("label caption");
        keyLB.setIcon(VaadinIcons.KEY);

        Label recycleLB = new Label("label text");
        layout.addComponent(recycleLB);
        recycleLB.setCaption("label caption");
        recycleLB.setIcon(VaadinIcons.RECYCLE);

        setContent(layout);
    }

Takto to vypadá.

Zde zde naleznete seznam ikon.