Linguagem de Programação IV
Interface Gráfica 02
Tópicos
Classe Item
TextField
StringItem
ImageItem
ChoiceGroup
DateField
Gauge
Spacer
CustomItem
2
Introdução
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)
Classe Item
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
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
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
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
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
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
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
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} }
Componentes de Item
14
Há vários componentes da classe Item
TextField
StringItem
ImageItem
ChoiceGroup
DateField
Gauge
Spacer
CustomItem
TextField
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.)
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
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);
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
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:
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
StringItem
Componentes de Item
StringItem
23
Exibe uma String
Serve para mostrar um conteúdo
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
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
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
ImageItem
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)
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.
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”);