• Nenhum resultado encontrado

Linguagem de Programação IV Interface Gráfica 02

N/A
N/A
Protected

Academic year: 2021

Share "Linguagem de Programação IV Interface Gráfica 02"

Copied!
59
0
0

Texto

(1)

Linguagem de Programação IV

Interface Gráfica 02

(2)

Tópicos

Classe Item

TextField

StringItem

ImageItem

ChoiceGroup

DateField

Gauge

Spacer

CustomItem

2

(3)

Introdução

(4)

Introdução

4

O foco neste material será sobre os elementos Item

Display Um objeto display por MIDlet

Displayable

Command Ticker

Screen Canvas Graphics

TextBox List Alert Form Item

ChoiceGroup DateField TextField Gauge ImageItem StringItem

disponível em subclasses do Displayable

Métodos para desenhar no Canvas

Choice (interface)

(5)

Classe Item

(6)

Item

6

Item é um componente que pode ser adicionado em um

objeto Form.

É a superclasse de todos os elementos que podem ser

adicionados aos forms

Não é uma subclasse de Form

Aparece abaixo de Form na figura para dar a entender

que as subclasses de Item são exibidas em um objeto Form.

A classe Item mantém o título dos elementos e alguns

(7)

Item

7

A classe ItemStateListener trabalha junto com um objeto

Item.

Para processar eventos em um objeto Item, basta registrar

um “receptor” a receber uma mensagem quando um

evento ocorrer

O destinatário da mensagem é o método

itemStateChanged()

Permite saber qual Item mudou e decidir qual ação gostaria

de executar

(8)

Item

Layout

8

Tamanho da tela exige bons layouts

Que não sobrecarreguem o dispositivo e não dificultem a

vida do usuário

Há 2 formas de se definir layout de telas MIDP

Montar a tela e deixar com que o gerenciador de

aplicação posicione os elementos

Usado com componentes de alto nível

Definir a posição real dos componentes em tela

Programação em baixo nível (onde se tem acesso às posições

detalhadas em tela) – muito usado em jogos

(9)

Item

Layout

9

Utilizaremos a primeira opção, deixando que o

gerenciador cuide do layout

Podemos, entretanto, usar diretivas e definir a posição

esperada dos itens

Horizontal: LAYOUT_LEFT, LAYOUT_RIGHT e LAYOUT_CENTER

Vertical: LAYOUT_TOP, LAYOUT_BOTTOM e LAYOUT_VCENTER

O método setLayout() define o tipo de layout

(10)

Item

10

Principais métodos relacionados aos itens

Método

Descrição

void addCommand(Command cmd)

Adiciona um comando ao item

void removeCommand(Command cmd)

Remove um comando de item

String getLabel()

Retorna o título (exibido) do item

void setLabel(String label)

Define um título para o item

int getLayout()

Retorna qual tipo (diretiva) layout

void setLayout(int diretiva)

Estabelece qual diretiva de layout o item utiliza

void setItemCommandListener

(11)

Item

Listener e Elementos de Item

11

É possível associar um listener para monitorar o uso do

item ou associar-lhe um comando, e tratar esse

comando.

Monitoramento (ex: algo sendo digitado em um TextField)

-ItemStateListener

Invoca o método ItemStateChanged(Item i) sempre que o item for

usado

(12)

Item

Listener e Elementos de Item

12

Método addCommand()

Vincula um comando a um item

O listener é representado pela interface ItemCommandListener

Invoca o método commandAction(Command c, Item i)

Deve ser implementado na classe que representará o listener

Método commandAction é idêntico ao utilizado para comandos

(13)

Item

Listener e Elementos de Item

13

