UI Concept

Modified on Tue, 12 Nov at 3:30 PM

UI Concept

The Frontline Layout Catalog is a collection of models that define layouts. To create your own catalog for development, you can define it as shown here:

<Catalog Name="MyCatalog" Version="1"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=""
         xsi:noNamespaceSchemaLocation="ui_catalog.xsd">
</Catalog>

Part templates

Part templates are predefined modules that you to create once and then can reuse in several views in your layouts. This allows your layout to stay consistent and changes only need to be implemented once. One example of a part template is the status bar:

<PartTemplate Name="STATUS_BAR" Margin="1,1,1,1" BackgroundColor="#00000000">
    <StackLayout>
        <StackItem Name="L2_BACKGROUND_HEADER" Orientation="Horizontal">
            <Panel Name="UBIMAX_SPACE" Weight="0.9"/>
            <Image Name="UBIMAX_ICON" Weight="0.1" Margin="0,0,0,0" Content="ANDRRES_ubimax_logo"/>
        </StackItem>
        <StackItem Name="L3_TEXT_OVERLAY" Orientation="Horizontal" Padding="3,0,3,5" BackgroundColor="#00ffffff">
            <BatteryStatus Weight="0.05" Padding="1,1,1,1"/>
            <WiFiStatus Weight="0.05" Padding="1,1,1,1"/>
            <MqttStatus Weight="0.05" Padding="1,1,1,1"/>
            <MicrophoneSpeechFeedback Weight="0.05" Padding="1,1,1,1" Margin="2,0,2,0" PositiveNotifications="true"
                                      NegativeNotifications="true"/>
            <TorchStatus Weight="0.05" Padding="1,1,1,1"/>
            <Text Weight="0.5" Name="StatusBarInfo" Gravity="Center" TextColor="gray" Font="Roboto-Light"
                  Padding="2,0,2,0"
                  BackgroundColor="#00ffffff"/>
            <Panel Weight="0.25" BackgroundColor="#00ffffff"/>
        </StackItem>
    </StackLayout>
</PartTemplate>

Layout pages

Layout pages work as a template for a view. They can include different elements such as text, panels, or part templates. It also contains content placeholders that define a space that can be filled by the layout models that use the particular layout page:

<LayoutPage Name="DefaultMaster" Padding="0,20,0,20">
    <Part Template="STATUS_BAR" Weight="0.1"/>
    <Panel Weight="0.8" Margin="10,0,10,0">
       <ContentPlaceHolder Name="Content"/>
    </Panel>
    <Panel Weight="0.1">
        <ContentPlaceHolder Name="Footer"/>
    </Panel>
</LayoutPage>

Layout models

Layout models are the implementation of layout pages. You can compare this concept to abstract classes and classes that inherit their attributes from another class. The layout page is the abstract class in this comparison and the layout model is the implementation:

Layout models need to fill the placeholders with content:

<Content PlaceHolder="PlaceholderName">
    [Your code here]
</Content>

Styles

Styles provide a way to predefine styling attributes such as border, background color, or text color. You can apply styles simply by adding style="yourStyleName" as an attribute to an element.

Using styles allows you to have a uniform look within your application and allows you to quickly adjust attributes for several elements.

A style can be defined like this:

<Style Name="InfoContentStyle" MaxLines="1" Gravity="Center" Padding="0,5,0,5" Border="2,gray.darker,gray.dark"