Aula Prática Criando Views e Controles

Transcrição

1 Aula Prática Criando Views e Controles Criando a interface utilizando Swing Paulo Ricardo Lisboa de Almeida 1

2 Criando uma UI Simples Vamos criar uma view simples no braço utilizando swing Existem opções mais interessantes, mas vamos focar no swing por ser simples e nos dar uma boa visão do nosso MVC Para isso, crie uma classe que vai representar uma de nossas views Chame essa classe de ViewPrincipal ViewPrincipal deve herdar da classe javax.swing.jframe 2

3 Criando a tela principal A tela inicial pode exibir as principais funcionalidades do sistema Ações relacionadas a animais, espécies e tipos de animal Na aula, vamos nos preocupar apenas com animais e espécies A aplicação completa, contendo todas as funcionalidades faz parte do trabalho Vamos criar 2 botões, um para cada grupo de funcionalidades Animais Espécies Adicione também um painel (JPanel) que vai representar o painel que contém o menu principal da aplicação 3

4 Criando a tela principal public class ViewPrincipal extends JFrame{ private static final long serialversionuid = 1L; private JButton btnanimais = new JButton("Animais"); private JButton btnespecies = new Jbutton("Espécies"); private JPanel conteudomenuprincipal; //... No construtor da view principal vamos adicionar os principais componentes e alinhá-los 4

5 Criando a tela principal public ViewPrincipal() { conteudomenuprincipal = new JPanel(); SpringLayout layout = new SpringLayout(); conteudomenuprincipal.setlayout(layout); conteudomenuprincipal.add(btnanimais); conteudomenuprincipal.add(btnespecies); //ajuste o componente btnanimais 5 pixels (a direita) do painel principal (âncora oeste) layout.putconstraint(springlayout.west, btnanimais, 5, SpringLayout.WEST, conteudomenuprincipal); //ajuste o componente btnanimais 5 pixels (abaixo) do painel principal (âncora norte) layout.putconstraint(springlayout.north, btnanimais, 5, SpringLayout.NORTH, conteudomenuprincipal); //ajuste o componente btnespecies 5 pixels (a direita) do painel principal (âncora oeste) layout.putconstraint(springlayout.west, btnespecies, 5, SpringLayout.WEST, conteudomenuprincipal); //ajuste o componente btnanimais 40 pixels (abaixo) do painel principal (âncora oeste) layout.putconstraint(springlayout.north, btnespecies, 40, SpringLayout.NORTH, conteudomenuprincipal); //caso queiram ajustar o tamanho da janela de acordo com as posições relativas dos componentes //ajuste o tamano do conteúdo principal de acordo com a borda sul do botão espécies //layout.putconstraint(springlayout.south, content, 5, SpringLayout.SOUTH, btnespecies); //ajuste o tamano do conteúdo principal de acordo com a borda leste do botão espécies //layout.putconstraint(springlayout.east, content, 5, SpringLayout.EAST, btnanimais); this.settitle("clínica Veterinária UP"); this.setdefaultcloseoperation(jframe.exit_on_close); this.exibirtelainicial(); 5

6 Colocando para rodar Note que no construtor estamos chamando um método da classe chamado exibirtelainicial O método pode ser definido como: public void exibirtelainicial() { // tamanho inicial da janela em pixels this.setpreferredsize(new Dimension(120, 120)); // seta o conteúdo do painel atual (JFrame) como o JPAnel content recém criado this.setcontentpane(conteudomenuprincipal); this.pack();// Ajusta o conteúdo (content) para o JFrame (ex.: ajuste de resolução) 6

7 Colocando para rodar Crie um main e para testar sua view, faça o seguinte: public static void main(string[] args) { ViewPrincipal view = new ViewPrincipal(); view.setvisible(true); System.out.println("Fim!"); 7

8 Adicionando Listeners Na view, crie um método que vai adicionar um listener ao botão Animais Adicione também um método para exibir erros em geral public void showerror(string errmessage) { JOptionPane.showMessageDialog(this, errmessage); public void addbtnanimaislistener(actionlistener animaislistener) { btnanimais.addactionlistener(animaislistener); 8

9 Criando o Controller Vamos criar um controller Crie uma classe ViewPrincipalController Adicione um atributo do tipo ViewPrincipal Inicialize esse atributo no construtor Crie também uma classe aninhada dentro de ViewPrincipalController Classe chamada BtnAnimaisListener Implementa a interface ActionListener 9

10 Criando o Controller Vamos criar um controller Crie uma classe ViewPrincipalController Adicione um atributo do tipo ViewPrincipal Inicialize esse atributo no construtor Crie também uma classe aninhada dentro de ViewPrincipalController Classe chamada BtnAnimaisListener Implementa a interface ActionListener Override no método actionperformed Por enquanto simplesmente exiba uma mensagem de teste na tela No construtor do controller, crie um objeto da classe BtnAnimaisListener e o coloque como listener do botão btnanimais da view 10

11 Criando o Controller import java.awt.event.actionevent; import java.awt.event.actionlistener; import com.up.clinica.view.viewprincipal; public class ViewPrincipalController { private ViewPrincipal view; public ViewPrincipalController(ViewPrincipal view) { this.view = view; this.view.addbtnanimaislistener(new BtnAnimaisListener()); private class BtnAnimaisListener implements ActionListener public void actionperformed(actionevent e) { view.showerror("exibindo um erro de teste"); 11

12 No main No main, vamos criar um crontroller, passando a view como parâmetro public static void main(string[] args) { ViewPrincipal view = new ViewPrincipal(); ViewPrincipalController controller = new ViewPrincipalController(view); view.setvisible(true); System.out.println("Fim!"); 12

13 Testando Rode o projeto e clique no botão animais 13

14 Tela de edição de animais Vamos exibir os animais em uma tabela Para isso, precisamos criar uma classe que herde de AbstractTableModel Faz a tradução de uma lista de animais para uma tabela exibida ao usuário public class ExibicaoAnimais extends AbstractTableModel{ private static final int NUM_COLUNAS_ANIMAL = 3; private List<Animal> animaistabela; public ExibicaoAnimais() { public ExibicaoAnimais(List<Animal> animais) { animaistabela = animais; public List<Animal> getanimaistabela() { return animaistabela; public void setanimaistabela(list<animal> animaistabela) { this.animaistabela = animaistabela; //... 14

15 Tela de edição de animais Sobrecarregue os seguintes métodos em public String getcolumnname(int coluna) { switch(coluna) { case 0: return "Identificador"; case 1: return "Nome"; case 2: return "Nascimento"; default: throw new RuntimeException("Solicitada uma coluna no JTable que não public int getcolumncount() { return public int getrowcount() { if(animaistabela!=null) return animaistabela.size(); else return 0; 15

16 Tela de edição de animais Sobrecarregue os seguintes métodos em public Object getvalueat(int linha, int coluna) { switch(coluna) { case 0: return animaistabela.get(linha).getid(); case 1: return animaistabela.get(linha).getnome(); case 2: return animaistabela.get(linha).getnascimento(); default: throw new RuntimeException("Solicitada uma coluna no JTable que não existe"); 16

17 Tela de edição de animais Vamos criar agora uma tela para manutenção de animais Tela disponível quando o usuário clica no botão Animais Na ViewPrincipal adicione as propriedades: Jpanel chamado conteudomanutencaoanimais Botão btnvoltar Jtable chamado tabelaanimais Um atributo do tipo ExibicaoAnimais public class ViewPrincipal extends JFrame { //itens da tela principal private JButton btnanimais = new JButton("Animais"); private JButton btnespecies = new JButton("Espécies"); private JPanel conteudomenuprincipal; //itens da janela de animais private JButton btnvoltar = new JButton("Voltar"); private JPanel conteudomanutencaoanimais; private ExibicaoAnimais modeloexibicaoanimaistabela; private JTable tabelaanimais; //... 17

18 Tela de edição de Animais Na ViewPrincipal adicione os seguintes métodos public void exibirtelaanimais(list<animal> animaisparaexibir) { modeloexibicaoanimaistabela.setanimaistabela(animaisparaexibir); // tamanho inicial da janela em pixels this.setpreferredsize(new Dimension(400, 400)); this.setcontentpane(conteudomanutencaoanimais); this.pack(); public void addbtnvoltarlistener(actionlistener voltarlistener) { btnvoltar.addactionlistener(voltarlistener); 18

19 Tela de edição de Animais No final do construtor da ViewPrincipal (após this.exibirtelainicial()), adicione o seguinte modeloexibicaoanimaistabela = new ExibicaoAnimais(); tabelaanimais = new JTable(modeloExibicaoAnimaisTabela); conteudomanutencaoanimais = new JPanel(); SpringLayout layoutmanutencaoanimais = new SpringLayout(); conteudomanutencaoanimais.setlayout(layoutmanutencaoanimais); conteudomanutencaoanimais.add(tabelaanimais); conteudomanutencaoanimais.add(btnvoltar); layoutmanutencaoanimais.putconstraint(springlayout.west, tabelaanimais, 5, SpringLayout.WEST, conteudomanutencaoanimais); layoutmanutencaoanimais.putconstraint(springlayout.west, btnvoltar, 300, SpringLayout.WEST, conteudomanutencaoanimais); 19

20 Tela de edição de Animais Na ViewPrincipalController Modifique a classe aninhada BtnAnimaisListener Crie uma classe BtnVoltarListener Adicione o listener no botão voltar no construtor 20

21 Tela de edição de Animais public class ViewPrincipalController { private ViewPrincipal view; private AnimalDAO animaldao = new AnimalDAO(); public ViewPrincipalController(ViewPrincipal view) { this.view = view; this.view.addbtnanimaislistener(new BtnAnimaisListener()); this.view.addbtnvoltarlistener(new BtnVoltarListener()); private class BtnAnimaisListener implements ActionListener public void actionperformed(actionevent e) { List<Animal> animais; try { animais = animaldao.listar(); catch (Exception ex) { throw new RuntimeException(ex); view.exibirtelaanimais(animais); private class BtnVoltarListener implements ActionListener public void actionperformed(actionevent e) { view.exibirtelainicial(); 21

22 Tela de edição de Animais Rode o projeto e tudo deve funcionar! 22

23 Observações quanto ao MVC Note que criamos a camada de modelo nas aulas passadas sem nunca considerar a camada de visão Inclusive decidimos só agora que usaríamos uma janela swing A camada de visão criada somente entende o formato do modelo e exibe seus dados na tela Toda ação de usuário é coordenada pela camada de controle, que redireciona as telas para a view, e envia os comandos para o modelo Logo, criamos um projeto simples MVC em um sistema Coeso Desacoplado 23

24 Exercício Termine a aplicação de acordo com a descrição do trabalho disponível no site da disciplina 24

25 Referências e-summary.html index.html ml html 25