Trabalho 3a: Estruturas de controlo em Smalltalk

(1)

F. Sustelo, H.Daniel e J. Valente de Oliveira

http://w3.ualg.pt/~jvolivei/poo/poo.html POO Lab 3 - 1/3

Trabalho 3a: Estruturas de controlo em Smalltalk

Nesta aula vamos recuperar alguns dos problemas abordados em Programação I. Na resolução das questões abaixo utilize os princípios e as técnicas de Programação Orientada por Objectos. Compare as soluções encontradas agora com as soluções obtidas em Programação I.

1. Escreva o código Smalltalk que permita calcular todos os divisores de um número inteiro. Utilize a classe Dialog para fazer a entrada de dados, escrevendo, p.e.

aString := (Dialog request: 'Introduza um número').

Os resultados do programa devem ser apresentados no Transcript. Exemplo de funcionamento:

Introduza um número: 24

Os divisores de 24 são 1 2 3 4 6 8 12 24

2. Escreva o código em Smalltalk que dado um array com 10 inteiros indique quantos são pares, quantos são ímpares, quantos são positivos e quantos são negativos.

3. Quantas expressões de código Smalltalk necessitaria para ler um inteiro e responder o número de dígitos existentes nesse inteiro? Exemplo de funcionamento:

Introduza um inteiro:137 137 tem 3 dígitos.

4. Escreva o código que permita ler um byte e determine quantos zeros e quantos uns existem nesse byte. Exemplo de funcionamento:

Introduza um n mero binário de oito dígitos: 00101100

(2)

http://w3.ualg.pt/~jvolivei/poo/poo.html POO Lab 3 - 2/3

Trabalho 3b: Modelação e implementação

0. Considere os príncipios e as técnicas de Programação Orientada por Objectos e escreva o código Smalltalk que faça o seguinte: Gere e guarde um número aleatório entre 0 e 100; Peça ao utilizador para adivinhar o número gerado; Avise o utilizador se o número que propôs é maior, menor ou igual ao número gerado: repita o pedido e o aviso até que o utilizador acerte no número gerado.

Sugestões:

Para a geração de número pseudo-aleatórios utilize um objecto da classe

Random

Para a entrada e saída de dados utilize os métodos da classe Dialog,

nomeadamente o warn: e o request:initialAnswer:. Consulte o capítulo 24 do VisualWorks Application Develloper’s Guide.

1. Considere os princípios e as técnicas de Programação Orientada por Objectos e escreva o código que permita converster numeração Árabe em numeração Romana.

Símbolos usados na numeração Romana: Árabe Romano 1 I 5 V 10 X 50 L 100 C 500 D 1000 M

Os Romanos combinavam os símbolos acima para representar quantidades. Por exemplo, VII significava 5+1+1, ou seja 7, em numeração Árabe.

Contudo, os Romanos consideravam que VIIII já era pouco prático pelo que utilizam a regra: Se o I vem depois do V então soma (VI é 6). Mas se o I vem antes do V então subtrai (IV é 4).

A regra diz que se pode somar até ao máximo de três (VIII é 8), mas só se pode subtrair um (IX é 9). Esta regra é válida também para o símbolo X (LXXX é 80 e XC é 90) e para o símbolo C (DCCC é 800 e CM é 900).

Com base nos símbolos disponíveis e nesta regra, os Romanos podiam apenas escrever números entre 1 e 3999.

O programa deve converter apenas números entre 1 e 3999, considerando inválidos outros números. Exemplos:

MDCCCLXXXVIII é 1000+500+100+100+100+50+10+10+10+5+1+1+1 ou 1888

(3)

F. Sustelo, H.Daniel e J. Valente de Oliveira

http://w3.ualg.pt/~jvolivei/poo/poo.html POO Lab 3 - 3/3 2. Para a implementação de um editor gráfico é necessário guardar e manipular figuras geométricas a duas dimensões. O editor em questão suporta rectas (definidas por dois pontos representativos), triângulos (representados por três pontos representativos), rectângulos (representados por quatro pontos representativos), polígonos (representados por um número finito de pontos representativos) e circunferências (representadas por um ponto e um raio).

Todas as figuras geométricas deverão ser capazes de responder o seu perímetro – O perímetro de uma circunferência, pc, é dado por pc=2r, o perímetro de qualquer

outra figura fechada é dado pela soma do comprimento dos seus lados. Adicionalmente, um rectângulo deverá saber responder se é, ou não, um quadrado e um triângulo deverá saber se é, ou não, um triângulo rectângulo.

