Логотип персонального сайта М.Жарких
Лист на сайт
Версія для друку
Стрічка новин (RSS)
Смерека / Дизайнеру / Секції

Смерека

Дизайнеру

Секції

Апарат секцій призначений для конструювання шаблонів сторінок, а не окремих вершин. Секція, включена в HTML код вершини, не підлягає специфічній обробці і буде використана літерально.

Синтаксис секцій

Секція – це фрагмент HTML кода, обмежений коментарями спеціального вигляду :

	<!-- Begin section SectName -->
	Section code here
	<!-- End section SectName -->

Після маркера початку коментаря мусить бути пробіл, потім слова Begin section (чутливі до регістру!), потім обов’язково пробіл і назва секції (будь-яка послідовність знаків, окрім пробіла); потім пробіл і маркер кінця коментаря. Кінець секції пишеться за такими ж правилами.

В шаблоні одноіменні секції можуть повторюватись (наприклад, меню сайта може розміщуватись в декількох місцях). Секції можуть містити в своєму коді інші вкладені секції. Границі секцій можуть навіть перетинатись (за умови, що така плутана схема підстановки дасть розумний код), хоча такий підхід не рекомендується.

Шаблон, призначений для підстановки, може містити кілька послідовних секцій (наприклад, заміни для меню та для нижнього колонтитула). Вони обробляються послідовно, але при цьому вкладені секції окремо не обробляються, а розглядаються як частина коду секції-господині і підставляються літерально.

Секції можуть містити будь-який HTML код за умови, що результат підстановки утворює коректний HTML код. Отже, якщо секція містить заголовок таблиці або початок форми, то секція, яка її заступає, також мусить містити заголовок таблиці або початок форми.

Компіляція секцій

Секції компілюються, якщо шаблон сторінки містить посилання на інший (предківський) шаблон. Смерека проходить по ланцюжку цих посилань до кореневого шаблона.

Кореневий шаблон мусить представляти повний код сторінки (html – /html). Якщо шаблон-нащадок містить якісь секції (типово), кожна така секція витісняє своїм кодом код одноіменної секції предківського шаблона. Якщо предківський шаблон містить кілька повторень імені даної секції, всі вони будуть замінені (при цьому важить тільки ім’я секції, а не її код).

Шаблон, утворений після цього кроку компіляції, містить секції з даним іменем і новим кодом (отже, в ході подальшої компіляції ці секції можуть бути знову замінені або модифіковані).

Після підстановки першої секції шаблону-нащадка Смерека переходить до підстановки наступної кореневої секції нащадка – аж до вичерпання цих кореневих секцій.

Ця процедура повторюється для всіх наступних шаблонів-нащадків і закінчується на тому шаблоні, який був викликаний.

Приклад застосування секцій

Розглянемо у спрощеному вигляді, як працюють секції для тієї сторінки, яку ви зараз читаєте.

Кореневий шаблон має вигляд :

<html>
…
<body>
<!-- Begin section MainBar -->
<table>
 <tr>
 <td>
 <Smereka Method="Inspector" Display="Crown" />
 </td>
 <td>
 <!-- Begin section MainCell -->
 <Smereka Func="GetDocTitle" />
 <Smereka Method="CompiledAttr" />
 <!-- End section MainCell -->
 </td>
 </tr>
</table>
<!-- End section MainBar -->
</body>
</html>

Він містить три смеретеги, які генерують відповідно дерево-навігатор, заголовок документа і тіло документа. Він містить дві секції, одна з яких захоплює всі полосу сторінки, а друга – комірку таблиці праворуч від дерева.

Для виводу зображень в галереї нам не потрібно дерево, натомість ми хочемо віддати максимум площі під зображення. Для цього створюємо новий шаблон, успадкований від попереднього, в якому пишемо:

<!-- Begin section MainBar -->
 <Smereka Func="GetDocTitle" />
 <Smereka Func="MakeImage" />
 <Smereka Method="CompiledAttr" />
<!-- End section MainBar -->

В результаті компіляції стара секція MainBar (котра містила таблицю) буде витіснена і замінена оцими п’ятьма рядками.

Якщо виникла необхідність продавати на сайті Мерседеси, для цього можна використати такий шаблон, успадкований від кореневого :

<!-- Begin section MainCell -->
 <Smereka Func="GetDocTitle" />
 <Smereka Func="GetProductColor" />
 <Smereka Func="GetProductImage" />
 <Smereka Func="GetProductPrice" />
 <Smereka Method="CompiledAttr" />
 <!-- Begin section CustomerOrderForm -->
 <!-- End section CustomerOrderForm -->
<!-- End section MainCell -->

В такому випадку дерево зліва буде відображати категорії і товари, а в комірці MainCell буде відображатись інформація про конкретний товар : назва – колір – зображення – ціна – опис.

Закінчується наша нова секція вкладеною секцією CustomerOrderForm, наразі порожньою. При використанні такого шаблону опис товару буде виведено, але без форми замовлення. Це зроблено для того, щоб наступні шаблони, успадковані від даного, могли визначити цю форму на свій розсуд.

Наприклад, якщо сторінка призначена для нового покупця, вона може містити текст «Вітаємо з придбанням вашого першого Мерседеса», а якщо покупець уже зареєструвався на сайті, йому можна показати форму з текстом «Купіть свій шестисотий Мерседес у нас».

Даний приклад не містить ніяких деталей форматування – саме для того, щоб показати самий принцип компіляції шаблонів і можливі шляхи використання цього механізму для побудови легко керованої системи прототипів сторінок.

Попередній розділ | Зміст | Наступний розділ

Сподобалась сторінка? Допоможіть розвитку нашого сайту!

© 1978 – 2018 М.І.Жарких

Передрук статей із сайту заохочується за умови
посилання (гіперпосилання) на мій сайт

Сайт живе на

Число завантажень : 2596

Модифіковано : 8.08.2017

Якщо ви помітили помилку набору
на цiй сторiнцi, видiлiть її мишкою
та натисніть Ctrl+Enter.