Key Concepts

Back to Index


Let’s go over some key concepts essential for understanding how to use the Component Studio and what it does – starting with components themselves.

A component is a reusable, configurable mini-application that can be quickly and seamlessly integrated into a Flite ad using Design Studio. Another way to think of components is as building blocks that an ad designer can use to create their ad. The Component Studio allows you to build such components.

The key pieces of a component are listed and described below. All of these pieces can be configured using Component Studio.

  • Source: This is the core JavaScript of your component.
  • Settings: These are the various fields that an ad designer sees in Design Studio’s Inspector panel, allowing her to configure a component within the ad. For instance, Flite’s standard Button component has a text field for the button’s Label, a dropdown menu to select the label Font, a smaller text field for Font Size, etc.
  • Groups: Component settings are typically arranged in a way that makes it easy for an ad designer to find the setting they are looking for. For instance, the standard Feed component has three Tabs – Source, Layout and Style. The Layout tab then has two sections within it – Thumbnail Options and Paging Options. These Tabs and Sections are called Groups.
  • Containers (Advanced): Some components can contain other components. For instance, all standard Navigation components like Tab Set, Gallery, etc. can contain other components; these child components indicate the layers that the Navigation component should navigate through. You can allow your component to have children by adding a Container to it.
  • Parts (Advanced): Some components contain sub-layers that are not available to any other components. For instance, a Form component can have sub-layers like Checkbox, Text Field, etc. representing different types of form fields. These component-specific sub-layers are called Parts.
  • Layer structure (Advanced): Components that use Containers and Parts typically have a set of rules governing how those Containers and Parts can be used. For instance, the Poll component has a complex structure that includes multiple Containers, with each Container having its own set of Parts (e.g. Chart and Legend) and Components (e.g. Button) by default, in addition to rules around the Parts/Components that can be added to each Container (e.g. the Answers container can accept Parts of type Answer and nothing else).
  • Actions & Triggers: Some components have actions and triggers that are unique to that component. For instance, the YouTube video component has actions like Play, Pause, Rewind, etc. It also has triggers like On Play, On Pause, On Mute, etc.
  • Defaults: When a component is placed on the Stage in Design Studio, it has certain default settings. For instance, the Button has default dimensions of 100x30; a label in Arial size 11 font; a white-to-grey color gradient; etc.

The Component Studio allows you to create your component by putting all these pieces together and configuring them as needed.

When your component is dropped into Design Studio, it appears in the Layers panel, just as any Flite standard component would.


Back to Index

Key Concepts