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

(1)

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

Prof. Alessandro Borges

(2)

Tópicos

 Introdução

 Display e Displayable

 Screen

 Form

 TextBox

 Alert

 List

 Ticker

2

(3)

Introdução

3

(4)

Introdução

4



Conteúdo já visto:

 Computação Móvel

 Plataforma Java

 Java ME

 Arquitetura Java ME

 Configuração (CLDC)

 Perfil (MIDP)

 MIDlet

 Ciclo de Vida

(5)

Introdução

5



A interface é um dos principais problemas no desenvolvimento de aplicativos para dispositivos móveis.

 Principal fator: tamanho da tela.



Alguns componentes comuns em aplicativos Java SE não são implementados.



MIDP apresenta limitações

 “qualitativa” – geração apenas de objetos visuais simples.

 “quantitativa” – quantidade de elementos apresentados.

(6)

Introdução

6



Os componentes usados em interfaces gráficas no MIDP são definidos na biblioteca javax.microedtion.lcdui., que inclui:*

 Display – a tela do aparelho

 Form – formulário que contém outros elementos

 List – lista de seleção

 TextBox e TextField – caixas de texto

 Command – comandos de ação (eventos)

 DateField – campo de data

 Etc.

(7)

Introdução

7

 Principais componentes de javax.microedition.lcdui.*

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)

(8)

Display e Displayable

8

(9)

Display e Displayable



Display

 Representa a tela de exibição do dispositivo - o próprio hardware

 O aplicativo tem apenas um objeto dessa classe.



Displayable

 Interface que representa tudo o que se pode exibir no display

 Possui um conjunto de funções para exibir texto, imagens e gráficos

 É possível ter vários objetos Displayable, mas apenas um é exibido por vez

 É implementado no pacote .lcdui pela classe Screen

A partir dela, vários objetos de tela podem ser criados

9

(10)

Display e Displayable



Métodos mais usados com Display

 Exemplo: Display.getDisplay(this).setCurrent(NovaTela);

Primeiro retorna o display e depois define NovaTela para exibição

10

Método Descrição

static Display getDisplay(MIDlet midlet) Retorna o objeto Display do MIDlet.

void setCurrent(Displayable tela) Define um objeto do tipo Displayable para que seja exibido na tela

(11)

Display e Displayable



Métodos mais usados com Displayable

 Exemplo: Display.getDisplay(this).setCurrent(NovaTela);

Primeiro retorna o display e depois define NovaTela para exibição

11

void addCommand(Command com) Adiciona um comando à tela int getHeight() Retorna altura da tela em pixels int getWidth() Retorna a largura da tela em pixels

boolean isShow() Verifica se um objeto do tipo Displayable está sendo exibido no momento

void setCommandListener

(CommandListener listener) Define que classe será responsável por tratar eventos de uma tela

void setTitle(String título) Define um título para a tela

(12)

Display e Displayable

Prática 1

 Crie um novo projeto Java ME no NetBeans com nome de “pratica”

 Desmarque a criação da MIDlet automática na criação do projeto.

 Crie um novo arquivo

 pacote “visual” e MIDlet “TesteVisual” – Não crie MIDletVisual

 Recupere o display

 Crie um objeto TextBox (herda de Screen, que implementa Displayable).

 Defina uma frase e título para essa tela

 Execute a aplicação

 Muito parecido com o HelloWorld que já foi feito

 Comente as linhas da MIDlet informando o que foi executado em cada uma das principais partes do código.

12

(13)

Command

13

(14)

Command



Permite adicionar ações às telas



Opções:

14

Command Descrição

BACK Comando de navegação – retorna tela anterior CANCEL Ação negativa para algo da tela atual

EXIT Comando para sair da aplicação HELP Chamada específica para ajuda

ITEM Define um comando específico para um item/ação OK Ação positiva para algo da tela atual

SCREEN Comando específico para uma tela

STOP Comando para parar uma execução

(15)

Command



O tipo de comando é definido no construtor

 Command c = new Command(String título, int tipo, int prioridade)

Título define o que será exibido na tela

Tipo utiliza constantes para definir o tipo

Prioridade permite que o dispositivo defina quais comandos serão exibidos e em quais posições

Ex:

15

(16)

Command



Métodos que podem ser úteis para tratar comandos



Para inserir um comando em uma tela, basta adicioná-lo à tela, seja um form, um textbox ou qualquer outro objeto do tipo Displayable

16

int getCommandType() Retorna o tipo do comando

String getLabel() Retorna o nome (título) do comando int getPriority() Retorna a prioridade do comando

(17)

Command

 Apenas inserir, no entanto, não é suficiente para que o novo comando funcione, apesar de ser exibido na tela.

 Para que o comando passe a funcionar, é necessário que um listener trate os eventos

 Trata-se de uma interface que fica “ouvindo” as ações e as trata quando acontecem

 Interface CommandListener, através do método commandAction

 Para criar um listener é necessário que a classe implemente CommandListener

 public class CommandTest extends MIDlet implements CommandListener

