Criação Dinâmica de Interfaces Gráficas Definidas em XML. Manual de Utilização da Package Xil 0.5A

Transcrição

1 Criação Dinâmica de Interfaces Gráficas Definidas em XML de Utilização da Package Xil 0.5A Relatório de Projecto (parte II) Ano Lectivo: 2002/2003 Curso: Licenciatura em Ensino De Informática Orientador: Prof. Doutor João M. P. Cardoso Realizado por: Nome: Gil Moreira N.º Faro, 4 de Julho de 2003

2 Índice ÍNDICE...I ÍNDICE DE FIGURAS... II ÍNDICE DE EXEMPLOS... II 1. INSTALAÇÃO COMPONENTES DEFINIÇÃO EM XML Palavras-Chave da Interface GUI Size Palavras-Chave dos Componentes Button CheckBox ImageLabel & TextLabel TextArea TextField MenuBar Menu MenuItem OUT Posicionamento dos componentes Atributos Especiais ACTION...18 open & saveas...18 box...20 msg...21 exit GERAÇÃO E INTERACÇÃO COM A INTERFACE Exemplos Olá Mundo Botão de saída Botão Abrir Métodos Geração Verificação de estados Alteração de estados Obtenção de valores Modificação de valores Interacção com o utilizador LIMITAÇÕES TABELAS DE REFERÊNCIA Tabela de componentes e atributos suportados Tabela do atributo ACTION Tabela de métodos...38

3 Índice de figuras Figura 1 Componentes colocados numa janela. 2 Figura 2 Caixa de verificação seleccionada. 3 Figura 3 Menu Aberto. 3 Figura 4 Janela gerada por XML. 6 Figura 5 Exemplo de uma label. 11 Figura 6 Label com alinhamento Exemplo Figura 7 Label com alinhamento Exemplo Figura 8 Label com alinhamento Exemplo Figura 9 Label com contorno. 12 Figura 10 Caixa de Texto com Scroll Activado 13 Figura 11 Exemplo de posicionamento. 16 Figura 12 Interface redimensionada. 17 Figura 13 Exemplo da janela de escolha de ficheiro. 19 Figura 14 Caixa de confirmação. 20 Figura 15 Caixa de Introdução de Dados. 20 Figura 16 Exemplo de uma caixa de mensagem. 22 Figura 17 Exemplo de uma caixa de mensagem sem título nem mensagem. 22 Figura 18 Olá Mundo versão com interface gráfica. 23 Figura 19 Exemplo de um botão de saída. 25 Figura 20 Exemplo de um botão de abrir ficheiro. 26 Figura 21 Janela de escolha de ficheiros. 26 Figura 22 Resultado da escolha de ficheiro. 27 Figura 23 TextField Inactivo. 30 Índice de exemplos Exemplo 1 Definição em XML Exemplo 2 Código simples de uma classe cliente Exemplo 3 Código cliente com interacção ii

4 1. Instalação Para utilizar esta package é necessário ter o SDK Java 1 instalado, e o parser XML Xerces 2. A instalação é muito simples, basta colocar o xil.jar num directório qualquer à escolha, e acrescentar à variável de ambiente CLASSPATH a linha caminho do directório\xil.jar. Por exemplo, supondo que se tinha copiado o ficheiro para o directório c:\java\xil\, e ele se chama xil.jar, teria de ser adicionada a seguinte linha ao CLASSPATH, c:\java\xil\xil.jar. A forma de adicionar esta linha à variável de ambiente depende do sistema operativo, por exemplo em Windows seria usado o comando SET da seguinte forma: SET CLASSPATH=%CLASSPATH%;caminho\xil.jar E em GNU/Linux: CLASSPATH=%CLASSPATH:caminho/xil.jar Alternativamente, basta indicar ao compilador Java através da opção cp ou classpath o caminho para a pakcage. Posteriormente apenas é necessário incluir no programa Java a seguinte linha, import xil.*;. 1 Disponível no site da Sun, 2 Disponível no site 1

5 2. Componentes Em primeiro lugar é necessário introduzir os termos que são utilizados quando se fala de interfaces gráficas, e mais especificamente os termos que são necessários para compreender a definição em XML de uma interface. A primeira definição que se pode fazer é a de um componente, este é o nome dado aos objectos que fazem parte da interface gráfica. Tomando isto em consideração, observe-se a seguinte imagem de uma interface gráfica: Figura 1 Componentes colocados numa janela. Nesta primeira imagem podemos observar os seguintes tipos de componentes: 1. Frame Janela, é essencialmente um painel onde são colocados os outros componentes da interface. Normalmente possui uma barra superior onde se encontram os botões para minimizar 3, maximizar 4, e fechar a janela. 2. Menu Bar Barra de Menus, é um campo dentro de uma janela, que está reservado para a colocação de menus. 3 Reduzir a janela de forma a ficar visível apenas na forma de, tipicamente, um ícone. 4 Aumentar a janela de forma a ocupar todo o ecrã. 2

