Criação de interfaces gráficas

Transcrição

1 Modelos Criação de interfaces gráficas Interacção por terminal de texto Pergunta-resposta fácil de seguir Alternativa: criação de uma interface complexa com objectos variados Interacção pode ser com vários desses objectos Gera-se um evento, ao nível do sistema operativo (tecla, rato,...), que é passado ao Java e tratado pela aplicação Construir a interface, aguardar eventos e processá-los Em vez de atitude activa de interrogar cada objecto para saber se tem algum pedido Os eventos podem ocorrer sem ordem nem momento pre-determinados Mais próximo do paradigma de objectos Cada objecto trata dos seus eventos Fluxo da computação passa mais para as mãos do utilizador Criação de GUIs em Java Biblioteca de classes AWT (Abstract Window Toolkit) Fornece todas as classes básicas para a construção de interfaces Incluída em todos os sistemas Java no pacote java.awt Portável entre plataformas Modelo de eventos suportado pelo pacote java.awt.event Com problemas de eficiência e aspecto Biblioteca Swi ng Trabalha sobre a AWT, mas mais eficiente Incluída em javax.swing Tem mais estruturas para a construção do GUI Suporta look-and-feel (Windows, Unix, Macintosh, independente, adaptado)

2 Objectos em Janela (Jframe) Tela (Jpanel) Combo box (JComboBox) Lista (Jlist) Etiqueta (JLabel) Campo de texto (JTextField) desenho Botão de rádio (JRadioButton) Grupo de botões (ButtonGroup) Botão (JButton) Caixa de escolha (JCheckBox) Campo de texto não editável Apenas se mostram alguns objectos simples; a biblioteca tem muitos mais Hierarquia de classes Maior parte dos objectos descende de Component Tem posição e tamanho, pode ser mostrado no ecrã e receber eventos Classe abstracta Alguns métodos void setsize( int width, int height ); Usar antes setpreferredsize; void setbackground ( Color c ); void setfont( Font f ); void show() Torna o componente visível As classes Font e Color estão definidas noutra hierarquia, em AWT (Só se mostra parte da hierarquia)

3 Contentores Container Um contentor é um componente que pode conter outros componentes É necessário saber-se como dispor os componentes Ajudante: posicionador (LayoutManager) associado com void setlayout( LayoutManager mgr ); Depois adicionam-se os componentes por ordem void add( Component c ); ou void add( Component c, Object where ); Dois tipos de contentores Janelas de topo, até Jframe Componente pesado porque interage com o sistema de janelas nativo na máquina JComponent e suas subclasses (muitos dos outros componentes) Componente leve porque é completamente desenhado numa tela pelo Tipos de janelas de topo JWindow : janela sem caixilho Janelas JFrame : janela com caixilho que pode ter também um menu (JMenuBar) JDialog : janela para criar diálogos Uma aplicação deve ter um JFrame ou uma sua subclasse Não é possível adicionar componentes directamente à janela Para deixar ao controlo sobre o posicionamento Obtém-se um contentor que representa o conteúdo da janela Container getcontentpane( );

4 Painel Um painel destina-se a organizar componentes numa unidade de apresentação Podem existir contentores dentro de contentores e painéis dentro de painéis É habitual usar uma subclasse de Jpanel para permitir acrescentar código específico (GUI é uma subclasse de Jpanel) GUI implementa a interface ActionListener É um atendedor para tratar o evento carregar no botão Tem que fornecer o método actionperformed Tem que ligar o atendedor ao objecto que pode produzir o evento thedrawbutton.addactionlistener( this ) JPanel herda de JComponent várias funcionalidades, incluindo palpites e dimensionamento void settooltiptext( String txt ); void setpreferredsize( Dimension d ); Classe GUI principal import java.awt.*; import javax.swing.*; import java.awt.event.*; public voidactionperformed( ActionEvent evt ) /* ver a frente*/ class GUI JPanel implements ActionListener public GUI( ) maketheobjects( ); dothelayout( ); thedrawbutton.addactionlistener( this ); // Make all the objects private voidmaketheobjects( ) /* ver a frente*/ // Layout all the objects private voiddothelayout( ) /* ver a frente*/ private GUICanvas thecanvas; private JComboBox theshape; private JList thecolor; private JTextField thexcoor; private JTextField theycoor; private JRadioButton smallpic; private JRadioButton mediumpic; private JRadioButton largepic; private JCheckBox thefillbox; private JButton thedrawbutton; private JTextField themessage;

