Exemplo Vaadin + Maven

Eaeeew , vou ensinar como fazer um projeto básico com o Vaadin, para isso você vai precisar do “Eclipse”, “Maven”, “Tomcat 7”, Plugin do “Vaadin”(opcional) e o “JDK 7”.
Vamos criar o Projeto no Eclipse. Aperte “Control + N” e escolha “Maven Project”, clique em “next”, marque a opção “Create a simple project”.

Para quem não conhece, o Vaadin é um projeto que gera automaticamente seu html usando o GWT por trás dos panos, é uma excelente ferramenta para o desenvolvimento de sistemas, pois tem suporte para bind de entidades, tem uma gama de componentes, botões, tabelas, etc.
vaadin
Quem quiser ver a página de exemplo deles link

maven1maven2

Agora nessa próxima tela vamos informar o pacote e o nome da aplicação, versão, bem como que tipo de arquivo será gerado. (JAR/WAR/POM).

No nosso exemplo vamos definir:
Group Id(Pacote do projeto): br.org.exemplo.vaadin
Artefact Id( Nome do Projeto/Artefato): sisteminha
Version: 1.0.0
Packaging: war

Pronto com o projeto criado vamos configurar o nosso “pom.xml” e incluir algumas dependências.
Adicionando o repositório do Vaadin, as dependências e o plugin para gerar o WAR.
“pom.xml”

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <groupId>br.org.exemplo.vaadin</groupId>
   <artifactId>sisteminha</artifactId>
   <version>1.0.0</version>
   <packaging>war</packaging>
   <properties>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
      <vaadin.version>7.2.0</vaadin.version>
   </properties>
   <repositories>
      <repository>
         <id>vaadin-addons</id>
         <url>http://maven.vaadin.com/vaadin-addons</url>
      </repository>
      <repository>
         <id>vaadin-snapshots</id>
         <name>Vaadin snapshot repository</name>
         <url>http://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
      </repository>
   </repositories>
   <dependencies>
      <dependency>
         <groupId>com.vaadin</groupId>
         <artifactId>vaadin-server</artifactId>
         <version>${vaadin.version}</version>
      </dependency>
      <dependency>
         <groupId>com.vaadin</groupId>
         <artifactId>vaadin-client-compiled</artifactId>
         <version>${vaadin.version}</version>
      </dependency>
      <dependency>
         <groupId>com.vaadin</groupId>
         <artifactId>vaadin-themes</artifactId>
         <version>${vaadin.version}</version>
      </dependency>
      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>servlet-api</artifactId>
         <version>2.3</version>
         <scope>provided</scope>
      </dependency>
   </dependencies>
   <build>
      <plugins>
         <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.2</version>
            <configuration>
               <source>1.7</source>
               <target>1.7</target>
            </configuration>
         </plugin>
         <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.4</version>
            <configuration>
               <failOnMissingWebXml>false</failOnMissingWebXml>
            </configuration>
         </plugin>
      </plugins>
   </build>
</project>

Após configurar o pom devemos criar nosso “web.xml” que contém as configurações do Servlet.
O arquivo fica na pasta src/main/java/webapp/WEB-INF, crie a pasta WEB-INF e adicione o novo arquivo web.xml.

