Print article as PDF

Getting Started

Setting up

First thing we have to do is to download the ready to use FlexBuilder project. After that we start the FlexBuilder and import the modular project with:

File > Import... > Flex Builder > Flex Project

FlexBuilder import dialog
FlexBuilder Project import with selected modular zip file
modular project structure

Now you see the default modular project structure where everything is already setup to run. We have the following directories:

libs: Here are all linked libraries. At the moment we just have the modular.swc.

src: Here are all ActionScript source files. Right now there is the ProjectLibrary.as as the default application and the modules.WelcomeModule as a demo module.

www: Here resides the final webpage with its index.html file and the boot.xml that describes the flash application.

To run our modular application we have now to setup a new run configuration in FlexBuilder. To do so click on the green icon in the to left:

tl_files/documentation/images/SelectRunConfiguration.png

And select Run Configuration... Select Flex Application on the left and press New Configuration on the top. After that you can fill the setup screen like this:

Run configuration

Its important that you deselect the "Use defaults" Checkbox and change the path to the index.html file. Otherwise it will open the swf instead.

Now its time to Run our first application. It should open your webbrowser and display the index.html file which should look like this:

tl_files/documentation/images/modularStartScreen.png

tl_files/modular_template/help_hint.pngIf you get Error #2148 you can read here how to solve it.

Creating our first module

If everything works fine, you are ready for developing your own application. The modular logo you see is already a module that simply displays an image from a given url.

You can find the commented source of this module at src/modules/Image.as. But now we want to create our own module. Our new module will be able to display text passed from xml. To do this we create a new class in FlexBuilder with:

tl_files/documentation/images/createNewClass.png

The module/class name will be modules.Text so the package name is modules and the classname is Text. We also need to extend from the modular.core.module.DisplayModule as our module is visual and shown in the application. So the New Actionscript Class wizard looks like this:

tl_files/documentation/images/createTextClass.png

The nextstep is to add a textfield to our module where we can display some text like this:

package modules {
	import flash.text.TextField;
	
	import modular.core.module.DisplayModule;

	public class Text extends DisplayModule {
		
		private var textField:TextField;
		
		public function Text() {
			super();
			
			textField = new TextField();
			textField.text = "I'm your new module.";
			
			addChild( textField );
		}
	}
}

To make our module available in the ProjectLibrary.swf file we have to include our new module in the ProjectLibrary class like this:

package {
	
	import flash.display.Sprite;
	
	import modules.Image;
	import modules.Text;
	
	
	/**
	 * This is our project ...
	 * <p>To store a module ...
	 */
	public class ProjectLibrary extends Sprite {
		
		public function ProjectLibrary() {
			
			var temp1:Image;
			var temp2:Text;
		}
	}
}

Now our new text module is stored in the ProjectLibrary we can now go over to the boot.xml in the www folder where we instantiate the new module by adding a new module node and set the class attribute to modules.Text. Here is an example boot.xml configuration to use our new module:

<?xml version="1.0" encoding="UTF-8"?>
<ModularApplication>
	
	<Page>
		<Assets>
			<!-- include our main library. -->
			<Library path="swf/ProjectLibrary.swf" />
		</Assets>
		<Modules>
			<!-- here we add our new module -->
			<Module class="modules.Text" />
			<Module class="modules.Image" url="imgs/logo.png" />
		</Modules>
	</Page>
	
	<!-- you can keep the old stuff like PreloaderPage, Logger -->

</ModularApplication>

We rerun now our application that looks like this:

tl_files/documentation/images/newModule.png

We see both modules( modules.Image, modules.Text ) on top of each other. To have our new Text module below the logo we simply adjust the module definition in the boot.xml and set the y property to 100:

<Module class="modules.Text" y="100" />

To have our module even more customizable we create a property to adjust the text. To do this we create a new public property in our module that sets the text of the textfield:

package modules {
	
	import flash.text.TextField;
	
	import modular.core.module.DisplayModule;

	public class Text extends DisplayModule {
		
		private var textField:TextField;
		
		public function Text() {
			super();
			
			textField = new TextField();
			textField.text = "I'm your new module.";
			
			addChild( textField );
		}
		
		public function set text( value:String ):void {
			textField.text = value;
		}
	}
}

As we have now a public property we can adjust its value through the boot.xml like this:

<Module class="modules.Text" y="100" text="now fully dynamic" />

Thats it. Now you should be able to develop you own modular application. Good luck!

Comments

*
*
Please add 6 and 3.*