Создание шаблона

Теперь пришло время создать шаблон, в котором будет выполняться анимация.

Создайте папку :templates/blocks и перейдите в нее.

$ cd templates $ mkdir blocks $ cd blocks

И создайте шаблон planet командой (или используя плагины).

$ fcfmngr create template-file planet

Также разместите файл со стилями шаблона в данной папке. Файл можно скачать по ссылке: planet.css.

Выполним подключение данного файла к нашему шаблону и установим опцию шаблона clientRendering в значение true. Так мы укажем фреймворку, что данный шаблон и его подшаблоны можно рендерить на стороне клиента.

Файл :templates/blocks/planet.tmpl

//~OPTIONS { ... // 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: true, ... // Plug-in additional JS & CSS files on the client side // Default: [] clientInclude: ["planet.css"], ... } ...

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

Временно заполним содержимое секции //~TEMPLATE содержимым для идентификации рендеринга.

Файл :templates/blocks/planet.tmpl

... //~TEMPLATE New Template

Теперь выполним вывод нашего шаблона в тело страницы. Для этого отредактируем шаблон главной страницы :templates/pages/main-page.tmpl.

Файл :templates/pages/main-page.tmpl

//~TEMPLATE body @{{ render.template("templates/blocks/planet.tmpl") }}@

Наш шаблон отобразился в окне браузера.

Приложение, которое мы пишем будет отображать солнышко и планету вращающуюся вокруг нее.

Для начала, разместим фон космоса и солнце. Отредактируем шаблон, используя подготовленные стили из файла :templates/blocks/planet.css

Файл :templates/blocks/planet.tmpl

... //~TEMPLATE <div class="planet-container"> <div class="star-container"> </div> <div class="planet-sun-container"> <div class="planet-sun-container-item"> <div class="planet-sun"></div> </div> </div> </div>

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

Добавим настройку ширины и высоты шаблона, используя аргументы шаблона.

Файл :templates/blocks/planet.tmpl

... //~ARGUMENTS { fcfStyleInner: fcf.argVal("display: block; overflow: hidden; width: @{{args.width}}@; height: @{{args.height}}@"), width: "100%", height: "300px", } ...

Встроенный аргумент шаблона fcfStyleInner, содержит в себе стили добавляемые в оберточный контейнер шаблона. Он не должен редактироваться внешним кодом. Для редактирования стилей оберточного контейнера из внешнего кода используется встроенный аргумент fcfStyle.

fcfStyleInner формируется рассчитываемым аргументом, который создается функцией fcf.argVal(). Данные переданные в данную функцию проходят токенизацию. В конструкциях @{{}}@ происходит подстановка значений аргументов width и height, которые могут быть переопределены при рендеринге шаблона.

Рендер самостоятельно формирует порядок сборки аргументов на основании зависимостей, которые определяет самостоятельно. Но для некоторых типов аргументов, таких как программные, можно указать зависимости явно, используя опции dependencies или hardDependencies.

Результат редактирования аргументов шаблона приведен ниже.

< Назад

Вперед >