Adding and updating icons
Icons are specified as text characters, not as image files.
To include material design icons in your application, you can use the two font files included in the afl project, mdicons.ttf
and maticons.ttf
. These files are custom files created by NexJ. They contain a subset of icons available from Google Material Design font (https://material.io/resources/icons/) and the open-source Material Design Icons font (https://materialdesignicons.com/). These files are provided in the afl/mod/fonts
directory.
To view the exact contents of the .ttf
files, you can use a font viewer tool such as https://fontdrop.info/ or http://torinak.com/font/lsfont.html.
For example, open the maticons.ttf
file using the https://fontdrop.info/ online tool. The list of all characters included in the font is displayed. Scroll until you see the icon that you want to use. For example, the icon used for contacts is . When you hover or click the image, the Unicode number of E7FD is displayed. This is the number you can use when you refer to the icon.
If you want to use an icon which is not contained in these two files, you can include another font file in the afl/mod/fonts
directory, and then refer to the names or Unicode code points when developing your application.
There are two ways to include icons in the application.
Direct reference
Simply enter icon:backup
or icon:
in the icon
property to refer to an icon included in those two font files. For example, you can associate an icon with a workspace by defining the workspace with the following code:
<Workspace caption="IDS_HOME" icon="icon:">
Store icons in a string file
In the icon.en.strings
file, define your icons in the following format, using either the code point or the name.
ids.icon.lock=icon\:\uE897 ids.icon.user=icon:person_outline
The string ID should be a human-readable name that is meaningful in the context of the application. It is unrelated to either the code point of the name of the character in the font.
You can then refer to the string ID when you need to display an icon. For example, you can define the appearance of a composite label with the following code:
<Composite caption="ids.security" icon="lock" name="splitSecurity">
To change the icon, update the value in the strings file. You do not need to update each reference.