Trabalhando com estilos - netoleal/ASF2 GitHub Wiki

Trabalhando com Estilos

CSS

É 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.

Arquivo .css

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>

Resgatando e usando os estilos na aplicação

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
		}
	}
}
⚠️ **GitHub.com Fallback** ⚠️