2012-02-15 9 views
14

Como Vaadin es un framework de aplicaciones web Java, ¿es posible insertar el jQuery javascript snippet en el código Vaadin Java?¿Es posible usar jQuery dentro de Vaadin framework?

+1

No veo por qué no, pero no veo por qué querría ... ¿seguramente el marco permite vista separada y controlador? – bdares

+0

El marco proporciona el componente personalizado para usar el código js nativo. Sin embargo, aunque probé un código js complejo, probablemente no pasó nada. Es por eso que hice esa pregunta. – Kyleinincubator

Respuesta

9

Sí lo es.

crear su propia clase que se extiende ApplicationServlet así:

public class MyApplicationServlet extends ApplicationServlet { 

    @Override 
    protected void writeAjaxPageHtmlVaadinScripts(Window window, 
      String themeName, Application application, BufferedWriter page, 
      String appUrl, String themeUri, String appId, 
      HttpServletRequest request) throws ServletException, IOException { 

     page.write("<script type=\"text/javascript\">\n"); 
     page.write("//<![CDATA[\n"); 
     page.write("document.write(\"<script language='javascript' src='./jquery/jquery-1.4.4.min.js'><\\/script>\");\n"); 
     page.write("//]]>\n</script>\n"); 

     super.writeAjaxPageHtmlVaadinScripts(window, themeName, application, 
      page, appUrl, themeUri, appId, request); 
    } 
} 

luego vuelva a colocar el servlet Vaadin en su web.xml (el valor predeterminado es com.vaadin.terminal.gwt.server.ApplicationServlet):

<servlet-class>com.example.MyApplicationServlet</servlet-class> 

entonces usted puede hacer las llamadas jQuery en su código llamando al:

MyApplication.getMainWindow().executeJavascript(jQueryString); 
+0

Como probé, el código de esta línea: MyApplication.getMainWindow(). ExecuteJavascript (jQueryString); puede que solo funcione para un código JavaScript simple. Parece que no es compatible con el código js más complejo. – Kyleinincubator

+0

No sé jQuery muy bien, pero al menos en mi aplicación Vaadin lo usan los cuadros de Invitados (basados ​​en Highcharts). ¿Te serviría si declaras tus cosas de jQuery en un archivo js, ​​lo pones en los encabezados de página (como jQuery.js) y llamas a tus funciones con executeJavascript? Y, además, ¿comprobó (con firebug o similar) que la biblioteca jQuery se cargó con éxito? – miq

+1

Además, consulte este ejemplo: http://vaadinjquery.appspot.com/ – miq

3

One more custo zando para ApplicationServlet:

public class VaadinApplicationServlet extends ApplicationServlet { 

    @Override 
    protected void writeAjaxPageHtmlHeader(BufferedWriter page, String title, String themeUri, HttpServletRequest request) throws IOException { 
     page.write("<script language='javascript' src='http://code.jquery.com/jquery-1.8.0.min.js'></script>"); 
     super.writeAjaxPageHtmlHeader(page, title, themeUri, request); 
    } 

} 
5

Usted puede utilizar las anotaciones @JavaScript y @StyleSheet

@StyleSheet({ 
       /* 
       * JQuery UI 
       */ 
       "vaadin://jquery/jquery-ui-1.9.2.custom/css/ui-darkness/jquery-ui-1.9.2.custom.min.css", 
}) 

@JavaScript({ 
       /* 
       * JQuery 
       */ 
       "vaadin://jquery/jquery-1.11.1.min.js", 

       /* 
       * JQuery UI 
       */ 
       "vaadin://jquery/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js", 
}) 

public class MyUI extends UI { 
... 
} 

de ejecución:

JavaScript.getCurrent().execute("...javascript code here...") 

tener cuidado con guiones más grandes. Agregar javascript a través de la anotación vaadin tiene un rendimiento muy pobre. Mejor inyecte el script en el encabezado html manualmente.

+0

¿A dónde van los archivos (por ejemplo, '/ jquery/...')? ¿En qué carpeta del proyecto? – luckydonald

+0

Los archivos van a la carpeta "VAADIN" de la aplicación a la que se puede acceder mediante la URL "vaadin: //" – d2k2

Cuestiones relacionadas