arquitetura de apis gráficas do java dtv - lwuit e dtv-ui
DESCRIPTION
Apresentação sobre as APIs Gráficas que compõem o JavaDTV: LWUIT e DTV-UI.JavaDTV é uma especificação de TV Digital que é parte integrante do Ginga-J, subsistema para aplicações procedurais em Java do Ginga (Middleware brasileiro de TV Digital).TRANSCRIPT
Erisvaldo Gadelha Saraiva Júnior
Arquitetura de APIs Gráficas do JavaDTV
LWUIT e DTV-UI
Erisvaldo Gadelha Saraiva Júnior
Laboratório de Aplicações de Vídeo Digital
Departamento de Informática - UFPB
Contato: [email protected]
Org
aniz
e w
ith
Se
ctio
ns
Objetivo Expor a arquitetura de APIs Gráficas do JavaDTV: LWUIT e DTV-UI.
Imagens de telas confeccionadas com o LWUIT rodando em dispositivos móveis.
Roteiro de Apresentação
Arquitetura de APIs Gráficas do JavaDTV: LWUIT e DTV-UI
APIs Gráficas do JavaDTV
A API Gráfica LWUIT
A API Gráfica
DTV-UI
APIs Gráficas do JavaDTV
Descrição arquitetural das APIs Gráficas do JavaDTV
Arquitetura da plataforma Java (destacando o JavaME)
Arquitetura da plataforma JavaME
Arq
uit
etu
ra d
o G
inga
-J
Cenário A do Ginga-J Inicialmente, pensou-se em adotar o GEM, especificação européia composta pelas APIs JavaTV, DAVIC, HAVi e DVB.
Arq
uit
etu
ra d
o G
inga
-J
Cenário B do Ginga-J Posteriormente, substituiu-se o GEM pelo JavaDTV, especificação da Sun (em parceria com o Fórum brasileiro de TV Digital) composta pelas APIs JavaTV, Transport, LWUIT e App.
Arq
uit
etu
ra d
o G
inga
-J
APIs do JavaDTV
Arq
uit
etu
ra d
o G
inga
-J
Pacotes do JavaDTV 1.2.1
Arq
uit
etu
ra d
o G
inga
-J
Extensões do Ginga-J
Os pacotes do JavaDTV permitem acesso genérico aos planos (exceto o plano de subtítulos) oferecidos pela plataforma para exibir conteúdo.
A API Gráfica LWUIT
Descrição arquitetural da API Gráfica LWUIT, parte integrante do JavaDTV
A API Gráfica LCDUI
Introdução ao LWUIT
LWUIT é uma biblioteca
baseada no Swing que
permite criar GUIs bastante
atraentes em dispositivos que
rodam as seguintes
plataformas: JavaME (CLDC
1.1, MIDP 2.0 / CDC, FP e
PBP) ou JavaSE.
LWUIT oferece, entre outros
recursos: suporte a Touch
Screen, animações, botões,
fontes, transições de telas,
temas, layouts, abas, caixas
de diálogo, integração 3D,
etc.
Introdução ao LWUIT
Cada componente visual do
LWUIT possui uma série de
propriedades, tais como:
focusable, navigable e able to
receive user inputs.
Além disso, cada
componente visual do
LWUIT está associado a dois
componentes: um
relacionado a presentation
(look) e outro relacionado a
behavior (feel). Dessa forma,
separa-se funcionalidade de
visão.
LWUIT tem uma clara separação entre model, view e controller; Por ser inspirado no Swing, é fácil de aprender e adotar; LWUIT foi construído “do zero” e não depende do AWT.
No LWUIT, tudo é customizável e extensível. Caso não exista um recurso ou componente, pode-se criá-lo e facilmente integrá-lo ao LWUIT.
LWUIT e a Arquitetura MVC
Pacote com.sun.dtv.lwuit
Container é um Component responsável por armazenar vários componentes através do método addComponent(…). Cada Container tem o seu próprio layout.
Container
Form é um Container que serve como raiz para a interface do usuário. O Form é composto por Title, ContentPane e MenuBar.
Form
ALARM; CONFIRMATION; ERROR; INFO; WARNING.
Dialog é um Form que ocupa uma parte da tela;
Dialog é, também, um “Top Component”; Um Dialog pode ser modal ou modeless; Possui os métodos show() e dispose(); Pode ser criado de duas formas: // Fábrica (método estático) Dialog.show(…); // Criar um novo objeto Dialog d = new Dialog(); d.show();
Tipos de Dialog
Dialog
Dialog (Exemplo)
Dialog (Exemplo)
TabbedPane é um container de abas com títulos. Imagens também pode ser usadas como abas. As abas podem ser dispostas em qualquer lado: cabeçalho, rodapé, esquerda ou direita. Passa-se um componente para o método addTab() e especifica-se o título da aba ou imagem.
TabbedPane
Pacote com.sun.dtv.lwuit
Um Label pode conter:
• Texto; • Imagem; • Texto e Imagem; • Alinhamento Horizontal; • Alinhamento Vertical.
Label
Características de um Button:
• Herda de Label; • Pode receber foco (focusable); • Usa-se a tecla de seleção ou
ponteiro para clicá-lo;
• Usa-se um ActionListener para descobrir quando o botão foi clicado.
Button
Características de um RadioButton:
• Herda de Button; • Possui um estado booleano; • Não faz muito por si só, deve
ser agrupado com ButtonGroup.
RadioButton
Características de um CheckBox:
• Herda de Button; • Possui um estado booleano; • Verifica-se a seleção do
mesmo através do método isSelected().
CheckBox
Características de um TextArea:
• Especifica linhas e colunas; • Mostra o texto na tela; • TextArea de múltiplas linhas
podem aumentar de tamanho caso seja necessário;
• Constraints: ANY, DECIMAL, EMAILADDR, INITIAL_CAPS_SENTENCE, INITIAL_CAPS_WORD, NON_PREDICTIVE, NUMERIC, PASSWORD, PHONENUMBER, SENSITIVE, UNEDITABLE, URL.
TextArea
Características de um TextField:
• Herda de TextArea; • Representa um campo de
texto (uma única linha).
TextField
• Crucial para aplicações interativas;
• Modelo de separação MVC (ListModel, ListCellRenderer e ListEvents, respectivamente);
• Repleto de modos úteis: • FIXED_NONE; • FIXED_NONE_CYCLIC; • FIXED_NONE_ONE_ELEM_
MARGIN_FROM_EDGE; • FIXED_LEAD; • FIXED_TRAIL; • FIXED_CENTER.
List
Representa a estrutura de dados de um List.
• Crie a sua própria classe de modelo implementando a interface ListModel;
• Lance eventos de mudança de dados para a visão;
• O modelo permite que a lista mostre uma quantidade ilimitada de dados;
• List tem um modelo padrão, o DefaultModel.
ListModel
Interface responsável por exibir os dados do modelo.
• List tem um modelo padrão, o DefaultListCellRenderer.
ListCellRenderer
Quanto aos EVENTOS de List, podem ser de três tipos:
• Action Events; • Selection Events; • Data Events.
ListEvents
Características de um ComboBox:
• É um tipo de List • Tem um model; • Pode usar um cell renderer
customizado. • Mostra a seleção atual; • Abre uma lista de opções.
ComboBox
List (Exemplo)
List (Exemplo)
1. Coleção de atributos de estilo; 2. Declaros no arquivo .RES:
1. Temas; 2. Fontes; 3. Imagens; 4. Animações; 5. Localização (L10N).
3. O tema pode ser substituído em tempo real.
Classes do pacote com.sun.dtv.lwuit
Pacotes e classes de LWUIT
A API Gráfica DTV-UI
Descrição arquitetural da API Gráfica DTV-UI, parte integrante do JavaDTV
Introdução a DTV-UI
DTV-UI, representada
pelo pacote
com.sun.dtv.ui, como o
próprio nome diz, traz
funcionalidades
específicas para
interfaces em TV Digital.
DTV-UI oferece acesso a
tela e configurações,
dispositivos específicos
de entrada do usuário e
o TextLayout Manager.
Além disso, suporta os
diversos planos de tela
do dispositivo.
Graphic Plane Support API
DTV-UI (com.sun.dtv.ui) permite acesso genérico aos planos
(br.org.sbtvd.ui), oferecidos pela plataforma para exibição de conteúdo.
Cinco planos: Video, StillPicture, Switching Plane, Text and Graphics Plane, Subtitle Plane.
Graphic Plane Support API
A Graphic Plane Support API define três classes adicionais para as APIs de
Interface do JavaDTV: ColorCoding, StillPicture e SwitchArea.
» ColorCoding possui constantes para enumerar os possíveis modelos de codificação para cada plano;
» StillPicture permite que imagens JPEG sejam inseridas no plano estático de
imagens; » SwitchArea é um componente que define uma área retangular para o plano
de seleção de vídeo/imagem. Cada retângulo pode ser adicionado através do método addComponent(…) de com.sun.dtv.lwuit.Component, no qual o plano de imagens estáticas aparecerá sobre o plano de vídeo ou vice-versa, dependendo do estilo (cor) do componente (preto mostra o vídeo e branco mostra a imagem estática).
Modelo Gráfico do JavaDTV
Hierarquia de Componentes JavaDTV
Exemplo com DTV-UI (Parte 1/4)
Exemplo com DTV-UI (Parte 2/4)
Exemplo com DTV-UI (Parte 3/4)
Exemplo com DTV-UI (Parte 4/4)
DTV-UI provê caminhos para controlar qualquer camada da sua
apresentação visual. Para cada camada, é possível obter: aspect ratio, pixel aspect ratio, screen resolution e screen area. Suporta diferentes ratios e screen sizes, bem como alpha blending e alternância de camadas entre vídeo e
imagem. Recomenda-se que a configuração seja obtida como um ScarceResource, sendo usado por uma única aplicação por vez.
CONFIGURAÇÕES DE TELA
DTV-UI provê acesso a eventos de entradas do usuário antes
deles serem processados pelo mecanismo de alto nível de tratamento de eventos do Java. Os eventos de entradas do usuário são agrupados pelo tipo: numerical keys, arrow keys, colored keys. Essas classes definem funcionalidades para o layout dos textos e sua renderização na tela.
TRATAMENTO GERAL DE EVENTOS
Classes do pacote com.sun.dtv.ui.event
Classes do pacote com.sun.dtv.ui.event
DTV-UI possui a interface TextLayoutManager e
duas implementações de layout: DefaultTextLayoutManager e SophisticatedTextLayoutManager. Essas classes definem funcionalidades para o layout dos textos e sua renderização na tela.
LAYOUT MANAGERS
Similar ao Swing. Seis gerenciadores de layout são suportados (com.sun.dtv.lwuit.layouts):
• BorderLayout; • BoxLayout; • FlowLayout; • GridLayout; • CoordinateLayout; • GroupLayout.
Exemplo de uso de
Layout Managers
Classes do pacote com.sun.dtv.ui
Pacote com.sun.dtv.ui
Pacote com.sun.dtv.ui
Pacote com.sun.dtv.ui
Pacotes e classes de DTV-UI
Referências
http://java.sun.com/javame/technology/lwuit/ http://java.sun.com/javame/technology/javatv/ http://www.forumsbtvd.org.br http://www.ginga.org.br http://javatv-developers.dev.java.net/ http://www.interactivetvweb.org/ http://gingacdn.lavid.ufpb.br/
? Dúvidas?
Questionamentos sobre LWUIT e DTV-UI
What’s Your Message? OBRIGADO!