Base de conhecimento

Voltar à visão geral do suporte

Até agora, discutimos apenas como implementar o comportamento do aplicativo, mas não como ele parece. Neste capítulo, vamos nos concentrar neste tópico.

Estrutura de layout e noções básicas

Semelhante ao fluxo de trabalho, o layout do seu aplicativo também é definido em XML. Os layouts consistem em um LayoutPage que define um quadro reutilizável para várias telas e um LayoutModel que é usado para projetar as especificidades de uma tela específica. Além disso, podemos definir Style para aplicar a vários elementos de layout e PartTemplate que tornam partes específicas do layout reutilizáveis.

Todos esses elementos estruturais são definidos em seus arquivos separados. Claro, eles ainda precisam ser preenchidos com conteúdo como texto, botões ou imagens. Você pode dar uma olhada na lista de elementos da interface do usuário para obter uma visão geral.

A página de layout do nosso componente "Escolha" inclui apenas a barra de status, um título e uma seção de conteúdo usando a <ContentPlaceHolder> tag , que será preenchida pelo "LayoutModel".

<LayoutPage Name="DefaultMaster">
  <Part Template="STATUS_BAR" Weight="0.1"/>
  <Nome do texto="Topic" Weight=".15" Style="TitleStyle" Content="Escolha uma fruta"/>
  <Panel Weight="0.75">
    <ContentPlaceHolder Name="Content"/>
  </Panel>
</LayoutPage>

O "LayoutModel" tem esta aparência:

<Nome do LayoutModel="ChoiceScreen" Page="DefaultMaster" Orientação="Vertical">
  <Content PlaceHolder="Content" Weight="1" Orientation="Horizontal">
    <Nome do botão="Apple" FocusOrder="0" Weight="0.5" Style="ImageButtonStyle">
      <Nome do texto="LEFT_TEXT" Style="FooterButtonTextStyle" Peso="1" MaxSize="30" Content="Apple"/>
      <Eventos/>
    </Button><
    Nome do botão="Pera" FocusOrder="1" Peso="0,5" Style="ImageButtonStyle">
      <Nome do texto="RIGHT_TEXT" Style="FooterButtonTextStyle" Peso="1" MaxSize="30" Conteúdo="Pera"/>
      <Eventos/>
    </Button>
  </Content>
</LayoutModel>

"LayoutModel" é o elemento que conectamos com o fluxo de trabalho. Isso é feito ao definir uma etapa do fluxo de trabalho: <step id="choose" descriptor="the user selects between two options" uitemplate="ChoiceScreen">. Como você pode ver acima, o "LayoutModel" refere-se ao Page="DefaultMaster para obter seu quadro externo. A partir do "LayoutPage", ele faz referência ao uso <Content PlaceHolder="Content"...do <ContentPlaceHolder Name="Content"/> .

Dimensionamento e orientação

Dependendo do tipo de elemento da interface do usuário, você pode usar um intervalo de atributos para estilizar a interface do usuário ao seu gosto. Os dois atributos que você deve primeiro examinar, são weight e orientation, pois eles ajudam a projetar a estrutura geral da interface do usuário.

  • Weight Define o tamanho de um elemento em um intervalo entre 0 e 1, onde 1 é 100% do tamanho do elemento pai.
  • Orientation é aplicado a um elemento pai e determina se os elementos filho estão horizontal (próximos uns dos outros) ou vertical (uns sobre os outros) dentro do elemento pai.

Em nosso "LayoutModel" acima, o Content elemento tem Horizontal orientação, então os botões serão mostrados um ao lado do outro. Cada um deles pode usar Weight="0.5" (portanto, 50%) do tamanho disponível para o Content elemento. Os elementos de texto dentro dos botões, por outro lado, usam o espaço total disponível para seu elemento pai (o botão) com Weight="1".

Muitas vezes, ao configurar o tamanho e a orientação de seus elementos, ajuda a fazer uso de Panel elementos. Esses elementos são puramente estruturais e podem ser usados para alterar facilmente a orientação dentro de um elemento pai ou subdividir seu espaço.

Botões e ordem de foco

Ao trabalhar com botões, um atributo é especialmente importante: FocusOrder. Esse atributo define a ordem em que os botões serão focados se você folheá-los usando botões de hardware. Ele também define qual botão será pré-selecionado, ou seja, o botão com FocusOrder="0". Cada botão em seu layout precisa ter um FocusOrderarquivo . Mesmo que alguns botões estejam em um PartTemplate e, portanto, em um arquivo diferente, eles ainda precisam estar nessa ordem geral do seu layout.

