UNIVERSIDADE DE PASSO FUNDO

Giovani Zandonai

Gerao de interface de usurio multiplataforma utilizando USIXML

Passo Fundo 2006

Giovani Zandonai

Gerao de interface de usurio multiplataforma utilizando USIXML

Monografia apresentada ao curso de Cincia da Computao, do Instituto de Cincias Exatas e Geocincias, da Universidade de Passo Fundo, como requisito parcial para a obteno do grau de Bacharel em Cincia da Computao, sob orientao da Prof. Dra. Carina Friedrich Dorneles.

Passo Fundo 2006

Giovani Zandonai

Gerao de interface de usurio multiplataforma utilizando USIXML

Banca Examinadora:

Prof Dra. Carina Friedrich Dorneles UPF Orientadora

Prof. Mestre Jaqson Dalbosco UPF Examinador

Prof. Mestre Marcos Jos Brusso UPF Examinador

Passo Fundo 2006

Agradeo primeiramente a meus pais, que foram e so a minha inspirao e deram-me todas as condies necessrias. A meu irmo que juntamente comigo teve fora e superao para concluir mais essa etapa de nossas vidas. Agradeo a Deus que a fonte de tudo, por me dar fora e motivao quando precisei. Agradeo a minha namorada Rafaela, que nos momentos difceis teve pacincia e esteve sempre a meu lado ouvindo e incentivando para que eu seguisse adiante. Tambm, agradeo a minha orientadora Dra. Carina, pelas cobranas semanais, pelas idias e principalmente pelo conhecimento que me passaste. Aos meus amigos, aos colegas de curso, aos colegas de trabalho pelo apoio, enfim, a todos que contriburam de alguma forma para que este trabalho tenha sido realizado.

RESUMO

A diversidade de dispositivos que esto constantemente surgindo no mercado apenas conseqncia do avano tecnolgico. Esses dispositivos necessitam de interfaces capazes de rodarem em qualquer plataforma computacional, mas alguns problemas como, por exemplo, o tamanho da tela e os dispositivos de entrada e sada, dificultam a integrao. Esses problemas esto sendo estudados, pois se trata de um assunto bastante novo devido s tecnologias como, PDAs e celulares, serem relativamente novas. Para ajudar a resolver estes problemas foram desenvolvidas linguagens, baseadas na linguagem XML, que tem o objetivo de descreverem toda uma interface, desde especificaes do desenho (posicionamento, cor e tamanho) at a especificao do comportamento dos componentes. O presente trabalho estuda algumas linguagens que descrevem interfaces, assim como a linguagem XML e linguagens de apresentao de contedo. Tambm, o trabalho mostra uma anlise de vrios trabalhos que propem definies de interfaces e desenvolvimento de conceitos e paradigmas. O objetivo principal deste trabalho construir um prottipo mostrando as interfaces resultados (para as plataformas Desktop e Celular), utilizando-se da linguagem USIXML para descrio dessas interfaces. Palavras-chave: USIXML, XML, RSS, Interface de Usurio, trabalhos relacionados.

LISTA DE ILUSTRAES

Figura 1 - Cdigo XML........................................................................................................ 17 Figura 2 - Processamento de arquivos XML ......................................................................... 20 Figura 3 - Exemplo de um Template XSLT .......................................................................... 21 Figura 4 - Documento Resultado .......................................................................................... 22 Figura 5 - Seqncia do processamento de um documento XML.......................................... 23 Figura 6 - Cdigo exemplo de uma regra CSS ...................................................................... 24 Figura 7 - Descrio de botes na linguagem XUL............................................................... 27 Figura 8 - Interface concreta correspondente ao cdigo XUL da figura 7.............................. 27 Figura 9 - Cdigo XAML..................................................................................................... 27 Figura 10 - Boto gerado pelo cdigo XAML....................................................................... 28 Figura 11 - Cdigo de uma interface em UIML .................................................................... 29 Figura 12 - Interface concreta correspondente ao cdigo da Figura 11. ................................. 30 Figura 13 - Os quatro nveis de abstrao do framework Cameleon ...................................... 31 Figura 14 - Descrio do Modelo principal........................................................................... 32 Figura 15 - Descrio visual do cdigo na linguagem USIXML ........................................... 34 Figura 16 - Cdigo utilizando a linguagem USIXML ........................................................... 34 Figura 17 - Representao do processo de gerao automtica ............................................. 40 Figura 18 - Descrio do M-FLOG....................................................................................... 41 Figura 19 - Processo de desenvolvimento utilizando a linguagem XICL............................... 47 Figura 20 - Modelo MIM ..................................................................................................... 50 Figura 21 - Processo de gerao de interfaces da proposta deste trabalho.............................. 56 Figura 22 - Cdigo XML de um feed .................................................................................... 58 Figura 23 - Diferenciao de plataformas ............................................................................. 60 Figura 24 - Modelo de Transformao definido na USIXML................................................ 61 Figura 25 - Sistema de transformao na USIXML .............................................................. 62 Figura 26 - Uma regra de Transformao ............................................................................. 63 Figura 27 - Substituio de componentes.............................................................................. 63 Figura 28 - Transformao de LENOM Desktop para LENOM Cel...................................... 64 Figura 29 - Correspodncia entre um componente ListBox ................................................... 65 Figura 30 - Configurao do arquivo pastas.xml ................................................................... 66 Figura 31 - Diagrama de Casos de Uso do LENOM Desktop................................................ 67 Figura 32 - Diagrama de Casos de Uso do LENOM Cel ....................................................... 68 Figura 33 - Diagrama de Atividades da Leitura de uma Notcia no LENOM Desktop........... 69 Figura 34 - Diagrama de Atividades da Leitura de uma Notcia no LENOM Desktop........... 70 Figura 35 - Diagrama de Atividades da Excluso de Pastas e canais no LENOM Desktop.... 71

Figura 36 - Diagrama de Atividades da Adio de Pastas e Canais no LENOM Desktop...... 72 Figura 37 - Diagrama de Atividades da Leitura de notcias no LENOM Cel ......................... 73 Figura 38 - Diagrama de Atividades da Atualizao de Canais no LENOM Cel ................... 74 Figura 39 - Diagrama de Atividades da Excluso de Canais no LENOM Cel........................ 75 Figura 40 - Diagrama de Atividades da Excluso de Pastas no LENOM Cel......................... 76 Figura 41 - Diagrama de Atividades da Adio de Canais no LENOM Cel........................... 77 Figura 42 - Diagrama de Atividades da Adio de Pastas no LENOM Cel ........................... 78 Figura 43 - Diagrama de Classes da LENOM Desktop ......................................................... 79 Figura 44 - Diagrama de Classes da LENOM Cel................................................................. 80 Figura 45 - Leitor de Notcias para a plataforma Desktop ..................................................... 81 Figura 46 - Leitor de Notcias para a plataforma Celular ...................................................... 89

LISTA DE ABREVIATURAS E SIGLAS

AGG API ASP AUI AUIML AWT CC/PP CIO CLDC CSS CUI CUI DHTML DM DOM DTD FUI GUI HTML HUI IMML IBM IDE IHC

Attributed Graph Grammars tool Application Programming Interface Active Server Pages Abstract User Interface Abstract User Interface Markup Language Abstract Window Toolkit Composite Capability/Preference Profiles Concrete Interaction Objects Connected Limited Device Configuration Cascading Style Sheets Concrete User Interface Character User Interface Dinamic Extensible Hypertext Markup Language Dispositivo Mvel Document Object Model document type definition Final User Interface Graphical User Interfaces HyperText Markup Language Handheld User Interface Interactive Message Modeling Language International Business Machines, Integrated Development Environment Interao Humano-Computador

IU J2ME J2SE JSP JVM LENOM MAS MIDP MIM MobAC MVC OS PC PDA PDF PHP PSM RDF RDF RSS SBB SGML SMIL T&C UIDL UIG UIML USIXML W3C WAP WML WUI XAML XHTML

Interface do Usurio Java 2 Platform, Micro Edition Java 2 Standard Edition JavaServer Pages Java Virtual Machine LEitor de NOtcias para Mltiplas Plataformas Mobile Application Servers Mobile Information Device Profile Meta-Interface Model Mobile Adapter Client Model/Viewer/Controller Operation System Personal Computer Personal Digital Assistant Portable Document Format Hipertext Processor Problem Solving Method Resource Description Framework Rich Text Format RDF Site Summary Software Baseado-em-Browser off-line Standard Generalized Markup Language Synchronized Multimedia Integration Language Task & Concepts User Interface Description Language User Interface Generator User Interface Markup Language USer Interface eXtensible Markup Language World Wide Web Consortium Wireless Application Protocol Wireless Markup Language Web User Interface eXtensible Application Markup Language Extensible Hypertext Markup Language

10

XML XPath XSL XSL:FO XSLT XUL

eXtensible Markup Language eXtensible Markup Language Path Language eXtensible Stylesheet Language Transformation eXtensible Stylesheet Language Transformation Formatting Objects Extensible Style Language Transformation XML User interface Language

SUMRIO

INTRODUO ................................................................................................................... 13 1 XML ............................................................................................................................... 16 1.1 Apresentao de Contedo ....................................................................................... 18 1.1.1 XSL.................................................................................................................... 19 1.1.2 CSS .................................................................................................................... 23 2 LINGUAGENS PARA INTERFACES DE USURIOS ................................................. 25 2.1 XUL ......................................................................................................................... 26 2.2 XAML...................................................................................................................... 27 2.3 UIML ....................................................................................................................... 28 2.4 USIXML .................................................................................................................. 30 2.5 Comparativo entre as linguagens .............................................................................. 36 3 TRABALHOS RELACIONADOS .................................................................................. 38 3.1 Gerao de interfaces multiplataforma...................................................................... 38 3.1.1 Dispositivos Mveis ........................................................................................... 39 3.1.2 Tecnologias Web................................................................................................. 44 3.1.3 Aplicaes utilizando especificamente a Linguagem UIML ................................ 48 3.2 Sistemas baseados em conhecimento ........................................................................ 50 3.3 Questes de Desenvolvimento e Tendncias de Pesquisa .......................................... 52 3.4 Comparativo entre os trabalhos relacionados ............................................................ 53 4 LENOM .......................................................................................................................... 55 4.1 RSS .......................................................................................................................... 56 4.2 Tecnologias envolvidas............................................................................................. 59 4.3 Modelo de Transformao ........................................................................................ 60 4.4 Projeto e Implementao .......................................................................................... 65

12

4.4.1 Diagrama de Casos de Uso.................................................................................. 67 4.4.2 Diagrama de Atividades...................................................................................... 68 4.4.3 Diagrama de Classes ........................................................................................... 78 4.4.4 LENOM Desktop................................................................................................ 81 4.4.5 LENOM Cel ....................................................................................................... 89 CONSIDERAES FINAIS ............................................................................................... 97 REFERNCIAS BIBLIOGRFICAS.................................................................................. 99 ANEXOS .......................................................................................................................... 102

INTRODUO

A evoluo da tecnologia e toda a diversidade dos dispositivos de interfaces de usurio que esto surgindo constantemente no mundo tecnolgico vm propiciando vrias possibilidades na rea do desenvolvimento de aplicaes. Alm disso, a crescente integrao das aplicaes com as tecnologias de comunicao sem fio como celulares e PDAs (Personal Digital Assistant), fazem crescer a demanda por novos servios. As aplicaes deixam de interagir apenas com computadores Desktop e passam a ser acessadas por dispositivos mveis. Assim, h a necessidade de interao entre as diferentes plataformas e dispositivos existentes no mercado para que todo esse processo de desenvolvimento continue evoluindo de forma equilibrada. Os dispositivos mveis esto tornando-se muito comuns e cada vez mais modernos, com inmeras funcionalidades que antes eram disponveis apenas em computadores pessoais. Esses equipamentos, como celulares, por exemplo, podem ter softwares semelhantes, como editores de texto, planilhas de clculos, calculadoras, Browser, jogos e uma infinidade de aplicativos, mas possuem caractersticas fsicas que os divergem. A seguir sero mostrados alguns dos dispositivos mais conhecidos: PDA (Personal Digital Assistant), tambm conhecido como agenda eletrnica de bolso. Os PDAs so computadores de dimenses reduzidas e recursos limitados, mas dotados de grande capacidade computacional, cumprem funes de agenda, controle de tarefas a fazer, bloco de anotaes, com possibilidades de interconexo com um computador pessoal ou uma rede sem fios (Wi-Fi) para acesso a correio eletrnico e Internet. Hoje em dia, existem diversos programas e documentos que podem ser instalados, como planilhas, editores de texto, jogos, Browsers, sistemas de vendas dentre outros, alm de j existirem PDAs com cmera digital e tocadores de mp3.

14

Utilizam uma caneta especial para a entrada de dados, cuja escrita reconhecida pela tela. Existem duas famlias principais de PDA no mercado: os PalmOne que utilizam o sistema operacional Palm OS e os Pocket PC que utilizam o sistema Windows Mobile1 da Microsoft. Segundo o Wikipdia, j existem PDAs rodando o sistema operacional Linux. Um dos projetos mais conhecidos e interessantes o Pocket Linux, desenvolvido todo com base na distribuio do Debian, em que a idia criar um Linux extremamente fcil de manipular e utilizar, para substituir o sistema operacional proprietrio de vrios PDAs (WIKIPDIA, 06 abr. 2006); O Celular um aparelho de comunicao desenvolvido para a transmisso de voz (telefone). Com o avano da tecnologia, esses telefones passaram a desempenhar funes de PDAs como agendas, calculadoras, acesso a Internet e inmeros programas e jogos. Eles se tornaram praticamente um equipamento multi-funes, com cmeras digitais acopladas, rdio, tocador de mp3 e no deixaram de ser telefones. Tambm so de dimenses reduzidas, e com recursos limitados. A entrada de dados atravs do teclado numrico. Esses dispositivos comparados ao computador pessoal ainda so limitados. Diferenciam-se principalmente pelo tamanho da tela e pelas modalidades de entrada e sada, dificultando assim, a adaptabilidade das aplicaes. Todos esses dispositivos precisam dispor de interfaces amigveis, de fcil interao com o usurio. Para que uma aplicao funcione corretamente num dispositivo preciso que a interface seja projetada para ele, alm da necessidade de suportar todas as configuraes desse dispositivo e, esse um grave problema encontrado. Logicamente, teriam que ser desenvolvidas X interfaces para Y dispositivos e sem perder a consistncia da aplicao. Para isso existem linguagens que tm o objetivo de descrever as interfaces das aplicaes. A maioria das linguagens para descrio de interfaces baseada no XML, como por exemplo, a Linguagem USIXML (USer Interface eXtensible Markup Language) (USIXML, 15 abr. 2006). Essas linguagens descrevem toda a arquitetura de uma interface, os componentes, seu comportamento, disposio na tela dentre outras caractersticas. As informaes da interface so lidas e transformadas em cdigo executvel para o dispositivo especfico. Assim, as interfaces so apenas montadas para cada dispositivo, no precisando criar um projeto individual, diminuindo o retrabalho e aumentando conseqentemente a produtividade.

Tambm conhecido como Pocket Windows e anteriormente chamado como Windows CE

15

O presente trabalho demonstra algumas linguagens para descrio de interfaces de usurios assim como trabalhos relacionados que atendem a todas essas requisies citadas para o desenvolvimento do projeto. Alm disso, so analisadas algumas tecnologias como XML e linguagens de estilos que tm funes de organizarem e disponibilizarem os dados de uma forma apresentvel. Quando se trata de transferncia de contedos pela Internet, geralmente utilizada a XML devido ao fato de ser uma linguagem flexvel e de fcil manipulao. Tambm so apresentados trabalhos relacionados que fornecem idias bastante interessantes e ajudam a formalizar o contedo, a maioria deles apresenta ferramentas e paradigmas relacionados ao desenvolvimento de interfaces para multiplataformas. Dentro desse contexto, o objetivo principal desse trabalho apresentar um estudo realizado entre as linguagens para a gerao de interfaces de usurio para mltiplas plataformas e desenvolver um prottipo de um leitor de notcias para mltiplas plataformas. Alm disso, esse prottipo utiliza uma das linguagens estudadas, a linguagem USIXML, para a descrio das interfaces. Optou-se pela linguagem USIXML devido ao fato desta linguagem estar em crescente expanso no mercado e tambm, por possuir quatro nveis de abstraes descrevendo em alto nvel os elementos de uma interface e principalmente por estar sendo apoiada pela W3C. O trabalho segue na seguinte ordem: o Captulo 1 apresenta conceitos sobre a linguagem de marcao XML e linguagens para apresentao de contedo. No Captulo 2, so abordadas linguagens desenvolvidas para a gerao de interfaces de usurio, mostrando a estrutura e caractersticas de cada uma delas. Em seqncia, o Captulo 3 demonstra alguns trabalhos relacionados gerao de interfaces, que foram desenvolvidos pela comunidade acadmica, problemas encontrados e conseqentes solues, indagaes, assim como ferramentas desenvolvidas. O Captulo 4 apresenta uma abordagem de um prottipo de leitor de notcias definido nesse trabalho: LENOM Desktop (para Desktop) e LENOM Cel (para Celular), bem como a descrio de sua arquitetura e a descrio de seus mdulos. Ainda, este captulo apresenta alguns conceitos bsicos sobre leitores de notcias e seu funcionamento, alm disso, demonstra a utilizao de regras de transformaes da linguagem USIXML e a descrio da interface desse prottipo na linguagem USIXML.

1 XML

XML (eXtensible Markup Language) tem um papel importantssimo na atualidade, onde necessita-se que os mais diferentes sistemas sejam compatveis entre si, j que a tecnologia que permite compartilhar a informao de uma maneira segura, confivel e fcil. A integrao com o XML permite uma maior interoperabilidade entre as vrias tecnologias existentes no mercado, ou seja, permite compartilhar dados com praticamente todas essas tecnologias de modo transparente. por causa dessa facilidade de integrao que a maioria das linguagens utilizadas para a descrio de Interfaces de Usurio so embasadas no XML. Esse captulo tem por objetivo introduzir a utilizao do XML, os seus padres, suas propostas para apresentao de contedo e de extrema importncia para o entendimento das linguagens de Interface de Usurio. XML uma linguagem de marcao muito simples desenvolvida para a troca de informaes de forma estruturada na web. um subconjunto, ou seja, uma verso reduzida da SGML (Standard Generalized Markup Language), a qual uma metalinguagem destinada a definir linguagens de marcao para documentos (W3C, 10 mar. 2006). Essa linguagem por ser extensvel, permite que markup tags 2 sejam criadas pelos seus utilizadores, desenvolvedores e esta a razo de o XML ser conhecido como uma metalinguagem. Alm disso, a sua utilizao com as novas tecnologias existentes no mercado como Java, PHP, dentre outras, permite uma maior facilidade na interoperabilidade de aplicaes, nas trocas de dados, na integrao de tecnologias, armazenamento e organizao de documentos (W3C, 10 mar. 2006). O XML nos traz vrios benefcios, facilitando bastante o desenvolvimento das pginas web. Alguns desses benefcios podem ser citados como:

Tags de marcao

17

permite mltiplas formas de visualizao, ou seja, um nico documento pode ser apresentado de diversas formas, de acordo com a deciso do usurio. Essas visualizaes so processadas localmente;