17

(18)

Command



Uma tela que possua comando deve saber qual listener a tratará

 novaTela.setCommandListener(this);

 telaCadastro.setCommandListener(TrataEventos);

18

(19)

Command



Quando um comando é acionado é acionado, o método

commandAction captura a ação e fica responsável por tratar



Este método recebe o comando acionado e a tela que

19

(20)

Command

Prática 2

 Na MIDlet ‘TesteVisual’ da Prática 1, crie e adicione os comandos ‘Cancelar’ e ‘Login’



O comando ‘Cancelar’ deve ser exibido do lado esquerdo da tela e sua ação deve destruir a aplicação.



O ‘Login’, por enquanto, não deve executar nada

 Execute a MIDlet

 Crie e adicione mais 2 comandos (‘Info’ e ‘Help’) a serem exibidos no botão do lado direito

 Execute a MIDlet novamente. Algo diferente??

20

(21)

Screen

21

(22)

Screen



Classe que implementa Displayable e possui diversos gráficos para uso em tela dos aplicativos – s

ão tipos de telas

22

Display Um objeto display por MIDlet Displayable

Command Ticker

Screen Canvas Graphics

TextBox List Alert Form Item

Gauge StringItem

disponível em subclasses do Displayable

Métodos para desenhar no Canvas

Choice (interface)

(23)

23

Form

(24)

Form



É uma tela que pode conter vários tipos de itens, como:

 Texto,

 Imagem,

 Campo de entrada, etc.



Tela mais comum que permite criar aplicações mais complexas

24

(25)

Form



Cada Form é uma tela independente e possui seus próprios itens e comandos



A criação pode ser feita definindo-se um título para a tela, ou passando uma lista de itens

 form = new Form(“Tela de Cadastro”);

 form = new Form(“Tela de Cadastro”, listaItens);



Os métodos de Displayable podem ser usados no form

 addCommand, removeCommand, isShow, setTitle...

25

(26)

Form



Métodos úteis para se trabalhar com forms

26

int append(Item item) Adiciona um item ao Form void deleteAll() Deleta todos os itens do Form

int getHeight() Retorna a altura do Form em pixels int getWidth() Retorna a largura do Form em pixels

voi insert(int numItem, Item item) Insere um item no Form na posição anterior a um item já incluído

setCommandListener(CommandListener) Define o listener que tratará os eventos no Form

(27)

Form Prática 3



Crie uma nova MIDlet chamada “CadastroCliente”



Crie 5 forms: Inicio / Adicionar / Excluir / Pesquisar / Fim



O aplicativo inicia na tela ‘Inicio’ com os comandos

‘Adicionar’, ‘Excluir’, ‘Pesquisar’ e ‘Encerrar’



‘Encerrar’ finaliza a aplicação



Telas de Adicionar, Excluir, Pesquisar devem ter um comando OK que leva ao form ‘Fim’ e o comando VOLTAR que retorna à Tela ‘Início’

27

(28)

TextBox

28

(29)

TextBox



Tipo de tela simples que permite a interação (entrada e saída) de dados



Apresenta uma caixa de texto que ocupa toda a tela

 possui restrições de tamanho e tipo de caracteres 29

(30)

TextBox



Construtor

TextBox t = new TextBox(String title, String text, int maxSize, int constraints)



Onde:

 title: define um título para a tela

 text: um texto de conteúdo inicial

 maxSize: quantidade máxima de caracteres

 constraints: restrições de tipo de conteúdo, por exemplo, somente números TextField.NUMERIC

Mais tipos serão vistos com o componente TextField

30

(31)

TextBox



Métodos mais comuns

31

void delete(int offset, int lenght) Deleta determinados caracteres do texto String getString() Retorna o conteúdo (texto)

void insert(String text, int posic) Insere uma string em determinada posição do conteúdo

int setMaxSize(int maxSize) Define a quantidade máxima de caracteres void setTitle(String title) Define o título da tela

int size() Retorna quantidade de caracteres atualmente no textbox

(32)

Alert

32

(33)

Alert



É mais um tipo de tela simples



Utilizado para exibir algo para o usuário durante um tempo definido (timeout), antes de exibir outro elemento Displayable



São utilizadas para informar ao usuário sobre:

 Alarm – mostra aviso sobre um evento requisitado

 Confirmation – mostra uma dica para o usuário confirmar a ação

 Error – avisa sobre uma operação errônea

 Info – fornece informações comuns para o usuário

 Warning – alerta sobre uma operação “perigosa”

33

(34)

Alert



Pode-se construir uma tela de alerta vazia, apenas com o título utilizando o construtor

 Alert a = new Alert(“Alerta de Segurança”);



Ou pode construir um alerta completo informando o título, mensagem, imagem e tipo

 Alert(String titulo, String msg, Image img, AlertType tipo);

 Ex:

Alert a = new Alert(“Alerta”, “Mensagem”, null, AlertType.ERROR);

34

(35)

Alert



Métodos mais utilizados

 Ex: alertaErro.setTimeOut(Alert.FOREVER);

35

void addCommand(Command c) Adiciona um comando à tela de alerta AlertType getType() Retorna o tipo de alerta

void removeCommand (Command c) Remove determinado comando da tela void setCommandListener

(CommandListener Listener) Define um listener para os comandos da tela de alerta

void setTimeOut (int time) Configura o tempo que o alerta será exibido, em milissegundos ou com constantes

void setType(AlertType type) Define um tipo para o alerta

(36)

Alert

Prática 4



Crie uma nova MIDlet com nome ‘TextBoxAlertMidlet’



Crie uma tela TextBox com o título ‘Tela Inicial’ e o texto ‘Tela Inicial do Contador’



Adicione os comandos ‘SAIR’ e ‘INCREMENTA’

 ‘SAIR’

Encerra a aplicação

 ‘INCREMENTA’

Altera o texto para a quantidade total de vezes que o texto foi incrementado.

Altera o título para “Tela Incrementada”

36

(37)

Alert

Prática



Crie uma tela de alerta

 Ao acionar o comando ‘Incrementa’ exiba um aviso informando que o comando foi disparado



Mude os tipos de alerta e veja o resultado

37

(38)

38

List

(39)

List



Mais um tipo de tela simples que oferece uma lista de opções para o usuário.

 É possível navegar e selecionar uma(s) opção(ões)



Tipos:

 Exclusive: permite a seleção de apenas um elemento da lista.

 Multiple: permite a seleção de um ou mais elementos listados.

 Implicite: opções da lista são associadas a comandos,

Ao selecionar o CommandListener entende que um comando foi disparado

39

(40)

List



O construtor mais simples (mais usado) define o título e o tipo

 List(String titulo, int tipo)

Ex: List telaLista = new List(“Título”, List.IMPLICIT);



É possível criar uma tela de lista já informando as listas (coleções) de objetos que irão compor a mesma

 List(String titulo, int tipo, List elementos, List imagens)

Ex: List telaLista = new List(“Título”, Choise.Exclusive, listaElementos, listaImagens);

40

(41)

List



Alguns métodos usados:

41

int getSelectedIndex() Retorna o índice do elemento selecionado void insert(int elemNum, String text, Image image) Insere um elemento antes do elementoespecificado no número boolean isSelected(int element) Verifica se um elemento foi selecionado

void setTitle(String titulo) Define um título para a tela

int getSelectedFlags(boolean[] selecionados) Retorna um array com os elementos selecionados na lista

int size() Retorna o número de elementos da lista

void append(Object obj) Adiciona um objeto à lista

(42)

List

 Quando um item da Lista for selecionado o Listener de Command será disparado e será gerado um evento do tipo List.SELECT_COMMAND

 Quando o método commandAction identifica um evento deste tipo, basta recuperar o item selecionado, realizar os testes e definir as ações

42

(43)

List Prática 5



Crie uma nova MIDlet (ListasMidlet)

 Deve iniciar com uma tela List do tipo IMPLICIT e mostrar opções de Produtos e Pagamentos

 Pagamentos – redireciona para uma tela List do tipo EXCLUSIVE que lista formas de pagamento

A Vista, Cartão Crédito, Cartão de Débito, Boleto...

 Produtos – redireciona para uma tela List do tipo MULTIPLE que lista produtos

Roupa, Sapato, Perfume, Alimentação, Diversão, Jogos...

 Todas as telas devem ter a opção Voltar 43

(44)

List Prática 5

 Resultado 44

(45)

Ticker

45

(46)

Ticker (fita de rolo de teleimpressor)



Não é uma subclasse, é um campo (variável) definido dentro da classe Screen



Implementa Displayable diretamente, sem passar por Screen



Não se pode considerar um tipo de tela, mas pode ser adicionado a todo tipo de tela

 Pode fazer parte de qualquer objeto Screen



Trata-se de um texto que corre horizontalmente na tela de forma contínua, sem parar



É considerado um recurso de “enfeite”, “perfumaria”

46

(47)

Ticker



Sua criação é simples

 Basta informar no construtor a string a ser exibida

 Ticker ticker = new Ticker(“Texto a ser exibido continuamente...”);



Alguns métodos relacionados

47

String getString() Retorna o conteúdo apresentado no Ticker void setString(String text) Define o texto a ser exibido no Ticker

Tela.setTicker(ticker) Seta um Ticker em determinada tela.

Todos os tipos de telas aceitam tickers

(48)

Ticker

Prática 6



Na MIDlet criada na última prática (ListasMidlet) crie um Ticker para ser exibido em cada uma das telas de lista



Retorne à MIDlet, crie o ticker com o texto que desejar, “sete”

o ticker nas telas... pronto!

48

(49)