Example usage for com.vaadin.ui.themes ValoTheme LAYOUT_CARD

Introduction

In this page you can find the example usage for com.vaadin.ui.themes ValoTheme LAYOUT_CARD.

Prototype

String LAYOUT_CARD

To view the source code for com.vaadin.ui.themes ValoTheme LAYOUT_CARD.

Click Source Link

Document

Make a layout look like the Panel component (resembles visually a card).

Usage

From source file:com.hybridbpm.ui.component.dashboard.panel.DashboardPanel.java

License:Apache License

public DashboardPanel(DashboardTab panelView, PanelDefinition pd) {
    this.dashboardTab = panelView;
    this.panelDefinition = pd;

    toolbar = new HorizontalLayout();
    toolbar.setMargin(new MarginInfo(false, false, false, true));
    toolbar.setWidth(99, Unit.PERCENTAGE);
    toolbar.setStyleName(HybridbpmStyle.LAYOUT_PADDING8);

    caption.addStyleName(ValoTheme.LABEL_H4);
    caption.addStyleName(ValoTheme.LABEL_COLORED);
    caption.addStyleName(ValoTheme.LABEL_NO_MARGIN);

    toolbar.removeAllComponents();/*from   w  w w.j a  va2  s.  com*/
    toolbar.addComponents(caption, new PanelMenuBar(this));
    toolbar.setExpandRatio(caption, 1);
    toolbar.setComponentAlignment(caption, Alignment.MIDDLE_LEFT);

    setSizeFull();
    setStyleName(ValoTheme.LAYOUT_CARD);
    addStyleName("dashboard-panel");

    configureModule();
}

---

From source file:com.hybridbpm.ui.component.TranslatedField.java

License:Apache License

public TranslatedField() {
    form.setSpacing(true);//from  w  w w. ja va  2  s . com
    form.setMargin(false);
    form.addStyleName(ValoTheme.LAYOUT_CARD);
    form.addStyleName("transacted-field");

    btnAdd.addStyleName(ValoTheme.BUTTON_LINK);
    btnAdd.setIcon(FontAwesome.PLUS_CIRCLE);
    form.addComponent(btnAdd);
}

---

From source file:com.mechanicshop.components.DataEntryLayout.java

@PostConstruct
void init() {/*from  ww  w  .  j  a v  a  2 s .  co  m*/
    addStyleName(ValoTheme.LAYOUT_CARD);
    mainLayout.setMargin(true);
    setSizeFull();
    mainLayout.setSpacing(true);
    mainLayout.setSizeUndefined();
    buildLayout();
    setContent(mainLayout);
    setModal(true);
    setHeight("98%");
    setWidth("98%");
    setCaption("Add Entry");
    setStyleName(ValoTheme.WINDOW_TOP_TOOLBAR);
    setClosable(true);
    setResizable(true);
    center();
}

---

From source file:dhbw.clippinggorilla.userinterface.views.ArchiveView.java

