Visual Code Editor

FLX visual code is written using a visual editor which is designed for restricted smartphone touchscreens. Interaction with the editor is mostly based on clicking visual form components and editor actions. Drag and Drop -based interactions are limited only for moving and reordering code lines.

Editor Main View

  1. Project Title: The name of the currently active project being edited.
  2. Undo Button: For undoing the last action. The undo stack stores last 5 actions.
  3. Redo Button: For redoing the last undone action.
  4. Run Button: Run the current project as an applet.
  5. More Menu: An overflow menu containing additional editor actions (see the next screenshot).
  6. Code Line Handle used for selecting a line action (by clicking) or for dragging and dropping lines to a different location. To initiate moving of a selected line, do a long press on the selected handle and drag the code line to a desired location.
  7. A Visual Form for val definition. A visual form can contain other visual forms (see #8 and #9).
  8. A Visual Form for an immutable variable (constant) named msg.
  9. A Visual Form for a string object "Hello %s".
  10. Form Addition Point: A new form can be added to code clicking a Form Action Point which brings up the Search Forms Picker bottom dialog.
  11. Function Parameter Addition Point: A new visual form can be added for a function parameter. Click to select a form to be added.
  12. Line Addition Point: Adds a new code line

Editor Overflow Menu

  1. Save Action to save the project to file system as JSON files.
  2. Check Action to validate project validity i.e. to check for errors (see Running Applets).
  3. View Log Action to open log console (see Running Applets).

Project Structure Navigation Bar

FLX visual code is hierarchically structured. Some models, e.g. code block models or widget properties models, are edited on their own views – on different nested levels. Therefore FLX Visual Editor contains the Project Structure Navigation Bar which provides a breadcrumbs style UI for navigation among levels of the project’s code.

  1. Back Navigation Icon (or phone’s Back key) can be used to navigate upwards in hierarchy.
  2. Project Structure Navigation Bar with Home Button. Click the Home Button to get to top level of your project.
  3. A level called ClientUI. Click this breadcrumb to navigate directly to this level.
  4. Another level called createSettingsScreen.
  5. The current level called Functions.
  6. Form Collapse/Expand Toggle Button: Some visual forms are collapsible/expandable. Click this button to expand a collapsed visual form.
  7. Click this button to collapse an expanded form.

Adding Forms

New visual forms can be added by clicking the Addition Points as described above. Visual Code Editor provides the following ways to add forms to code:

  1. Search Forms Picker: A form is selected by typing keywords and selecting a suitable form from the list of found forms
  2. Browse Forms Picker: A form is selected from a alphabetic ordered list of all built-int function forms
  3. Recent Forms Picker: A form is selected from a list of recently added forms.
  4. Parsed Form Picker: User types a literal representation of a desired form as an input and a resulting form is parsed and generated for selection.
  5. Specialised Object Form Pickers: There is collection of specialised form pickers for object the following form types:
    • Audio Resource (Sound)
    • Code Snippet
    • Color
    • Date
    • Icon
    • Image Resource
  6. Code Snippet Picker: An arbitrary code snippet can be copied from the Code Snippet Repository and pasted as a form to visual code editor. This a very powerful mechanism to import block of reusable code “code libraries” to your own project.

Search Forms Picker

Search Forms Picker is a bottom sheet dialog for selecting forms based on a typed keyword. When a keyword is typed the search engine proposes a list of matching forms. If the desired form is among the proposed forms, it is selected simply by clicking on it. This is the most powerful, versatile, and therefore the default form picker. The UI elements of Search Forms Picker are depicted below.

  1. Search Forms Picker implemented as a bottom sheet. To cancel selecting a form just click the Cancel Button on top-left corner.
  2. Default forms components that are proposed when no search keyword is typed yet:
    • Booleans: true and false
    • null value
    • Empty string
    • Space (ASCII 32) character
    • Comment
    • TODO note
  3. Collection forms:
    • List
    • Array
    • Set
    • Map
  4. Object forms:
    • Code Block
    • JSON
    • BeanShell script
    • Markup text
    • Regex
    • Sound
    • Color
  5. Screen form containing the screen model for creating a screen for UI.
  6. Text input for typing the search keyword, when the keyword is changes, the proposed forms are dynamically updated.
  7. Clear Keyword Button
  8. Switch to Browser Forms Picker.
  9. Switch to Recent Forms Picker.
  10. Switch to Parse Form Picker.
  11. Switch to a Specialised Object Form Picker.

Editor Clipboard

It is possible to copy any visual form to the editor’s clipboard and paste it to a selected addition point or to replace an existing form. Search Form Picker shows the copied form:

  1. Clipboard View displays the form currently on Editor Clipboard. In this example, the clipboard contains a variable with name scheme.
  2. To pick the copied form just click on it.
  3. Clear Clipboard Button

Searching Form Components

When the user types a search keyword, the picker updated a list of both found and proposed form components. Search is smart and dynamic: It does not only list component matching the inputted keyword (e.g. functions and variables declared by the user), but it dynamically generates form components based on the keyword, such as strings, chars, numbers, variables, values and keywords.

  1. The user has typed keyword size.
  2. Proposed values and objects:
    • String "size"
    • Symbol with name size
    • Immutable value declaration with symbol named size
    • Mutable variable declaration with symbol named size
    • Keyword :size
  3. Found function form components:
    • Function .size for Collection objects
    • Function .size for String instances
  4. Clear Keyword Button

Browse Forms Picker

Browse Forms Picker provides a list of all built-in function form their documentation.

  1. Visual form components items.
  2. Visual form displaying the syntax.
  3. Description of the form component referencing to the syntax.
  4. Switch to Search Forms Picker.
  5. Switch to Recent Forms Picker.
  6. Switch to Parse Form Picker
  7. Switch to an object type specific picker (e.g. Color Picker or Code Snippet Picker).

Recent Forms Picker

Recent Forms Picker show a certain number of recently used forms and enables reuse of already defined form. Of course another possibly for reusing an already defined form is simply to copy the desired form and paste it.

  1. A collection of recently used forms. To select a form, just click on it.
  2. Switch to Search Forms Picker.
  3. Switch to Browse Forms Picker.
  4. Switch to Parse Form Picker.
  5. Switch to an object type specific picker (e.g. Color Picker or Code Snippet Picker).

Parsed Form Picker

Parsed Form Picker is for advanced user who now the literal syntax of FLX language. The idea is to type the literal form expression, and the app takes the typed expression as an input and parses a visual form component out if.

  1. Typed literal expression. In this example max function with couple of parameters: arithmetic expression and int value 20.
  2. The resulting parsed visual form component which can be selected by clicking on it or,
  3. by clicking the Check icon
  4. Switch to Browse Forms Picker.
  5. Switch to Recent Forms Picker.
  6. Switch to Search Forms Picker.
  7. Switch to Parse Form Picker.

Form Picker Selection Bottom Sheet

To select an object type specific picker (e.g. Color Picker) open the Form Picker Selection Bottom Sheet by clicking the Specialised Object Form Picker button in Search Forms Picker (as described in Section Search Form Picker).

  1. Code Snippet Picker
  2. Color Picker
  3. Date Picker
  4. Icon Picker
  5. Image Picker
  6. Audio Resource Picker
  7. Parsed Form Picker

Color Form Picker

Color Form Picker is used to select color value objects. The Color Picker UI has three tabs providing various UIs to define/select a color:

  1. RGBA Color Sliders Tab
  2. Material Color Palettes Tab
  3. Recent Colors Tab

RGBA Color Slider Tab

  1. RGBA editor tab for defining a color.
  2. Material color palettes tab.
  3. Recent colors tab.
  4. Sliders for adjusting red, green, blue, and alpha color component values.
  5. Value input fields for manually inputting RGBA values of the current color.
  6. Preview of the current color.
  7. Click Commit Button to select the current color.

Material Color Palettes Tab

  1. RGBA editor tab for defining a color.
  2. Material color palettes tab.
  3. Recent colors tab.
  4. As an example, Deep Orange material colors palette.
  5. Use the Palette Spinner to select the material palette.
  6. Value input fields for manually inputting RGBA values of the current color.
  7. Preview of the current color.
  8. Click Commit Button to select the current color.

Recent Colors Tab

  1. RGBA editor tab for defining a color.
  2. Material color palettes tab.
  3. Recent colors tab.
  4. Recent selected colors. If there are no recent selection colors, some basic colors are shown.
  5. Use the Palette Spinner to select the material palette.
  6. Value input fields for manually inputting RGBA values of the current color.
  7. Preview of the current color.
  8. Click Commit Button to select the current color.

Code Snippet Picker

  1. Code Snippet Picker to select a code snippet from Code Snippet Repository.
  2. A function form (a user defined function called onSubscribed) as a code snippet. To select this code snippet for adding it to code, simply click on the form.
  3. The name of a code snippet.
  4. A code block called ConnectionCallbacks as a code snippet.
  5. Inspect Code Snippet Button: Since code block has content, the content can be studied by clicking this button (see below).

  1. The title of the inspected code snippet.
  2. Since the content of an inspected code snippet can have hierarchical levels, a Structure Navigation Bar is provided. Its usage is same as the usage of a Project Structure Navigation Bar described above.
  3. The contents of a code snippet in a scroll view.

Date Picker

Date Picker is used to select a Date object form.

  1. Calendar month view.
  2. Current month and year.
  3. Show Previous Month Button
  4. Show Next Month Button
  5. Currently selected date (e.g. March 12th, 2021)
  6. Close Button to dismiss Date Picker.

Icon Resource Picker

Icon Resource Picker can be used to select one of the built-in icon resources (Android material icons) to be used as a form. The built-in icon resources contain over 1700 material icons to choose from. The picker provides a search function to find icons.

  1. Icon Resource Picker with a Cancel Button.
  2. Search bar for searching icons based on typed keyword.
  3. Clear KeyWord Button
  4. List of (found) material icons. Select an image by clicking it. If no keyword is typed then all available icons are shown in alphabetical order.

Image Resource Picker

Image Resource Picker can be used to select an image resource from the Resources library to be used as a form. Image resources has to be added by the user by using the Resources feature.

  1. List of Image resources obtained from Image Repository. Select an image to be picket to code by clicking it.
  2. Image name.
  3. Image info: format and size in pixels.
  4. Import a new image from file.
  5. Import a new image from system clipboard.
  6. Close Button to dismiss the Image Resource Picker.

Audio Resource Picker

Audio Resource Picker can be used to select an audio resource from the Resources library to be used as a form. Like image resources, also audio resources has to be added by the user by using the Resources feature.

  1. List of audio resources obtained from the Audio Repository.
  2. Play button to preview the sound.
  3. Close Button to cancel the selection of an audio resource-

Quick Copy and Paste of Forms

For convenience FLX Visual Code Editor provides the following mechanism for quickly copying forms. The steps are as follows:

  1. The form to copied. e.g. String "Hello world" in this example.
  2. The target location as a Form Addition Point for pasting the copied form.
  3. Invoke the Form Actions Bottom Sheet with a long pressing on the visual form. Note that in case of visual form that contains other nested forms, e.g. function form, you need to press, e.g., on the name of function – not any nested form, e.g., function parameter value form.
  4. Select Copy form action from the actions list.
  5. Long press on the target Form Addition Point, and
  6. The original form gets copied to the selected point as a copy form.