BJC MDI Container Tutorial

Setting up the project

First create an empty Flash movie. Set the size to whatever you wan't, we're using the default 550x400. Drag the BJC MDI Container (AS2/MX2004 version) to the stage and resize it to the size of your movie. Assign the MDI Container an instance name, we named our MDI "myMDI".

Creating a basic form

Now we will create a basic form with a few user interface components. To add new content movie clip, click Insert -> New symbol. A dialog box will appear. In the dialog box, type 'myForm1' to the 'name' field. Then check the 'Export for ActionScript' and click the OK button.

Now you have a new symbol called myForm1 in the library (press CTRL+L to open the library). There is one thing that is good to know now: You can always add an invisible movie clip to the content clip background and use it as the bounding box of the window. So let's do just that. Select the rectangle tool from the Flash toolbox. Now open the Color Mixer panel and set the border to off, then select the fill and set the alpha to 0 %. Now draw a rectangle to the stage. The rectangle's top left corner should be in the zero point of the movie clip. A good size for the rectangle in this case would be 300x200 pixels. Now create another layer for the components.

Select the new layer and place two TextInput components, one NumericStepper component and one Button component to the layer. Assign the following instance names to the components: f_name, l_name, age and but_insert, respectively. Also add following titles to the TextInput components and the NumericStepper component: 'First name:', 'Last name:' and 'Age:'. Now your movie should look something like the following:



Now select the first frame and open the ActionScript panel. Write the following code:

but_test.onPress = function()
{
  if( f_name.text != "" && l_name.text != "" )
  {
    _root.myMDI.showMsgBox( "Name and age", 200, "Hello " + f_name.text + " " + l_name.text + "! You are " + age.value + " years old!", "Close" );
  }
  else
  {
    _root.myMDI.showMsgBox( "No no no...", 200, "Please fill in your name!", "Close" );
  }
}

This will be executed when the user clicks the button on the form.

Adding and showing the window

Now go back to the scene1, select the first frame and open the ActionScript panel. Use the addWindowID, moveWindowBy and showWindow methods to add, move and show the window. The following code does just that:

myMDI.addWindowID( "form1", "myForm1", "Name and age", null, null );
myMDI.moveWindowBy( "form1", 30, 30 );
myMDI.showWindow( "form1", false );

When using the null parameters in the addWindowID method, the window will determine the size from the content movie clip. In this case, the window will be the same size as the invisible bounding box that we created in the myForm1. Now the clip is ready for a test run:

Creating a Combo Box clip

Now we will create another window that contains only one Combo Box component. Again, start by selecting Insert -> New symbol. In the dialog box, name the new content clip to 'myForm2'. Remember to check the 'Export for ActionScript' and press the OK button.

In the new clip, first create invisible rectangle to the background. Now a good size would be 170x32. Then create another layer and drag the ComboBox component to it. Now select the ComboBox and add some labels to it (from the parameters/labels). Now we have it ready.

Adding the ComboBox window

Go back to the scene1, select the first frame and open the ActionScript panel. Add the following code after the existing code:

myMDI.addWindowID( "form2", "myForm2", "Vehicles", null, null );
myMDI.moveWindowBy( "form2", 50, 50 );
myMDI.viewWindowButtons( "form2", false );
myMDI.showWindow( "form2", false );

Now the movie can be tested again. The result can be seen below. It took about ten minutes to create this example, so the development is effective!