permite a integrao de dados estruturados de diversas fontes. Essa integrao pode ser feita em um servidor intermedirio, e os dados estaro disponveis para clientes ou outros servidores;

permite atualizaes granulares, evitando que uma simples modificao de um documento resulte na necessidade de atualizao completa do mesmo, ou seja, atualiza-se apenas os contedos que foram alterados, ou as visualizaes que so requisitadas. Um documento XML um texto em formato Unicode com markup tags e outras

informaes que podem ser adicionadas. Um exemplo de documento XML bem-formado que caracteriza a sua formatao est representada na Figura 1:
<?xml version="1.0" ?> <pedido numero="1000"> <cliente> <razao_social>Zandonai</razao_social> <cgc>00.000.000/0001-00</cgc> <endereco> <logradouro>Av. Dr. Cesar Santos, 403</logradouro> <cidade>Passo Fundo</cidade> <estado>RS</estado> </endereco> </cliente> <itens_pedido> <item> <produto>caneta azul</produto> <quantidade>100</quantidade> <preco_unit>2</preco_unit> </item> <item> <produto>papel</produto> <quantidade>100</quantidade> <preco_unit>8</preco_unit> </item> </itens_pedido> </pedido>

Figura 1 - Cdigo XML Para que um documento XML seja bem-formado, necessrio que este possua um prlogo e um elemento raiz. O prlogo contm metadados a respeito do resto do documento e composto da declarao XML, das instrues de processamento e das definies de DTD ou XML Schema. J o elemento raiz contm todos os outros elementos e atributos do documento.

18

Para ser carregado por um parser3 o documento XML deve ser bem-formado e para isso deve seguir algumas regras: Deve ser delimitado por um nico elemento denominado elemento raiz <pedido> <\pedido> e os demais elementos so definidos dentro do elemento raiz; Os elementos devem possuir uma tag inicializadora <cliente> e uma tag finalizadora <\cliente>. Esse casamento de tags (incio fim) obrigatrio em todo o documento; Os elementos no podem se sobrepor, ou seja, devem ser cercados por seus elementos pais, <Nome> Giovani <Sobrenome> Zandonai </Sobrenome> </Nome>; As tags podem ter atributos <pedido numero=1000>, ou podem ser vazias <\Profisso>; As tags XML so case sensitive, <email> diferente de <Email>. Com essas regras possvel definir um documento XML completo e bem-formado. Um documento XML pode ser representado como uma rvore hierrquica, onde o seu elemento raiz chamado de pai e os seus nveis subseqentes de filhos e assim por diante. A primeira impresso que XML ir substituir o HTML. Ao passo que o HTML utilizado para a visualizao dos contedos, disposio na tela, formatao, interface num modo geral, o XML utilizado para a descrio desses de dados. Para o funcionamento dos mesmos necessrio um Browser4 porm, para o XML necessrio um interpretador parte, alm do Browser, que manipule os seus dados. Assim, pelo simples fato de o XML no possuir a mesma funo que o HTML, entende-se que a dvida no procede.

1.1 Apresentao de Contedo

Para o Browser, as tags XML so mostradas como sendo apenas informaes comuns, ou seja, sero disponibilizadas na tela sem nenhuma formatao. Por no serem pr-definidas, o Browser no consegue interpreta-las e assim, preciso de algo que interprete esses documentos e diga como devem ser visualizados. Partindo dessa necessidade, essencial o uso de linguagens para a apresentao dos dados XML (linguagens de estilo) e para isso existem duas principais: a CSS (Cascading Style Sheets) e a XSL (eXtensible Stylesheet Language). Essas linguagens descrevem o aspecto grfico, ou seja, controlam a apresentao

3 4

um programa que serve para analisar a estrutura gramatical do documento XML Navegador, software utilizado para abrir pginas web

19

e layout tanto de documentos XML quanto pginas HTML. A XSL um estilo criado especialmente para a apresentao de documentos XML e por isso tem maior interatividade sobre esses documentos com relao a CSS. A utilizao dessas linguagens de estilo proporciona um maior controle sobre a apresentao do site, agilizando a manuteno e desenvolvimento. Alm disso, tm a vantagem de elaborarem documentos consistentes com as aplicaes de usurios futuros, assim como reduzir o tempo de carga dos documentos Web. Na maioria das vezes uma apresentao bem feita faz com que o usurio entenda o funcionamento de uma aplicao. Enfim, essas linguagens aumentam a portabilidade dos documentos Web. Esse captulo apresenta essas duas linguagens de estilo: a XSL e a CSS.

1.1.1 XSL

A linguagem de estilos XSL consiste de trs partes: XSLT (eXtensible Stylesheet Language Transformations), responsvel pela

transformao de documentos XML; Xpath (eXtensible Markup Language Path Language), responsvel pela definio das partes e padres XML; XSL:FO (XSL Formatting Objects), mtodo que faz a formatao dos documentos XML. A XSLT uma linguagem para transformar a estrutura de um documento XML. Apesar do processo ser referido como transformao, o documento original no alterado, sendo criado um novo documento XML baseado no contedo do documento existente. Tendo um documento XML qualquer como entrada, este pode ser transformado para uma sada especfica. Alm disso, podem ser adicionados novos elementos, mudar a ordem de apresentao ou mesmo decidir se um determinado elemento ser mostrado ou no. A Figura 2 representa o processo de transformaes XSLT sobre um documento XML, resultando em qualquer outro documento em formato texto como HTML, XHTML, TXT, RTF ou o prprio XML (W3C, 10 mar. 2006).

20

Figura 2 - Processamento de arquivos XML

Conforme a Figura 2, tendo o documento XML como entrada, o processador XSLT aplica regras para transformar o documento de entrada em um documento resultado. Essas regras e tambm outras associaes so implementadas nos Templates que so formados por expresses definidas por XPath para a associao com os elementos do documento de entrada. A seguir, a Figura 3 demonstra um cdigo XSLT utilizando como entrada o documento XML da Figura 1.

21

<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/> <xsl:template match="text()"/> <xsl:template match="pedido"> <pedido> <numero> <xsl:value-of select="@numero"/> </numero> <xsl:apply-templates/> </pedido> </xsl:template> <xsl:template match="cliente"> <cliente> <nome> <xsl:value-of select="razao_social"/> </nome> <cgc> <xsl:value-of select="cgc"/> </cgc> <xsl:apply-templates/> </cliente> </xsl:template> <xsl:template match="endereco"> <rua> <xsl:value-of select="logradouro"/> </rua> <cidade> <xsl:value-of select="cidade"/> </cidade> <estado> <xsl:value-of select="estado"/> </estado> </xsl:template> <xsl:template match="itens_pedido"> <itens_pedido> <xsl:apply-templates select="item[produto='caneta azul']"/> </itens_pedido> </xsl:template> <xsl:template match="item"> <item> <produto> <xsl:value-of select="produto"/> </produto> <quant> <xsl:value-of select="quantidade"/> </quant> <preco> <xsl:value-of select="preco_unit"/> </preco> </item> </xsl:template> </xsl:stylesheet>

Figura 3 - Exemplo de um Template XSLT Tendo o documento de entrada, o processador percorre esse documento at encontrar o elemento correspondente ao Template e em seguida aplica as regras nele existentes. O elemento <xsl:apply-templates/> utilizado para a recursividade dos Templates, ou seja, indica o prximo elemento no qual sero aplicadas as regras respeitando a rvore hierrquica do documento XML. O conjunto dos Templates chamado de Stylesheets e este o elemento raiz de um documento XSLT. A XPath a linguagem responsvel por fazer a referncia entre partes especficas de um documento XML, ou seja, selecionar o que ser realmente utilizado para a visualizao. Utiliza expresses de caminho para localizar os ns dentro dos documentos XML. Na Figura 3, a expresso XPath item[produto='caneta azul'] seleciona apenas os itens cujo elemento produto contenha a String caneta azul. Ento o processador procura o template, correspondente rvore hierrquica do documento XML e testa a expresso XPath, caso

22

verdadeira ento coloca a formatao do template na sada. A XPath foi projetada para ser usada com a XSL, mas pode ser utilizada por softwares como XML parsing ou ento XPointer. Esse processamento gera um documento resultado mostrado na Figura 4.
<?xml version="1.0" encoding="UTF-8"?> <pedido> <numero>1000</numero> <cliente> <nome>Zandonai</nome> <cgc>00.000.000/0001-00</cgc> <rua>Av. Dr. Cesar Santos, 403</rua> <cidade>Passo Fundo</cidade> <estado>RS</estado> </cliente> <itens_pedido> <item> <produto>caneta azul</produto> <quant>100</quant> <preco>2</preco> </item> </itens_pedido> </pedido>

Figura 4 - Documento Resultado

Aps todas as informaes j estarem devidamente selecionadas, preciso apresentalas de forma organizada e para isso utilizada uma linguagem para a formatao, a XSL:FO. XSL:FO a linguagem responsvel pela definio da apresentao do documento XML, resultado de uma transformao XSLT ou de qualquer documento XML. A XML:FO habilita os desenvolvedores a usarem as mesmas propriedades de estilo das pginas Web para criar documentos com vrias pginas formatadas com preciso. Com ela se podem definir formataes diversas, como tamanho da pgina, margens, alinhamento de texto, cor de fonte e assim por diante (W3C, 10 mar. 2006). A XSL:FO compatvel tambm com o Adobe

Document Server5, podendo assim serem usados para gerar documentos PDF personalizados.

Documentao encontrada no site http://www.adobe.com

23

