Example usage for com.vaadin.server Responsive makeResponsive

List of usage examples for com.vaadin.server Responsive makeResponsive

  1. HOME
  2. Java
  3. com.vaadin
  4. com.vaadin.server.*
  5. Responsive
  6. makeResponsive

Introduction

In this page you can find the example usage for com.vaadin.server Responsive makeResponsive.

Prototype

public static void makeResponsive(Component... components)

Source Link

Document

Enable responsive width and height range styling for the target component or UI instance.

Usage

From source file:by.bigvova.ui.LoginUI.java

License:Apache License

private Component buildLoginForm() {
    final VerticalLayout loginPanel = new VerticalLayout();
    loginPanel.setSizeUndefined();/*w  w w .  java2  s. c o m*/
    loginPanel.setSpacing(true);
    Responsive.makeResponsive(loginPanel);
    loginPanel.addStyleName("login-panel");

    loginPanel.addComponent(buildLabels());
    loginPanel.addComponent(buildFields());
    return loginPanel;
}

From source file:ch.bfh.ti.soed.hs16.srs.white.view.LogInView.java

License:Open Source License

@Override
public Component load() {
    final VerticalLayout formContainer = new VerticalLayout();
    formContainer.setStyleName("login-form");
    formContainer.setWidthUndefined();/*  w ww. ja v a 2  s .  c  om*/

    fieldMail.setCaption("Type your mail here:");
    fieldMail.setStyleName("textfield-form");
    fieldMail.setTabIndex(1);
    fieldMail.focus();

    fieldPassword.setCaption("Type your password here:");
    fieldPassword.setTabIndex(2);
    fieldPassword.setStyleName("textfield-form");

    btnLogin.setClickShortcut(ShortcutAction.KeyCode.ENTER);
    btnLogin.setTabIndex(3);
    btnLogin.addClickListener(e -> {
        switch (logInController.login()) {
        case ADMIN:
            AbstractView adminView = new AdminView();
            ApplicationController appController = ApplicationController.getInstance();
            appController.loadView(adminView);
            break;
        case USER:
            // Load the user view here
        default:
            break;
        }
    });

    btnLogin.setStyleName("button-center");
    btnLogin.setTabIndex(4);
    btnLogin.setWidth("91px");

    btnRegister.addClickListener(e -> {
        RegistrationView rView = new RegistrationView(this);
        ApplicationController applicationController = ApplicationController.getInstance();
        applicationController.loadView(rView);
    });
    btnRegister.setStyleName("button-center");
    btnRegister.setWidth("91px");

    labelMessage.setStyleName("horizontal-center");
    labelMessage.setSizeUndefined();

    final HorizontalLayout layoutButtons = new HorizontalLayout();

    layoutButtons.addComponents(btnLogin, btnRegister);
    layoutButtons.setStyleName("horizontal-center");
    layoutButtons.setMargin(true);
    layoutButtons.setSpacing(true);

    formContainer.addComponents(fieldMail, fieldPassword, layoutButtons, labelMessage);
    formContainer.setMargin(true);
    formContainer.setSpacing(true);

    Responsive.makeResponsive(formContainer);

    return formContainer;
}

From source file:com.cavisson.gui.dashboard.components.controls.ValoThemeUI.java

License:Apache License

@Override
protected void init(final VaadinRequest request) {
    if (request.getParameter("test") != null) {
        testMode = true;//from  w  w  w .ja v a 2  s  .c  om

        if (browserCantRenderFontsConsistently()) {
            getPage().getStyles().add(".v-app.v-app.v-app {font-family: Sans-Serif;}");
        }
    }

    if (getPage().getWebBrowser().isIE() && getPage().getWebBrowser().getBrowserMajorVersion() == 9) {
        menu.setWidth("320px");
    }
    // Show .v-app-loading valo-menu-badge
    // try {
    // Thread.sleep(2000);
    // } catch (InterruptedException e) {
    // e.printStackTrace();
    // }

    if (!testMode) {
        Responsive.makeResponsive(this);
    }

    getPage().setTitle("Valo Theme Test");
    setContent(root);
    root.setWidth("100%");

    root.addMenu(buildMenu());

    navigator = new Navigator(this, viewDisplay);

    navigator.addView("common", CommonParts.class);
    navigator.addView("labels", Labels.class);
    navigator.addView("buttons-and-links", ButtonsAndLinks.class);
    navigator.addView("textfields", TextFields.class);
    navigator.addView("datefields", DateFields.class);
    navigator.addView("comboboxes", ComboBoxes.class);
    navigator.addView("checkboxes", CheckBoxes.class);
    navigator.addView("sliders", Sliders.class);
    navigator.addView("menubars", MenuBars.class);
    navigator.addView("panels", Panels.class);
    navigator.addView("trees", Trees.class);
    navigator.addView("tables", Tables.class);
    navigator.addView("splitpanels", SplitPanels.class);
    navigator.addView("tabs", Tabsheets.class);
    navigator.addView("accordions", Accordions.class);
    navigator.addView("colorpickers", ColorPickers.class);
    navigator.addView("selects", NativeSelects.class);
    navigator.addView("calendar", CalendarTest.class);
    navigator.addView("forms", Forms.class);
    navigator.addView("popupviews", PopupViews.class);
    navigator.addView("dragging", Dragging.class);

    final String f = Page.getCurrent().getUriFragment();
    if (f == null || f.equals("")) {
        navigator.navigateTo("common");
    }

    navigator.setErrorView(CommonParts.class);

    navigator.addViewChangeListener(new ViewChangeListener() {

        @Override
        public boolean beforeViewChange(final ViewChangeEvent event) {
            return true;
        }

        @Override
        public void afterViewChange(final ViewChangeEvent event) {
            for (final Iterator<Component> it = menuItemsLayout.iterator(); it.hasNext();) {
                it.next().removeStyleName("selected");
            }
            for (final Entry<String, String> item : menuItems.entrySet()) {
                if (event.getViewName().equals(item.getKey())) {
                    for (final Iterator<Component> it = menuItemsLayout.iterator(); it.hasNext();) {
                        final Component c = it.next();
                        if (c.getCaption() != null && c.getCaption().startsWith(item.getValue())) {
                            c.addStyleName("selected");
                            break;
                        }
                    }
                    break;
                }
            }
            menu.removeStyleName("valo-menu-visible");
        }
    });

}

From source file:com.dungnv.streetfood.ui.ArticleItemUI.java

private void init() {
    this.addStyleName("item-interator");
    this.setSpacing(true);
    this.setWidth("100%");

    CssLayout horizontal = new CssLayout();
    horizontal.setStyleName("padding-5");
    horizontal.setWidth("100%");
    Responsive.makeResponsive(horizontal);
    this.addComponent(horizontal);

    Image imag = new Image();
    if (!StringUtils.isNullOrEmpty(item.getImageUrl())) {
        imag.setSource(new ExternalResource(item.getImageUrl()));
    }//ww w. j a v a  2s  . c o  m
    horizontal.addComponent(imag);

    VerticalLayout vlInfo = new VerticalLayout();
    vlInfo.setStyleName("padding-5");
    vlInfo.setWidth("70%");

    horizontal.addComponent(vlInfo);

    lbTitle = new Label(item.getTitle());
    lbTitle.addStyleName("lb-title");
    vlInfo.addComponent(lbTitle);

    lbIntroduce = new Label(item.getShortContent());
    lbIntroduce.setStyleName("lb-description");
    vlInfo.addComponent(lbIntroduce);

    HorizontalLayout htInfo = new HorizontalLayout();
    vlInfo.addComponent(htInfo);

    lbInfo = new Label();
    lbInfo.setCaptionAsHtml(true);
    htInfo.addComponent(lbInfo);

    HorizontalLayout htToolBar = new HorizontalLayout();
    htToolBar.setStyleName("lb-toolbar");
    horizontal.addComponent(htToolBar);

    btnLink = new Button();
    btnLink.setIcon(FontAwesome.LINK);
    btnLink.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnLink.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnLink.setWidth("25px");
    btnLink.setHeight("25px");
    htToolBar.addComponent(btnLink);
    htToolBar.setComponentAlignment(btnLink, Alignment.BOTTOM_RIGHT);

    btnEdit = new Button();
    btnEdit.setIcon(FontAwesome.EDIT);
    btnEdit.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnEdit.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnEdit.setWidth("25px");
    btnEdit.setHeight("25px");
    htToolBar.addComponent(btnEdit);
    htToolBar.setComponentAlignment(btnEdit, Alignment.BOTTOM_RIGHT);

    btnDelete = new Button();
    btnDelete.setIcon(FontAwesome.TIMES);
    btnDelete.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnDelete.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnDelete.setWidth("25px");
    btnDelete.setHeight("25px");
    htToolBar.addComponent(btnDelete);
    htToolBar.setComponentAlignment(btnDelete, Alignment.BOTTOM_RIGHT);
}

