2012-02-15 15 views
14

Jako że Vaadin jest strukturą aplikacji WWW Java, możliwe jest wstawienie kodu jQuery javascript do kodu Java Vaadin?Czy można używać jQuery w ramach Vaadin?

+1

Nie widzę powodu, dlaczego nie, ale nie rozumiem, dlaczego chciałbyś ... na pewno ramy pozwalają na oddzielny widok i kontroler? – bdares

+0

Framework udostępnia niestandardowy komponent do używania macierzystego kodu js. Jednak gdy próbowałem jakiegoś skomplikowanego kodu js, prawdopodobnie nic się nie stało. Właśnie dlatego zadałem takie pytanie. – Kyleinincubator

Odpowiedz

9

Tak jest.

Stwórz własną ApplicationServlet rozciągający klasę tak:

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

Następnie wymień aplet Vaadin w web.xml (domyślnie jest to com.vaadin.terminal.gwt.server.ApplicationServlet):

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

Następnie można wykonywać połączenia jQuery w swoim kodzie, dzwoniąc pod numer:

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

Jak próbowałem, kod tej linii: MyApplication.getMainWindow(). ExecuteJavascript (jQueryString), może działać tylko dla niektórych prostych kodu javascript. Wygląda na to, że nie obsługuje bardziej złożonego kodu js. – Kyleinincubator

+0

Nie znam jQuery tak dobrze, ale przynajmniej w mojej aplikacji Vaadin jest używana przez wykresy Invient (w oparciu o Highcharts). Czy zadziałałoby to dla Ciebie, gdyby zadeklarowałeś zawartość jQuery w pliku js, umieściłeś ją w nagłówkach stron (jak jQuery.js) i wywołałeś swoje funkcje za pomocą executeJavascript? Co więcej, czy sprawdziłeś (w/firebug lub podobnym), że biblioteka jQuery została pomyślnie załadowana? – miq

+1

Sprawdź również ten przykład: http://vaadinjquery.appspot.com/ – miq

3

Jeszcze jeden sklep mizing dla 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

Można użyć @JavaScript i @StyleSheet adnotacje

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

wykonania:

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

uważać z większych skryptów. Dodawanie javascript za pomocą adnotacji vaadin ma bardzo słabą wydajność. Lepiej ręcznie wstrzyknij skrypt w nagłówku HTML.

+0

Gdzie znajdują się pliki (np. '/ Jquery/...')? W którym folderze w projekcie? – luckydonald

+0

Pliki przechodzą do folderu "VAADIN" aplikacji, do którego można uzyskać dostęp za pomocą adresu URL "vaadin: //" – d2k2

Powiązane problemy