6 3. Button Botão, é uma representação virtual de um botão simples. Normalmente desencadeia uma acção após ser pressionado. 4. Textfield Campo de texto, é uma zona onde se pode colocar algum texto. E é possível editar o texto que lá está. 5. Check Box Caixa de verificação, é um tipo de botão que funciona como variável boleana, isto é, possui dois estados seleccionada ou não seleccionada. Quando está seleccionada, Figura 2, apresenta uma marca. Figura 2 Caixa de verificação seleccionada. 6. Label Etiqueta, é um componente que serve para colocar texto que não é possível editar, ou seja, só o programador controla o texto que lá aparece. Também é possível inserir imagens neste componente. 7. Textarea Área de texto, de mesma forma que o Textfield permite colocar e editar texto, suportando no entanto mais do que uma linha. 1 2 Figura 3 Menu Aberto. Na imagem da Figura 3 podemos ver: 1. Menu Menu, botão que quando carregado mostra uma lista com opções para escolha. 2. Menu Item Opções de menu, são opções que aparecem num menu, tipicamente após a escolha de uma, é desencadeada uma acção na aplicação. 3

7 Utilizando a package desenvolvida é possível definir todos os componentes ilustrados anteriormente, e outros que serão introduzidos mais adiante, num ficheiro XML. 4

8 3. Definição em XML Para construir uma interface gráfica utilizando a package, é necessário definir em XML os componentes. Esta definição é feita de forma semelhante ao modo como se define uma página em HTML. Existem palavras-chave que definem os componentes e respectivos atributos, e outras que servem para configurar a interface. As palavras-chave também podem ser chamadas de Tags. Um exemplo de uma palavra-chave pode ser: <Componente [Atributo1= valor. AtributoN= valor ]/> O carácter < marca o inicio e os caracteres /> marcam o fim. Caso seja necessário indicar que existem componentes dentro de componentes, por exemplo com os menus, utiliza-se uma forma diferente de terminar a definição. <Componente [Atributo1= valor. AtributoN= valor ]/> <SubComponente [Atributo1= valor. AtributoN= valor ]/> </Componente> A estrutura básica de um documento em XML para definir uma interface é a seguinte: <?xml version="1.0"?> <GUI NAME="Janela"> <Size WIDTH="300" HEIGHT="100"/> </GUI> Exemplo 1 Definição em XML. 5

9 A package desenvolvida a partir desta definição XML gera a seguinte interface: Figura 4 Janela gerada por XML. Podem-se ver, neste exemplo, algumas das palavras-chave utilizadas. Por exemplo, a palavra-chave GUI indica que vamos iniciar a definição de uma interface, e a palavra Size, controla o tamanho da janela gerada. A primeira linha do documento é opcional, no entanto existe uma opção para configurar o tipo de caracteres suportados no ficheiro que poderá ser útil caso se queira utilizar acentos ou outros caracteres diferentes. Deve-se colocar na primeira linha o seguinte: <?xml version= 1.0 encoding= UTF-16?> Os valores do parâmetro encoding estão definidos no standard do XML, e definem essencialmente o tipo de codificação de caracteres que deve ser esperada no documento. Alguns valores são: UTF-8 UTF-16 EUC-JP US-ASCII Codificação Unicode 8 bits Unicode 16 bits, suporta caracteres acentuados Para caracteres japoneses Tradicional código ASCII O editor utilizado para criar o ficheiro XML tem de suportar a codificação utilizada. 6

