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?

1) 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?

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

1) Fazer um esboo (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 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 Labels
Para o usurio saber o qu informar em cada caixa-de-texto

(caixas de texto)

Componentes:

Frame

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

TextFields Labels
(etiquetas) (caixas de texto)

Button Componentes:
Para o usurio informar que preencheu os dados

Frame

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

TextFields Labels
(etiquetas) (caixas de texto)

Button
(boto)

Componentes:

Frame

Panel
Local onde a imagem vai ser exibida

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

TextFields Labels
(etiquetas) (caixas de texto)

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 lb_Arquivo lb_Mensagem tf_URL : Endereo(URL): : Arquivo: : Informe o local (URL)... :

tf_NomeArquivo: bt_Carregar pn_Imagem : Carregar :

5) Criando uma classe Java que gere a interface do programa:

Temos, agora, que adicion-los janela:
lb_Endereco lb_Arquivo lb_Mensagem tf_URL : Endereo(URL): : Arquivo: : Informe o local (URL)... :

tf_NomeArquivo: bt_Carregar pn_Imagem : Carregar :

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()
North

FlowLayout()

GridLayout(3,3)

CardLayout()

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 mtodo setLayout(): setLayout(new BorderLayout()); Depois de escolhido o layout, podemos adicionar os componentes em uma das regies disponveis (North, South, Center, East, West): add(South, lb_Mensagem); add(Center, pn_Imagem);
West Center East North

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

OBS: O Centro sempre tem a preferncia. Como no estamos estamos utilizando o West e o East, o centro ocupa tambm seus lugares!

South

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:

Endereo(URL): Arquivo:

North

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): Arquivo:

Panel:

Carregar

5) Criando uma classe Java que gere a interface do programa:

Vamos ento criar o painel:
Panel painelNorte = new Panel();
Endereo(URL):

1 4

2 5

3
Carregar

Arquivo:

Porm, antes de adicionar os componentes no painel, temos que escolher um layout para ele:
painelNorte.setLayout(new GridLayout(2,3));

painelNorte.add(lb_Endereo); painelNorte.add(tf_URL); painelNorte.add(new Panel()); painelNorte.add(lb_Arquivo); painelNorte.add(tf_NomeArquivo); painelNorte.add(bt_Carregar);

Neste momento, temos seis regies que 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);

Endereo(URL): Arquivo:

North

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 { 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; public Janela() { lb_Endereco = lb_Arquivo = lb_Mensagem = tf_URL = tf_NomeArquivo bt_Carregar pn_Imagem 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); } }

new Label(Endereo (URL):); new Label(Arquivo:); new Label(Informe o ...); new TextField(, 28); = new TextField(, 25); = new Button(Carregar); = 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!