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.
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> 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