10 3.1 Palavras-Chave da Interface Antes de se definir as palavras-chave e atributos é necessário ter em conta que tanto num caso como noutro eles são case sensitive, ou seja, se estiver definida uma palavra-chave como sendo PaLaVra é assim que tem de constar no ficheiro XML. Tendo isto em conta, todos os valores de atributos, que são prédefinidos, por exemplo os true e false, têm de estar em minúsculas. Para além disto, todos as palavras-chave ou atributos entre [ ] são considerados opcionais e os valores de atributos separados por, indicam que deve ser escolhido um GUI A palavra-chave GUI marca o início da definição da interface gráfica, todos os componentes são definidos entre o início e o fim desta. Os atributos suportados são, o atributo NAME que serve para definir o nome da janela que irá aparecer, se não for colocado nenhum nome, o nome por omissão é Janela. E o atributo RESIZE, que aceita os valores true ou false, e quando lhe é atribuido false impede o utilizador de redimensionar a janela manualmente. <GUI NAME= nome [ RESIZE= true false ]> </GUI> <Componente1 /> <ComponenteN /> Size Esta tag indica que queremos definir o tamanho da janela, os atributos WIDTH e HEIGHT correspondem, respectivamente, à largura e altura da janela. Se não for incluída esta tag, ou faltar um dos atributos, é atribuído um tamanho por omissão de 400x400. Os valores aqui colocados têm de ser inteiros maiores que zero. <Size WIDTH= num HEIGHT= num /> 7

11 Por Exemplo: <Size WIDTH= 800 HEIGHT= 600 /> Define um tamanho para a janela de 800x600. 8

12 3.2 Palavras-Chave dos Componentes Os diferentes componentes aqui apresentados possuem alguns atributos em comum, por esse motivo quando se explicar os atributos de um componente, só se falará dos atributos não explicados previamente Button A tag Button é utilizada para definir um botão. A definição mais básica é a seguinte: <Button NAME="nome" LABEL="Botao" /> O atributo NAME define o nome do botão e é o único obrigatório, sem ele o componente não será processado. É por esse nome que o componente é referenciado no lado da aplicação cliente, por esse motivo o nome deve ser único. Não devem existir componentes com nomes iguais. Por outro lado, o atributo LABEL é facultativo e serve para colocar uma etiqueta visível no botão, tipicamente para indicar a sua função. No exemplo seguinte podem-se observar mais alguns atributos possíveis para o botão, nomeadamente a forma de especificar acções que despoletam código cliente. <Button NAME="nome" LABEL="Botao" CLASS="classe" METH="nome_do_metodo" VISIBLE="estado"/> O atributo METH serve para indicar qual o método da aplicação que é chamado quando o botão é pressionado. Este método deve ser do tipo: Public void nome_do_metodo() { } O atributo CLASS indica a classe Java onde se encontra o método definido pelo o atributo METH. Deve ser indicado o caminho completo para lá chegar, isto é, 9

13 se o método se encontra na classe principal que pertence à package programa, o caminho indicado deverá ser CLASS= programa.principal. O atributo VISIBLE, como o nome indica controla a visibilidade inicial de um componente. São suportados dois valores true e false, se eu colocar VISIBLE= false, o componente não será visível. Por omissão os componentes são visíveis, ou seja é igual ter VISIBLE= true ou omitir a tag. O atributo ENABLED controla se o componente está activo ou não. Se um componente não estiver activo o utilizador não consegue interagir com ele. Este componente ainda suporta mais um atributo o ACTION, que é designado como atributo especial, do qual depende a presença de outros atributos, e será explicado à parte. A sintaxe geral desta tag, sem incluir o atributo ACTION é a seguinte: <Button NAME="nome" [ LABEL="Botao"] [CLASS="classe" METH="nome_do_metodo"] [VISIBLE="true false" ] [ENABLED= true false ]/> CheckBox Tag utilizada para definir uma caixa de verificação. A sintaxe geral é a seguinte: <CheckBox NAME="nome" [ LABEL="CheckBox"] [CLASS="classe" METH="nome_do_metodo"] [SELECT="true false"] [VISIBLE="true false"] [ENABLED= true false ]/> Como se pode ver o único atributo novo neste componente é o SELECT, que aceita dois valores true ou false. O que este atributo controla é o estado inicial da caixa de verificação, se estiver definido true a caixa aparece logo seleccionada. Este componente também suporta o atributo ACTION ImageLabel & TextLabel Estas duas tags representam o mesmo componente, a Label, a distinção de nome serve apenas para tornar a definição mais legível no caso em que só se 10

14 deseja inserir uma imagem ou texto. Se for necessário introduzir texto e uma imagem é indiferente qual das duas tags se utiliza. A sintaxe geral é: <ImageLabel NAME="tlabel1" [ TEXT="texto_da_label"] [ALIGNV="tipo_de_alinhamento"] [ALIGNH="tipo_de_alinhamento"] [IMAGE="caminho_para_a_imagem"] [BORDER="true false"] [VISIBLE= true false ] [ENABLED= true false ]/> O atributo TEXT especifica o texto que irá aparecer dentro da label. Se colocarmos TEXT= esta e uma label, por exemplo o resultado será este: Figura 5 Exemplo de uma label. O atributo IMAGE deve conter como valor o nome e caminho de um ficheiro de imagem, por exemplo, c:\imagem.jpg. Os atributos ALIGNV e ALIGNH controlam o alinhamento do texto, esta funcionalidade é útil quando se tem uma imagem e texto dentro da label. Os valores suportados são para o ALIGNV: center alinha o texto ao centro bottom alinha o texto com o fundo top alinha o texto com o topo E para o ALIGNH: center texto alinhado ao centro right texto alinhado a direita left texto alinhado a esquerda Exemplos com alinhamentos diferentes, e uma imagem: ALIGNH= center e ALIGNV= center 11

