You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

IBGettingStartedWithVaadinSpringWithoutSpringBoot.asciidoc 7.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. ---
  2. title: Getting Started With Vaadin Spring Without Spring Boot
  3. order: 43
  4. layout: page
  5. ---
  6. [[i-b-getting-started-with-vaadin-spring-without-spring-boot]]
  7. = I b - Getting started with Vaadin Spring without Spring Boot
  8. Note: this tutorial applies to *Vaadin Spring 1.0.0 and later*
  9. During this tutorial we will create a new Vaadin project, add Spring and
  10. Vaadin Spring as dependencies, create a simple Spring UI and deploy the
  11. application to a server. 
  12. *Note that this tutorial is for using Vaadin Spring without Spring Boot.
  13. Using Spring Boot is the recommended approach for getting started
  14. quickly when creating a new project. For more information about setting
  15. up a project both with and without Spring Boot -
  16. see https://vaadin.github.io/spring-tutorial/[the Vaadin Spring Boot tutorial].*
  17. [[creating-a-vaadin-project]]
  18. Creating a Vaadin project
  19. ~~~~~~~~~~~~~~~~~~~~~~~~~
  20. If you've created Vaadin projects before, there's nothing new here.
  21. File→New→Project... then select Maven Project. This will take you to the
  22. project creation wizard. You can also create the project using Vaadin
  23. Plug-in for Eclipse if you prefer. 
  24. image:img/project-creation.png[Project creation]
  25. then select the Vaadin archetype
  26. (`com.vaadin:vaadin-archetype-application:<newest Vaadin version>`).
  27. Set your group and artefact ids and your package to your liking. (I used
  28. `com.vaadin`, `spring.tutorial` and `com.vaadin.spring.tutorial` respectively)
  29. [[adding-vaadin-spring-as-a-dependency]]
  30. Adding Vaadin Spring as a dependency
  31. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  32. Open pom.xml and add
  33. [source,xml]
  34. ....
  35. <dependency>
  36. <groupId>com.vaadin</groupId>
  37. <artifactId>vaadin-spring</artifactId>
  38. <version>1.0.0</version>
  39. </dependency>
  40. ....
  41. in the dependencies. Also replace the dependency "vaadin-client" with
  42. "vaadin-client-compiled" and remove the scope line for it as we are
  43. using a pre-compiled widgetset. If your project does not use the Vaadin
  44. add-on Maven repository yet, add it to the POM:
  45. [source,xml]
  46. ....
  47. <repositories>
  48. <repository>
  49. <id>vaadin-addons</id>
  50. <url>https://maven.vaadin.com/vaadin-addons</url>
  51. </repository>
  52. </repositories>
  53. ....
  54. Then save and update project.
  55. [[creating-the-ui]]
  56. Creating the UI
  57. ~~~~~~~~~~~~~~~
  58. The project wizard created a UI for us that we'll use as a starting
  59. point for building our application. There are some unnecessary things
  60. we'll take out and some things we'll need to add. Start of by deleting
  61. the AppWidgetSet.gwt.xml, as we won't need a custom widgetset in these
  62. tutorials. We'll also have to make a few changes to the UI to make it
  63. work with Vaadin Spring.
  64. Here's the UI's original source:
  65. [source,java]
  66. ....
  67. @Theme("mytheme")
  68. @SuppressWarnings("serial")
  69. public class MyVaadinUI extends UI {
  70. @WebServlet(value = "/*", asyncSupported = true)
  71. @VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "com.vaadin.spring.tutorial.AppWidgetSet")
  72. public static class Servlet extends VaadinServlet {
  73. }
  74. @Override
  75. protected void init(VaadinRequest request) {
  76. final VerticalLayout layout = new VerticalLayout();
  77. layout.setMargin(true);
  78. setContent(layout);
  79. Button button = new Button("Click Me");
  80. button.addClickListener(new Button.ClickListener() {
  81. public void buttonClick(ClickEvent event) {
  82. layout.addComponent(new Label("Thank you for clicking"));
  83. }
  84. });
  85. layout.addComponent(button);
  86. }
  87. }
  88. ....
  89. To allow Vaadin Spring to use the UI you'll need to add the following
  90. annotation to the UI:
  91. [source,java]
  92. ....
  93. @SpringUI
  94. ....
  95. The servlet configuration needs to be updated to initialize a Spring
  96. application context, and the servlet should inherit from
  97. `SpringVaadinServlet`. In this tutorial, a `ContextLoaderListener` is used
  98. to initialize Spring.
  99. Finally, as we do not need a custom theme in the application, the theme
  100. annotation is updated to use "valo" and the custom theme in the project
  101. can be deleted.
  102. The resulting UI should be something like this:
  103. [source,java]
  104. ....
  105. package com.vaadin.spring.tutorial;
  106. import javax.servlet.annotation.WebListener;
  107. import javax.servlet.annotation.WebServlet;
  108. import org.springframework.context.annotation.Configuration;
  109. import org.springframework.web.context.ContextLoaderListener;
  110. import com.vaadin.annotations.Theme;
  111. import com.vaadin.server.VaadinRequest;
  112. import com.vaadin.spring.annotation.EnableVaadin;
  113. import com.vaadin.spring.annotation.SpringUI;
  114. import com.vaadin.spring.server.SpringVaadinServlet;
  115. import com.vaadin.ui.Button;
  116. import com.vaadin.ui.Button.ClickEvent;
  117. import com.vaadin.ui.Label;
  118. import com.vaadin.ui.UI;
  119. import com.vaadin.ui.VerticalLayout;
  120. @Theme("valo")
  121. @SpringUI
  122. @SuppressWarnings("serial")
  123. public class MyVaadinUI extends UI {
  124. @WebServlet(value = "/*", asyncSupported = true)
  125. public static class Servlet extends SpringVaadinServlet {
  126. }
  127. @WebListener
  128. public static class MyContextLoaderListener extends ContextLoaderListener {
  129. }
  130. @Configuration
  131. @EnableVaadin
  132. public static class MyConfiguration {
  133. }
  134. @Override
  135. protected void init(VaadinRequest request) {
  136. final VerticalLayout layout = new VerticalLayout();
  137. layout.setMargin(true);
  138. setContent(layout);
  139. Button button = new Button("Click Me");
  140. button.addClickListener(new Button.ClickListener() {
  141. public void buttonClick(ClickEvent event) {
  142. layout.addComponent(new Label("Thank you for clicking"));
  143. }
  144. });
  145. layout.addComponent(button);
  146. }
  147. }
  148. ....
  149. With the `@SpringUI` annotation the Vaadin Spring plugin will know to
  150. inject the UI rather than directly instantiating it. With injected beans
  151. we can use all of the usual Spring features such as autowiring. More on
  152. that in later tutorials.
  153. In addition to these changes, when not using Spring Boot, create the
  154. following Spring context file at
  155. src/main/webapp/WEB-INF/applicationContext.xml :
  156. [source,xml]
  157. ....
  158. <?xml version="1.0" encoding="UTF-8"?>
  159. <beans xmlns="http://www.springframework.org/schema/beans"
  160. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
  161. xsi:schemaLocation="http://www.springframework.org/schema/beans
  162. http://www.springframework.org/schema/beans/spring-beans.xsd
  163. http://www.springframework.org/schema/context
  164. http://www.springframework.org/schema/context/spring-context-4.1.xsd">
  165. <bean class="com.vaadin.spring.tutorial.MyVaadinUI.MyConfiguration" />
  166. <context:component-scan base-package="com.vaadin.spring.tutorial" />
  167. </beans>
  168. ....
  169. A full description of alternative approaches to configuring Spring is
  170. outside the context of this tutorial and you should consult Spring
  171. documentation for them, but a brief introduction to them is given in
  172. https://vaadin.github.io/spring-tutorial/[this
  173. tutorial].
  174. [[deployment]]
  175. Deployment
  176. ~~~~~~~~~~
  177. Once the UI is done we'll deploy it to our server by Run→Run as→Run on
  178. Server. Select your server runtime (Tomcat in our case) and click
  179. Finish.
  180. Eclipse should automatically open an embedded browser directed at your
  181. development server.
  182. Congratulations! You've deployed your first Spring application.