Tutorial1

Tutorial I:
Criando a interface de uma
aplicação em Java

Passos para se criar a interface:
1) Identificar as funcionalidades da aplicação:
• O que ela vai fazer? Qual seu objetivo?
1) Identificar que componentes de interface a aplicação necessita
para funcionar e se comunicar com o usuário:
• Que informações ela precisa coletar do usuário? Que informações
(textos, figuras) ela precisa mostrar para o usuário?
1) Identificar os componentes Java que implementam as
funcionalidades identificadas anteriormente (pode ser junto c/4):
• Janelas (Frame), painéis (Panel), Menus, caixas de texto (TextField),
Labels...
1) Fazer um esboço (desenho) da interface, estabelecendo seu layout
(ou seja, onde cada componente deve ficar);
2) Criar uma classe Java que gere a interface.

1) Identificando as funcionalidades
da aplicação:
Objetivo da aplicação: um programa que visualiza
arquivos de imagens existentes na WEB.
Nome do programa: Visualizador de Imagens

2) Identificando os componentes de
interface necessários:
Dados a serem coletados:
• local onde a imagem está (endereço http da imagem);
• nome (do arquivo) da imagem;
Dados/informações a serem mostrados:
• A imagem especificada pelo usuário;
• Mensagens de aviso, indicando:
• o quê o programa aguarda;
• o quê o programa está fazendo;
• mensagens de erro (ex: imagem não encontrada).

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

Componentes:

Componentes: Frame
Para a aplicação
ter uma janela
onde colocar
os componentes
de interface

Componentes:
TextFields
Para o usuário poder
informar o endereço
e o nome do arquivo
de imagem
Frame

Componentes:
TextFields
Labels (caixas de texto)
Para o usuário saber
o quê informar em
cada caixa-de-texto
Frame

Componentes:
TextFields
(caixas de texto)
Frame
Labels
(etiquetas)
Button
Para o usuário
informar que
preencheu os dados

Labels
(etiquetas)
Componentes:
TextFields
(caixas de texto)
Frame
Panel
Local onde
a imagem vai ser
exibida
Button
(botão)

Labels
(etiquetas)
Componentes:
TextFields
(caixas de texto)
Frame
Panel
(painel)
Button
(botão)
Label
Local onde
as mensagens e
avisos vão 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
métodos) de um Frame (que são: título, borda, abrir, fechar,
maximizar, minimizar...).
Falta agora colocar os atributos de nossa janela. Os atributos dela serão os
componentes da interface que definimos anteriormente.

Vamos, portanto, declarar os atributos
(variáveis) que nossa janela possui.
Cada componente vai ter uma variável
correspondente.
Primeiro, vamos declarar os Labels:
{
public Label lb_Endereco;
public Label lb_Arquivo;
public Label lb_Mensagem;
}
Note que eles são públicos!

Agora, vamos declarar os TextFields, o
botão e o painel da imagem:
{
public TextField tf_URL;
public TextField tf_NomeArquivo;
public Button bt_Carregar;
public Panel pn_Imagem;
}
Note que os atributos foram declarados,
mas ainda não foram criados. Esses
atributos devem ser criados uma única
vez, quando um objeto da classe janela
for criado.

Um ótimo lugar para criar os atributos de uma classe é o método construtor.
O método construtor é chamado automaticamente quando um objeto da
classe é criado pela primeira vez. É nesse momento que devemos criar
então os atributos. Os atributos são criados através do comando new:
{
: : :
public Janela() // método construtor
{
// Criação de todos os componentes da interface:
lb_Endereco = new Label(“Endereço (URL):”);
: : :
tf_URL = new TextField(“”, 28);
tf_NomeArquivo = new TextField(“”, 25);
bt_Carregar = new Button(“Carregar”);
: : :
}
}

Neste momento nós já temos os objetos criados, mas eles ainda não foram colocados
na janela (estão soltos):
Endereço(URL):
Arquivo:
Informe o local (URL)...
Carregar
lb_Endereco :
lb_Arquivo :
lb_Mensagem :
tf_URL :
tf_NomeArquivo:
bt_Carregar :
pn_Imagem :

