Erisvaldo Gadelha Saraiva Júnior



Arquitetura de APIs Gráficas do JavaDTV

LWUIT e DTV-UI
                              ...
Objetivo
                         Expor a arquitetura de APIs Gráficas do JavaDTV: LWUIT e DTV-UI.
Organize with Sections
...
Roteiro de Apresentação


APIs Gráficas         A API Gráfica             A API Gráfica
 do JavaDTV              LWUIT    ...
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
Cenário A do Ginga-J
                         Inicialmente, pensou-se em adotar o GEM, especificação
                     ...
Cenário B do Ginga-J
                         Posteriormente, substituiu-se o GEM pelo JavaDTV, especificação
            ...
Arquitetura do Ginga-J   APIs do JavaDTV
Pacotes do JavaDTV 1.2.1
Arquitetura do Ginga-J
Extensões do Ginga-J
Arquitetura do Ginga-J




                                    Os     pacotes     do    JavaDTV
     ...
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
                                LWUIT oferece, entre outros
baseada no Swing ...
Introdução ao LWUIT

Cada componente visual do
LWUIT possui uma série de
                                 Além        diss...
LWUIT e a Arquitetura MVC
                               LWUIT tem uma clara
                               separação entr...
Pacote com.sun.dtv.lwuit
Container
Container   é   um    Component
responsável por armazenar vários
componentes através do método
addComponent(…).
...
Form
Form é um Container que serve como
raiz para a interface do usuário.

O Form é composto por Title,
ContentPane e Menu...
Dialog
                        Dialog é um Form que ocupa
                        uma      parte  da    tela;

           ...
Dialog (Exemplo)
Dialog (Exemplo)
TabbedPane
TabbedPane é um container de abas
com títulos. Imagens também pode
ser usadas como abas.

As abas podem ser dis...
Pacote com.sun.dtv.lwuit
Label
Um Label pode conter:

•   Texto;
•   Imagem;
•   Texto e Imagem;
•   Alinhamento Horizontal;
•   Alinhamento Vertic...
Button
Características de um Button:

• Herda de Label;
• Pode receber foco (focusable);
• Usa-se a tecla de seleção ou
  ...
RadioButton
Características de um RadioButton:

• Herda de Button;
• Possui um estado booleano;
• Não faz muito por si só,...
CheckBox
Características de um CheckBox:

• Herda de Button;
• Possui um estado booleano;

• Verifica-se a seleção do
  me...
TextArea
Características de um TextArea:

• Especifica linhas e colunas;
• Mostra o texto na tela;
• TextArea de múltiplas...
TextField
Características de um TextField:

• Herda de TextArea;
• Representa um campo de
  texto (uma única linha).
List
• Crucial      para     aplicações
  interativas;
• Modelo de separação MVC
  (ListModel, ListCellRenderer e
  ListEv...
ListModel
Representa a estrutura de dados de um
List.
• Crie a sua própria classe de
  modelo implementando a
  interface ...
ListCellRenderer
Interface responsável por exibir os
dados do modelo.

• List tem um modelo padrão, o
  DefaultListCellRen...
ListEvents
Quanto aos EVENTOS de List, podem
ser de três tipos:

• Action Events;
• Selection Events;
• Data Events.
ComboBox
Características de um ComboBox:

• É um tipo de List
  • Tem um model;
  • Pode usar um cell renderer
     custom...
List (Exemplo)
List (Exemplo)
1. Coleção de atributos de estilo;
2. Declaros no arquivo .RES:
    1. Temas;
    2. Fontes;
    3. Imagens;
    4. Animaç...
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 oferece acesso a
  DTV-UI, representada
                         ...
Graphic Plane Support API

DTV-UI (com.sun.dtv.ui) permite acesso genérico aos planos
(br.org.sbtvd.ui), oferecidos pela p...
Graphic Plane Support API

A Graphic Plane Support API define três classes adicionais para as APIs de
Interface do JavaDTV...
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)
CONFIGURAÇÕES DE TELA



DTV-UI            provê caminhos para controlar qualquer camada da sua
apresentação visual. Para ...
TRATAMENTO GERAL DE EVENTOS



DTV-UI provê acesso a eventos de entradas do usuário antes
deles serem processados pelo mec...
Classes do pacote com.sun.dtv.ui.event
Classes do pacote com.sun.dtv.ui.event
LAYOUT MANAGERS
                                                              Similar ao Swing. Seis
                     ...
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.forum...
?   Dúvidas?



           Questionamentos sobre LWUIT e DTV-UI
What’s Your Message?
OBRIGADO!
Arquitetura De Ap Is GráFicas Do Java Dtv   Lwuit E Dtv Ui
Upcoming SlideShare
Loading in …5
×

Arquitetura De Ap Is GráFicas Do Java Dtv Lwuit E Dtv Ui