15 Figura 6 Label com alinhamento Exemplo 1. ALIGNH= center e ALIGNV= bottom Figura 7 Label com alinhamento Exemplo 2. ALIGNH= right e ALIGNV= bottom Figura 8 Label com alinhamento Exemplo 3. O atributo BORDER, pode ter dois valores true ou false. Este atributo controla a existência ou não de uma linha de contorno. Figura 9 Label com contorno. 12

16 3.2.4 TextArea Esta tag é utilizada para inserir uma área de texto, que dispõe de barra de scroll se necessário. Figura 10 Caixa de Texto com Scroll Activado A sintaxe geral é: <TextArea NAME="texto" [TEXT="texto_a_colocar_na_caixa"] [ROWS="valor_inteiro"] [COLS="valor_inteiro"] [VISIBLE="true false"] [ENABLED= true false ]/> O atributo ROWS define o número de linhas que a caixa tem, se o texto não ultrapassar este número o scroll não é activado. Este valor tem de ser inteiro e maior que zero. O COLS é semelhante, a diferença é que controla o número de colunas que a caixa tem TextField Esta tag serve para definir pequenos campos de texto, semelhantes a uma TextArea, mas sem capacidade de scroll, e com suporte para apenas uma linha. A sintaxe geral deste componente é: <TextField NAME="text" [TEXT="texto_a_colocar"] [COLS="valor_inteiro"] [VISIBLE=" true false"] [ENABLED= true false ]/> A maior parte dos atributos são comuns com a TextArea, com excepção do ROWS que não é suportado MenuBar 13

17 Esta tag serve para indicar que os seus sub-componentes, ou seja os componentes definidos dentro da tag de abertura <Tag> e a de fecho </Tag>, pertencem a uma barra de menus. A sintaxe é muito simples: <MenuBar NAME="nome" [VISIBLE= true false ] [ENABLED= true false ]> </MenuBar> Presentemente é possível incluir dentro de uma barra de menus componentes que não sejam menus, como botões, mas não é recomendado Menu Esta palavra-chave é utilizada para definir um menu. Este componente deve ser colocado dentro de uma barra de menus, como sub-componente. A sintaxe geral deste componente é: <Menu NAME="File" [LABEL="File"] [VISIBLE= true false ] [ENABLED= true false ]> </Menu> Como facilmente se repara, este componente aceita sub-componentes, que deverão ser itens de menu. Embora, não seja aconselhado, é possível definir outros componentes como botões MenuItem O MenuItem é o componente que deve ser colocado dentro de um menu. Em funcionalidade é semelhante a um botão, suportando os mesmos atributos. <MenuItem NAME="nome" [LABEL="etiqueta"] [CLASS="classe" METH="nome_do_método"] [VISIBLE= true false ] [ENABLED= true false ]> Também suporta, tal como o botão, o atributo ACTION OUT 14

18 Esta tag serve para definir sub-janelas em relação a interface principal, que inicialmente estão escondidas. <OUT NAME="nome" [ENABLED= true false ]> </OUT> É possível definir como sub-componentes desta sub-janela, quaisquer outros componentes suportados, existe apenas um senão, o uso do atributo VISIBLE, não é suportado nesses sub-componentes. Também é possível especificar o tamanho da janela que irá ser criada por esta definição utilizando o atributo Size da forma já explicada. Estes componentes têm obrigatoriamente o RESIZE= false, não sendo possível alterar este valor. Exemplo: <OUT NAME="f1"> <Size WIDTH="100" HEIGHT="400"/> <CheckBox NAME="Check4" LABEL="CheckBox 4" SELECT="false"/> <CheckBox NAME="Check5" LABEL="CheckBox 5" SELECT="false /> <CheckBox NAME="Check6" LABEL="CheckBox 6" SELECT="true"/> <Button NAME="botao5" LABEL="Botao 5" CLASS="principal" METH="botao5_click"/> </OUT> 15

