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/
thanks.
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:
[code]
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 {
}
}
[/code]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:
[code]
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 {
}
}
[/code]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
Great, Thank yoy Johannes.
And i Changed the value : for 10px and founds well
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);
}
}
}
}
}