What is IDE?
The acronym comes from the IDE Integrated Development Environment which basically means: Integrated Development Environment. The IDE is a program that serves to facilitate the task of programming applications. In this case, the IDE used to create Flex applications is called Adobe Flex Builder. Currently developed Version 3 of the same and there is talk of a 4th.
Where can download?
To download the Flex Builder just go to the adobe page and find the appropriate link to download. Here is a direct link, but know that can change this url becoming obsolete over time.
Download Flex Builder
Installs How?
Just double click the file that you downloaded. Follow the steps and go. Do not be nothing installed previously.
How do I start?
When you first start the Adobe Flex Builder 3 are prompted to specify a Workspace. The Workspace is a directory within your operating system which will be stored all the projects that we believe with the IDE.
By default the chosen folder is: C: \\ Documents and Settings \\ User \\ My Documents \\ Flex Builder 3 , but the user can choose the location that best suits you.
In the Adobe Flex Builder is a necessary condition to have created a workspace to create our projects.
By default the chosen folder is: C: \\ Documents and Settings \\
In the Adobe Flex Builder is a necessary condition to have created a workspace to create our projects.
If we do not know where to start the first thing first is to create a project . As I said before all projects are going to end up in the folder you have defined as Workspace.
To create a new project to address the menu File-> New-> Flex Project (see Figure 01)
Image 01
Image 02
In this window you can specify the following options:
- Project Name: The name under which contain all parties that make up our project.
- Application Type: There are 2 types of applications that can be done by Flex Builder. Web applications that are executed with the Flash Player and desktop applications that run on Adobe Air.
- Server Technology: The technology to be used for the Back-end application. That is, for example, the business logic. It is a good practice to separate the visual part of the implementation of the business logic, which is why there are such projects. Anyway, you can communicate with a server using this option as "None" (None).
Complete a name for the project, let it be a Web application and not using an application server. Then click the Finish button to finish creating the new project. (See Figure 03)
Image 03
Once created our project we will see that on the left side of the IDE has created a directory structure for the new project . (See Figure 04)
Image 04
In this way we created a new Flex web project on which we can work on adding buttons, colors and all things done in a project Web. Before starting the chatter (chatter) you have to understand some of the parts of the IDE.
How work on IDE?
The IDE is composed of views. Each view has a specific function. For example in the picture we can see the light 04 "Flex Navigator". This view allows us to see the directory structure of each of the projects we've created.
We will give a broad overview of the views you can do to create the project, we will see new views as progress is made in the course.
Image 05: View Outline
Vista Problems (Picture 06): As the fence building the application we see that, many times, there will be syntax errors or semantics. In any case, these errors will be in the Problems view. The view will list all the problems that arise vallan providing an explanation of the problem, suggesting, at times, a possible solution thereof.
Image 06: View of Problems
Vista
editor area (Picture 07): The editor view edit area or area where the magic is released! The editing area is where you write your application code. Do not panic! This is probably the most frequently used light and we better friends with her. Unfortunately in this image I uploaded does not look good, but this view has two buttons at the top left. A button called Source and another called Design .
Image 07: Editing Area
Picture 08: Component View
Figure 10: View Properties
Image 04 In this way we created a new Flex web project on which we can work on adding buttons, colors and all things done in a project Web. Before starting the chatter (chatter) you have to understand some of the parts of the IDE.
How work on IDE?
The IDE is composed of views. Each view has a specific function. For example in the picture we can see the light 04 "Flex Navigator". This view allows us to see the directory structure of each of the projects we've created.
We will give a broad overview of the views you can do to create the project, we will see new views as progress is made in the course.
Vista Outline (Picture 05): The Outline view shows all the components that we added to the application. In this case, see the Tag Application only. This is because yet we have not added any component to our application. As us to go adding buttons, text fields and other components, we'll be going by completing the Outline view.
Image 05: View Outline Vista Problems (Picture 06): As the fence building the application we see that, many times, there will be syntax errors or semantics. In any case, these errors will be in the Problems view. The view will list all the problems that arise vallan providing an explanation of the problem, suggesting, at times, a possible solution thereof.
Image 06: View of Problems editor area (Picture 07): The editor view edit area or area where the magic is released! The editing area is where you write your application code. Do not panic! This is probably the most frequently used light and we better friends with her. Unfortunately in this image I uploaded does not look good, but this view has two buttons at the top left. A button called Source and another called Design .
- Source Button: Allows you to change the way you work Source (Fuente). This means that we have a text editor to make our Flex application.
- Desing Button: Allows you to change the way you work Design (Design). This means that application to design the most intuitive way possible, by dragging and dropping components.
Image 07: Editing Area Now switch to Design mode by clicking on the Design button. We can see that 3 new views are presented to us:
Vista Components (See Figure 08): You can see that, next to the Outline view, a new view with the Components name. This view contains a list of many Flex components. you can click and drag the editing area.
Picture 08: Component View Vista States (see Figure 09): The sight of the states discussed later when we see precisely States. Purpose of having only a first impression of the subject say that the states are used to change a page peer to peer and save all those changes made under the name of a state. ITEM (Later we shall see) . Know that it is an interesting sight!
Image 09: View
States
Image 09: View Vista Properties (see Imagen10): When selecting a product from the Outline view or clicking with the mouse on any component editing area in design mode, the Properties view (of property) will show the properties of the selected component. The properties or attributes of a component we use to change colors, fonts, sizes, events, muuuuuuy long positions and so on. It is therefore important to this view. The well used in Design mode.
Figure 10: View Properties Adding components to an application
Figure 11: New component added
We will desing mode to add a couple of components to application. This will give us a first approach to the creation of Applications in Design mode.
- Press the left mouse button on the Label component, hold it down, move the cursor mouse to the center on editing and, finally, release the button. You will see that it has added a Label component in the center of the application.
- Go to Outline view and note that it has added a new component. (See figure 11)
- Click on the new Label component in the Outline view as shown in Figure 11.
- Observe the Properties view. We will see that the Text property is assigned the value "Label."
- Replace the value "Label" in the Text property to "First label." Clear
- property values \u200b\u200bX and Y leave these properties blank. In doing so we will see how the component sits on the top left corner of the application.
- Save the application go to File-> Save or by pressing CTRL + S or clicking on the button with the icon
.
Figure 11: New component added How do I run my application?
To run the application there are several ways:
Figure 12: Our application running in the browser
To run the application there are several ways:
- Right-click on the file FlexAr.mxml located in the Flex Navigator view and then go to the "Run Application" .
- Click on the black arrow pointing down which is the button
. Then go to the application you want to use. - must be other ways but with 2 reached! : P
Figure 12: Our application running in the browser About hope this chapter will have served to familiarize a bit with Adobe Flex Builder 3 IDE.
The idea of \u200b\u200bthe post I do is that if there are concepts that are unclear or incorrect to make them notice me and can go little by little to improve the understanding of those who want to learn.
The idea of \u200b\u200bthe post I do is that if there are concepts that are unclear or incorrect to make them notice me and can go little by little to improve the understanding of those who want to learn.
0 comments:
Post a Comment