Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

CssImport when using Component Exporter by Mikhail Shabarov, 1 month ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

How use ValoTheme

Vaadin Student
6 years ago Sep 19, 2015 7:29am

Hi Guys, how i use the  valo-theme ? ... how start http://demo.vaadin.com/valo-theme/#!common

thanks.

Johannes Häyry
6 years ago Sep 19, 2015 12:10pm

First you might want to read the getting started wiki entry: https://vaadin.com/wiki/-/wiki/Main/Valo+theme+-+Getting+started
Book of Vaadin has a chapter for Valo theme: https://vaadin.com/book/-/page/themes.valo.html
For detailed api documentation checkout https://vaadin.com/api/valo/

Vaadin Student
6 years ago Sep 19, 2015 5:33pm

thanks.

Vaadin Student
6 years ago Sep 19, 2015 5:55pm

But i cant to get valo theme , and start with some like this: 

Johannes Häyry
6 years ago Sep 20, 2015 5:54am

If you are interested in the source code of the Valo theme demo, it should be found here https://github.com/vaadin/vaadin/tree/7.5/uitest/src/com/vaadin/tests/themes/valo

Vaadin Student
6 years ago Sep 20, 2015 7:43am

Than Johannes, i only need the skeleton for a new project, i am only need the image i attached and the app found with responsive application.

Or a manual for make this.

 

Vaadin Student
6 years ago Sep 20, 2015 8:21am

I have this:

package com.vaadin.ricardo.proyecto.mavenproject3;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

/**
 *
 */
@Theme("mytheme")
@Widgetset("com.vaadin.ricardo.proyecto.mavenproject3.MyAppWidgetset")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout contenedor=new VerticalLayout();
        contenedor.setSizeFull();
        CssLayout topbar=new CssLayout();
        Label lbl=new Label("Dashboard");
        lbl.setStyleName("h3");
        Button btn1=new Button("Home");
        btn1.setWidth("100%");
        Button btn2=new Button("Usuario");
        btn2.setWidth("100%");
        Button btn3=new Button("Settings");
        btn3.setWidth("100%");
        topbar.addComponent(lbl);
        topbar.addComponent(btn1);
        topbar.addComponent(btn2);
        topbar.addComponent(btn3);
        contenedor.addComponent(topbar);
        HorizontalLayout horizontal=new HorizontalLayout();
        horizontal.setSizeFull();
        Panel pCentro=new Panel("CONTENIDO");
        pCentro.setSizeFull();
        horizontal.addComponent(contenedor);
        horizontal.addComponent(pCentro);
        horizontal.setExpandRatio(contenedor, 20);
        horizontal.setExpandRatio(pCentro, 80);
               
        setContent(horizontal);

    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

And the result is in the attachment image. But is Ugly :(

Johannes Häyry
6 years ago Sep 20, 2015 6:41pm

Check from https://github.com/vaadin/vaadin/blob/7.5/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java what styles the buttons use and how the menu is built. And from the theme css https://github.com/vaadin/vaadin/tree/7.5/WebContent/VAADIN/themes/tests-valo how the styles are defined.

EDIT: Valo demo sources might be actually here (at least according to vaadin.com/valo page https://github.com/vaadin/valo-demo)

Vaadin Student
6 years ago Sep 20, 2015 11:39pm

Thanks Johannes, sorry for my english, i have this code and attachment a Image:

package com.vaadin.ricardo.proyecto.mavenproject3;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.server.FontAwesome;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.MenuBar;
import com.vaadin.ui.MenuBar.MenuItem;
import com.vaadin.ui.Panel;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

/**
 *
 */
@Theme("mytheme")
@Widgetset("com.vaadin.ricardo.proyecto.mavenproject3.MyAppWidgetset")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        MenuBar menu=new MenuBar();
        MenuItem user=menu.addItem("Lorem ipsumdolor", null, null);
        MenuItem EditProfile=user.addItem("Edit Profile", null);
        MenuItem Preferences=user.addItem("Preferences", null);
        user.addSeparator();
        MenuItem SingOut=user.addItem("Sing Out", null);
        menu.setWidth("100%");
        Label lbl1=new Label("Component UI Elements");
        lbl1.setIcon(FontAwesome.CLOUD);
        lbl1.setWidth("100%");
        Label lblComponents=new Label("Components 13");
        VerticalLayout contenedor=new VerticalLayout();
        contenedor.setSizeFull();
        CssLayout topbar=new CssLayout();
        Label lbl=new Label("Vaadin Valo Theme");
        
        lbl.setStyleName("h3");
        Button btn1=new Button("Labels");
        btn1.setIcon(FontAwesome.CLOUD_DOWNLOAD);
        btn1.setWidth("100%");
        Button btn2=new Button("Buttons & Links");
        btn2.setIcon(FontAwesome.CLOUD_UPLOAD);
        btn2.setWidth("100%");
        Button btn3=new Button("TextFields");
        btn3.setIcon(FontAwesome.ASTERISK);
        btn3.setWidth("100%");
        
        topbar.addComponent(lbl);
        topbar.addComponent(menu);
        topbar.addComponent(lbl1);
        topbar.addComponent(lblComponents);
        topbar.addComponent(btn1);
        topbar.addComponent(btn2);
        topbar.addComponent(btn3);
        contenedor.addComponent(topbar);
        HorizontalLayout horizontal=new HorizontalLayout();
        horizontal.setSizeFull();
        Panel pCentro=new Panel("CONTENIDO");
        pCentro.setSizeFull();
        horizontal.addComponent(contenedor);
        horizontal.addComponent(pCentro);
        horizontal.setExpandRatio(contenedor, 30);
        horizontal.setExpandRatio(pCentro, 80);
               
        setContent(horizontal);

    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

Attachment a image for this example. 

Johannes Häyry
6 years ago Sep 21, 2015 10:53am

You should set specifc style names etc. to achieve the look-and-feel of the left navigation. Maybe an easier example to follow is Matti's invoicer example application. Demo here http://matti.app.fi/invoicer/ and the source here https://github.com/mstahv/jpa-invoicer

Vaadin Student
6 years ago Sep 21, 2015 12:49pm

Great, Thank yoy Johannes.:)

Vaadin Student
6 years ago Sep 21, 2015 5:31pm

And i Changed the value : for 10px and founds well

Vaadin Student
6 years ago Sep 21, 2015 6:30pm

YEAHHHH!!!!!!!!, attachment my theme :).

 

