Interface composition

Slides

A Slide is similar to a slide in presentation software like PowerPoint or Keynote. Users will be able to navigate between slides with Previous and Next buttons. You specify all the slides you want to show to the user in the Slides array in the Plist. One Slide only can be displayed at a time to the user on the window. It holds Containers stacked horizontally. Those Containers are specified in the Containers array in the Slide key dictionary. You can put as many of them as you want, but for display purpose, it is better to have between 1 and 3 Containers in one Slide.

A Slide will take the overall space available in the window.

The following keys let you customise the behavior of the slide

Summary

Detail

ContainersBorderColor

• Type: Color
• Explanation: Default color used for the border of all the containers in the slide.

HidePreviousButton

• Type: Boolean
• Explanation: If true, the navigation previous button will be hidden when this slide is shown.

HideNextButton

• Type: Boolean
• Explanation: If true, the navigation next button will be hidden when this slide is shown.

Containers

• Type: Array(Container)
• Explanation: Specify here the containers of the slide. The order of the containers in the array will determine they horizontal order when displayed.

Example

<dict>
    <key>ContainersBorderColor</key>
    <dict>
        <key>DarkMode</key>
        <string>#819ABE</string>
        <key>LightMode</key>
        <string>#ED682580</string>
    </dict>
    <key>Containers</key>
    <array>
        <!-- The containers go here -->
    </array>
</dict>

Valid state

A slide can be valid or invalid depending on its containers' components. For example when filling a form and using an InputComponent or waiting for all applications to be installed with AppMonitoringComponent. If a slide is invalid, the user will not be able to navigate to the next slide, or to quit the app. When they will press the next or quit button, informative text will be displayed. You can customize this behavior in the components which offer the validation feature.

Containers

A Container is stacked in a Slide horizontally.

The following keys let you customise the appearance and behavior of the container

Summary

Detail

IsLarge

• Type: Number
• Explanation: When set to true, this container will take two third of the available width in the window, while the other container will be restricted to the remaining third. Only applies if two containers are specified in the slide, and if one only has a IsLarge key set to true

InputComponentsDistribution

• Type: Boolean
• Possible values: Fit, Center
• Explanation: When displaying several input components, you can specify here the distribution those components should adopt. If one component already has a Distribution key set, the general distribution specified in the container has no effect.

InputComponentPercentWidth

• Type: Number
• Possible values: 0...1
• Explanation: This value allows you to give more width to an input component, by specifying the percentage width it should take in its container. If specified here, all inputs component should take by default if they do not specify one locally. Default is 0.4.

BorderColor

• Type: Color
• Explanation: The color of the border drawn around the containers. Override the value set in the ContainersBorderColor of the slide.

Examples

Container with a IsLarge key set to true

<dict>
    <key>IsLarge</key>
    <true/>
    <key>Components</key>
    <array>
        <!-- The components go here -->
    </array>
</dict>

Container with centered InputComponents

<dict>
<key>InputComponentsDistribution</key>
    <string>Center</string>
    <key>Components</key>
    <array>
        <!-- The components go here -->
    </array>
</dict>

Here are two figures of components vertically stacked in a container