19 3.3 Posicionamento dos componentes O posicionamento dos componentes, nesta versão da package, é feito de forma sequencial em relação à definição. Quer isto dizer que os componentes são colocados na interface pela ordem em que foram definidos no XML. Utilizando a definição seguinte: <?xml version="1.0"?> <GUI NAME="Posicionamento" RESIZE="false"> <Size <CheckBox NAME="Check2" LABEL="CheckBox 2"/> <CheckBox NAME="Check1" LABEL="CheckBox 1"/> <Button NAME="botao2" LABEL="Botao 2"/> <TextField NAME="text1" TEXT="Caixa"/> <Button NAME="botao1" LABEL="Botao 1"/> </GUI> Podemos ver na Figura 11 que os componentes são colocados na interface pela mesma ordem que são definidos no ficheiro. Figura 11 Exemplo de posicionamento. A única excepção é o caso dos menus que são colocados no topo, independentemente de onde estão definidos. Se a interface for redimensionada, pelo 16

20 utilizador, o posicionamento dos componentes altera-se, como se pode ver na Figura 12. Figura 12 Interface redimensionada. Para evitar que isto aconteça a única solução é fixar o tamanho da interface através do atributo RESIZE= false na definição do GUI. 17

21 3.4 Atributos Especiais ACTION Este atributo é suportado em vários componentes, nomeadamente naqueles que logicamente desencadearão acções, como botões, itens de menu, e até caixas de verificação. É o atributo mais complexo de todos, vários outros atributos dependem dele, isto é, do valor que ele contém. Os valores suportados pelo atributo ACTION são: open saveas box exit msg Estes valores representam acções que são desencadeadas, automaticamente, após o componente, ao qual estão atribuídas, ter sido accionado. Um exemplo de um componente accionado é o botão depois de pressionado através do rato. O action suporta ainda que se coloque como valor o nome de um componente definido com OUT. Ao se definir uma acção desta forma, por exemplo, num botão quando este é accionado o componente é mostrado ao utilizador. open & saveas Quando o atributo ACTION tem o valor open, significa que o componente quando pressionado irá mostrar uma caixa de diálogo, para escolher um ficheiro. 18

22 Figura 13 Exemplo da janela de escolha de ficheiro. Não existem muitas diferenças entre o open e o saveas, essencialmente a única diferença é o título da janela que aparece. Ambos os valores implicam que se defina igualmente uma CLASS e um METH. Neste caso, ao contrário do botão, o método utilizado deve ser do tipo: Public void nome_do_metodo(file ficheiro) { } Quando esta acção é activada, depois do utilizador ter escolhido o ficheiro, este método irá ser executado tendo como parâmetro de entrada o ficheiro escolhido pelo utilizador. Caso o utilizador não tenha escolhido nenhum ficheiro, o parâmetro terá o valor null. Em relação à classe, o propósito é o mesmo já explicado anteriormente, serve para indicar onde se encontra a classe que possui o método que queremos chamar. A sintaxe geral destes atributos será então: <Componente NAME= nome ACTION= open saveas CLASS= classe METH= metodo /> 19

23 box Ao utilizar este valor pede-se que seja associada à activação do componente, o aparecimento de uma caixa, cujo tipo é variável e definido através do atributo TYPE= tipo. Quando se utiliza a acção box, é obrigatório utilizar o TYPE, os valores suportados pelo TYPE são: confirm - Caixa com uma mensagem e para pedir confirmação. input - Caixa com uma mensagem onde se pode introduzir valores. Exemplo com ACTION= box TYPE= confirm :: Figura 14 Caixa de confirmação. Exemplo com ACTION= box TYPE= input : Figura 15 Caixa de Introdução de Dados. É lógico que necessitamos de uma forma de receber ou os dados introduzidos ou a opção escolhida na confirmação, por esse motivo é necessário utilizar novamente os atributos CLASS e METH. Neste caso o METH terá de apontar para um método deste tipo: Public void nome_do_metodo(string valor) { } 20