public class Teste extends MIDlet implements ItemCommandListener, ItemStateListener {

private Display display;

private Form form;

private Command comando1;

public void startApp() {

display = Display.getDisplay(this);

form = new Form(“Hello World!”);

comando1 = new Command(“Comando 1”, Command.ITEM, 0); StringItem item = new StringItem(null, “Hello Fulano”); item.addCommand(comando1);

item.setItemCommandListener(this);

form.setItemStateListener(this);

form.append(item);

display.setCurrent(form); }

public void pauseApp(){ }

public void destroyApp(boolean Unconditional){ }

public void commandAction(Command c, Item item){

if(c == comando1){//executa algo} }

public void itemStateChanged(Item item){

if(item instanceof StringItem){//executa algo} }

(14)

Componentes de Item

14

Há vários componentes da classe Item

TextField

StringItem

ImageItem

ChoiceGroup

DateField

Gauge

Spacer

CustomItem

(15)

TextField

(16)

Componentes de Item

TextField

16

Componente de texto editável

Pode ser iniciado com ou sem conteúdo

Pode-se definir limite de caracteres

Diferente da largura – ex: largura 15 / limite 60

Possível definir vários tipos de restrições, como

tipos de

caracteres aceitos (ex: apenas números, senha etc.)

(17)

Componentes de Item

TextField

17

Restrições de TextField

ANY – qualquer tipo de caracter

CONSTRAINT_MASK

– o valor de entrada utiliza uma máscara

DECIMAL

– aceita apenas valores numéricos e decimais

EMAILADDR

– formato de email válido

INITIAL_CAPS_WORD

– primeira letra de cada palavra em maiúscula

NON_PREDCTIVE

– a entrada não deve ser sugerida

NUMERIC

– aceita apenas valores numéricos e inteiros

PASSWORD

– texto deve ser mascarado já que é uma senha

PHONENUMBER

– pode ser usado um número de telefone

UNEDITABLE

– campo não será editável

(18)

Componentes de Item

TextField

18

O construtor de TextField permite definir o tamanho

máximo, alguma restrição e o conteúdo inicial

TextField(String label, String text, int maxSize, int constraint)

campoNumerico = new TextField(“Exemplo”, “”, 20, NUMERIC);

campoSenha = new TextField(“Senha”, “”, 10, PASSWORD);

(19)

Componentes de Item

TextField

19

Principais métodos relacionados

Método

Descrição

void delete(int inicio, int tamanho)

Deleta cadeia de caracteres do TextField

String getString()

Retorna o conteúdo do TextField

void insert(char[] text, int inicio, int

tamanho, int posicao)

Insere uma cadeia de caracteres no conteúdo do TextField

void insert(String text, int posicao)

Insere uma string em determinada posição

void setConstraints(int constraint)

Define o tipo de restrição para o campo

int setMaxSize(int maxSize)

Define o limite de caracteres para o TextField

void setString(String text)

Insere novo conteúdo no campo

(20)

Componentes de Item

Prática 1

20

Crie um novo projeto Java ME (“PraticaItems”)

Crie uma MIDlet comum (ExemploItems)

Esta MIDlet terá um exemplo de cada Item, mas nesta prática

apenas TextField.

Crie um pacote (exemploItems)

Crie a tela inicial como uma List Implicit, com o item

“TextField”

Ao selecionar TextField na tela inicial deve-se direcionar para

uma tela com um Form que possua 5 itens TextField:

(21)

Componentes de Item

Prática 1

21

Coloque o comando ‘Sair’ na tela inicial

Coloque o comando ‘Voltar’ nas outras

telas (neste caso, no Form criado com os

itens TextField)

Crie um comando ‘Submit’ que, ao ser

acionado, imprima no console os valores

digitados indicando os campos.

Crie um listener para os TextFields para

imprimir no console quando um item for

alterado

(22)

StringItem

(23)

Componentes de Item

StringItem

23

Exibe uma String

Serve para mostrar um conteúdo

(24)

Componentes de Item

StringItem

24

Pode ser construído de 2 formas:

StringItem(String label, String texto)

Label é o nome do campo e texto seu conteúdo inicial

StringItem(String label, String texto, int modo)

Além das características do anterior, há um modo de exibição

definido.

 PLAIN – modo básico

(25)

Componentes de Item

StringItem

25

Principais métodos relacionados

Método

Descrição

int getAppearenceMode()

Retorna o modo de aparência do item

Font getFont()

Retorna a fonte utilizada para exibir o item

String getText()

Retorna apenas o conteúdo do item, sem label

void setFont(Font font)

Define o tipo de fonte a ser utilizada

void setPreferredSize(int larg, int alt) Define a largura e altura para exibição do item

void setText(String conteudo)

Insere um novo conteúdo ao item

(26)

Componentes de Item

Prática 2

26

No mesmo projeto Java ME (“PraticaItems”), na tela

inicial (List Implicit) adicione mais uma opção – StringItem

Ao selecionar StringItem na tela inicial direcionar para

uma tela com um Form que possua alguns exemplos de

StringItem:

Label Texto

Sem conteúdo (Texto)

Utilizando quebra de

(27)

ImageItem

(28)

Componentes de Item

ImageItem

28

Permite exibir imagens na tela

Faz referência a um objeto Image – imagem em Java

Dois construtores possíveis:

ImageItem(String label, Image img, int layout, String textAlt)

Nome, imagem propriamente dita, diretiva de layout e texto

alternativo (caso a imagem não carregue)

ImageItem(String label, Image img, int layout, String textAlt, int modo)

(29)

Componentes de Item

ImageItem

29

Não cria uma imagem – usa um objeto Image já gerado

Deve-se criar uma pasta (pacote) dedicada às imagens e

adicionar ali as imagens a serem utilizadas

Os objetos Image devem ser criados da seguinte forma:

Image img = Image.createImage(caminho da imagem)

Ex: pacote chamado images e imagem chamada teste.png

Image img = Image.createImage(“/images/teste.png”);

Ao criar uma imagem deve-se tratar a exceção IOExeption

Depois cria-se um ImageItem com a imagem criada.

(30)

Componentes de Item

ImageItem

30

Principais métodos relacionados

Exemplo de código de ImageItem

Método

Descrição

Imagem getImage()

Retorna a imagem contida no ImageItem

int getLayout()

Retorna a diretiva de layout do item

void setAltText(String text)

Indica um texto alternativo para o item

void setImage(Image img)

Indica um objeto Image para o item

void setLayout(int layout)

Define o layout do item

Form form = new Form (“Exemplo ImageItem”);

try {

Image escudoImg = Image.createImage(“/images/cruzeiro.png”);

(31)

Componentes de Item

Prática 3

31

No mesmo projeto Java ME (“PraticaItems”), na tela inicial (List

Implicit) adicione mais uma opção – ImageItem, e crie um

pacote para armazenar as imagens.

Ao selecionar ImageItem na tela inicial direcionar para uma

tela com um Form que possua um ou mais exemplos de

ImageItem.

(32)

ChoiceGroup

(33)

Componentes de Item

ChoiceGroup

33

Conjunto de elementos selecionáveis dentro de um Form

Pode ser de um entre dois tipos:

EXCLUSIVE – escolha única

MULTIPLE – seleção múltipla

O construtor mais usado define apenas o label e o tipo

ChoiceGroup grupo = new ChoiceGroup(“Label”, ChoiceGroup.MULTIPLE);

É possível criar o grupo já passando uma lista de elementos e

imagens

String opcoes[] = {“opcao1”, “opcao2”, “opcao3”}

Image imagens[] = {“img1.png”, “img2.png”, “img3.png”}

Choicegroup grupo = new ChoiceGroup(“Label”, ChoiceGroup.MULTIPLE,

opcoes, imagens)

(34)

Componentes de Item

ChoiceGroup

34

Principais métodos relacionados

Método

Descrição

int append(String elem, Image image)

Adiciona um elemento do grupo

void delete(int index)

Remove um elemento do grupo

void insert(int num, String elem, Image

imagem)

Insere um elemento no grupo

int getSelectedFlags(boolean[]

selectedArray)

Retorna um array com os elementos selecionados

int getSelectedIndex()

Retorna o índice do elemento selecionado

String getString(int index)

Retorna o label do elemento do grupo

(35)

Componentes de Item

ChoiceGroup

35

É muito comum utilizar um ItemStateListener para controlar a

seleção dos elementos em um grupo

É preciso criar uma classe que implemente ItemStateListener

e “setá-la” como um Listener

Form.setItemStateListener(this)

Será necessário então construir o método

itemStateChanged(Item item) para tratar os eventos de item

(36)

Componentes de Item

Prática 4

36

No mesmo projeto (“PraticaItems”) adicione mais uma

opção à Lista  ChoiceGroup

Essa opção deve abrir um form com dois itens

ChoiceGroup

Um exclusivo, com categorias de carros em uma locadora

Outro múltiplo, com opcionais

(37)

Componentes de Item

Prática 4

37

Insira um listener que escreva no console o item

(38)

DateField

(39)

Componentes de Item

DateField

39

Utilizado para mostrar data (dia, mês e ano) e tempo (horas,

minutos e segundos)

3 formas de construção:

DATE: somente informações de data.

TIME: somente informações de tempo.

DATE_TIME: informações de data e tempo.

Para criar um campo para que o usuário selecione data e/ou

hora, basta não definir um valor.

(40)

Componentes de Item

DateField

40

Construtores

DateField(String label, int mode), que define um título e o modo

(DATE, TIME ou DATETIME)

DateField(String label, int mode, TimeZone zone), que define também

a zona temporal da hora

Métodos relacionados

Método

Descrição

Date getDate()

Retorna o valor do DateField

int getInputMode()

Retorna o modo do item

(41)

Componentes de Item

DateField

41

É comum o uso das classes Java Date e Calendar para

manipular as datas em DateField

Ex:

Útil para tratar eventos e recuperar/setar datas nesse tipo de item.

OBS:

Assim como em várias outras linguagens, trabalhar com linguagens

em Java também pode ser problemático.

Date dataAtual = new Date();

Calendar c = Calendar.getInstance();

c.setTime(dataAtual);

(42)

Componentes de Item

Prática 5

42

No mesmo projeto (“PraticaItems”) adicione mais uma

opção à Lista  DateField

Essa opção deve abrir um form com quatro DateField’s

1.

Usuário seleciona data e hora

2.

Data atual

3.

Hora atual

(43)

Componentes de Item

Prática 5

43

Implemente o ItemStateListener para exibir alterações nos

DateField’s

OBS:

Alguns emuladores podem apresentar problemas para definir

(44)

Gauge

(45)

Componentes de Item

Gauge

45

Permite exibir valores numéricos de forma gráfica, como

uma barra

Normalmente quando se tem a ideia de porcentagem e se deseja

uma forma mais interativa de definir e exibir valores

Bons exemplos são a regulagem do volume do dispositivo e

para mostrar o status de uma ação

O construtor deve receber um título, um boolean

informando se este é interativo ou não, depois um valor

máximo e, por fim, o valor inicial

(46)

Componentes de Item

Gauge

46

Métodos relacionados

Para recuperar e tratar o valor que o usuário definir em um

Gauge interativo:

Usa-se a interface ItemStateListener

Método

Descrição

int getValue()

Retorna o valor atual do item

boolean isInteractive()

Informa se o objeto é ou não interativo

void setMaxValue(int max)

Define o valor máximo para o item

void setPreferredSize(int width, int height) Configura a largura e altura do Gauge

(47)

Componentes de Item

Prática 6

47

No mesmo projeto (“PraticaItems”) adicione mais uma

opção à Lista  Gauge

Deve abrir um form com dois Gauges

Um interativo e outro não

Implemente ItemStateListener para informar alterações no

item.

(48)

Spacer

(49)

Componentes de Item

Spacer

49

Trata-se de um espaço em branco na tela

Utilizado para melhorar a distribuição de componentes

Um objeto invisível, não interativo, com largura e altura

definidas:

No construtor

new Spacer (int largura, int algura);

ou com:

void setMinimumSize(int largura, int altura);

Desnecessário criar Listener por se tratar de um objeto não

interativo

(50)

Componentes de Item

Prática 7

50

No mesmo projeto (“PraticaItems”) adicione mais uma

opção à Lista  Spacer

Deve abrir um form com um Spacer e um StringItem logo

após, mostrando o espaço formado.

(51)

CustomItem

(52)

Componentes de Item

CustomItem

52

Permite criar novos elementos visuais e interativos

Itens customizados

Compostos por nome (label), bordas e área de conteúdo

(elementos gráficos)

Ao criar o item customizado é preciso definir sua parte

gráfica e a interação com o usuário.

(53)

Componentes de Item

CustomItem

53

Para a implementação é necessário ao menos uma classe

que estenda da classe CustomItem e implemente alguns

métodos de forma obrigatória:

getMinContentHeight()

getMinContentWidth()

getPrefContentHeight()

getPrefContentWidth()

Paint

O construtor da classe deve ter uma referência ao

construtor da sua classe pai (CustomItem) e passar uma

String que será o rótulo do componente

(54)

Componentes de Item

CustomItem

54

Estrutura básica de uma classe CustomItem

getMinContentHeight() e getMinContentWidth() especificam

altura e largura mínima do componente

getPrefContentHeight() e getPrefContentWidth() servem para

(55)

Componentes de Item

CustomItem

55

O método paint() é onde se desenha o que o componente

exibirá na tela

Normalmente utiliza-se um dos métodos draw de Graphics.

(56)

Componentes de Item

CustomItem

56

A parte de desenho fica a cargo do paint().

Outros métodos são usados para a interação com o usuário

Eventos monitorados por um ItemStateListener, desde que

invoquem o método notifyStateChanged.

Método

Descrição

void keyPressed(int key)

Chamado pelo sistema quando uma tecla é pressionada

void keyReleased(int key)

Chamado pelo sistema quando uma tecla é solta

void pointerPressed(int x, int y)

Quando um ponteiro pressiona a área de conteúdo do item

boolean traverse(...)

Quando o item recebe o foco de seleção

(57)

Componentes de Item

Prática 8

57

No mesmo projeto (“PraticaItems”) adicione mais uma

opção à Lista  CustomItem

Deve abrir um form com um item customizado

Crie uma classe Java (não MIDlet) que herde de

CustomItem e “desenhe” na tela:

Um item customizado que desenhe na tela um quadro com

vários triângulos azuis

Um item customizado que desenhe na tela um quadro com

(58)

Linguagem de Programação IV

Interface Gráfica 02

(59)

Referências

MUCHOW, John W. Core J2ME – Tecnologia e MIDP. 1ª ed. Pearson-Makron

Books. 2004.

Referências

Documentos relacionados

· Indicações sobre cuidados médicos urgentes e tratamentos especiais necessários Não existe mais nenhuma informação relevante disponível.. 5 Medidas de combate

78 Figura 3.27 Padrão de difração de pós obtido para o complexo ácido nalidíxico:Zn através (a) de síntese por solução, em comparação com os difractogramas

class Pessoa { protected: string nome; Data dataNasc; public: Pessoa(string, Data); string getNome() const; Data getDataNasc()const; int getIdade() const; void setNome(string);

No presente estudo 75 pacientes eram portadores de prótese dentária, porém 14 apresentaram quadro clínico compatível com queilite angular, totalizando 19%; um (4%) apresentou a

Keywords: Glaucoma; Filtering surgery; Minimally invasive surgical procedures/methods; Anterior chamber.. RESUMO | Embora a cirurgia de glaucoma minimamente in- vasiva, que

No respeito pela matriz/estrutura curricular do Pré-escolar definida nas Orientações Curriculares, orientações essas que enquadram o trabalho pedagógico do educador, foram

Composição específica da ictiofauna na Gamboa do Perequê nos meses amostrados, com as freqüências absolutas observadas em número de exemplares (Obs), porcentagens

Parece assim que os cardiologistas portugueses têm uma percec¸ão globalmente adequada da utilidade clínica da angio-TC, identificando os doentes que mais beneficiam da