Creating UIs

An applet may have a UI consisting of one or more UI screens. Each screen is implemented using available widgets, layouts, widget properties, widget event handlers, and image resources.

FLX Widgets

At the moment, FLX has the following widgets:

Widget Description
Button A widget that can be clicked for an action.
BottomSheet A modal view containing supplementary content that is anchored to the bottom of the screen.
Center A layout widget that centers its single child widget within itself.
CheckBox A specific type of two-states button that can be either checked or unchecked. A CheckBox can have a checked state change listener.
Column A layout container that displays its child widgets in a vertical array.
Container A layout widget that contains a single child widget.
FormRenderer A special widget that can be used to render a literal FLX form, such as (+ 1 2 (* 3 4)), as a visual FLX form component.
Icon A widget that displays a selected icon resource from the built-in material icons library.
Image A widget that displays an image resource selected from Resources Library.
List A widget that displays a list of items defined by the given values.
MarkupText A widget that renders markup text written in MarkWon markup. More info about the supported syntax in Daring Fireball.
RadioButton A specific type of a button that allows the user to select one option form a set of options that are mutually exclusive.
RadioGroup A layout container for a set of RadioButtons that are mutually exclusive.
Row A layout container that displays its child widgets in a horizontal array.
Screen A top level widget which has a name and one or mode child widgets which are aligned vertically. The name of a screen is shown as a fragment title.
A UI of an applet can consists one or more screens.
Slider A widget that allows picking a value within a range of [0.0 .. 1.0] by sliding a thumb along a horizontal line.
Spinner A widget that provides a quick way to select one value from a set of values.
Stack A layout widget that positions its child widgets relative to the edges of its box.
Switch A two-state toggle switch widget that can select between two options.
Text A widget that displays a given text using the defined text style options.
TextField A widget for inputting text.

Some examples of widgets are depicted below in the screenshot:

  1. Text
  2. TextField
  3. MarkupText
  4. Icon
  5. Image
  6. Switch
  7. CheckBox
  8. Slider
  9. RadioGroup and RadioButtons
  10. FormRenderer

Screen Form

For each screen a Screen Form has to be added to visual code. Below is the top level of the visual code for the Calculator demo:

  1. Program Navigation Bar indicating that we are at top level.
  2. A Code Block containing constant definitions. Using the code block in here is optional, constants could be defined as well on the top level, but use of blocks is a handy way to organise code. Blocks are not scoping, so variable, functions, etc. defined in a block as visible also outside of the block.
  3. A Code Block containing variable definitions. Using the code block in here is optional, variable could be defined as well on the top level.
  4. A Code Block containing function definitions. Using the code block in here is optional, constants could be defined as well on the top level.
  5. Screen Form: This form contains the screen code. Each screen can be given a title. To edit the title, long press the title on the form. To open screen code for editing, click the form.

Screen Code

A screen is defined using code with widgets forms. It also possible to utilise arbitrary functions in screen code

  1. Program Navigation Bar indicating that we are in screen model.
  2. Instantiation of a Text widget and assignment of it to displayText variable. We need to have a reference to the Text widget because we need to be able to manipulate out side of the screen model.
  3. Options Model Button: Click this button to open the widget’s option model for editing.
  4. Events Model Button: Click this button to open the widget’s events model for editing. For instance, you will be interested to handle Button widget clicks by defining an event handler for it.
  5. Screen Form which implements screen. A screen can be given a name which is displayed as a title for the screen.
  6. Column Form is defined in here be the direct child of the screen. Column is a layout that arranges its child widgets as a vertical stack.
  7. The Column is defined to contain a number of Row widgets. Row is a layout that arranges its child widgets horizontally.
  8. Each Row in this Screen contains one or more widgets, such as Buttons.

Widget Options Model

  1. Program Navigation Bar indicating that we are in the Options Model of a Row widget.
  2. The backgroundColor property of Row. To edit this or any other widget property value just click on the value form.
  3. The elevation property of Row. The widgets are implemented using Android’s View Widgets, so the documentation for those applies also for FLX Widgets.
  4. The enabled property.
  5. The layoutGravity property.
  6. The margins property.
  7. The paddings property.
  8. The size property.

Widget Events Model

  1. Program Navigation Bar indicating that we are in the Events Model of a Button widget.
  2. Button widget has a single event onClick. Click on its form to define how the Button‘s on click event is handled (see below).
  1. Program Navigation Bar indicating that we are defining the onClick event handling of a Button widget. The handler in this example is defined to invoke function onButtonClick(buttonId) which is defined elsewhere in the Calculator project.