Criar seções no ASF é muito simples. Você pode fazer isso de diversas formas e pode escolher a que mais se ajusta ao seu modo de programar.

A única premissa para criar seções é que a sua classe da seção implemente a interface asf.interfaces.ISectionView. Os métodos requeridos dessa interface são:

• function init( p_section:Section, ...extraArgs ):void Esse método é executado após todos os arquivos de dependência + sons + dicionários + estilos informados no application.xml serem carregados. O próprio framework fica encarregado de executar esse método. Nele você tem disponível para usar o objeto Section com todas as propriedades/métodos (incluindo suas dependências, parâmetros e tudo mais) e os parâmetros adicionais enviados pelo método Navigation.openSection.

Essa interface herda os métodos de asf.interfaces.ITransitionable que herda os métodos de asf.interfaces.IDisposable. Sendo assim, você também precisa implementar os seguintes métodos:

• asf.interfaces.ITransitionable
  • function open( p_delay:uint = 0 ):Sequence Esse método é chamado pelo Framework após o método init ser chamado. Nele, você pode retornar um objeto asf.core.util.Sequence para fazer o encadeamento entre as seções e assim deixar as transições mais bacanas fazendo o framework esperar sua animação de entrada ser concluída para então continuar com a navegação.
  • function close( p_delay:uint = 0 ):Sequence Esse método é chamado pelo Framework para fazer a transição de saída da seção. Você pode implementar como desejar e criar animações como preferir para fazer sua seção sair. Você também deve retornar um objeto Sequence que, se não null, o Framework esperará a Sequence ser concluída para então continuar com a navegação.
• asf.interfaces.IDisposable
  • function dispose( ):void Nesse método você deve implementar as rotinas de "limpeza" de sua seção. Removendo listeners, itens adicionados e tudo mais. Assim como os outros métodos, o Framework se encarrega de executar esse automaticamente após a transição de saída ser completada.

Você pode implementar uma ISectionView de várias formas, a única premissa é que sua classe (além de implementar a interface ISectionView) extenda flash.display.Sprite (ou qualquer classe filha, claro).

Por exemplo, você pode num FLA exportar um MovieClip com todos os seus assets visuais num arquivo SWC, e extender esse MovieClip na sua ISectionView.

public class MinhaSecao extends MeuMovieClipExportado implements ISectionView
{
	///Implementação aqui
}

Essa é a forma mais simples de se criar seções no ASF.