From source file:com.dungnv.streetfood.ui.CategoryItemUI.java

private void init() {
    this.addStyleName("item-interator");
    this.setSpacing(true);
    this.setWidth("100%");

    CssLayout horizontal = new CssLayout();
    horizontal.setStyleName("padding-5");
    horizontal.setWidth("100%");
    Responsive.makeResponsive(horizontal);
    this.addComponent(horizontal);

    Image imag = new Image();
    if (!StringUtils.isNullOrEmpty(item.getImageUrl())) {
        imag.setSource(new ExternalResource(item.getImageUrl()));
    }//  ww w.j  av  a  2  s.  c  o m
    horizontal.addComponent(imag);

    VerticalLayout vlInfo = new VerticalLayout();
    vlInfo.setStyleName("padding-5");
    vlInfo.setWidth("70%");

    horizontal.addComponent(vlInfo);

    lbTitle = new Label(item.getName());
    lbTitle.addStyleName("lb-title");
    if ("1".equals(item.getCategoryStatus())) {
        lbTitle.addStyleName("lb-status-active");
    } else {
        lbTitle.addStyleName("lb-status-inActive");
    }
    vlInfo.addComponent(lbTitle);

    lbDesc = new Label(item.getDescription());
    lbDesc.setStyleName("lb-description");
    vlInfo.addComponent(lbDesc);

    HorizontalLayout htInfo = new HorizontalLayout();
    vlInfo.addComponent(htInfo);

    lbInfo = new Label();
    lbInfo.setCaptionAsHtml(true);
    htInfo.addComponent(lbInfo);

    HorizontalLayout htToolBar = new HorizontalLayout();
    htToolBar.setStyleName("lb-toolbar");
    horizontal.addComponent(htToolBar);

    btnLock = new Button();
    if ("1".equals(item.getCategoryStatus())) {
        btnLock.setIcon(FontAwesome.LOCK);
    } else {
        btnLock.setIcon(FontAwesome.UNLOCK);
    }

    btnLock.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnLock.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnLock.setWidth("25px");
    btnLock.setHeight("25px");
    htToolBar.addComponent(btnLock);
    htToolBar.setComponentAlignment(btnLock, Alignment.BOTTOM_RIGHT);

    btnLink = new Button();
    btnLink.setIcon(FontAwesome.LINK);
    btnLink.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnLink.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnLink.setWidth("25px");
    btnLink.setHeight("25px");
    htToolBar.addComponent(btnLink);
    htToolBar.setComponentAlignment(btnLink, Alignment.BOTTOM_RIGHT);

    btnEdit = new Button();
    btnEdit.setIcon(FontAwesome.EDIT);
    btnEdit.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnEdit.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnEdit.setWidth("25px");
    btnEdit.setHeight("25px");
    htToolBar.addComponent(btnEdit);
    htToolBar.setComponentAlignment(btnEdit, Alignment.BOTTOM_RIGHT);

    btnDelete = new Button();
    btnDelete.setIcon(FontAwesome.TIMES);
    btnDelete.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnDelete.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnDelete.setWidth("25px");
    btnDelete.setHeight("25px");
    htToolBar.addComponent(btnDelete);
    htToolBar.setComponentAlignment(btnDelete, Alignment.BOTTOM_RIGHT);
}

From source file:com.dungnv.streetfood.ui.DishItemUI.java

