Capítulo 2. Técnicas de especificação de interfaces de usuário
2.3. Descrição de técnicas, modelos e LDIUs
2.3.4. Linguagens de descrição de interfaces baseadas em eXtensible Markup
2.3.4.2. User Interface Markup Language (UIML)
Conceituação
A User Interface Markup Language (UIML) é uma linguagem baseada em
XML cuja meta é expressar interfaces de usuário para múltiplas plataformas de software em diferentes dispositivos e para múltiplas aplicações [Phanouriou, 2000].
Para criar uma interface de usuário, deve-se escrever um documento em UIML, contendo o estilo de apresentação apropriado para o dispositivo para o qual a interface será desenvolvida. UIML é então mapeada para a linguagem usada pelo dispositivo alvo.
Na UIML, a interface de usuário é um conjunto de elementos de interface, com os quais o usuário final interage, cada elemento de interface é chamado de parte, através desses elementos é que serão realizados os mapeamentos. As partes são organizadas de acordo com a categoria de usuário ou de dispositivos e cada parte tem seu conteúdo. A seguir, temos uma breve descrição de seus elementos:
<interface> Serve como um recipiente para a descrição da interface. Possui quatro elementos: structure, content, style e behavior.
<structure> Local onde cada parte da interface deve receber nome da instância e da classe. Os elementos são mapeados para widgets na plataforma escolhida.
<content> Especifica o conteúdo da interface.
<style> Especifica o estilo de apresentação, que é específico do dispositivo para cada classe de partes da interface.
<behavior> Descreve o comportamento da interface, quando o usuário interage com ela, enumerando um conjunto de condições e ações associadas.
<peers> Especifica quais widgets na plataforma alvo e quais métodos ou funções em scripts, programas, ou objetos são associados com a interface de usuário. Possui dois elementos: presentation e logic.
<presentation> Provê informação sobre apenas um simples toolkit. Descreve os diferentes widgets e eventos.
<logic> Descreve como a interface de usuário interage com a lógica fundamental que implementa a funcionalidade através da interface.
<head> Contém metadados sobre o documento UIML corrente. Seus elementos não são considerados parte da interface.
<template> Habilita o design de partes da interface (ou completa) para que sejam reusáveis.
<app>: contém a estrutura da interface e possui dois elementos básicos: <group> e <elem>, que permitem ao designer crier uma estrutura sem preencher
todas as particularidades. <app> precisa de uma propriedade class para o estilo poder renderizar a mesma. A propriedade name nomeia a app.
<define> define os grupos e elementos do app mais detalhadamente. O estudo de caso descrito na seção 2.2 segue na Figura 10:
<UIML> <HEAD>
<TITLE>Compactação e Descompatação de Arquivos</TITLE> </HEAD>
<APP NAME="Compacta-Descompacta" CLASS="App"> <GROUP NAME= "MainFrame" CLASS="frame"> <GROUP NAME="Operação" CLASS="menu"> <ELEM NAME="Compactar" CLASS="menuitem"/> <ELEM NAME="Descompactar" CLASS="menuitem"/> </GROUP>
<GROUP NAME="Arquivos" CLASS="menu">
<ELEM NAME="SelecionarArquivos" CLASS="menuitem"/> <ELEM NAME="SelecionarArquivoPrincipal" CLASS="menuitem"/> <ELEM NAME="DeterminarDestino" CLASS="menuitem"/>
</GROUP>
<GROUP NAME="Efetuar" CLASS="menu"> <ELEM NAME="Compactação" CLASS="menuitem"/> <ELEM NAME="Descompactação" CLASS="menuitem"/> </GROUP>
<ELEM NAME="Arquivo" CLASS="file"/>
<ELEM NAME="ArquivoPrincipal" CLASS="file"/> <ELEM NAME="OperaçãoEfetuada" CLASS="frame"/> <ELEM NAME="Destino" CLASS="directory"/> <GROUP NAME= "CompFrame" CLASS="frame"> <ELEM NAME="Opção1" CLASS="checkbox"/> <ELEM NAME="Opção2" CLASS=" checkbox "/> …
</GROUP>
<GROUP NAME= "DescompFrame" CLASS="frame"> <ELEM NAME="Opção1" CLASS="checkbox"/> <ELEM NAME="Opção2" CLASS=" checkbox "/> …
</GROUP>
<ELEM NAME="Arquivo" CLASS="file"/> </APP> <DEFINE NAME="SelecionarArquivos"> <PROPERTIES> <CLASS VALUE="menuitem"/> <ACTION VALUE="Arquivo.SELECTED=true" TRIGGER= "select" /> </PROPERTIES> </DEFINE> <DEFINE NAME="Compactar"> <PROPERTIES> <CLASS VALUE="menuitem"/> <ACTION
VALUE="CompFrame.VISIBLE=true" TRIGGER= "select" /> </PROPERTIES> </DEFINE> <DEFINE NAME="SelecionarOpção1"> <PROPERTIES>
<CLASS VALUE=" checkbox "/> <ACTION VALUE="Opção1.SELECTED=not(Opção1.SELECTED)" TRIGGER= "select" /> </PROPERTIES> </DEFINE> … <DEFINE NAME="SelecionarArquivoPrincipal"> <PROPERTIES>
<CLASS VALUE=" menuitem "/> <ACTION VALUE="ArquivoPrincipal.SELECTED=true" TRIGGER= "select" /> </PROPERTIES> </DEFINE> <DEFINE NAME="Compactação"> <PROPERTIES>
<CLASS VALUE=" menuitem "/> <ACTION VALUE="OperaçãoEfetuada.Visible=true" TRIGGER= "select" /> </PROPERTIES> </DEFINE> <DEFINE NAME="Descompactar"> <PROPERTIES> <CLASS VALUE="menuitem"/> <ACTION VALUE="DescompFrame.VISIBLE=true" TRIGGER= "select" /> </PROPERTIES> </DEFINE> <DEFINE NAME="DeterminarDestino"> <PROPERTIES> <CLASS VALUE="menuitem"/> <ACTION VALUE="Destino.SELECTED=true" TRIGGER= "select" /> </PROPERTIES> </DEFINE> <DEFINE NAME="Descompactação"> <PROPERTIES>
<CLASS VALUE=" menuitem "/> <ACTION
VALUE="OperaçãoEfetuada.Visible=true" TRIGGER= "select"
</PROPERTIES> </DEFINE> </UIML>
Figura 10: Tarefa de Compactação descrita em AUIML
Análise
A UIML, assim como a AUIML, também visa descrever interfaces gráficas para diversas plataformas e, por também ser baseada em XML, possui uma grande facilidade de ser processadas por ferramentas. Existem diversas ferramentas que traduzem de UIML para diversas linguagens distintas e serão descritas na seção 6.1.1. A UIML visa descrever todos os aspectos de interação: funcionalidade, interativo e de comunicabilidade.