+1
Vaadin Student
6 years ago Sep 21, 2015 6:54pm

MMMMM,, how is generated the Icon in the Menu of Demo Valo-Theme ????, i think is to hard.

Vaadin Student
6 years ago Sep 21, 2015 6:56pm

maybe here:

static final String CAPTION_PROPERTY = "caption";
    static final String DESCRIPTION_PROPERTY = "description";
    static final String ICON_PROPERTY = "icon";
    static final String INDEX_PROPERTY = "index";

    @SuppressWarnings("unchecked")
    static IndexedContainer generateContainer(final int size,
            final boolean hierarchical) {
        final TestIcon testIcon = new TestIcon(90);
        final IndexedContainer container = hierarchical ? new HierarchicalContainer()
                : new IndexedContainer();
        final StringGenerator sg = new StringGenerator();
        container.addContainerProperty(CAPTION_PROPERTY, String.class, null);
        container.addContainerProperty(ICON_PROPERTY, Resource.class, null);
        container.addContainerProperty(INDEX_PROPERTY, Integer.class, null);
        container
                .addContainerProperty(DESCRIPTION_PROPERTY, String.class, null);
        for (int i = 1; i < size + 1; i++) {
            final Item item = container.addItem(i);
            item.getItemProperty(CAPTION_PROPERTY).setValue(
                    sg.nextString(true) + " " + sg.nextString(false));
            item.getItemProperty(INDEX_PROPERTY).setValue(i);
            item.getItemProperty(DESCRIPTION_PROPERTY).setValue(
                    sg.nextString(true) + " " + sg.nextString(false) + " "
                            + sg.nextString(false));
            item.getItemProperty(ICON_PROPERTY).setValue(testIcon.get());
        }
        container.getItem(container.getIdByIndex(0))
                .getItemProperty(ICON_PROPERTY).setValue(testIcon.get());

        if (hierarchical) {
            for (int i = 1; i < size + 1; i++) {
                for (int j = 1; j < 5; j++) {
                    final String id = i + " -> " + j;
                    Item child = container.addItem(id);
                    child.getItemProperty(CAPTION_PROPERTY).setValue(
                            sg.nextString(true) + " " + sg.nextString(false));
                    child.getItemProperty(ICON_PROPERTY).setValue(
                            testIcon.get());
                    // ((Hierarchical) container).setChildrenAllowed(id, false);
                    ((Hierarchical) container).setParent(id, i);

                    for (int k = 1; k < 6; k++) {
                        final String id2 = id + " -> " + k;
                        child = container.addItem(id2);
                        child.getItemProperty(CAPTION_PROPERTY).setValue(
                                sg.nextString(true) + " "
                                        + sg.nextString(false));
                        child.getItemProperty(ICON_PROPERTY).setValue(
                                testIcon.get());
                        // ((Hierarchical) container)
                        // .setChildrenAllowed(id, false);
                        ((Hierarchical) container).setParent(id2, id);

                        for (int l = 1; l < 5; l++) {
                            final String id3 = id2 + " -> " + l;
                            child = container.addItem(id3);
                            child.getItemProperty(CAPTION_PROPERTY).setValue(
                                    sg.nextString(true) + " "
                                            + sg.nextString(false));
                            child.getItemProperty(ICON_PROPERTY).setValue(
                                    testIcon.get());
                            // ((Hierarchical) container)
                            // .setChildrenAllowed(id, false);
                            ((Hierarchical) container).setParent(id3, id2);
                        }
                    }
                }
            }
        }