public Component createClippingRow(Article a) {
    Image imageNewsImage = new Image();
    String url = a.getUrlToImage();
    if (url == null || url.isEmpty()) {
        url = a.getSourceAsSource().getLogo().toExternalForm();
    }//from w w w .j  a v a  2s . co m
    imageNewsImage.setSource(new ExternalResource(url));
    imageNewsImage.addStyleName("articleimage");

    VerticalLayout layoutNewsImage = new VerticalLayout(imageNewsImage);
    layoutNewsImage.setMargin(false);
    layoutNewsImage.setSpacing(false);
    layoutNewsImage.setWidth("200px");
    layoutNewsImage.setHeight("150px");
    layoutNewsImage.setComponentAlignment(imageNewsImage, Alignment.MIDDLE_CENTER);

    Label labelHeadLine = new Label(a.getTitle(), ContentMode.HTML);
    labelHeadLine.addStyleName(ValoTheme.LABEL_H2);
    labelHeadLine.addStyleName(ValoTheme.LABEL_NO_MARGIN);
    labelHeadLine.setWidth("100%");

    Label labelDescription = new Label(a.getDescription(), ContentMode.HTML);
    labelDescription.setWidth("100%");

    Image imageSource = new Image();
    Source s = a.getSourceAsSource();
    URL logo;
    if (s != null) {
        logo = s.getLogo();
    } else {
        Log.error("Source is null: " + a.getSource());
        return new Label("INTERNAL ERROR");
    }
    if (logo != null) {
        imageSource.setSource(new ExternalResource(logo));
    } else {
        Log.error("Sourcelogo is null: " + s.getName());
    }
    imageSource.setHeight("30px");
    Label labelSource = new Label(a.getSourceAsSource().getName());
    labelSource.addStyleName(ValoTheme.LABEL_SMALL);

    LocalDateTime time = a.getPublishedAtAsLocalDateTime();
    DateTimeFormatter formatter = DateTimeFormatter.ofLocalizedDate(FormatStyle.LONG);
    formatter.withZone(ZoneId.of("Europe/Berlin"));
    Label labelDate = new Label(time.format(formatter));
    labelDate.addStyleName(ValoTheme.LABEL_SMALL);

    Label labelAuthor = new Label();
    labelAuthor.addStyleName(ValoTheme.LABEL_SMALL);
    labelAuthor.setWidth("100%");
    if (a.getAuthor() != null && !a.getAuthor().isEmpty()) {
        labelAuthor.setValue(a.getAuthor());
    }

    Button openWebsite = new Button(VaadinIcons.EXTERNAL_LINK);
    openWebsite.addClickListener(e -> UI.getCurrent().getPage().open(a.getUrl(), "_blank", false));

    HorizontalLayout layoutArticleOptions = new HorizontalLayout();
    layoutArticleOptions.setWidth("100%");
    layoutArticleOptions.addComponents(imageSource, labelSource, labelDate, labelAuthor, openWebsite);
    layoutArticleOptions.setComponentAlignment(imageSource, Alignment.MIDDLE_CENTER);
    layoutArticleOptions.setComponentAlignment(labelSource, Alignment.MIDDLE_CENTER);
    layoutArticleOptions.setComponentAlignment(labelDate, Alignment.MIDDLE_CENTER);
    layoutArticleOptions.setComponentAlignment(labelAuthor, Alignment.MIDDLE_LEFT);
    layoutArticleOptions.setComponentAlignment(openWebsite, Alignment.MIDDLE_CENTER);
    layoutArticleOptions.setExpandRatio(labelAuthor, 5);

    VerticalLayout layoutNewsText = new VerticalLayout(labelHeadLine, labelDescription, layoutArticleOptions);
    layoutNewsText.setMargin(false);
    layoutNewsText.setWidth("100%");

    HorizontalLayout layoutClipping = new HorizontalLayout();
    layoutClipping.setWidth("100%");
    layoutClipping.setMargin(true);
    layoutClipping.addComponents(layoutNewsImage, layoutNewsText);
    layoutClipping.setComponentAlignment(layoutNewsImage, Alignment.MIDDLE_CENTER);
    layoutClipping.setExpandRatio(layoutNewsText, 5);
    layoutClipping.addStyleName(ValoTheme.LAYOUT_CARD);
    layoutClipping.addStyleName("tags");
    return layoutClipping;
}

---

From source file:dhbw.clippinggorilla.userinterface.views.ClippingView.java