Sugestão: Num triângulo rectângulo, duas das rectas definidas pelos seus pontos são rectas perpendiculares.

Ignore a interface gráfica com o utilizador, considere os princípios e as técnicas da POO, o seu próprio conhecimento sobre o domínio do problema e proponha:

a) Um diagrama de classes em UML com as classes relevantes, e seus relacionamentos, para a resolução do problema;

(4)

http://w3.ualg.pt/~hdaniel/poo POO Lab 3C - 1/9

Trabalho 3c:

Desenvolvimento de interfaces gráficos de utilizador II (VisualWorks 7.x)

Enunciado

1. Clicar no botão com um cavalete ou seleccionar Painter → New Canvas Apareceram três janelas :

i) Paleta (Palette)

ii) Ferramentas de tela (GUI Painter Tool)

iii) Tela sem nome (Unlabeled Canvas) – onde irá construir o seu GUI

Nesta fase vai ser construído um interface para o utilizador muito simples, que apresenta a data corrente e permite escrevê-la no Transcript. Esta janela terá também um menu que permitirá abrir outra janela:

1.1. Para escrever o nome na barra de título, clicar no fundo da tela e no GUI

Painter tool alterar a propriedade String, da tabela Basics, para: Main

Window.

Nota1: A posição e tamanho da janela podem ser alteradas nas propriedades da

tabela Position / Size .

Nota2: Para que as alterações sejam aplicadas clicar no botão Apply.

1.2. Seleccionar na Pallete o widget Input Field e colocar na janela como mostra a figura. No GUI Painter tool, colocar as propriedades da tabela Basics:

Aspect: dataCorrente (método que actualiza o Input

Field com a data corrente) Type: Date

e da tabela Details:

Align: Left

Read Only: Checked

(5)

H. Daniel e A. P. Costa

http://w3.ualg.pt/~hdaniel/poo POO Lab 3C - 2/9 1.3. Colocar agora um Action Button com as propriedades:

String: Escrever

Action: escreveTranscript (método que imprime o valor do

Input Field, no Transcript)

1.4. É altura de gravar a imagem. Seleccionar File → Save image →

1.5. Verificar se o canvas está visível. Clicar no fundo deste para seleccionar a janela e todos os seus objectos. No menu de contexto seleccionar Install. Aparece uma janela de diálogo Install on Class pedindo para especificar o nome da classe da aplicação, que será: GuiInterface. Repare que aparece uma outra palavra windowSpec que corresponde a um método de classe. Clique em OK.

Nota: O VisualWorks assume que a interface inicial ou janela principal de

uma aplicação é definida naquele método. Assim para abrir a janela principal e executar a aplicação por exemplo a partir do workspace basta enviar para a classe a mensagem open:

GuiInterface open

Mas se o método tiver um nome diferente como por exemplo

mainWindow, a mensagem a enviar será:

GuiInterface openWithSpec: #mainWindow

1.6. Após clicar em OK, aparece outra janela de diálogo. O painel da esquerda contém uma lista de espaços nominativos (namespaces). O espaço nominativo Smalltalk aparece seleccionado. Partindo do principio que o nome da classe gráfica GuiInterface será sempre única pode ser armazenada neste espaço nominativo, senão será melhor armazená-la num espaço nominativo próprio.

As aplicações construídas no UIPainter são definidas quase sempre como subclasses de ApplicationModel. Clicar em OK.

1.7. Clicar no fundo do canvas e depois no menu de contexto -> Define. Verificar se os 2 métodos aparecem seleccionados e se a caixa Add Initialization também. Clicar em OK.

1.8. Faltam definir os 2 métodos de instância. Clicar no fundo do canvas e depois no

menu de contexto -> Browse. No browser o painel superior esquerdo

apresenta a hierarquia de classes, o central apresenta as categorias pelas quais os métodos estão organizados, e o direito o nome dos métodos. No painel inferior aparece a definição do que está seleccionado.

1.9. Aparece seleccionado o botão de selecção de tabela instance para definição de métodos de instância. Existem duas categorias para os métodos, actions e

aspects. Clicando em actions aparece a definição dos métodos para as acções

dos botões.. Clicando em aspects aparecem os métodos que supostamente devem retornar o valor do respectivo aspect como por exemplo os Input Fields.

(6)

1.10. Na categoria actions vai ser definido o método para escrever o valor da

dataCorrente no Transcript:

escreveTranscript

Transcript show: dataCorrente value printString.

1.11. Na categoria aspects vai ser definido o método para actualizar o valor da data corrente no Input Field. Este já foi previamente definido ao se escolher a opção

Define do menu de contexto do canvas:

dataCorrente

"This method was generated by UIDefiner. Any edits made here may be lost whenever methods are automatically defined. The initialization provided below may have been preempted by an initialize method."

^dataCorrente isNil

ifTrue: [dataCorrente :=

(Core.Date readFromString: '10/12/2004') asValue] ifFalse:

(7)

Repare-se que na linha correspondente ao caso em que dataCorrente isNil, isto é se o valor do Input Field for nulo é colocada uma data nela partir de uma string com a data do dia em que a aplicação foi implementada.

Mas o que se pretende é que a data a mostrar seja a data actual do sistema. Para isso essa linha (todo o bloco correspondente ao ifTrue:) deve ser modifica para:

ifTrue: [dataCorrente := Date today asValue]

No entanto como adverte o comentário este método é automaticamente criado pelo UIDefiner, quando se definem os métodos com a opção Define do menu

de contexto do canvas, por isso não se deve voltar a definir métodos após alterar

este último. 1.12. Gravar a imagem.

1.13. Para testar a aplicação clicar no fundo do canvas e depois no menu de contexto -> Open. Ou no workspace ou no Transcript escrever:

GuiInterface open

2. Vai ser agora criado o menu que permite abandonar a aplicação ou abrir uma janela secundária. A partir do GUI Painter tool seleccionando o menu Tools -> Menu

(8)

2.1. Para criar um novo menu seleccionar Edit -> New Item e na propriedade

String escrever o nome do menu e preceder a tecla de atalho com um &:

String: &Menu

2.2. Para colocar items nos menus ou outros sub-menus seleccionar Edit -> New

Submenu Item. Neste caso vai-se ter dois items, um para abrir uma nova janela

e outro para sair da aplicação. Opcionalmente pode-se colocar um separador antes da opção sair:

2.2.1. Edit -> New Submenu Item e dar as propriedades:

String: &Abrir

Value: #abrir (método usado para abrir a janela secundária)

2.2.2. Edit -> New separator

2.2.3. Edit -> New Submenu Item e dar as propriedades:

String: &Sair

Value: #closeRequest (método pré-defindo para fechar uma janela)

No campo Value de cada Submenu item pode ser referido um método a exectuar. Para o primeiro caso é referido o método abrir, o qual deverá ser definido pelo utilizador. Para o segundo basta apenas referenciar o método pré-definido closeRequest para fechar a janela.

2.3. O menu deverá agora ser instalado na classe da aplicação. No Menu editor seleccionar Menu -> Install. Aparece outra vez uma janela de diálogo Install on

Class pedindo para especificar o nome da classe da aplicação, que será a

mesma: GuiInterface. No Input Field em baixo (or enter new selector) colocar o nome do método e classe onde será definido o menu: menu, e clicar em OK.

2.4. Agora no UIPainter tool, seleccionar na árvore de objectos à esquerda a raiz (Main window:). Na tabela Basics à esquerda, painel Menu Bar colocar uma marca na Check Box enable e no Input Field Menu: colocar o nome do metodo onde este foi instalado, isto é: menu.

2.5. Como as propriedades da janela principal foram alteradas é necessário voltar a instalá-la. Para isso clicar no fundo dessa janela e no menu de contexto ->

Install. Não se no entanto deve voltar a definir os métodos dos objectos

contidos na janela (menu de contexto -> Define ), pois além de não terem sido alteradas as propriedades desses objectos, irá eliminar as alterações feitas no método dataCorrente (ponto1.11).

2.6. Após gravar a imagem pode-se testar outra vez a aplicação e visualizar o menu, no entanto a segunda janela não pode ser ainda aberta, pois não foi definida.

(9)

3. Falta criar a janela secundária que deverá ser aberta pela primeira opção do menu, método abrir.

3.1. Assumindo que esta janela será definida pelo método secWin pode-se implementar já o método abrir da categoria actions :

abrir

self openInterface: #secWin 3.2. Gravar Imagem.

A janela terá um Input Field que servirá para mostrar o estado de uma Check Box e dois Rádio Button.

3.3. Clicar no botão com um cavalete ou seleccionar Painter → New Canvas, para abrir uma nova janela.

3.4. Para escrever o nome na barra de título, clicar no fundo da tela e no GUI

Painter tool alterar a propriedade String para: Child Window.

3.5. Seleccionar na Pallete o widgets Input Field e colocar na janela como mostra a figura. No GUI Painter tool, colocar as propriedades da tabela Basics:

Aspect: text (método que retorna o valor)

Type: String

3.6. Colocar agora uma Check Box com as propriedades:

String: Item

