Linguagem de programação 2 GUI - sauloifmg.com.brsauloifmg.com.br/Disciplinas/L2/gui.pdf · •O...
-
Upload
dinhnguyet -
Category
Documents
-
view
217 -
download
0
Transcript of Linguagem de programação 2 GUI - sauloifmg.com.brsauloifmg.com.br/Disciplinas/L2/gui.pdf · •O...
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