Saitistika 4.0.Руководство разработчика.2005

Фронтофис

Раздел описывает общие принципы и положения работы фронтофиса системы. Ознакомление с данным разделом обязательно для разработчика любого уровня.

Общие принципы

Как работает фронтофис

Работа системы сводится к обработке запросов к страницам. Веб-сервер (IIS) получает запрос по протоколу HTTP на получение файла определенного типа. Действия сервера зависят от типа запрашиваемого файла:

Логика обработки для разных типов данных

Тип файла

Структура HTML

Этот раздел описывает файлы, содержащие код, характерный для типовых страниц фронтофиса. Как правило, любая страница состоит из нескольких общих инклюдов, содержащих элементы оформления и описания классов, используемых для работы с материалами. Таким образом, появляется возможность использовать одни и те же блоки кода на разных страницах сайта.

В зависимости от содержания типовая страница может использовать ссылки на другие файлы, содержащие описания классов и процедуры инициализации, например:

CMaterialDecoration.asp

CChatDecoration.asp

/common/include/CChat.asp

/common/include/CForum.asp

CForumDecoration.asp

/common/include/CMetaDataForm.asp

/common/include/CMetaDataField.asp

CFormDecoration.asp

CForm.asp

CTest.asp

Пример использования

Следующий пример создает страницу фронтофиса с пустой серединой и типовым оформлением верхней и нижней части.

<!--#include virtual="/common/include/fo-init.asp" --> <!--#include file="CPageDecoration.asp" --> <!--#include file="init.asp"-->

<%

oPage.Top

oPage.StartPage

oPage.LeftNavigation

oPage.PassPageColumn

oPage.StatusBar

<!—- Здесь выводится текст страницы -->

oPage.EndPage

oPage.Bottom

%>

Нарезка

Нарезка производится на основе сверстанного в статический HTML каркаса веб-сайта (2-3 самых типовых страниц).

Необходимо вынести ключевые и повторяющиеся участки кода в отдельный класс для предотвращения дублирования кода и облегчения последующей работы.

Этапы работы кодера:

1.Верстка каркаса

2.Разбиение каркаса на методы CPageDecoration

3.Создание типовых страниц путем копирования спрограммированных страниц и подстановкой нужных значений

4.Доработки по верстке на 80% сведены в один файл

Этапы работы программиста:

1.Перенос CPageDecoration путем копирования

2.Доработки CPageDecoration завязанные на сайтистику

3.Перенос спрограммированной страницы путем копирования

4.Добавление на страницу логики отображения

5.При изменении верстки нужно перенести изменившиеся методы в CPageDecoration

При нарезке скетча девелопмента разработаны основные принципы построения класса:

1.В CPageDecoration вносятся те элементы оформления, которые присутствуют на 2-х или более страницах, причем класс должен содержать только оформление.

2.Разумное «обрамление контента», т.е. небольшие строки контента передаются в параметрах к функции; большие куски контента обрамляются функциями типа StartContent-EndContent

3.Разумные названия функций/методов, «xml-ность» методов (т.е. для каждого StartBody должен быть EndBody), однако для удобства можно создавать «сборные» методы, которые вызывают подряд идущие xml-ные методы

Важно

1.Не допускать расширения количества аргументов у методов/функций при программировании проекта. Это влечет за собой несоответствие скетчу. Для этого кодеру нужно:

1.1.Знать какими классами выводится тот или иной блок

1.2.Заранее учитывать возможность добавления аргументов (например для иконок директедита, которые не выводятся в скетче)

1.3.Можно добавить резевные аргументы

1.4.Можно передавать аргументы массивом

2.Учесть влияние пользовательских настроек на этапе нарезки

Базовые методы:

1.Top, Bottom – если много кода выносятся в отдельные файлы, которые инклюдятся в соответствующих методах

CPageDecoration.

2.Ключевые участки кода – StartPage, EndPage, StartLeftColumn, …

3.Построение списков – StartList, EndList, ListItem ...