public Component createClippingRow(Article a) {
    Image imageNewsImage = new Image();
    String url = a.getUrlToImage();
    if (url == null || url.isEmpty()) {
        url = a.getSourceAsSource().getLogo().toExternalForm();
    }/*from  w  w  w  . ja  v a 2  s .c o m*/
    imageNewsImage.setSource(new ExternalResource(url));
    imageNewsImage.addStyleName("articleimage");

    VerticalLayout layoutNewsImage = new VerticalLayout(imageNewsImage);
    layoutNewsImage.setMargin(false);
    layoutNewsImage.setSpacing(false);
    layoutNewsImage.setWidth("200px");
    layoutNewsImage.setHeight("150px");
    layoutNewsImage.setComponentAlignment(imageNewsImage, Alignment.MIDDLE_CENTER);

    Label labelHeadLine = new Label(a.getTitle(), ContentMode.HTML);
    labelHeadLine.addStyleName(ValoTheme.LABEL_H2);
    labelHeadLine.addStyleName(ValoTheme.LABEL_NO_MARGIN);
    labelHeadLine.setWidth("100%");

    Label labelDescription = new Label(a.getDescription(), ContentMode.HTML);
    labelDescription.setWidth("100%");

    Image imageSource = new Image();
    Source s = a.getSourceAsSource();
    URL logo = null;
    if (s != null) {
        logo = s.getLogo();
    } else {
        Log.error("Source is null: " + a.getSource());
        return new Label("INTERNAL ERROR");
    }
    if (logo != null) {
        imageSource.setSource(new ExternalResource(logo));
    } else {
        Log.error("Sourcelogo is null: " + s.getName());
    }
    imageSource.setHeight("30px");
    Label labelSource = new Label(a.getSourceAsSource().getName());
    labelSource.addStyleName(ValoTheme.LABEL_SMALL);

    LocalDateTime time = a.getPublishedAtAsLocalDateTime();
    DateTimeFormatter formatter = DateTimeFormatter.ofLocalizedDate(FormatStyle.LONG);
    formatter.withZone(ZoneId.of("Europe/Berlin"));
    Label labelDate = new Label(time.format(formatter));
    labelDate.addStyleName(ValoTheme.LABEL_SMALL);

    Label labelAuthor = new Label();
    labelAuthor.addStyleName(ValoTheme.LABEL_SMALL);
    labelAuthor.setWidth("100%");
    if (a.getAuthor() != null && !a.getAuthor().isEmpty()) {
        labelAuthor.setValue(a.getAuthor());
    }

    Button openWebsite = new Button(VaadinIcons.EXTERNAL_LINK);
    openWebsite.addClickListener(e -> UI.getCurrent().getPage().open(a.getUrl(), "_blank", false));

    HorizontalLayout layoutArticleOptions = new HorizontalLayout();
    layoutArticleOptions.setWidth("100%");
    layoutArticleOptions.addComponents(imageSource, labelSource, labelDate, labelAuthor, openWebsite);
    layoutArticleOptions.setComponentAlignment(imageSource, Alignment.MIDDLE_CENTER);
    layoutArticleOptions.setComponentAlignment(labelSource, Alignment.MIDDLE_CENTER);
    layoutArticleOptions.setComponentAlignment(labelDate, Alignment.MIDDLE_CENTER);
    layoutArticleOptions.setComponentAlignment(labelAuthor, Alignment.MIDDLE_LEFT);
    layoutArticleOptions.setComponentAlignment(openWebsite, Alignment.MIDDLE_CENTER);
    layoutArticleOptions.setExpandRatio(labelAuthor, 5);

    VerticalLayout layoutNewsText = new VerticalLayout(labelHeadLine, labelDescription, layoutArticleOptions);
    layoutNewsText.setMargin(false);
    layoutNewsText.setWidth("100%");

    HorizontalLayout layoutClipping = new HorizontalLayout();
    layoutClipping.setWidth("100%");
    layoutClipping.setMargin(true);
    layoutClipping.addComponents(layoutNewsImage, layoutNewsText);
    layoutClipping.setComponentAlignment(layoutNewsImage, Alignment.MIDDLE_CENTER);
    layoutClipping.setExpandRatio(layoutNewsText, 5);
    layoutClipping.addStyleName(ValoTheme.LAYOUT_CARD);
    layoutClipping.addStyleName("tags");
    return layoutClipping;
}

---

From source file:org.ikasan.dashboard.ui.framework.panel.LandingViewPanel.java

License:BSD License