Aspect: Check (método que retorna o valor)

3.7. Colocar o primeiro Radio Button com as propriedades:

String: Item um

Aspect: Radio (método que retorna o valor)

(10)

http://w3.ualg.pt/~hdaniel/poo POO Lab 3C - 7/9 3.8. Colocar o segundo Rádio Button com as propriedades:

String: Item dois

Aspect: Radio (método que retorna o valor)

Select: #Dois (valor desta opção)

Reparar que ambos os Radio Buttons devem referenciar o mesmo método em

Aspect de modo que funcionem em conjunto.

Estes métodos de instância da categoria aspects serão automaticamente definidos pelo UIDefiner, não sendo necessário que o programador os defina. Os que serão necessários definir pelo programador são os métodos que correspondem às acções dos botões.

3.9. Colocar um Action Button para mostrar o valor da Check Box no Input Field, com as propriedades:

String: Mostra Check

Action: mostraCheck (método que imprime o valor da Check

Box, no Input Field)

3.10. Colocar outro Action Button, agora para mostrar o valor dos Radio Buttons no

Input Field, com as propriedades:

String: Mostra Radio

Action: mostraRadio (método que imprime o valor dos Radio

Buttons , no Input Field)

3.11. Gravar a imagem.

3.12. Verificar se o canvas está visível. Clicar no fundo deste para seleccionar a janela e todos os seus objectos. No menu de contexto seleccionar Install. Aparece uma janela de diálogo Install on Class pedindo para especificar o nome da classe da aplicação, que será a mesma: GuiInterface. No Input Field em baixo (or enter new Selector:) colocar o nome do método de classe onde será definida esta janela secundária, que como já foi referido será: secWin, e clicar em OK.

Nota: Para abrir uma janela secundária ver a implementação do método abrir

no ponto 3.1

3.13. Clicar no fundo do canvas e depois no menu de contexto -> Define. Verificar se os 5 métodos aparecem seleccionados e se a caixa Add Initialization também. Clicar em OK.

3.14. Faltam implementar os 2 métodos que definem a acção dos botões para escrever o resultado da Check Box e dos Radio Buttons . Clicar no fundo do canvas e depois no menu de contexto -> Browse.

(11)

mostraCheck

text value: (Check value) printString

mostraRadio

text value: (Radio value) printString 3.16. Gravar imagem.

3.17. Pode-se testar independentemente esta janela clicando no fundo do canvas e depois no menu de contexto -> Open.

3.18. Para testar a aplicação completa, no workspace ou no Transcript digitar: GuiInterface open

ou

GuiInterface openWithSpec: #windowSpec

4. Vai-se agora criar um modulo externo (parcela) para a aplicação. Esta parcela pode ser usada para carregar o programa noutra imagem. Depois da parcela criada não será necessário manter a imagem de desenvolvimento (habitualmente de tamanho elevado).

4.1. Abrir o Browser de sistema (Browse → System) e escolher Browse →→ → Parcel. 4.2. O painel superior esquerdo deverá mostra todas as parcelas activas. Abrir o

menu de operação ou de contexto e seleccionar New... . Aparece uma janela a pedir o nome da nova parcela. Escrever GuiTutor e clicar em OK.

4.3. De seguida seleccionar ***Unparceled*** na 1ª Janela de cima à esquerda, e na 2ª janela escolher a classe GuiInterface. No menu de contexto seleccionar Move

→

→ Selected to Parcel.

4.4. Para escrever a parcela para um ficheiro seleccionar a parcela GuiTutor, abrir o menu de contexto e seleccionar Save... . Aparece uma janela de diálogo. Escrever o nome do ficheiro, por exemplo o mesmo da parcela: GuiTutor e clicar em OK.

4.5. Após gravação, aparecerão dois ficheiros na directoria da imagem de trabalho,

GuiTutor.pcl e GuiTutor.pst. O primeiro consiste no binário da parcela e o

segundo na fonte em XML.

4.6. Para abrir esta parcela noutro sistema, abrir o Browser do sistema (Browse

→

→ System) e escolher Browse →→ Parcel. Na 1ª Janela de cima à esquerda, no

(12)

5. Para re-abrir ambos os canvas e o menu, seleccionar o Browser de Recursos (Painter→→ Resource Finder) e a classe que os contém: GuiInterface. Depois Seleccionar um dos canvas ou o menu, e clicar em Edit.

Nota Final: Mais informação sobre o desenho de Interfaces gráficos de utilizador, pode

ser encontrada no manual que acompanham a distribuição: \vw7.1\doc\GuiDevGuide.pdf