{{ My Store }} Flex 3 + Mate version.

Let’s say we have a shop where we sell stuff for your house, like tables, chairs and couches. For the sake of this ‘tutorial’, we’ll stick to these 3 products.

We want an application to manage all our products in a database which we will link to our website so customers can browse and order our products.

So .. open Flex Builder and let’s get started.

Create a new project and call it mystore. In your src directory create a new directory called views. In this directory we will place all our interface related things. In the views directory, create a new MXML Component based on a VBox and call it MainUi.mxml. Add an ApplicationControlBar to it and in the ApplicationControlBar, add a label, a spacer and a button. Give the label the text ‘My Store’ , the spacer a width of 100% and the button label Products.

Now your MainUi.mxml file should look like this:

<?xml version=”1.0″ encoding=”utf-8″?>                <mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml” width=”95%” height=”100%“>   <mx:ApplicationControlBar width=”100%“> <mx:Label text=”My Store” /> <mx:Spacer width=”100%” /> <mx:Button label=”Products“ /> </mx:ApplicationControlBar>   </mx:VBox>

But when we launch our application, we only see a blank screen. This is normal because we haven’t imported our MainUi Component in our main application file yet. To do so, open the mystore.mxml file and put the following in it:

<?xml version=”1.0″ encoding=”utf-8″?>          <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:views=”views.*“>  <views:MainUi horizontalCenter=”0“ horizontalAlign=”center” verticalGap=”25“ /> </mx:Application>

Now when you launch the application you should see the applicationControlBar on top with the Label and the Button on it.

You can experiment with this all you want, give it a nice look, because I’m a programmer, not a designer, so all my apps look like crap, and stay tuned for more!