private Component createContentWrapper(final Component content) {
    final CssLayout slot = new CssLayout();
    slot.setWidth("100%");
    slot.addStyleName("dashboard-panel-slot");

    CssLayout card = new CssLayout();
    card.setWidth("100%");
    card.addStyleName(ValoTheme.LAYOUT_CARD);

    HorizontalLayout toolbar = new HorizontalLayout();
    toolbar.addStyleName("dashboard-panel-toolbar");
    toolbar.setWidth("100%");

    Label caption = new Label(content.getCaption());
    caption.addStyleName(ValoTheme.LABEL_H4);
    caption.addStyleName(ValoTheme.LABEL_COLORED);
    caption.addStyleName(ValoTheme.LABEL_NO_MARGIN);
    content.setCaption(null);//w w w .j a  v a  2 s  .  c  om

    MenuBar tools = new MenuBar();
    tools.addStyleName(ValoTheme.MENUBAR_BORDERLESS);
    MenuItem max = tools.addItem("", VaadinIcons.EXPAND, new Command() {

        @Override
        public void menuSelected(final MenuItem selectedItem) {
            if (!slot.getStyleName().contains("max")) {
                selectedItem.setIcon(FontAwesome.COMPRESS);
                toggleMaximized(slot, true);
            } else {
                slot.removeStyleName("max");
                selectedItem.setIcon(FontAwesome.EXPAND);
                toggleMaximized(slot, false);
            }
        }
    });
    max.setStyleName("icon-only");
    MenuItem root = tools.addItem("", VaadinIcons.COG, null);
    root.addItem("Configure", new Command() {
        @Override
        public void menuSelected(final MenuItem selectedItem) {
            Notification.show("Not implemented in this demo");
        }
    });
    root.addSeparator();
    root.addItem("Close", new Command() {
        @Override
        public void menuSelected(final MenuItem selectedItem) {
            Notification.show("Not implemented in this demo");
        }
    });

    toolbar.addComponents(caption, tools);
    toolbar.setExpandRatio(caption, 1);
    toolbar.setComponentAlignment(caption, Alignment.MIDDLE_LEFT);

    card.addComponents(toolbar, content);
    slot.addComponent(card);
    return slot;
}

---

From source file:org.ikasan.dashboard.ui.monitor.component.MonitorPanel.java

License:BSD License

protected Component createContentWrapper(final Component small, final Component large) {
    final CssLayout slot = new CssLayout();
    slot.setWidth("100%");
    slot.addStyleName("monitor-panel-slot");

    final CssLayout card1 = new CssLayout();
    card1.setWidth("100%");
    card1.addStyleName(ValoTheme.LAYOUT_CARD);

    final CssLayout card2 = new CssLayout();
    card2.setWidth("100%");
    card2.addStyleName(ValoTheme.LAYOUT_CARD);

    final HorizontalLayout toolbar = new HorizontalLayout();
    toolbar.addStyleName("dashboard-panel-toolbar");
    toolbar.setWidth("100%");

    Label caption = new Label(large.getCaption());
    caption.addStyleName(ValoTheme.LABEL_H4);
    caption.addStyleName(ValoTheme.LABEL_COLORED);
    caption.addStyleName(ValoTheme.LABEL_NO_MARGIN);
    large.setCaption(null);/* w  ww .jav  a2s .  c om*/

    MenuBar tools = new MenuBar();
    tools.addStyleName(ValoTheme.MENUBAR_BORDERLESS);
    MenuItem max = tools.addItem("", VaadinIcons.EXPAND, new Command() {

        @Override
        public void menuSelected(final MenuItem selectedItem) {
            if (!slot.getStyleName().contains("max")) {
                selectedItem.setIcon(FontAwesome.COMPRESS);
                slot.removeAllComponents();
                card2.removeAllComponents();
                card2.addComponents(toolbar, large);
                slot.addComponents(card2);
                toggleMaximized(slot, true);
            } else {
                slot.removeStyleName("max");
                selectedItem.setIcon(FontAwesome.EXPAND);
                toggleMaximized(slot, false);
                card1.removeAllComponents();
                card1.addComponents(toolbar, small);
                slot.removeAllComponents();
                slot.addComponents(card1);
            }
        }
    });
    max.setStyleName("icon-only");
    MenuItem root = tools.addItem("", VaadinIcons.COG, null);
    root.addItem("Configure", new Command() {
        @Override
        public void menuSelected(final MenuItem selectedItem) {
            Notification.show("Not implemented in this demo");
        }
    });
    root.addSeparator();
    root.addItem("Close", new Command() {
        @Override
        public void menuSelected(final MenuItem selectedItem) {
            Notification.show("Not implemented in this demo");
        }
    });

    toolbar.addComponents(caption, tools);
    toolbar.setExpandRatio(caption, 1);
    toolbar.setComponentAlignment(caption, Alignment.MIDDLE_LEFT);

    card1.addComponents(toolbar, small);
    //        card2.addComponents(toolbar, large);
    slot.addComponent(card1);
    return slot;
}

