Общие описание работы шаблона приложения
Для построения приложения нам необходимо ознакомиться с правилами построения шаблонов.
Основным механизмом вывода и обработки контента фреймворка FCF, являются шаблоны. Шаблон может состоять из 4-х типов файлов или только из одного .tmpl, если дополнительный функционал не требуется.
Каждый тип файла описан в описании ядра:
Ознакомьтесь со структурой шаблона по выше приведенным описаниям. Так же следует рассмотреть, как выполняется рендеринг в шаблоне FCF:
Шаблоны FCF поддерживают концепцию наследования, что позволяет создавать однотипные шаблоны и страницы приложения. Наш базовый каркас приложения созданный командой $ fcfmngr create project fcf-example-planet, он так же основан на наследовании. Основная страница :templates/pages/main-page.tmpl наследуется от базового шаблона :templates/super/page.tmpl, а контент тела страницы расположен в подшаблоне body
Рассмотрим базовый шаблон :templates/super/page.tmpl, от которого наследуется основная страница.
//~OPTIONS
{
// Basic inheritance template
// Default: undefined
// extends:"<super_template.tmpl>",
// Automatic template update mode when the argument changes.
// Acceptable values:
// true|"all" - The update is performed on any change
// "external" - The update is performed only if the external template was the initiator of the change.
// false - The template is not being updated
// Default: false
autoUpdate: false,
// If true, the rendering is performed on the client side.
// Acceptable values:
// true|"all" - Rendering is done on the client, when done on the browser side
// "update" - The first render is done on the server side and the update is on the client side
// "update_np" - The first render is done on the server side and the update is on the client side.
// Parameters of the programmable type are not recalculated.
// false - Rendering is always done on the server side
// This parameter can be overridden by the fcfClientRendering template argument, but only if the option is true.
// Default: false
clientRendering: false,
// Additional JS & CSS files to connect (JS files are also connected on the server side)
// Default: []
include: [],
// Plug-in additional JS & CSS files on the client side
// Default: []
clientInclude:[":templates/css/styles.css"],
// [Начиная с версии 1.1.43] DOM elements merge flag.
// If true, then existing items are not replaced when updated, but updated.
// Default: false
merge: false,
// If the parameter is false, the template is not wrapped in a container,
// a wrapper is not created for it, and its arguments are not available on the client.
// Default: true
wrapper: true,
// The template is displayed when the template is locked or false,
// then the lock is performed only by the transparent container.
// If the option is true, then @controls:lock is used.
// The option can be overridden by the fcfLockTemplate template argument.
// Default: true
lockTemplate: true
}
//~ARGUMENTS
{
}
//~TEMPLATE
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
@{{ render.header(); }}@
</head>
<body>
<div class="header">
<div class="header-title">
<a href="/">!{{FCF Application}}!</a>
</div>
<div class="header-controls">
<div class="header-controls-line">
%{{ if (fcf.getContext().session.user.user) { }}%
<span class="header-control">!{{User}}!: @{{fcf.getContext().session.user.user}}@</span>
%{{ if (fcf.getContext().session.user.roles.root) { }}%
<span class="header-control"><a href="/fcfpackages/fcfManagement">!{{System settings}}!</a></span>
%{{ } }}%
<span class="header-control"><a fcfEventClick="wrapper.onLogout()">!{{Logout}}!</a></span>
%{{ } else { }}%
%{{ if (fcf.application.getConfiguration().fcfSimpleAuthorization_enableRegistration) { }}%
<span class="header-control"><a fcfEventClick="wrapper.onRegistration()">!{{Registration}}!</a></span>
%{{ } }}%
<span class="header-control"><a fcfEventClick="wrapper.onSingin()">!{{Sign in}}!</a></span>
%{{ } }}%
</div>
<div class="header-controls-line">
@{{ render.template("@controls:language-selector", {fcfClass: "language-selector-header"}); }}@
</div>
</div>
<div class="header-clear"></div>
</div>
<div class="body">
@{{ render.template("+body"); }}@
</div>
</body>
</html>
//~TEMPLATE body
<h4>Main body container</h4>
В базовом каркасе приложения файл стилей :templates/css/styles.css подключается через опцию clientInclude, в секции OPTIONS. Остальные настройки шаблона оставлены по умолчанию.
Теперь перейдем к самому HTML, к секции TEMPLATE.
Заголовок страницы практически полностью формируется программно в конструкции вывода @{{}}@, методом render.header(). Шапка сайта формируется в зависимости от прав пользователя и настроек приложения.
Контекст страницы выводится в контейнере div с классом body. В нем выполняется рендеринг подшаблона "body":
<div class="body">
@{{ render.template("+body"); }}@
</div>
Шаблон главной страницы :templates/pages/main-page.tmpl, являясь унаследованным от :templates/super/page.tmpl, подменяет содержимое подшаблона body.
Содержимое шаблона :templates/pages/main-page.tmpl:
//~OPTIONS
{
// Basic inheritance template
// Default: undefined
extends: ":templates/super/page.tmpl",
// Automatic template update mode when the argument changes.
// Acceptable values:
// true|"all" - The update is performed on any change
// "external" - The update is performed only if the external template was the initiator of the change.
// false - The template is not being updated
// Default: false
autoUpdate: false,
// If true, the rendering is performed on the client side.
// Acceptable values:
// true|"all" - Rendering is done on the client, when done on the browser side
// "update" - The first render is done on the server side and the update is on the client side
// "update_np" - The first render is done on the server side and the update is on the client side.
// Parameters of the programmable type are not recalculated.
// false - Rendering is always done on the server side
// This parameter can be overridden by the fcfClientRendering template argument, but only if the option is true.
// Default: false
clientRendering: false,
// Additional JS & CSS files to connect (JS files are also connected on the server side)
// Default: []
include: [],
// Plug-in additional JS & CSS files on the client side
// Default: []
clientInclude: [],
// [Начиная с версии 1.1.43] DOM elements merge flag.
// If true, then existing items are not replaced when updated, but updated.
// Default: false
merge: false,
// If the parameter is false, the template is not wrapped in a container,
// a wrapper is not created for it, and its arguments are not available on the client.
// Default: true
wrapper: true,
// The template is displayed when the template is locked or false,
// then the lock is performed only by the transparent container.
// If the option is true, then @controls:lock is used.
// The option can be overridden by the fcfLockTemplate template argument.
// Default: true
lockTemplate: true
}
//~ARGUMENTS body
{
}
//~TEMPLATE body
<center>
<p>!{{Welcome}}!!</p>
<p>!{{To log in, specify the 'root' user and the 'root' password}}!.</p>
<p>!{{Don't forget to change your password}}!. <a href="/fcfpackages/fcfManagement/access">!{{Password change}}!.</a></p>
</center>