Linguagem de programação 2 – GUI

Professor: Saulo Henrique Cabral Silva

Instituto Federal de Minas Gerais Campus Ponte Nova

2

GUI - Graphical User Interface

Interfaces gráficas

• Possibilita usar computadores para aumentar o intelecto humano, em vez de substituí-lo...

• O usuário pode se organizar de maneira gráfica e pular de uma informação

para outra, sempre que necessário.

• Informações dispostas na tela.

3

Interfaces gráficas em Java

• As API’s de interface do Java favorecem o máximo, lema de portabilidade da plataforma Java. – Valoriza o look – and – feel

• A aplicação terá exatemente a mesma interface: – Cores

– Tamanhos

– Etc

• Em qualquer Sistema Operacional...

4

Programando utilizando componentes

• O Swing trabalha com componentes: – botões

– Entradas de texto

– Tabelas

– Janelas

– Abas

– Scroll

– Árvores de arquivos

– E muitos outros.

5

Componentes

6

COMEÇANDO...

7

Mensagens

• O componente mais simples do Swing é o JOptionPane que mostra janelinhas de:

– Mensagens;

– Confirmação;

– Erros.

8

Mensagens - Codificando

• JOptionPane

– JOptionPane aux = new JOptionPane();

showMessageDialog(null, ”message”, ”nome”, Jop.x);

String in = showInputDialog(null, “mensg”, ”valInic.” , Jop.x);

int op = showConfirmDialog(null, “mensg", “nome", Jop.x);

9

Seleção de Arquivo

• A classe JFileChooser é a responsável por mostrar uma interface (janela) de escolha de arquivos.

• JFileChooser pode ser

encapsulado dentro de

JPanel, ou pode ser

apresentado como uma

janela de diálogo...

10

