Configuring text layout

1. <TextLayouts titleClass="title"editTextHintClass="editTextHint"buttonClass="button"iOSNavigationButtonClass="iOSNavigationButton">

2.  <TextLayout class="title"font="SANS_SERIF"size="12"bold="true"italic="false"underline="false"align="left"color="005596" />

3.  <TextLayout class="editTextHint"font="SANS_SERIF"size="12"bold="false"italic="false"underline="false"align="center"color="005596" />

4.  <TextLayout class="button"font="SANS_SERIF"size="12"bold="true"italic="false"underline="false"align="center"color="005596" />

5.  <TextLayout class="iOSNavigationButton"font="SANS_SERIF"size="12"bold="true"italic="false"underline="false"align="center"color="005596" />

6.  <TextLayout class="text"font="SANS_SERIF"size="12"bold="false"italic="false"underline="false"align="left"color="005596" />

7.  <TextLayout class="generated"font="SANS_SERIF"size="20"bold="true"italic="false"underline="false"align="center"color="005596" />

8.  </TextLayouts>

• TextLayouts: The attributes of this element define how some elements of Mobile Authenticator Studio (title, buttons, hints) are formatted.

  • titleClass: The class that is applied to customize a title element. The class must be defined on the TextLayouts list. The element is optional. If not defined, a default formatting will be applied.

    It is not possible to change the alignment for this element.

  • editTextHintClass: The class that is be applied to customize a hint inside a text field element. The class must be defined on the TextLayouts list. The element is optional. If not defined, a default font will be applied.

    It is not possible to change font color for this element.

  • buttonClass: The class that is applied to customize the text font of a button element. The class must be defined on the TextLayouts list. The element is optional. If not defined, a default font will be applied.

  • iOSNavigationButtonClass: The class that is applied to customize the text of a navigation button element. The class must be defined on the TextLayouts list. The element is optional. If not defined, a default font will be applied.

    This attribute is used on iOS only.

• TextLayouts > TextLayout : This element defines how texts are formatted in Mobile Authenticator Studio.

  • class: The identifier that links the TextLayout element to the corresponding text. This attribute is mandatory.

  • font: The font name. This could be a default font or a custom font. This attribute is optional. The default font is the system font.

  • size: The font size. This attribute is optional. The default value is 12.

  • bold: Indicates whether the text is in bold. This attribute is optional. The default value is false.

  • italic: Indicates whether the text is in italic. This attribute is optional. The default value is false.

  • underline: Indicates whether the text is underlined. This attribute is not supported on iOS. On Android, this attribute is not supported for the button class, and is optional for all other cases. On all other platforms, it is also optional. The default value is false.

  • align: Indicates whether the text is left-aligned (left), centered (center), or right-aligned (right). This attribute is optional. The default value is left.

  • color: The color of the text in RGB format (RRGGBB, from 000000 to FFFFFF). This attribute is optional. The default value is 005596.

    The default values of these attributes define the rendering of texts which are not linked to a TextLayout element.

    For more information about the supported fonts, see Supported fonts.

The following elements can have a class attribute to link them to corresponding TextLayout elements:

• DIGIPASS

• EULA

• MenuItem

• Field

• Label

• Dynamic

1. <StandardActivation id="standardOfflineActivation">

2.  <MenuItem ...>

3.  <ActivationData>

4.    <OfflineActivationData ... />

5.    <View>

6.      <Fields>

7. <Field id="SerialNumber"name="Serial number"comment="Enter your serial number (10 digits)."class="c1" />

8. <Field id="ActivationCode"name="Activation code"comment="Enter your activation code."class="c2" />

9.    </Fields>

10.  </ActivationData>

11.  <ExtraActivationData>

12.    <View>

13.      <Fields>

14. <Field id="CreatePassword"name="Local password"comment="Create your DIGIPASS^® local password."class="c3" />

15.      </Fields>

16.    </View>

17.  </ExtraActivationData>

18. </StandardActivation>

19.    ...

20. <Layout ...>

21.  <TextLayouts titleClass="c4"editTextHintClass="c5"buttonClass="c6">

22.    <TextLayout class="c1"font="SANS_SERIF"size="12"bold="false"italic="true"underline="false"align="left"color="FF0000" />

23.    <TextLayout class="c2"font="SANS_SERIF"size="16"bold="true"italic="false"underline="false"align="center"color="00FF00" />

24.    <TextLayout class="c3"font="SANS_SERIF"size="20"bold="false"italic="false"underline="false"align="right"color="0000FF" />

25.    <TextLayout class="c4"font="Lato"size="12"bold="false"italic="true"underline="true"align="left"color="FF0000" />

26.    <TextLayout class="c5"font="Oswald"size="16"bold="true"italic="false"underline="false"align="left"color="00FF00" />

27.    <TextLayout class="c6"font="Pacifico"size="20"bold="false"italic="false"underline="false"align="center"color="0000FF" />

28.  </TextLayouts>

29. </Layout>

In this example, six text layouts with different size, style, alignment, and color settings are defined. The first three TextLayout elements are associated with the Field elements by using the corresponding class attributes.The other three are associated with titles, hints, and button texts. Example: configuring text layout shows how the different text layouts are displayed.

Example: configuring text layout

Supported fonts

Mobile Authenticator Studio can either use preinstalled or custom fonts. Custom fonts must be embedded inside the applications. True Type Fonts (.ttf) and Open Type Fonts (.otf) are supported. During customization, font files must be placed in the \CustomizationTool\input\fonts folder. The file name must be coherent with the information required for the TextLayout element. The format of the file is:

Font Name.Extension or Font Name-Font Style.Extension

where

• Font Name is the name of the font, without spaces.

• Font Style is optional. Possible values are:

  • Bold for bold font

  • Italic for italic font

  • BoldItalic for bold-italic font

  Other font styles are not supported.

• Extension is otf or ttf.

1. <TextLayoutstitleClass="title"editTextHintClass="editTextHint"buttonClass="button"iOSNavigationButtonClass="iOSNavigationButton" >

2.  <TextLayout class="title"font="Oswald"size="12"bold="true"italic="false"underline="false"align="left"color="005596" />

3.  <TextLayout class="editTextHint"font="Open Sans"size="12"bold="false"italic="false"underline="false"align="center"color="005596" />

4.  <TextLayout class="button"font="Raleway"size="12"bold="true"italic="true"underline="false"align="center"color="005596" />

5.  <TextLayout class="iOSNavigationButton"font="Amatic SC"size="12"bold="false"italic="true"underline="false"align="center"color="005596" />

6.  </TextLayouts>

In this example, the following font files must be added to the \CustomizationTool\input\fonts folder:

• Oswald-Bold.ttf

• OpenSans.ttf

• Raleway-BoldItalic.ttf

• AmaticSC-Italic.ttf

If these fonts are not present in the \CustomizationTool\input\fonts folder, a preinstalled font will be used. Preinstalled fonts are available by default on the device, or they can be installed by the end user. If no fonts are preinstalled, the default font will be used.

The different platforms support different fonts - Fonts supported by platform provides a reference list of preinstalled fonts for each device. This list is informative only, and depends on the installed OS.