Continuing to explore templates

Let's continue to explore the framework's templates based on a new example, thanks to which we will learn the rest of the basics of using templates and more.

Our new application will display moving containers with text strings, be able to edit them, change the background image background and save its state on the server. In this example, we will learn how to work with system variables, send data to the server, look at other use cases for DOM events, and learn how to work with simple lists.

The graphical interface of the application will consist of two parts. The top one will display the animation of moving lines and the bottom one will contain the configuration editor where you can add and edit lines, as well as change the background of the upper part.

And so let's get started. Create a new project named fcf-example-moving-containers

$ cd [PROJECTS_DIRECTORY] $ fcfmngr create project fcf-example-moving-containers $ cd fcf-example-moving-containers $ fcfmngr create-db ./fcf-example-moving-containers.js

And initialize it.

$ fcfserver ./server.json

Description links

System variables - Introduction to system variables

Wrapper initialization order, its update and destructor call - Describing wrapper initialization and binding it to an HTML template

Implementing moving rows - Creating the visual part of the moving lines

Binding an event and rendering from a template argument. - Creating a string editor, binding events through a template argument, and rendering from a template argument with fcf.argTmpl()

Merge option and background image selection - Adding background change functionality and practical application of the merge option

Events on the DOM element and the output runtime construct. - Mastering DOM events at runtime

Saving data on the server and *.receive.js files - Saving the configuration on the server side and mastering the work of the wrapper with the server through *.receive.js files

Multiprocessing and Debugging - Features of debugging FCF applications and the mechanism of multiprocessing.

Template argument change events. - Describing the handling of argument change events using the onArg and onArg[ARG_NAME] methods

Reloading the widget state. reload and refresh functions - Reloading the widget state. reload and refresh functions

Request URL Parameter Arguments - Request URL Parameter Arguments