4.Методы, вызывающие другие классы: ShowNavigaton, Paging, ...

5.Статические (голый HTML)

Структура CSS

Для того, чтобы HTML страница выглядела примерно одинаково в разных броузерах, приходится создавать два (иногда более) варианта стилей – для «Internet Explorer» и «Все остальные». По умолчанию они называются ie.css и nn.css. Когда пользователь заходит на страницу, сервер определяет его броузер и соответственно подгружает в ASP-скрипт нужный файл со стилями.

Названия классов CSS стандартизированы, для того чтобы обеспечивать лучшее понимание между программистами, а также обеспечить более быструю миграцию при переходе между версиями.

Правила именования классов.

Классы группируются по их предназначению. Стандартный набор групп и их назначение перечислены в таблице:

В визуальном редакторе классы оформления таблиц, необходимо прописывать(в коде) для всех редактируемых таблиц, иначе таблицы не будут соответствовать дизайну сайта. Пример:

<TABLE cellspadding=”0” cellspacing=”0” border=”0” width=”100%” class=”table1”> <TR>

<TD class=”Content5”>Заголовок столбца</TD> <TD class=”Content5”>Заголовок столбца</TD> <TD class=”Content5”>Заголовок столбца</TD> </TR>

<TR>

<TD class=”Content5”>ячейка</TD> <TD class=”Content5”>ячейка</TD> <TD class=”Content5”>ячейка</TD> </TR>

<TR>

<TD class=”Content5”>ячейка</TD> <TD class=”Content5”>ячейка</TD> <TD class=”Content5”>ячейка</TD> </TR>

…

CSS2

Рекомендуемая спецификация – CSS1. Применять CSS2 рекомендуется только в классах ie.css, чтобы, например, чтобы не писать лишний раз class=table-cell:

table.table1 * td { font-size: 13px;}

tr.content5 td { font-weight: bold; font-size: 11px; font-family: tahoma; margin-left: 3px; vertical-algn: middle;}

В этом случае предыдущий код будет выглядеть так:

<TABLE cellspadding=”0” cellspacing=”0” border=”0” width=”100%” class=”table1”> <TR class=”content5”>

<TD>Заголовок столбца</TD> <TD>Заголовок столбца</TD> <TD>Заголовок столбца</TD> </TR>

<TR> <TD>ячейка</TD> <TD>ячейка</TD> <TD>ячейка</TD> </TR>

<TR> <TD>ячейка</TD> <TD>ячейка</TD> <TD>ячейка</TD> </TR>

…

Поскольку в устаревших броузерах (например, Netscape Navigator 4) нет поддержки CSS2, то необходимо искать комромисс между удобством CCS2 и отображением.

Подключение таблицы стилей и разводка по браузерам

Для разводки по броузерам используются переменные, определяемые и инициализируемые в файле browserdetector.asp. Этот файл подключается автоматически к каждой страницей вызовом fo-init.asp. Все переменные имеют значение true/false.

Переменные представлены в следующей таблице:

Наиболее часто для разводки по броузерам используются взаимно противоположные на множестве поддерживаемых броузеров переменные NN4minus и IENNDefault, так как по функциональности броузеры IE4+ и NN6+ очень похожи, отличается от них лишь NN4.

Пример

Для подключения .css в зависимости от броузера также используются переменные разводки по броузерам. Обычно подключение .css внутри темы выглядит так:

If NN4minus Then %>

<link rel="stylesheet" type="text/css" href="/themes/<%=SystemInfo.SiteRootFolderThemeName%>/nn.css"> <%Else%>

<link rel="stylesheet" type="text/css" href="/themes/<%=SystemInfo.SiteRootFolderThemeName%>/ie.css"> <%End If

Навигация

Начиная с версии 4.0, за вывод всех основных навигаций отвечает специальный класс – CNavigator. Этот класс позволяет гибко настраивать выборку данных под конкретные навигации. Например, если нужно вывести верхнее меню и левую навигацию, то, указав соответствующие параметры, в экземпляр класса Navigator выберутся данные, соответствующие только этим навигациям. Таким образом, получается выигрыш в производительности за счет 2-х составляющих:

1.Выборка данных не содержит лишней информации

2.При выборке нескольких навигаций пересекающиеся данные выбираются только один раз

Если необходимо вывести навигацию, которая работает по особой логике, то для этого необходимо:

1.Добавить соответствущую логику выборки в хранимую процедуру Sait_GetNavigation

2.Добавить спецефичные параметры в процедуру

3.Дополнить класс CNavigator новыми свойствами

4.Создать xsl-шаблон для навигации (см. примеры navigation-leftmenu.xsl или navigation-topmenu.xsl)

5.Применить (вызвать) созданный шаблон внутри темы

Для создания навигаций, не требующих дополнительных данных по отношению к тем, которые возвращает текущая версия процедуры Sait_GetNavigation (например, набор разделов, отфильтрованных по добавленному атрибуту), первые 3 действия делать не нужно.

Посмотреть объем возвращаемых процедурой данной, можно вставив, например, в content.asp инструкцию

%><%=Navigator.Debug%><%

Либо можно использовать уже готовые процедуры, для выполнения которых использовать методы типа GetRS класса CNavigator. Также существует способ добавления данных «руками». Для этого используется метод AddLink, который создает новый рекордсет, и хранит в нем добавленные ссылки.

Подробное описание класса смотрите в справочнике классов.

По умолчанию в класс CNavigator встроены следующие виды навигации:

1.Верхняя – список разделов первого уровня, обозначенных пометкой «Верхняя навигация - является корневым разделом»

2.Нижняя - список разделов обозначенных соответствующей пометкой «Нижняя навигация - включен в навигацию»

3.Левая – дерево подразделов текущего раздела 1-го уровня

4.Карта сайта – дерево всех разделов системы

Для вывода навигаций рекомендуется использовать xsl-шаблоны, поскольку данные, полученные Navigator-ом из процедур сохраняются в экземпляре CXMLDOM. Однако существует и специальное API для работы с данными Навигатора из ASP- кода.

Верхняя навигация

В навигацию входят разделы 1-го уровня текущего сервера, имеющие пометку topnavnote. Процедура выбирает эти разделы, а также их подразделы (для построения выпадающих блоков). Эти данные в классе CNavigator хранятся с другими в одном рекордсете. Поэтому для точной выборки в XML передается мнемоника пометки для отбора нужных разделов при выводе навигации. За вывод верхней навигации отвечает шаблон navigation-topmenu.xsl

Нижняя навигация

В навигацию входят разделы любого уровня, обозначенные пометкой nav3root. Из-за простоты она выводится не через xsl- шаблон, а через API, предоставляемое классом CNavigator.

Левая навигация

Навигация выводит дерево подразделов, текущего раздела 1-го уровня. Разделы, отмеченные пометкой «Левая навигация - не показывается» не выводятся. На всех страницах, кроме электронного магазина, Проектов и Задач, навигация выводится с помощью xsl-шаблона navigation-leftmenu.xsl. На страницах перечисленных функциональностей левая навигация выводится через собственные xsl-шаблоны, используя другие процедуры для получения данных.

Навигация «карта сайта»

Содержит полное дерево разделов текущего сервера. Используется всего на двух страницах системы – странице автоматической карты сайта и странице формирования буклета.

Пример использования

Вывод верхнего меню, используя xsl-шаблон navigation-topmenu.xsl текущей темы

<%=Navigator.Output("/themes/"&TRim(FolderInfo.ThemeName)&"/navigation-topmenu.xsl")%>

Вывод буклета через xsl-шаблон booklet.xsl

<%Navigator.Map = True

Navigator.SetParam "printable", " " & Join(PrintableFiles," ") & " "%> <%=Navigator.Output("booklet.xsl")%>

Процедура создания навигации подробно описана в подразделе «Создание шаблонов» раздела «Быстрое освоение системы»