Виды и шаблоны
Пользовательский интерфейс, такой как HTML-страница, должен быть независим от базового PHP-кода, связанного с маршрутизацией и бизнес-логикой. Это фундаментально для парадигмы MVC. Базовая ревизия, такая как преобразование
<h3>в<p>, не должна требовать изменения кода вашего приложения. Точно так же преобразование простого маршрута типа GET /aboutto GET /about-usне должно оказывать никакого влияния на ваш пользовательский интерфейс и бизнес-логику (представление и модель в MVC или представление и метод в RMR).Смешивание программных конструкций и компонентов пользовательского интерфейса в одном файле, как спагетти-кодирование, делает будущее обслуживание приложений кошмаром.
F3 поддерживает PHP в качестве шаблонного движка. Взгляните на этот HTML фрагмент сохраненный как
template.htm:<p>Hello, <?php echo $name; ?>!</p>
Независимо от того, включены ли короткие теги на вашем сервере или нет, это тоже должно работать:
<p>Hello, <?= $name ?></p>
Следующий PHP код использует этот
Viewкласс для визуализации шаблона PHP хранящегося в template.htmфайле:$f3=require('lib/base.php');
$f3->route('GET /',
function($f3) {
$f3->set('name','world');
$view=new View;
echo $view->render('template.htm');
// Предыдущие две строки можно сократить до:
// echo View::instance()->render('template.htm');
}
);
$f3->run();
Единственная проблема с использованием PHP в качестве шаблонного движка, из-за встроенного PHP-кода в эти файлы, заключается в сознательном уси лии, необходимом для того, чтобы придерживаться рекомендаций по разделению проблем и противостоять искушению смешивать бизнес-логику с вашим пользовательским интерфейсом.
В качестве альтернативы шаблонам PHP вы можете использовать собственный шаблонный движо к F3 с этим
Templateклассом. Приведенный выше фрагмент HTML может быть переписан следующим образом:<p>Hello, {{ @name }}!</p>
и код, необходимый для просмотра этого шаблона:
$f3=require('lib/base.php');
$f3->route('GET /',
function($f3) {
$f3->set('name','world');
echo \Template::instance()->render('template.htm');
}
);
$f3->run();
Обратите внимание: Рекомендуемый синтаксис
\Template::instance().
Тем не менее вы также можете создать новый экземпляр с new \Template();.Например, маркеры маршрутизации, используемые для перехвата переменных в URL-адресах (все еще помните
GET /brew/@countпример в предыдущем разделе?), Маркеры шаблона F3 начинаются с @символа, за которым следует ряд букв и цифр, заключенных в фигурные скобки. Первый символ должен быть альфа. Шаблонные токены имеют однозначное соответствие с переменными фреймворка. Фреймворк автоматически заменяет токен значением, хранящимся в переменной с тем же именем.В нашем примере F3 заменяет
@nameмаркер в нашем шаблоне значением, присвоенным переменной name. Во время выполнения вывод вышеприведенного кода будет выглядеть следующим образом::<p>Hello, world</p>
Беспокоитесь о производительности шаблонов F3? Во время выполнения фреймворк анализирует и компилирует/преобразует шаблон F3 в PHP-код при первом его отображении
$template->render(). Затем фреймворк использует этот скомпилированный код во всех последующих вызовах. Следовательно, производительность должна быть такой же, как и у шаблонов PHP, если не лучше из-за оптимизации кода, выполняемой компилятором шаблонов, когда задействованы более сложные шаблоны.Независимо от того, используете ли вы движок шаблонов PHP или собственный движок F3, рендеринг шаблонов может быть значительно быстрее, если у вас есть APC, WinCache или XCache, доступные на вашем сервере.
Как упоминалось ранее, переменные фреймворка могут содержать любой тип данных PHP. Однако использование нескалярных типов данных в шаблонах F3 может привести к странным результатам, если вы не будете осторожны. Выражения в фигурных скобках всегда будут вычисляться и преобразовываться в строку. Вы должны ограничить переменные пользовательского интерфейса простыми скалярами:
string,integer, booleanили floatтипами данных.Но как насчет массивов? Fat-Free распознает массивы, и вы можете использовать их в своих шаблонах. Вы можете иметь что-то вроде:
<p>{{ @buddy[0] }}, {{ @buddy[1] }}, and {{ @buddy[2] }}</p>
И заполните
@buddyмассив в вашем PHP коде перед подачей шаблона:$f3->set('buddy',array('Tom','Dick','Harry'));
Однако, если вы просто вставите
{{ @buddy }}его в свой шаблон, PHP сгенерирует Array to string conversionуведомление во время выполнения.F3 позволяет вставлять выражения в шаблоны. Эти выражения могут принимать различные формы, такие как арифметические вычисления, булевы выражения, константы PHP и т. д. Вот несколько примеров:
{{ 2*(@page-1) }}
{{ (int)765.29+1.2e3 }}
<option value="F" {{ @active?'selected="selected"':'' }}>Female</option>
{{ var_dump(@xyz) }}
<p>That is {{ preg_match('/Yes/i',@response)?'correct':'wrong' }}!</p>
{{ @obj->property }}
Дополнительное замечание о выражениях массива: обратите внимание, что
@[email protected]это конкатенация строк ($foo.$bar), тогда @foo.barкак переводится $foo['bar']в. Если $foo[$bar]это то, что вы намеревались, используйте @foo[@bar]обычную нотацию.Переменные фреймворка также могут содержать анонимные функции:
$f3->set('func',
function($a,$b) {
return $a.', '.$b;
}
);
Механизм шаблонов F3 интерпретирует маркер как ожидалось, если вы зададите следующее выражение:
{{ @func('hello','world') }}
Обратите внимание: Если у вас есть ошибка неопределенной переменной или неопределенного индекса во время рендеринга ваших шаблонов F3, это означает, что переменная или индекс массива ранее не были объявлены в вашей функции, вызывающей действие template render (). Два решения:
- Предпочтительно: определите все переменные в вашем коде, даже если они равны нулю;
- $f3 - >set ('myVar', NULL)
- $f3 - >set ('myArray.myIndex', 'первый пункт')
- Быстро, но грязно: используйте дополнительный символ AT @ перед токеном;
- {{@@myArray.myIndex}}
- чтобы подавить отображение сообщения об ошибке
Простая замена переменных-это то, что есть у всех шаблонных движков. F3 имеет больше в рукавах:
<include href="header.htm" />
Директива будет встраивать содержимое заголовка шаблон htm находится в точном месте, где указана директива. Вы также можете иметь динамический контент в виде:
<include href="{{ @content }}" />
// ИЛИ
<include href="{{ 'templates/layout/'[email protected] }}" />
// НЕПРАВИЛЬНО
<include href="templates/layout/{{ @content }}" />
Практическая польза для такой директивы шаблона заключается в том, что у вас есть несколько страниц с общим HTML-макетом, но с разным контентом. Указание фреймворку вставить подшаблон в ваш основной шаблон так же просто, как написать следующий PHP-код:
// переключите контент на подшаблон вашего блога
$f3->set('content','blog.htm');
// в другом маршруте переключите содержимое на подшаблон wiki
$f3->set('content','wiki.htm');
Подшаблон, в свою очередь, может содержать любое количество директивы. F3 позволяет использовать неограниченное количество вложенных шаблонов.
Вы можете указать имена файлов с чем-то другим, чем .htm или .расширения html-файлов, но их проще просматривать в вашем веб-браузере на этапе разработки и отладки. Механизм шаблонов не ограничивается рендерингом HTML-файлов. На самом деле вы можете использовать механизм шаблонов для визуализации других типов файлов.
<include>Директива имеет необязательный ifатрибут, позволяющий указать условие, которое должно быть выполнено для вставки подшаблона:<include if="{{ count(@items) >= 2 }}" href="items.htm" />
Текущий массив данных передается в подшаблон. Однако вы можете передавать новые переменные или перезаписывать существующие переменные с помощью
withатрибута:<!-- передайте $a=2 в sub.htm -->
<include href="sub.htm" with="a=2" />
<!-- передайте $b="что-то" и $c= "что-то в кавычках" sub.htm -->
<include href="sub.htm" with="b=something,c='something quoted'" />
<!-- передайте значение в верхнем регистре $d в sub.htm -->
<set d="abc" />
<include href="sub.htm" with="d={{strtoupper($d)}}" /> // $d='ABC'
{{@d}} // $d='abc'
Обратите внимание: в настоящее время невозможно использовать PHP
TRUE-константу как с-пер еменную, так как все атрибуты анализируются как строка.Во время написания/отладки программ на базе F3 и разработки шаблонов могут быть случаи, когда отключение отображения блока HTML может оказаться полезным. Вы можете использовать
<exclude>директиву для этой цели:<exclude>
<p>Кусок HTML, который мы не хотим отображать в данный момент</p>
</exclude>
Это похоже на
<!-- comment -->тег HTML-комментария, но <exclude>директива делает HTML-блок полностью невидимым после рендеринга шаблона.Вот еще один способ исключения содержимого шаблона или добавления комментариев:
{* <p>Кусок HTML, который мы не хотим отображать в данный момент</p> *}
Еще одна полезная функция шаблона-
<check>директива. Он позволяет встраивать HTML-фрагмент в зависимости от оценки определенного условия. Вот несколько примеров:<check if="{{ @page=='Home' }}">
<false><span>Вставляется, если условие ложно</span></false>
</check>
<check if="{{ @gender=='M' }}">
<true>
<div>Появляется, когда условие истинно</div>
</true>
<false>
<div>Появляется, когда условие ложно</div>
</false>
</check>
Вы можете иметь столько вложенных
<check>директив, сколько вам нужно.Выражение F3 внутри атрибута if, которое приравнивается к
NULLпустой строке, логическому FALSEзначению, пустому массиву или нулю, автоматически вызывается <false>. Если ваш шаблон не имеет <false>блока, то <true>открывающие и закрывающие теги являются необязательными:<check if="{{ @loggedin }}">
<p>Фрагмент HTML, который будет включен, если условие истинно</p>
</check>
Fat-Free также может обрабатывать повторяющиеся HTML-блоки:
<repeat group="{{ @fruits }}" value="{{ @fruit }}">
<p>{{ trim(@fruit) }}</p>
</repeat>
groupАтрибут @fruitsвнутри <repeat>директивы должен быть массивом и должен быть установлен в вашем PHP коде соответствующим образом:$f3->set('fruits',array('apple','orange ',' banana'));
Присвоение значения
@fruitв коде приложения ничего не дает. Fat-Free игнорирует любое заданное значение, которое у него может быть, потому что он использует переменную для представления текущего элемента во время итерации по группе. Вывод приведенного выше фрагмента HTML шаблона и соответствующего PHP кода становится:<p>apple</p>
<p>orange</p>
<p>banana</p>
Фреймворк допускает неограниченную вложенность
<repeat>блоков:<repeat group="{{ @div }}" key="{{ @ikey }}" value="{{ @idiv }}">
<div>
<p><span><b>{{ @ikey }}</b></span></p>
<p>
<repeat group="{{ @idiv }}" value="{{ @ispan }}">
<span>{{ @ispan }}</span>
</repeat>
</p>
</div>
</repeat>
Примените следующую команду F3:
$f3->set('div',
array(
'coffee'=>array('arabica','barako','liberica','kopiluwak'),
'tea'=>array('darjeeling','pekoe','samovar')
)
);
В результате вы получаете следующий HTML-фрагмент:
<div>
<p><span><b>coffee</b></span></p>
<p>
<span>arabica</span>
<span>barako</span>
<span>liberica</span>
<span>kopiluwak</span>
<p>
</div>
<div>
<p><span><b>tea</b></span></p>
<p>
<span>darjeeling</span>
<span>pekoe</span>
<span>samovar</span>
</p>
</div>
Удивительно, не правда ли? И единственное, что вам нужно было сделать в PHP, - это определить содержимое одной переменной F3
div, чтобы заменить @divтокен. Fat-Free делает как программирование, так и дизайн веб-шаблонов действительно простыми.Атрибут
<repeat>директивы template valueвозвращает значение текущего элемента в итерации. Если вам нужно получить ключ массива текущего элемента, используйте keyвместо него атрибут. keyАтрибут необязателен.<repeat> также имеет необязательный атрибут счетчика, который можно использовать следующим образом:<repeat group="{{ @fruits }}" value="{{ @fruit }}" counter="{{ @ctr }}">
<p class="{{ @ctr%2?'odd':'even' }}">{{ trim(@fruit) }}</p>
</repeat>
Внутренне механизм шаблонов F3 записывает количество итераций цикла и сохраняет это значение в переменной/токене
@ctr, которая используется в нашем примере для определения нечетной/четной классификации.Если вам нужно вставить маркеры F3 внутри
<script><style>раздела или вашего шаблона, фреймворк все равно заменит их обычным способом:<script type="text/javascript">
function notify() {
alert('Вы вошли в систему как: {{ @userID }}');
}
</script>
Встраивание директив шаблонов в ваши
<script><style>теги or не требует специальной обработки:<script type="text/javascript">
var discounts=[];
<repeat group="{{ @rates }}" value="{{ @rate }}">
// все, что вы хотите повторить в Javascript, например
discounts.push("{{ @rate }}");
</repeat>
</script>
Есть некоторые вещи, которые следует учитывать в отношении общедоступных путей, используемых в ссылках на страницы или стилях / сценариях или изображениях. Вероятно, вы хотите использовать относительные пути:
<link href="ui/css/base.css" type="text/css" rel="stylesheet" />
<script src="ui/js/base.css"></script>
<a href="category-abc/article-xyz">подробнее</a>
<img src="ui/img/img1.jpg" alt="Image 1" />
Эти пути могут работать на вашей индексной странице
GET /, но вызовут проблемы при переходе к GET /@category/@articleприложению или запуске приложения из подкаталога в общедоступном корневом каталоге вашего веб-пространства (http://domain.com/my-F3-App/т. е. Чтобы решить эту проблему, вы должны либо дополнить все свои пути общедоступным базовым путем, как это:<link href="{{@BASE}}/ui/css/base.css" type="text/css" rel="stylesheet" />
<script src="{{@BASE}}/ui/js/base.css"></script>
<a href="{{@BASE}}/category-abc/article-xyz">подробнее</a>
<img src="{{@BASE}}/ui/img/img1.jpg" alt="Image 1" />
Или используйте базовый тег HTML, чтобы указать базовый путь по умолчанию для всех документов для относительных ссылок:
<base href="{{@SCHEME.'://'[email protected]@BASE.'/'}}">
Есть некоторые побочные эффекты использования
<base>тега в вашем документе: в основном вам также нужно префиксить все якорные ссылки страниц (<a href="{{@PATH}}#top">go to top</a>).Fat-Free по умолчанию использует набор символов UTF-8. Вы можете переопределить это поведение, установив
ENCODINGсистемную переменную следующим образом:$f3->set('ENCODING','ISO-8859-1');
Как только вы сообщите фреймворку желаемый набор символов, F3 будет использовать его для всех HTML-и XML-шаблонов, пока снова не изменит их.
Как уже упоминалось ранее в этом разделе, фреймворк не ограничивается HTML-шаблонами. Вы также можете обрабатывать XML-шаблоны. Механика в значительной степени схожа. В вашем распоряжении все те же
{{ @variable }}{{ expression }}жетоны, <repeat>, <check>, <include>, и <exclude>директивы. Просто скажите F3, что вы передаете XML-файл вместо HTML:echo Template::instance()->render('template.xml','application/xml');
Второй аргумент представляет тип MIME отображаемого документа.
Компонент представления MVC охватывает все, что не подпадает под модель и контроллер, а это означает, что ваша през ентация может и должна включать в себя все виды пользовательских интерфейсов, таких как RSS, электронная почта, RDF, FOAF, текстовые файлы и т. д. В приведенном ниже примере показано, как отделить презентацию электронной почты от бизнес-логики приложения:
MIME-Version: 1.0
Content-type: text/html; charset={{ @ENCODING }}
From: {{ @from }}
To: {{ @to }}
Subject: {{ @subject }}
<p>Добро пожаловать и спасибо, что присоединились {{ @site }}!</p>
Сохраните вышеприведенный шаблон электронной почты как приветствие формат txt. Связанный с этим код F3 будет следующим:
$f3->set('from','<[email protected]>');
$f3->set('to','<[email protected]>');
$f3->set('subject','Welcome');
ini_set('sendmail_from',$f3->get('from'));
mail(
$f3->get('to'),
$f3->get('subject'),
Template::instance()->render('email.txt','text/html')
);
Совет: замените функцию SMTP mail() на imap_mail (), если ваш скрипт взаимодейст вует с сервером IMAP.
Ну разве это не здорово? Конечно, если у вас есть набор получателей электронной почты, вы будете использовать базу данных для заполнения маркеров firstName, lastName и email.
Вот альтернативное решение, использующее SMTP-плагин F3:
$mail=new SMTP('smtp.gmail.com',465,'SSL','[email protected]','secret');
$mail->set('from','<[email protected]>');
$mail->set('to','"Slasher" <[email protected]>');
$mail->set('subject','Welcome');
$mail->send(Template::instance()->render('email.txt'));
F3 поддерживает несколько языков прямо из коробки.
Сначала создайте файл словаря со следующей структурой (по одному файлу на каждый язык):
<?php
return array(
'love'=>'I love F3',
'today'=>'Today is {0,date}',
'pi'=>'{0,number}',
'money'=>'Amount remaining: {0,number,currency}'
);
Сохраните его как
dict/en.php. Давайте создадим еще один словарь, на этот раз для немецкого языка. Сохраните файл какdict/de.php:<?php
return array(
'love'=>'Ich liebe F3',
'today'=>'Heute ist {0,date}',
'money'=>'Restbetrag: {0,number,currency}'
);
Словари - это не более чем пары ключ-значение. F3 автоматически создает экземпляры переменных фреймворка на основе ключей в языковых файлах. Таким образом, легко встроить эти переменные в качестве маркеров в ваши шаблоны.
Обратите внимание: пары ключ-значение словаря становятся переменными F3 после ссылки. Убедитесь, что ключи не конфликтуют ни с одной переменной фреймворка, созданной с помощью `$f3->set ()`, `$f3->>mset ()` или `$f3->>>config()`. Кроме того, вы также можете использовать префикс var для установки общего ключа, который предшествует каждому языковому ключу.
Примеры использования нескольких языков с помощью движка шаблонов F3:
<h1>{{ @love }}</h1>
<p>
{{ @today,time() | format }}.<br />
{{ @money,365.25 | format }}<br />
{{ @pi, 3.1415 | format }}
</p>
И более длинная версия, которая использует PHP в качестве шаблонного движка:
<?php $f3=Base::instance(); ?>
<h1><?php echo $f3->get('love'); ?></h1>
<p>
<?php echo $f3->get('today',time()); ?>.<br />
<?php echo $f3->get('money',365.25); ?><br />
<?php echo $f3->get('pi', 3.1415); ?>
</p>
Далее мы даем команду F3 искать словари в
dict/папке:$f3->set('LOCALES','dict/');
Но как фреймворк определяет, какой язык использовать? F3 обнаружит его автоматически, посмотрев сначала на заголовки HTTP-запросов, а именно на
Accept-Languageзаголовок, отправленный браузером.Чтобы переопределить это поведение, можно вызвать F3 для использования языка, указанного пользователем или приложением:
$f3->set('LANGUAGE','de');
Основной язык вашего сайта
В приведенном выше примере ключ
piсуществует только в словаре английского языка. Фреймворк всегда будет использовать резервный язык для заполнения ключей, которые отсутствуют в указанном или обнаруженном языке(языках). В нашем примере ключpi, присутствующий в словаре английского языка, был выбран потому, что английский язык является резервным языком по умолчанию, установленным F3 при запуске. Поэтому важно убедиться, что все многоязычные тексты, используемые на вашем сайте, определены в словаре резервного языка в противном случае во время выполнения будет вызвана ошибка или, по крайней мере, предупреждение или уведомление, когда будет сделана ссылка на неопределенную переменную.Если основной язык вашего сайта не английский, и вы не перевели все строки на другие языки, вы должны поручить F3 использовать ваш справочник по родному языку в качестве запасного варианта. Вы можете легко сделать это благодаря переменной
FALLBACKhive:$f3->set('FALLBACK','it'); // Итальянский как запасной язык по умолчанию
Варианты Языка
Вы также можете создавать файлы словарей для языковых вариантов, таких как
en-US,es-AR, и т.д. В этом случае F3 сначала будет использовать языковой вариант, например es-AR. Если есть ключи, которые не существуют в словаре вариантов, фреймворк будет искать ключ в корневом языке , напримерes, и, если он все еще не найден, использовать определенный резервный языковой файл.Вы заметили странную
'Today is {0,date}'закономерность в нашем предыдущем примере? Многоязычная возможность F3 зависит от правил форматирования строк/сообщений проекта ICU. Фреймворк использует свое собственное подмножество реализации форматирования строк ICU. Нет никакой необходимости в intlтом, чтобы расширение PHP было активировано на сервере.Еще одна вещь: F3 также может загружаться .файлы в формате ini-style в виде словарей:
love = Я люблю F3
today = Сегодня {0,date}
pi = {0,number}
money = Оставшаяся сумма: {0,number,currency}
multiline = Также возможно наличие языковых клавиш \
распределено по нескольким линиям
[module.user.validation]
name.required = Пожалуйста, введите свое имя.
mail.invalid = Этот адрес электронной почты недействителен.
Сохраните его как
dict/en.iniтаковой, чтобы фреймворк мог загружать его автоматически. Языковая переменная принимает тот же тип строки, что и заголовок HTTP Accept-Language, который представляет собой разделенный запятыми список 2-буквенных кодов языков, за которыми необязательно следует дефис и 2-буквенный код страны.
NB: несмотря на то, что локали POSIX используют подчеркивание в качестве разделителя (es_BR.UTF-8), вы должны определить языковую переменную с дефисом (es-BR). Файлы словарей следуют тому же правилу (es-BR.php / es-BR.ini).По умолчанию и обработчик представлений, и механизм шаблонов экранируют все визуализированные переменные, то есть преобразуются в HTML-сущности, чтобы защитить вас от возможных атак XSS и инъекций кода. С другой стороны, если вы хотите передать допустимые HTML-фрагменты из кода приложени я в шаблон:
$f3->set('ESCAPE',FALSE);
Это может иметь нежелательные последствия. Возможно, вы не захотите, чтобы все переменные проходили через unescaped. Fat-Free позволяет вам распаковывать переменные по отдельности. Для шаблонов F3 используйте
rawфильтр:{{ @html_content | raw }}
В случае PHP-шаблонов используйте непосредственно raw-метод:
<?php echo $this->raw($html_content); ?>
В дополнение к автоматическому экранированию переменных F3 фреймворк также дает вам свободу действий при очистке пользовательского ввода из HTML-форм:
$f3->scrub($_GET,'p; br; span; div; a');
Эта команда удалит все теги (кроме указанных во втором аргументе) и небезопасные символы из указанной переменной. Если переменная содержит массив, то каждый элемент в массиве рекурсивно очищается. Если звездочка ( * ) передается в качестве второго аргумента,
$f3->scrub()это позволяет всем HTML-тегам проходить через нетронутые и просто удалять небезопасные управляющие символы.С помощью шаблонного движка F3 вы также можете настроить собственные фильтры выражений like
{{ @desc,100 | crop }}, а также комбинировать их like {{ @desc,100 | crop,raw }}. Поэтому вам просто нужно зарегистрировать новый фильтр с помощью метода filter. Для собственных обработчиков html-тегов / элементов, которые могут отображать все, что вы хотите, проверьте метод template->extend>. Для получения более подробных описаний пользовательских фильтров и работы всей системы шаблонов см. расширенную часть руководства пользователя по шаблону.Last modified 1yr ago