private void init() {
    this.addStyleName("item-interator");
    this.setSpacing(true);
    this.setWidth("100%");

    CssLayout horizontal = new CssLayout();
    horizontal.setStyleName("padding-5");
    horizontal.setWidth("100%");
    Responsive.makeResponsive(horizontal);
    this.addComponent(horizontal);

    Image imag = new Image();
    if (!StringUtils.isNullOrEmpty(item.getImageUrl())) {
        imag.setSource(new ExternalResource(item.getImageUrl()));
    }/*from  w ww . j ava2  s .c  o  m*/
    horizontal.addComponent(imag);

    VerticalLayout vlInfo = new VerticalLayout();
    vlInfo.setStyleName("padding-5");
    vlInfo.setWidth("70%");

    horizontal.addComponent(vlInfo);

    lbTitle = new Label(item.getName());
    lbTitle.addStyleName("lb-title");
    vlInfo.addComponent(lbTitle);

    lbDesc = new Label(item.getShortDescription());
    lbDesc.setStyleName("lb-description");
    vlInfo.addComponent(lbDesc);

    HorizontalLayout htInfo = new HorizontalLayout();
    vlInfo.addComponent(htInfo);

    lbInfo = new Label();
    lbInfo.setCaptionAsHtml(true);
    htInfo.addComponent(lbInfo);

    HorizontalLayout htToolBar = new HorizontalLayout();
    htToolBar.setStyleName("lb-toolbar");
    horizontal.addComponent(htToolBar);

    btnLock = new Button();
    if ("1".equals(item.getDishStatus())) {
        btnLock.setIcon(FontAwesome.LOCK);
    } else {
        btnLock.setIcon(FontAwesome.UNLOCK);
    }

    btnLock.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnLock.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnLock.setWidth("25px");
    btnLock.setHeight("25px");
    htToolBar.addComponent(btnLock);
    htToolBar.setComponentAlignment(btnLock, Alignment.BOTTOM_RIGHT);

    btnLink = new Button();
    btnLink.setIcon(FontAwesome.LINK);
    btnLink.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnLink.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnLink.setWidth("25px");
    btnLink.setHeight("25px");
    htToolBar.addComponent(btnLink);
    htToolBar.setComponentAlignment(btnLink, Alignment.BOTTOM_RIGHT);

    btnEdit = new Button();
    btnEdit.setIcon(FontAwesome.EDIT);
    btnEdit.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnEdit.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnEdit.setWidth("25px");
    btnEdit.setHeight("25px");
    htToolBar.addComponent(btnEdit);
    htToolBar.setComponentAlignment(btnEdit, Alignment.BOTTOM_RIGHT);

    btnDelete = new Button();
    btnDelete.setIcon(FontAwesome.TIMES);
    btnDelete.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnDelete.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnDelete.setWidth("25px");
    btnDelete.setHeight("25px");
    htToolBar.addComponent(btnDelete);
    htToolBar.setComponentAlignment(btnDelete, Alignment.BOTTOM_RIGHT);
}

From source file:com.dungnv.streetfood.ui.RestaurantItemUI.java

private void init() {
    this.addStyleName("item-interator");
    this.setSpacing(true);
    this.setWidth("100%");

    CssLayout horizontal = new CssLayout();
    horizontal.setStyleName("padding-5");
    horizontal.setWidth("100%");
    Responsive.makeResponsive(horizontal);
    this.addComponent(horizontal);

    Image imag = new Image();
    if (!StringUtils.isNullOrEmpty(item.getImageUrl())) {
        imag.setSource(new ExternalResource(item.getImageUrl()));
    }/* ww w.jav  a2 s.c o m*/
    horizontal.addComponent(imag);

    VerticalLayout vlInfo = new VerticalLayout();
    vlInfo.setStyleName("padding-5");
    vlInfo.setWidth("70%");

    horizontal.addComponent(vlInfo);

    lbTitle = new Label(item.getName());
    lbTitle.addStyleName("lb-title");
    vlInfo.addComponent(lbTitle);

    lbIntroduce = new Label(item.getAddress());
    lbIntroduce.setStyleName("lb-description");
    vlInfo.addComponent(lbIntroduce);

    HorizontalLayout htInfo = new HorizontalLayout();
    vlInfo.addComponent(htInfo);

    lbInfo = new Label();
    lbInfo.setCaptionAsHtml(true);
    htInfo.addComponent(lbInfo);

    HorizontalLayout htToolBar = new HorizontalLayout();
    htToolBar.setStyleName("lb-toolbar");
    horizontal.addComponent(htToolBar);

    btnLock = new Button();
    if ("1".equals(item.getRestaurantStatus())) {
        btnLock.setIcon(FontAwesome.LOCK);
    } else {
        btnLock.setIcon(FontAwesome.UNLOCK);
    }

    btnLock.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnLock.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnLock.setWidth("25px");
    btnLock.setHeight("25px");
    htToolBar.addComponent(btnLock);
    htToolBar.setComponentAlignment(btnLock, Alignment.BOTTOM_RIGHT);

    btnLink = new Button();
    btnLink.setIcon(FontAwesome.LINK);
    btnLink.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnLink.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnLink.setWidth("25px");
    btnLink.setHeight("25px");
    htToolBar.addComponent(btnLink);
    htToolBar.setComponentAlignment(btnLink, Alignment.BOTTOM_RIGHT);

    btnEdit = new Button();
    btnEdit.setIcon(FontAwesome.EDIT);
    btnEdit.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnEdit.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnEdit.setWidth("25px");
    btnEdit.setHeight("25px");
    htToolBar.addComponent(btnEdit);
    htToolBar.setComponentAlignment(btnEdit, Alignment.BOTTOM_RIGHT);

    btnDelete = new Button();
    btnDelete.setIcon(FontAwesome.TIMES);
    btnDelete.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnDelete.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnDelete.setWidth("25px");
    btnDelete.setHeight("25px");
    htToolBar.addComponent(btnDelete);
    htToolBar.setComponentAlignment(btnDelete, Alignment.BOTTOM_RIGHT);
}

From source file:com.dungnv.streetfood.ui.SlideShowItemUI.java

private void init() {
    this.addStyleName("item-interator");
    this.setSpacing(true);
    this.setWidth("100%");

    CssLayout horizontal = new CssLayout();
    horizontal.setStyleName("padding-5");
    horizontal.setWidth("100%");
    Responsive.makeResponsive(horizontal);
    this.addComponent(horizontal);

    Image imag = new Image();
    if (!StringUtils.isNullOrEmpty(item.getImageUrl())) {
        imag.setSource(new ExternalResource(item.getImageUrl()));
    }/*from  w ww  . j a va2  s. c o m*/
    horizontal.addComponent(imag);

    VerticalLayout vlInfo = new VerticalLayout();
    vlInfo.setStyleName("padding-5");
    vlInfo.setWidth("70%");

    horizontal.addComponent(vlInfo);

    lbTitle = new Label(item.getName());
    lbTitle.addStyleName("lb-title");
    vlInfo.addComponent(lbTitle);

    lbIntroduce = new Label(item.getDescription());
    lbIntroduce.setStyleName("lb-description");
    vlInfo.addComponent(lbIntroduce);

    HorizontalLayout htInfo = new HorizontalLayout();
    vlInfo.addComponent(htInfo);

    lbInfo = new Label();
    lbInfo.setCaptionAsHtml(true);
    htInfo.addComponent(lbInfo);

    HorizontalLayout htToolBar = new HorizontalLayout();
    htToolBar.setStyleName("lb-toolbar");
    horizontal.addComponent(htToolBar);

    btnEdit = new Button();
    btnEdit.setIcon(FontAwesome.EDIT);
    btnEdit.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnEdit.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnEdit.setWidth("25px");
    btnEdit.setHeight("25px");
    htToolBar.addComponent(btnEdit);
    htToolBar.setComponentAlignment(btnEdit, Alignment.BOTTOM_RIGHT);

    btnDelete = new Button();
    btnDelete.setIcon(FontAwesome.TIMES);
    btnDelete.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    btnDelete.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
    btnDelete.setWidth("25px");
    btnDelete.setHeight("25px");
    htToolBar.addComponent(btnDelete);
    htToolBar.setComponentAlignment(btnDelete, Alignment.BOTTOM_RIGHT);
}

From source file:com.dungnv.streetfood.view.ArticleView.java

public ArticleView() {
    user = (UserDTO) VaadinSession.getCurrent().getAttribute(UserDTO.class.getName());
    setLocale(VaadinSession.getCurrent().getLocale());
    setSizeFull();// w  ww .ja  v a 2 s .  c o  m
    root = new VerticalLayout();
    root.setSizeFull();
    root.setMargin(true);
    root.addStyleName("dashboard-view");
    setContent(root);
    Responsive.makeResponsive(root);
    init();
    root.addComponent(header);

    builAction();
    dtoSearch = new ArticleDTO();
    onSearch(true);

}

From source file:com.dungnv.streetfood.view.CategoryView.java

public CategoryView() {
    user = (UserDTO) VaadinSession.getCurrent().getAttribute(UserDTO.class.getName());
    setLocale(VaadinSession.getCurrent().getLocale());
    setSizeFull();/*from   w  w  w .ja  v  a  2s.  c o  m*/
    root = new VerticalLayout();
    root.setSizeFull();
    root.setMargin(true);
    root.addStyleName("dashboard-view");
    setContent(root);
    Responsive.makeResponsive(root);
    init();
    root.addComponent(header);

    builAction();
    dtoSearch = new CategoryDTO();
    onSearch(true);

}