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 on one Slide. A Slide will take the overall space available in the window.

Containers

Slide with its containers


Key Type Explanation Is Required
ContainersBorderColor Color Color used for the border of all the containers in the slide
Example

    <dict>
        <key>Margins</key>
        <dict>
            <key>Top</key>
            <integer>50</integer>
            <key>Right</key>
            <integer>50</integer>
            <key>Bottom</key>
            <integer>50</integer>
            <key>Left</key>
            <integer>50</integer>
        </dict>
        <key>Containers</key>
        <array>
            <!-- The containers go here -->
        </array>
    </dict>
    

Valid state

A slide can be valid or invalid depending on the component of its container. For example when filling a form or waiting for all applications to be installed with AppMonitoring component. If a slide is invalid, the user will not be able to navigate to the next side, or to quit the app. When he will press the next or quit button, informative text will be displayed. You can customize this behavior in the components which propose this feature.



Containers

A Container is stacked in a Slide horizontally. You can add some padding to a Container with the Margins key.

Key Type Possible values Explanation Is Required
IsLarge Boolean - 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 String Fit, Center 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.
BorderColor Color - The color of the border drawn around the containers. Override the value set in the ContainersBorderColor of the slide

A Container holds Components which are stacked vertically. As for the Containers, you can put as many Components as you want in a Container, there is no specific limit.

Examples

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


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

Here are two examples of components vertically stacked in containers

First example components

Example of container with 3 components: Text, Input and Button



Second example components

Example of container with one web component