Tutorial I:

Criando a interface de uma

aplicao em Java
Passos para se criar a interface:
1) Identificar as funcionalidades da aplicao:
O que ela vai fazer? Qual seu objetivo?

2) Identificar que componentes de interface a aplicao necessita

para funcionar e se comunicar com o usurio:
Que informaes ela precisa coletar do usurio? Que informaes
(textos, figuras) ela precisa mostrar para o usurio?

3) Identificar os componentes Java que implementam as

funcionalidades identificadas anteriormente (pode ser junto c/4):
Janelas (Frame), painis (Panel), Menus, caixas de texto (TextField),
Labels...

4) Fazer um esboo (desenho) da interface, estabelecendo seu layout

(ou seja, onde cada componente deve ficar);
5) Criar uma classe Java que gere a interface.
1) Identificando as funcionalidades
da aplicao:

Objetivo da aplicao: um programa que visualiza

arquivos de imagens existentes na WEB.

Nome do programa: Visualizador de Imagens

2) Identificando os componentes de
interface necessrios:
Dados a serem coletados:
local onde a imagem est (endereo http da imagem);
nome (do arquivo) da imagem;

Dados/informaes a serem mostrados:

A imagem especificada pelo usurio;
Mensagens de aviso, indicando:
o qu o programa aguarda;
o qu o programa est fazendo;
mensagens de erro (ex: imagem no encontrada).
3,4) Fazendo um esboo da interface,
identificando os componentes-Java:

Interface
desejada
3,4) Fazendo um esboo da interface,
identificando os componentes-Java:

Componentes:
3,4) Fazendo um esboo da interface,
identificando os componentes-Java:

Componentes: Frame
Para a aplicao
ter uma janela
onde colocar
os componentes
de interface
3,4) Fazendo um esboo da interface,
identificando os componentes-Java:
TextFields
Para o usurio poder
informar o endereo
e o nome do arquivo
de imagem

Componentes: Frame
3,4) Fazendo um esboo da interface,
identificando os componentes-Java:
TextFields
(caixas de texto)
Labels
Para o usurio saber
o qu informar em
cada caixa-de-texto

Componentes: Frame
3,4) Fazendo um esboo da interface,
identificando os componentes-Java:
TextFields
(caixas de texto)
Labels
(etiquetas)
Button
Para o usurio
informar que
preencheu os dados
Componentes: Frame
3,4) Fazendo um esboo da interface,
identificando os componentes-Java:
TextFields
(caixas de texto)
Labels
(etiquetas)
Button
(boto)

Componentes: Frame

Panel
Local onde
a imagem vai ser
exibida
3,4) Fazendo um esboo da interface,
identificando os componentes-Java:
TextFields
(caixas de texto)
Labels
(etiquetas)
Button
(boto)

Componentes: Frame

Panel
(painel)
Label
Local onde
as mensagens e
avisos vo ser
exibidos
5) Criando uma classe Java que gere
a interface do programa:
A linguagem Java, como j vimos, orientada a objetos. Portanto, podemos
criar uma classe que defina como vai ser a interface do nosso
programa. Vamos chamar essa classe de Janela:
class Janela extends Frame
{
}

Note que a classe foi declarada como sendo filha da classe Frame (extends
Frame). Isso significa que ela herda todas as funcionalidades (os
mtodos) de um Frame (que so: ttulo, borda, abrir, fechar, maximizar,
minimizar...).
Falta agora colocar os atributos de nossa janela. Os atributos dela sero os
componentes da interface que definimos anteriormente.
5) Criando uma classe Java que gere
a interface do programa:
Vamos, portanto, declarar os atributos
(variveis) que nossa janela possui.
Cada componente vai ter uma varivel
correspondente.
Primeiro, vamos declarar os Labels:
class Janela extends Frame
{
public Label lb_Endereco;
public Label lb_Arquivo;
public Label lb_Mensagem;
}

Note que eles so pblicos!

5) Criando uma classe Java que gere
a interface do programa:
Agora, vamos declarar os TextFields, o
boto e o painel da imagem:
class Janela extends Frame
{
public Label lb_Endereco;
public Label lb_Arquivo;
public Label lb_Mensagem;
public TextField tf_URL;
public TextField tf_NomeArquivo;
public Button bt_Carregar;
public Panel pn_Imagem;
}

Note que os atributos foram declarados,

mas ainda no foram criados. Esses
atributos devem ser criados uma nica
vez, quando um objeto da classe janela
for criado.
5) Criando uma classe Java que gere
a interface do programa:
Um timo lugar para criar os atributos de uma classe o mtodo construtor.
O mtodo construtor chamado automaticamente quando um objeto da
classe criado pela primeira vez. nesse momento que devemos criar
ento os atributos. Os atributos so criados atravs do comando new:
class Janela extends Frame
{
public Label lb_Endereco;
: : :
public Panel pn_Imagem;

public Janela() // mtodo construtor

{
// Criao de todos os componentes da interface:
lb_Endereco = new Label(Endereo (URL):);
: : :
tf_URL = new TextField(, 28);
tf_NomeArquivo = new TextField(, 25);
bt_Carregar = new Button(Carregar);
: : :
}
}
5) Criando uma classe Java que gere
a interface do programa:
Neste momento ns j temos os objetos criados, mas eles ainda no foram colocados
na janela (esto soltos):
lb_Endereco : Endereo(URL):

