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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
How use ValoTheme
Hi Guys, how i use the valo-theme ? ... how start http://demo.vaadin.com/valo-theme/#!common
thanks.
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/
But i cant to get valo theme , and start with some like this:
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
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.
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 :(
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)
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.
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
YEAHHHH!!!!!!!!, attachment my theme :).
MMMMM,, how is generated the Icon in the Menu of Demo Valo-Theme ????, i think is to hard.
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);
}
}
}
}
}