Lernmaterialien

Components

In Vaadin ist eine Component (Klasse com.vaadin.flow.component.Component) die Basisklasse für alle sichtbaren UI-Elemente.

Alles, was du im Browser siehst, basiert auf dieser Klasse.

Beispiele für Components

• Einfache Eingabefelder (TextField, PasswordField, TextArea, DatePicker)
• Buttons & Anzeigen (Button, Label, Notification)
• Layouts (VerticalLayout, HorizontalLayout, Grid)
• Komplexere Widgets (Grid, ComboBox, Upload, Dialog)

JavaDoc für Vaadin https://vaadin.com/docs/latest

Home View

        setSpacing(false);
        H1 companyName = new H1("Mega 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");

        Image img = new Image("images/logo.png", "Mega Pizza Logo");
        img.setWidth("220px");

        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");

        H3 name = new H3("Mega Pizza GmbH");
        H3 street = new H3("Spengergasse 20");
        H3 city = new H3("1050 Wien");

        add(companyName, subName, img, description, name, street, city);

Browser

HTML Code mit F12

Delivery

        setSpacing(false);
        H1 companyName = new H1("Mega 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");

        H2 title = new H2("Lieferung");

        H2 zone1 = new H2("5. Bezirk");
        Paragraph price1 = new Paragraph("Lieferkosten: 3,90 Euro");
        Paragraph free1 = new Paragraph("Gratislieferung ab 15,00 Euro");

        H2 zone2 = new H2("3. und 4. Bezirk");
        Paragraph price2 = new Paragraph("Lieferkosten: 5,90 Euro");
        Paragraph free2 = new Paragraph("Gratislieferung ab 20,00 Euro");

        H2 zone3 = new H2("Wien");
        Paragraph price3 = new Paragraph("Lieferkosten: 7,90 Euro");
        Paragraph free3 = new Paragraph("Gratislieferung ab 30,00 Euro");

        H2 zone4 = new H2("Außerhalb von Wien");
        Paragraph price4 = new Paragraph("Lieferkosten: 20,00 Euro");
        Paragraph free4 = new Paragraph("Keine Gratislieferung");

        add(
                companyName, subName, title,
                zone1, price1, free1,
                zone2, price2, free2,
                zone3, price3, free3,
                zone4, price4, free4
        );