boot.xml

The boot.xml file is an xml files that describes the structure of the modular application. A very simple structure would look like this:

<?xml version="1.0" encoding="UTF-8"?>
<ModularApplication>
	<Page>
		<Assets>
			<Library path="swf/ProjectLibrary.swf"/>
		</Assets>
		<Modules>
			<Module class="test.Module" />
		</Modules>
	</Page>
</ModularApplication>

This description tells the modular application to display one page. But first it has to load the specified assets in the <Assets> section. Here it loads the swf file swf/ProjectLibrary.swf.

After the asset is loaded modular tries to display the modules declared in the <Modules> section. Here it will search for the class test.Module. If the class is found it will create a new instance and add it to the screen.

This example simply displays an instance of the test.Module on the stage.

Now its time to do some more complex applications:

<ModularApplication>
	<Page>
		<Assets>
			<Library path="swf/ProjectLibrary.swf"/>
		</Assets>
		<Modules>
			<Module class="test.Module" id="myModule" />
			<Module class="test.Module" x="300" height="400" />
			<Module class="test.Module2" />
		</Modules>
	</Page>
</ModularApplication>

Here we have again the same asset and we suppose that the swf stores two classes: test.Module and test.Module2.

So now we can create multiple instances of the same module as you see in line 7 and 8. We can specify an id to retrieve the module by actionscript. Read more about that here.

And we can set properties of the instance with simple xml attributes. In line 8 the x position and the height of the module are adjusted. This way you can set any public properties defined on the module class. Read more about that here.

The last thing to note here is that z-Order corresponds to the order in the xml. For example test.Module2 is covered by test.Module because line 7 is on top of line 9. Read more about depth control here.

So far you have seen all basic xml nodes except the <PageLoader> node which allow you to create nested pages as the following example shows:

<ModularApplication>
	<Page>
		<Assets>
			<Library path="swf/ProjectLibrary1.swf"/>
		</Assets>
		<Modules>
			
			<Module class="test.Module" />
			
			<!-- create a nested page loading container -->
			<!-- the pageloader itself is also a normal module -->
			<PageLoader x="300" y="100" id="content" >
				<!-- we display another page inside this PageLoader -->
				<Page>
					<Assets>
						<Library path="swf/ProjectLibrary2.swf"/>
					</Assets>
					<Modules>
						<Module class="test.ModuleFromLibrary2"></Module>
						<Module class="test.ModuleFromLibrary1"></Module>
					</Modules>
				</Page>
			</PageLoader>
			
		</Modules>
	</Page>
</ModularApplication>

Here is important to see, that the <PageLoader> is in the <Modules> because the PageLoader is nothing else than a normal Module. So you can for example set its x,y position.

Furthermore we have a normal structured page node inside the PageLoader which will be displayed automatically. The two modules at line 19, 20 are instantiated even when one module class is stored in the ProjectLibrary1.swf in the parent page and the other in the ProjectLibrary2.swf from the current page. modular automatically searches for classes through the whole hierarchy.

This feature of nested pages like a frameset is very practical if you need a container to load different pages into. You can easly access the pageloader and load pages also from actionscript like this snippet shows:

/**
 * on click we load another page into the pageloader with id=content
 */
private function onClick():void {
  var loader:PageLoader = Modular.getModule( "content" ) as PageLoader;
  var xml:XML = <Page><Modules><Module class='test.Module'/></Modules></Page>;
  var page:Page = new Page( xml );
  loader.load( page );
}

Downloads

Donations

boot.xml

Comments