Interfaces de usuário XUL

 

Esta página ilustra a linguagem especializada do Mozilla para criação de interfaces de usuário.

Você cria uma simples demonstração que roda no seu navegador Mozilla.

Informação: Intefaces de usuário

Embora o HTML tenha algum suporte à interfaces de usuário, ele não suporta todas as características que você precisa para fazer uma aplicação autônoma.

O Mozilla supera esta limitação providenciando uma linguagem especializada para criar interafaces de usuário: XUL (XML User-interface Language, usualmente pronunciada como "zool").

Em XUL, muitas características comuns de interfaces de usuário podem ser construídas. Por exemplo, XUL proporciona janelas especializadas como diálogos, assim como barras de estado, menus, barras de ferramenta, e mesmo navegadores.

Mais características especializadas podem ser construídas em partes usando XUL juntamente com outras tecnologias que você viu neste tutorial: estilo CSS, código JavaScript e XBL bindings.

Como outras linguagens baseadas em XML, XUL usa folhas de estilo CSS.

Mais detalhes
Para maiores informações sobre interfaces de usuário XUL, veja a página XUL neste wiki.

Ação: Uma demonstração XUL

Crie um novo documento XUL de um simples arquivo de texto, doc7.xul. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet type="text/css" href="style7.css"?>

<window
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  title="CSS Getting Started - XUL demonstration"
  onload="init();">

<script type="application/x-javascript" src="script7.js"/>

<label class="head-1" value="XUL demonstration"/>

<vbox>

  <groupbox class="demo-group">
    <caption label="Day of week calculator"/>
    <grid>
      <columns>
        <column/>
        <column/>
        </columns>
      <rows>
        <row>
          <label class="text-prompt" value="Date:" 
            accesskey="D" control="date-text"/>
          <textbox id="date-text" type="timed" 
            timeout="750" oncommand="refresh();"/>
          </row>
        <row>
          <label value="Day:"/>
          <hbox id="day-box">
            <label class="day" value="Sunday" disabled="true"/>
            <label class="day" value="Monday" disabled="true"/>
            <label class="day" value="Tuesday" disabled="true"/>
            <label class="day" value="Wednesday" disabled="true"/>
            <label class="day" value="Thursday" disabled="true"/>
            <label class="day" value="Friday" disabled="true"/>
            <label class="day" value="Saturday" disabled="true"/>
            </hbox>
          </row>
        </rows>
      </grid>
    <hbox class="buttons">
      <button id="clear" label="Clear" accesskey="C" 
        oncommand="clearDate();"/>
      <button id="today" label="Today" accesskey="T"
        oncommand="setToday();"/>
      </hbox>
    </groupbox>

  <statusbar>
    <statusbarpanel id="status"/>
    </statusbar>

</vbox>

</window>

Crie um novo arquivo CSS, style7.css. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:

/*** XUL demonstration ***/
window {
  -moz-box-align: start;
  background-color: -moz-dialog;
  font: -moz-dialog;
  padding: 2em;
  }

.head-1 {
  font-weight: bold;
  font-size: 200%;
  padding-left: 5px;
  }


/* the group box */
.demo-group {
  padding: 1em;
  }

.demo-group grid {
  margin-bottom: 1em;
  }

.demo-group column {
  margin-right: .5em;
  }

.demo-group row {
  margin-bottom: .5em;
  }

.demo-group .buttons {
  -moz-box-pack: end;
  }


/* the day-of-week labels */
.day {
  margin-left: 1em;
  }

.day[disabled] {
  color: #777;
  }

.day:first-child {
  margin-left: 4px;
  }


/* the left column labels */
.text-prompt {
  padding-top: .25em;
  }


/* the date input box */
#date-text {
  max-width: 8em;
  }


/* the status bar */
statusbar {
  width: 100%;
  border: 1px inset -moz-dialog;
  margin: 4px;
  padding: 0px 4px;
  }

#status {
  padding: 4px;
  }

#status[warning] {
  color: red;
  }

Crie um novo arquivo de texto, script7.js. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego todo o conteúdo daqui:

// XUL demonstration

var dateBox, dayBox, currentDay, status; // elements

// called by window onLoad
function init() {
  dateBox = document.getElementById("date-text")
  dayBox = document.getElementById("day-box")
  status = document.getElementById("status")
  setToday();
  }

// called by Clear button
function clearDate() {
  dateBox.value = ""
  refresh()
  }

// called by Today button
function setToday() {
  var d = new Date()
  dateBox.value = (d.getMonth() + 1)
    + "/" + d.getDate()
    + "/" + d.getFullYear()
  refresh()
  }

// called by Date textbox
function refresh() {
  var d = dateBox.value
  var theDate = null

  showStatus(null)
  if (d != "") {
    try {
      var a = d.split("/")
      var theDate = new Date(a[2], a[0] - 1, a[1])
      showStatus(theDate)
      }
    catch (ex) {}
    }
  setDay(theDate)
  }

// internal
function setDay(aDate) {
  if (currentDay) currentDay.setAttribute("disabled", "true")
  if (aDate == null) currentDay = null
  else {
    var d = aDate.getDay()
    currentDay = dayBox.firstChild
    while (d-- > 0) currentDay = currentDay.nextSibling
    currentDay.removeAttribute("disabled")
    }
  dateBox.focus();
  }

function showStatus(aDate) {
  if (aDate == null) {
    status.removeAttribute("warning")
    status.setAttribute("label", "")
    }
  else if (aDate === false || isNaN(aDate.getTime())) {
    status.setAttribute("warning", "true")
    status.setAttribute("label", "Date is not valid")
    }
  else {
    status.removeAttribute("warning")
    status.setAttribute("label", aDate.toLocaleDateString())
    }
  }

Para ver o resultado exatamente como pretendido use o tema padrão do seu navegador. Se você usa um tema diferente, isto mode mudar alguns estilos da interface do usuário e a demonstração pode parecer estranha.

Abra o documento no seu navegador Mozilla e use a interface.

Este wiki não suporta XUL e JavaScript nas páginas, então não é possível fazer a demonstração aqui. Deve se parecer com isto:

XUL demonstration

Day of week calculator

Date: 6/27/2005
Day: Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday
 

Clear Today

June 27, 2005

Notas sobre esta demonstração:

  • O documento XUL é ligado à folha de estilo normalmente, e também ligado ao script.
  • O script não é importante nesta demonstração.
  • Muito do estilo que você vê é determinado pelo tema do seu navegador.

Examine a folha de estilo do documento para ver se você entende todas as regras dele. Se houver alguma regra que você não entende, comente-a e atualize o seu navegador para ver o efeito no documento.

Desafio
Use a ferramenta DOM Inspector para examinar a caixa de texto Date. Ela é feita de outros elementos que são gerados por seu XBL binding.

Descubra a classe do elemento html:input. Este é o elemento que atualmente recebe a entrada do usuário.

Usando este conhecimento, adicione uma regra à sua folha de estilo que faça o fundo da caixa Date de um azul pálido quando ele tiver o foco do teclado (mas branco quando o foco do teclado estiver em outro lugar).

O que vem depois?

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

Nesta demonstração, você viu que as formas retangulares padrão são comuns na maioria das interfaces de usuário. Mozilla também suporta uma linguagem especializada de gráficos para criar padrões, usando folhas de estilo CSS para especificar o estilo. A próxima página demonstra isto: Gráficos SVG

Categorias

Interwiki Language Links

Document Tags and Contributors

Contributors to this page: Verruckt, Leandro Mercês Xavier
Last updated by: Verruckt,