`component`

FTD

ftd.row

Common Text Attributes

if Conditional Components

Conditional Attributes

$loop$ : Looping Over Lists

$on-<event-name>$ : Event Handling

Auto Nesting

component

A component in ftd is similar to “react component”, components have “arguments”, this the data that must be passed to them, and using components we construct the user interface.

Creating A Component

New components are defined using the component keyword:

-- ftd.text heading:
caption title:
text: $title
role: $fpm.type.heading-large
color: $fpm.color.main.text

-- ftd.text heading:
caption title:
text: $title
role: $fpm.type.heading-large
color: $fpm.color.main.text

Here we have defined a new component heading.

Parent Component

Every component inherits from a “parent component”. This is provided by the header component.

In this case, our heading component is using ftd.text. We are creating a custom-component with shows given text with the font size of 18 pixels.

Kernel Components

So how is ftd.text implemented? ftd comes with some “kernel components”, these are the lowest level components that every other component uses directly or indirectly.

Read about our kernel components guide to learn about these components.

Component Arguments

Component “arguments” starts with $, in our component we have one such argument, $title.

The type of our $title argument is caption. You can read more about caption in the ftd types guide.

Arguments with Default Values

An argument can be defined with a default value:

-- ftd.text foo:
caption name:
integer size: 10
text: $name

-- foo: hello (uses default value of $size)

-- foo: this is nice
size: 20

-- ftd.text foo:
caption name:
integer size: 10
text: $name

-- foo: hello (uses default value of $size)

-- foo: this is nice
size: 20

Since foo defines $size with a default value, it is used in the first instance, and in second we overwrite the default value.

Component Local Variables

FTD components can define local variables. These variables are automatically created for each component, and is mainly for handling events.

Component “local variables” starts with @:

-- ftd.text foo:
caption name:
boolean open: true
text: $name
if: @open
$on-click$: toggle @open

-- ftd.text foo:
caption name:
boolean open: true
text: $name
if: @open
$on-click$: toggle @open

This will create a @open. We are using if to only show the component if @open is true, which will be the case by default as we have added with default true clause to @open declaration.

We have also set click event handler to toggle @open, so the effect would be if someone clicks on the message it will go away.

We can also refer to global variables or component arguments (eg $name here) as the default value of a local variable.

Using Container Components

Some components have children. ftd comes with two kernel container components, ftd.row and ftd.column.

-- ftd.row label:
caption name:
body value:
spacing: 5

--- ftd.text:
text: $name

--- ftd.text:
width: fill
text: $value

-- ftd.row label:
caption name:
body value:
spacing: 5

--- ftd.text:
text: $name

--- ftd.text:
width: fill
text: $value

Here we are trying to create a “label component”, which has two arguments, $name and $value.

The label component uses an ftd.row and has two ftd.text children. ftd.row shows its children in a single row.

Note that we have used --- to indicate that the two ftd.text are sub-sections of the ftd.row section (review ftd.p1 grammar).

We have passed the component arguments to each ftd.text.

A container component can use other container components and create an heirarchy of such components, read more about it in “container management guide”.

Using Components

Say we want to use our heading and label components:

-- ftd.column:
spacing: 20
border-width: 1
border-radius: 5
padding: 10

-- heading: hello there! This is my heading

-- label: Name
value: Amit Upadhyay

-- label: Location
value: Banglore, India

-- container: ftd.main

-- ftd.column:
spacing: 20
border-width: 1
border-radius: 5
padding: 10

-- heading: hello there! This is my heading

-- label: Name
value: Amit Upadhyay

-- label: Location
value: Banglore, India

-- container: ftd.main

Here we have created one heading and two labels.

We have placed the heading and labels inside an ftd.column to put some spacing between them.

We have also used the container keyword, part of the ftd container management facility, to reset the current container to ftd.main so the rest of this document is not made part of the ftd.column.

This is how it looks like:

hello there! This is my heading

Name:

Amit Upadhyay

Location:

Banglore, India

Container Management

Every ftd document is rendered with a top-level container initialized. This top-level container is an ftd.column, it places its children on top of each other.

ftd also has a concept of current container. When the document starts, the top level container is set as the current container.

When a “container component” is initialized, with no children specified as sub-sections, it becomes the current container, and all future components are placed in it.

We can set the current container to any container using that container’s id property. The default top-level container can be set using ftd.main alias.

Read more about it in the container management guide.

Conditional Components

ftd supports a if to decide if the component should be visible or not, based on the arguments, or global variables.

-- boolean dark-mode: true

-- ftd.text: we are in dark mode
if: $ftd.dark-mode

-- ftd.text: light mode rules
if: not $ftd.dark-mode

-- boolean dark-mode: true

-- ftd.text: we are in dark mode
if: $ftd.dark-mode

-- ftd.text: light mode rules
if: not $ftd.dark-mode

We have inserted two ftd.text components, but only one of them would be visible, based on the value of the dark-mode variable.

Read more about it in conditional components guide.