&('0)21

&3'8)3B%CED

345$%56879@A"$"

!#"%$

Figura 5 - Seqncia do processamento de um documento XML O processamento de um documento XML at a sua sada num dispositivo pode ser descrita da seguinte maneira: tendo um documento XML qualquer como entrada, so aplicadas algumas regras utilizando XSLT juntamente com XPath gerando assim um documento resultado. A seguir so aplicadas as formataes necessrias para diversos dispositivos como celulares, pginas Web e impressoras, utilizando a XSL:FO. A Figura 5 demonstra a seqncia de transformaes de um documento XML at a sua apresentao num dispositivo qualquer.

1.1.2 CSS

A CSS assim como a XSL responsvel pela apresentao de informaes para o usurio final. uma tecnologia utilizada por programadores Web que, permite a criao de pginas web de uma maneira mais fcil e padronizada, podendo fazer vrias formataes que no se podem fazer utilizando somente a linguagem HTML. As CSS tm a finalidade de retirar do HTML as declaraes que visam a formatao, apresentao do documento, ou seja, padronizando todo o cdigo. Assim, as formataes de fontes, colunas, espaamentos ficam separados. Se todos os textos dentro de uma tabela devem possuir uma cor especfica, ento a CSS define que todas as tabelas que sero criadas no HTML <table></table> tero essa cor. Isso acontece com qualquer propriedade de um documento HTML.

24

As regras CSS podem ser definidas num arquivo separado do documento HTML corrente ou ento nesse mesmo arquivo. As definies devem estar posicionadas entre as tags <head>, ou seja, para os arquivos CSS separados do documento HTML deve-se criar um link referenciando-o e as regras definidas localmente devem estar entre as tags <style> </style>. Para referenciar um arquivo CSS denominado stylesheets.css deve-se adicionar o seguinte cdigo <link rel=STYLESHEET href="styles/stylesheets.css" type=text/css> onde link a uma tag que faz a linkagem com o arquivo especificado em href onde colocado o nome do arquivo .css com as regras e type identifica o arquivo referido como CSS (CSS TUTORIAL, 25 mar. 2006). As folhas de estilo CSS so formadas por regras e essas regras compreendem um seletor, uma propriedade e um valor. Seletor seria uma entidade que identifica um elemento HTML ou uma classe ou pseudoclasse na qual a regra ser aplicada; Propriedade a caracterstica a ser modificada pela regra e Valor o aspecto a ser assumido pela propriedade anteriormente declarada. Uma Declarao CSS definida pela juno de Propriedade: Valor.
Seletor { propriedade: valor} uma regra CSS p {text-indent: 10pt;} exemplo de uma regra

Conforme o exemplo acima, so especificados atributos como o p o qual definido como o seletor. O atributo seguinte que est logo aps este seletor {textindent:10pt} denominado de declarao. Essa declarao formada por uma

propriedade e um valor onde, text-indent a propriedade e 10pt o valor da propriedade formando assim, uma regra CSS.
P { font-weight: bold; font-size: 11pt; color: #000066; margin-left: 1cm; text-align: center; }

Figura 6 - Cdigo exemplo de uma regra CSS A Figura 6 demonstra uma regra para um pargrafo <p> qualquer, onde P o elemento HTML a ser adicionada a regra. Dentro desta regra, encontram-se todas as declaraes onde: font-weight: bold define o estilo da fonte, font-size: 11pt especifica o tamanho da fonte, color: #000066 define a cor do pargrafo, margin-left: 1cm define a margem esquerda, text-align: center define o alinhamento.

2 LINGUAGENS PARA INTERFACES DE USURIOS

A IU (Interface de Usurio) uma das partes de uma aplicao que permite a interao com o usurio e por isso de extrema importncia. Uma aplicao sem uma interface fcil e gil impede que os usurios aproveitem ao mximo todo o seu rendimento. Ento, para que uma aplicao alcance o sucesso planejado preciso que este apresente uma interface ergonomicamente bem projeta. A variedade de novos dispositivos de interfaces de usurio tem propiciado o desenvolvimento de aplicaes que possam ser utilizadas a partir de diferentes tipos de dispositivos computacionais, ou seja, aplicaes com interfaces de usurios multiplataformas. Essas IUs propiciam diversas vantagens como por exemplo: prover separao natural entre o cdigo da interface e o cdigo da aplicao; facilitar o reuso para no programadores; reduzir o tempo de desenvolvimento das interfaces para mltiplos dispositivos; permitir prototipagem rpida da interface; facilitar a internacionalizao e localizao; possibilitar a correta apresentao das interfaces obtidas da rede de computadores atravs dos browsers web; possibilitar a extenso do suporte para tecnologias futuras. Para a criao dessas interfaces ditas amigveis so utilizadas algumas linguagens que esto descritas nesse captulo, e grande parte dessas linguagens so baseadas no XML. Como o XML uma linguagem de marcao, pode ser facilmente manipulada por qualquer sistema em qualquer dispositivo e plataforma, basta terem um interpretador para isso. Toda a configurao de uma interface pode ser colocada nas marcaes que ao serem lidas traduzem toda a interface. A maioria dessas linguagens utiliza as marcaes tanto para a descrio do

26

visual de uma aplicao como para toda a parte que engloba a interao das interfaces com o usurio seja a conexo com a parte lgica, o comportamento de um componente ou a prpria distribuio dos componentes na tela. A seguir so descritas algumas linguagens utilizadas para a descrio de IUs.

2.1 XUL

uma linguagem de marcao desenvolvida pelo grupo de desenvolvedores do projeto Mozilla para suportar suas aplicaes. um padro aberto, utiliza a notao XML e usa JavaScript para definir roteiros e automao. No um padro oficial, mas todos os documentos XUL (XML User Interface Language) so documentos XML vlidos e podem ser usados XML Namespaces, DTDs, folhas de estilo, JavaScript, dentre outras tecnologias (PUC-RIO, 25 mar. 2006). A XUL prov a capacidade de criar a maioria dos elementos encontrados em interfaces grficas modernas. Se forem utilizadas CSS para definio da aparncia e JavaScript para a definio do comportamento de um site por exemplo, as suas interfaces sero implementadas e modificadas com rapidez. Tambm pode ser usada com inmeros padres existentes incluindo o XSLT, o XPath e o DOM como funes para manipular uma interface do usurio. Com a XUL, podem ser criados vrios elementos incluindo uma moderna interface grfica (PUC-RIO, 25 mar. 2006). Alguns elementos que podem ser criados so: controles de entrada assim como TextBoxes e CheckBoxes; barra de ferramentas com botes ou outros contedos; menus em uma barra de tarefas ou menus de pop up; rvores hierrquicas ou tabelas de informao; atalhos para o teclado. A Figura 7 mostra uma definio bem simples de botes e a Figura 8 demonstra a interface concreta desse cdigo.

27

<button <button <button <button

label="Left" image="happy.png"/> label="Right" image="happy.png" dir="rtl"/> label="Above" image="happy.png" orient="vertical"/> label="Below" image="happy.png" orient="vertical" dir="rtl"/> Fonte: (PUC-RIO, 25 mar. 2006).

Figura 7 - Descrio de botes na linguagem XUL

Fonte: (PUC-RIO, 25 mar. 2006).

Figura 8 - Interface concreta correspondente ao cdigo XUL da figura 7

2.2 XAML

A XAML (eXtensible Application Markup Language) uma linguagem de interface desenvolvida pela Microsoft para a elaborao de interfaces para aplicaes do Framework.NET. formada por elementos XML para representar os componentes grficos, como layouts, painis. utilizada para a criao de interfaces de usurios de forma simples, rpida e totalmente visual, como em pginas Web (XAMLON, 25 mar. 2006).
<Button> <Button.Background> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStopCollection> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Magenta" Offset="0.25"/> <GradientStop Color="Blue" Offset="0.5"/> <GradientStop Color="White" Offset="1"/> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Button.Background> Click me! </Button> Fonte: (GRIFFITHS, 02 abr. 2006).

Figura 9 - Cdigo XAML

28

XAML permite o controle total do layout da aplicao incluindo textos, grficos, botes e todos os controles para interface de usurios do Framework.NET. Cada tag corresponde a uma classe do Framework.NET. Para criar um boto, por exemplo, basta usar a tag <Button> no arquivo XAML, como visto na Figura 9. A tag instancia um objeto Button usando o construtor padro e permite setar as propriedades do boto. A tag <Button.Background> ajusta a propriedade de fundo do boto, mas aninhado dentro deste, a tag <LinearGradientBrush.GradientStops> que seta o efeito gradiente linear da propriedade GradientStops (GRIFFITHS, 02 abr. 2006). A Figura 10 demonstra o boto gerado pelo cdigo da Figura 9.

Fonte: (GRIFFITHS, 02 abr. 2006).

Figura 10 - Boto gerado pelo cdigo XAML

2.3 UIML

A UIML (User Interface Markup Language) outra linguagem de marcao derivada do XML destinada criao de interfaces do usurio. A UIML permite que o usurio interaja com uma aplicao. Essa linguagem descreve os componentes da interface assim como as caractersticas, posicionamento, tudo atravs de tags. Para cada plataforma preciso criar descries de interfaces respeitando o vocabulrio especfico, ou seja, o conjunto de tags que so vlidas para representar os elementos de interface. Em UIML, uma interface do usurio um conjunto de elementos de interface com a qual o usurio interage e estes podem ser organizados de diversas formas para diferentes usurios e aplicaes. Cada elemento de interface possui dados (por exemplo, texto, sons, imagens) que so utilizados para realizar a comunicao com o usurio e tambm podem receber informaes sobre as interaes em runtime (tempo de execuo). Esses elementos de interface podem ser botes, por exemplo(UIML, 10 mar. 2006). A UIML coloca regras para as IUs, ou seja, cria um padro para que qualquer linguagem de programao reconhea os objetos. Desse modo, as IUs para as diferentes plataformas so padronizadas numa nica linguagem a partir da qual pode-se gerar automaticamente o cdigo da interface de usurio final em diferentes linguagens de programao (UIML, 10 mar. 2006). A especificao de uma interface em UIML descreve:

29

a aparncia de uma IU: por exemplo, um boto tem cor, disposio na tela, tipo da fonte, enfim propriedades; a interao do usurio com a IU: manipulao dos eventos dos botes, por exemplo. Quando um boto clicado ento executado um determinado evento; conexo da IU aplicao lgica: a parte onde as transmisses dos dados requisitados so efetuadas utilizando tecnologias apropriadas. A UIML apresenta como desvantagens:

permisso para que quaisquer componentes de interface possam ser definidos; exigncia de que cada aplicao possua uma folha de estilo para mapeamento; definio de eventos dependentes de uma implementao real; ausncia de grande quantidade de documentao. Na Figura 11 possvel visualizar uma interface abstrata descrita em linguagem

UIML, enquanto a interface concreta correspondente ao cdigo UIML apresentada pela Figura 12.

<UIML> <HEAD> <AUTHOR>Stephen Williams</AUTHOR> <DATE>December 3, 1997</DATE> <VERSION>1.0</VERSION> </HEAD> <APP CLASS="App" NAME="DialogApp"> <GROUP CLASS="Dialog" NAME="PrintFinishedDialog"> <ELEM CLASS="DialogMessage" NAME="PrintFinishedMsg"/> <ELEM CLASS="DialogButton" NAME="OKButton"/> </GROUP> </APP> <DEFINE NAME="OKButton"> <PROPERTIES> <ACTION VALUE="DialogApp.EXISTS=false" TRIGGER="Selected" /> </PROPERTIES> </DEFINE> </UIML> Fonte: (PUC-RIO, 25 mar. 2006).

Figura 11 - Cdigo de uma interface em UIML

30

Fonte: (PUC-RIO, 25 mar. 2006).

Figura 12 - Interface concreta correspondente ao cdigo da Figura 11. As declaraes das classes que iro tratar do estilo de apresentao de cada elemento so especificadas na tag ELEM, primeiro o nome da classe utilizando o atributo CLASS e depois o nome utilizando o atributo NAME. A definio das propriedades funcionais, ou seja, que no tratam da apresentao visual do elemento, descrita entre as tags <DEFINE> </DEFINE>. Neste caso est especificada apenas uma propriedade para a tag OKButton, que indica qual a ao que ocorre quando essa tag for ativada.

2.4 USIXML

A linguagem USIXML (USer Interface eXtensible Markup Language) mais uma linguagem de marcao derivada da XML para a descrio de interfaces de usurio, no necessariamente grficos. Permite a descrio de interfaces de usurios multimodais, CUIs (Character User Interfaces), GUIs (Graphical User Interfaces) e diferentes formas de interao, em diferentes plataformas e dispositivos. Descreve em alto nvel de abstrao os elementos de uma interface, no apenas os Widgets ou componentes grficos, mas tambm os modos de interao com o usurio. A linguagem USIXML consiste de uma UIDL (User Interface Description Language), nessa linguagem que se descreve toda a referncia ao modelo abstrato da interface, sem especificar a sua visualizao final. Suporta diferentes dispositivos, ou seja, a IU pode ser descrita de maneira com que os dispositivos usados nas interaes como mouse, teclado, sistema de reconhecimento de voz ou tela permaneam inalterados. Suporta plataformas independentes onde uma IU pode ser descrita de maneira autnoma respeitando cada uma das diferentes plataformas computacionais como celulares, PDAs, notebooks, computadores pessoais dentre outros. A linguagem USIXML definida em um conjunto de XML Schemas onde cada schema corresponde a um dos modelos estudados pela linguagem (USIXML, 15 abr. 2006).

31

A linguagem utiliza vrios nveis de detalhes e abstraes e permite especificar mltiplos modelos envolvidos no projeto de uma interface de usurio como: tarefa, domnio, apresentao, dilogo e contexto de uso, o qual decomposto em usurio, plataforma e ambiente. Segundo Quentin (LIMBOURG, 06 maio 2006) esses modelos esto estruturados de acordo com quatro nveis de abstrao definidos no Cameleon Reference Framework: a FUI (Final User Interface), a CUI (Concrete User Interface), a AUI (Abstract User Interface) e, T&C (Task & Concepts). A Figura 13 representa esses nveis de abstrao. O Cameleon Reference Framework utilizado para gerao de interface de usurio e define passos para desenvolver interfaces de usurio para aplicaes interativas sensveis ao contexto. Logo abaixo da figura, est especificada cada uma dessas fases, o que cada uma engloba.

Tarefas & Conceitos

Interface de Usurio Abstrata

Interface de Usurio Concreta

Interface de Usurio Final

Fonte: (VANDERDONCKT, 06 maio 2006).

Figura 13 - Os quatro nveis de abstrao do framework Cameleon

Tarefas & Conceitos: descreve as vrias tarefas a serem executadas e conceitos de domnio, alm disso, representam como tais conceitos so requeridos pelas tarefas. Interface de Usurio Abstrata: uma expresso padro que gera conceitos e funes do domnio de maneira que sua representao fique independente das interaes disponveis na interface alvo. Os elementos usados na interface lgica so abstraes de objetos concretos existentes.

Interface de Usurio Concreta: concretiza uma IUA em CIOs (Concrete Interaction Objects). Tambm define o layout de componentes e a navegao da interface resumindo uma IUF em uma definio de IU independente da plataforma. A CUI

32

tambm pode ser considerada como um reification de uma AUI de alto nvel e uma abstrao da FUI respeitando a plataforma. Interface de Usurio Final: a interface de usurio operacional. praticamente a interface concreta codificada em alguma linguagem como JAVA, por exemplo.

Fonte: (USIXML, 16 abr. 2006)

Figura 14 - Descrio do Modelo principal A descrio completa de todos os modelos utilizados pela linguagem USIXML est apresentada na Figura 14. Cada um dos modelos tem uma especificao distinta e esto todas englobadas num modelo principal, o uiModel6. Cada um desses modelos est descrito a seguir:

A especificao completa do modelo encontra-se em XMLSchema na pgina principal da linguagem http://www.usixml.org.

33

uiModel: o modelo principal que contm todas as caractersticas em comum de todos os modelos de componentes de uma IU. A uiModel no precisa incluir todos os modelos de componentes e tambm pode ter mais que um tipo particular de modelo.

auiModel: a mesma definio do nvel AUI do framework Cameleon. Os elementos usados na interface lgica so abstraes de objetos concretos existentes, como janelas, botes.

cuiModel: a mesma definio do nvel CUI do framework Cameleon. a reificao da AUI, mas sem especificaes de linguagens. Seria uma abstrao da interface final. contextModel: um modelo que descreve os trs aspectos de um contexto de uso na qual o usurio final est realizando uma tarefa interativa com uma plataforma computacional especfica em um dado ambiente. Conseqentemente, um

contextModel consiste de um modelo de usurio, um modelo de plataforma e um modelo de ambiente. resourceModel: um modelo que contm definies de recursos ligados a interao abstrata ou concreta dos objetos, os quais dependem de dados de localizao como linguagem, cultura, dentre outros. Um recurso algum contedo que pode estar ligado a um objeto de interao. domainModel: uma descrio das classes de objetos manipulados por um usurio enquanto interage com o sistema. mappingModel: um modelo que contm uma srie de mapeamentos relacionados entre os modelos ou elementos de modelos. Um mappingModel serve para reunir um conjunto de modelos que so semanticamente relacionados. taskModel: um modelo que descreve como a interao de tarefas visualizada pelo usurio final interagindo com o sistema. Um taskModel representa uma decomposio de tarefas em sub-tarefas ligadas com um relacionamento de tarefas. transformationModel: contm um conjunto de regras que permitem a transformao de uma especificao (de um certo nvel de abstrao) em outro ou adaptar uma especificao para um novo contexto de uso. developmentLibrary: descrio de uma biblioteca de desenvolvimento. A seguir esto representadas em duas figuras, a interface final e um cdigo na linguagem USIXML. A Figura 16 representa o cdigo que corresponde ao Modelo principal que engloba todos os demais modelos como o cuiModel e o auiModel. A Figura 15 representa a parte visual correspondente codificao.

34

Figura 15 - Descrio visual do cdigo na linguagem USIXML

<?xml version="1.0" encoding="UTF-8"?> <uiModel xmlns="http://www.usixml.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.usixml.org/ http://www.usixml.org/spec/UsiXML-ui_model.xsd" id="Teste_10" name="Teste" creationDate="2006-06-10T23:14:17.609-03:00" schemaVersion="1.6.3" xsi:type="uiModel"> <head> <version modifDate="2006-06-10T23:14:17.625-03:00">1</version> <authorName>Giovani</authorName> <comment>Generated by GrafiXML 1.1.999 build id : 200602081036</comment> <comment>WARNING : AUI Model save is a work in progress. Use it at your own risk</comment> </head> <auiModel id="Teste-aui_10" name="Teste-aui"> <abstractContainer id="window_component_0" name="window_component_0"> <abstractContainer id="box_1" name="box_1"> <abstractIndividualComponent id="button_component_2" name="button_component_2"/> <abstractContainer id="tabbed_component_3" name="tabbed_component_3"/> <abstractContainer id="tabbed_component_4" name="tabbed_component_4"/> </abstractContainer> </abstractContainer> </auiModel> <cuiModel id="Teste-cui_10" name="Teste-cui"> <window id="window_component_0" name="window_component_0" width="400" height="350"> <box id="box_1" name="box_1" type="vertical"> <button id="button_component_2" name="button_component_2" isVisible="true" isEnabled="true" textColor="#000000"/> </box> </window> </cuiModel> </uiModel>

Figura 16 - Cdigo utilizando a linguagem USIXML

35

Conforme a descrio do modelo utilizado pela linguagem USIXML descrito acima, percebe-se que alguns dos modelos esto relacionados nesse cdigo apresentado na Figura 16. Esse cdigo foi gerado pela ferramenta GrafiXML. Como visto, o elemento raiz do cdigo a tag <uimodel> e dentro desta esto aninhadas a <head> onde esto descritos os dados do autor, comentrio, data, verso. Em seguida aparece a <auiModel> onde esto descritos os nomes dos componentes e id, como por exemplo, o componente Window_component_0 que corresponde janela da Figura 15. Na <cuiModel> so especificados o posicionamento e as caractersticas da visualizao dos componentes como por exemplo, width="400" height="350" que correspondem ao tamanho da janela. O boto da Figura 15 est especificado da seguinte maneira, como visto na descrio do modelo concreto do cdigo. Percebe-se que o boto tem um nome e um id para a sua identificao e algumas caractersticas como isVisible=true, que indica se o boto est visvel, isEnabled=true, que indica se o boto est habilitado e a cor do boto definida em textcolor. Todos os componentes adicionados na janela tambm so includos na codificao da linguagem USIXML. Segundo Quentin (LIMBOURG, 06 maio 2006), so oferecidas algumas ferramentas de suporte que trabalham com a linguagem USIXML e esto descritas abaixo: engenharia reversa de cdigo de IU: uma ferramenta especfica, chamada ReversiXML, faz engenharia reversa automtica do modelo da apresentao de uma pgina Web HTML existente nos nveis de CUI e de AUI, com ou sem inter-model, mapeamento de inter-model. Esta ferramenta permite que os desenvolvedores recuperem uma IU existente para incorpor-la outra vez no processo do desenvolvimento. Neste caso, uma re-engenharia pode ser obtida combinando duas abstraes, uma traduo, e duas reificaes. Isso particularmente til para a evoluo de sistemas legados; edio de modelo: como a edio de uma nova IU na linguagem USIXML pode ser considerada como uma tarefa tediosa, um editor especfico chamado GrafiXML foi desenvolvido para ajudar no desenvolvimento de modelos USIXML. Neste editor, o designer pode desenhar na manipulao direta toda a interface grfica colocando CIOs e editando suas propriedades no Composer, que so refletidas imediatamente no projeto de IU. A qualquer hora, o designer pode querer ver as especificaes correspondentes na linguagem USIXML e edit-las. Selecionar um tag de USIXML automaticamente indicando possveis valores para esta tag em um menu contextual. Quando a tag ou os elementos so modificados, essas mudanas so propagadas na

36

representao grfica. Dessa maneira, um mapeamento bidirecional mantido entre uma IU e sua especificao USIXML: cada vez que uma parte modificada, a outra atualizada de modo correspondente. O que distingue GrafiXML de outros editores grficos de IU a capacidade de gerar automaticamente especificaes USIXML nos diferentes nveis de abstrao: FUI e AUI; especificao e aplicao da transformao: AGG (Attributed Graph Grammars tool) pode ser considerado como um ambiente de programao genuno baseado em transformaes grficas. AGG permite a expresso grfica de grficos dirigidos, representados e atribudos (para expressar especificaes e regras). Tem uma biblioteca poderosa contendo algoritmos importantes para a transformao grfica, anlise crtica, verificao de consistncia, consistncia da aplicao da condio positiva e negativa;

2.5 Comparativo entre as linguagens

A seguir, a Tabela 1 demonstra um comparativo entre as linguagens analisadas neste trabalho. Alguns aspectos so considerados essenciais numa linguagem para gerao de interfaces, como portabilidade e facilidade de programao. Cada um dos itens a serem comparados est especificado da seguinte maneira: facilidade de programao: devido ao fato de que todas as linguagens so baseadas no formato XML, a programao dos documentos nas diferentes linguagens um trabalho bastante simples, podendo ser facilmente substitudo por um editor; extensibilidade: a capacidade de criar novos componentes necessrios no desenvolvimento da interface; elementos de interface: suporte a componentes de interfaces como buttons, windows, menus dentre outros; eventos: suporte ao comportamento de componentes; portabilidade: capacidade que um sistema tem de ser executado em diferentes arquiteturas de sistemas operacionais ou de dispositivos (hardware); integrao com outras tecnologias: suporte integrao com ferramentas externas; documentao: facilidade de encontrar conceitos, documentos relacionados.

37

Tabela 1 Comparativo entre as linguagens XUL Alta Sim Sim Sim Alta Sim Baixa XAML Alta Sim Sim Sim Baixo No Mdia UIML Alta No Sim Sim Mdia Sim Baixa USIXML Alta Sim Sim Sim Alta Sim Mdia

Facilidade de programao Extensibilidade Elementos de interface Eventos Portabilidade Integrao com outras tecnologias Documentao

A tabela 1 mostra um comparativo entre algumas linguagens especficas para a gerao de interfaces de usurio. Como todas essas linguagens so baseadas no XML, a programao destas linguagens torna-se relativamente mais fcil, pois a sua sintaxe e regras so as mesmas do XML. J falando de integrao com outras tecnologias, apenas a XAML por ser de uma plataforma especfica, no tem integrao como as outras linguagens. A documentao dessas linguagens deixa muito a desejar e ainda precisa ser trabalhada, a maioria dessas linguagens no tem uma documentao bem formulada, apenas a XAML tem um acervo maior de documentos. Os Eventos e Elementos de interface so tratados por todas as linguagens, enquanto a extensibilidade s no associada a UIML por no permitir a criao de novos componentes.

3 TRABALHOS RELACIONADOS

A necessidade por ferramentas de auxlio gerao de interfaces de usurio para multiplataforma vem crescendo e vrios estudos correlacionados j foram ou esto sendo desenvolvidos. Os trabalhos citados a seguir apontam tecnologias que esto em ascenso no mercado nesse ramo da IU. A gerao de interfaces de usurio vem tornando-se muito importante principalmente com a criao de novos dispositivos de diferentes plataformas. O desafio dos pesquisadores desenvolver algo que possa interagir com o usurio indiferente da plataforma ou do dispositivo e com o mnimo de retrabalho possvel. Os trabalhos listam linguagens para a descrio de interfaces de usurios como USIXML, UIML, XUL, XAML, XForm dentre outras. A integrao dessas linguagens com outras tecnologias como JSP, J2ME, WML, TransformiXML e demais paradigmas s tende a crescer e a melhorar cada vez mais a Interao Homem-Computador. Alguns trabalhos fazem comparaes entre linguagens, outros j propem ferramentas especficas utilizando uma linguagem escolhida, enfim todos tendo como tema central a gerao de interfaces de usurio.

3.1 Gerao de interfaces multiplataforma

Alguns trabalhos foram desenvolvidos para serem utilizados em diferentes plataformas podendo assim serem integrados com diferentes dispositivos, no tendo nenhuma restrio quanto a essa integrao. Para que uma aplicao possa ser executada em dispositivos

diferentes, vrios aspectos devem ser levados em considerao como: o tamanho de tela, os diferentes tipos de dispositivos de entrada e sada, a largura de banda, dentre outras. A maioria dos trabalhos citados foca essa dificuldade que est sendo estudada, a portabilidade e

39

flexibilidade das aplicaes. Os trabalhos esto subdivididos em trs partes conforme a abordagem de seus contedos.

3.1.1 Dispositivos Mveis

Os dispositivos mveis esto tornando-se comuns entre as pessoas devido ao fato de serem relativamente pequenos e com inmeras funcionalidades. Alguns dos trabalhos propostos focam quase que exclusivamente a gerao de interfaces para esses dispositivos, como o caso do trabalho desenvolvido por Viviane (BERNARDO, 06 abr. 2006) que visa a gerao automtica de web sites para ambientes WAP. Outro trabalho que evidencia essa gerao de interfaces o trabalho de Windson (CARVALHO, 08 abr. 2006), que prope um ambiente de desenvolvimento de aplicaes multiplataformas e adaptativas para dispositivos mveis. O trabalho desenvolvido por Viviane (BERNARDO, 06 abr. 2006) tem como proposta estudar e implementar um sistema de gerao automtica de Web sites para ambientes WAP. O autor desenvolve uma aplicao para dispositivos WAP chamada SISCA_WAP, a qual uma ferramenta destinada aos alunos de uma universidade. Nela, os alunos podem consultar as suas notas, disciplinas, horrios. No trabalho so utilizadas algumas tecnologias como: Gerao automtica de Web sites; WAP (Wireless Application Protocol); XML; JSP (Java Server Pages); WML (Wireless Markup Language). Essas tecnologias so a base do trabalho e com elas pode-se desenvolver aplicaes variadas para dispositivos WAP. A WAP um protocolo usado em dispositivos mveis, como celulares e PDAs, que do suporte a navegao na Web. a unio da tecnologia sem fio com a Internet. Ela tem algumas restries como as telas pequenas ou os recursos limitados de entrada de dados e interao com o usurio. A JSP, tambm utilizada no trabalho, uma linguagem que permite a integrao entre cdigos Java e HTML, trazendo muito mais recursos aos programadores e poder de desenvolvimento. A WML uma linguagem desenvolvida para a criao de pgina para os dispositivos mveis, no caso uma linguagem para a tecnologia WAP. Essa linguagem pode ser comparada ao HTML, mas contendo algumas diferenas como a de no possuir todos os recursos do HTML e a de ser desenvolvida para a plataforma WAP, uma forma reduzida. A linguagem WML pode ser limitada, mas possui diversas funes do HTML como: suporte a

40

texto e imagens, variveis, suporte internacional e a gerao dinmica de contedo WAP dentre outras. As pginas existentes em HTML podem ser reutilizadas pegando seus contedos e publicando-os no formato WML apenas efetuando algumas alteraes para a plataforma WAP. Para que uma pgina WML seja gerada automaticamente podem ser utilizadas tcnicas existentes na gerao automtica de web sites, como a separao da apresentao do site dos seus contedos. No trabalho, cita-se que para um gerador funcionar corretamente preciso que se faam as especificaes do web site: contedo: so os dados do web site; navegao: a organizao do web site, a interconexo entre as pginas; apresentao: a apresentao das informaes no web site, a formatao, estilos.

Fonte: (BERNARDO, 06 abr. 2006).

Figura 17 - Representao do processo de gerao automtica

A Figura 17 demonstra o processo de gerao automtica de Web sites onde h uma especificao de alto nvel de uma aplicao qualquer a ser desenvolvida. Depois disso, gerada uma especificao intermediria, ou seja, a organizao do contedo, da navegao e da apresentao. Em seguida, o programa gerador combina todas as especificaes gerando o Web site automaticamente. Como cada dispositivo tem especificaes diferentes uns dos outros, como o nmero de linhas ou o tamanho da tela, necessrio informar ao sistema o dispositivo a ser usado alm das especificaes XML. A aplicao desenvolvida por Viviane (BERNARDO, 06 abr. 2006) chama-se SISCA_WAP. Essa ferramenta apenas um exemplo de como usar um aparelho mvel num meio acadmico. A ferramenta permite que os alunos consultem as suas notas, disciplinas oferecidas por perodo e listagem dos horrios de uma determinada disciplina. Foram utilizadas as linguagens Java e WML e o banco de dados MySQL.

41

O outro trabalho estudado e que enfatiza o desenvolvimento para dispositivos mveis foi desenvolvido por Windson (CARVALHO, 08 abr. 2006). Esse trabalho prope um ambiente para desenvolvimento de aplicaes multi-plataforma e adaptativa para dispositivos mveis. No seu estudo de caso, desenvolvido um sistema para a visualizao e a postagem de imagens fotogrficas e comentrios, utilizando o ambiente proposto na dissertao. Esse sistema chamado de M_Flog e composto de um servidor Web e de um cliente para DMs.

Fonte: (CARVALHO, 08 abr. 2006).

Figura 18 - Descrio do M-FLOG

A Figura 18 demonstra uma viso geral da aplicao desenvolvida e seus relacionamentos com os frameworks propostos na dissertao. Para construir a aplicao do DM, a ferramenta UIG foi utilizada para gerar as interfaces, os controladores e os beans dos formulrios. Para realizar a comunicao com o MAS (Mobile Application Servers) do MFlog, cdigos foram escritos nos controladores dos formulrios. Quando o contedo a ser requisitado no necessita de adaptao, esses cdigos utilizam o framework Requisitor para enviar a requisio (secagem de login e senha). J nos casos em que as requisies podem ter respostas adaptadas, o MobAC utilizado (requisio de imagens). O MAS do M-Flog tanto pode ser acessado por dispositivos mveis quanto por um Browser de um PC. Para sua construo, o framework Mobile Adapter foi utilizado. A seguir so descritas algumas ferramentas utilizadas para a gerao do ambiente. Para melhorar o desenvolvimento de aplicaes preciso superar alguns desafios como: a descrio, independente de dispositivo e plataforma, da interface com usurio; a

42

adaptao do contedo acessado pelas aplicaes e o desenvolvimento de aplicaes multiplataformas. A descrio das interfaces de usurio em uma aplicao onde o engenheiro projeta essas interfaces. Um dos grandes problemas projetar uma interface que possa adequar-se a diferentes tipos de dispositivos e executar em diferentes plataformas de programao. Essa definio feita atravs de tags pr-estabelecidas para a gerao de interfaces (por exemplo, a UIML) e em seguida so transformados em cdigo executvel ou em documentos de uma linguagem de marcao. A adaptao baseia-se na caracterstica dos dispositivos, nas preferncias dos usurios e no contexto do ambiente em que o dispositivo se encontra (mudana na largura de banda, por exemplo). Ser adaptvel significa ter a habilidade de modificar o comportamento para responder a eventuais mudanas de um ambiente. O trabalho acima apresentado e desenvolvido por Windson (CARVALHO, 08 abr. 2006) enfoca o desenvolvimento, pois esta parte dentro de um projeto um grande problema e nenhuma soluo vislumbra simultaneamente a descrio da aplicao e a sua integrao com as arquiteturas de adaptao de contedo. Ainda, apresenta um ambiente para a programao em dispositivos mveis e composto pelos frameworks XFormUI, Mobile Adapter, Mobile Adapter Client (MobAC), Requisitor e pela ferramenta de gerao de cdigo User Interface Generator (UIG). Esse ambiente permite ao engenheiro descrever os formulrios da aplicao, suas validaes e o estilo das interfaces em XForms. Com esses documentos, o engenheiro utiliza a ferramenta, UIG para produzir cdigo em uma plataforma de programao. Esse cdigo gerado utiliza o framework multi-plataforma XFormUI para a composio dos formulrios. Por fim, o engenheiro complementa a codificao acrescentando a lgica de negcio inerente aplicao. Algumas plataformas de programao foram investigadas neste trabalho como, por exemplo, J2ME MIDP 2.0/CLDC 1.1 . Essa plataforma utilizada para o desenvolvimento de aplicaes para dispositivos de pequeno porte, especialmente sem fio. Tambm, ela utiliza a linguagem de alto nvel Java que portvel. O MIDP construdo sobre a especificao CLDC (Connected, Limited Device Configuration). CLDC uma especificao cuja implementao se faz sobre dispositivos de pequeno porte, tais como PDAs e celulares, com menos de 512 KB de memria disponvel para as aplicaes e sem conexo permanente. A unidade bsica de um programa MIDP um Midlet, este executa no dispositivo em um ambiente de execuo chamado de MidletSuite que limita as permisses de acesso do Midlet ao dispositivo. O MIDP adiciona APIs com diversas

43

funcionalidades, tais como: armazenamento de dados permanentes, comunicao e interface com o usurio. O MIDP 2.0 possui maior quantidade de componentes do que a verso 1.0 e executa sobre o CLDC 1.1. O trabalho utiliza frameworks que so considerados como elementos para o reuso de componentes de arquiteturas orientadas a objetos. Esses frameworks determinam a arquitetura da aplicao e predefinem parmetros de projeto, permitindo ao engenheiro concentrar-se nos detalhes especficos da aplicao. Os frameworks XFormUI e Requisitor propostos no trabalho tm o objetivo de diminuir a reescrita na construo das interfaces de usurio e na realizao de comunicao de dados. O framework XFormUI foi projetado para facilitar o processo de gerao de cdigo da ferramenta UIG e contm componentes que tm o mesmo nome e comportamento dos componentes do XForms. XForms uma linguagem baseada em XML que permite a definio de formulrios, eventos e dados iniciais dos formulrios. A sua estruturao baseada no modelo MVC (Model/Viewer/Controller). XForms composta pelos dados iniciais, pelos componentes de interface e pelos eventos, assim construda de modo mais abstrato, com a separao de dados, lgica e apresentao. A ferramenta UIG permite ao engenheiro de software descrever os formulrios de uma aplicao utilizando o XForms para definir os componentes, o CSS para definir o estilo e o XML Schema para definir restries aos campos de entrada de dados do formulrio. O engenheiro cria um documento XML, o Manifest.xml, que define quais formulrios sero mapeados e para qual plataforma o cdigo ser gerado. Ele dispara a ferramenta UIG e esta gera o cdigo dos formulrios utilizando o framework XFormUI. Os frameworks Mobile Adapter, Requisitor e MobAC facilitam a construo de Mobile Application Servers que adaptam contedo e aplicaes para dispositivos mveis que acessam essas informaes adaptadas. O Mobile Adapter e MobAC propiciam uma forma eficiente de captura, manipulao e gerenciamento dos perfis do dispositivo, do usurio e do contexto em que executam. O Requisitor permite o estabelecimento de comunicao de dados entre servidores remotos e as aplicaes nos dispositivos mveis. Os trabalhos acima citados demonstram tecnologias que envolvem a gerao de interface de usurios para dispositivos mveis. Essas tecnologias, frameworks, linguagens, tem grande importncia para a criao de aplicaes, algumas mais superficiais ainda em desenvolvimento, j outras que esto bem mais estruturadas e englobam uma grande quantidade de paradigmas.

44

3.1.2 Tecnologias Web

Os trabalhos propostos por Macilon e Jair (COSTA NETO, LEITE; 22 mar. 2006) e Lirisnei e Jair (SOUSA, LEITE; 25 mar. 2006) utilizam as tecnologias Web para a gerao de interfaces. Esses trabalhos focam especificamente a gerao de interfaces para aplicaes Web utilizando algumas tecnologias como XICL, IMML, CC/PP que facilitam essa gerao. O trabalho de Macilon e Jair (COSTA NETO, LEITE; 22 mar. 2006) tem por objetivo apresentar uma proposta para o processo de desenvolvimento de interfaces de usurio para mltiplas plataformas. Nesse trabalho so descritos problemas enfrentados e possveis solues. A proposta do trabalho consiste em desenvolver interfaces para aplicaes web utilizando para isso as abordagens do W3C para a independncia dos dispositivos. Algumas tecnologias so utilizadas como, a IMML (Interactive Message Modeling Language) para a descrio de interfaces de usurios, CC/PP(Composite Capability/Preference Profile) para os perfis de dispositivos e as regras de adaptao so utilizadas por um programa no ladoservidor responsvel pela gerao dinmica da IU. A seguir so apresentadas as tecnologias utilizadas nesse trabalho. Vrios problemas devem ser resolvidos como a infraestrutura de comunicao ou o desenvolvimento de interfaces de usurio. Para os autores, a Web oferece todas as condies necessrias para que uma aplicao funcione devidamente nos diferentes dispositivos, pois a maioria desses dispositivos j acessam a Web, como celulares, TVs, PDAs. Para que essas aplicaes funcionem, basta serem adaptadas para o dispositivo especfico ficando muito mais fcil com a utilizao da Web. Por isso, esse trabalho tem como objetivo focar o desenvolvimento de IU multiplataformas utilizando a Web. O trabalho cita que existem vrios fatores envolvidos ao se desenvolver interfaces para mltiplas plataformas e isso causa uma grande variabilidade do contexto de uso. Esse contexto definido por trs classes: usurio: as pessoas que pretendem usar ou que usam o sistema; plataforma: dispositivos computacionais que podem ser usados para interao com o sistema; ambiente: quaisquer fatores que possam influenciar o comportamento do sistema ou dos usurios. Tambm, um dos principais problemas encontrados so as variabilidades nas modalidades de entrada e sada, por exemplo, os Celulares tem o teclado; os PDAs tem a

45

caneta, tela sensvel; a TV tem o controle remoto e assim por diante. Outro problema a variabilidade no tamanho das telas dos dispositivos, um Desktop tem resoluo de 1024x1280 e 17 polegadas, por exemplo, enquanto um celular tem uma resoluo de 80x60 e 2 polegadas. Assegurar a adaptabilidade das aplicaes uma questo muito importante no desenvolvimento para mltiplas plataformas. O desenvolvimento de IU multi-plataforma lidar com inmeras variveis. A proposta do trabalho para o desenvolvimento de interfaces multi-plataforma utiliza a adaptao dinmica. Para isso, foi utilizada a abordagem de desenvolvimento baseado em modelos que requer a construo de diversos modelos que descrevem o domnio de aplicao, as caractersticas dos usurios, as tarefas que os usurios podem realizar utilizando a interface e a estrutura e o comportamento da interface. A estratgia utilizada no trabalho considera uma descrio independente de plataforma dos modelos do domnio, da interao e da apresentao, ou seja, procuram descrever a funcionalidade, interatividade e

comunicabilidade da interface. Por isso foi utilizada uma linguagem denominada IMML que tem esse mesmo propsito. Essa linguagem gera uma descrio em uma linguagem especfica para cada dispositivo, como HTML e WML. O trabalho tambm utiliza um protocolo desenvolvido pela W3C que tem a funo de armazenar diversas informaes sobre cada dispositivo e as preferncias de cada usurio denominada de CC/PP. O perfil CC/PP de um dispositivo descrito por uma linguagem padro da W3C para modelagem de metadados: a RDF (Resource Description Framework). A gerao dinmica combina a descrio abstrata da IU descrita na linguagem IMML, a descrio em CC/PP do dispositivo e as regras de adaptao, isso tudo sendo executado em tempo de execuo. Essas regras so definidas para cada perfil de dispositivo, ou seja, so construdos prottipos de forma que se possa visualizar as sadas possveis para cada tipo de dispositivo. O processo realizado no servidor em tempo de execuo. A gerao das interfaces especficas para cada dispositivo utiliza ainda as caractersticas modulares das linguagens XHTML, CSS e SMIL (Synchronized Multimedia Integration Language). Assim, permitindo que o servidor possa gerar dinamicamente diferentes verses da mesma interface. J o segundo trabalho proposto por Lirisnei e Jair (SOUSA, LEITE; 25 mar. 2006) apresenta a linguagem de interface do usurio denominada XICL, que tambm uma linguagem de marcao derivada da XML. Associada a esta linguagem est um ambiente de desenvolvimento, o XICL Studio. O trabalho aborda que preciso a criao de novos componentes de interfaces de usurio para sistemas Web, em especial do estilo WIMP (Windows, Icons, Menus and Pointing device). Isso devido principalmente ao crescimento

46

das aplicaes ditas SBB (Software Baseado-em-browser off-line) ou das aplicaes HTML que possuem toda a sua funcionalidade executada em um browser desconectado da Internet. Algumas tecnologias foram analisadas seguindo algumas caractersticas como a reusabilidade, extensibilidade, portabilidade, baixo-custo e se seguem padres da W3C. Os Java Applets so componentes desenvolvidos pela linguagem Java e podem ser executados em um browser que possua uma JVM (Java Virtual Machine) instalada. Essa tecnologia satisfaz os itens de reusabilidade, extensibilidade e portabilidade, mas limitada no desempenho e no segue padres da W3C. A tecnologia Macromedia Flash fechada e proprietria alm de necessitarem de mquinas de alto desempenho para executarem um aplicativo incorporado ao browser. Ela no satisfaz os itens de extensibilidade, portabilidade e baixo-custo. A W3C recomenda algumas tecnologias para a gerao de interfaces de usurio em sistemas Web como: HTML, para descrever documentos de hipertexto; a CSS, para a descrio de estilos; o DOM (Document Object Model), para a definio de interfaces de programao para os objetos de um documento HTML; e linguagens scripts como a ECMAScript que permite a programao do lado cliente. Esse conjunto de tecnologias tambm conhecido como HTML Dinmica, ou DHTML. O trabalho aborda um comparativo entre linguagens de interface de usurio, dentre elas algumas como, UIML e XUL j citadas em trabalhos anteriores e tambm descreve sobre a linguagem XICL. Sua sintaxe baseada na sintaxe da API DOM e na sintaxe das linguagens ECMAScript, HTML e XML. Os componentes da interface so descritos a partir de elementos HTML utilizando a XICL, alm de dar a possibilidade de criar novos componentes a partir de componentes XICL j criados.

47

Fonte: SOUSA, LEITE; 25 mar. 2006.

Figura 19 - Processo de desenvolvimento utilizando a linguagem XICL

A Figura 19 descreve o processo de desenvolvimento de uma interface de usurio utilizando a XICL. Na entrada, o desenvolvido descreve a sua interface utilizando a XICL e, pode ser utilizado um componente de interface desenvolvido em XICL armazenado numa biblioteca, denominado de XICL Lib. Em seguida o tradutor XICL gera a interface de usurio interpretando a descrio das interfaces e dos componentes em XICL. XICL STUDIO um ambiente para desenvolvimento de interfaces em XICL. Esse ambiente possui trs componentes: editor: permite ao usurio escrever o cdigo de um componente ou de uma interface utilizando a XICL; biblioteca XICL Lib: possibilita o armazenamento de componentes para reutilizao no desenvolvimento de novas interfaces. tradutor: responsvel por interpretar o cdigo em XICL e gerar um cdigo nas tecnologias da DHTML, que podem ser interpretadas pelos browsers. Utiliza componentes disponveis na biblioteca XICL Lib.

48

3.1.3 Aplicaes utilizando especificamente a Linguagem UIML

Uma das diversas linguagens utilizadas para a criao de interfaces existentes e que j est a mais tempo no mercado a UIML. Alguns dos trabalhos citados utilizam essa linguagem que bastante funcional e juntamente com outras tecnologias proporciona um sistema bem estruturado. Dois trabalhos utilizam essa linguagem como padro para a descrio da interface: o trabalho de Francis (CASADO et al, 22 mar. 2006) e o de Ayslan, Antonio e Srgio (POSSEBOM; SILVA FILHO; SILVA, 2005). O trabalho de Francis (CASADO et al, 22 mar. 2006) faz uma comparao entre linguagens para a gerao de interfaces de usurios multiplataforma, colocando vantagens e desvantagens de cada uma. Alm disso, ela descreve uma ferramenta para a gerao utilizando a linguagem UIML. Essa ferramenta permite criar e visualizar interfaces para as plataformas Java Standart, J2ME em Palm e HTML. uma ferramenta IDE para a criao de interfaces abstratas e multiplataformas, ou seja, que permite a interface ser independente de dispositivo, tecnologia e plataforma. Para a implementao utilizada uma biblioteca Java que trabalha com arquivos XML e satisfaz a especificao UIML. Tambm utilizado um processador XML para gerar as interfaces Java Standart, J2ME e HTML a partir de um documento UIML. Essa ferramenta permite ao desenvolvedor abstrair todos os detalhes da visualizao da interface em uma plataforma separando o cdigo da interface da sua parte lgica. Podem ser utilizadas algumas linguagens para a construo de interfaces, como a UIML que utilizada na ferramenta, assim como outras como USIXML, AUIML, XAML dentre outras. Algumas das linguagens utilizadas j foram citadas, como a XAML e a USIXML. Outra linguagem apresentada a AUIML (Abstract User Interface Markup Language) que foi desenvolvida pela IBM e permite representar diferentes componentes grficos, suas propriedades e distribuio na tela. A IBM desenvolveu um conjunto de ferramentas que contm renderers para gerar interfaces em Java Swing e em HTML. Os autores escolheram trabalhar com a linguagem UIML que tambm cria interfaces de usurios para diferentes plataformas e j citadas. A ferramenta IDE implementada no trabalho composta por duas partes: a parte para desenhos e a outra para os cdigos. Ela baseada em formulrios e podem utilizar campos como etiquetas, botes, campos de texto, botes de seleo, listas de seleo dentre outras. Os prottipos foram testados nas plataformas: Web utilizando HTML, aplicaes para Desktop

49

utilizando J2SE e para dispositivos de pequeno porte como PDAs e celulares utilizando J2ME. Para manipular os arquivos UIML foi utilizada uma biblioteca desenvolvida em Java a jUIML que permite tanto a leitura quanto a escrita de documentos UIML. Essa biblioteca utiliza a API de jDOM para a parte de manipulao do XML e Xerces para a parte de validao. utilizado XSLT para traduzir o documento para a linguagem especfica da plataforma selecionada. Assim, um componente boto em UIML deve ser transformado em JButton caso for utilizado componentes Swing. Para a plataforma J2ME utilizada uma biblioteca chamada kAWT. J para a gerao do HTML, o documento UIML se converte em um elemento Form de HTML com seus elementos correspondentes. O trabalho desenvolvido por Ayslan, Antonio e Srgio (POSSEBOM; SILVA FILHO; SILVA, 2005) apresenta a linguagem UIML para o desenvolvimento de interfaces de usurio e o modelo arquitetural MIM (Meta-Interface Model) para a organizao dos componentes. Quando uma aplicao desenvolvida para um computador pessoal esta mesma aplicao pode ser re-projetada para uso nos diversos dispositivos existentes como PDAs, celulares. Essas aplicaes precisam que a sua interface de usurio seja remodelada produzindo vrios projetos adicionais como: conhecimento necessrio para a implementao das aplicaes em cada dispositivo; compatibilidade entre as plataformas; tempo necessrio para o projeto da aplicao; necessidade de projetos distintos de apresentao e navegao nas interfaces de usurio. O modelo MIM tem o objetivo de organizar todos os componentes pertencentes a um determinado mdulo do sistema, ou seja, dividindo a interface para proporcionar uma viso mais clara e abstrata do sistema como um todo. A MIM divide a interface em trs componentes como vemos na Figura 20: lgica: esconde os detalhes mais baixos da aplicao como as comunicaes envolvidas, os protocolos, transformaes de dados, mtodos; apresentao: descreve as informaes sobre os componentes da interface, suas propriedades e manipulao de eventos utilizando um vocabulrio especfico para cada plataforma. Interface: faz a comunicao do usurio com a aplicao utilizando eventos e partes abstratas.

50

Fonte: (POSSEBOM; SILVA FILHO; SILVA, 2005).

Figura 20 - Modelo MIM

A Figura 20 demonstra a arquitetura do modelo MIM. O componente de interface ainda dividido em quatro sub-componentes, sendo eles: estrutura (organizao dos elementos), estilo (forma de apresentao), contedo (informaes que so apresentadas) e comportamento (as interaes com a interface). Para o autor, esse modelo adequado para ser utilizado em conjunto com a linguagem UIML, garantindo a independncia de dispositivo e a portabilidade, pois consegue representar todas as metforas de uma interface de usurio de um dispositivo. Esse trabalho citado demonstra alguns passos para o desenvolvimento de um gerador de software de interfaces. A especificao UIML lida e mapeada de acordo com o vocabulrio especfico para a linguagem Java. Esse vocabulrio formado por metforas de interfaces que representam elementos de interao utilizando Java AWT e Java Swing. Para gerar uma sada preciso criar as especificaes da interface na linguagem UIML e efetuar o mapeamento para cdigos Java. Para fazer o mapeamento para outras linguagens, basta ter o seu vocabulrio apropriado.

3.2 Sistemas baseados em conhecimento

O trabalho desenvolvido por Andria (LIBRIO et al, 22 abr. 2006) cita que o importante modelar os conceitos de IHC (Interao Humano-Computador) e dos conhecimentos de todos os envolvidos e a reutilizao dessa modelagem para automatizar e

51

otimizar o processo de gerao de interface de usurio. O trabalho prope um SBC (Sistema Baseado em Conhecimento) que representa o conhecimento dos projetistas de interface. Esse sistema possui caractersticas interativas, onde o usurio possa ter uma explicao do resultado produzido melhorando o entendimento e a aceitao da interface proposta. A soluo apresentada baseada na representao do raciocnio de um projetista de interface partindo do pressuposto que ele realiza uma atividade de projeto seguindo um mtodo de resoluo do tipo proponha e revise (propose-and-revise). Seguindo o raciocnio, o SBC deve prover capacidade de interao com o projetista e com o usurio do sistema. Para isso, o SBC deve fornecer explicaes estruturadas do processo de gerao de interfaces, facilitando a validao do modelo de tarefas, do modelo de domnio e das prprias regras usadas no SBC. Esse trabalho utiliza componentes para explicao podendo assim, explicar todos os passos de raciocnio do SBC em diferentes nveis de abstrao. O estado da arte em Engenharia do Conhecimento visa estudar mtodos e tcnicas para desenvolvimento de SBCs utilizando o conceito de mtodo de resoluo de problema PSM (Problem Solving Method). Um SBC deve possuir a capacidade de explicar como e porque chegou a uma soluo. Em seguida o trabalho apresenta trabalhos existentes em IHC como, por exemplo, o ambiente TransformiXML que realiza mapeamentos atravs de relacionamentos entre expresses matemticas e permite a definio e aplicao de regras de transformao. Esse ambiente adota o padro USIXML para os modelos de IHC e para as regras que mapeiam esses modelos. A proposta desse trabalho desenvolvido por Andria representar o conhecimento dos projetistas de interface, modelando o seu conhecimento para auxiliar no processo. A representao de todo o conhecimento de um projetista, inclusive o oculto, a abordagem da proposta e denomina-se de SBCIHC, o qual seria um SBC interativo. Esse SBCIHC seria basicamente um tutorial para projetistas iniciantes, e nele foram utilizadas arquiteturas como a UPML para a representao do conhecimento, USIXML para representao dos modelos de IHC e o Framework Cameleon para gerao da interface.

52

3.3 Questes de Desenvolvimento e Tendncias de Pesquisa

O trabalho desenvolvido por Antnio Mendes (SILVA FILHO, 22 mar. 2006) descreve alguns dos problemas que um desenvolvedor encontra at chegar ao seu produto final. Melhorar a usabilidade de sistemas interativos uma das principais metas dos projetistas de interface de usurio. O desenvolvimento de sistemas interativos exige que aproximadamente 50% do tempo e dos recursos sejam alocados ao desenvolvimento do software da interface de usurio. Por isso que uma das metas, juntamente com a usabilidade, minimizar o custo de desenvolvimento dos sistemas interativos. Os dispositivos eletrnicos esto cada vez mais presentes na vida das pessoas, e esses dispositivos apresentam funcionalidades similares uns dos outros, como por exemplo calculadora, jogos, browser. Para que uma aplicao funcione num dispositivo preciso que a sua interface de usurio seja projetada para o dispositivo e isso um dos problemas encontrados. H a necessidade de desenvolver X interfaces para Y dispositivos sem que a sua coerncia seja afetada. Essas aplicaes devem ser adaptadas s capacidades e restries especficas de cada dispositivo, mas buscando manter o padro de usabilidade e consistncia entre as plataformas. As interfaces de usurios para mltiplos dispositivos possuem algumas caractersticas como: abstrao de dados: servios em comum nos dispositivos; consistncia entre plataformas: manter o comportamento no Look and Feel; uniformidade: oferecer as mesmas funcionalidades; consistncia do usurio sobre mudana de contexto: adaptar as verses mais avanadas; padronizao da interface: caractersticas que no precisam estar disponveis em todos os dispositivos. Para cada plataforma computacional existe um estilo de interao como, por exemplo, GUI (Graphical User Interface), emprega os quatro elementos essenciais numa interface, as janelas, cones, menus e ponteiros; WUI (Web User Interface) que so marcaes XML, folhas de estilo, objetos e HUI (Handheld User Interface). Em adio a esses estilos, h questes que norteiam as pesquisas como:

53

desenvolvimento de interfaces de usurios baseada no contexto: quando um dispositivo capaz de detectar, interpretar e responder aos aspectos do ambiente do usurio e aos prprios dispositivos utilizados;

sistemas baseados em modelos: tentam produzir automaticamente projetos de interfaces concretas a partir das representaes genricas abstratas da interface; desenvolvimento de padres orientados a usabilidade: serve como uma ferramenta de alto nvel para agrupar experincias obtidas com os usurios finais; linguagens de marcao independente de dispositivos: descrevem interfaces de usurio de forma abstrata e podem ser empregadas para diferentes dispositivos; modelos arquiteturais para interfaces de usurio: arquitetura de software para estruturar o sistema em termos de seus componentes.

3.4 Comparativo entre os trabalhos relacionados

A seguir, a Tabela 2 demonstra um comparativo entre os trabalhos analisados relacionados especificamente a gerao de interfaces multiplataforma. Esses trabalhos apresentam tecnologias, linguagens de interfaces diferenciados uns dos outros e esse relacionamento importante ser comparado. Os itens so descritos como: web x desktop: o trabalho desenvolvido suporta aplicaes especficas para a plataforma Web, plataforma Desktop ou para os dois; diferentes OSs: suporta diferentes sistemas operacionais, como Linux e Windows; tecnologias de suporte: tecnologias utilizadas para o desenvolvimento do trabalho; linguagem de interface: a linguagem de interface utilizada para o desenvolvimento do trabalho respectivo; ferramenta desenvolvida: se o trabalho teve desenvolvimento de alguma ferramenta ou aplicao; cdigo gerado: qual linguagem de programao utilizada para a gerao da interface final.

54

Tabela 2: Comparao entre trabalhos analisados

Linguagem de definio de interface No

Web x Diferentes OSs Desktop (BERNARDO, 06 abr. 2006)

Tecnologias de suporte WAP, XML, JSP, WML, HTML Frameworks XFormUI, Requisitor, Mobile Adapter e MobAC, UIG, J2ME MIDP, Superwaba, CSS, Xform IMML, CC/PP, WML, XHTML, CSS, SMIL XICL, XICL Studio, DOM, ECMAScript, HTML, XML, DHTML J2SE, J2ME, HTML, UIML, jDOM, Xerces, XSLT, XML UIML, MIM, JAVA

Proposta

Cdigo gerado

Web

Sim

SISCA_WAP

WML

(CARVALHO, 08 abr. 2006)

XForm M-Flog Java

Web

Sim

(COSTA NETO, 22 abr. 2006 (SOUSA; LEITE, 12 abr. 2006)

Web

Sim

IMML

No

WML, XHTML

Web

ND*

XICL

No

ND*

(CASADO et al, 10 abr. 2006) (POSSEBOM; SILVA FILHO; SILVA, 2005)

* No definido

Ambos

Sim

UIML

Ferramenta IDE Gerador de software de interfaces

Java

Ambos

Sim

UIML

Java

A tabela 2 traz um comparativo entre os trabalhos analisados. Nota-se que os trabalhos citam diversas tecnologias, algumas conhecidas j outras no muito conhecidas, mas que tem um grande potencial como o caso da linguagem XForm e tecnologias como IMML, CC/PP. Os trabalhos de COSTA NETO e de SOUSA; LEITE no tem nenhuma proposta de desenvolvimento definida, apenas fazem um estudo das linguagens e tecnologias. Os trabalhos de CASADO e de POSSEBOM j estudam a integrao entre a Web e o Desktop e so portveis utilizando o Java e UIML como tecnologias utilizadas para o futuro desenvolvimento de sua proposta. Enfim, os trabalhos mostram um pouco da utilizao de linguagens de interface e tecnologias de integrao e de portabilidade sendo de extrema importncia para um estudo desenvolvido nessa rea.

4 LENOM

Nessa proposta, foi desenvolvido um prottipo de um leitor de notcias, chamado LENOM (Leitor de Notcias para Mltiplas Plataformas). Esse prottipo engloba duas aplicaes com uma mesma finalidade, ler notcias de um determinado endereo da Web no qual o usurio predefinir. Essas aplicaes desenvolvidas so para as plataformas Desktop (LENOM Desktop) e Celular (LENOM Cel) tendo as mesmas funcionalidades em ambas as plataformas. A interface desse leitor toda descrita na Linguagem USIXML para que posteriormente seja implementada a gerao automtica dessas interfaces. Essas duas aplicaes so prottipos que demonstram como uma aplicao deve adaptar-se para diferentes plataformas. Cada uma das aplicaes tem suas particularidades como, por exemplo, o LENOM Desktop mostrado apenas em uma janela, enquanto o LENOM Cel precisa de vrias janelas para chegar at a leitura de uma notcia. Enfim, o LENOM a Interface de Usurio Final codificada para uma determinada plataforma e a parte de renderizao do cdigo USIXML no foi desenvolvida nessa proposta. Um Leitor de Notcias, tambm conhecido como Leitor RSS, tem por finalidade organizar notcias vindas de um determinado site para que o leitor tenha maior facilidade na navegao e leitura dessas notcias. O usurio tem a facilidade de adicionar apenas os canais de notcias de que realmente tem interesse e, alm disso, pode criar pastas para organizar os seus canais. O usurio pode apagar e criar pastas e canais, alm de poder ler a notcia na ntegra abrindo-a diretamente no Browser. A Figura 21 mostra uma representao da arquitetura de proposta no LEMOM para o processo de gerao de uma aplicao para um dispositivo especfico.

56

Alto Nvel

Criao da Interface Visual

Contedo Comportamento Apresentao

Transformaes Gerao do cdigo

Interface Final
Figura 21 - Processo de gerao de interfaces da proposta deste trabalho

A Figura 21 demonstra o processo de gerao da interface final, a qual ser disponibilizada ao usurio num dispositivo qualquer. A parte visual da interface desenhada numa ferramenta de alto nvel, no caso a ferramenta utilizada a GrafiXML, e nela j gerado o cdigo da descrio da interface. Esse cdigo gerado na linguagem USIXML. Em seguida, todo o contedo acoplado interface, como regras de transformaes previamente definidas e, assim, a apresentao da interface fica pronta. A prxima etapa verificar o dispositivo e fazer as alteraes necessrias para que a interface possa ser visualizada corretamente. A seguir esto explanadas definies de tecnologias e uma viso geral da proposta.

4.1 RSS

RSS uma nova tecnologia desenvolvida em XML que consiste em apresentar notcias dinamicamente. O seu funcionamento descrito da seguinte forma: o link e o resumo de cada notcia so armazenados em um arquivo de extenso.xml, .rss ou .rdf, sendo que esse arquivo

57

denomina-se de feed, ou tambm conhecido como canal. Ento basta incluir o link do canal do site em questo em um programa leitor de RSS. Existem vrios tipos de leitores de RSS, alguns independentes, outros integrados no prprio navegador. H programas que se agregam a clientes de email e permitem que as notcias sejam lidas em softwares como o Outlook Express e o Mozilla Thunderbird, por exemplo. Outros j so capazes de verificar os sites listados em um intervalo de tempo definido e emitir um aviso sonoro ou visual assim que encontram uma notcia nova. Todos esses leitores citados so para a plataforma Desktop. Tambm vale citar um leitor de notcias chamado Google Reader7 que pode ser utilizado tanto para celular quanto para Desktop. As notcias so atualizadas automaticamente do site ao qual o feed est apontando. Ao clicar no feed da rvore, as notcias correspondentes aparecem na relao de notcias e, basta clicar sobre uma dessas notcias para logo abaixo aparecer um resumo respectivo. Nesse resumo constam um link que chama a notcia no site correspondente e a sua descrio simplificada, assim como data e hora da postagem no site. A Figura 22 demonstra o cdigo XML de um feed que engloba algumas das notcias. A seguir est explicada a hierarquia do arquivo, comeando pelo cabealho: a linha 1 informa a verso do RSS utilizado; a tag channel , linha 2, indica o canal do feed; a tag title, linha 3, possui o ttulo no site ao qual a notcia est vinculada; a tag link, linha 4, possui o endereo geral do feed; na tag description, linha 5, possvel fornecer uma breve descrio sobre o site; a tag language, linha 6, especifica o idioma e copyright, linha 7, especifica os direitos sobre o feed. Na tag image, linha 8, esto adicionados o ttulo da figura title, linha 9, assim como o tamanho da imagem width e height, linhas 10 e 11, o endereo link, linha 12, e o endereo dessa imagem url, linha 13; e por fim a tag webMaster, linha15, onde est o endereo eletrnico do webmaster do site. No cabealho, acima apresentado, ainda podem ser adicionadas outras tags, como data da criao, ltima atualizao, dentre outras tags. A seguir apresentada a estrutura dos itens, as notcias propriamente dita:
7

Na tag item, linha 16, est adicionada a notcia;

Mais informaes no site http://www.google.com/help/reader/tour2.html

58

dentro da tag item esto as tags title, linha 17, que fornece o ttulo da notcia, link, linha 18, que indica o endereo da notcia, description, linha 19, que permite a visualizao de um resumo do texto e pubDate, linha 20, que fornece a data de publicao da notcia. Cada item possui essa estrutura, mas tambm poderiam ter outras tags com outras

informaes, assim como alguns canais no colocam description ou pubDate. O necessrio realmente o title da notcia e o link na mesma.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 34. <rss version="2.0"> <channel> <title>Terra - RSS - Grmio</title> <link>http://esportes.terra.com.br/ultimas/0,,EI1987,00.html</link> <description>ltimas notcias - Grmio</description> <language>pt-br</language> <copyright>Copyright 2000-2006 Terra Networks, S.A.</copyright> <image> <title>Terra</title> <width>132</width> <height>54</height> <link>http://www.terra.com.br</link> <url>http://img.terra.com.br/i/logo.gif</url> </image> <webMaster>ednot@terra.com.br</webMaster> <item> <title>Volta de Lo Lima adiada no Grmio</title> <link>http://esportes.terra.com.br/futebol/brasileiro2006/interna/0,,OI1263 910-EI6568,00.html</link> <description>A volta do meia Lo Lima ao time do Grmio foi adiada novamente. Ele no estar ... </description> <pubDate>Wed, 22 Nov 2006 23:00:19 GMT</pubDate> </item> <item> <title>Evaldo deve desfalcar Grmio contra o Flamengo</title> <link>http://esportes.terra.com.br/futebol/brasileiro2006/interna/0,,OI1263 883-EI6568,00.html</link> <description>O zagueiro Evaldo a dvida do Grmio para o jogo contra o Flamengo, no prximo ...></description> <pubDate>Thu, 23 Nov 2006 00:28:58 GMT</pubDate> </item> <item> <title>Gremistas esperam contatos para renovar contratos</title> <link>http://esportes.terra.com.br/futebol/brasileiro2006/interna/0,,OI1263 777-EI6568,00.html</link> <description>Depois de renovar o contrato do tcnico Mano Menezes, a direo comear a ...</description> <pubDate>Wed, 22 Nov 2006 21:35:07 GMT</pubDate> </channel>

33. </item>
</rss>

Figura 22 - Cdigo XML de um feed

59

4.2 Tecnologias envolvidas

Algumas tecnologias utilizadas no trabalho so importantes de serem descritas e comentadas como, por exemplo, a ferramenta utilizada para desenhar interfaces de usurios chamada GrafiXML (LIMBOURG, 06 maio 2006). Esta ferramenta permite manipular qualquer interface grfica, criando Objetos de Interface Concretos e editando suas propriedades que so refletidas diretamente no desenho da interface. Alm disso, a ferramenta cria automaticamente o cdigo na linguagem USIXML, onde o desenvolvedor pode ver e editar esse cdigo. Ela permite tambm, a gerao automtica de cdigo de uma CUI, basta instalar alguns plugins. Com esses plugins possvel exportar os cdigos de USIXML para XHTML, ou ento para XUL, ou JAVA. Para a construo das aplicaes foi utilizada a linguagem JAVA. Para o desenvolvimento da aplicao Desktop foram utilizadas as tecnologias: Plataforma J2SE; J2SDK 5.0; NetBeans5.5: para a gerao dos cdigos; JDOM: API Java para a manipulao dos arquivos XML para a plataforma J2SE; Para o desenvolvimento da aplicao para Celular foram utilizadas as seguintes tecnologias: Plataforma J2ME; J2SDK 5.0; NetBeans5.5: para a gerao dos cdigos; KXML: API Java para a manipulao dos arquivos XML para a plataforma J2ME; J2ME Wireless ToolKit: para fazer a simulao da aplicao no Celular. Para a gerao dos cdigos USIXML, foi utilizada a ferramenta GrafiXML. Para a gerao dos Diagramas de Classe, Atividade e Casos de Uso, foi utilizada a ferramenta Sybase PowerDesigner Verso 9.0.0.438 evaluation.

60

4.3 Modelo de Transformao

Cada dispositivo tem suas limitaes, enquanto o PC d a opo de utilizar o mouse e teclado, o celular no proporciona essa mesma facilidade de interao. Para solucionar esses problemas necessrio fazer algumas alteraes dependendo do dispositivo utilizado, como trocar um check box de uma aplicao Desktop para um list de um celular, por exemplo.

Figura 23 - Diferenciao de plataformas Na Figura 23, a diferenciao entre um componente Button evidente e o seu comportamento e forma de acesso tambm so diferenciados em cada uma das plataformas presentes na figura. O PDA e o Desktop so bastante parecidos, enquanto o Celular no tem um componente Button, precisando ser substitudo por outro semelhante, no caso a lista. A Linguagem USIXML prov suporte a essas transformaes utilizando para isso Transformation Model (Modelo de Transformao). As transformaes so realizadas usando Transformation Systems. Transformation Systems so classes compostas de uma srie de regras de transformaes, TransformationRule. A Figura 24 demonstra o diagrama de classes do Modelo de Transformao. A parte desse Diagrama que foi explanada est circulada.

61

Fonte: Manual da USIXML

Figura 24 - Modelo de Transformao definido na USIXML A Figura 25 ilustra como um sistema de transformao aplicado na USIXML, cada descrio de cada classe est especificada abaixo: Left Hand Side (LHS) uma classe que contm um elemento presente nas especificaes USIXML e na aplicao corrente; Negative Application Condition (NAC) uma classe que contm restries a determinados elementos, garantem que uma regra no utilizada em outro elemento; Right Hand Side (RHS) uma classe que contm o novo elemento. Ento, tendo G como uma especificao inicial de USIXML, quando um LHS combinado com o G e um NAC no combinado com o G (vrias NAC podem ser associadas

62

a uma mesma regra) ento,

o LHS substitudo pelo RHS. O G transformado

conseqentemente em G, uma especificao resultante de USIXML. Todos os elementos de G que no estiverem com esta combinao so considerados imutveis. Todos os elementos contidos na LHS e no contidos na RHS so considerados como deletados. Variveis podem ser associadas aos atributos dentro da LHS, estas variveis so inicializadas na LHS, seu valor pode ser usado para atribuir um atributo na expresso do RHS (LHS: button.name := x, RHS: task.name:=x). Uma expresso tambm pode ser definida para comparar uma varivel declarada na LHS com uma constante ou com outra varivel. Esse mecanismo chamado de attribute condition.

Sistema de transformao

G
Origem

Transformado para

Resultante

Transformado para NAC ^ LHS RHS

Regra de Transformao 1 Regra de Transformao 2 ...... Regra de Transformao n Fonte: LIMBOURG, 10 abr. 2006

Figura 25 - Sistema de transformao na USIXML Este trabalho demonstra a transformao por Translation (Traduo). A Traduo utilizada para transformaes dentro de um mesmo modelo, model-to-model, ou seja, adaptar uma interface para um novo dispositivo, com caractersticas de tela ou incompatibilidade de componentes, por exemplo. Com a Traduo, pode-se mudar o posicionamento de elementos dentro de uma tela, trocar um componente por algum especfico que seja compatvel no novo dispositivo. A Figura 26 demonstra uma transformao por Traduo. Essa transformao composta de uma regra que seleciona todos os boxes (estrutura bsica de Layout na Interface Concreta) e seta esses boxes para o tipo vertical. Todos os componentes contidos nesse box

63

so colocados esquerda do box (isso para minimizar a largura da interface resultante). O NAC assegura que a regra 1 na Figura 26 no aplicada um box j formatado.

Figura 26 - Uma regra de Transformao A Figura 27 demonstra uma transformao comum e necessria, uma rvore que no existe no Celular e que freqentemente usada numa aplicao Desktop necessita ser trocada por um componente equivalente, no caso da aplicao LENOM Cel, obtou-se pela utilizao da lista.

Figura 27 - Substituio de componentes Como visto na Figura 27, um componente rvore, da plataforma Desktop, deve ser substitudo por listas. Para cada nvel da rvore preciso uma lista diferente. Outra regra que

64

requerida, para cada box do cdigo USIXML do LENOM Desktop preciso criar uma nova janela no LENOM Cel, como visto na Figura 28. Nessa Figura, demonstrado que para o LENOM Cel ser equivalente ao LENOM Desktop preciso que uma nova janela seja criada, mas utilizando o mesmo componente ListBox.
... <box id="box_3" name="box_3" type="vertical"> <listBox id="listbox_component_8 name="listbox_component_8" isVisible="true" isEnabled="true" textColor="#000000" multiple_selection="false"> <item id="item_12 content="/uiModel/resourceModel/cioRef[@cioId='item_12']/resource/@content" textColor="#000000"/> </listBox> </box> ...

... <window id="window_component_6" name="window_component_6 width="400" height="350"> <box id="box_7" name="box_7" type="vertical"> <listBox id="listbox_component_8 name="listbox_component_8" isVisible="true" isEnabled="true" textColor="#000000" multiple_selection="false"> <item id="item_19" content="/uiModel/resourceModel/cioRef[@cioId='item_19']/resource/@content" textColor="#000000"/> </listBox> </box> </window> ...

Figura 28 - Transformao de LENOM Desktop para LENOM Cel Conforme a Figura 28, para que uma lista seja mostrada corretamente no LENOM Cel necessrio criar uma nova janela para essa lista, pois no LENOM Desktop tem apenas uma janela para mostrar toda a aplicao. A Figura 29 demonstra uma lista no LENOM Desktop e a sua respectiva correspondncia no LENOM Cel.

65

Figura 29 - Correspodncia entre um componente ListBox A codificao da interface escrita na linguagem USIXML, assim como todas as regras de transformaes especificadas para a interface. Para a gerao do cdigo USIXML utilizada uma ferramenta chamada GrafiXML. A partir da interface montada e visualizada na prpria ferramenta, esta gera todo o cdigo e, ainda, d a possibilidade de editar diretamente o cdigo USIXML. Em anexo est a codificao das duas aplicaes desenvolvidas, o LENOM Desktop, Anexo A, e o LENOM Cel, Anexo B. Esses cdigos especificam apenas a parte visual da interface, sem especificaes de componentes como menus, no ambiente Desktop, e comandos, no ambiente do Celular.

4.4 Projeto e Implementao

A seguir descrita toda a parte de implementao dos sistemas LENOM Desktop e LENOM Cel, assim como diagramas UML que tm por finalidade de demonstrarem a aplicao de diferentes formas. So utilizados: Diagrama de Classes (define a estrutura do sistema), Diagrama de Atividades (mostra o fluxo das atividades num processo) e o Diagrama de Casos de Uso (representa uma unidade discreta da interao entre o usurio e o sistema.).

66

utilizado um arquivo XML denominado pastas.xml, que contm toda a estrutura das pastas e canais adicionados pelos sistemas. A Figura 30 demonstra como formado esse arquivo.

1.<rss> 2. <pasta id="ESPORTES"> 3. <channel> 4. <title link="http://rss.terra.com.br/0,,EI1987,00.xml" arq="ESPORTES1.xml">Terra - RSS - Grmio</title> </channel> 5. 6. </pasta> 7. <pasta id="TECNOLOGIA"> 8. <channel> 9. <title link="http://rss.terra.com.br/0,,EI4795,00.xml" arq="20,,EI4795,00.xml">Terra - RSS - Tecnologia</title> 10. </channel> 11. </pasta> 12. <pasta id="ECONOMIA"> 13. <channel> 14. <title link="http://chronicle.com/news/rss.xml" arq="5rss.xml">Chronicle.com - Today's News</title> 15. </channel> 16. </pasta> 17.</rss>

Figura 30 - Configurao do arquivo pastas.xml

Conforme visto na figura acima, o arquivo formado por: um elemento raiz rss, linha 1; e por vrios elementos pasta, linhas 2-7-11. O ttulo da pasta encontra-se dentro do atributo id; dentro da pasta encontram-se os canais - channel, linha 3. Cada pasta pode conter diversos canais; no channel esto o ttulo do canal, linha 4, assim como o link XML ao qual o arquivo encontra-se disponvel para atualizao, o nome do arquivo gravado no disco e o ttulo propriamente dito.

67

4.4.1 Diagrama de Casos de Uso

O Diagrama de Casos de Uso descreve a funcionalidade proposta para o sistema. Cada Caso de Uso tem uma descrio o qual descreve a funcionalidade que executa no sistema. A seguir esto esboados os Diagramas de Casos de Uso das aplicaes LENOM Desktop e LENOM Cel conforme as respectivas Figuras 31 e 32.

Figura 31 - Diagrama de Casos de Uso do LENOM Desktop

Conforme a Figura 31, o usurio pode executar algumas aes na aplicao, como selecionar uma notcia, analizar canais, adicionar uma pasta, adicionar um canal, excluir canais e pastas e abrir as notcias diretamente no browse para ler na ntegra. Aps o usurio executar alguma dessas aes, ento os arquivos so processados e atualizados na tela.

68

Figura 32 - Diagrama de Casos de Uso do LENOM Cel Conforme a Figura 32, o LENOM Cel permite ao usurio, voltar entre telas, assim como, ler as notcias, canais e pastas, excluir canal e pastas e atualizar os canais. Depois de escolhida uma dessas aes, ento processado os arquivos e atualizada a tela para o usurio.

4.4.2 Diagrama de Atividades

O Diagrama de Atividades praticamente um grfico de fluxo que mostra o fluxo de controle de uma atividade para outra. As Figuras 33, 34, 35 e 36 mostram a relao das atividades do Sistema LENOM Desktop.

69

Figura 33 - Diagrama de Atividades da Leitura de uma Notcia no LENOM Desktop Para o usurio condeguir ler uma notcia, a aplicao executa esses passos descritos pela Figura 33. Enquanto os canais so atualizados e os benas povoados, a aplicao mostra uma barra de progresso para o usurio. Em seguida o usurio escolhe a notcia e a aplicao mostra na tela.

70

Figura 34 - Diagrama de Atividades da Leitura de uma Notcia no LENOM Desktop Para atualizar um canal, a aplicao executa as seguintes tarefas, conforme a Figura 34: primeiramente l o arquivo de configuraes pastas.xml pegando o endereo dos canais e testa se tem conexo; se tiver ento l o arquivo on-line e retorna um documento atualizado; se no tiver conexo, apenas l o arquivo local e retorna o documento.

71

Figura 35 - Diagrama de Atividades da Excluso de Pastas e canais no LENOM Desktop

A aplicao executa os processos, descritos na Figura 35, para excluir uma pasta ou canal. Testa se a excluso de uma pasta ou canal e em seguida processa as excluses atualizando os beans e atributos mostrando essas atualizaes na tela para o usurio.

72

Figura 36 - Diagrama de Atividades da Adio de Pastas e Canais no LENOM Desktop

73

A seguir so apresentados os Diagramas de Atividades do Sistema LENOM Cel. Conforme as Figuras 37, 38, 39, 40, 41 e 42.
Leitura de Notcia

Le Arquivo de Configurao

Processa Arquivo

Monta Lista de Pastas

Monta Lista de Canais

Le Canal

Processa Arquivo do canal

Monta Lista de Notcias

Figura 37 - Diagrama de Atividades da Leitura de notcias no LENOM Cel Para o usurio ler uma notcia, a aplicao executa esses processos da Figura 37. A aplicao l o arquivo de configurao pastas.xml e processa o arquivo montando a lista de pastas. Em seguida montada a lista de canais e lido o canal selecionado, processando o arquivo de canal e montando a lista de notcias para o usurio final.

74

Figura 38 - Diagrama de Atividades da Atualizao de Canais no LENOM Cel Conforme a Figura 38, para atualizar um canal no LENOM Cel a aplicao testa se a opo escolhida atualizar, e ento se o conectou na URL do canal processa esse canal e atualiza no disco, montando novamente as lista.

75

Figura 39 - Diagrama de Atividades da Excluso de Canais no LENOM Cel Conforme a Figura 39, para excluir um canal a aplicao processa a excluso e atualiza o arquivo de configurao no disco, montando novamente a lista de canais.

76

Excluso de Pastas

Le Arquivo de Configurao

Processa Arquivo

Monta Lista de Pastas

[Seno]

[Se Excluso] Processa excluso da Pasta

Escreve novo Arquivo de configurao

Figura 40 - Diagrama de Atividades da Excluso de Pastas no LENOM Cel Para excluir uma pasta, o LENOM Cel processa essa excluso e atualiza o arquivo de configuraes montando novamente a lista de pastas, conforme a Figura 40.

77

Figura 41 - Diagrama de Atividades da Adio de Canais no LENOM Cel Conforme a Figura 41, para adicionar um canal, a aplicao conecta no endereo passado e atualiza o arquivo de configuraes e escreve esse arquivo contendo as notcias no disco, em seguida atualiza as listas.

78

Figura 42 - Diagrama de Atividades da Adio de Pastas no LENOM Cel Para adicionar uma pasta, a aplicao simplesmente atualiza o arquivo de configuraes escrevendo essa nova pasta e monta a lista de pastas novamente, conforme a Figura 42.

4.4.3 Diagrama de Classes

O Diagrama de Classes descreve os tipos de objetos no sistema e os vrios tipos de relacionamento esttico que existem entre eles. Esses diagramas ainda mostram atributos e operaes de uma classe e as restries maneira com que os objetos so conectados. A seguir, na Figura 43 demonstrado o Diagrama de classe do Sistema LENOM Desktop e na Figura 44 demonstrado o Diagrama de classe do Sistema LENOM Cel.

79

Figura 43 - Diagrama de Classes da LENOM Desktop

80

Figura 44 - Diagrama de Classes da LENOM Cel

81

4.4.4 LENOM Desktop

O LENOM Desktop uma aplicao desenvolvida para a plataforma Desktop. Essa aplicao especfica para a leitura de notcias, onde o usurio adiciona os canais que desejar para ter a atualizao das suas notcias automaticamente. A Figura 45 demonstra a tela do LENOM Desktop mostrando uma notcia selecionada.

Figura 45 - Leitor de Notcias para a plataforma Desktop A seguir, so apresentadas as classes e mtodos do LENOM Desktop. A Classe LenomDesktop a principal do sistema, onde so criados todos os componentes e onde se iniciam todos os processos. Ao iniciar o sistema, uma Thread criada e executada em paralelo com a atualizao dos canais. Essa Thread cria um componente JprogressBar para

82

ficar mostrando enquanto a atualizao dos canais no for concluda. Aps ser concluda a atualizao, o sistema apresentado na tela. LenomDesktop: esta classe a interface grfica do sistema, onde o usurio final visualiza toda a parte grfica do sistema. Inicializa a rvore, a lista e atualiza os canais. Mtodos: atualizaClasses: tem por finalidade atualizar as variveis ClassCanal, ClassNoticia. Ainda pode atribuir uma Jlist para a varivel lsNoticias, se receber por parmetro ( String sel ) o nome do nodo selecionado na rvore. ClassCanal recebe uma Classe Canal conforme o parmetro recebido. ClassNoticia recebe uma Classe Noticia conforme o parmetro recebido. criaProgress: cria o componente JprogressBar, um Jpanel e um Jlabel para a apresentao inicial. destroiProgress: destri a JprogressBar , o painel e o Label criado no mtodo criaProgress. run: executa a Thread. Em seguida inicia os componentes.

AbreBrowser: essa classe executa um processo do Sistema Operacional para abrir um Browser. Mtodos: AbreBrowser: executa um processo do Sistema Operacional iniciando um Browser no endereo respectivo recebido por parmetro..

83

Arvore: esta classe estende a classe JTree. L o arquivo XML (invocando a classe LeXml) do disco que contm a hierarquia das pastas e canais e, seta na rvore. Mtodos: processElement: tem por finalidade montar a rvore. Recebe como parmetro um Element e um DefaultMutableTreeNode e, processa o Element adicionando os nodos respectivos s pastas e canais ao DefaultMutableTreeNode, montando assim, a rvore. Arvore: mtodo construtor que inicializa as variveis, recebe como parmetro o nome do arquivo a ser aberto. Instancia a Classe LeXml e l o arquivo atribuindo, ao Element root, a rvore hierrquica referente ao arquivo XML lido pelo mtodo leLocal da Classe LeXml.

leXml: esta classe faz a leitura dos arquivos XML tanto no disco quanto da Web. Faz o parsing das fontes de dados. Mtodos: leLocal: esse mtodo recebe por parmetro o caminho do arquivo a ser aberto e retorna um atributo boolean True caso no ocorra nenhum erro e False caso no consiga encontrar o arquivo. leUrl: esse mtodo recebe por parmetro o caminho da URL a ser acessada e retorna um atributo boolean True caso encontre a URL e False caso no consiga encontrar. Root: esse mtodo retorna o elemento raiz do arquivo que fora realizado o parsing.

Opcoes: esta classe contm alguns mtodos utilizados pelo sistema. Mtodos: zeraClasse: esse mtodo atribui null varivel que ret que retornar um valor pelo mtodo retornaElement..

84

retornaElement: esse mtodo percorre uma rvore hierrquica recebida pelo elemento raiz e retorna um Element. Recebe quatro parmetros: um Element elemento raiz que ir ser percorrido; um int n se diferente de zero a pesquisa procurar pelo nome; um int att se diferente de zero a pesquisa procurar pelo atributo e, um String r que contm o texto a ser verificado. Apenas um dos inteiros pode ser diferente de zero ao mesmo tempo.

Pasta: esta classe manipula o arquivo que contm a hierarquia das pastas e canais. Percorre elementos, adiciona pastas e canais e exclui elementos. Mtodos: Pasta: mtodo construtor da classe que inicializa as variveis, invoca a Classe LeXml para efetuar a leitura do arquivo recebido por parmetro e atribui o elemento Raiz ao root. Em seguida, chama o mtodo processaElement. atualiza: esse mtodo instancia a Classe EscreveXml mandando por parmetro o root corrente. Em seguida invoca o mtodo escreve da Classe EscreveXml que grava no disco, o arquivo XML mandado por parmetro anteriormente, com nome do parmetro enviado nesse mtodo. addPasta: esse mtodo adiciona uma pasta na rvore hierrquica com o nome recebido por parmetro. Em seguida chama o mtodo atualiza para gravar no disco com as alteraes efetuadas. addCanal: mtodo adiciona um canal dentro de uma pasta especfica. Recebe por parmetro os atributos utilizados para a adio do canal. Faz a adio do canal na rvore hierrquica e em seguida chama o mtodo atualiza para gravar no disco a atualizao. excluiNodo: esse mtodo exclui um elemento da rvore hierrquica. Recebe por parmetro o nome do elemento a ser excludo e o level desse elemento na rvore. Se o level for igual a 1, ento uma pasta, se for level igual a 2 ento um canal. Invoca o mtodo retornaElement da classe Opes para achar o elemento a ser excludo. Aps receber o elemento, este excludo da rvore hierrquica e chamado o mtodo atualiza para gravar as alteraes no disco.

85

processaElement: esse mtodo percorre a rvore hierrquica recebida por parmetro, Element el. Ao encontrar um elemento como nome igual pasta, ento instancia uma classe Canal, adicionando-a em seguida dentro do vetor vCanais (vetor de classes Canal).

EscreveXml: esta classe grava no disco a rvore hierrquica recebida por parmetro. Mtodos: EscreveXml: mtodo construtor que cria um Document com o Element recebido por parmetro. escreve: esse mtodo recebe por parmetro o endereo, no disco, onde o Document ser gravado e efetua a gravao.

Canal: esta classe manipula o arquivo que contm a hierarquia das pastas. Percorre elementos, adiciona e exclui canais. Tambm, grava os arquivos adicionados no disco. Mtodos: Canal: mtodo construtor da classe que inicializa as variveis, invoca a Classe LeXml para efetuar a leitura do arquivo recebido por parmetro e atribui o elemento rt ao root. Em seguida, chama o mtodo inicializa, se o parmetro adiciona no for falso. atualizaCanais: esse mtodo faz a atualizao dos canais. Conecta a URL recebida por parmetro e escreve o novo arquivo no disco, atualizado. inicializa: esse mtodo chama outro mtodo, processaElement. addCanal: mtodo que adiciona canais. Recebe uma URL por parmetro e conecta a essa URL. Em seguida grava-o no disco e retorna o ttulo do Canal. processaElement: esse mtodo percorre a rvore hierrquica recebida por parmetro, Element el e Element pai. Ao encontrar os elementos requeridos, ento seta-os ao bean ClassCanais. Se parmetro global add for falso, ento chama o mtodo atualizaCanais e faz a atualizao dos canais.

86

CamposCanais: um bean onde so carregadas informaes sobre o canal lido. Mtodos: CamposCanais: mtodo construtor que inicializa os atributos. setPasta: esse mtodo recebe por parmetro o nome da pasta e atribui ao atributo Pasta. setDescricao: esse mtodo recebe por parmetro a descrio do canal e atribui ao atributo Descrio. setTitulo: esse mtodo recebe por parmetro o ttulo do canal e atribui ao atributo Titulo. setLinkXML: esse mtodo recebe por parmetro o link do canal na internet e atribui ao atributo LinkXML. setLinguagem: esse mtodo recebe por parmetro o contedo da tag linguage do canal e atribui ao atributo Linguagem. setPath: esse mtodo recebe por parmetro o endereo do canal no disco e atribui ao atributo Path. getPasta: retorna o contedo do atributo Pasta. getDescricao: retorna o contedo do atributo Descrio. getTitulo: retorna o contedo do atributo Titulo. getLinkXML: retorna o contedo do atributo LinkXML. getLinguagem: retorna o contedo do atributo Linguagem. getPath: retorna o contedo do atributo Path.

87

Noticia: esta classe manipula o arquivo que contm as notcias. Recebe por parmetro, no seu construtor, uma rvore hierrquica e processa atribuindo os valores ao bean CamposNoticias. Ainda cria uma lista contendo o ttulo das notcias. Mtodos: Noticia: mtodo construtor da classe que inicializa as variveis e instancia a classe CamposNoticias. Chama o mtodo inicializa. inicializa: chama o mtodo para fazer o processamento da rvore e aps busca no bean o ttulo dos canais criando uma JList. processaElement: esse mtodo faz o processamento da rvore hierrquica, setando os respectivos campos na classe CamposNoticias. getLista: retorna um JList criado no mtodo inicializa.

CamposNoticias: um bean onde so carregadas informaes sobre as notcias. So criados vetores que contm as informaes das notcias. Mtodos: CamposNoticias: mtodo construtor que inicializa os atributos. setCanal: esse mtodo recebe por parmetro o nome do canal e atribui ao atributo canal. setDescricao: esse mtodo recebe por parmetro a descrio da notcia e adiciona ao vetor Descrio. setTitulo: esse mtodo recebe por parmetro o ttulo da notcia e adiciona ao vetor Titulo. setLink: esse mtodo recebe por parmetro o link onde a notcia encontra-se na internet e adiciona ao vetor Link. setData: esse mtodo recebe por parmetro a data da postagem da notcia e adiciona ao vetor Data.

88

getCanal: retorna o contedo do atributo canal. getDescricao: recebe por parmetro o ndice que ser acessado no vetor Descricao, retornando o valor respectivo desse ndice. getTitulo: recebe por parmetro o ndice que ser acessado no vetor Titulo, retornando o valor respectivo desse ndice. getLink: recebe por parmetro o ndice que ser acessado no vetor Link, retornando o valor respectivo desse ndice. getData: recebe por parmetro o ndice que ser acessado no vetor Data, retornando o valor respectivo desse ndice.

89

4.4.5 LENOM Cel

O LENOM Cel uma aplicao desenvolvida para a plataforma do Celular. Essa aplicao especfica para a leitura de notcias, onde o usurio adiciona os canais que desejar para ter a atualizao das suas notcias automaticamente, idntico ao LENOM Desktop, mas especfico para a plataforma do Celular. A Figura 46 demonstra a tela do LENOM Desktop mostrando uma notcia selecionada.

Figura 46 - Leitor de Notcias para a plataforma Celular A seguir apresentada a descrio de cada classe que compem o Sistema LENOM Cel. A Classe LenomCel a principal do sistema, onde so criados os componentes para a apresentao na tela e onde faz o controle do fluxo do sistema.

90

LenomCel: nesta classe so criados os componentes, os comandos utilizados no sistema. Controla o fluxo do sistema, como atualizaes, excluses e montagem das listas. Mtodos: inicializa: tem por finalidade criar os componentes utilizados na aplicao, como comandos, display e Formulrio. mostraPastas: recebe uma lista da Classe ClassPastas e seta ao display. mostraCanais: recebe uma lista de canais da classe ClassCanais e, se for maior que zero, seta no display, seno adiciona ao display uma mensagem de alerta. mostraNoticias: recebe uma lista de notcias da classe ClassNoticias e seta ao display. commandAction: mtodo que recebe como parmetro um command (comando que foi chamado pela aplicao) e um Displayable (qual componente que chamou o mtodo). Nesse mtodo so controlados todos os comandos executados pela aplicao e, nos seus testes, so chamados os demais mtodos da aplicao, como excluso de elementos, adio ou atualizaes. startApp: tem a funo de iniciar a aplicao, ou seja, adiciona uma lista ao display, mostrando conseqentemente ao usurio final. pauseApp: trabalhar os comandos de pausa da aplicao, mas no foi trabalhado. destroyApp: tem a funo de finalizar a aplicao.

leXml: esta classe faz a leitura dos arquivos XML no disco. Faz o parsing das fontes de dados. Mtodos: leLocal: esse mtodo recebe por parmetro o caminho do arquivo a ser aberto e faz o parsing do documento. Root: esse mtodo retorna o elemento raiz do arquivo que fora realizado o parsing.

91

EscreveXml: esta classe grava no disco a rvore hierrquica recebida por parmetro. Mtodos: EscreveXml: mtodo construtor que cria um Document com o Element recebido por parmetro. escreve: esse mtodo recebe por parmetro o endereo, no disco, onde o Document ser gravado e efetua a gravao.

Opcoes: esta classe contm alguns mtodos utilizados pelo sistema. Mtodos: zeraClasse: esse mtodo atribui null varivel que ret que retornar um valor pelo mtodo retornaElement.. retornaElement: esse mtodo percorre uma rvore hierrquica recebida pelo elemento raiz e retorna um Element. Recebe quatro parmetros: um Element elemento raiz que ir ser percorrido; um int n se diferente de zero a pesquisa procurar pelo nome; um int att se diferente de zero a pesquisa procurar pelo atributo e, um String r que contm o texto a ser verificado. Apenas um dos inteiros pode ser diferente de zero ao mesmo tempo.

Pastas: esta classe manipula o arquivo que contm a hierarquia das pastas e canais. Percorre elementos, adiciona pastas e canais e exclui elementos. Mtodos: Pastas: mtodo construtor da classe que inicializa as variveis, e atribui o elemento ro (recebido por parmetro) ao root. Em seguida, chama o mtodo inicializa. inicializa: primeiramente chama o mtodo processaElement e em seguida, atribui, a uma lista, os elementos (ttulos das pastas) que foram processados.

92

atualiza: esse mtodo cria uma Thread e instancia a Classe EscreveXml mandando por parmetro o root corrente. Em seguida invoca o mtodo escreve da Classe EscreveXml que grava no disco, o arquivo XML mandado por parmetro anteriormente, com nome do parmetro enviado nesse mtodo. addPasta: esse mtodo adiciona uma pasta na rvore hierrquica com o nome recebido por parmetro. Em seguida chama o mtodo atualiza para gravar no disco com as alteraes efetuadas. removePasta: esse mtodo exclui uma pasta da rvore hierrquica. Recebe por parmetro o nome do elemento a ser excludo. Invoca o mtodo retornaElement da classe Opes para achar o elemento a ser excludo. Aps receber o elemento, este excludo da rvore hierrquica e chamado o mtodo atualiza para gravar as alteraes no disco. processaElement: esse mtodo percorre a rvore hierrquica recebida por parmetro, Element el. Ao encontrar um elemento como nome igual pasta, adiciona-o ao vetor vPastas. getLista: esse mtodo retorna a lista criada nessa classe.

Canais: esta classe manipula o arquivo que contm a hierarquia das pastas e canais. Percorre elementos, adiciona e exclui canais e faz a conexo. Mtodos: Canais: mtodo construtor da classe que inicializa as variveis. Recebe por parmetro o Elemento a ser processado, atribuindo-o ao root, e o nome da Pasta ao qual pertence. Em seguida, chama o mtodo inicializa. atualizaCanais: esse mtodo instancia a Classe EscreveXml mandando por parmetro o root corrente. Em seguida invoca o mtodo escreve da Classe EscreveXml que grava no disco, o arquivo XML mandado por parmetro anteriormente, com nome do parmetro enviado nesse mtodo.

93

addCanal: mtodo que faz a conexo com a URL mandado por parmetro e adiciona o canal dentro de uma pasta especfica. Recebe por parmetro os atributos utilizados para a adio do canal (ttulo do canal, assim como o link, o destino no disco, o nome da pasta a qual esse canal ser includo). Faz a conexo e se foi efetuada corretamente, ento instancia a classe Noticia, mandando por parmetro o elemento lido na conexo e chama o mtodo atualiza. Em seguida faz a adio do canal na rvore hierrquica e chama novamente o mtodo atualiza para gravar no disco a atualizao. Retorna uma classe Noticia. removeCanal: esse mtodo exclui o canal da rvore hierrquica. Recebe por parmetro o nome do elemento a ser excludo. Invoca o mtodo retornaElement da classe Opes para achar o elemento a ser excludo. Aps receber o elemento, este excludo da rvore hierrquica e chamado o mtodo atualiza para gravar as alteraes no disco. processaElement: esse mtodo percorre a rvore hierrquica recebida por parmetro, Element el, e seta os valores classe ClassCanais. conecta: recebe por parmetro a URL a ser acessada. Faz a conexo e o parsing do arquivo, atribuindo ao atributo canal o documento. getLista: esse mtodo retorna a lista criada a classe. inicializa: chama o mtodo para fazer o processamento da rvore

(processaElement) e aps busca no bean, ClassCanais, o ttulo dos canais criando a lista.

CamposCanais: um bean onde so carregadas informaes sobre o canal lido. Mtodos: CamposCanais: mtodo construtor que inicializa os atributos. setPasta: esse mtodo recebe por parmetro o nome da pasta e atribui ao atributo Pasta.

94

setDescricao: esse mtodo recebe por parmetro a descrio do canal e atribui ao atributo Descrio. setTitulo: esse mtodo recebe por parmetro o ttulo do canal e atribui ao atributo Titulo. setLinkXML: esse mtodo recebe por parmetro o link do canal na internet e atribui ao atributo LinkXML. setLinguagem: esse mtodo recebe por parmetro o contedo da tag linguage do canal e atribui ao atributo Linguagem. setPath: esse mtodo recebe por parmetro o endereo do canal no disco e atribui ao atributo Path. getPasta: retorna o contedo do atributo Pasta. getDescricao: retorna o contedo do atributo Descrio. getTitulo: retorna o contedo do atributo Titulo. getLinkXML: retorna o contedo do atributo LinkXML. getLinguagem: retorna o contedo do atributo Linguagem. getPath: retorna o contedo do atributo Path.

Noticia: esta classe manipula o arquivo que contm as notcias. Recebe por parmetro, no seu construtor, uma rvore hierrquica e processa atribuindo os valores ao bean CamposNoticias. Retorna uma lista com as notcias. Mtodos: Noticia: mtodo construtor da classe que inicializa os atributos e instancia a classe CamposNoticias. Recebe por parmetro o elemento a ser processado e o nome do canal ao qual pertence. Chama o mtodo inicializa.

95

inicializa: chama o mtodo para fazer o processamento da rvore e aps busca no bean , ClassNoticias, o ttulo da notcia adicionando-o lista. processaElement: esse mtodo faz o processamento da rvore hierrquica, setando os respectivos campos na classe CamposNoticias. getLista: retorna a lista criada no mtodo inicializa.

CamposNoticias: um bean onde so carregadas informaes sobre as notcias. So criados vetores que contm as informaes das notcias. Mtodos: CamposNoticias: mtodo construtor que inicializa os atributos. setCanal: esse mtodo recebe por parmetro o nome do canal e atribui ao atributo canal. setDescricao: esse mtodo recebe por parmetro a descrio da notcia e adiciona ao vetor Descrio. setTitulo: esse mtodo recebe por parmetro o ttulo da notcia e adiciona ao vetor Titulo. setLink: esse mtodo recebe por parmetro o link onde a notcia encontra-se na internet e adiciona ao vetor Link. setData: esse mtodo recebe por parmetro a data da postagem da notcia e adiciona ao vetor Data. getCanal: retorna o contedo do atributo canal. getDescricao: recebe por parmetro o ndice que ser acessado no vetor Descricao, retornando o valor respectivo desse ndice. getTitulo: recebe por parmetro o ndice que ser acessado no vetor Titulo, retornando o valor respectivo desse ndice.

96

getLink: recebe por parmetro o ndice que ser acessado no vetor Link, retornando o valor respectivo desse ndice. getData: recebe por parmetro o ndice que ser acessado no vetor Data, retornando o valor respectivo desse ndice.

CONSIDERAES FINAIS

Como a tecnologia, de forma geral, vem desenvolvendo-se muito rapidamente, principalmente o hardware, o software deve acompanhar esse crescimento com qualidade e compatibilidade. O surgimento de dispositivos praticamente equivalentes a um computador pessoal, mas com menos recursos computacionais, faz com que existam maiores dificuldades no desenvolvimento de aplicaes multiplataforma. Isso devido ao fato de as plataformas serem diferentes umas das outras em alguns aspectos como, por exemplo, tamanho de tela e dispositivos de entrada e sada. Esses problemas devem ser resolvidos de alguma maneira e por isso surgiram as linguagens para descrio de interfaces de usurios. O presente trabalho apresenta algumas tecnologias que esto em ascenso na atualidade no ramo de descrio de interfaces para multiplataformas. Essas linguagens so baseadas principalmente em XML, por ser portvel, extensvel e de fcil manipulao. Alm disso, grande parte foi desenvolvida especialmente para a descrio de interfaces, porm pode ser utilizada para a descrio de informaes. Tambm foram examinados alguns trabalhos que mostram ferramentas e conceitos para a resoluo dos problemas relacionados as diferentes plataformas. Alguns dos trabalhos analisados ainda esto em desenvolvimento e no tem uma resoluo efetiva dos problemas citados, principalmente quanto adaptabilidade. Como vrios desses problemas ainda esto sendo estudados e a maioria deles ainda sem concluses concretas, o presente trabalho cita alguns aspectos relevantes para a criao de interfaces na tentativa de resolver alguns dos problemas como a adaptabilidade de telas e a compatibilidade entre componentes de diferentes plataformas. Para resolver esses problemas, foi proposto um estudo utilizando a Linguagem USIXML para a descrio de interfaces para mltiplos dispositivos. Esse estudo engloba o

98

desenvolvimento de um sistema (LENOM) com caractersticas para desktop (LENOM Desktop) e para o celular (LENOM Cel). Essas duas aplicaes demonstram como um sistema deve adaptar-se entre plataformas diferentes, mostrando as diferenas entre uma plataforma e outra. Essas diferenas so considerveis, enquanto o LENOM Desktop possui apenas uma janela, o LENOM Cel j necessita de vrias janelas para chegar at o resultado final. Tambm, o celular no possui o componente rvore, no tem funes de mouse e nem Menu popup e essas diferenas devem ser transformadas para serem equivalentes na plataforma do Celular. Essas aplicaes so leitores de Notcias, onde o usurio pode adicionar e remover pastas e canais de que necessitar e adicionar as mesmas, assim como a sua funo principal, que a leitura de notcias. O usurio adiciona apenas os canais de sua preferncia. Por fim, o trabalho demonstra a descrio do sistema na Linguagem USIXML, mostrando como algumas transformaes so necessrias entre plataformas. A utilizao do Modelo de Transformao da USIXML fundamental para que essas transformaes possam ser efetuadas. Uma abordagem geral sobre essas transformaes tambm apresentada, demonstrando como uma regra de transformao atribuda a componentes de uma interface escrita na linguagem USIXML. Para trabalhos futuros, sugere-se implementar um sistema que faa a leitura dos arquivos USIXML e traduza para uma linguagem de programao qualquer. Esse sistema far a leitura desse arquivo e aplicar um conjunto de regras de transformaes previamente analisadas e especificadas tambm na linguagem USIXML, como mostram alguns exemplos citados neste trabalho. Pode ser utilizada uma API, do JAVA, chamada TransformiXML que pode ser utilizada para fazer o parsing das regras de transformaes. Outras APIs, como a usixml e a grafixml, tambm podem ser utilizadas e esto disponveis para a plataforma JAVA.

REFERNCIAS BIBLIOGRFICAS

ALECRIM, Emerson. Tecnologia RSS. INFO Wester, 16 jan. 2005. Disponvel em: <http://www.infowester.com/rss.php>. Acesso em: 10 jun. 2006. BERNARDO, Viviane do Nascimento. Um sistema para gerao automtica de Web sites para ambientes WAP. 2003. Monografia (Concluso de curso). Universidade Federal do Amazonas, Manaus, 2003. Disponvel em: <http://www2.dcc.ufmg.br/laboratorios/latin/gerindo/pessoal.php?cat=30&order=asc>. Acesso em: 08 abr. 2006. CARVALHO, Windson Viana de. Um Ambiente de Desenvolvimento de Aplicaes MultiPlataformas e Adaptativas para Dispositivos Mveis. 2005. Dissertao (Mestrado) Universidade Federal do Cear, Fortaleza, 2005. Disponvel em: <http://www.mcc.ufc.br/disser/WindsonViana.pdf>. Acesso em: 06 abr. 2006. CASADO, Francis et al. Una herramienta para la creacin de interfaces multiplataforma con UIML. [artigo cientfico]. Disponvel em: <http://www.tecn.upf.es/~ssayag/documents/casado_navarrete_sayago_blat.pdf>. Acesso em: 22 mar. 2006. COSTA NETO, Macilon Arajo; LEITE, Jair C. Uma proposta para o desenvolvimento de interfaces de usurio multi-plataformas com tecnologias Web. [artigo cientfico]. Disponvel em: <http://www.serg.inf.puc-rio.br/ihc/papers/IHC2004/209-212-IHC2004-.pdf>. Acesso em: 22 mar. 2006. COVER PAGES. Technology Reports. XML Markup Languages for User Interface Definition. Disponvel em: <http://xml.coverpages.org/uiml.html>. Acesso em: 10 mar. 2006. CRIARWEB. O que XML. Disponvel <http://criarweb.com/artigos/203.php?manual=13>. Acesso em: 10 mar. 2006. em:

CSS TUTORIAL. Disponvel em: <http://www.codigofonte.com/css/>. Acesso em: 10 jun. 2006.

100

FARIAS, Jos Antonio Leal de. Windows Presentation Foundation Introduo ao XAML. Disponvel em: <http://www.linhadecodigo.com.br/artigos.asp?id_ac=843&pag=2>. Acesso em: 02 abr. 2006. FLORINS, Murielle; VANDERDONCKT, Jean. Graceful Degradation of User Interfaces as a Design Method for Multiplatform Systems. [artigo cientfico]. Disponvel em: <http://www.isys.ucl.ac.be/bchi/publications/2004/Florins-IUI2004.pdf>. Acesso em: 06 maio 2006. GRIFFITHS, Ian. Inside XAML. Ondontnet, 19 jan. 2004. Disponvel em: <http://www.ondotnet.com/pub/a/dotnet/2004/01/19/longhorn.html>. Acesso em: 02 abr. 2006. LIBRIO, Andria et al. Gerao de interfaces atravs de sistemas baseados em conhecimento: uma abordagem centrada em explicaes de modelos de resoluo de problemas. [artigo cientfico]. Disponvel em: <http://www.usixml.org/index.php?download=Liborio-CLIHC2005.pdf>. Acesso em: 22 abr. 2006. LIMBOURG, Quentin et al. USIXML: a Language Supporting Multi-Path Development of User Interfaces. [artigo cientfico]. Disponvel em: <http://www.isys.ucl.ac.be/bchi/publications/2004/Limbourg-DSVIS-EHCI2004.pdf>. Acesso em: 06 maio 2006. LIMBOURG, Quentin; VANDERDONCKT, Jean. USIXML: a User Interface description Language supporting multiple levels of independence. [artigo cientfico]. Disponvel em: <http://www.isys.ucl.ac.be/bchi/publications/2004/Limbourg-JWE2004.pdf>. Acesso em: 10 abr. 2006. MARTINS, Ricardo A. G. C.; RAMALHO, Jos C.; HENRIQUES, Pedro R.. Estudo comparativo de diferentes linguagens de interfaces baseadas em XML. [artigo cientfico]. Disponvel em : <http://www.di.uminho.pt/~jcr/XML/publicacoes/artigos/2004/MRH04.pdf>. Acesso em: 20 mar. 2006. MONTERO, Francisco et al. Solving the Mapping Problem in User Interface Design by Seamless Integration in IDEALXML. [artigo cientfico]. 2005. Disponvel em: <http://www.isys.ucl.ac.be/bchi/publications/2005/Montero-DSVIS2005.pdf>. Acesso em: 22 abr. 2006. MORENO, Pedro J. Molina. Especificacin de interfaz de usuario: de los requisitos a la generacin automtica. 2002. Tese(Doutorado) Universidade Politcnica de Valencia, Valencia, 2002. Disponvel em: <http://www.dsic.upv.es/~pjmolina/papers/TesisPjmolina.pdf>. Acesso em: 10 maio. 2006. POSSEBOM, Ayslan T.; SILVA FILHO, Antonio M. da; SILVA, Srgio R. P.. Gerao de cdigos de interfaces de usurio a partir da linguagem UIML. In: Simpsio de Informtica da Regio Centro do RS, 4, 2005, Santa Maria. Trabalhos apresentados...

101

PUC-RIO. Abordagens para Especificaes de Interfaces. Disponvel em: <http://www2.dbd.puc-rio.br/tesesabertas/0220948_04_cap_03.pdf>. Acesso em: 25 mar. 2006. SCHERER, Daniel. Proposta de suporte computacional ao MCI. 2004. Dissertao (Mestrado) Universidade Federal de Campina Grande, Campina Grande, 2004. Disponvel em: < http://www.dsc.ufcg.edu.br/~scherer/seminarios/DanielScherer.pdf>. Acesso em: 01 maio 2006. SILVA FILHO, Antnio Mendes da. Interface de usurios para Mltiplos dispositivos: questes de desenvolvimento e tendncias de pesquisa. Revista Espao Acadmico, ano 4, n 45, fev. 2005. Disponvel em: <http://www.espacoacademico.com.br/045/45amsf.htm>. Acesso em: 22 mar. 2006. SIMARRO, Francisco Montero. Integracin de calidad y experiencia en el desarrollo de interfaces de usurio dirigido por modelos. 2005. Tese (Doutorado) Universidad de Castilla-la Mancha, Albacete, 2005. Disponvel em: <http://www.infoab.uclm.es/personal/fmontero/idealxml_archivos/fmontero2005.pdf>. Acesso em: 20 abr. 2006. SOUSA, Lirisnei Gomes de; LEITE, Jair C . XICL uma linguagem para o desenvolvimento de interfaces de usurio e de seus componentes. [artigo cientfico]. Disponvel em: <http://portal.acm.org/ft_gateway.cfm?id=944539&type=pdf&coll=GUIDE&dl=ACM&CFI D=15151515&CFTOKEN=6184618>. Acesso em: 25 mar. 2006. UIML. Home of the User Interface Markup <http://www.uiml.org>. Acesso em: 25 mar. 2006. Language. Disponvel em:

USIXML. Home of the USer Interface eXtensible Markup Language. Disponvel em: <http://www.usixml.org>. Acesso em: 15 abr. 2006. VANDERDONCKT, Jean et al. USIXML: a User Interface Description Language for Specifying Multimodal User Interfaces. [artigo cientfico]. 2004. Disponvel em: <http://www.w3.org/2004/02/mmi-workshop/vanderdonckt-louvain.pdf>. Acesso em: 06 maio 2006. W3C. World Wide Web consortium. Disponvel em: <http://www.w3.org>. Acesso em: 10 mar. 2006. WIKIPDIA. A enciclopdia livre. Disponvel em: <http://www.wikipedia.org>. Acesso em: 06 abr. 2006. XAMLON. Disponvel em: <http://www.xamlon.com/whatisxaml.aspx>. Acesso em: 25 mar. 2006. XULPLANET. Disponvel em: <http://xulplanet.com>. Acesso em: 01 maio 2006.

ANEXO A Cdigo USIXML da aplicao LENOM Desktop

<?xml version="1.0" encoding="UTF-8"?> <uiModel xmlns="http://www.usixml.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.usixml.org/ http://www.usixml.org/spec/UsiXML-ui_model.xsd" id="LenomDesktop_4" name="LenomDesktop" creationDate="2006-12-02T20:07:40.986-02:00" schemaVersion="1.6.3" xsi:type="uiModel"> <head> <version modifDate="2006-12-02T20:07:40.986-02:00">1</version> <authorName>Giovani</authorName> <comment>Generated by GrafiXML 1.1.999 build id : 200602081036</comment> <auiModel id="LenomDesktop-aui_4" name="LenomDesktop-aui"> <abstractContainer id="window_component_0" name="window_component_0"> <abstractContainer id="box_1" name="box_1"> <abstractIndividualComponent id="output_text_component_2" name="output_text_component_2"/> <abstractIndividualComponent id="input_text_component_3" name="input_text_component_3"/> <abstractIndividualComponent id="button_component_4" name="button_component_4"/> <abstractIndividualComponent id="button_component_5" name="button_component_5"/> <abstractIndividualComponent id="output_text_component_6" name="output_text_component_6"/> </abstractContainer> <abstractContainer id="box_2" name="box_2"> <abstractContainer id="tree_component_7" name="tree_component_7"/> </abstractContainer> <abstractContainer id="box_3" name="box_3"> <abstractIndividualComponent id="listbox_component_8" name="listbox_component_8"/> </abstractContainer> <abstractContainer id="box_4" name="box_4"> <abstractIndividualComponent id="input_text_component_9" name="input_text_component_9"/> <abstractIndividualComponent id="output_text_component_10" name="output_text_component_10"/> <abstractIndividualComponent id="input_text_component_11" name="input_text_component_11"/> </abstractContainer> </abstractContainer> </auiModel> <cuiModel id="LenomDesktop-cui_4" name="LenomDesktop-cui"> <window id="window_component_0" name="window_component_0" width="400" height="350"> <box id="box_1" name="box_1" type="vertical"> <outputText id="output_text_component_2" name="output_text_component_2" content="/uiModel/resourceModel/cioRef[@cioId='output_text_component_2']/resource/@content" defaultContent="Novo" isVisible="true" isEnabled="true" isBold="true" textColor="#000000"/> <inputText id="input_text_component_3" name="input_text_component_3" isVisible="true" isEnabled="true" textColor="#000000" maxLength="50" numberOfColumns="15" isEditable="true"/> <button id="button_component_4" name="button_component_4" content="/uiModel/resourceModel/cioRef[@cioId='button_component_4']/resource/@content" defaultContent="OK" isVisible="true" isEnabled="true" textColor="#000000"/> <button id="button_component_5" name="button_component_5" content="/uiModel/resourceModel/cioRef[@cioId='button_component_5']/resource/@content" defaultContent="Cancelar" isVisible="true"

103

isEnabled="true" textColor="#000000"/> <outputText id="output_text_component_6" name="output_text_component_6" content="/uiModel/resourceModel/cioRef[@cioId='output_text_component_6']/resource/@content" defaultContent="Titulo do Canal" isVisible="true" isEnabled="true" isBold="true" textColor="#000000"/> </box> <box id="box_2" name="box_2" type="vertical"> <tree id="tree_component_7" name="tree_component_7" isVisible="true" isEnabled="true" textColor="#000000"/> </box> <box id="box_3" name="box_3" type="vertical"> <listBox id="listbox_component_8" name="listbox_component_8" isVisible="true" isEnabled="true" textColor="#000000" multiple_selection="false"> <item id="item_12" content="/uiModel/resourceModel/cioRef[@cioId='item_12']/resource/@content" textColor="#000000"/> </listBox> </box> <box id="box_4" name="box_4" type="vertical"> <inputText id="input_text_component_9" name="input_text_component_9" isVisible="true" isEnabled="true" textColor="#000000" maxLength="150" numberOfColumns="20" numberOfLines="5" isWordWrapped="true" forceWordWrapped="true" isEditable="true"/> <inputText id="input_text_component_11" name="input_text_component_11" isVisible="true" isEnabled="true" textColor="#000000" maxLength="150" numberOfColumns="20" numberOfLines="5" isWordWrapped="true" forceWordWrapped="true" isEditable="true"/> </box> </window> </cuiModel> <contextModel id="LenomDesktop-contextModel_4" name="LenomDesktop-contextModel"> <context id="LenomDesktop-context-pt_PT_4" name="LenomDesktop-context-pt_PT"> <userStereotype id="LenomDesktop-stpt_PT_4" language="pt_PT" stereotypeName="LenomDesktopstpt_PT"/> <platform id="LenomDesktop-platform_4" name="LenomDesktop-platform"/> <environment id="LenomDesktop-env_4" name="LenomDesktop-env"/> </context> </contextModel> <resourceModel id="LenomDesktop-res_4" name="LenomDesktop-res"> <cioRef cioId="output_text_component_2"> <resource content="Novo" contextId="LenomDesktop-context-pt_PT_4"/> </cioRef> <cioRef cioId="button_component_4"> <resource content="OK" contextId="LenomDesktop-context-pt_PT_4"/> </cioRef> <cioRef cioId="button_component_5"> <resource content="Cancelar" contextId="LenomDesktop-context-pt_PT_4"/> </cioRef> <cioRef cioId="output_text_component_6"> <resource content="Titulo do Canal" contextId="LenomDesktop-context-pt_PT_4"/> </cioRef> <cioRef cioId="item_12"> <resource content="Ttulo da Notcia" contextId="LenomDesktop-context-pt_PT_4"/> </cioRef> </resourceModel> </uiModel>

ANEXO B Cdigo USIXML da aplicao LENOM Cel

<?xml version="1.0" encoding="UTF-8"?> <uiModel xmlns="http://www.usixml.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.usixml.org/ http://www.usixml.org/spec/UsiXML-ui_model.xsd" id="LENOM_Cel_4" name="LENOM Cel" creationDate="2006-12-02T16:52:05.147-02:00" schemaVersion="1.6.3" xsi:type="uiModel"> <head> <version modifDate="2006-12-02T16:52:05.147-02:00">1</version> <authorName>Giovani</authorName> <comment>Generated by GrafiXML 1.1.999 build id : 200602081036</comment> <comment>WARNING : AUI Model save is a work in progress. Use it at your own risk</comment> </head> <auiModel id="LENOM_Cel-aui_4" name="LENOM Cel-aui"> <abstractContainer id="window_component_0" name="window_component_0"> <abstractContainer id="box_1" name="box_1"> <abstractIndividualComponent id="listbox_component_2" name="listbox_component_2"/> </abstractContainer> </abstractContainer> <abstractContainer id="window_component_3" name="window_component_3"> <abstractContainer id="box_4" name="box_4"> <abstractIndividualComponent id="listbox_component_5" name="listbox_component_5"/> </abstractContainer> </abstractContainer> <abstractContainer id="window_component_6" name="window_component_6"> <abstractContainer id="box_7" name="box_7"> <abstractIndividualComponent id="listbox_component_8" name="listbox_component_8"/> </abstractContainer> </abstractContainer> <abstractContainer id="window_component_9" name="window_component_9"> <abstractContainer id="box_10" name="box_10"> <abstractIndividualComponent id="listbox_component_11" name="listbox_component_11"/> <abstractIndividualComponent id="input_text_component_13" name="input_text_component_13"/> <abstractIndividualComponent id="output_text_component_27" name="output_text_component_27"/> </abstractContainer> </abstractContainer> <abstractContainer id="window_component_24" name="window_component_24"> <abstractContainer id="box_25" name="box_25"> <abstractIndividualComponent id="input_text_component_26" name="input_text_component_26"/> </abstractContainer> </abstractContainer> </auiModel> <cuiModel id="LENOM_Cel-cui_4" name="LENOM Cel-cui"> <window id="window_component_0" name="window_component_0" width="400" height="350"> <box id="box_1" name="box_1" type="vertical"> <listBox id="listbox_component_2" name="listbox_component_2" isVisible="true" isEnabled="true" textColor="#000000" multiple_selection="false"> <item id="item_14" content="/uiModel/resourceModel/cioRef[@cioId='item_14']/resource/@content" textColor="#000000"/> <item id="item_15" content="/uiModel/resourceModel/cioRef[@cioId='item_15']/resource/@content" textColor="#000000"/> <item id="item_16"

105

content="/uiModel/resourceModel/cioRef[@cioId='item_16']/resource/@content" textColor="#000000"/> </listBox> </box> </window> <window id="window_component_3" name="window_component_3" width="400" height="350"> <box id="box_4" name="box_4" type="vertical"> <listBox id="listbox_component_5" name="listbox_component_5" isVisible="true" isEnabled="true" textColor="#000000" multiple_selection="false"> <item id="item_17" content="/uiModel/resourceModel/cioRef[@cioId='item_17']/resource/@content" textColor="#000000"/> <item id="item_18" content="/uiModel/resourceModel/cioRef[@cioId='item_18']/resource/@content" textColor="#000000"/> </listBox> </box> </window> <window id="window_component_6" name="window_component_6" width="400" height="350"> <box id="box_7" name="box_7" type="vertical"> <listBox id="listbox_component_8" name="listbox_component_8" isVisible="true" isEnabled="true" textColor="#000000" multiple_selection="false"> <item id="item_19" content="/uiModel/resourceModel/cioRef[@cioId='item_19']/resource/@content" textColor="#000000"/> <item id="item_20" content="/uiModel/resourceModel/cioRef[@cioId='item_20']/resource/@content" textColor="#000000"/> </listBox> </box> </window> <window id="window_component_9" name="window_component_9" width="400" height="350"> <box id="box_10" name="box_10" type="vertical"> <inputText id="input_text_component_13" name="input_text_component_13" content="/uiModel/resourceModel/cioRef[@cioId='input_text_component_13']/resource/@content" defaultContent="http://" isVisible="true" isEnabled="true" textColor="#000000" maxLength="50" numberOfColumns="15" isEditable="true"/> <outputText id="output_text_component_27" name="output_text_component_27" content="/uiModel/resourceModel/cioRef[@cioId='output_text_component_27']/resource/@content" defaultContent="Novo" isVisible="true" isEnabled="true" isBold="true" textColor="#000000"/> </box> </window> <window id="window_component_24" name="window_component_24" width="400" height="350"> <box id="box_25" name="box_25" type="vertical"> <inputText id="input_text_component_26" name="input_text_component_26" isVisible="true" isEnabled="true" textColor="#000000" maxLength="150" numberOfColumns="20" numberOfLines="5" isWordWrapped="true" forceWordWrapped="true" isEditable="true"/> </box>

106

</window> </cuiModel> <contextModel id="LENOM_Cel-contextModel_4" name="LENOM Cel-contextModel"> <context id="LENOM_Cel-context-pt_PT_4" name="LENOM Cel-context-pt_PT"> <userStereotype id="LENOM_Cel-stpt_PT_4" language="pt_PT" stereotypeName="LENOM Cel-stpt_PT"/> <platform id="LENOM_Cel-platform_4" name="LENOM Cel-platform"/> <environment id="LENOM_Cel-env_4" name="LENOM Cel-env"/> </context> </contextModel> <resourceModel id="LENOM_Cel-res_4" name="LENOM Cel-res"> <cioRef cioId="input_text_component_13"> <resource content="http://" contextId="LENOM_Cel-context-pt_PT_4"/> </cioRef> <cioRef cioId="item_14"> <resource content="TECNOLOGIA" contextId="LENOM_Cel-context-pt_PT_4"/> </cioRef> <cioRef cioId="item_15"> <resource content="ESPORTES" contextId="LENOM_Cel-context-pt_PT_4"/> </cioRef> <cioRef cioId="item_16"> <resource content="ECONOMIA" contextId="LENOM_Cel-context-pt_PT_4"/> </cioRef> <cioRef cioId="item_17"> <resource content="Terra Grmio" contextId="LENOM_Cel-context-pt_PT_4"/> </cioRef> <cioRef cioId="item_18"> <resource content="Uol Esportes" contextId="LENOM_Cel-context-pt_PT_4"/> </cioRef> <cioRef cioId="item_19"> <resource content="So Paulo Tetra campeo Brasileiro..." contextId="LENOM_Cel-contextpt_PT_4"/> </cioRef> <cioRef cioId="item_20"> <resource content="So Paulo, Grmio, Internacional e Flamengo esto garantidos na libertadores..." contextId="LENOM_Cel-context-pt_PT_4"/> </cioRef> <cioRef cioId="output_text_component_27"> <resource content="Novo" contextId="LENOM_Cel-context-pt_PT_4"/> </cioRef> </resourceModel> </uiModel>