At the moment FLX supports four types of resources that can be used when developing applets:
- Code snippets: arbitrary forms, functions, declarations, or entire code libraries as code blocks.
- Image resources: PNG, JPG, GIF
- Icon Resources: Built in icons consisting of all the material design icons (outlined)
- Audio resources: MP3, MP4, OGG, and WAV
New resource types may be provided later on.
Any form can be saved as a code snippet to Resources Library for later reuse. This is pretty awesome and powerful feature since users can, for instance, create a code block that contains a set of function, variable, and constant definitions, and save a such block as a code snippet. This basically provides means to define libraries. Furthermore, such libraries can exported from and imported to FLX app as projects.
Importing Code Snippets to Repository
Code blocks can be imported from:
- Visual Code Editor by selecting a form and from Form Actions Menu action: Save as code snippet.
- From a file containing visual FLX code serialised as JSON. (Exporting selected code snippets to JSON files with extension .flx is a forthcoming feature).
- From the system clipboard containing a valid FLX List expression e.g. (+ 1 2 (* 3 4))
- From the system clipboard containing visual FLX code serialised as JSON.
Code snippets can be also textual resources, such as JSON, markup text, or regular expressions.
Images can be used as resource when developing applet UIs. Image resources can be displayed in a UI using the Image widget (see Creating UIs).
Importing Images to Repository
Images can be either imported to repository:
- From Android’s file system by selecting an image file of supported format: PNG, JPG, GIF.
- From system clipboard when the clipboard contains a copied image, e.g, from a web page.
Icons can be used as resource when developing applet UIs. FLX app provides a set of outlined material icons as built-in resources. Icon resources can be displayed in a UI using the Icon widget (see Creating UIs).
Importing Icons to Repository
New icons can be imported as image resources to repository.
FLX support playback of audio and sound effect files of various formats. Audio resources can be added to Resources Library by importing them from Android’s file system.
Importing an Audio Resource to Repository
Audio resources can be added to repository:
- By importing audio files of supported format (MP3, MP4, OGG, WAV) from Android’s file system.
- From system clipboard if the clipboard contains an URI to audio content.
Repository feature which provides a more advanced UI for importing, previewing, managing, and using various resource types. Resources can be organised to hierarchical folder with notes and todos. The tab layout based UI of Repository provides a dedicated tab for each resource type: images, audio, and code snippets.
- Images Tab containing the image resources.
- Navigation Bar. Since image resources can be organised into hierarchical folders, a bread crumps style navigation bar is provided for navigation.
- An Image Resource. Each image resource has a name which is displayed.
- A thump image for preview.
- Preview Button for previewing the image in actual size. Preview can be also activated by clicking anywhere on the image resource item.
- Actions Button for showing image resource specific actions menu, for instance to delete or rename the image.
- A Todo Item displaying an arbitrary todo note. Also the title can be edited.
- Image Repository Actions Button for adding new items to image repository.
- Audio Tab containing the audio resources.
- The name of the audio resource which can be modified.
- Play Button for playing the audio file.
- Actions Button for activating audio resource specific actions menu, for instance, for deleting or renaming an audio resource.
- Audio Format, e.g. MP3.
- Audio Repository Actions Button for adding new items to audio repository.
- Code Tab containing the code snippets.
- A Note Item containing arbitrary note or remark. Also the title can be edited.
- The name of a a code snippet. The name can be modified by selection the Rename action from Actions Menu.
- Actions Button. Click this button invoke Actions Menu for code snippet specific actions, such as delete or rename.
- The code snippet as a visual FLX form.
- Preview Button. If the code snippet is a code block, it contents can be previewed by clicking this button (or anywhere on the code snippet item).
- Folder Item. All repository types can contain folders which in turn contain any repository type specific items. A folder is opened by clicking a folder item. Navigation along the hierarchy of folders is done by using the Navigation Bar.
- Code Repository Actions Button for adding new items to code repository.
Using Code Snippets
Code snippets can be easily reused in Visual Code Editor by selecting them using the Code Snippet Picker which is activated from the Search Form Picker in Visual Code Editor.
- Code Snippet Picker bottom sheet which provides a list of code snippets from the Code Snippet Repository. A code snippet is selected simply by clicking on its item.
- A code snippet represented as a visual FLX form.
- A code block as a code snippet. Since code block has contents it can be inspected by clicking the Inspect Button.
- Inspect Button. Click this button to invoke Code Block Inspector bottom sheet to inspect the contents of the code block.
- Cancel Button. Click to close the Code Snippet Picker without selecting any code snippet to be inserted to visual code.