Outra forma é usando um modelo com controllers.

	/*
	Classe que implementa a ISectionView e executada pelo Framework. Essa seria a classe informada no atributo 
	"viewClass" no application.xml
	Nota: A Classe UIView é uma classe útil do ASF que possui tratamento de memória. 
	Aconselhamos usar ela ao invés da classe Sprite.
	*/
	package com.netoleal.asf.test.view.sections
	{
		import asf.core.elements.Section;
		import asf.core.util.Sequence;
		import asf.interfaces.ISectionView;
		import asf.view.UIView;

		import com.netoleal.asf.sample.view.assets.AboutSection;
		import com.netoleal.asf.test.viewcontrollers.sections.AboutSectionViewController;

		public class AboutSectionView extends UIView implements ISectionView
		{
			private var controller:AboutSectionViewController;

			public function AboutSectionView( )
			{
				super( true );
			}

			public function init(p_section:Section, ...parameters):void
			{
				//A classe "AboutSection" é um MovieClip criado no Flash (.fla) e exportado num SWC que está adicionado ao projeto
				controller = new AboutSectionViewController( new AboutSection( ), p_section );
				p_section.container.addChild( controller.view );
			}

			public function open(p_delay:uint=0):Sequence
			{
				return controller.open( p_delay );
			}

			public function close(p_delay:uint=0):Sequence
			{
				return controller.close( p_delay );
			}

			public override function dispose( ):void
			{
				controller.dispose( );
				controller = null;
				super.dispose( );
			}
		}
	}

	//Classe Controller
	package com.netoleal.asf.test.viewcontrollers.sections
	{
		import asf.core.elements.Section;
		import asf.core.util.Sequence;
		import asf.core.viewcontrollers.TransitionableViewController;
		import asf.interfaces.ITransitionable;

		public class AboutSectionViewController extends AbstractSectionViewController implements ITransitionable
		{
			public function AboutSectionViewController(p_view:*, p_section:Section)
			{
				super(p_view, p_section);
	
				//Pega o título da seção do dicionário de textos
				view.$title.$text.text = section._.title;
	
				//Pega um texto carregado de um arquivo de texto que vem das dependências da seção
				view.$text.text = section.dependencies.getFile( "text" );
			}
		}
	}

	//Classe controller "pai"
	package com.netoleal.asf.test.viewcontrollers.sections
	{
		import asf.core.elements.Section;
		import asf.core.util.Sequence;
		import asf.core.viewcontrollers.TransitionableViewController;
		import asf.interfaces.ITransitionable;

		/*
		A classe TransitionableViewController é uma classe útil do ASF. Ela contém uma propriedade "protected" 
		chamada "transition" que já é uma instância pronta da classe "Sequence". Assim fica mais fácil de criar suas transições.
		Nesse exemplo, a transição de saída e entrada é um simples "fadeIn/fadeOut". Mas poderia ser qualquer animação que você queira fazer.
		Inclusive animações de timeline.
		*/
		public class AbstractSectionViewController extends TransitionableViewController implements ITransitionable
		{
			protected var section:Section;

			public function AbstractSectionViewController(p_view:*, p_section:Section)
			{
				super(p_view);
				section = p_section;
				view.alpha = 0;
				view.visible = false;
			}

			public override function open(p_delay:uint=0):Sequence
			{
				transition.notifyStart( );
	
				//As funcões "fadeIn" e "fadeOut" vêm no pacote "ASF_V2_ExternalClasses.swc" e estão no "top level".
				fadeIn( view, 333, p_delay ).queue( transition.notifyComplete );
				return transition;
			}

			public override function close(p_delay:uint=0):Sequence
			{
				transition.notifyStart( );
				fadeOut( view, 333, p_delay ).queue( transition.notifyComplete );
				return transition;
			}

			public override function dispose( ):void
			{
				section = null;
				super.dispose( );
			}
		}
	}

Depois que todas as dependências de sua seção forem propriamente carregadas (junto com arquivos de dicionário, css, sounds etc), o framework irá criar uma instância da sua classe e adicionará essa instância ao container informado no XML application.xml. Caso você não informe em que layer sua seção deve ser adicionada, o framework adicionará na layer informada no <sections>. Caso nenhuma layer for informada, ele adicionará no container principal da aplicação pai da seção.

Em seguida os seguintes métodos são executados em ordem:

init( p_section:Section, ... parameters ):void; >>> open( p_delay:uint = 0 ):Sequence;

Para fechar a seção a ordem de execução é:

close( p_delay:uint = 0 ):Sequence; >>> dispose( ):void; >>> [Seção removida do DisplayList]

Apesar do método open possuir o parâmetro delay, isso é apenas uma formalidade para respeitar a interface ITransitionable. O framework não chega a passar esse parâmetro.

Você consegue acessar todos os dados da sua seção a partir do momento em que o método init é chamado. Nele, você recebe o parâmetro p_section:Section. Esse objeto é a representação da sua seção. Com ele, você tem acesso a várias propriedades e métodos. Abaixo algumas principais:

• application A aplicação/seção pai da sua seção
• container O objeto que contém sua seção
• dependencies O objeto que contém todas as dependências carregadas. Você consegue resgatá-las através do ID informado no XML.
• dictionary ou _ O dicionário de textos da sua seção. Use para fazer a localização de idiomas de seu site.
• sounds Com essa propriedade você tem acesso a todos os sons da sua seção
• styles Os estilos StyleSheet da seção
• mainApplication A aplicação principal do site.
• navigation O objeto que contém a navegação e subseções da sua seção. Com ele é possível abrir e fechar subseções.

A implementação da ISectionView é muito flexível e permite a você, desenvolvedor, criar estruturas desde as mais simples até as mais complexas.