Histórico da Página

EStilos, Skins e

...

Temas 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

...

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

5 * AS Style definition in AS* - Definições em classe AS externa ao código mxml

6 * MXML header 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

* - 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: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

...

• 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:

...