Trabalhando com estilos - netoleal/ASF2 GitHub Wiki
É muito comum usarmos documentos XML para configurar parâmetros referentes ao posicionamento de objetos, textos e outros parâmetros visuais. Mas o que faz sentido mesmo é usar arquivos CSS.
O ASF possui uma engine nativa que te ajuda a trabalhar com esses tipos de arquivos. Você pode usar para configurar caixas de texto, mas também pode usar para configurar qualquer outro parâmetro da visualização da sua aplicação.
O formato desse arquivo é exatamente o mesmo formato que o CSS que você está acostumado a usar em HTML. Para formatação nativa de texto, existem algumas limitações. Para mais detalhes veja esse documento (em inglês)
Exemplo de CSS personalizado
//Arquivo estilos.css
MainMenu
{
spacement: 2;
}
MainMenuItem
{
bgColor: "0xFFCC00";
}
No XML de configurações, você informa onde estão seus arquivos CSS:
<styles>
<style1 src="{base}css/estilos.css" />
</styles>
Então na aplicação, após o carregamento das dependências, você tem acesso a todos os estilos mesmo num mesmo local mesmo que você tenha informado mais de um arquivo CSS a ser carregado e/ou tenha escrito o conteúdo do CSS dentro do XML como a seguir:
<styles>
<style1 src="{base}css/estilos.css" />
<style2>
<![CDATA[
Title {
color: "0xFFFF00";
}
]]>
</style2>
</styles>
Para usar os estilos na aplicação, use a propriedade styles
.
var titleStyle:Object = app.styles.getStyle( "Title" );
var menuStyle:Object = app.styles.getStyle( "MainMenu" );
trace( titleStyle.color ); //Exibe 0xFFFF00
trace( menuStyle.spacement ); //Exibe 2
Você ainda pode buscar estilos para uma instância.
package
{
public class MainMenu extends Sprite
{
public function MainMenu( app:ASF )
{
var style:Object = app.styles.getStyleFor( this );
trace( style.spacement ); //Exibe 2
}
}
}