2012-02-15 16 views
14

Poiché Vaadin è un framework di applicazioni Web Java, è quindi possibile inserire lo snippet javascript jQuery nel codice Java Vaadin?È possibile utilizzare jQuery all'interno del framework Vaadin?

+1

Non vedo perché no, ma non vedo perché vorreste ... sicuramente il framework consente la visualizzazione separata e il controller? – bdares

+0

Il framework fornisce al componente personalizzato l'uso del codice js nativo. Tuttavia, mentre ho provato un codice js complesso, probabilmente non è successo nulla. Questo è il motivo per cui ho fatto questa domanda. – Kyleinincubator

risposta

9

Sì, lo è.

Creare la tua classe che estende ApplicationServlet come questo:

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); 
    } 
} 

quindi sostituire il servlet Vaadin nel web.xml (il valore predefinito è com.vaadin.terminal.gwt.server.ApplicationServlet):

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

È quindi possibile effettuare chiamate jQuery nel tuo codice chiamando:

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

Come ho provato, il codice di questa riga: MyApplication.getMainWindow(). ExecuteJavascript (jQueryString); può funzionare solo per un semplice codice javascript. Non sembra abbastanza per supportare un codice js più complesso. – Kyleinincubator

+0

Non conosco bene jQuery, ma almeno nella mia applicazione Vaadin è usato dai grafici Invient (basato su Highcharts). Funzionerebbe per te se dichiarassi la tua roba jQuery in un file js, la metti nelle intestazioni di pagina (come jQuery.js) e chiamassi le tue funzioni con executeJavascript? E inoltre, hai controllato (w/firebug o simile) che la libreria jQuery è stata caricata con successo? – miq

+1

Inoltre, controllare questo esempio: http://vaadinjquery.appspot.com/ – miq

3

Un altro custo pro- tetta per 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

Offriamo le @JavaScript e @StyleSheet annotazioni

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

di esecuzione:

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

stare attenti con gli script più grandi. L'aggiunta di javascript tramite l'annotazione di vaadin ha prestazioni molto scarse. Meglio iniettare manualmente lo script nell'intestazione HTML.

+0

Dove vanno i file (ad esempio '/ jquery/...')? In quale cartella del progetto? – luckydonald

+0

I file vanno nella cartella "VAADIN" dell'applicazione a cui è possibile accedere tramite l'URL "vaadin: //" – d2k2

Problemi correlati