03_Layout

Code-Dateien

DateinameAktion
CODECode_Bank.zipDownload
CODECode_Pizza.zipDownload
CODECode_Urlaub.zipDownload

PDF-Dokumente

DateinameAktion
PDFFolie_Layout.pdfÖffnen

Videos

DateinameAktion
VIDEOVideo_Bank_DAbspielen
VIDEOVideo_Pizza_EAbspielen
VIDEOVideo_Urlaub_DAbspielen

Lernmaterialien

Layouts

VerticalLayout

  • Ordnet Komponenten untereinander (von oben nach unten).
  • Standardlayout in vielen Vaadin-Views.
VerticalLayout layout = new VerticalLayout();
layout.add(new Button("Erster Button"));
layout.add(new Button("Zweiter Button"));

HorizontalLayout

  • Ordnet Komponenten nebeneinander (von links nach rechts).
HorizontalLayout layout = new HorizontalLayout();
layout.add(new Button("Links"));
layout.add(new Button("Rechts"));

Verschachtelungen

  • Man kann Layouts auch verschachteln, um komplexe Strukturen zu bauen
  • Zuerst eine Skizze anfertigen

Lorem Text

  • Lorem Ipsum ist ein Blindtext (auch „Platzhaltertext“), der in Layouts, Designs und Webseiten verwendet wird, wenn der richtige Inhalt noch nicht feststeht
  • Lorem Texte werden häufig für die Entwicklung verwendet

Faker

(https://javadoc.io/doc/com.github.javafaker/javafaker/latest/com/github/javafaker/Lorem.html)

<dependency>
   <groupId>com.github.javafaker</groupId>
   <artifactId>javafaker</artifactId>
   <version>1.0.2</version>
</dependency>

import

import com.github.javafaker.Faker;

generate

new Faker().lorem().paragraph(12)

getHeader()

public class HomeView extends VerticalLayout {

    public HomeView() {
        setSpacing(false);

        add(getHeader());
        ...
    }

    public static Component getHeader() {
        H1 companyName = new H1("Griesy Pizza");
        companyName.getStyle()
                .set("font-family", "cursive")
                .set("font-size", "6rem")
                .set("margin", "0");

        H2 subName = new H2("... the mega pizza place ...");
        subName.getStyle()
                .set("margin", "0")
                .set("color", "gray");

        VerticalLayout headerLayout = new VerticalLayout(companyName, subName);
        headerLayout.setSpacing(false);
        headerLayout.setPadding(false);
        headerLayout.setDefaultHorizontalComponentAlignment(Alignment.CENTER);

        return headerLayout;
    }
}
public class DeliveryView extends VerticalLayout {

    public DeliveryView() {
        setSpacing(false);

        add(HomeView.getHeader());
        ...
    }
}
03_003.png

FlexLayout

Skizze Hierarchie

03_004.png 
public class DeliveryView extends VerticalLayout {

    private VerticalLayout createCard(String zone, double price, OptionalDouble freeDelivery) {
        H2 zoneTitle = new H2(zone);
        Paragraph priceText = new Paragraph("Lieferkosten: " + price + " Euro");

        String text;
        text = freeDelivery.isPresent() ? "Gratislieferung ab: " + freeDelivery.getAsDouble() + " Euro" : "Keine Gratislieferung";
        Paragraph freeText = new Paragraph(text);

        VerticalLayout card = new VerticalLayout(zoneTitle, priceText, freeText);
        card.setWidth("350px");
        card.setPadding(true);
        card.setSpacing(false);

        card.getStyle()
                .set("border", "1px solid lightgray")
                .set("border-radius", "10px")
                .set("margin", "10px");

        return card;
    }
    public DeliveryView() {
        setSpacing(false);

        add(HomeView.getHeader());

        VerticalLayout zone1 = createCard("5. Bezirk", 3.9, OptionalDouble.of(15.0));
        VerticalLayout zone2 = createCard("3. und 4. Bezirk", 5.9, OptionalDouble.of(20));
        VerticalLayout zone3 = createCard("Wien", 7.9, OptionalDouble.of(30));
        VerticalLayout zone4 = createCard("Außerhalb von Wien", 20, OptionalDouble.empty());
        FlexLayout cardsLayout = new FlexLayout(zone1, zone2, zone3, zone4);
        cardsLayout.setWidthFull();
        cardsLayout.setJustifyContentMode(JustifyContentMode.CENTER);
        cardsLayout.setFlexWrap(FlexLayout.FlexWrap.WRAP);
        add(cardsLayout);

        Paragraph info = new Paragraph("Wir liefern Ihre Bestellung in der Regel innerhalb von 30 bis 90 Minuten – frisch und heiß zu Ihnen nach Hause.");
        info.setWidth("100%");
        info.getStyle().set("text-align", "center");
        add(info);
    }

Home

03_005.png 
        public HomeView() {
            setSpacing(true);
            setDefaultHorizontalComponentAlignment(Alignment.CENTER);

            add(getHeader());

            Image img = new Image("images/logo.png", "Mega Pizza Logo");
            img.setWidth("220px");
            img.setHeight("150px");
            Paragraph description = new Paragraph(
                    "In unserer Pizzeria verbinden wir traditionelle italienische Handwerkskunst " +
                            "mit frischen, hochwertigen Zutaten. Jede Pizza wird mit viel Liebe zubereitet – " +
                            "vom knusprigen Teig bis zur aromatischen Tomatensauce. Ob klassisch oder kreativ " +
                            "belegt: Bei uns steht der authentische Geschmack Italiens im Mittelpunkt."
            );
            description.setWidth("500px");
            description.getStyle()
                    .set("font-size", "22px")
                    .set("line-height", "1.6")
                    .set("text-align", "left");
            HorizontalLayout content = new HorizontalLayout(img, description);
            add(content);

            H3 name = new H3("Griesy Pizza GmbH");
            H3 street = new H3("Spengergasse 20");
            H3 city = new H3("1050 Wien");
            HorizontalLayout adress = new HorizontalLayout(name, street, city);
            adress.getStyle().set("gap", "40px");
            add(adress);
        }

Git!!!