24 Este método será executado após ter sido introduzido um valor ou escolhida uma opção numa destas caixas e esse valor é passado para o parâmetro de entrada como uma String. Os valores passados para String de entrada do método são os seguintes: Caixa de confirmação: o Yes A string irá conter o carácter 0. o No A string irá conter o carácter 1. o Fechar a Janela A string irá conter a sequência -1. Caixa de introdução de dados: o Ok A string irá conter os dados introduzidos, podem não ter sido introduzidos nenhuns dados, nesse caso a string está vazia. o Cancel e Fechar a Janela A string irá conter a sequência -1. Como se pode ver nas imagens anteriores, as caixas que aparecem possuem um título e uma mensagem. Para controlar o título e a mensagem recorre-se aos atributos MSG e TITLE, a sua utilização é muito simples, basta acrescentar MSG= texto da mensagem e TITLE= título da janela à definição do componente. Não são atributos obrigatórios, mas são recomendados, por motivos óbvios. A sintaxe geral para estes atributos é: <Componente NAME= nome ACTION= box TYPE= confirm input [MSG= mensagem ] [TITLE= titulo ] CLASS= classe METH= método /> msg O valor msg indica que queremos simplesmente mostrar uma caixa com uma mensagem. Tal como no caso anterior da box esta caixa tem uma mensagem e um título, pelo que também se utilizam aqui os atributos TITLE e MSG. 21

25 Figura 16 Exemplo de uma caixa de mensagem. A sintaxe geral de um componente com esta acção atribuída é: <Componente NAME= nome ACTION= msg [MSG= mensagem ] [TITLE= titulo ] /> Tal como no caso anterior o MSG e o TITLE são opcionais, mas não faz muito sentido deixá-los de lado pois o resultado será este: Figura 17 Exemplo de uma caixa de mensagem sem título nem mensagem. exit Este valor, quando atribuído, significa que se o componente for activado o programa termina, sem pedir confirmação nenhuma. Por outras palavras, se um botão tiver a seguinte definição: <Button NAME= botao_de_saida LABEL= sair ACTION= exit /> Após este botão ser pressionado o programa termina, sem pedir confirmação. A sintaxe é muito simples: <Componente NAME= nome ACTION= exit /> 22

26 4. Geração e interacção com a interface Para gerar uma interface é necessário defini-la em XML e usando a package criar os objectos e chamar os métodos necessários para construir a interface. Seguem-se alguns exemplos de como proceder para gerar interfaces e a descrição de todos os métodos relevantes para interagir com elas. 4.1 Exemplos Olá Mundo Utilizando as tags de componentes e atributos explicados anteriormente, define-se a interface que se quer utilizar, um exemplo de uma definição pode ser o seguinte: <GUI> <Size WIDTH="300" HEIGHT="300"/> <TextLabel NAME="etiqueta" TEXT="Ola Mundo" /> </GUI> O equivalente a um típico hello world mas usando uma interface gráfica. Figura 18 Olá Mundo versão com interface gráfica. O código em Java necessário para gerar esta janela é o seguinte: 23

27 import xil.*; public class Cliente { public static void main(string args[]) { BuildGUI g=new BuildGUI(args[0]); g.build(); } } Exemplo 2 Código simples de uma classe cliente. Pode-se ver logo no topo a linha import xil.*;, que torna disponível as classes da package xil para utilização. Mais abaixo no código vê-se a linha, BuildGUI g=new BuildGUI(args[0]) que consiste na declaração, criação e inicialização de um objecto BuildGUI, responsável pela construção da interface. O argumento args[0], consiste no nome do ficheiro XML que define a interface. Neste caso ele está a ser introduzido como argumento do programa mas, obviamente, é perfeitamente possível fixar o nome de forma estática dentro do código, se necessário. A última instrução g.build(); efectivamente constrói a interface e mostra-a. 24

28 4.1.2 Botão de saída Partindo desta definição em XML: <GUI> <Size WIDTH="200" HEIGHT="200"/> <TextLabel NAME="text1" TEXT="Exemplo de uma interface" /> <Button NAME="botao1" LABEL="Sair" ACTION="exit" /> </GUI> Utilizando o mesmo código Java que no exemplo anterior, é gerada a seguinte interface: Figura 19 Exemplo de um botão de saída. Conforme o que foi dito acerca do atributo ACTION pode-se verificar que a acção exit, atribuída ao botão, provoca a saída do programa sem confirmação Botão Abrir Usando esta definição em XML: <GUI> <Size WIDTH="300" HEIGHT="200"/> <TextLabel NAME="text1" TEXT="Exemplo de uma interface" /> <TextField NAME="tfield1" COLS="20" /> <Button NAME="botao1" LABEL="Abrir" ACTION="open" CLASS="ap_cliente.Cliente2" METH="botaoOpen"/> </GUI> 25

29 Esta definição já é mais complexa que as dos exemplos anteriores, identificase logo a utilização do atributo ACTION com o valor open que como foi dito indica que se quer abrir uma caixa de escolha de ficheiro, passando o nome desse ficheiro para o método definido com METH. A interface gerada por esta definição é a seguinte: Figura 20 Exemplo de um botão de abrir ficheiro. Após o botão ser pressionado aparece uma janela deste tipo: Figura 21 Janela de escolha de ficheiros. 26

