В прошлый раз мы познакомились с XUL. Теперь давайте посмотрим на поиск и навигацию …
… и не забудьте скачать архив кодов для этой серии , если вы еще этого не сделали!
Отчаянно Ищу
Как показал последний пример, используя XUL, вы можете дать посетителям своего сайта уникальный опыт, изменив браузер, чтобы сделать навигацию быстрее и проще. И когда вы начинаете добавлять JavaScript в эту смесь, появляются все новые и новые мощные возможности. Вот простой пример, который отображает окно поиска, которое всегда видно. Это также демонстрирует потенциал для создания форм с XUL.
<?php
header ( 'Content-type:
application/vnd.mozilla.xul+xml' );
?>
<?xml version="1.0"?>
<!-- example2.xul -->
<?xml-stylesheet href="example2.css" type="text/css"?>
<window
title="Searching Sitepoint"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="example2.js"/>
<hbox id="searchPane">
<description><html:div id="title">This
is HTML</html:div></description>
<grid flex="1">
<columns>
<column/>
<column/>
</columns>
<rows>
<row align="end">
<textbox id="searchField"/>
<button id="searchButton" label="Search
Sitepoint" oncommand="search();"/>
</row>
</rows>
</grid>
</hbox>
<xbox flex="1">
<browser id="sitepointBrowser" flex="1" src="
http://www.sitepoint.com/"/>
</xbox>
</window>Чтобы увидеть это в действии, просмотрите example2.xul из архива кода и попробуйте ввести «PHP» в поле справа вверху.
Первое, на что стоит обратить внимание, это то, что я включил немного JavaScript
<script type="application/x-javascript" src="example2.js"/>
Мы рассмотрим сценарий через минуту.
Далее я использовал два элемента <xbox /> Ящики — это контейнеры, в которые мы можем помещать другие элементы XUL — они позволяют легко выложить ваше приложение. Я назначил идентификатор первому, поэтому я идентифицирую его в своем документе CSS. Альтернативой hbox является vbox , который используется для создания делений вверх по оси Y, а не по оси X.
Я использовал элемент description , который является общим контейнером для текста, просто чтобы доказать, что вы можете поместить HTML в документ XUL; обратите внимание, что я должен указать префикс пространства имен для HTML. Имейте в виду, что не все элементы XUL могут использоваться для отображения HTML — практическое правило выглядит так: если элемент может содержать текст, он должен иметь возможность отображать HTML.
В первом hbox я использовал сетку , которая во многом похожа на таблицу в HTML, и которую я использовал, чтобы помочь правильно расположить элементы. Это должно быть знакомо любому, кто имеет опыт работы с ASP.NET.
Затем я использовал два элемента формы, текстовое поле и кнопку . Я назначил каждому атрибут «id», чтобы назначить CSS и найти текстовое поле с DOM. Атрибут «oncommand» определяет функцию JavaScript, которая вызывается при нажатии кнопки, очень похоже на атрибут «onClick» в HTML.
Наконец, обратите внимание на идентификатор элемента браузера во втором hbox; Я буду использовать это через JavaScript.
CSS-документ, который я здесь использовал, выглядит следующим образом:
window
{
background-color: navy;
}
#searchPane
{
background-color: silver;
}
#searchField
{
width: 300px;
height: 25px;
font-family: verdana;
font-size: 12px;
font-weight: bold;
color: purple;
}
#searchButton
{
font-family: verdana;
font-size: 12px;
font-weight: bold;
color: navy;
}
/* This style is for the HTML div element */
#title
{
font-family: verdana;
font-size: 14px;
font-weight: bold;
color: #ff4500;
text-indent: 10px;
}
Обратите внимание, что документ CSS применяется как к XUL, так и к HTML.
А теперь этот JavaScript:
// For searching sitepoint
function search () {
var searchField=document.getElementById('searchField');
var sitepointBrowser=document.getElementById('sitepointBrowser');
sitepointBrowser.setAttribute('src',
'http://www.sitepoint.com/search/search.php?q='
+searchField.value+'&submit=Search');
}
Я использовал DOM, чтобы получить значение searchField Я также получил элемент браузера, используя его атрибут id. В третьей строке я изменяю значение атрибута src в элементе browser, чтобы оно указывало на поисковый URL SitePoint.
Нет проблем!
Меню на вынос
Если вы когда-нибудь пытались реализовать меню с помощью JavaScript , вы будете знать, что то, что должно быть довольно простым, на практике очень сложно. Реализуйте что-то большее, чем простое меню, и вам предстоит непростая битва. С XUL это другая история.
Используя элемент menubar , вот как вы можете разместить меню на своем сайте:
<?php
header ( 'Content-type: application/vnd.mozilla.xul+xml' );
?>
<?xml version="1.0"?>
<!-- example3.xul -->
<?xml-stylesheet href="example3.css" type="text/css"?>
<window
title="Searching Sitepoint"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul">
<script type="application/x-javascript" src="example3.js"/>
<hbox id="menuPane">
<menubar id="sitepointMenubar" grippyhidden="true">
<menu id="clientside-menu" label="Client Side">
<menupopup id="clientside-popup">
<menuitem label="Client Side Home"
oncommand="goTo('http://www.sitepoint.com/cat/81')"/>
<menuseparator/>
<menuitem label="HTML and XHTML"
oncommand="goTo('http://www.sitepoint.com/subcat/88')"/>
<menuitem label="JavaScript and DHTML"
oncommand="goTo('http://www.sitepoint.com/subcat/89')"/>
<menuitem label="CSS"
oncommand="goTo('http://www.sitepoint.com/subcat/90')"/>
<menuitem label="XML"
oncommand="goTo('http://www.sitepoint.com/subcat/91')"/>
</menupopup>
</menu>
<menu id="serverside-menu" label="Server Side">
<menupopup id="serverside-popup">
<menuitem label="Server Side Home"
oncommand="goTo('http://www.sitepoint.com/subcat/82')"/>
<menuseparator/>
<menuitem label="ASP and .NET"
oncommand="goTo('http://www.sitepoint.com/subcat/92')"/>
<menuitem label="Perl and CGI"
oncommand="goTo('http://www.sitepoint.com/subcat/93')"/>
<menuitem label="Java and J2EE"
oncommand="goTo('http://www.sitepoint.com/subcat/94')"/>
<menu id="phpmysql-menu" label="PHP and MySQL">
<menupopup id="phpmysql-popup">
<menuitem label="PHP and MySQL Interviews"
oncommand="goTo('http://www.sitepoint.com/subcat/97')"/>
<menuitem label="PHP and MySQL Tutorials"
oncommand="goTo('http://www.sitepoint.com/subcat/98')"/>
<menuitem label="PHP and MySQL Reviews"
oncommand="goTo('http://www.sitepoint.com/subcat/99')"/>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
</hbox>
<hbox flex="1">
<browser id="sitepointBrowser" flex="1" src="
http://www.sitepoint.com/"/>
</hbox>
</window>
Сценарий немного больше, чем те, которые вы видели до сих пор. Давайте внимательнее посмотрим.
Корневым элементом меню является строка меню . Я отключил «grippy», то есть «вещь», которую вы можете щелкнуть в Mozilla, чтобы скрыть меню и панели инструментов.
Ниже меню находится элемент меню , который я назначил ярлыку для посетителей. Каждый элемент меню под строкой меню определяет новое выпадающее меню.
С меню у нас есть всплывающее меню , которое представляет собой «панель», которая отображается при нажатии на меню.
Внутри menupopup мы размещаем элементы меню , где метка указывает текст, который появляется для пункта меню, а атрибут oncommand используется для запуска функции JavaScript (которую мы увидим чуть позже).
Меню , отображаемое под обоими элементами меню, используется для размещения горизонтальной линии через меню.
Заметьте меню PHP? Я создал здесь подменю, чтобы каждая из связанных с PHP категорий SitePoint могла появляться в одном меню.
JavaScript очень прост:
// Directs browser element to a different src
function goTo (url) {
var sitepointBrowser=document.getElementById('sitepointBrowser');
sitepointBrowser.setAttribute('src',url);
}
И CSS:
window
{
background-color: navy;
}
menu
{
background-color: white;
font-family: verdana;
font-weight: bold;
font-size: 12px;
color: gray;
}
menupopup
{
background-color: silver;
}
menuitem
{
font-family: verdana;
font-weight: bold;
font-size: 12px;
color: navy;
}
Другими словами, создание меню еще никогда не было таким простым!
Вы так много можете сделать с XUL, что я могу продолжать показывать вам демки вечно. Все те вещи, которые вы изо всех сил пытались встроить в свой сайт, такие как древовидные меню, «всплывающие подсказки», полосы прокрутки, индикаторы выполнения и т. Д., Совсем несложны с XUL.
Для тех, кто имеет опыт создания графических интерфейсов, вы обнаружите, что Mozilla даже реализовала «широковещательные» и «наблюдатели» в качестве элементов XUL вместе с элементом «набора команд», который можно использовать для запуска нескольких ответов на события. О, а я уже упоминал об оверах, шаблонах и источниках данных RDF? А как насчет XBL, когда вы хотите изменить поведение виджетов XUL? Возможно, на следующей неделе, в финальной части этой серии …