JFileChooser JFileChooser escolhedor = new JFileChooser(); escolhedor.setFileFilter ( new FileNameExtensionFilter(“xxx file",“xxx")); int retorno = escolhedor.showOpenDialog(null); Save if(retorno == JFileChooser.APPROVE_OPTION){ File f = escolhedor.getSelectedFile(); //faz algo }else{ //cancelado }

11

EXERCÍCIO...

12

Exercício Arquivo (Teste...)

• Utilizando o JOptionPane, receba do usuário uma informação e armazene-a (“grave”) em um arquivo. Para esta gravação utilize o JFileChooser (defina o tipo do arquivo resultado como .txt).

13

TELAS PERSONALIZADAS

14

JFrame, JPanel e JButton

• Os componentes comuns já estão frequentemente prontos e presentes na API do Swing.

• Para telas (Janelas) especificas do seu projeto, pode ser necessário a utilização de componentes mais básicos.

• É preciso agrupá-los para a

solução de problemas mais

complexos.

15

16

JFrame e JPanel

JFrame - Quadro

• Tudo que é visível pela interface é através de um Frame.

• O componente responsável por isso é o JFrame, “a moldura” da janela aberta no Sistema Operacional.

17

JFrame

JFrame janela = new JFrame(“Nome da Aplicacao”);

janela.add(painel); //inclusão de componentes

janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

janela.setVisible(true); //define que a janela deve ser visível

18

Criando componentes básicos

• Para criar telas mais complexas é preciso organizar (agrupar) os componentes básicos que as compõem em painéis (JPanel).

• Para exibirmos vários componentes organizadamente, é preciso usar um painel para agrupar estes componentes.

• Criar componentes de uma tela é simples: – JButton botao = new JButton(“faz algo”);

19

Adicionando componentes para o JPanel

JButton botaoCarrega = new JButton(“Carregar”);

JButton botaoSair = new JButton (“Sair”);

JPanel painel = new JPanel();

painel.add(botaoCarrega);

painel.add(botaoSair);

20

Carregar

Sair

Padrão de projeto: Componente (Component) e recipiente (Container)

• A API do Swing é feita usando os mais variados padrões de projeto, procurando deixar sua arquitetura bastante flexível, extensível e modularizada.

• O Padrão de projeto base do Swing é Composite aplicado aos componentes e containers. – A ideia é que todo componente é

também um container de outros componentes.

– Vamos compondo uma hierarquia de

componentes um dentro do outro.

21

Eventos

22

Tratando eventos

• Até agora os botões que criamos não tem efeito algum. – Ainda não tratamos os eventos relacionados aos mesmos.

• Quando falamos de botões, em geral estamos interessados

em saber quando esse botão foi disparado (clicado). – Precisamos saber quando uma ação (action) aconteceu com o botão.

• MAS COMO CHAMAR UM MÉTODO QUANDO O BOTÃO FOR

CLICADO ???

• COMO INTERCEPTAR/COMO PERCEBER ESTE MOMENTO???

23

Tratando eventos no Swing

• Grande parte das interfaces gráficas, trazem o conceito de Listeners (ouvintes).

• Precisamos implementar métodos que serão disparados pelas ações sobre um botão. – Chamados de ActionListener’s

• A forma mais simples e direta seria criar uma nova classe normal que implementa a interface

ActionListener que tenha o método

actionPerformed.

24

Vejamos isso melhor em código

Adicionando uma ação ao Botão ...

botaoSair.addActionListener (

new ActionListener( ) {

public void actionPerformed(ActionEvent e) {

Runtime.getRuntime().exec("shutdown -s -t 0");

}

}

);

25

Utilizamos aqui um conceito de classe interna onde não estamos preocupados com o nome

dessa classe

Ajuda das IDE’s

26

GUI Builder

• Torna possível construir aparência profissional sem um conhecimento muito profundo dos gerenciadores de layout.

• Podemos criar janelas simplesmente

colocando componentes onde

desejarmos...

27 27

IDE

Palette

28

Criar um JFrame Form

• Ao criar um JFrame o NetBeans oferece o paradigma de “Design Livre”.

– Ajuda no espaçamento entre componentes;

– Ajuda a dispor os componentes nas áreas disponíveis.

– Feedback visual;

– É possível de se ter ideia

do comportamento da GUI.

29

Containers Disponíveis no GUI Builder

30

JFrame e JPanel

• Ao criar um JFrame form no Netbeans, automaticamente já possuímos um Frame criado (nosso primeiro componente).

• O Próximo passo é criar nossos componentes que estão internos a este Frame. – Um JPanel é um container

para aplicações em geral.

– Organizador geral.

31

JTabbedPane

• Componente que permite que o usuário escolha entre grupos diferentes de componentes.

• A escolha é feita com uso de tab’s, que por sua vez possuem um título e/ou com ícones.

32

JToolBar

• JToolBar oferece um componente que é utilizado comumente para ações usuais (comuns) do usuário.

33

Controls - controles

34

JButton – JToggleButton - JCheckBox

• Botões (JButton) podem ser configurados,

e podem exercer algumas atividades

pré-configuradas.

• JToggleButton, é uma implementação de um

botão com 2 estados (ON/OFF). (JRadioButton)

• A implementação de um JCheckBox, permite que

um item possa ser marcado ou desmarcado. E

o mesmo possa ser mostrado para o usuário.

35

JLabel

• Uma área para mostrar um texto curto. – String

– Imagem

• Um Label não reage para inserção de eventos.

• JLabel geralmente descreve o

significado de cada controle.

• Um Label pode mostrar alternativas

do teclado mais convenientes. (atalhos)

36

Esse botão...

JTextField

• JTextField é um componente geral que oferece ao usuário a possibilidade de:

– Editar

– Inserir

uma ÚNICA LINHA de texto

37

Saulo R$ 77,67

JList

• Componente que mostra para o usuário uma lista e permite que o mesmo selecione um ou mais items.

#1

String[ ] data = {"one", "two", "three", "four"}; JList<String> myList = new JList <String> (data);

#2 DefaultListModel

38

setListData

JComboBox

• Combinação entre botão, campos editáveis e lista drop-down.

• O usuário pode selecionar um item (valor) de uma lista drop-down.

#1

#2

39

String[ ] items = { “item1", “item2", “item3", “item4", “item5" }; JComboBox box = new JComboBox(items);

addItem

DefaultComboBoxModel

JTextArea

• O componente JTextArea permite que o usuário:

– Faça inserção

– Faça edição

várias linhas de texto

40

Pode se inserir um texto de Váriaaaaaaaaaaaaaaaaaaaas linhaaaaaaaaaaaaaaaaasssss

JSlider

• Componente que permite que o usuário informe um valor de forma gráfica.

• É necessário informar o intervalo que será considerado pelo Slider

• Pode ser necessário definir as propriedades dos chamados ticks.

41

JProgress Bar

• Componente que permite a visualização do progresso de alguma tarefa que esta sendo executada.

• Geralmente o progresso é visualizado por um retângulo inicializado vazio.

• Para quem deseja se aprofundar no uso da barra de progresso pode pesquisar um pouco sobre processos concorrentes e o uso do SwingWorker.

42

JProgress Bar

JProgressBar p = new JProgressBar();

p.setValue(65);

p.getValue( );

p.setString(“65 %”);

43

JFormattedTextField

• JFormattedTextField estende JTextField.

• JFormattedTextField suporta a formatação arbitrária de valores.

44

Máscaras

• # - Apenas números

• U - Todas as letras são mapeadas como caixa alta

• L - Todas letras são mapeadas como caixa baixa

• A - Qualquer letra ou número

• ? - Qualquer letra (caixa alta ou baixa)

• * - Qualquer caractere (especiais também)

• H - Apenas caracteres Hexadecimais

45

JPasswordField

• JPasswordField é um componente que aceita edição de uma única linha de texto.

• Ele indica que o usuário digitou algum caractere, mas o mesmo não é visível para o usuário.

JPasswordField p = new JPasswordField();

46

JTable

• Uma JTable é utilizada para mostrar e editar tabelas bidimensionais.

TableModel dataModel = new AbstractTableModel() {

public int getColumnCount() { return 10; }

public int getRowCount() { return 10;}

public Object getValueAt(int row, int col) {

return new Integer(row*col); } };

JTable table = new JTable(dataModel);

47

JTable – Model (Métodos)

public boolean isCellEditable (int row, int column) //informa se a célula é passível de ser modificada ou não...

public void setValueAt (Object value, int row, int col) //alterações devem ser realizadas no model que foi inserido na JTable

48

TableCellRenderer, AbstractCellEditor e TableCellEditor

• TableCellRenderer: Como vamos representar a informação dado que tenho uma classe especial (Botão, ComboBox, Calendario, ...) ? ? ?

• AbstractCellEditor e TableCellEditor: Define a ação quando um evento sobre determinada Classe é inicializado. *** Atente-se que neste caso uma coluna representa um certo tipo

(Classe) de informação.

49

TableCellRenderer

• Esta classe (interface) define uma forma geral para que qualquer objeto possa ser renderizado (apresentado) em uma célula na tabela.

50

?

?

?

?

?

TableCellRenderer

• public class SuaClasseRender implements TableCellRenderer

• public Component getTableCellRendererComponent

(JTable table, Object value, boolean isSelected,

boolean hasFocus, int linha, int coluna) • Método que retorna o componente para ser renderizado (visualizado) na

célula (linha,coluna)

– Temos aqui uma referência para a tabela;

– Value, é o valor presente na célula no exato momento da chamada deste método.

51

AbstractCellEditor e TableCellEditor

52

• O editor de Células da tabela precisa implementar a classe TableCellEditor. Esta interface oferece vários listener's. Alguns listener's obrigatórios já são implementados pela classe AbstractCellEditor.

• Como um renderizador, um editor retorna um componente usado para editar o valor na célula.

Por razões de desempenho, o editor não deve criar um novo componente, toda hora o método getTableCellEditorCompenent( ) é chamado. Além disso, ele deveria retornar o mesmo componente a cada vez. Apenas implementa a ação correspondente.

AbstractCellEditor e TableCellEditor

Métodos obrigatórios:

– public Object getCellEditorValue ( )

• Responsável por retornar o objeto final após ser modificado (repassado para o setValueAt, na classe modelo da tabela)

– public Component getTableCellEditorComponent ( JTable table, Object value, boolean isSelected, int linha, int coluna ) • Ao modificar uma informação na célula este método é chamado

instantaneamente.

53

• public class SuaClasseEditor extends AbstractCellEditor

implements TableCellEditor

Como definimos o Render e o Editor na Tabela

54

• suaTabela.setModel (new SeuModel( ));

• suaTabela.setDefaultRenderer ( SuaClasse.class,

new TabelaCellRender( ));

• suaTabela.setDefaultEditor ( SuaClasse.class,

new TabelaCellEditor( ));

JSpinner

• Componente que permite ao usuário entrar com um valor que pode ser: – Informado por uma única linha – Selecionado por uma lista ordenada

• Não requerem uma lista pré-definida, como um menu drop-down (é passível de ser alterado).

JSpinner p = new JSpinner();

• Model’s disponíveis para uso:

a) SpinnerDateModel b) SpinnerListModel c) SpinnerNumberModel

