Base de conhecimento

Voltar à visão geral do suporte

O Frontline Layout Catalog é uma coleção de modelos que definem layouts. Para criar seu próprio catálogo para desenvolvimento, você pode defini-lo como mostrado aqui:

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

Modelos de peças

Os modelos de peça são módulos predefinidos que você deve criar uma vez e, em seguida, pode reutilizar em várias exibições em seus layouts. Isso permite que seu layout permaneça consistente e as alterações só precisam ser implementadas uma vez. Um exemplo de um modelo de peça é a barra de status:

<Nome do PartTemplate="STATUS_BAR" Margin="1,1,1,1" BackgroundColor="#00000000">
    <StackLayout>
        <StackItem Name="L2_BACKGROUND_HEADER" Orientation="Horizontal">
            <Nome do painel="UBIMAX_SPACE" Peso="0.9"/>
            <Nome da imagem="UBIMAX_ICON" Peso="0.1" Margem="0,0,0,0" Conteúdo="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 Peso="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"/>
            <Peso do painel="0.25" BackgroundColor="#00ffffff"/>
        </StackItem>
    </StackLayout>
</PartTemplate>

Páginas de layout

As páginas de layout funcionam como um modelo para um modo de exibição. Eles podem incluir diferentes elementos, como texto, painéis ou modelos de peças. Ele também contém espaços reservados de conteúdo que definem um espaço que pode ser preenchido pelos modelos de layout que usam a página de layout específica:

<Nome da LayoutPage="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>

Modelos de layout

Modelos de layout são a implementação de páginas de layout. Você pode comparar esse conceito com classes abstratas e classes que herdam seus atributos de outra classe. A página de layout é a classe abstrata nesta comparação e o modelo de layout é a implementação:

Os modelos de layout precisam preencher os espaços reservados com conteúdo:

<Content PlaceHolder="PlaceholderName">
    [Seu código aqui]
</Content>

Estilos

Os estilos fornecem uma maneira de predefinir atributos de estilo, como borda, cor do plano de fundo ou cor do texto. Você pode aplicar estilos simplesmente adicionando style="yourStyleName" como um atributo a um elemento.

O uso de estilos permite que você tenha uma aparência uniforme dentro de seu aplicativo e permite que você ajuste rapidamente atributos para vários elementos.

Um estilo pode ser definido assim:

<Nome do estilo="InfoContentStyle" MaxLines="1" Gravity="Center" Padding="0,5,0,5" Border="2,gray.darker,gray.dark"