1,680 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,680
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Arquitetura De Ap Is GráFicas Do Java Dtv Lwuit E Dtv Ui

  1. 1. 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
  2. 2. Objetivo Expor a arquitetura de APIs Gráficas do JavaDTV: LWUIT e DTV-UI. Organize with Sections Imagens de telas confeccionadas com o LWUIT rodando em dispositivos móveis.
  3. 3. Roteiro de Apresentação APIs Gráficas A API Gráfica A API Gráfica do JavaDTV LWUIT DTV-UI Arquitetura de APIs Gráficas do JavaDTV: LWUIT e DTV-UI
  4. 4. APIs Gráficas do JavaDTV Descrição arquitetural das APIs Gráficas do JavaDTV
  5. 5. Arquitetura da plataforma Java (destacando o JavaME)
  6. 6. Arquitetura da plataforma JavaME
  7. 7. 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. Arquitetura do Ginga-J
  8. 8. 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. Arquitetura do Ginga-J
  9. 9. Arquitetura do Ginga-J APIs do JavaDTV
  10. 10. Pacotes do JavaDTV 1.2.1 Arquitetura do Ginga-J
  11. 11. Extensões do Ginga-J Arquitetura 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.
  12. 12. A API Gráfica LWUIT Descrição arquitetural da API Gráfica LWUIT, parte integrante do JavaDTV
  13. 13. A API Gráfica LCDUI
  14. 14. Introdução ao LWUIT LWUIT é uma biblioteca LWUIT oferece, entre outros baseada no Swing que recursos: suporte a Touch permite criar GUIs bastante Screen, animações, botões, atraentes em dispositivos que fontes, transições de telas, rodam as seguintes temas, layouts, abas, caixas plataformas: JavaME (CLDC de diálogo, integração 3D, 1.1, MIDP 2.0 / CDC, FP e etc. PBP) ou JavaSE.
  15. 15. Introdução ao LWUIT Cada componente visual do LWUIT possui uma série de Além disso, cada propriedades, tais como: componente visual do focusable, navigable e able to LWUIT está associado a dois receive user inputs. componentes: um relacionado a presentation (look) e outro relacionado a behavior (feel). Dessa forma, separa-se funcionalidade de visão.
  16. 16. LWUIT e a Arquitetura MVC 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.
  17. 17. Pacote com.sun.dtv.lwuit
  18. 18. Container Container é um Component responsável por armazenar vários componentes através do método addComponent(…). Cada Container tem o seu próprio layout.
  19. 19. Form Form é um Container que serve como raiz para a interface do usuário. O Form é composto por Title, ContentPane e MenuBar.
  20. 20. Dialog 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) Tipos de Dialog Dialog.show(…); // Criar um novo objeto ALARM; CONFIRMATION; Dialog d = new Dialog(); ERROR; INFO; WARNING. d.show();
  21. 21. Dialog (Exemplo)
  22. 22. Dialog (Exemplo)
  23. 23. TabbedPane 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.
  24. 24. Pacote com.sun.dtv.lwuit
  25. 25. Label Um Label pode conter: • Texto; • Imagem; • Texto e Imagem; • Alinhamento Horizontal; • Alinhamento Vertical.
  26. 26. Button 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.
  27. 27. RadioButton Características de um RadioButton: • Herda de Button; • Possui um estado booleano; • Não faz muito por si só, deve ser agrupado com ButtonGroup.
  28. 28. CheckBox 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().
  29. 29. TextArea 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.
  30. 30. TextField Características de um TextField: • Herda de TextArea; • Representa um campo de texto (uma única linha).
  31. 31. List • 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.
  32. 32. ListModel 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.
  33. 33. ListCellRenderer Interface responsável por exibir os dados do modelo. • List tem um modelo padrão, o DefaultListCellRenderer.
  34. 34. ListEvents Quanto aos EVENTOS de List, podem ser de três tipos: • Action Events; • Selection Events; • Data Events.
  35. 35. ComboBox 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.
  36. 36. List (Exemplo)
  37. 37. List (Exemplo)
  38. 38. 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.
  39. 39. Classes do pacote com.sun.dtv.lwuit
  40. 40. Pacotes e classes de LWUIT
  41. 41. A API Gráfica DTV-UI Descrição arquitetural da API Gráfica DTV-UI, parte integrante do JavaDTV
  42. 42. Introdução a DTV-UI DTV-UI oferece acesso a DTV-UI, representada tela e configurações, pelo pacote dispositivos específicos com.sun.dtv.ui, como o de entrada do usuário e próprio nome diz, traz o TextLayout Manager. funcionalidades Além disso, suporta os específicas para diversos planos de tela interfaces em TV Digital. do dispositivo.
  43. 43. 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.
  44. 44. 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).
  45. 45. Modelo Gráfico do JavaDTV
  46. 46. Hierarquia de Componentes JavaDTV
  47. 47. Exemplo com DTV-UI (Parte 1/4)
  48. 48. Exemplo com DTV-UI (Parte 2/4)
  49. 49. Exemplo com DTV-UI (Parte 3/4)
  50. 50. Exemplo com DTV-UI (Parte 4/4)
  51. 51. CONFIGURAÇÕES DE TELA 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.
  52. 52. TRATAMENTO GERAL DE EVENTOS 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.
  53. 53. Classes do pacote com.sun.dtv.ui.event
  54. 54. Classes do pacote com.sun.dtv.ui.event
  55. 55. LAYOUT MANAGERS Similar ao Swing. Seis gerenciadores de layout são suportados DTV-UI possui a interface TextLayoutManager e (com.sun.dtv.lwuit.layouts): duas implementações de layout: • BorderLayout; DefaultTextLayoutManager e • BoxLayout; SophisticatedTextLayoutManager. Essas classes definem • FlowLayout; funcionalidades para o layout dos textos e sua renderização • GridLayout; na tela. • CoordinateLayout; • GroupLayout.
  56. 56. Exemplo de uso de Layout Managers
  57. 57. Classes do pacote com.sun.dtv.ui
  58. 58. Pacote com.sun.dtv.ui
  59. 59. Pacote com.sun.dtv.ui
  60. 60. Pacote com.sun.dtv.ui
  61. 61. Pacotes e classes de DTV-UI
  62. 62. 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/
  63. 63. ? Dúvidas? Questionamentos sobre LWUIT e DTV-UI
  64. 64. What’s Your Message? OBRIGADO!

×