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.
| 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="https://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
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.
| 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 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