Table Of Contents<\/h3>\n\n- 1. The tools<\/a><\/dt>\n
- 2. Introduction<\/a><\/dt>\n
- 3. Prerequisites<\/a><\/dt>\n
- 4. Set up the server project<\/a><\/dt>\n
- \n
\n- 4.1 Download Jersey<\/a><\/dt>\n
- 4.2 Create the server project<\/a><\/dt>\n
- 4.3 Copy Jersey Files<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5. Coding the server<\/a><\/dt>\n
- 6. The server web.xml<\/a><\/dt>\n
- 7. Create the client project<\/a><\/dt>\n
- 8. Coding the client project<\/a><\/dt>\n
- \n
\n- 8.1 Client Class to access the server<\/a><\/dt>\n
- 8.2 Vaadin UI<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 9. The complete source code<\/a><\/dt>\n
- \n
\n- 9.1 The server source code<\/a><\/dt>\n
- 9.2 The client Source Code<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 10. Running the example<\/a><\/dt>\n
- 11. Results<\/a><\/dt>\n
- \n
\n- 11.1 Get the response<\/a><\/dt>\n
- 11.2 Get the plain text<\/a><\/dt>\n
- 11.3 Get the XML<\/a><\/dt>\n
- 11.4 Get the JSON<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 12. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. The tools<\/h2>\n\n- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.5<\/li>\n
- Tomcat Server 8<\/li>\n
- Latest Jersey<\/li>\n<\/ul>\n
<\/a>2. Introduction<\/h2>\nIn this example we are going to create a server using Jersey with text, XML and JSON resources and access these resources from Vaadin, to show it on the user interface. First we are going to create the server and run it. Next we are going to create the Vaadin client and consume the resources on the server.<\/p>\n
<\/a>3. Prerequisites<\/h2>\n\n- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin 7.6.5 plug-in installed<\/li>\n
- Tomcat 8 installed and running<\/li>\n<\/ul>\n
<\/a>4. Set up the server project<\/h2>\n<\/a>4.1 Download Jersey<\/h3>\nDownload latest Jersey library from Download Jersey<\/a>, uncompress the zip file and save it for later.<\/p>\n![\"Figure](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/01-Download-Jersey.png\")
<\/a>Figure 1: Download Jersey<\/figcaption><\/figure><\/p>\n<\/a>4.2 Create the server project<\/h3>\nFire up eclipse and choose from the menu File->New->Other<\/code>. From the list choose Dynamic Web Project.<\/p>\n![\"Figure](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/02-Create-dynamic-web-project.png\")
<\/a>Figure 2: Create dynamic web project<\/figcaption><\/figure><\/p>\n<\/a>4.3 Copy Jersey Files<\/h3>\nCopy all the Jersey jar files from the downloaded zip into the folder WebContent->WEB-INF->lib<\/code>.<\/p>\n![\"Figure](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/03-Copy-jars-into-lib-folder.png\")
<\/a>Figure 3: Copy jars into lib folder<\/figcaption><\/figure><\/p>\n<\/a>5. Coding the server<\/h2>\nCreate a new pojo java class.<\/p>\n
Server class<\/em><\/span><\/p>\n@Path(\"\/restserver\")\npublic class RestServer {\n\n}\n<\/pre>\nThis class use the annotation @Path<\/code> of the specification JAX-RS. It’s a plain old java object because inherits no one. The JAX-RS specification of Jersey uses annotations to create the REST services.<\/p>\nText response<\/em><\/span><\/p>\n\t@GET\n\t@Produces(MediaType.TEXT_PLAIN)\n\tpublic String serverMessageText() {\n\t\treturn \"This is a message from the server\";\n\t}\n<\/pre>\nWhen you make an html request with a GET<\/code> with plain text as the type of the data, this content is served.
\nThe annotation @GET<\/code>, serves an html GET request and the annotation @Produces<\/code>, specify the type of data of the response according to the request. The server first analyzes the request and then based on the data type requested it sends the response. Request\/Response is the standard html communication protocol. REST uses the standard request\/response communication protocol.<\/p>\nXML response<\/em><\/span><\/p>\n\t@GET\n\t@Produces(MediaType.TEXT_XML)\n\tpublic String serverMessageXML() {\n\t\treturn \" This is a message from the server \";\n\t}\n<\/pre>\nWhen you make an html request with a GET<\/code> with XML as the type of the data, this content is served.<\/p>\nJSON response<\/em><\/span><\/p>\n\t@GET\n\t@Produces(MediaType.APPLICATION_JSON)\n\tpublic String serverMessageJSON() {\n\t\treturn \"[{'message' : 'server json message', 'content' : 'message content'}]\";\n\t}\n\n<\/pre>\nWhen you make an html request with a GET<\/code> with JSON as the type of the data, this content is served.<\/p>\n<\/a>6. The server web.xml<\/h2>\nIn the server we are going to use the web.xml configuration to expose our REST services and define our paths.<\/p>\n
servlet<\/em><\/span><\/p>\n <servlet>\n <servlet-name>Rest Server<\/servlet-name>\n <servlet-class>org.glassfish.jersey.servlet.ServletContainer<\/servlet-class>\n <init-param>\n <param-name>jersey.config.server.provider.packages<\/param-name>\n <param-value>com.example<\/param-value>\n <\/init-param>\n <load-on-startup>1<\/load-on-startup>\n <\/servlet>\n<\/pre>\nThis defines the servlet and map the appropriate jersey class to our package. To make the Jersey library recognizes where are the content to be served.
<\/div> <\/div><\/p>\nServlet mapping<\/em><\/span><\/p>\n <servlet-mapping>\n <servlet-name>Rest Server<\/servlet-name>\n <url-pattern>\/server\/*<\/url-pattern>\n <\/servlet-mapping> \n<\/pre>\nThe servlet mapping, maps the content of our class to the URI used in the browser.<\/p>\n
<\/a>7. Create the client project<\/h2>\nIn the file menu choose File -> New -> Other<\/p>\n
![\"Figure](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/04-New-Project.png\")
<\/a>Figure 4: New Project<\/figcaption><\/figure><\/p>\nNow from the list choose Vaadin 7 project<\/p>\n
![\"Figure](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/05-Vaadin-Project.png\")
<\/a>Figure 5: Vaadin Project<\/figcaption><\/figure><\/p>\nPress next and name your project then press finish.<\/p>\n
Copy all the Jersey jar files from the downloaded zip into the folder WebContent->WEB-INF->lib<\/code>. As we did with the server.<\/p>\n<\/a>8. Coding the client project<\/h2>\n<\/a>8.1 Client Class to access the server<\/h3>\nWe are going to create a supplementary client class to create the server REST services.
\nCreate a POJO class:<\/p>\n
POJO client<\/em><\/span><\/p>\npublic class RestClient {\n\t\n}\n<\/pre>\nIn this class we are going to create all the client methods we need to access the data on the server.<\/p>\n
fields<\/em><\/span><\/p>\n\tClientConfig config;\n\tClient client;\n\tWebTarget webtarget;\n<\/pre>\nCreate the fields of the the Jersey REST client.<\/p>\n
Constructor<\/em><\/span><\/p>\n\tpublic RestClient(){\n\t\tconfig = new ClientConfig();\n\t\tclient = ClientBuilder.newClient(config);\n\t\twebtarget = client.target(\"http:\/\/localhost:8080\/JaxRestHello\");\n\t}\n<\/pre>\nIn the constructor of the Jersey client, we have our base URI to access the REST services.<\/p>\n
getResponse<\/em><\/span><\/p>\n\tpublic String getResponse(){\n\t\tString response = webtarget.path(\"server\").\n\t\t\t\tpath(\"restserver\").\n\t\t\t\trequest().\n\t\t\t\taccept(MediaType.TEXT_PLAIN).\n\t\t\t\tget(Response.class).toString();\n\t\treturn response;\n\t}\n<\/pre>\nThis is a method to get the response from the server. The response could tell us the state of the server and the availability of the services.<\/p>\n
Get text answer<\/em><\/span><\/p>\n\tpublic String getAnswerText(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.TEXT_PLAIN).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n<\/pre>\nThis is a method to get a plain text answer. In the field accept<\/code>, we specify the type of the response. With REST, the data between the client and the server is just plain text but here we could know the kind of structure these plain text has. In this example it could be just plain text, XML or JSON.<\/p>\nGet XML answer<\/em><\/span><\/p>\n\tpublic String getAnswerXML(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.TEXT_XML).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n<\/pre>\nThis method gets an XML answer from the server, note the fields path<\/code>, these fields are append to the base URI created in the constructor of the class.<\/p>\nGet JSON<\/em><\/span><\/p>\n\tpublic String getAnswerJSON(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.APPLICATION_JSON).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n<\/pre>\nJSON is just plain text with some predefined structure.<\/p>\n
<\/a>8.2 Vaadin UI<\/h3>\nIn the init<\/code> class of our Vaadin application we create an instance of the client class to access the REST services from our web application. Remember the REST server could be anywhere in the Internet. It could be on the same server as the client but we can have multiples REST servers all around the world and a client accessing all of them.<\/p>\nMain layout<\/em><\/span><\/p>\n\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setMargin(true);\n\t\tsetContent(layout);\n<\/pre>\nWe create the main layout of our application.<\/p>\n
Rest client Instance<\/em><\/span><\/p>\n\t\tRestClient restClient = new RestClient();\n<\/pre>\nWe create an instance of our REST client, to use it from the Vaadin user interface.<\/p>\n
Feedback label<\/em><\/span><\/p>\n\t\tLabel resultLabel = new Label();\n\t\tresultLabel.setWidth(\"100%\");\n\t\tresultLabel.setHeight(\"200px\");\n\t\tresultLabel.addStyleName(\"h1\");\n\t\tresultLabel.addStyleName(\"mylabelstyle\");\n<\/pre>\nWe create a label to put the feedback from our server, and make some adjustments and styles to the label just for this example purpose.<\/p>\n
Layout for buttons<\/em><\/span><\/p>\n\t\tHorizontalLayout hLayot = new HorizontalLayout();\n<\/pre>\nWe are going to create some buttons to get different answers from the server, and we organize it on an horizontal layout.<\/p>\n
Get Response<\/em><\/span><\/p>\n\t\tButton buttonGetResponse = new Button(\"Get Response\");\n\t\tbuttonGetResponse.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getResponse());\n\t\t\t}\n\t\t});\n<\/pre>\nThis is a button to get the server response. With this response we can check the status of the server.<\/p>\n
Text Answer<\/em><\/span><\/p>\n\t\tButton buttonGetText = new Button(\"Get Text Answer\");\n\t\tbuttonGetText.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerText());\n\t\t\t}\n\t\t});\n<\/pre>\nThis is a button to get the text answer from the REST server.<\/p>\n
XML Answer<\/em><\/span><\/p>\n\t\tButton buttonGetXml = new Button(\"Get XML Answer\");\n\t\tbuttonGetXml.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerXML());\n\t\t\t}\n\t\t});\n<\/pre>\nWith this button we get an XML response from the server. We are using the client class created before to call these methods.[ulp id=’YBvYYzEYBUrADqmI’]<\/p>\n
JSON Answer<\/em><\/span><\/p>\n\t\tButton buttonGetJson = new Button(\"Get JSON Answer\");\n\t\tbuttonGetJson.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerJSON());\n\t\t\t}\n\t\t});\n<\/pre>\nA JSON answer from the server, JSON has been very popular lately and you could transfer it with REST.<\/p>\n
Add elements to the layout<\/em><\/span><\/p>\n\t\thLayot.addComponent(buttonGetResponse);\n\t\thLayot.addComponent(buttonGetText);\n\t\thLayot.addComponent(buttonGetXml);\n\t\thLayot.addComponent(buttonGetJson);\n\t\tlayout.addComponent(resultLabel);\n\t\tlayout.addComponent(hLayot);\n<\/pre>\nHere we add all elements to the layout.<\/p>\n
<\/a>9. The complete source code<\/h2>\n<\/a>9.1 The server source code<\/h3>\nRestServer.java<\/em><\/span><\/p>\npackage com.example;\n\nimport javax.ws.rs.GET;\nimport javax.ws.rs.Path;\nimport javax.ws.rs.Produces;\nimport javax.ws.rs.core.MediaType;\n\n@Path(\"\/restserver\")\npublic class RestServer {\n\n\t@GET\n\t@Produces(MediaType.TEXT_PLAIN)\n\tpublic String serverMessageText() {\n\t\treturn \"This is a message from the server\";\n\t}\n\n\t@GET\n\t@Produces(MediaType.TEXT_XML)\n\tpublic String serverMessageXML() {\n\t\treturn \" This is a message from the server \";\n\t}\n\t@GET\n\t@Produces(MediaType.APPLICATION_JSON)\n\tpublic String serverMessageJSON() {\n\t\treturn \"[{'message' : 'server json message', 'content' : 'message content'}]\";\n\t}\n}\n<\/pre>\nweb.xml<\/em><\/span><\/p>\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<web-app xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xmlns=\"http:\/\/xmlns.jcp.org\/xml\/ns\/javaee\" xsi:schemaLocation=\"http:\/\/xmlns.jcp.org\/xml\/ns\/javaee http:\/\/xmlns.jcp.org\/xml\/ns\/javaee\/web-app_3_1.xsd\" id=\"WebApp_ID\" version=\"3.1\">\n <display-name>JaxRestHello<\/display-name>\n <servlet>\n <servlet-name>Rest Server<\/servlet-name>\n <servlet-class>org.glassfish.jersey.servlet.ServletContainer<\/servlet-class>\n <init-param>\n <param-name>jersey.config.server.provider.packages<\/param-name>\n <param-value>com.example<\/param-value>\n <\/init-param>\n <load-on-startup>1<\/load-on-startup>\n <\/servlet>\n <servlet-mapping>\n <servlet-name>Rest Server<\/servlet-name>\n <url-pattern>\/server\/*<\/url-pattern>\n <\/servlet-mapping> \n<\/web-app>\n<\/pre>\n<\/a>9.2 The client Source Code<\/h3>\nRestClient.java<\/em><\/span><\/p>\npackage com.example.vaadin_rest_example;\n\nimport javax.ws.rs.client.Client;\nimport javax.ws.rs.client.ClientBuilder;\nimport javax.ws.rs.client.WebTarget;\nimport javax.ws.rs.core.MediaType;\nimport javax.ws.rs.core.Response;\n\nimport org.glassfish.jersey.client.ClientConfig;\n\npublic class RestClient {\n\tClientConfig config;\n\tClient client;\n\tWebTarget webtarget;\n\t\n\tpublic RestClient(){\n\t\tconfig = new ClientConfig();\n\t\tclient = ClientBuilder.newClient(config);\n\t\twebtarget = client.target(\"http:\/\/localhost:8080\/JaxRestHello\");\n\t}\n\t\n\tpublic String getResponse(){\n\t\tString response = webtarget.path(\"server\").\n\t\t\t\tpath(\"restserver\").\n\t\t\t\trequest().\n\t\t\t\taccept(MediaType.TEXT_PLAIN).\n\t\t\t\tget(Response.class).toString();\n\t\treturn response;\n\t}\n\t\n\tpublic String getAnswerText(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.TEXT_PLAIN).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n\n\tpublic String getAnswerXML(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.TEXT_XML).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n\n\tpublic String getAnswerJSON(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.APPLICATION_JSON).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n\t\n}\n<\/pre>\nVaadin_rest_exampleUI.java<\/em><\/span><\/p>\npackage com.example.vaadin_rest_example;\n\nimport javax.servlet.annotation.WebServlet;\n\nimport com.vaadin.annotations.Theme;\nimport com.vaadin.annotations.VaadinServletConfiguration;\nimport com.vaadin.server.VaadinRequest;\nimport com.vaadin.server.VaadinServlet;\nimport com.vaadin.ui.Button;\nimport com.vaadin.ui.Button.ClickEvent;\nimport com.vaadin.ui.HorizontalLayout;\nimport com.vaadin.ui.Label;\nimport com.vaadin.ui.UI;\nimport com.vaadin.ui.VerticalLayout;\n\n@SuppressWarnings(\"serial\")\n@Theme(\"vaadin_rest_example\")\npublic class Vaadin_rest_exampleUI extends UI {\n\n\t@WebServlet(value = \"\/*\", asyncSupported = true)\n\t@VaadinServletConfiguration(productionMode = false, ui = Vaadin_rest_exampleUI.class, widgetset = \"com.example.vaadin_rest_example.widgetset.Vaadin_rest_exampleWidgetset\")\n\tpublic static class Servlet extends VaadinServlet {\n\t}\n\n\t@Override\n\tprotected void init(VaadinRequest request) {\n\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setMargin(true);\n\t\tsetContent(layout);\n\n\t\tRestClient restClient = new RestClient();\n\t\t\n\t\tLabel resultLabel = new Label();\n\t\tresultLabel.setWidth(\"100%\");\n\t\tresultLabel.setHeight(\"200px\");\n\t\tresultLabel.addStyleName(\"h1\");\n\t\tresultLabel.addStyleName(\"mylabelstyle\");\n\t\tHorizontalLayout hLayot = new HorizontalLayout();\n\t\t\n\t\tButton buttonGetResponse = new Button(\"Get Response\");\n\t\tbuttonGetResponse.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getResponse());\n\t\t\t}\n\t\t});\n\t\t\n\t\tButton buttonGetText = new Button(\"Get Text Answer\");\n\t\tbuttonGetText.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerText());\n\t\t\t}\n\t\t});\n\n\t\tButton buttonGetXml = new Button(\"Get XML Answer\");\n\t\tbuttonGetXml.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerXML());\n\t\t\t}\n\t\t});\n\n\t\tButton buttonGetJson = new Button(\"Get JSON Answer\");\n\t\tbuttonGetJson.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerJSON());\n\t\t\t}\n\t\t});\n\t\t\n\t\thLayot.addComponent(buttonGetResponse);\n\t\thLayot.addComponent(buttonGetText);\n\t\thLayot.addComponent(buttonGetXml);\n\t\thLayot.addComponent(buttonGetJson);\n\t\tlayout.addComponent(resultLabel);\n\t\tlayout.addComponent(hLayot);\n\t}\n\n}\n<\/pre>\nvaadin_rest_example.scss<\/em><\/span><\/p>\n@import \"..\/valo\/valo.scss\";\n\n@mixin vaadin_rest_example {\n @include valo;\n\n\t.v-label-mylabelstyle {\n\t color: white;\n\t text-align: center;\n\t background-color: black;\t\n\t border-color: white;\n\t font-weight: bold;\n\t}\n}\n<\/pre>\n<\/a>10. Running the example<\/h2>\nFirst right click on the server project folder and choose Run as -> Run on server choose Tomcat 8 server and press finish.
\nWhen the server is running right click on the Vaadin project folder and choose Run as -> Run on server choose Tomcat 8 server and press finish.<\/p>\n
<\/a>11. Results<\/h2>\n<\/a>11.1 Get the response<\/h3>\n
- \n
- 4.1 Download Jersey<\/a><\/dt>\n
- 4.2 Create the server project<\/a><\/dt>\n
- 4.3 Copy Jersey Files<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5. Coding the server<\/a><\/dt>\n
- 6. The server web.xml<\/a><\/dt>\n
- 7. Create the client project<\/a><\/dt>\n
- 8. Coding the client project<\/a><\/dt>\n
- \n
- \n
- 8.1 Client Class to access the server<\/a><\/dt>\n
- 8.2 Vaadin UI<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 9. The complete source code<\/a><\/dt>\n
- \n
- \n
- 9.1 The server source code<\/a><\/dt>\n
- 9.2 The client Source Code<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 10. Running the example<\/a><\/dt>\n
- 11. Results<\/a><\/dt>\n
- \n
- \n
- 11.1 Get the response<\/a><\/dt>\n
- 11.2 Get the plain text<\/a><\/dt>\n
- 11.3 Get the XML<\/a><\/dt>\n
- 11.4 Get the JSON<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 12. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. The tools<\/h2>\n
- \n
- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.5<\/li>\n
- Tomcat Server 8<\/li>\n
- Latest Jersey<\/li>\n<\/ul>\n
<\/a>2. Introduction<\/h2>\n
In this example we are going to create a server using Jersey with text, XML and JSON resources and access these resources from Vaadin, to show it on the user interface. First we are going to create the server and run it. Next we are going to create the Vaadin client and consume the resources on the server.<\/p>\n
<\/a>3. Prerequisites<\/h2>\n
- \n
- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin 7.6.5 plug-in installed<\/li>\n
- Tomcat 8 installed and running<\/li>\n<\/ul>\n
<\/a>4. Set up the server project<\/h2>\n
<\/a>4.1 Download Jersey<\/h3>\n
Download latest Jersey library from Download Jersey<\/a>, uncompress the zip file and save it for later.<\/p>\n
<\/a>Figure 1: Download Jersey<\/figcaption><\/figure><\/p>\n <\/a>4.2 Create the server project<\/h3>\n
Fire up eclipse and choose from the menu
File->New->Other<\/code>. From the list choose Dynamic Web Project.<\/p>\n<\/a>Figure 2: Create dynamic web project<\/figcaption><\/figure><\/p>\n <\/a>4.3 Copy Jersey Files<\/h3>\n
Copy all the Jersey jar files from the downloaded zip into the folder
WebContent->WEB-INF->lib<\/code>.<\/p>\n<\/a>Figure 3: Copy jars into lib folder<\/figcaption><\/figure><\/p>\n <\/a>5. Coding the server<\/h2>\n
Create a new pojo java class.<\/p>\n
Server class<\/em><\/span><\/p>\n
@Path(\"\/restserver\")\npublic class RestServer {\n\n}\n<\/pre>\nThis class use the annotation
@Path<\/code> of the specification JAX-RS. It’s a plain old java object because inherits no one. The JAX-RS specification of Jersey uses annotations to create the REST services.<\/p>\nText response<\/em><\/span><\/p>\n
\t@GET\n\t@Produces(MediaType.TEXT_PLAIN)\n\tpublic String serverMessageText() {\n\t\treturn \"This is a message from the server\";\n\t}\n<\/pre>\nWhen you make an html request with a
GET<\/code> with plain text as the type of the data, this content is served.
\nThe annotation@GET<\/code>, serves an html GET request and the annotation@Produces<\/code>, specify the type of data of the response according to the request. The server first analyzes the request and then based on the data type requested it sends the response. Request\/Response is the standard html communication protocol. REST uses the standard request\/response communication protocol.<\/p>\nXML response<\/em><\/span><\/p>\n
\t@GET\n\t@Produces(MediaType.TEXT_XML)\n\tpublic String serverMessageXML() {\n\t\treturn \" This is a message from the server \";\n\t}\n<\/pre>\nWhen you make an html request with a
GET<\/code> with XML as the type of the data, this content is served.<\/p>\nJSON response<\/em><\/span><\/p>\n
\t@GET\n\t@Produces(MediaType.APPLICATION_JSON)\n\tpublic String serverMessageJSON() {\n\t\treturn \"[{'message' : 'server json message', 'content' : 'message content'}]\";\n\t}\n\n<\/pre>\nWhen you make an html request with a
GET<\/code> with JSON as the type of the data, this content is served.<\/p>\n<\/a>6. The server web.xml<\/h2>\n
In the server we are going to use the web.xml configuration to expose our REST services and define our paths.<\/p>\n
servlet<\/em><\/span><\/p>\n
<servlet>\n <servlet-name>Rest Server<\/servlet-name>\n <servlet-class>org.glassfish.jersey.servlet.ServletContainer<\/servlet-class>\n <init-param>\n <param-name>jersey.config.server.provider.packages<\/param-name>\n <param-value>com.example<\/param-value>\n <\/init-param>\n <load-on-startup>1<\/load-on-startup>\n <\/servlet>\n<\/pre>\n
This defines the servlet and map the appropriate jersey class to our package. To make the Jersey library recognizes where are the content to be served.
<\/div> <\/div><\/p>\nServlet mapping<\/em><\/span><\/p>\n
<servlet-mapping>\n <servlet-name>Rest Server<\/servlet-name>\n <url-pattern>\/server\/*<\/url-pattern>\n <\/servlet-mapping> \n<\/pre>\n
The servlet mapping, maps the content of our class to the URI used in the browser.<\/p>\n
<\/a>7. Create the client project<\/h2>\n
In the file menu choose File -> New -> Other<\/p>\n
<\/a>Figure 4: New Project<\/figcaption><\/figure><\/p>\n Now from the list choose Vaadin 7 project<\/p>\n
<\/a>Figure 5: Vaadin Project<\/figcaption><\/figure><\/p>\n Press next and name your project then press finish.<\/p>\n
Copy all the Jersey jar files from the downloaded zip into the folder
WebContent->WEB-INF->lib<\/code>. As we did with the server.<\/p>\n<\/a>8. Coding the client project<\/h2>\n
<\/a>8.1 Client Class to access the server<\/h3>\n
We are going to create a supplementary client class to create the server REST services.
\nCreate a POJO class:<\/p>\nPOJO client<\/em><\/span><\/p>\n
public class RestClient {\n\t\n}\n<\/pre>\nIn this class we are going to create all the client methods we need to access the data on the server.<\/p>\n
fields<\/em><\/span><\/p>\n
\tClientConfig config;\n\tClient client;\n\tWebTarget webtarget;\n<\/pre>\n
Create the fields of the the Jersey REST client.<\/p>\n
Constructor<\/em><\/span><\/p>\n
\tpublic RestClient(){\n\t\tconfig = new ClientConfig();\n\t\tclient = ClientBuilder.newClient(config);\n\t\twebtarget = client.target(\"http:\/\/localhost:8080\/JaxRestHello\");\n\t}\n<\/pre>\nIn the constructor of the Jersey client, we have our base URI to access the REST services.<\/p>\n
getResponse<\/em><\/span><\/p>\n
\tpublic String getResponse(){\n\t\tString response = webtarget.path(\"server\").\n\t\t\t\tpath(\"restserver\").\n\t\t\t\trequest().\n\t\t\t\taccept(MediaType.TEXT_PLAIN).\n\t\t\t\tget(Response.class).toString();\n\t\treturn response;\n\t}\n<\/pre>\nThis is a method to get the response from the server. The response could tell us the state of the server and the availability of the services.<\/p>\n
Get text answer<\/em><\/span><\/p>\n
\tpublic String getAnswerText(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.TEXT_PLAIN).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n<\/pre>\nThis is a method to get a plain text answer. In the field
accept<\/code>, we specify the type of the response. With REST, the data between the client and the server is just plain text but here we could know the kind of structure these plain text has. In this example it could be just plain text, XML or JSON.<\/p>\nGet XML answer<\/em><\/span><\/p>\n
\tpublic String getAnswerXML(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.TEXT_XML).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n<\/pre>\nThis method gets an XML answer from the server, note the fields
path<\/code>, these fields are append to the base URI created in the constructor of the class.<\/p>\nGet JSON<\/em><\/span><\/p>\n
\tpublic String getAnswerJSON(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.APPLICATION_JSON).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n<\/pre>\nJSON is just plain text with some predefined structure.<\/p>\n
<\/a>8.2 Vaadin UI<\/h3>\n
In the
init<\/code> class of our Vaadin application we create an instance of the client class to access the REST services from our web application. Remember the REST server could be anywhere in the Internet. It could be on the same server as the client but we can have multiples REST servers all around the world and a client accessing all of them.<\/p>\nMain layout<\/em><\/span><\/p>\n
\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setMargin(true);\n\t\tsetContent(layout);\n<\/pre>\n
We create the main layout of our application.<\/p>\n
Rest client Instance<\/em><\/span><\/p>\n
\t\tRestClient restClient = new RestClient();\n<\/pre>\n
We create an instance of our REST client, to use it from the Vaadin user interface.<\/p>\n
Feedback label<\/em><\/span><\/p>\n
\t\tLabel resultLabel = new Label();\n\t\tresultLabel.setWidth(\"100%\");\n\t\tresultLabel.setHeight(\"200px\");\n\t\tresultLabel.addStyleName(\"h1\");\n\t\tresultLabel.addStyleName(\"mylabelstyle\");\n<\/pre>\n
We create a label to put the feedback from our server, and make some adjustments and styles to the label just for this example purpose.<\/p>\n
Layout for buttons<\/em><\/span><\/p>\n
\t\tHorizontalLayout hLayot = new HorizontalLayout();\n<\/pre>\n
We are going to create some buttons to get different answers from the server, and we organize it on an horizontal layout.<\/p>\n
Get Response<\/em><\/span><\/p>\n
\t\tButton buttonGetResponse = new Button(\"Get Response\");\n\t\tbuttonGetResponse.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getResponse());\n\t\t\t}\n\t\t});\n<\/pre>\nThis is a button to get the server response. With this response we can check the status of the server.<\/p>\n
Text Answer<\/em><\/span><\/p>\n
\t\tButton buttonGetText = new Button(\"Get Text Answer\");\n\t\tbuttonGetText.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerText());\n\t\t\t}\n\t\t});\n<\/pre>\nThis is a button to get the text answer from the REST server.<\/p>\n
XML Answer<\/em><\/span><\/p>\n
\t\tButton buttonGetXml = new Button(\"Get XML Answer\");\n\t\tbuttonGetXml.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerXML());\n\t\t\t}\n\t\t});\n<\/pre>\nWith this button we get an XML response from the server. We are using the client class created before to call these methods.[ulp id=’YBvYYzEYBUrADqmI’]<\/p>\n
JSON Answer<\/em><\/span><\/p>\n
\t\tButton buttonGetJson = new Button(\"Get JSON Answer\");\n\t\tbuttonGetJson.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerJSON());\n\t\t\t}\n\t\t});\n<\/pre>\nA JSON answer from the server, JSON has been very popular lately and you could transfer it with REST.<\/p>\n
Add elements to the layout<\/em><\/span><\/p>\n
\t\thLayot.addComponent(buttonGetResponse);\n\t\thLayot.addComponent(buttonGetText);\n\t\thLayot.addComponent(buttonGetXml);\n\t\thLayot.addComponent(buttonGetJson);\n\t\tlayout.addComponent(resultLabel);\n\t\tlayout.addComponent(hLayot);\n<\/pre>\n
Here we add all elements to the layout.<\/p>\n
<\/a>9. The complete source code<\/h2>\n
<\/a>9.1 The server source code<\/h3>\n
RestServer.java<\/em><\/span><\/p>\n
package com.example;\n\nimport javax.ws.rs.GET;\nimport javax.ws.rs.Path;\nimport javax.ws.rs.Produces;\nimport javax.ws.rs.core.MediaType;\n\n@Path(\"\/restserver\")\npublic class RestServer {\n\n\t@GET\n\t@Produces(MediaType.TEXT_PLAIN)\n\tpublic String serverMessageText() {\n\t\treturn \"This is a message from the server\";\n\t}\n\n\t@GET\n\t@Produces(MediaType.TEXT_XML)\n\tpublic String serverMessageXML() {\n\t\treturn \" This is a message from the server \";\n\t}\n\t@GET\n\t@Produces(MediaType.APPLICATION_JSON)\n\tpublic String serverMessageJSON() {\n\t\treturn \"[{'message' : 'server json message', 'content' : 'message content'}]\";\n\t}\n}\n<\/pre>\nweb.xml<\/em><\/span><\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<web-app xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xmlns=\"http:\/\/xmlns.jcp.org\/xml\/ns\/javaee\" xsi:schemaLocation=\"http:\/\/xmlns.jcp.org\/xml\/ns\/javaee http:\/\/xmlns.jcp.org\/xml\/ns\/javaee\/web-app_3_1.xsd\" id=\"WebApp_ID\" version=\"3.1\">\n <display-name>JaxRestHello<\/display-name>\n <servlet>\n <servlet-name>Rest Server<\/servlet-name>\n <servlet-class>org.glassfish.jersey.servlet.ServletContainer<\/servlet-class>\n <init-param>\n <param-name>jersey.config.server.provider.packages<\/param-name>\n <param-value>com.example<\/param-value>\n <\/init-param>\n <load-on-startup>1<\/load-on-startup>\n <\/servlet>\n <servlet-mapping>\n <servlet-name>Rest Server<\/servlet-name>\n <url-pattern>\/server\/*<\/url-pattern>\n <\/servlet-mapping> \n<\/web-app>\n<\/pre>\n
<\/a>9.2 The client Source Code<\/h3>\n
RestClient.java<\/em><\/span><\/p>\n
package com.example.vaadin_rest_example;\n\nimport javax.ws.rs.client.Client;\nimport javax.ws.rs.client.ClientBuilder;\nimport javax.ws.rs.client.WebTarget;\nimport javax.ws.rs.core.MediaType;\nimport javax.ws.rs.core.Response;\n\nimport org.glassfish.jersey.client.ClientConfig;\n\npublic class RestClient {\n\tClientConfig config;\n\tClient client;\n\tWebTarget webtarget;\n\t\n\tpublic RestClient(){\n\t\tconfig = new ClientConfig();\n\t\tclient = ClientBuilder.newClient(config);\n\t\twebtarget = client.target(\"http:\/\/localhost:8080\/JaxRestHello\");\n\t}\n\t\n\tpublic String getResponse(){\n\t\tString response = webtarget.path(\"server\").\n\t\t\t\tpath(\"restserver\").\n\t\t\t\trequest().\n\t\t\t\taccept(MediaType.TEXT_PLAIN).\n\t\t\t\tget(Response.class).toString();\n\t\treturn response;\n\t}\n\t\n\tpublic String getAnswerText(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.TEXT_PLAIN).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n\n\tpublic String getAnswerXML(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.TEXT_XML).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n\n\tpublic String getAnswerJSON(){\n\t\tString answer = \n\t\t webtarget.path(\"server\").\n\t\t path(\"restserver\").\n\t\t request().\n\t\t accept(MediaType.APPLICATION_JSON).\n\t\t get(String.class);\n\t\treturn answer;\n\t}\n\t\n}\n<\/pre>\nVaadin_rest_exampleUI.java<\/em><\/span><\/p>\n
package com.example.vaadin_rest_example;\n\nimport javax.servlet.annotation.WebServlet;\n\nimport com.vaadin.annotations.Theme;\nimport com.vaadin.annotations.VaadinServletConfiguration;\nimport com.vaadin.server.VaadinRequest;\nimport com.vaadin.server.VaadinServlet;\nimport com.vaadin.ui.Button;\nimport com.vaadin.ui.Button.ClickEvent;\nimport com.vaadin.ui.HorizontalLayout;\nimport com.vaadin.ui.Label;\nimport com.vaadin.ui.UI;\nimport com.vaadin.ui.VerticalLayout;\n\n@SuppressWarnings(\"serial\")\n@Theme(\"vaadin_rest_example\")\npublic class Vaadin_rest_exampleUI extends UI {\n\n\t@WebServlet(value = \"\/*\", asyncSupported = true)\n\t@VaadinServletConfiguration(productionMode = false, ui = Vaadin_rest_exampleUI.class, widgetset = \"com.example.vaadin_rest_example.widgetset.Vaadin_rest_exampleWidgetset\")\n\tpublic static class Servlet extends VaadinServlet {\n\t}\n\n\t@Override\n\tprotected void init(VaadinRequest request) {\n\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setMargin(true);\n\t\tsetContent(layout);\n\n\t\tRestClient restClient = new RestClient();\n\t\t\n\t\tLabel resultLabel = new Label();\n\t\tresultLabel.setWidth(\"100%\");\n\t\tresultLabel.setHeight(\"200px\");\n\t\tresultLabel.addStyleName(\"h1\");\n\t\tresultLabel.addStyleName(\"mylabelstyle\");\n\t\tHorizontalLayout hLayot = new HorizontalLayout();\n\t\t\n\t\tButton buttonGetResponse = new Button(\"Get Response\");\n\t\tbuttonGetResponse.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getResponse());\n\t\t\t}\n\t\t});\n\t\t\n\t\tButton buttonGetText = new Button(\"Get Text Answer\");\n\t\tbuttonGetText.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerText());\n\t\t\t}\n\t\t});\n\n\t\tButton buttonGetXml = new Button(\"Get XML Answer\");\n\t\tbuttonGetXml.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerXML());\n\t\t\t}\n\t\t});\n\n\t\tButton buttonGetJson = new Button(\"Get JSON Answer\");\n\t\tbuttonGetJson.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tresultLabel.setValue(restClient.getAnswerJSON());\n\t\t\t}\n\t\t});\n\t\t\n\t\thLayot.addComponent(buttonGetResponse);\n\t\thLayot.addComponent(buttonGetText);\n\t\thLayot.addComponent(buttonGetXml);\n\t\thLayot.addComponent(buttonGetJson);\n\t\tlayout.addComponent(resultLabel);\n\t\tlayout.addComponent(hLayot);\n\t}\n\n}\n<\/pre>\nvaadin_rest_example.scss<\/em><\/span><\/p>\n
@import \"..\/valo\/valo.scss\";\n\n@mixin vaadin_rest_example {\n @include valo;\n\n\t.v-label-mylabelstyle {\n\t color: white;\n\t text-align: center;\n\t background-color: black;\t\n\t border-color: white;\n\t font-weight: bold;\n\t}\n}\n<\/pre>\n<\/a>10. Running the example<\/h2>\n
First right click on the server project folder and choose Run as -> Run on server choose Tomcat 8 server and press finish.
\nWhen the server is running right click on the Vaadin project folder and choose Run as -> Run on server choose Tomcat 8 server and press finish.<\/p>\n<\/a>11. Results<\/h2>\n
<\/a>11.1 Get the response<\/h3>\n
- 11.2 Get the plain text<\/a><\/dt>\n
- 9.2 The client Source Code<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 8.2 Vaadin UI<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 4.2 Create the server project<\/a><\/dt>\n