Embed Size (px)
Citation preview
Criação Dinâmica de Interfaces Gráficas Definidas em XML
Manual 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.º 17325
Faro, 4 de Julho de 2003
Índice
ÍNDICE ...................................................................................................................................................................I
ÍNDICE DE FIGURAS........................................................................................................................................ II
ÍNDICE DE EXEMPLOS ................................................................................................................................... II
1. INSTALAÇÃO............................................................................................................................................. 1
2. COMPONENTES........................................................................................................................................ 2
3. DEFINIÇÃO EM XML............................................................................................................................... 5
3.1 Palavras-Chave da Interface ..................................................................................................................7 3.1.1 GUI ...................................................................................................................................................7 3.1.2 Size ..................................................................................................................................................7
3.2 Palavras-Chave dos Componentes .......................................................................................................9 3.2.1 Button...............................................................................................................................................9 3.2.2 CheckBox ......................................................................................................................................10 3.2.3 ImageLabel & TextLabel .............................................................................................................10 3.2.4 TextArea ........................................................................................................................................13 3.2.5 TextField........................................................................................................................................13 3.2.6 MenuBar ........................................................................................................................................13 3.2.7 Menu ..............................................................................................................................................14 3.2.8 MenuItem ......................................................................................................................................14 3.2.9 OUT................................................................................................................................................14
3.3 Posicionamento dos componentes ......................................................................................................16 3.4 Atributos Especiais .................................................................................................................................18
3.4.1 ACTION .........................................................................................................................................18 open & saveas ................................................................................................................................18 box ..................................................................................................................................................20 msg .................................................................................................................................................21 exit ..................................................................................................................................................22
4. GERAÇÃO E INTERACÇÃO COM A INTERFACE .......................................................................... 23
4.1 Exemplos .................................................................................................................................................23 4.1.1 Olá Mundo.....................................................................................................................................23 4.1.2 Botão de saída .............................................................................................................................25 4.1.3 Botão Abrir ....................................................................................................................................25
4.2 Métodos ...................................................................................................................................................29 4.2.1 Geração .........................................................................................................................................29 4.2.2 Verificação de estados ................................................................................................................29 4.2.3 Alteração de estados ...................................................................................................................31 4.2.4 Obtenção de valores....................................................................................................................31 4.2.5 Modificação de valores................................................................................................................32 4.2.6 Interacção com o utilizador .........................................................................................................33
5. LIMITAÇÕES ........................................................................................................................................... 34
6. TABELAS DE REFERÊNCIA................................................................................................................. 35
6.1 Tabela de componentes e atributos suportados ................................................................................36 6.2 Tabela do atributo ACTION...................................................................................................................37 6.3 Tabela de métodos.................................................................................................................................38
Manual
ii
Í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 1. 12 Figura 7 – Label com alinhamento Exemplo 2. 12 Figura 8 – Label com alinhamento Exemplo 3. 12 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. ......................................................................................................................... 5 Exemplo 2 – Código simples de uma classe cliente........................................................................................... 24 Exemplo 3 – Código cliente com interacção. ..................................................................................................... 27
Manual
1
1. Instalação
Para utilizar esta package é necessário ter o SDK Java1 instalado, e o parser
XML Xerces2. 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, http://java.sun.com 2 Disponível no site http://xml.apache.org
Manual
2
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 minimizar3, maximizar4, 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
3
4 5 6
7
Manual
3
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.
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.
1
2
Manual
4
Utilizando a package desenvolvida é possível definir todos os componentes
ilustrados anteriormente, e outros que serão introduzidos mais adiante, num ficheiro
XML.
Manual
5
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:
Exemplo 1 – Definição em XML.
<?xml version="1.0"?>
<GUI NAME="Janela">
<Size WIDTH="300" HEIGHT="100"/>
</GUI>
Manual
6
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 Codificação Unicode 8 bits UTF-16 Unicode 16 bits, suporta caracteres
acentuados EUC-JP Para caracteres japoneses
US-ASCII Tradicional código ASCII
O editor utilizado para criar o ficheiro XML tem de suportar a codificação utilizada.
Manual
7
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.
3.1.1 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”]>
<Componente1 />
…………………………
<ComponenteN />
</GUI>
3.1.2 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”/>
Manual
8
Por Exemplo:
<Size WIDTH=”800” HEIGHT=”600”/>
Define um tamanho para a janela de 800x600.
Manual
9
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.
3.2.1 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 é,
Manual
10
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”]/>
3.2.2 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.
3.2.3 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
Manual
11
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”
Manual
12
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.
Manual
13
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.
3.2.5 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.
3.2.6 MenuBar
Manual
14
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.
3.2.7 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.
3.2.8 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.
3.2.9 OUT
Manual
15
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>
Manual
16
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
Manual
17
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.
Manual
18
3.4 Atributos Especiais
3.4.1 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.
Manual
19
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” />
Manual
20
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)
{
…………………………
}
Manual
21
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.
Manual
22
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” />
Manual
23
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
4.1.1 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:
Manual
24
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.
import xil.*;
public class Cliente
{
public static void main(String args[])
{
BuildGUI g=new BuildGUI(args[0]);
g.build();
}
}
Manual
25
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.
4.1.3 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>
Manual
26
Esta definição já é mais complexa que as dos exemplos anteriores, identifica-
se 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.
Manual
27
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:
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
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());
}
}
Manual
28
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.
Manual
29
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.
4.2.1 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()
4.2.2 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.
Manual
30
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.
Manual
31
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.
4.2.4 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.
Manual
32
Componentes Valor devolvido como String TextField TextArea TextLabel
O texto que o componente contém.
CheckBox “true” ou “false”, isto é, seleccionada ou não.
4.2.5 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 setComponentValue(String nome, String valor)
void 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 Valor introduzido como String TextField TextArea TextLabel
O texto que se quiser colocar no campo.
CheckBox “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.
Manual
33
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”
Caixa de mensagem Acção: Conteúdo da String de retorno: OK Fechar a Janela
null
Manual
34
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”.
35
6. Tabelas de referência
36
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 �
37
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.
38
6.3 Tabela de métodos Componentes
Métodos Button CheckBox ImageLabel & TextLabel
TextArea TextField MenuBar Menu MenuItem OUT
boolean
isComponentEnabled( String nome) � boolean
isComponentValid(String nome) � boolean isVisible(String nome)
� void
setComponentEnabled(String nome,
boolean estado) �
void
setVisible(String nome, boolean estado) � 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