5 Relacionamento entre classes JComponent ActionListener ActionPerformed JPanel implements GUI GUICanvas JComboBox JList... includes GUICanvas Etiquetas e botões Componente destinado a etiquetas: JLabel Normalmente associado a campos de texto, campos combo, listas e paineis, uma vez que os outros já têm etiqueta própria Construção de um objecto etiqueta vazio: JLabel( ); Construção de um objecto com a etiqueta thelabel: JLabel( String thelabel ); Alteração da etiqueta no objecto: settext( String thelabel ); Pode ser usado para mensagens para o utilizador mas habitualmente usa-se campos de texto não editáveis para esse fim Um botão (caso de Draw) pode ser visto como uma etiqueta activa: gera eventos para click com o botão esquerdo Métodos: JLabel( ); JLabel( String thelabel ); settext( String thelabel );

6 Caixas de selecção Nas caixas de selecção ( combo box ), é possível escolher um objecto de uma lista pop-up de alternativas, ficando apenas a escolha visível No caso de a lista ser editável, pode escrever-se um valor não previsto A lista de valores pode ser fornecida na criação do objecto ou ser manipulada posteriormente Criação de caixa de selecção vazia: JComboBox( ); Idem, com as opções: JComboBox( Object[] choices ); Acrescentar opção no fim: void additem( Object item ); Devolver o objecto correspondente ao item seleccionado: Object getselecteditem( ); ou o respectivo número de ordem int getselectedindex( ); Permitir a especificação de um novo valor: void seteditable( boolean edit ); Indicar o valor seleccionado (ex. por omissão): void setselectedindex( int index ); Listas O componente JList permite fazer escolhas numa lista de valores possivelmente com rolamento, se o número de valores exceder o espaço disponível Principais diferenças relativamente à combo box: A lista permite, por omissão, selecção múltipla A lista deixa ver vários valores simultaneamente A lista ocupa maior superfície do ecrã Criação de lista vazia: JList( ); ou com os valores: JList( Object[] values ); Indicar os valores: void setlistdata( Object[] values ); Selecção simples, devolver o objecto correspondente: Object getselectedvalue( ); ou o respectivo número de ordem int getselectedindex( ); Selecção múltipla: Object [] getselectedvalues( ); int[] getselectedindices( ); Escolher modo de selecção simples: void setselectionmode( ListSelectionMode.SINGLE_SELECTION); Indicar o valor seleccionado: void setselectedindex( int index ); void setselectedvalue( Object value );

7 Caixas de marcação e botões de rádio Estes componentes (JCheckBox e JRadioButton) só têm dois estados: on (true) e off (false) Por isso, têm etiqueta no próprio objecto e podem ser agrupados JCheckBox para dizer sim ou não JRadioButton para escolher um entre alternativas Criação de uma caixa sem etiqueta: JCheckBox( ); com etiqueta: JCheckBox( String thelabel); com etiqueta e estado inicial: JCheckBox( String thelabel, boolean state); Idem para JRadioButton Altera a etiqueta: void setlabel( String thelabel ); Indicar o estado: void setselected( boolean state); Consulta o estado: boolean isselected ( ); Para criar um grupo de escolha mutuamente exclusiva: ButtonGroup( ); Não é um componente Para adicionar os botões (ou caixas) em causa: void add( AbstractButton b ); Texto Um campo de texto JTextField permite escrever uma linha de texto Para mais do que uma linha, usa-se a área de texto JTextArea A tecla Enter funciona aqui como uma mudança de linha e não como um evento do teclado a significar fim de entrada de dados Métodos Campo de texto: JTextField( ); Idem com indicação do comprimento: JTextField( int cols); Idem com valor inicial e comprimento: JTextField( String text, int cols); Obter o texto escrito no campo: String gettext( ); Indicar o texto escrito no campo: void settext( String text ); Indicar se é editável ou não (só para display de mensagens): void seteditable( boolean editable );

