HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Мы можем пойти дальше, создав "глобальный" массив, содержащий сведения обо всех материалах, использованных при написании всех статей, которые мы опубликовали на своем Web-сайте. А для отдельных статей мы создадим "локальный" массив — список материалов, элементы которого хранят индексы соответствующих элементов "глобального" массива. Ведь зачастую при написании разных статей используются одни и те же материалы, и дублировать их описания в разных "локальных" массивах нерационально.
JavaScript-код, создающий такой массив, помещают в отдельный файл Web-сценария. Он будет одинаковым для всех Web-страниц, содержащих статьи.
Подобные хранилища данных, предназначенные для генерирования
НА ЗАМЕТКУ
Конечно, это базы данных в широком смысле этого слова. С "настоящими" базами данных, управляемыми программами Microsoft Access, Microsoft SQL Server, Oracle, MySQL, Embarcadero Interbase и пр., они имеют не очень много сходства.
Но мы совсем забыли о втором достоинстве генерируемого содержимого. В чем же оно заключается?
А в том, что хранящиеся в базе данные можно задействовать по-разному.
— Мы можем сгенерировать на их основе "локальные" списки материалов для отдельных статей, которые поместим на Web-страницы с текстом этих статей.
— Мы можем сгенерировать на основе базы данных "глобальный" список материалов для всех статей, который поместим на отдельную Web-страницу.
— Мы можем выполнять в базе данных поиск использованного материала и выводить на Web-страницу его результаты.
Иначе говоря, мы можем на основе одной и той же информации, хранящейся в базе данных, генерировать разное содержимое Web-страницы. Вот она — унификация данных!
Реализация генерируемого содержимого
Давайте реализуем генерируемое содержимое на нашем Web-сайте. Мы создадим базу данных, содержащую список всех Web-страниц (файлов с подгружаемым содержимым) с названиями и гиперссылками.
— На основе этой базы данных мы будем генерировать вложенные списки полосы навигации.
— В главе 19 мы осуществим вывод на каждой Web-странице раздела "См. также", в котором поместим гиперссылки на Web-страницы с "родственными" данными.
— В последующих главах мы организуем поиск нужной Web-страницы, опять же, на основе данных, хранящихся в этой базе.
Для генерирования содержимого Web-страницы мы применим соответствующие методы объекта Element библиотеки Ext Core (см. главу 15). Этих методов довольно много, и не составит труда выбрать подходящий.
Создание базы данных
Чтобы генерировать содержимое Web-страницы на основе каких-то данных, нужно сначала подготовить сами данные. Поэтому начнем работу с создания базы данных.
Наша база данных будет представлять собой три массива, хранящие списки Web-страниц, которые описывают, соответственно, теги HTML, атрибуты стиля CSS и примеры. Элементы массивов будут хранить конфигураторы, описывающие эти Web-страницы и хранящие их названия и интернет-адреса в виде строк.
Что ж, цель поставлена. За работу!
Создадим текстовый файл с именем data.js и поместим его в папке Site 2. Откроем его и наберем код, приведенный в листинге 18.1.
Листинг 18.1
var aHTML = [];
aHTML[0] = { name: "!DOCTYPE", url: "tags/t_doctype.htm" };
aHTML[1] = { name: "AUDIO", url: "tags/t_audio.htm" };
aHTML[2] = { name: "BODY", url: "tags/t_body.htm" };
aHTML[3] = { name: "EM", url: "tags/t_em.htm" };
aHTML[4] = { name: "HEAD", url: "tags/t_head.htm" };
aHTML[5] = { name: "HTML", url: "tags/t_html.htm" };
aHTML[6] = { name: "IMG", url: "tags/t_img.htm" };
aHTML[7] = { name: "META", url: "tags/t_meta.htm" };
aHTML[8] = { name: "P", url: "tags/t_p.htm" };
aHTML[9] = { name: "STRONG", url: "tags/t_strong.htm" };
aHTML[10] = { name: "TITLE", url: "tags/t_title.htm" };
aHTML[11] = { name: "VIDEO", url: "tags/t_video.htm" };
var aCSS = [];
aCSS[0] = { name: "border", url: "attrs/a_border.htm" };
aCSS[1] = { name: "color", url: "attrs/a_color.htm" };
aCSS[2] = { name: "margin", url: "attrs/a_margin.htm" };
var aSamples = [];
aSamples[0] = { name: "Гиперссылки", url: "samples/a_hyperlinks.htm" };
aSamples[1] = { name: "Контейнеры", url: "samples/a_containers.htm" };
aSamples[2] = { name: "Таблицы", url: "samples/a_tables.htm" };
Здесь
мы объявили массивы aHTML, aCSS и aSamples, которые будут хранить списки Web-страниц, описывающих, соответственно, теги HTML, атрибуты стиля CSS и примеры.Элементы каждого из этих массивов хранят конфигураторы с двумя свойствами:
— name — название соответствующего пункта вложенного списка в виде строки;
— url — интернет-адрес файла с фрагментом содержимого также в виде строки.
Сохраним набранный код в кодировке UTF-8. Вообще, не забываем, что после любых правок кода его нужно сохранять.
Затем откроем в Блокноте Web-страницу index.htm и вставим в ее секцию заголовка такой код:
<SCRIPT SRC="data.js"></SCRIPT>
Он загрузит и выполнит только что созданный нами файл Web-сценария data.js. В результате в памяти компьютера будут созданы три массива — наша база данных.
Отметим, что файл Web-сценария загружается и выполняется в самом начале загрузки Web-страницы index.htm. Поэтому, когда дело дойдет до исполнения Web- сценариев, хранящихся в файле main.js (а они выполняются в конце загрузки Web-страницы), наша база данных уже будет сформирована и готова к работе.
Генерирование полосы навигации
Теперь можно заняться кодом, генерирующим вложенные списки в полосе навигации.
Снова откроем Web-страницу index.htm в Блокноте, если уже ее закрыли. Удалим весь HTML-код, формирующий пункты вложенных списков в полосе навигации, но оставим фрагмент, создающий сами вложенные списки. Результат приведен в листинге 18.2.
Листинг 18.2
<UL ID="navbar">
<LI><A href="#">HTML</A>
<UL>
</UL>
</LI>
<LI><A href="#">CSS</A>
<UL>
</UL>
</LI>
<LI><A href="#">Примеры</A>
<UL>
</UL>
</LI>
<LI><A href="#">О разработчиках</A></LI>
</UL>
После этого откроем файл Web-сценария main.js и поместим перед вызовом метода onReady объекта Ext код из листинга 18.3.
Листинг 18.3
function generateInnerList(aDataBase, elInnerList) {
for (var i = 0; i < aDataBase.length; i++) {
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" + aDataBase[i].name + "</A></CODE></LI>"; elInnerList.insertHtml("beforeEnd", s);
}
}
Он объявляет функцию generateInnerList, которая будет создавать пункты одного вложенного списка. Эта функция принимает два обязательных параметра: