The model we are going to use can be found in the microsoft app hub website or just follow this link.  This model has its mesh parts named with the following architecture:

tank_geo
	r_engine_geo
		r_back_wheel_geo
		r_steer_geo
			r_front_wheel_geo
	l_engine_geo
		l_back_wheel_geo
		l_steer_geo
			l_front_wheel_geo
	turret_geo
		canon_geo
		hatch_geo

public class ModelObject
    {
        Vector3 m_position;
        Vector3 m_rotation;
        Matrix[] m_localTransforms;
        Matrix[] m_absoluteTransforms;
        Model m_model;
        float m_turretGeoRotation = 0;
        float m_canonGeoRotation = 0;

        public ModelObject(Model model, Vector3 pos)
        {
            m_model = model;
            m_position = pos;

            //Initiate the local tranforms array
            int boneCount = m_model.Bones.Count;
            m_localTransforms = new Matrix[boneCount];
            for (int i = 0; i < boneCount; i++)
            {
                m_localTransforms[i] = Matrix.Identity;
            }

            //Initiate the placeholder for the model transforms
            m_absoluteTransforms = new Matrix[boneCount];
        }

        public void Update(GameTime gameTime)
        {
            KeyboardState ks = Keyboard.GetState();
            if (ks.IsKeyDown(Keys.Down))
                m_canonGeoRotation += 1;
            if (ks.IsKeyDown(Keys.Up))
                m_canonGeoRotation += -1;
            if (ks.IsKeyDown(Keys.Left))
                m_turretGeoRotation += 1;
            if (ks.IsKeyDown(Keys.Right))
                m_turretGeoRotation += -1;

            //We transform directly the bone that we want to transform locally
            m_localTransforms[9] *= Matrix.CreateRotationY(MathHelper.ToRadians(m_turretGeoRotation));
            m_localTransforms[10] *= Matrix.CreateRotationX(MathHelper.ToRadians(m_canonGeoRotation));

            m_canonGeoRotation = 0;
            m_turretGeoRotation = 0;
        }

        private void CalculateAbsoluteTransforms()
        {
            //Copy all the transformations imported on the model
            m_model.CopyAbsoluteBoneTransformsTo(m_absoluteTransforms);

            //Iterate trough all of the bones transformations and apply the
            //local transformations that we have made to the model.
            ModelBoneCollection bones = m_model.Bones;
            for (int i = 0; i < bones.Count; i++)
            {
                m_absoluteTransforms[i] = m_localTransforms[i] * bones[i].Transform;

                ModelBone bone = bones[i];
                //If the actual bone has a parent then we have to transform it so that
                //it keep relative to his parent.
                if (bone.Parent != null)
                {
                    int parentIndex = bone.Parent.Index;
                    m_absoluteTransforms[i] *= m_absoluteTransforms[parentIndex];
                }
            }
        }

        public void Draw(Matrix projection, Matrix view)
        {
            //When we want to draw the model we need to apply the local
            //transformations before we apply the world transformation to each mesh on the model
            CalculateAbsoluteTransforms();
            foreach (ModelMesh mesh in m_model.Meshes)
            {
                foreach (BasicEffect effect in mesh.Effects)
                {
                    effect.Projection = projection;
                    effect.View = view;
                    effect.World = m_absoluteTransforms[mesh.ParentBone.Index] * Matrix.CreateTranslation(m_position);
                    effect.EnableDefaultLighting();
                }
                mesh.Draw();
            }
        }
    }

I’m developing a web application with this simple file structure:

file structure

As you can see I have a modules directory and an “admin” module. This app consists in a web store for motor electrical parts and it will have and administration part that will allow the client insert new products, manage stock, manage clients, manage requests, etc, and the default module is for searching products and present products basically. The main problem for me was how could I setup zend in order to recognize my module and after some googling  i found some answers:

• http://monzee.wordpress.com/2009/06/08/modular-applications-in-zf-1-8/
• http://www.zfforums.com/zend-framework-general-discussions-1/general-q-zend-framework-2/boostraping-modules-models-all-fun-3068.html
• http://blog.vandenbos.org/2009/07/19/zend-framework-module-specific-layout/
• http://framework.zend.com/manual/en/zend.controller.front.html
• http://framework.zend.com/manual/en/zend.application.available-resources.html#zend.application.available-resources.frontcontroller

So basically you can incorporate your modules with the rest of the application with the Zend_Controller_Front using setControllerDirectory, addControllerDirectory or through the Zend_Application Resources but basically it is the same as with the Zend_Controller_Front however you use the Zend_Application and the config file.

So where would you do that? Simple, in your application bootstrap file!

Let’s see some examples:

• Let’s do it with the Zend_Front_Controller API. In your bootstrap if you make one function protected and with the name starting with _init then it will be executed automatically as if it was an resource ( check out ) :

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap{
protected function _initSetupModulesDirectories(){
$front = Zend_Controller_Front::getInstance();
$front->setControllerDirectory(array(
'default' => APPLICATION_PATH . '/controllers',
'admin' => APPLICATION_PATH . '/admin/controllers'
));
}
}

• The next example is basically the same but not using directly the Zend_Controller_Front class, instead it uses the frontController  resource!

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap{
protected function _initSetupModulesDirectories(){
self::$frontController = $this->getResource('FrontController');
self::$frontController->setControllerDirectory(array(
'default' => APPLICATION_PATH . '/controllers',
'admin' => APPLICATION_PATH . '/admin/controllers'
));
}
}

• Now using addControllerDirectory():


class Bootstrap extends Zend_Application_Bootstrap_Bootstrap{
protected function _initSetupModulesDirectories(){
$front = $this->getResource('FrontController');
$front->addControllerDirectory(APPLICATION_PATH . '/admin/controllers','admin');
}
}

• And for the last but not the least let’s use the application.ini to load the modules directory and plus set up resource autoloaders for models, forms, services, etc:

Open up your configuration file (application.ini) and add this:
resources.modules = ""
resources.frontController.moduleDirectory = APPLICATION_PATH "/modules"

This will initialize the module resource plugin and set the modules directory! Next what we need to do is create a bootstrap file for your module directory (application/modules/admin/Bootstrap.php).

It must be something like this:

class Admin_Bootstrap extends Zend_Application_Module_Bootstrap{
}

Pay attention the the class name, it starts with Admin_, this is named the PEAR convention for class names, don’t forget about it!

And finally in the application bootstrap class just add:
protected function _initAutoload()
{
new Zend_Application_Module_Autoloader(array(
'basePath' => APPLICATION_PATH,
'namespace' => '',
));
}
This will initialize the resource autoloaders for the default module. (An explanation of autoloaders here)

I hope this can help you and give you and idea with modules and boostraping. Just a quick tip, be carefull with typing errors, do not be like me! I’ve been 3 hours around one problem and the real problem was that I created a virtual host on apache (working with wamp) and there I’ve specified that the directory was for C:\wamp\www\mypage\public however the real name of the directory was Mypage with a big M and this was enough to let htaccess block all the request for http://mypage/index/ or http://mypage/admin ….

Happy coding and happy personal life xP

So let’s just start…

Create a new project on Flash Builder(if you don’t have it yet you can grab the 30 days free license at adobe website) and lets create three folders: Components, Events and Skins. This way we can get things in order. First lets start with the skins, to what we need to achieve, we need to custom skins, one for each button and one for the background of the menu, right?^^

For the button skin we have this little amount of code:

If you come from Flex 3 you might be wondering, what the heck are those mxml tags?oO Calm down, calm down! As you might know, Flex 4 supports fxg so we can use fxg tags and this is suppa duppa cool because you can jump to you Adobe Illustrator, draw whatever you want, export for .fxg, open that image with any text editor, copy that code,past it to flash builder, run it and voilá, you get that image rendered in your application!Adding to that we can even use binding methods with it so that, for example, we get some dynamic width or height!Let’s just see what this does:

first of all you can see this is a Skin type component, and this let us assign this skin to the skinClass property of any skinnable component.But how do we specify that this this skin is for one Button?Simple, you just need to add the metadata HostComponent.

As you know,base Button has 4 states: up, down, over, disabled, but we are going to use the toggle Button in order to get the selected state, so we end up with this more states: upAndSelected, overAndSelected, downAndSelected and disabledAndSelected.

Next we start the real “drawing” and we want to create one background filled with a gradient:

As you could see, every buttons have a separator between them.If you want the button to be dynamic then we need to get a solution to make those separators appear automatically, and we do this by creating a right margin on each button..simple uh?xP

And for the last, the dynamic text on the button:

What we do to get dynamic text is just make a reference to the hostComponent.label property, see that our HostComponent makes reference to the togglebutton class, and the ToggleButton component has one property named label, so all we have to do is to bind that label to the text property of the SimpleText component and we do that with text=”{hostComponent.label}”.You can see that the text color is black however we want to make it red when we mouse over it or select it, and we can do this by simple do color.nameOfTheState = “#wantedColor”.

For the button skin, thats it! Next is the skin for the background.

Well, this is pretty much the same as the button skin so I wont explain the code.

Now we create a new component based on the SkinnableContainer and place it on the Components folder. This is going to be the content holder for the buttons that makes our menu.

I think the comments on the code say it all, however don’t hesitate to ask me anything!

And for the last the custom event:

Now all you have to do in order to get it working is this:

That’s it, hope you liked

This loads an XML that contains the source path for the image and a title for the image so that when you click in one image it flip over the y axis and shows the title.