8 // Make all the objects private voidmaketheobjects( ) thecanvas = newguicanvas( ); thecanvas.setbackground( Color.green ); thecanvas.setpreferredsize( new Dimension( 100, 100 ) ); theshape = newjcombobox( new String [ ] "Circle", "Square" ); thecolor = newjlist( new String [ ] "red", "blue" ); thecolor.setselectionmode( ListSelectionModel.SINGLE_SELECTION ); thecolor.setselectedindex( 0 ); // make red default thexcoor = newjtextfield( 3 ); theycoor = newjtextfield( 3 ); ButtonGroup thesize = newbuttongroup( ); smallpic = new JRadioButton( "Small", false ); mediumpic = newjradiobutton( "Medium", true ); largepic = new JRadioButton( "Large", false ); thesize.add( smallpic ); thesize.add( mediumpic ); thesize.add( largepic ); thefillbox= newjcheckbox( "Fill" ); thefillbox.setselected( false ); thedrawbutton = newjbutton( "Draw" ); themessage = newjtextfield( 25 ); themessage.seteditable( false ); // Layout all the objects private voiddothelayout( ) JPanel tophalf = newjpanel( ); JPanel bottomhalf = newjpanel( ); // Layout the top half tophalf.setlayout( new FlowLayout( ) ); tophalf.add( thecanvas ); tophalf.add( newjlabel( "Shape" ) ); tophalf.add( theshape ); tophalf.add( thecolor ); tophalf.add( newjlabel( "Xcoor" ) ); tophalf.add( thexcoor ); tophalf.add( newjlabel( "Ycoor" ) ); tophalf.add( theycoor ); // Layout the bottom half bottomhalf.setlayout( new FlowLayout( ) ); bottomhalf.add( smallpic ); bottomhalf.add( mediumpic ); bottomhalf.add( largepic ); bottomhalf.add( thefillbox); bottomhalf.add( thedrawbutton); bottomhalf.add( themessage ); // Now layout GUI setlayout( newborderlayout( ) ); add( tophalf, "North" ); add( bottomhalf, "South" );

9 Telas Uma tela é uma área rectangular onde se pode desenhar e que recebe eventos Em AWT, usava-se a classe Canvas Em, cria -se uma subclasse de JPanel, que permite redefinir o método de desenhar a interface: void paintcomponent( Graphics g ); g é uma instância da classe abstracta Graphics que o associa ao dispositivo de visualização Métodos para desenhar void drawoval( int x, int y, int width, int heigth ); drawrect, filloval, fillrect; indica canto superior esquerdo e dimensões void drawline( int x1, int y1, int x2 int y2 ); superior esquerdo e inferior direito void DrawString( String str, int x, int y ); void setcolor ( Color c ); Definição da tela class GUICanvas JPanel public void setparams( String ashape, String acolor, int x, int y, int size, boolean fill ) this.theshape = ashape; this.thecolor = acolor; xcoor = x; ycoor = y; thesize = size; fillon = fill; repaint( ); public void update( Graphics g ) System.out.println( "Update called" ); public void paintcomponent( Graphics g ) super.paintcomponent( g ); if( thecolor.equals( "red" ) ) g.setcolor( Color.red ); else if( thecolor.equals( "blue" ) ) g.setcolor( Color.blue ); thewidth = 25 * ( thesize + 1 ); if( theshape.equals( "Square" ) ) if( fillon ) g.fillrect( xcoor, ycoor, thewidth, thewidth ); else g.drawrect( xcoor, ycoor, thewidth, thewidth ); else if( theshape.equals( "Circle" ) ) if( fillon ) g.filloval( xcoor, ycoor, thewidth, thewidth ); else g.drawoval( xcoor, ycoor, thewidth, thewidth );

10 Resto da tela private String theshape = ""; private String thecolor = ""; private int xcoor; private int ycoor; private int thesize; // 0 = small, 1 = med, 2 = large private boolean fillon; private int thewidth; Responder ao evento public void actionperformed( ActionEvent evt ) try thecanvas.setparams( (String) theshape.getselecteditem( ), (String) thecolor.getselectedvalue( ), Integer.parseInt( thexcoor.gettext( ) ), Integer.parseInt( theycoor.gettext( ) ), smallpic.isselected( )? 0 : mediumpic.isselected( )? 1 : 2, thefillbox.isselected( ) ); themessage.settext( "" ); catch( NumberFormatException e ) themessage.settext( "Incomplete input" );