Temos, agora, que adicioná-los à janela:
Endereço(URL):
Arquivo:
Informe o local (URL)...
Carregar
lb_Endereco :
lb_Arquivo :
lb_Mensagem :
tf_URL :
tf_NomeArquivo:
bt_Carregar :
pn_Imagem :

Isso é feito através do método add().
Porém, o método add não 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 básicos de layout:
BorderLayout() CardLayout()
North
West Center East
South
FlowLayout() GridLayout(3,3)

Vamos selecionar o BorderLayout para a
nossa janela. Isso é feito com o
método setLayout():
setLayout(new BorderLayout());
North
Depois de escolhido o layout, podemos West Center East
adicionar os componentes em uma
das regiões disponíveis (North, South,
Center, East, West):
add(“South”, lb_Mensagem); Informe o local (URL) e o nome South
da imagem e pressione [ENTER]
add(“Center”, pn_Imagem);
OBS: O Centro sempre tem a
preferência. Como não estamos
estamos utilizando o West e o
East, o centro ocupa também
seus lugares!

Agora temos um problema: Cada região só pode conter um único componente, mas
ainda temos que adicionar os componentes restantes na região “North”:
North
Informe o local (URL) e o nome da imagem e pressione [ENTER]
Endereço(URL):
Arquivo:
Carregar

Uma solução consiste em colocá-los dentro de um único painel (Panel). E então
adicionar somente este painel na região norte da janela principal:
Endereço(URL):
Arquivo:
Carregar
Panel:

Vamos então criar o painel:
Panel painelNorte = new Panel();
Porém, antes de adicionar os componentes
no painel, temos que escolher um layout
para ele:
painelNorte.setLayout(new GridLayout(2,3));
Neste momento, temos seis regiões que
podem ser utilizadas para adicionarmos
componentes.
Cada componente vai ser adicionado em uma
das regiões...
1 2 3
4 5 6
Endereço(URL):
Arquivo: Carregar
painelNorte.add(lb_Endereço);
painelNorte.add(tf_URL);
painelNorte.add(new Panel());
painelNorte.add(lb_Arquivo);
painelNorte.add(tf_NomeArquivo);
painelNorte.add(bt_Carregar);

Ficou faltando somente adicionar o painel criado na região norte da janela principal:
North
add(“North”, painelNorte); Endereço(URL):
Informe o local (URL) e o nome da imagem e pressione [ENTER]
Endereço(URL):
Arquivo: Carregar
Arquivo: Carregar

Todas essas adições vão dentro do construtor da classe:
{
public TextField tf_URL;
public TextField tf_NomeArquivo;
public Button bt_Carregar;
public Janela()
{
lb_Endereco = new Label(“Endereço (URL):”);
lb_Arquivo = new Label(“Arquivo:”);
lb_Mensagem = new Label(“Informe o ...”);
tf_URL = new TextField(“”, 28);
tf_NomeArquivo = new TextField(“”, 25);
bt_Carregar = new Button(“Carregar”);
pn_Imagem = new Panel()
Panel painelNorte = new Panel();
painelNorte.setLayout(new GridLayout(2,3));
painelNorte.setBackground(Color.white));
painelNorte.add(lb_Endereco);
painelNorte.add(tf_URL’);
painelNorte.add(new Panel());
painelNorte.add(lb_Arquivo);
painelNorte.add(tf_NomeArquivo);
painelNorte.add(bt_Carregar);
lb_Mensagem.setBackground(Color.white));
lb_Mensagem.setForeground(Color.red));
this.setLayout(new BorderLayout());
this.add(“North”, painelNorte);
this.add(“Center”, pn_Imagem);
this.add(“South”, lb_Mensagem);
}
}

Utilizando a classe Janela em
uma aplicação:
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();
}
}
{
:
}

Neste tutorial você...
•Aprendeu a identificar as funcionalidades de uma
aplicação;
•Aprendeu a definir a interface de uma aplicação,
identificando quais são 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 aplicação que define
sua interface clique aqui!

Tutorial1

Mais conteúdo relacionado

Mais procurados (17)

Semelhante a Tutorial1 (20)

Último (7)

Tutorial1