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.
no css en app básica.
Buenas que tal quiero soy new con vaadin. quiero el tema de facebook para probar pero no logro visualizar
http://demo.vaadin.com/valo-theme/#!buttons-and-links
tengo maven con eclipse y ejecuto estos goals. ahora no se si hay que modificar el pom.xml o algo asi
vaadin:update-widgetsetvaadin:compilevaadin:compile-themevaadin:update-themejetty:run
package grid;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.Title;
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.CssLayout;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.themes.ValoTheme;
@Title("PRUEBA VAADIN")
@Theme("tests-valo-facebook")
@Widgetset("grid.MyAppWidgetset")
public class MyUI extends UI {
private static final long serialVersionUID = 1L;
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
setContent(layout);
CssLayout topBar = new CssLayout();
topBar.addStyleName("top");
Label titulo = new Label("Practica");
topBar.addComponent(titulo);
layout.addComponent(topBar);
HorizontalLayout menuContenido = new HorizontalLayout();
menuContenido.setSizeFull();
layout.addComponent(menuContenido);
CssLayout menu = new CssLayout();
menu.setWidth("100%");
menu.addStyleName("menu");
menuContenido.addComponent(menu);
VerticalLayout vertical = new VerticalLayout();
vertical.setSpacing(true);
vertical.setMargin(true);
menuContenido.addComponent(vertical);
menuContenido.setExpandRatio(menu, 2);
menuContenido.setExpandRatio(vertical, 8);
Label header = new Label("Huge type for display text.");
header.addStyleName("h2");
// header.addStyleName(FontAwesome.FONT_FAMILY);
vertical.addComponent(header);
Label text = new Label(
"<p> Large type for introductory text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.</p>",
com.vaadin.shared.ui.label.ContentMode.HTML);
vertical.addComponent(text);
FormLayout form = new FormLayout();
form.setSpacing(false);
vertical.addComponent(form);
TextField nombre = new TextField("Nombre");
form.addComponent(nombre);
TextField apellido = new TextField("Apellido");
form.addComponent(apellido);
TextField correo = new TextField("Correo");
form.addComponent(correo);
Button enviar = new Button("Enviar");
enviar.addStyleName(ValoTheme.BUTTON_PRIMARY);
form.addComponent(enviar);
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}
quero usar esto tests-valo-facebook https://github.com/vaadin/vaadin/tree/master/WebContent/VAADIN/themes/tests-valo-facebook
_variable.scss
$v-app-loading-text: "Facebook Valo";
$v-background-color: #fafafa;
$v-app-background-color: #e7ebf2;
$v-panel-background-color: #fff;
$v-focus-color: #3b5998;
$v-focus-style: 0 0 1px 1px rgba($v-focus-color, .5);
$v-border-radius: 3px;
$v-textfield-border-radius: 0;
$v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
$v-font-size: 14px;
$v-font-color: #37404E;
$v-font-weight: 400;
$v-link-text-decoration: none;
$v-shadow: 0 1px 0 (v-shade 0.2);
$v-bevel: inset 0 1px 0 v-tint;
$v-unit-size: 30px;
$v-gradient: v-linear 12%;
$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
$v-shadow-opacity: 20%;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-selection-item-border-radius: 0;
@import "../valo/valo";
styles.scss
@import "variables";
@import "../tests-valo/valotest";
.tests-valo-facebook {
@include valotest;
}
este es el error en consola.
INFORMACIÓN: Requested resource [/VAADIN/themes/tests-valo-facebook/styles.css] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
gracias alguna sugerencia
Hola Ruben,
El nombre tests-valo-facebook (ver @Theme("tests-valo-facebook") no corresponde al nombre de tu fichero.scss.
Utilisa styles.scss
Suerte
LM
gracias pero aun ando igual. arregle sytle.scss a styles.scss
ejecute los goals y anda igual sin visualizarce bien. y se genero un styles.css
cuando ejecute este comando vaadin:compile-theme
Building grid-vaadin 1.0-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] --- vaadin-maven-plugin:7.5.7:compile-theme (default-cli) @ grid-vaadin ---
[INFO] Updating theme VAADIN\themes\mytheme
[INFO] Theme "VAADIN\themes\mytheme" compiled
[INFO] Updating theme VAADIN\themes\tests-valo-facebook
[ERROR] oct 18, 2015 5:44:36 PM com.vaadin.sass.internal.visitor.ImportNodeHandler traverse
[ERROR] GRAVE: null
[ERROR] java.io.FileNotFoundException: Import '../tests-valo/valotest' in 'C:\Users\Rubén\Documents\libros de java\maven\grid-vaadin\src\main\webapp\VAADIN\themes\tests-valo-facebook\styles.scss' could not be found
[ERROR] at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:65)
[ERROR] at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:99)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:214)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:294)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:263)
[ERROR] at com.vaadin.sass.SassCompiler.main(SassCompiler.java:70)
[ERROR]
[ERROR] oct 18, 2015 5:44:36 PM com.vaadin.sass.internal.tree.MixinNode traverse
[ERROR] GRAVE: null
[ERROR] com.vaadin.sass.internal.parser.ParseException: Mixin Definition: valotest not found
[ERROR] at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:42)
[ERROR] at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:34)
[ERROR] at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:116)
[ERROR] at com.vaadin.sass.internal.visitor.BlockNodeHandler.traverse(BlockNodeHandler.java:68)
[ERROR] at com.vaadin.sass.internal.tree.BlockNode.traverse(BlockNode.java:119)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:214)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:294)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:263)
[ERROR] at com.vaadin.sass.SassCompiler.main(SassCompiler.java:70)
[ERROR]
[INFO] Theme "VAADIN\themes\tests-valo-facebook" compiled
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 3.995 s
[INFO] Finished at: 2015-10-18T17:44:36-04:30
[INFO] Final Memory: 9M/159M
[INFO] ------------------------------------------------------------------------
Hola,
Tienes que copiar los directorios tests-valo y tests-valo-facebook (https://github.com/vaadin/valo-demo/tree/master/src/main/webapp/VAADIN/themes) en tu directorio VAADIN/themes. Luego compila todo con mvn clean install y listo.
Saludos.
jefe pero aun no se ve bien los estilos no se porque, copio los directorios como dice usted, mvn clean install y mvn jetty:run y aun igual :s
INFORMACIÓN: Requested resource [/VAADIN/themes/tests-valo-facebook/styles.css] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
Según lo que muestra el log, ese archivo no existe. Puedes adjuntar el proyecto completo acá?
ok como haria eso? copio y pego o con alguna opcion de exportar proyecto?
Si estás usando Eclipse:
Aquí esta gracias. tengo el inter muy lento y me pedia refrascar el navegador, lo subi a mega
https://mega.nz/#!wksVBTwB!y5TjDMj-ZoGMguTg2XohMWNT7Ou9P8ZmtHCfmBTebk4
Al parecer dejaste un espacio al inicio del nombre del directorio " tests-valo" en VAADIN/themes/. Intenta eliminando ese caracter.
P.D. Te recomiendo que la próxima vez que requieras adjuntar un proyecto Java, elimines primero los archivos compilados (*.class) en este caso el directorio target. También puede ser útil adjuntar el proyecto maven completo (incluyendo pom.xml). Adicionalmente puedes usar el botón "Add Attachment..." acá en el foro :)
Espero funcione.
jefe aqui esta, ya borre el caracter y los targets pero aun sigue sin funcionar. le subire el pom.xml y lo demas
Hola Ruben,
Aqui tienes la configuration de los ficheros :
- addons.scss del repertorio mytheme:
@import "../tests-valo/_valotest.scss";
@import "../tests-valo-facebook/_variables.scss";
@mixin addons {
@include tests-valo;
@include tests-valo-facebook;
}
- mytheme.scss
@import "../valo/valo.scss";
@mixin mytheme{
@include valo;
@include tests-valo;
@include tests-valo-facebook;
}
La classe MyUI debe de contener
@Theme("mytheme")
Espero que funcione.
Suerte
LM
Hola Rubén,
Descargué tu código, ejecuté mvn clean install y funcionó para mi :) Podrías intentar eliminando el caché del navegador y recompilando todo de nuevo.
Saludos.
aun nada. borre la cache, de google chrome, todo el historial, lo probe en internet explorer e igual. desactive tambien el adBlock pensando que afectaba y nada,
la unica manera de ver los estilos es con @Theme("valo") e igual no entiendo.
y cuando hago mvn clean install se borra la info de addons.scss quedando asi
/* This file is automatically managed and will be overwritten from time to time. */
/* Do not manually edit this file. */
/* Import and include this mixin into your project theme to include the addon themes */
@mixin addons {
}
gracias igual.
El archivo addons.scss es manejado automáticamente por el plugin de Vaadin para Eclipse o Maven. No deberías editar ese archivo.
Por otro lado, al descargar tu proyecto y hacer lo siguiente:
unzip grid-vaadin.zip
cd grid-vaadin
mvn clean install
mvn jetty:run
El tema parece funcionar (mira el resultado en la imagen adjunta).
Te recomendaría que verificaras que la aplicación está siendo realmente desplegada y que lo estás haciendo al servidor correcto (cerciorate de no tener otro servidor y que la URL que usas es la correcta). ¿Podrías replicar los pasos que yo he seguido y confirmar si el problema persiste?
Les comento el problema era que...extraño y uso win 8.1 y tengo 2 particiones. El maven lo tengo en el disco C y el proyecto en mis documentos, pero cuando el proyecto lo movi a la otra partición si compila mytheme ese era el error en realidad. Debe ser algún permiso del usuario quizás