GWT - Aplicativos

Antes de começarmos a criar um aplicativo "HelloWorld" real usando GWT, vamos ver quais são as partes reais de um aplicativo GWT -

Um aplicativo GWT consiste em seguir quatro partes importantes, das quais a última parte é opcional, mas as três primeiras são obrigatórias.

Descritores de Módulo
Recursos públicos
Código do lado do cliente
Código do lado do servidor

Amostras de localizações de diferentes partes de um aplicativo gwt típico HelloWord será como mostrado abaixo -

Nome	Localização
Raiz do projeto	Olá Mundo/
Descritor de Módulo	src / com / tutorialspoint / HelloWorld.gwt.xml
Recursos públicos	src / com / tutorialspoint / war /
Código do lado do cliente	src / com / tutorialspoint / client /
Código do lado do servidor	src / com / tutorialspoint / server /

Descritores do Módulo

Um descritor de módulo é o arquivo de configuração na forma de XML que é usado para configurar um aplicativo GWT.

Uma extensão do arquivo descritor do módulo é * .gwt.xml, onde * é o nome do aplicativo e este arquivo deve residir na raiz do projeto.

A seguir estará um descritor de módulo padrão HelloWorld.gwt.xml para um aplicativo HelloWorld -

<?xml version = "1.0" encoding = "utf-8"?>
<module rename-to = 'helloworld'>
   <!-- inherit the core web toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.user'/>

   <!-- inherit the default gwt style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- specify the paths for translatable code                    -->
   <source path = '...'/>
   <source path = '...'/>

   <!-- specify the paths for static files like html, css etc.     -->
   <public path = '...'/>
   <public path = '...'/>

   <!-- specify the paths for external javascript files            -->
   <script src = "js-url" />
   <script src = "js-url" />

   <!-- specify the paths for external style sheet files            -->
   <stylesheet  src = "css-url" />
   <stylesheet  src = "css-url" />
</module>

A seguir está um breve detalhe sobre as diferentes partes usadas no descritor do módulo.

Sr. Não.	Nós e descrição
1	<module rename-to = "helloworld"> Fornece o nome do aplicativo.
2	<inherits name = "logical-module-name" /> Isso adiciona outro módulo gwt no aplicativo, assim como a importação faz em aplicativos Java. Qualquer número de módulos pode ser herdado dessa maneira.
3	<entry-point class = "classname" /> Isso especifica o nome da classe que começará a carregar o aplicativo GWT. Qualquer número de classes de ponto de entrada pode ser adicionado e eles são chamados sequencialmente na ordem em que aparecem no arquivo do módulo. Portanto, quando o onModuleLoad () de seu primeiro ponto de entrada termina, o próximo ponto de entrada é chamado imediatamente.
4	<source path = "path" /> Isso especifica os nomes das pastas de origem que o compilador GWT pesquisará para a compilação de origem.
5	<public path = "path" /> O caminho público é o local em seu projeto onde os recursos estáticos referenciados por seu módulo GWT, como CSS ou imagens, são armazenados. O caminho público padrão é o subdiretório público abaixo de onde o Arquivo XML do Módulo está armazenado.
6	<script src="js-url" /> Injecta automaticamente o arquivo JavaScript externo localizado no local especificado por src.
7	<stylesheet src="css-url" /> Injecta automaticamente o arquivo CSS externo localizado no local especificado por src.

Recursos Públicos

Esses são todos os arquivos referenciados pelo seu módulo GWT, como a página HTML do Host, CSS ou imagens.

A localização desses recursos pode ser configurada usando o elemento <public path = "path" /> no arquivo de configuração do módulo. Por padrão, é o subdiretório público abaixo de onde o Arquivo XML do Módulo está armazenado.

Quando você compila seu aplicativo em JavaScript, todos os arquivos que podem ser encontrados em seu caminho público são copiados para o diretório de saída do módulo.

O recurso público mais importante é a página do host, usada para invocar o aplicativo GWT real. Uma página de host HTML típica para um aplicativo pode não incluir nenhum conteúdo de corpo HTML visível, mas é sempre esperado que inclua o aplicativo GWT por meio de uma tag <script ... /> conforme a seguir

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT application</p>
   </body>
</html>

A seguir está a folha de estilo de amostra que incluímos em nossa página hospedeira -

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Código do lado do cliente

Este é o código Java real escrito implementando a lógica de negócios do aplicativo e que o compilador GWT traduz em JavaScript, que eventualmente será executado dentro do navegador. A localização desses recursos pode ser configurada usando o elemento <source path = "path" /> no arquivo de configuração do módulo.

Por exemplo Entry Point o código será usado como código do lado do cliente e sua localização será especificada usando <source path = "path" />.

Um módulo entry-point é qualquer classe atribuível a EntryPointe isso pode ser construído sem parâmetros. Quando um módulo é carregado, cada classe de ponto de entrada é instanciada e seuEntryPoint.onModuleLoad()método é chamado. Uma amostra de classe de ponto de entrada HelloWorld será a seguinte -

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

Código do lado do servidor

Esta é a parte do lado do servidor de seu aplicativo e é muito opcional. Se você não estiver fazendo nenhum processamento de back-end em seu aplicativo, não precisa desta parte, mas se houver algum processamento necessário no back-end e seu aplicativo do lado do cliente interagir com o servidor, você terá que desenvolver esses componentes.

O próximo capítulo fará uso de todos os conceitos mencionados acima para criar um aplicativo HelloWorld usando Eclipse IDE.

↰ Previous page Next page ↱