Working with Text

An easy to understand and use syntax lets you format text rapidly in all kinds of components, from regular text, to Data Grid and Trees or Lists.

---

Syntax

Here are the general syntax rules that you can use to apply formatting to text inside components. Components that support text formatting with this syntax will always have a toolbar above the content editor, that will let you easily apply formats to selected text. Like in the image bellow:

Basic formatting:

Use *this* for bold.
Use /this/ for italic.
Use _this_ to underline text.

Links embedded in text

To insert a link, use brackets, like this: [Link To], which will be displayed as Link To. To create a link to a certain page, simply prepend the link text with the name of the page, like this: [HomePage#Link to].

Colored text

Introduced in version 3.0, this option lets you specifically color a portion of text insider a component.

To do this, select the text you want to color, and then select the color from the color chooser in the toolbar. It will generate a syntax like this: This is my {color:0000FF}favorite color{color}.

CheckBox and selected item

To create a checkbox or to mark a selection, use square brackets like this: [x] or [].

NB: The Tree component does not yet support checkboxes.

Inserting icons

The syntax to insert an icon into a component is like this: {flair:library_image} or {user:custom_icon}.

Since FlairBuilder lets you use custom icons inside the application, you can also use them inside components. That’s why you’ll need to prefix the name of the icon with user:. If you use the icon palette drop-down from the toolbar, it will insert the prefix for you.

DataGrid syntax

The Data Grid components supports most, if not all, of the text formatting syntax. One thing that it has as an extra feature, however, is the ability to size and align columns. The syntax is simple: just put on the last line of the definition something like this

{10C, 25L, 50, 15R}

This line tells FlairBuilder for each column the desired width in percentages (0-100) (out of the entire data grid width) and the alignment of the column (L-Left, C-Center, R-Right).

The final width of the column will not be, most probably, the one you specify. FlairBuilder will also consider the content of each cell and finally decide a specific with for each column that will best fit the content and your specification.

To tell FlairBuilder to size a column to its minimum needed width, just enter 0 as a width (e.g. {0C, …}).