30 Figura 22 Resultado da escolha de ficheiro. Como se pode ver o ficheiro escolhido foi escrito no campo de texto. Neste exemplo interessa analisar o código Java responsável por esta interface, especialmente porque se utiliza aqui o atributo ACTION que necessita de um método para onde devolver o valor que neste caso indica o nome de um ficheiro. O código responsável por esta aplicação é o seguinte: import java.io.file; import xil.*; public class Cliente2 { private static BuildGUI g=null; public static void main(string args[]) { g=new BuildGUI(args[0]); g.constroi(); } public void botaoopen(file fich) { g.setcomponentvalue("tfield1",fich.tostring()); } } Exemplo 3 Código cliente com interacção. Este código tem já algumas chamadas aos métodos da package, e é ligeiramente mais complexo que o dos exemplos anteriores. Uma das primeiras diferenças é que agora o objecto g é declarado como atributo da classe, para 27

31 possibilitar o acesso dos restantes métodos da classe. O código responsável pela inicialização e construção da interface encontra-se no método main e é igual ao dos exemplos anteriores. A novidade neste código é a função botaoopen(file ), que está definida no ficheiro XML como receptora do ficheiro escolhido pelo utilizador e a chamada que é feita ao método setcomponentvalue(string,string) da classe BuildGUI. O método botaoopen que é indicado no XML, como se pode observar através dos atributos CLASS e METH, recebe na variável fich o nome do ficheiro seleccionado. De seguida esse nome é convertido para String e escrito no TextField através do método setcomponentvalue(nome_do_componente,valor);. Este aceita como parâmetros de entrada, o nome do componente que queremos alterar o valor e uma String que contém esse valor que será colocado no componente. Este e os restantes métodos para interagir com os componentes serão descritos mais adiante. 28

32 4.2 Métodos Existem métodos que servem, essencialmente para gerar e interagir com os componentes da interface. Seguem-se as descrições dos métodos suportados nesta versão da package Geração Como se pôde ver nos exemplos mostrados anteriormente, a geração da interface em Java é bastante simples, consiste apenas na chamada a um único método, antecedida da criação de um novo objecto BuildGUI. O parâmetro do construtor é uma String que corresponde ao nome do ficheiro XML a utilizar. BuildGUI objectobuildgui=new BuildGUI(ficheiro_xml); objectobuildgui.buildi(); É durante a criação do novo objecto BuildGUI, que são detectados os erros que possam existir na estrutura do ficheiro XML. Erros tais como, caracteres inválidos, tags não fechadas, entre outros. O método build() devolve um valor booleano que indica o sucesso ou insucesso da geração da interface. O protótipo deste método é: boolean constroi() Verificação de estados Estes métodos são semelhantes, aceitam todos uma String com o nome do componente como parâmetro de entrada e devolvem um valor booleano indicando o estado da propriedade que estamos a verificar. 29

33 Os protótipos destes métodos são: boolean iscomponentenabled( String nome) boolean iscomponentvalid(string nome) boolean isvisible(string nome) Utilizar qualquer um destes métodos é extremamente simples, e normalmente consiste numa instrução como esta: If (objectobuildgui.isvisible( caixa1 )==true) Instruções; O iscomponentenabled verifica se um objecto está activo, propriedade Enabled. É diferente de, por exemplo, um botão quando é activado, este activo refere-se ao utilizador poder interagir com o componente. Normalmente, para representar o estado inactivo de um componente, de forma gráfica, o conteúdo deste ou mesmo o próprio componente, fica com uma cor acinzentada. Por exemplo, utilizando a interface do ponto 4.1.3, um TextField inactivo fica desta forma: Figura 23 TextField Inactivo. Os dois métodos restantes são também muito simples de perceber, o isvisible indica se o componente é visível, propriedade Visible, e o iscomponentvalid indica se o componente é válido ou seja se foi gerado a partir do XML. Estes métodos são válidos para todos os componentes. 30

