no css en app básica.

rucko24 · October 18, 2015, 4:35pm

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

[b]
vaadin:update-widgetset
vaadin:compile
vaadin:compile-theme
vaadin:update-theme
jetty: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

[/b]

[size=2]
_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
[/size]
[b]

@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.

[/b]

gracias alguna sugerencia

rucko24 · October 18, 2015, 4:58pm

asi tengo eclipse

L1128 · October 18, 2015, 9:17pm

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

rucko24 · October 18, 2015, 10:19pm

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]
 ------------------------------------------------------------------------

alejandro.du · October 20, 2015, 3:29pm

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.

rucko24 · October 20, 2015, 5:04pm

gracias cuando llegue lo pruebo jefe.

rucko24 · October 21, 2015, 1:32pm

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.

alejandro.du · October 21, 2015, 1:35pm

Según lo que muestra el log, ese archivo no existe. Puedes adjuntar el proyecto completo acá?

rucko24 · October 21, 2015, 1:37pm

ok como haria eso? copio y pego o con alguna opcion de exportar proyecto?

alejandro.du · October 21, 2015, 1:38pm

Si estás usando Eclipse:
https://www.youtube.com/watch?v=NMfIHuEwE7A
. Luego adjuntas el archivo acá.

rucko24 · October 21, 2015, 2:14pm

Aquí esta gracias. tengo el inter muy lento y me pedia refrascar el navegador, lo subi a mega

https://mega.nz/#!wksVBTwB!y5TjDMj-ZoGMguTg2XohMWNT7Ou9P8ZmtHCfmBTebk4

alejandro.du · October 21, 2015, 2:20pm

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.

rucko24 · October 21, 2015, 5:48pm

jefe aqui esta, ya borre el caracter y los targets pero aun sigue sin funcionar. le subire el pom.xml y lo demas
21953.zip (143 KB)

L1128 · October 22, 2015, 1:14am

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

alejandro.du · October 22, 2015, 7:37am

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.

rucko24 · October 25, 2015, 8:12pm

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.

alejandro.du · October 26, 2015, 1:50pm

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?

rucko24 · October 29, 2015, 6:00pm

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