11 Adaptadores e classes internas JFrame WindowListener JFrame WindowListener windowclosing windowclosed windowiconified windowopened... windowclosing windowclosed windowiconified windowopened... ClosableFrame implements ClosableFrame implements WindowAdapter BasicGUI Jframe por si só não fecha Para ter uma janela que feche implementa -se o WindowListener Obriga a implementar muitos métodos vazios (classe interior) BasicGUI Adaptador implementa todos os métodos vazios e permite overriding Por não haver herança múltipla, cria -se uma classe interior (para ter acesso às variáveis de ClosableFrame) que trata dos eventos esta classe pode ser anónima Tratamento de eventos // Class that implements a Window that closes on a window-close event class CloseableFrame JFrame public CloseableFrame( ) addwindowlistener( new WindowAdapter( ) public void windowclosing( WindowEvent event ) System.exit( 0 ); );

12 Classe principal class BasicGUI CloseableFrame public static void main( String [ ] args ) JFrame f = new BasicGUI( ); f.settitle( "GUI Demo" ); Container contentpane = f.getcontentpane( ); contentpane.add( new GUI( ) ); f.pack( ); f.show( ); Quadro completo JFrame WindowListener JComponent ActionListener windowclosing ActionPerformed implements WindowAdapter JPanel implements ClosableFrame (classe interior) GUI GUICanvas JComboBox JList... includes GUICanvas includes BasicGUI BasicGUI (contentpane) GUI

13 Arquitectura MVC Arquitectura para construção de aplicações OO em que se separam três dimensões Modelo: mantém dados usando os algoritmos apropriados e fornece métodos de acesso Vista: constroi uma representação visual de parte ou todos os dados do modelo Controlador : trata os eventos Quando o modelo altera os seus dados, gera eventos que fazem com que a vista actualize a sua representação, segundo as ordens do controlador Podem existir várias vistas e controladores para o mesmo modelo, o qual pode permancer inalterado quando este evolui Comunicação MVC Uma alteração no modelo provoca um evento de alteração que é difundido para todos os objectos que estão à escuta desse evento e desencadeia as alterações Facilita manter o sincronismo entre vistas diferentes de um mesmo modelo Actuar numa vista pode provocar alterações no modelo que são reflectidas nas outras vistas No exemplo anterior, o modelo não está claramente separado da vista (GUI) as variáveis estão misturadas na tela GUICanvas actualiza Vista 1 altera Modelo vê dados vê dados altera Controlador Evento actualiza altera Vista 2

14 Arquitectura MVC em Um componente leve inclui os seguintes objectos Um modelo que mantém os dados ( modelo da MVC básica) fornece métodos de acesso notifica os listeners quando é alterado Um delegado da IU que é uma vista ( vista) com listeners ( controladores) combina as duas funções colocando os listeners junto dos objectos controlados listeners são habitualmente implementados por classes internas Um componente que estende JComponent um componente fornece uma API para o programador transfere a construção de interfaces para os delegados; passa-lhes os eventos torna o modelo transparente para o programador; atravessado pelos métodos Facilita acopular diferentes estilos de interfaces (look & feel) Macintosh, Windows, Motif, Metal Componente Comunicação MVC em Faz alterações ao modelo e faz seguir para o modelo alterações que venham da interface Escutam o modelo para passarem os eventos para os seus listeners Listeners do delegado IU Tanto escutam o modelo como o componente Pedem informação ao modelo Alteram o próprio delegado Modelo actualiza vê dados altera Componente Evento actualiza Delegado IU Listeners actualiza altera altera

15 Perspectiva estática de um componente JComponent Component UI Bounded RangeModel JSlider SliderUI DefaultBounded RangeModel Focus Handler Scroll Listener Track Listener Metal SliderUI BasicSliderUI Windows SliderUI Component Handler PropertyChange Handler Change Handler Motif SliderUI Eventos de modelo Um modelo pode produzir muitos eventos Eventos leves: ChangeEvent só indicam o objecto fonte do evento Ex: posição de uma barra de deslocamento ChangeListener Eventos com estado Transportam os parâmetros tipicamente necessários para o processamento Ex: retirar um elemento de uma lista PropertyChangeListener