quarta-feira, 8 de setembro de 2010

Tutorial Java + Flex utilizando o EasyEclipse - Dia Um

Aproveitando que estou estudando Java e que estarei mudando a minha IDE para o EasyEclipse, resolvi escrever uma espécie de diário-tutorial das minhas aventuras.





Quer aprender também? Então clique na continuação e vamos lá.









Configuração Inicial

Já estou estudando Java e Flex a algumas semanas no NetBeans. IDE muito boa e com muita documentação porém já existe um projeto na empresa onde trabalho e o código foi feito no EasyEclipse. Então para poupar trabalho em tentar abrir o código no NetBeans, resolvi aprender a usar o EE.

-> Para o meu ambiente de trabalho, preferi instalar apenas o básico, o EasyEclipse Expert e instalar apenas os plugins necessários para não poluir a IDE e não me confundir.

Então basta escolher a versão da IDE que você deseja e a plataforma onde será usada. No meu caso a versão mais nova é a 1.3.1.1 e a plataforma usada será o Windows.

Depois de baixado, instalar é fácil, basta seguir o next, next até chegar o finish.

-> Depois disso eu baixei o Tomcat 6.0 Service e instalei com a mesma facilidade acima. Aqui vale uma nota: A versão mais atual na época desse tutorial era a 7.0, porém na tela de configuração do Tomcat no EasyEclipse (Dentro do EasyEclipse clique em Window -> Preferences -> Tomcat) a versão mais atual era a 6.0. Tentar usar a 7.0 dava o erro "Could not find main class. Program will exit".

O próximo passo é instalar o plugin pro J2EE para podermos testar o servidor Tomcat.

-> Antes precisei baixar e instalar o plugin Web Tools Editor. A versão de cada plugin deve ser o recomendado para a sua versão do EasyEclipse.

-> Agora é a vez de baixar e instalar o plugin J2EE Tools.

-> Finalmente vamos instalar o plugin Tomcat Launcher. Depois de instalado é necessário que você vá em Window -> Preferences -> Tomcat e configure a versão do Tomcat em Tomcat Version e o caminho em Tomcat home:



Agora tente rodar o Tomcat clicando no seguinte botão:


Se tudo estiver ok na instalação. Nenhuma mensagem que erro aparecerá no console:


E, principalmente, ao abrir um navegador qualquer e digitar o endereço http://localhost:8080/, deverá aparecer essa página, que é a página default do Tomcat:



Com tudo pronto, vamos agora criar uma página na nossa IDE.

Vamos criar um novo projeto, então vá em File -> New -> Project:


Escolha o tipo Tomcat Project:


Escolha o nome desejado ao projeto e na ultima página deixe como está e clique em Finish:



Uma das coisas que não gostei logo de cara foi que não era possível ver cada arquivo que faz parte do meu projeto. Pelo menos agora que estou começando a aprender, prefiro ver cada arquivo que é gerado automaticamente pela IDE e tentar acompanhar as modificações nas mesmas.


Para adicionar um Navigator, basta ir em Window -> Show View e escolher o tipo Navigator:





Agora que o ambiente de trabalho está mais ou menos como eu quero, vamos criar uma página index (Ao tentar conectar em uma página qualquer, será sempre procurado uma página com o nome index, portanto, vamos criar uma para o nosso projeto). Para conferir isso, vamos já tentar conectar ao nosso projeto no endereço http://localhost:8080/TesteTomcat/. A seguinte página deverá ser mostrada:


Nos avisando que o projeto foi encontrado, mas nenhuma página foi encontrada.

Vamos então criar nossa página index clicando com o botão direito do mouse la na nossa tab Navigator na pasta principal do nosso projeto e escolhendo a opção New -> Other:

Agora escolha o tipo JSP que está na pasta Web:


Coloque o nome do arquivo como index.jsp:


E por fim escolha qualquer template que você quiser:




Agora vamos escrever o código.

Eu usei um comando HTML e algumas tags CSS. Não a minha intenção estudar ambos por agora, mas mesmo assim vamos analisar o que usei:

O comando <div&gt; serve para reservar um espaço na tela e agrupar outros elementos nele. Ele é muito usado para agrupar os códigos das funções laterais nos sites, os botões no cabeçalho, informações do rodapé e ajudar a organizar o meio do site. se você usar apenas:


<div>
<h1>Testando meu ambiente de trabalho!.</h1>
</div>


Verá que o testo será escrito no topo à esquerda da área da página. Para que ele tome a forma que eu desejo, vamos adicionar uma tag para avisar ao navegador que vamos usar CSS para modelar minha div, isso eu consigo com a propriedade style="" e dentro dos "" eu adiciono os parâmetros em CSS.


<div style="background-color: rgb(30, 30, 35);">
  <h3>Testando meu ambiente de trabalho!</h3>
</div>