lb_Arquivo : Arquivo:

lb_Mensagem : Informe o local (URL)...

tf_URL :

tf_NomeArquivo:

bt_Carregar : Carregar

pn_Imagem :
5) Criando uma classe Java que gere
a interface do programa:
Temos, agora, que adicion-los janela:

lb_Endereco : Endereo(URL):

lb_Arquivo : Arquivo:

lb_Mensagem : Informe o local (URL)...

tf_URL :

tf_NomeArquivo:

bt_Carregar : Carregar

pn_Imagem :
5) Criando uma classe Java que gere
a interface do programa:
Isso feito atravs do mtodo add().
Porm, o mtodo add no trabalha com coordenadas, mas sim com layouts de
tela pr-estabelecidos. Logo, a primeira coisa a fazer escolher o tipo de layout
que queremos.
O Java oferece 4 tipos bsicos de layout:

BorderLayout() FlowLayout() GridLayout(3,3) CardLayout()

North

West Center East

South
5) Criando uma classe Java que gere
a interface do programa:
Vamos selecionar o BorderLayout para a
nossa janela. Isso feito com o North
mtodo setLayout():

setLayout(new BorderLayout());

Depois de escolhido o layout, podemos West Center East

adicionar os componentes em uma
das regies disponveis (North, South,
Center, East, West):

add(South, lb_Mensagem); South

Informe o local (URL) e o nome da imagem e pressione [ENTER]
OBS: O Centro sempre tem a
preferncia. Como no estamos
add(Center, pn_Imagem); estamos utilizando o West e o
East, o centro ocupa tambm
seus lugares!
 5) Criando uma classe Java que gere
a interface do programa:
Agora temos um problema: Cada regio s pode conter um nico componente, mas
ainda temos que adicionar os componentes restantes na regio North:

North
Endereo(URL):

Arquivo:

Carregar

Informe o local (URL) e o nome da imagem e pressione [ENTER]

 5) Criando uma classe Java que gere
a interface do programa:
Uma soluo consiste em coloc-los dentro de um nico painel (Panel). E ento
adicionar somente este painel na regio norte da janela principal:

Endereo(URL):
Panel:
Arquivo:

Carregar
 5) Criando uma classe Java que gere
a interface do programa:
Vamos ento criar o painel:

Panel painelNorte = new Panel();

Porm, antes de adicionar os componentes
1
Endereo(URL): 2 3 no painel, temos que escolher um layout
para ele:
4
Arquivo: 5 6
Carregar
painelNorte.setLayout(new GridLayout(2,3));

Neste momento, temos seis regies que

painelNorte.add(lb_Endereo);
painelNorte.add(tf_URL);
painelNorte.add(new Panel());
painelNorte.add(lb_Arquivo);
painelNorte.add(tf_NomeArquivo);
painelNorte.add(bt_Carregar);
podem ser utilizadas para adicionarmos
componentes.
Cada componente vai ser adicionado em uma
das regies...
 5) Criando uma classe Java que gere
a interface do programa:
Ficou faltando somente adicionar o painel criado na regio norte da janela principal:

add(North, painelNorte);
North
Endereo(URL):
Arquivo: Carregar

Endereo(URL):

Arquivo: Carregar

Informe o local (URL) e o nome da imagem e pressione [ENTER]

 5) Criando uma classe Java que gere
a interface do programa:
Todas essas adies vo dentro do construtor da classe:
class Janela extends Frame Panel painelNorte = new Panel();
{ painelNorte.setLayout(new GridLayout(2,3));
public Label lb_Endereco; painelNorte.setBackground(Color.white));
public Label lb_Arquivo;
public Label lb_Mensagem; painelNorte.add(lb_Endereco);
public TextField tf_URL; painelNorte.add(tf_URL);
public TextField tf_NomeArquivo; painelNorte.add(new Panel());
public Button bt_Carregar; painelNorte.add(lb_Arquivo);
public Panel pn_Imagem; painelNorte.add(tf_NomeArquivo);
painelNorte.add(bt_Carregar);
public Janela()
{ lb_Mensagem.setBackground(Color.white));
lb_Endereco = new Label(Endereo (URL):); lb_Mensagem.setForeground(Color.red));
lb_Arquivo = new Label(Arquivo:);
lb_Mensagem = new Label(Informe o ...); this.setLayout(new BorderLayout());
tf_URL = new TextField(, 28); this.add(North, painelNorte);
tf_NomeArquivo = new TextField(, 25); this.add(Center, pn_Imagem);
bt_Carregar = new Button(Carregar); this.add(South, lb_Mensagem);
pn_Imagem = new Panel() }
}
Utilizando a classe Janela em
uma aplicao:
Depois de pronta, a classe janela pode ser utilizada no
programa Visualizador de Imagens:

public class VisualizadorDeImagens

{
public static void main(String argumentos[])
{
Janela minhaJanela = new Janela();
minhaJanela.show();
}
}

class Janela extends Frame

{
:
}
 Neste tutorial voc...
Aprendeu a identificar as funcionalidades de uma
aplicao;
Aprendeu a definir a interface de uma aplicao,
identificando quais so os componentes Java mais
adequados para as funcionalidades dela;
Aprendeu a implementar uma classe Java que crie a
interface que voc definiu.

Para ver um exemplo

de aplicao que define
sua interface clique aqui!