Estilos, Skins e CSS

EStilos, Skins e Temas no Flex

O Adobe Flex trabalha com conceito de hierarquia de estilos.

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 * AS Style definition* - Definições em classe AS externa ao código mxml

6 * MXML header Style definition* - Estilos definidos em tag Style no cabeçalho do código MXML

7 * MXML body Style definition* - Estilos definidos em tag Style no corpo do código MXML

8 Component definition AS or MXML - Atribuição de estilos por atributos diretos na tag do componente no código AS ou MXML

9 Method call - Atribuição de estilos via chamada de métodos em eventos dos programas

10 Runtime Style definitio - Execução e troca de folhas de estilos por referências externas

O último nível sempre é o que prevalece

Padrões de Estilos no Produto

Por questões de controle e capacidade de alteração e geração de novos Skins, todas as definições de estilos e skins devem estar encapsuladas no arquivo de estilo do framework.
Objetivos:

• 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.
• Para garantir possibilidade de geração e alteração de skins e temas.

IMPORTANTE: Necessidades de estilos devem ser encaminhadas aos usabilistas e arquitetos corporativos para que sejam implementadas retornando o nome da classe de estilo referente.

Estilos Personalizados Aplicáveis

.subfocalContainer
.datasulTabs
.mainWindow
.mainWindowTitle
.portletHeader
.portletButton
.PanelHeader
.TitleWindowHeader
.focalButton
.focalPopUpMenuButton
.TabControlBar
.TabHeaderTitle
.plain
.ToolbarButton
.LeftScrollingButton
.RightScrollingButton
.BigNumberInput
.DataGridHeader
.tabStyle
.leftButton
.rightButton
.upButton
.downButton
.closeButton
.popupButton
.menuButton
.selectedTabText
.today
.WorkspaceTabNavigator
.WorkspaceTab
.MessageContent
.MessageText
.WarningMessage
.WarningMessageTitle
.WarningMessageButton
.WarningMessageLinkButton
.WarningMessageHRule
.WarningMessageMoreInfo
.InfoMessageLinkButton
.InfoMessage
.LinkMessageText
.InfoMessageHRule
.InfoMessageMoreInfo
.ErrorMessage
.ErrorMessageTitle
.ErrorMessageText
.ErrorMessageButton
.ViewHeaderContainer
.ErrorMessageLinkButton
.ErrorMessageHRule
.ErrorMessageMoreInfo
.ErrorMessageControlBar
.MessageException
.MessageExceptionTitle
.MessageExceptionText
.TitleWindowSubHeader
.ComboBoxFilter
.AccordionHeader
.fontBold
.fontBoldRed
.fontBoldGreen
.fontBoldMid
.fontBoldRedMid
.fontBoldGreenMid
.fontBoldBig
.fontBoldRedBig
.fontBoldGreenBig
.ModeloRed
.toggleButton
.toggleButtonError
.toggleButtonText
.toggleFirst
.tooggleLast
.leftButton
.rightButton
.tabBarTab
.tabBarFirstTab
.tabBarLastTab
.tabBarSelectedTabText
.linkButtonInLinkBar

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