Estilos, Skins e CSS

EStilos, Skins e Tema no Flex

O Adobe Flex trabalha com conceito de hierarquia de estilos.
O último nível sempre é o que prevalece.
Nesta lógica temos a seguinte Hierarquia:
1 Skin - Recursos SWC que definem a "pele" ou aparência visual do componente e também caraterísticas alteráveis via CSS

2 CSS File - Alteração de características ou sobreposição de skin via arquivo de estilos

3 CSS Type Selector Classes (padrão) - Classe dentro do arquivo CSS que altera todos os componente de um tipo nativo flex por herança (ex.: todos botões, todos panels ...)

4 CSS Class Seletor Classes (customizadas) - Classes persononalizadas que precisam ser referenciadas em código pela propriedade StyleName

5 Style definition in AS - Definições em classe AS externa ao mxml

6 Style definition in MXML header

• • • • • • • Style definition in MXML body
              • Style definition in MXML component definition
                • Style definition via Function call
                  • Style definition in runtime using external files

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