34 4.2.3 Alteração de estados Das propriedades mencionados no ponto anterior, apenas é possível alterar o estado da Enabled e da Visible. Os métodos que controlam o estado têm nomes semelhantes em relação aos de verificação, mudando apenas o prefixo. Passa de is para set. Os métodos são: void setcomponentenabled(string nome, boolean estado) void setvisible(string nome, boolean estado) O setvisible controla a propriedade Visible, o método aceita o nome do componente e o estado true ou false como parâmetros de entrada. O setcomponentenabled funciona da mesma forma mas para a propriedade Enabled. Estes dois métodos são válidos para todos os componentes Obtenção de valores Alguns dos componentes possuem valores que são possíveis de obter através do método getcomponentvalue. A forma do método é a seguinte: String getcomponentvalue(string nome) O parâmetro de entrada é como habitual, o nome do componente. A String que é devolvida contém o valor do componente, valor esse que depende do tipo de componente. A seguinte relação indica quais os componentes e o valor devolvido em cada caso. 31

35 Componentes TextField TextArea TextLabel CheckBox Valor devolvido como String O texto que o componente contém. true ou false, isto é, seleccionada ou não Modificação de valores É possível através dos métodos, descritos de seguida, alterar os valores de alguns componentes. Os métodos que permitem alterar os valores são: void void setcomponentvalue(string nome, String valor) addcomponenttext(string nome, String texto) O primeiro método o setcomponentvalue funciona de maneira inversa à do getcomponentvalue. A lista de componentes suportados é igual, na seguinte relação descreve-se o que deverá conter a String valor para cada um dos componentes. Componentes TextField TextArea TextLabel CheckBox Valor introduzido como String O texto que se quiser colocar no campo. true ou false, isto é, seleccionada ou não. No caso dos componentes de texto, ao utilizar este método o texto que lá existe é completamente substituído pelo novo texto. O segundo método, addcomponenttext, serve para adicionar texto a um componente que o suporte. De momento o único componente disponível que suporta este método é a TextArea. A utilização é simples, colocamos o nome do componente e uma String com o texto que se quer acrescentar. 32

36 4.2.6 Interacção com o utilizador Nos casos em que seja necessário pedir valores ou enviar uma mensagem ao utilizador da aplicação, pode-se utilizar o método aqui descrito. String msgbox(string titulo,string mensagem, String tipo) Este método pode criar uma caixa de mensagem, com um titulo e uma mensagem, que pode ser de três tipos diferentes, consoante o valor introduzido no parâmetro tipo. Estes valores são semelhantes aos valores do atributo TYPE. confirm A caixa que aparece é de confirmação, tem dois botões YES e NO. input Com este tipo a caixa é de introdução de dados, possui um campo onde o utilizador pode escrever. msg Este tipo de caixa é somente para transmitir informação ao utilizador, só possui um botão de OK. Os valores devolvidos pelo método são diferentes para cada tipo de caixa: Caixa de confirmação Acção: Conteúdo da String de retorno: Yes O carácter 0 No O carácter 1 Fechar a Janela A sequência -1 Caixa de introdução Acção: Conteúdo da String de retorno: OK O carácter 0 Cancel Fechar a Janela A sequência -1 Acção: OK Fechar a Janela Caixa de mensagem Conteúdo da String de retorno: null 33

37 5. Limitações Na versão presente da package, como seria de esperar de uma versão precoce, existem limitações. Não é possível controlar o posicionamento dos componentes com precisão na janela. Certos componentes, como as áreas de texto, se tiverem um tamanho grande podem sair da janela e não ser possível visualizar correctamente. Quando se utiliza o atributo VISIBLE é possível que outros componentes, ao redimensionar a janela, passem a ocupar o espaço dos componentes com VISIBLE= false. 34

38 6. Tabelas de referência 35

39 6.1 Tabela de componentes e atributos suportados Tags/Palavras-Chave Atributos GUI Size Button CheckBox ImageLabel & TextLabel TextArea TextField MenuBar Menu MenuItem OUT ACTION ALIGNH ALIGNV BORDER CLASS COLS ENABLED HEIGHT IMAGE LABEL METH NAME RESIZE ROWS SELECT TEXT VISIBLE WIDTH 36

40 6.2 Tabela do atributo ACTION Atributos Correspondentes Valores CLASS METH TYPE MSG TITLE open & saveas box confirm Ou input msg exit Esta tabela é uma relação entre os valores do ACTION e os atributos suportados em cada valor. 37

41 6.3 Tabela de métodos Métodos Button CheckBox boolean iscomponentenabled( String nome) boolean iscomponentvalid(string nome) boolean isvisible(string nome) void setcomponentenabled(string nome, boolean estado) void setvisible(string nome, boolean estado) ImageLabel & TextLabel Componentes TextArea TextField MenuBar Menu MenuItem OUT String getcomponentvalue(string nome) void setcomponentvalue(string nome, String valor) void addcomponenttext(string nome, String texto) Esta tabela indica quais os componentes suportados por cada método 38