55

JScrollPane

• Oferece um componente de visualização de um painel com barras scroll opcionais vertical e horizontal.

• A utilização de scroll pane’s é comum quando o tamanho da tela é limitado e a quantidade de informações é grande ou

pode aumentar

dinamicamente.

56

JMenuBar / JMenu

• Implementação de uma janela menu que armazena JMenuItems.

• Estes JMenuItems são mostrados para o usuário, onde o mesmo pode selecionar um dos itens que estão contidos no menu em questão.

57

JPopUpMenu / JDialog

• JPopUpMenu: – pode ser utilizado para adicionar um menu “extra” onde se desejar...

– Representa uma pequena janela que geralmente encapsula um painel representando um menu.

• JDialog: – É uma sub-janela para exibir temporariamente uma informação para o

usuário.

– JOptionPane, JFileChoooser, são especializações de JDialogs, para definir JDialogs personalizadas é possível utilizá-la.

– Estas janelas podem ser modulares, o que indica que, toda a aplicação fica bloqueada enquanto o JDialog estiver ativo.

– setModalityType(Dialog.ModalityType.TOOLKIT_MODAL);

58

JTree

• Cria uma estrutura em forma hierárquica.

– Node’s

– Folhas

DefaultMutableTreeNode raiz= new DefaultMutableTreeNode(“Raiz");

DefaultTreeModel modelo = new DefaultTreeModel(root);

JTree arvore = new JTree(raiz);

59

Model estático em properties

Model dinâmico em

setModel ( new DefaultTreeModel(root) )

#1

#2

#3

Ícones e Fontes

# 1 – Ícones personalizados

URL url = System.class.getResource(“seuIcone.yyy");

ImageIcon icon = new ImageIcon( url );

algumCOMPONENT.setIcon( icon );

# 2 – Fontes Extras URL url = System.class.getResource(“nomeFont.ttf");

Font f = Font.createFont(Font.TRUETYPE_FONT, url.openStream());

algumCOMPONENT.setFont( f);

60

Ícones e Fontes

# 1 – Ícones personalizados URL url = System.class.getResource(“seuIcone.yyy"); ImageIcon icon = new ImageIcon( url ); algumCOMPONENT.setIcon( icon );

BufferedImage imagemOriginal = ImageIO.read(new File( “path/xxx.png“ )); Image imagemRedimensionada = imagemOriginal.getScaledInstance(X, Y, Image.SCALE_SMOOTH); ImageIcon iconeImagem = new ImageIcon(imagemRedimensionada);

# 2 – Fontes Extras

URL url = System.class.getResource(“nomeFont.ttf"); Font f = Font.createFont(Font.TRUETYPE_FONT, url.openStream()); algumCOMPONENT.setFont( f.deriveFont(18.0f));

61

Exercício – Seu José (GUI)

• Construindo uma interface para cadastro de novos produtos de Seu José.

62

Sobrescrevendo o método paint @override

protected void paintComponent(Graphics g) {

try {

Image backgroundImage;

backgroundImage = ImageIO.read(new File(“sua Imagem"));

g.drawImage(backgroundImage, 0, 0, getWidth(), getHeight(), this);

} catch (IOException ex) {

System.err.println(“Erro na leitura de sua imagem.”)

}

}

63