background-color. Obviamente define a cor de fundo da região. Eu usei o rgb para criar uma cor definindo os valores de vermelho (R), verde (G) e azul (B) que vão de 0 a 255 sendo rgb(0, 0, 0) para preto e rgb(255, 255, 255) para branco.


<div style="background-color: rgb(180, 100, 80);
            width=50%;">
  <h1>Testando meu ambiente de trabalho!</h1>
</div>

width define a largura da região em relação à tela disponível. Você pode definir esse tamanho de forma estática (100px por exemplo) ou de forma dinâmica como no meu caso. Defini que a largura da minha região deve ser equivalente a 30% da largura total disponível.

<div style="background: rgb(180, 100, 80);
   width: 50%;
   height: 40px;">
     <h3>Testando meu ambiente de trabalho!</h3>
</div>

height define a altura da região. Ele aceita tamanho por porcentagem como usamos com width, mas dessa vez eu quero que ele tenha uma altura fixa, por isso coloquei 40px.

<div style="background: rgb(180, 100, 80);
   width: 50%;
   height: 40px;
   margin-left: 25%;">
     <h3>Testando meu ambiente de trabalho!</h3>
</div>

margin-left define a marge esquerda do componente desenhado na tela. No nosso caso, ele irá indicar a margem esquerda de nosso retângulo. Eu escolhi 25% para que ele fique centralizado na tela.

<div style="background: rgb(180, 100, 80);
   width: 50%;
   height: 40px;
   margin-left: 25%;
   margin-top: 200px;">
     <h3>Testando meu ambiente de trabalho!</h3>
</div>

margin-top faz o mesmo que a tag anterior mas define a margem acima de nossa região do texto. Novamente escolhi 200px, ou seja, margem fixa.


<div style="background: rgb(180, 100, 80);
   width: 50%;
   height: 40px;
   margin-left: 25%;
   margin-top: 200px;
   text-align: center;">
     <h3>Testando meu ambiente de trabalho!</h3>
</div>

text-align define o alinhamento do texto na região. Vamos escolher center para centralizar o texto.

<div style="background: rgb(180, 100, 80);
   width: 50%;
   height: 40px;
   margin-left: 25%;
   margin-top: 200px;
   text-align: center;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;">
     <h3>Testando meu ambiente de trabalho!.</h3>
</div>

Dessa vez adicionamos duas propriedades ao mesmo tempo, e explico o porquê. Algumas propriedades avançadas do CSS não funciona em todos os navegadores e algumas vezes podem receber nomes diferentes em navegadores diferentes. A propriedade border-radius cria bordas arredondadas ao elemento que estamos modificando, mas ele tem que receber o prefixo -moz- para os navegadores Mozilla, ou seja, o Firefox e -webkit- para o Chrome.

<div style="background: rgb(180, 100, 80);
   width: 50%;
   height: 40px;
   margin-left: 25%;
   margin-top: 200px;
   text-align: center;
     border-radius: 8px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   box-shadow: 15px 10px 12px  #000;
   -moz-box-shadow: 15px 10px 12px  #000;
   -webkit-box-shadow: 15px 10px 12px  #000;">
     <h3>Testando meu ambiente de trabalho!</h3>
</div>

Estamos quase terminado nossa micro aula de CSS e nosso teste do EasyEclipse. Agora vem uma das propriedades que mais gostei no CSS, a box-shadow, que cria uma sobra para o elemento que estamos tratando. Novamente ele precisa ser lançado três vezes para receber os prefixos da mesma forma que o border-radius. Dessa vez ele pode receber 4 valores. A distância horizontal da sombra, a distância vertical, o tamanho da área de transição da sombra (Do mais forte ao mais fraco) e a cor da mesma, que eu escolhi o preto. Notem que a cor usa agora o #000 que usa valores exadecimais indo de #000 para preto e #FFF para branco, poderia ter usado o rgb() que considero mais intuitivo, mas deixei assim para não me esquecer que existe essa forma de informar a cor também.

A propriedade padding cria essa borda externa e é muito útil para posicionar componentes em nossa página. No nosso caso, vamos utilizar para centralizar verticalmente nosso texto.

<div style="background: rgb(180, 100, 80);
    width: 50%;
    height: 40px;
    margin-left: 25%;
    margin-top: 200px;
    text-align: center;
     border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    box-shadow: 15px 10px 12px  #000;
    -moz-box-shadow: 15px 10px 12px  #000;
    -webkit-box-shadow: 15px 10px 12px  #000;">
     <h3 style="padding: 8px">Testando meu ambiente de trabalho!</h3>
</div>

Agora podemos testar nossa página e com isso já temos uma idéia das capacidades do CSS 3.



No próximo tutorial vamos configurar e fazer a conexão a uma banco de dados Firebird e PostgreSQL.


Nenhum comentário:

Postar um comentário