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: erisvaldojunior@gmail.com

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!