[J]Center - XUL: Продолжаем разговор

Пример создания меню c помощью SWT

Patrick
2005-02-08

Создавать окна с текстом мы уже научились, дальше мы рассмотрим элементы button и label, поговорим о стилях CSS2, а также вкратце рассмотрим использование скриптов в XUL-документе. Начнем как обычно с примера:

<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window title="Button, label, стиль и скрипт" id="second"
   	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script src="second.js" type="application/x-javascript"/>
  <label control="button1" id="label" value="Это элемент label!!!"/>
  <button id="button1" label="Нажми меня"  oncommand="alert('Ты нажал!'); return false;"/>
  <button id="button2" accesskey="z" label="Меня тоже можешь нажать" oncommand="isee();"/>
</window>

Забрать пример

В примере был подключен внешний файл second.js, содержащий функцию isee():

function isee() {
    document.getElementById("label").value="Label! LABEL! LaBeL!";
}

Далее я объясню все строки документа, а также опишу атрибуты рассмотренных элементов.

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> Данная строка является инструкцией обработки и обычно частью пролога документа, а не его содержимым. Строка указывает на файл стилей, который будет использоваться. href="chrome://global/skin/" указывает, что нужно использовать таблицу стилей, которую использует Mozilla. Давайте создадим свою таблицу стилей и присоединим к нашему документу:

window {
  background-color: #E0E9E9;
  color: black;
  font-family: "Trebuchet MS", Trebuchet, Verdana, sans-serif;
}
label {
  border: solid;
  border-color: #4682B4;
  font-size: large;
  text-align: center;
  padding: 10px 0;
}
button {
  color: #E0E9E9;
  margin: 30px;
}

Благодаря данной таблице стилей очень хорошо видно, что текст на элементе button есть ни что иное как label, а у элемента button даже атрибут для установки текста называется label.

Для использования нашего стиля необходимо добавить следующюю строчку:

<?xml-stylesheet href="file:D:/Coding/xml/xul/xul_continue/2_1.css" type="text/css"?>

Забрать пример

Обратите внимание, если запускать документ через командную строку, то необходимо указывать абсолютный путь к файлу(Например, file:D:/Coding/xml/xul/xul_continue/2_1.css), а если запуска происходит через Мозиллу, то можно использовать относительный путь, причем file: можно опустить. То есть, если вы запускаете приведенный выше пример через командную строку, то для того чтобы работал скрипт нужно указать абсолютный путь к файлу.

Элемент script аналогичен тегу <script> в HTML и предназначен для объявления скрипта, обычно скрипт располагается отдельно, путь к нему указывается с помощью атрибута src, но также существует возможность разместить скрипт между открывающимися и закрывающимися тегами элемента:

<script> window.title = "Заголовок с помощью скрипта"; </script>

У этого элемента есть еще один атрибут – type, указывающий на язык скрипта, чаще всего используется ‘application/x-javascript’.

Перейдем к рассмотрению элемента label. Элемент используется как элемент управления, если пользователь кликнет на label’е, то в фокусе окажется элемент, связанный с lebel. У элемента есть следующие атрибуты:

accesskey - горячая клавиша.
control - указывает на id элемента с которым связан данный label.
crop - если выделено мало места, чтобы поместить label в отведённое место, то он обрезается в соответствии со значениями атрибута:

start: текст будет обрезан по левому краю.
end: текст будет обрезан по правому краю.
center: текст будет обрезан с обоих сторон.
none: текст не будет обрезан, если он не помещается.

disabled - если атрибут установлен в true, тогда отключить элемент.
value – текст элемента.

Всем пользователям очень знакомый элемент button, ну куда без него? Так что просто опишу атрибуты:

accesskey - горячая клавиша. Клавиша, определенная в этом поле и нажатая вместе с функциональной клавишей (обычно CTRL или ALT, в зависимости от платформы), приводит к срабатыванию кнопки.
crop - если выделено мало места, чтобы поместить label в отведённое место, то он обрезается в соответствии со значениями атрибута:

start: текст будет обрезан по левому краю.
end: текст будет обрезан по правому краю.
center: текст будет обрезан с обоих сторон.
none: текст не будет обрезан, если он не помещается.

dir - взаиморасположение по горизонтали картинки и надписи:

ltr: картинка слева или над надписью.
rtl: картинка справа или внизу.

disabled - если атрубут установлен в true, тогда отключить элемент.
dlgType - тип кнопки, когда она используется в диалоговом окне:

accept: кнопка ОК, принятия изменений по нажатию.
cancel: кнопка отмены.
help: кнопка помощи.
disclosure: дополнительная информация по диалогу.

image - ссылка на картинку, которая будет показана на кнопке.
label - Надпись на кнопке. Если пустая надпись не показывается.
orient - взаиморасположение по вертикали картинки и надписи.

horizontal: на одной высоте (по умолчанию).
vertical: Картинка и надпись на разной высоте.

tabindex - очередность элементов при нажатии кнопки TAB.
type - установить тип кнопки(checkbox, radio, menu, menu-button).
checked - признак отмеченной кнопки(true или false).
command – указывает на id элемента command.

<command id="cmd_alert" oncommand="alert('Что читать не умеешь?');"/>
<button label="Не нажимать!" command="cmd_alert"/>

Также можно указать действие сразу, без ссылки:

<button label="Не нажимать!" oncommand="alert('Что читать не умеешь?'); return false;"/>

Используя полученные знания приведу пример создания кнопки как в настройках Мозиллы.

Для этого создадим таблицу стилей вот с таким содержимым:

window {
  background-color: #fff;
}

button {
  margin: 30px;
}

.button {
  -moz-appearance: none;
  border: 1px solid transparent;
  background-color: transparent;
  margin-left: 5px;
  margin-right: 5px;
  color: black;
}

.button:hover, .button:focus {
  border: 1px solid;
  -moz-border-left-colors: #98B4E2;
  -moz-border-top-colors: #98B4E2;
  -moz-border-right-colors: #98B4E2;
  -moz-border-bottom-colors: #98B4E2;
  background-color: #E0E8F6;
}

.button[checked="true"] {
  border: 1px solid;
  -moz-border-left-colors: #316AC5;
  -moz-border-top-colors: #316AC5;
  -moz-border-right-colors: #316AC5;
  -moz-border-bottom-colors: #316AC5;
  background-color: #C1D2EE;
}

Класс button устанавливает стиль кнопки, здесь все параметры являются стандартными за исключением -moz-appearance, который является расширением Mozilla CSS2 и позволяет включить поддержку тем, точнее отключить стандартную тему ОС при использовании значения none. Параметр имеет много значений и некоторые из них совпадают с тегами XUL. Например, чтобы из label сделать подобие кнопки в таблицу стилей в место описания label нужно добавить -moz-appearance: button. Все отсльное интуитивно понятно при наличии знаний в CSS2, так что не буду на этом останавливаться. Если у вас есть какие-то вопросы или предложения - пишите.

А напоследок приведу листинг примера со стильными кнопками:

<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet href="2_2.css" type="text/css"?>
<window title="Стильная кнопка" id="StyleButton" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <button id="style-button1" class="button" label="Привет" image="../../files/logo.gif" orient="vertical" dir="ltr"/>
  <button id="style-button2" class="button" label="Пока" image="../../files/logo.gif" orient="vertical" dir="ltr"/>
</window>

Забрать пример

Вот такая красота и все это благодаря небольшим познаниям в XUL и CSS2. Все пока...

jCenter

Пример создания меню c помощью SWT