Creating a template

Now it's time to create a template in which the animation will run.

Create a folder :templates/blocks and navigate to it.

$ cd templates $ mkdir blocks $ cd blocks

And create a planet template with the command (or using plugins).

$ fcfmngr create template-file planet

Also place the file with template styles in this folder. The file can be downloaded from the link: planet.css.

Let's connect this file to our template and set the clientRendering template option to true. This will indicate to the framework that this template and its subpatterns can be rendered on the client side.

File :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"], ... } ...

As you can see from the example, when connecting, we used a relative path, relative to the location of the template itself.

Temporarily fill the contents of the //~TEMPLATE section with content to identify the rendering.

File :templates/blocks/planet.tmpl

... //~TEMPLATE New Template

Now let's execute the output of our template into the body of the page. To do this, let's edit the template of the main page :templates/pages/main-page.tmpl.

File :templates/pages/main-page.tmpl

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

Our template was displayed in the browser window.

The application that we are writing will display the sun and the planet revolving around it.

First, let's place the space background and the sun. Let's edit the template using the prepared styles from the file :templates/blocks/planet.css

File :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>

Our template, in accordance with the style settings, stretched across the entire page in height. The HTML we wrote is placed in a div container of the template, the styles and classes of which can be edited using the template arguments.

Let's add customization of the width and height of the template using the template arguments.

File :templates/blocks/planet.tmpl

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

The fcfStyleInner built-in template argument contains the styles added to the template wrapper container. It shouldn't be edited by external code. The fcfStyle built-in argument is used to edit the styles of the wrapper container from outside code.

fcfStyleInner is formed by the calculated argument, which is generated by the fcf.argVal() function. The data passed to this function is tokenized. The @{{ }}@ constructs are substituted with the values of the width and height arguments, which can be redefined when rendering the template.

The renderer independently forms the order of the assembly of arguments based on the dependencies that it determines itself. But for some types of arguments, such as programmatic, you can specify dependencies explicitly using the dependencies or hardDependencies options.

The result of editing template arguments is shown below.

< Back

Next >