The Flex 3 IDE

The sample application in Flex, done/explained in the previous posts, was to give you an experience of what is actually done with Flex. We will now take a complete look at the Flex Builder itself and see what are the several advantages that we have been provided with to create web/desktop applications.

I am assuming you have Flex installed and have the example from the previous post opened. If not, you can create one quickly.

So, we have coded our sample web application to create two Panels with different X and Y values. Great! Now, let’s take a look at the design mode within the Flex Builder. You can find the Source Mode-Design Mode buttons just above the coding area as shown in the image below:

Flex 3 Source/Design Modes

Click on the “Design” button and you will get a preview of what we have coded as it would appear in the final output. Please refer the image below:

Flex 3 Design Mode

The design mode offers a great advantage by allowing us to manipulate the layout of the application by moving the elements around. Try to drag the Panel within the blue background area, which is our root node-the application tag. When you move the panel around, you can also observe that the X and Y values of the panel are changed automatically in the source mode. Cool, isn’t it? There is more!

Now, observe the left and right panels of the Flex builder in the design mode. To the left of the design is the Flex Navigator and below that is Components Panel [Everything in flex Builder is made up of Panels. Just to avoid confusion with the Panel Component, I will call the flex Builder Panels as Sections, going forward]. You can simple drag any component on to the stage of the layout and Flex Builder will automatically adjust the code for the new component. Try playing around with the new components – select a component, drag it and drop it on the stage. Go back to the source mode and check the code that is added because of the new component. I will concentrate on each component individually in my articles to come. For now, let’s just look at the Flex Builder.

So, you can drag components and place them wherever you want. Let’s say you you want to delete the existing two Panels and want to insert a new one.
Select the Panels, one by one as shown in the image below and press “delete”.

Flex Design Mode Editing

Now, go to the components section, identify the Panel component and drag it on to the stage to the top-left. When you drag a component, the Flex Builder shows you guidelines which help you in aligning components when you are working with more than one. We now have a new Panel on the stage.

Editing in Flex design mode

What if you want to add a Title to the Panel and also you want to create a button in the Panel? You need not go back to the source code and add a “Title” attribute. You have something called Flex Properties section to your right where you can change the values as needed

Flex Properties Section

You can change properties of the Panel(like color,title, height, width, etc) as per requirement. We also have a Layout constraints section within the Flex Properties that helps us to set the position of components in complex layouts, so that the layout remains the undisturbed even the application is re sized.

I will set the ‘Title’ in the Flex Properties section to Another example of Panel. And also, I will change the width and height to 450 and 200 respectively. Please refer the image below:

Editing the Flex Properties section

The final output in the browser would now look like this

Final output of the flex application

Related posts:

1. Flex 3 – A closer look at the MXML code in the sample application So far, we have created a sample application, which does...
2. Flex 3 – Beginner example I will now show you a basic “Hello World” example...
3. Flex 3 for beginners Lets start off with Flex 3, an Adobe product to...
4. Events in Flex What are Events and Listeners? Events are what make an...
5. CSS for Beginners Ever wondered what is behind a beautifully designed website? The...

Related posts brought to you by Yet Another Related Posts Plugin.