“web.xml”

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<display-name>Sisteminha</display-name>
	<servlet>
		<servlet-name>servlet</servlet-name>
		<servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
		<init-param>
			<param-name>UI</param-name>
			<param-value>br.org.exemplo.vaadin.ExemploUI</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>servlet</servlet-name>
		<url-pattern>/*</url-pattern>
	</servlet-mapping>

</web-app>

 


Podemos ver que o nosso web.xml referencia a classe VaadinServlet, que é o Servlet do Vaadin, podemos reparar também a referência ao param-value “br.org.exemplo.vaadin.ExemploUI”. Essa UI (User Interface) será a classe que vai centralizar e iniciar nossa aplicação de teste.

Agora vamos criar nosso pacote, br.org.exemplo.vaadin e criar nossa classe ExemploUI, vamos adicionar o novo pacote br.org.exemplo.vaadin.views onde ficarão nossas duas Views, PrincipalView e ExemploView.

**Obs: lembre-se que todas as importações aqui serão referentes ao Vaadin e não ao AWT, confirme o nome completo (pacote + classe) que estão sendo importados.

Nesse ponto vou explicar o que está acontecendo superficialmente, e logo mais teremos acesso ao código desse exemplo.

Nossa ExemploUI deverá estender a classe UI do Vaadin. Nossas duas views deverão estender a classe CustomComponent, e deverão implementar a interface View do Vaadin.
Dentro de nossa classe ExemploUI vamos definir nosso Navigator que é a classe responsável pela navegação entre as views, nela também são cadastradas as views que o usuário poderá acessar a partir de um nome (String).
Vamos cadastrar em nosso navigator a PrincipalView com a string “” (vazio), ela será a Página/Tela inicial quando acessarmos nossa aplicação, por exemplo localhost:8080/sisteminha/
Vamos cadastrar também a ExemploView com o texto “exemplo”.

Dessa forma quando acessarmos o endereço localhost:8080/sisteminha/exemplo ele irá mostrar a Página/Tela ExemploView.

Dentro de nossa view PrincipalView vamos adicionar um VerticalLayout (outros layouts HorizontalLayout, CSSLayout, GridLayout, AbsoluteLayout), que é um dos componentes que recebe componentes filhos (Como um JFrame do Swing). Vamos adicioná-lo como componente raiz com o método “setCompositionRoot”, depois vamos criar um botão e adicionar um ClickEvent que vai chamar a UI atual e pegar seu Navigator para que possamos navegar para outra view com o método “navigateTo”.
Por fim ExemploView terá seu VerticalLayout e terá apenas um Label com um texto.

Agora o código-fonte para que nosso exemplo funcione.
“ExemploUI.java”

package br.org.exemplo.vaadin;

import br.org.exemplo.vaadin.views.ExemploView;
import br.org.exemplo.vaadin.views.PrincipalView;

import com.vaadin.navigator.Navigator;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.UI;

public class ExemploUI extends UI{

	private static final long serialVersionUID = -4938725869387027877L;

	public ExemploUI() {
		Navigator navigator = new Navigator(this, this);
		navigator.addView("", new PrincipalView());
		navigator.addView("exemplo", new ExemploView());
		setNavigator(navigator);
	}
	
	@Override
	protected void init(VaadinRequest request) {
		
	}

}

“PrincipalView.java”

package br.org.exemplo.vaadin.views;

import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.VerticalLayout;

public class PrincipalView extends CustomComponent implements View {

	private static final long serialVersionUID = 3092897726443254162L;

	public PrincipalView() {
		VerticalLayout layout = new VerticalLayout();
		setCompositionRoot(layout);
		Button botao = new Button("Ir");
		botao.addClickListener(new ClickListener() {
			public void buttonClick(ClickEvent event) {
				getUI().getNavigator().navigateTo("exemplo");
			}
		});
		layout.addComponent(botao);
	}
	
	public void enter(ViewChangeEvent event) {

	}

}

“ExemploView.java”

package br.org.exemplo.vaadin.views;


import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;

public class ExemploView extends CustomComponent implements View {

	private static final long serialVersionUID = -1241042852938759218L;
	
	public ExemploView() {
		VerticalLayout layout = new VerticalLayout();
		setCompositionRoot(layout);
		layout.addComponent(new Label("Exemplo Funciona"));
	}

	public void enter(ViewChangeEvent event) {

	}

}
Anúncios

2 comentários sobre “Exemplo Vaadin + Maven

  1. Bom Dia,

    Estou fazendo o exemplo, e na hora da execução da HTTP STATUS 404.
    Tem alguma solução para isso? A diferença é que estou usando JDK 8 e Tomcat 8.

    Obrigado.

    Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s