Рассмотрев то, каким образом строится главное окно магазина, остановимся отдельно на вопросе отрисовки таким важных компонентов интерфейса, как боксы. При дальнейшем рассмотрении, как было сказано ранее будет использоваться шаблон Helius с базовым путем файлов шаблона: /templates/Helius. В боксах отображаются категории товаров, ссылки, поисковые формы и опросы. Вобщем все, на что способен магазин. Пока не будем детально рассматривать вопрос, что и как строится в боксах в зависимости от их типа. Ограничимся обощенным абстрактным боксом типа информации о себе, содержащей простейший текст. Разумеется, что никто не мешает вместа текста использовать полноценные елементы HTML страницы.

Итак. Боксы состоят из трех частей: Заголовка infoBoxHeading, тела бокса infoBox и завершающего трейлера infoboxFooter. Все эти классы описаны в файле /includes/classes/boxes.php. В более поздних модификациях используется другой файл для описания боксов: boxes.tpl.php, содержащий дополнительные классы для отображения боксов, поэтому рекомендуется обращаться в первую очередь именно к этому файлу для того, чтобы разбираться с проблемами в отображении боксов. Этот файл подключается в модуле template_application_top.php, вызванного из application_top.php.

Отрисовываются боксы путем вызова конструктора класса, в который передаются такие важные компонеты, как параметры отрисовки и его содержимое.    Следует заметить, что боксы отрисовываются в соответствии с тем, как это прописано в файлах этих боксов: boxes/*. В этих файлах определяется содержимое боксов и их оформление. Рассмотрим конструкторы вышеуказанных классов, которые и производят отрисовку элементов боксов.

infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false)

На параметре $contents остановимся подробнее чуть позже. Сейчас ограничимся только тем, что именно в этой переменной задается содержимое бокса. $left_corner, $right_corner – Если эти параметры опустить, то по-умолчанию заголовок бокса будет отображаться не простым квадратом, а квадратом с изображениями левого и правого угла соответственно.

Рассмотрим, какими изображениями будет пользоваться отрисовщик компонентов заголовка, в зависимости от комбинаций ключей(базовый путь изображений images/infobox/*):

При этом в качестве фонового изображения используется background.gif.

Как видим, полное изображение заголовка выглядит таким образом:

Левый угол, фоновое изображение и заголовок, правый угол, стрелка.  Отображается заголовок в виде элементов <td> таблицы, при этом к ним применяется класс infoBoxHeading.

Содержимое бокса отрисовывается  с помощью класса infoBox так же в виде таблицы, связанной с каскадным стилем templateinfoBox. При этом стиль применяется к таблице, а не к каждой отдельной строке. При этом при отрисовке бокса исподьзуются изображения разделителя слева: box_bg_l.gif и разделителя справа box_bg_r.gif, и разделителей сверху и снизу: pixel_trans.gif. При этом сам текст в боксе представляет собой еще таблицу, связанной с каскадным стилем infoBoxContents и отображается в элементе <td> связанным со стилем boxText. Все это настолько запутанно, что имеет смысл показать все это более визульно:

Как видим, текст, отображаемый в боксе обрамлен указанными выше изображениями, а сама надпись будет отображена путем композиции классов в порядке наследия: “templateinfoBox”=>”infoBoxContents”=>”BoxText”. Вобщем вот так сложно. Что может дать подобная сложность в наложении классов: Путем внесения изменений в класс BoxText можно задать некоторый независимый от панели цвет фона или фурнитуру текста. Таким образом текст будет как бы выделен фоном. Следует так же заметить, что изображение pixel_trans.gif – прозрачное. Поэтому при изменении, например цвета фона класса infoBoxContents можно в боксах выделить верх и низ текста определенным цветом. Однако следует быть аккуратным с этим классом, поскольку он используется так же для отображения панели с продукцией, и остальных панелей – и в них не используется внутренний класс BoxText.

Для завершения отображения бокса используется класс infoboxFooter .

function infoboxFooter($contents, $left_corner = true, $right_corner = true, $right_arrow = false)

Не вдаваясь в подробности отображения можно просто описать последовательность изображений для табличного отображения: corner_left_flip.gif, backgroundfb.gif, corner_right_flip.gif. Для отображения этих изображений используется таблица связанная с каскадным стилем infoBoxHeading. Для отображения на фоне backgroundfb.gif текста не используются каскадные стили, впрочем как и текст – он применяется в других шаблонах.

Подведя некоторые итоги, можно просто ужаснуться тому, сколько элементов типа таблицы <table> используется для отображения боксов. Впрочем, в то время, когда создавались эти шаблоны, это была единственная возможность точно позиционировать элементы. Хотелось бы упростить подоную систему. Для этого придеться изменять код для класса TableBox – именно он применяется для отображения всех элементов (заголовка, тела бокса и трейлера). При этом стоит объединить три класса: infoBoxHeading, infoBox, infoboxFooter  с тем, чтобы отрисовывалась хотя бы одна таблица, или один элемент <div>.  Этим мы будем заниматься, когда будем описывать элементы «резинового» дизайна для магазина.