---

From source file:org.jumpmind.metl.ui.views.DesignNavigator.java

License:Open Source License

public void refresh() {
    refreshOpenProjects();//from   ww  w  .j ava  2 s  . c o m

    setMenuItemsEnabled();

    if (treeTable.size() == 0) {
        removeComponent(treeTable);

        if (openProjectsLayout != null) {
            removeComponent(openProjectsLayout);
        }

        openProjectsLayout = new VerticalLayout();
        openProjectsLayout.addStyleName(ValoTheme.LAYOUT_CARD);
        openProjectsLayout.setSizeFull();
        openProjectsLayout.setMargin(true);
        Button viewProjects = new Button("Click to manage projects");
        viewProjects.addStyleName(ValoTheme.BUTTON_LINK);
        viewProjects.addClickListener(new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                viewProjects();
            }
        });
        openProjectsLayout.addComponent(viewProjects);
        openProjectsLayout.setComponentAlignment(viewProjects, Alignment.TOP_CENTER);
        addComponent(openProjectsLayout);
        setExpandRatio(openProjectsLayout, 1);
        viewProjects();
    } else {
        boolean add = true;
        Iterator<Component> i = iterator();
        while (i.hasNext()) {
            if (i.next().equals(treeTable)) {
                add = false;
                break;
            }
        }

        if (add) {
            if (openProjectsLayout != null) {
                removeComponent(openProjectsLayout);
            }

            addComponent(treeTable);
            setExpandRatio(treeTable, 1);
        }

        treeTable.refreshRowCache();
    }
}

---

From source file:org.vaadin.presentation.views.NewsView.java

@PostConstruct
void init() {//w  ww  .  ja v a2 s. co  m
    add(new Header("News").setHeaderLevel(2));

    int records = service.findAll().size();
    add(new Label("There are " + records + " new photos."));

    setMargin(new MarginInfo(false, true, true, true));
    setStyleName(ValoTheme.LAYOUT_CARD);
    //        BeanItemContainer<Person> people
    //                = new BeanItemContainer<>(Person.class);
    //
    //        people.addBean(new Person("Nicolaus Copernicus", 1473));
    //        people.addBean(new Person("Galileo Galilei", 1564));
    //        people.addBean(new Person("Johannes Kepler", 1571));
    //
    //// Generate button caption column
    //        GeneratedPropertyContainer gpc
    //                = new GeneratedPropertyContainer(people);
    //        gpc.addGeneratedProperty("delete",
    //                new PropertyValueGenerator<String>() {
    //
    //                    @Override
    //                    public String getValue(Item item, Object itemId,
    //                            Object propertyId) {
    //                        return "Delete"; // The caption
    //                    }
    //
    //                    @Override
    //                    public Class<String> getType() {
    //                        return String.class;
    //                    }
    //                });
    //
    //// Create a grid
    //        Grid grid = new Grid(gpc);
    //// Render a button that deletes the data row (item)
    //        grid.getColumn("delete")
    //                .setRenderer(new ButtonRenderer(e -> // Java 8
    //                                grid.getContainerDataSource()
    //                                .removeItem(e.getItemId())));
    //        add(grid);

    //        Grid grid = new Grid();
    //        grid.setHeaderVisible(false);
    //        grid.addColumn("picture1", Resource.class)
    //                .setRenderer(new ImageRenderer());
    //        grid.addColumn("picture2", Resource.class)
    //                .setRenderer(new ImageRenderer());
    //        grid.addColumn("picture3", Resource.class)
    //                .setRenderer(new ImageRenderer());
    //
    //        grid.addRow(new ExternalResource("http://stanlemmens.nl/wp/wp-content/uploads/2014/07/bill-gates-wealthiest-person.jpg"),
    //                new ExternalResource("http://stanlemmens.nl/wp/wp-content/uploads/2014/07/bill-gates-wealthiest-person.jpg"),
    //                new ExternalResource("http://stanlemmens.nl/wp/wp-content/uploads/2014/07/bill-gates-wealthiest-person.jpg"));
    //        grid.addRow(new ExternalResource("http://stanlemmens.nl/wp/wp-content/uploads/2014/07/bill-gates-wealthiest-person.jpg"),
    //                new ExternalResource("http://stanlemmens.nl/wp/wp-content/uploads/2014/07/bill-gates-wealthiest-person.jpg"),
    //                new ExternalResource("http://stanlemmens.nl/wp/wp-content/uploads/2014/07/bill-gates-wealthiest-person.jpg"));
    //        grid.addRow(new ExternalResource("http://stanlemmens.nl/wp/wp-content/uploads/2014/07/bill-gates-wealthiest-person.jpg"),
    //                new ExternalResource("http://stanlemmens.nl/wp/wp-content/uploads/2014/07/bill-gates-wealthiest-person.jpg"),
    //                new ExternalResource("http://stanlemmens.nl/wp/wp-content/uploads/2014/07/bill-gates-wealthiest-person.jpg"));
    ////        grid.setStyleName("gridwithpics128px");
    ////        grid.getColumn("picture1").setWidth(120);
    //        grid.setCellStyleGenerator(cell
    //                -> cell.getPropertyId().toString().contains("picture")
    //                        ? "imagecol" : null);
    //        add(grid);
    try {
        IndexedContainer container = createContainer();
        Table table = createTable(container);

        VerticalLayout mainLayout = new VerticalLayout();
        mainLayout.addComponent(table);
        mainLayout.setSizeFull();

        add(mainLayout);
    } catch (Exception ex) {
        System.out.println(ex.getMessage());
    }
}

---

From source file:org.vaadin.presentation.views.ScheduleForm.java

@Override
protected Component createContent() {

    setStyleName(ValoTheme.LAYOUT_CARD);
    HorizontalLayout toolBar = getToolbar();
    btnAddShift.setDescription("Add shift");
    btnAddShift.addClickListener((Button.ClickEvent event) -> {
        Shift shift = new Shift();
        shift.setScheduleHeader(getEntity());
        shiftBeans.addBean(shift);//from  w w  w.j  av  a 2 s  .  co m
    });
    btnDeleteShift.addClickListener((Button.ClickEvent event) -> {
        if (shiftTable.getValue() != null) {
            shiftBeans.removeItem(shiftTable.getValue());
        }
    });
    btnDeleteShift.setDescription("Delete Shift");
    toolBar.addComponents(btnAddShift, btnDeleteShift);
    MVerticalLayout layout = new MVerticalLayout(new Header("Edit schedule").setHeaderLevel(3),
            new MFormLayout(description, beginDate, endDate, weekday).withFullWidth(), shiftTable, toolBar)
                    .withStyleName(ValoTheme.LAYOUT_CARD);
    shiftBeans = new BeanItemContainer<>(Shift.class, new ArrayList<>());
    shiftTable.setContainerDataSource(shiftBeans);
    shiftTable.setVisibleColumns("weekday", "shiftTime", "employeeCount");
    shiftTable.setColumnHeaders("Weekday", "Shift Time", "Employee Count");
    //shiftTable.setColumnWidth("weekday", 10);
    //shiftTable.setColumnWidth("employeeCount", 5);
    shiftTable.setEditable(true);
    shiftTable.setImmediate(true);
    weekday.setOptions(Weekday.values());
    shiftTable.setTableFieldFactory(
            (Container container, Object itemId, Object propertyId, Component uiContext) -> {
                if ("weekday".equals(propertyId)) {
                    TypedSelect<Weekday> wd = new TypedSelect().withCaption("Weekday");
                    wd.setOptions(Weekday.values());
                    return wd;
                }
                return new TextField();
            });
    return layout;
}

---

• «
• 1
• 2
• »