Estilos, Skins e CSS

Quando usar

O Adobe Flex trabalha com conceito de hierarquia de estilos.
O último nível sempre é o que prevalece.
Nesta lógica temos a seguinte Hirarquia:

• Skin
  • CSS File
    • Type Selector Classes (padrão)
      • Class Seletor Classes (customizadas)
        • CSS definition in
          • CSS Section in MXML

Qualquer programa sendo executado pelo framework deve seguir os estilos definidos pelo recursos de estilos do Datasul Framework Flex. Para habilitar essa característica em seu componente não é necessário qualquer instrução MXML nos fontes dos mesmos.

• Para seguir os padrões propostos de design e ergonomia das interfaces geradas;
• Para garantir interfaces que atendam os padrões definidos e garantir evolução conforme atualização da plataforma;
• Para garantir consistência entre as diversas interfaces projetadas.

Estrutura

• Através do arquivo main.css dentro da pasta style de cada projeto;
• A estrutura deve ser seguida conforme exemplos dentro do main.css.

Boas Práticas

Um estilo customizado somente poderá ser utilizado em componentes quando o objeto de negócio em si exclusivamente possuir uma característica única. Deverá ser adicionado ao código Flex MXML uma sessão de estilo em modo incorporado como no exemplo abaixo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:Style>
          Button {
               color: #ffffff;
               roll-over-color: #678BD1;
          }
      </mx:Style>
      <mx:Script>
          <![CDATA[
               import ...

Assim sendo sua sessão de estilo automaticamente já estará herdando em cascata os estilos definidos pelo Datasul Framework Flex e você somente complementará com a característica específica de seu componentes de interface.

Referências

• http://designinginterfaces.com/

Veja Também