Dicas e truques: A ordem de foco do seu layout precisa começar em 0 e ser sequencial sem lacunas ou duplicatas. Se esse não for o caso, seu aplicativo provavelmente falhará ao tentar carregar o layout. Se você tiver falhas repentinas de aplicativos durante o desenvolvimento, verificar seu FocusOrder deve vir imediatamente à sua mente.

Formatação de texto

É possível formatar os textos que são exibidos nos óculos inteligentes com .html tags. Você pode adicionar a formatação a um modelo de interface do usuário, em um arquivo de layout ou a um componente ao criar um novo texto dentro do código.

<Nome do texto="LEFT_TEXT" Style="FooterButtonTextStyle" Peso="1" MaxSize="30" Content="<h1>Maçãs vermelhas têm o melhor sabor</h1> maçãs verdes<br>não são tão <sub>saborosas</sub>"/>

O resultado da formatação pode variar entre o componente Layout ao qual ele está atribuído e a configuração do componente específico.

Para obter mais informações sobre isso, consulte Formatação de texto na seção Referência do mecanismo de fluxo de trabalho.

Alterações de layout

O que está sendo mostrado ao usuário raramente é estático. Qualquer interação do usuário normalmente também resultará em alguma alteração na interface do usuário. É claro que não queremos criar um novo layout e passo toda vez que o conteúdo de um campo de texto for alterado. Há duas maneiras de adaptar a interface do usuário dinamicamente: criando um <mapping> no fluxo de trabalho e usando a ui_update ação.

Mapeamento

O mapeamento permite associar permanentemente um valor ou variável a um atributo de um elemento da interface do usuário. Se você mapear uma variável, o atributo do elemento UI será alterado automaticamente sempre que o valor da variável for alterado.

           <passo... >
             <estados>... </states>
             <mapping>
                 <ui_element name="LEFT_TEXT">
                     <param name="content">#{left_option}</param>
                     <param name="text_color">#{option_color}</param>
                 </ui_element>
             </mapping></step>

O exemplo acima mostra que o mapeamento é adicionado como filho da marca step. Você pode adicionar qualquer número de tags ui_element aqui que fariam referência a um elemento da interface do usuário do seu layout. Neste caso name="LEFT_TEXT, o texto do botão representa a nossa primeira opção. Sempre que a variável #{left_option} for alterada em seu fluxo de trabalho, a interface do usuário mostrará um texto diferente nesse botão.

A ação ui_update

Outra opção para fazer alterações dinamicamente no layout é a ui_update ação. Esta ação executa uma alteração única no layout:

<ui_update id="change_left_button_text">
   <widget_params>
      <ui_element name="LEFT_TEXT">
         <param name="content">#{left_option}</param>
         <param name="text_color">#{option_color}</param>
      </ui_element>
   </widget_params>
</ui_update>

Na maioria dos casos de uso, é preferível apenas configurar um mapeamento em vez de usar essa ação. Há, no entanto, um caso de uso em que o mapeamento não funciona e você é obrigado a usar a ui_updateação:

O JavaScript dentro de um mapeamento é executado apenas uma vez, portanto, se você precisar usar JS e o valor for alterado durante o ciclo de vida da etapa, você terá que atualizar manualmente a interface do usuário usando a ui_update ação.

📌Designação

Até agora escolhemos entre duas opções textuais. Agora queremos adicionar imagens à mistura:

  • Adicione um elemento Image UI aos botões.
  • Adicione as imagens abaixo aos seus recursos de fluxo de trabalho (de dentro do editor avançado).
  • Você pode simplesmente arrastar e soltar as imagens da lista de recursos para o contentatributo da tag image.

 Componente de Download (Pré-Atribuição)

Ajuda & Recursos

Faça o download das imagens de dois itens.

Solução

Abaixo está uma solução exemplar:

    <Nome do botão="Apple" FocusOrder="0" Weight="0.5" Style="ImageButtonStyle">
      <Nome da imagem="LEFT_IMAGE" Weight="0.8" Margin="0,0,0,0" Content="§{apple.jpg}§" ScaleType="CenterCrop"/>
      <Nome do texto="LEFT_TEXT" Style="FooterButtonTextStyle" Weight=".2" MaxSize="30" Content="Apple"/>
      <Eventos/>
    </Button>
    <Nome do botão="Pera" FocusOrder="1" Peso="0.5" Style="ImageButtonStyle"><
      Nome da imagem="RIGHT_IMAGE" Peso="0.8" Margin="0,0,0" Conteúdo="§{pear.jpg}§" ScaleType="CenterCrop"/>
      <Nome do texto="RIGHT_TEXT" Style="FooterButtonTextStyle" Peso=".2" MaxSize="30" Content="Pera"/ >
      <Eventos/>
    </Botão>

 Componente de Download (Pós-Atribuição)

Na próxima lição, você aprenderá como tornar o componente configurável para que ele se torne reutilizável.