Brazilian Guys Attracted To

04 - Import Projects

Normal

All projects will be made throughout the course (to call it somehow) were uploaded to the Internet in order that, if the user wants to skip a chapter, can do so without thereby losing the continuity of your code. In this way the user can download the code for the step and continue with the course as if he had done all the chapters.

will now see how to import a project Flex. All projects that show the progress of the course are compressed in zip files named with the title of the chapter to which it belongs. So if I'm in the chapter "Introduction to MXML" we will download a file called "Introduction to MXML.zip" that contain the advance of the course to the chapter "Introduction to MXML. The downloaded zip file contains, inside another zip file called FlexAr.zip. This file is the project and NOT have to unpack!.

From FlexAr.zip have the file on your hard should proceed as follows:

• Remove the old project (if they exist).
• Import the new project.

Delete a project

To delete a project must follow the steps below. Go to the Outline view and right click on the project to delete and go to the "Delete." (See image 01)

Image 01: Menu to delete draft

We present a window to confirm the deletion of the project (see image 02). This window will give you 2 options:

1. "Also delete contents under [location project] "Delete the project completely. This means that our hard disk will not sign it.
2. "Do not delete contents" only removes the reference to the project. The same data can be recovered.

Image 02: confirmation window for deleting the project.

Select the first option and finally go to the Yes button. In this way we are removing the entire project team.

Import a new Project

Once the file on your hard disk FlexAr.zip must go to the menu as shown in image 03.

Image 03: Menu to import a project

We will open the import window project (see figure 04).

Image 04: Window for the import of project

In that window we click on the Browse button to locate the file FlexAr.zip. Doing so will open the image window 05.

Image 05: Window to locate the project.

Once found click "Open" to present us with the image window 06.

Image 06: import window, with the project loaded.

will notice that the route has selected project. Finally, going to the Finish button will finish the import process, seeing that the project is successfully imported (see figure 07).

Picture 07: Project successfully imported

Japanese Molesting Clips

03 - Introduction to MXML

What is MXML?

MXML one of the two languages \u200b\u200bused for creating Flex applications. It is a hierarchical programming language. This means that there is a node and this node will be hanging new nodes. In turn, each of the descendant nodes of the first node may have other descendants.

If the reader does not understand the concept of node, perhaps it is best to us to go more slowly.

What is a hierarchical structure and what is a node?

A node is the unit used when working with hierarchies. It may be useful to see a small graphic. (See figure 01)

Image 01: Hierarchy of Nodes

In image 01 you can see a tree or graph. As can be seen, the nodes (units within the tree) have a hierarchy. We shall see in the image 01 as follows:

• Node A has two children: Node B and Node C.
• Node A has no parent node.
• Node B has no children.
• Node B has as a parent to Node A.
• Node C has 2 children: Node Node D and E.
• Node C is father to Node A.
• Node D has no children.
• Node D is node C. father E
• Node has no children.
• Node E is node C. father

Perhaps there are more observations but with these reaches.

Definitions:

• Node A hanging all nodes. This means that Node A is the root the tree. A hierarchical tree can not have 2 roots.
• Nodes B, D and E do not have children, that is why they are called Sheets.
  

reread the definition of MXML to see if we have more clear now.

But then how do you create an application using MXML hierarchy?

All MXML applications start with a node in the same way the trees start at its root. In this case, MXML root node determines that it will create an application called Application . Application node will drop all child nodes for the case will be the components (buttons, dropdown lists, text fields, etc.).

The portion of code that will then correspond to the application that was created in the post entitled "Understanding the work environment (IDE)." In this chapter we have created an application that contains a label entitled "First Tag". Just that.

Code 01: First Application

analyze the code created a bit below but first we must talk a little bit of syntax (just slightly).

nodes in MXML, syntactically, are called tags. A tag begins with the symbol \u0026lt; and ends with the sign > . Viewing the code tags will notice that there are 4 total:

1. \u0026lt;? Xml version = "1.0" encoding = "utf-8"? >
2. \u0026lt; mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "absolute" >
3. \u0026lt; mx: Label text = "First Tag" / >
4. \u0026lt; / mx: Application >

nodes with child nodes, as is Node Application , function with a pair of tags: an open and closed. At the root node of the application is Application, therefore, has a couple of tags to indicate you have kids.
The opening tag begins with the symbol \u0026lt; and ends with > but the end tag starts with the symbol \u0026lt;/ and ends with > .

All tags that are between the start tag and end tag of a specific tag will become children of this. That is why the tag is a child node Label Application. The Label tag is between the start tag and end tag Tag Application.

However, if a node is a leaf of the tree, this will be represented by a single tag that begins with the symbol \u0026lt; and end with the symbol /> . This is the case Tag Label. The tag in question is a piece of the application because it does not contain a pair of tags opening and closing.

Thus

be arming our application. They go to the root node nesting components.

know that many questions arise in this instance but we have to be patient to answer them all. While the obvious question would be (or at least to me) "If I have more than one component how is that sorted as I want? ", well, that will be answered shortly, you first have to learn more.

Attributes nodes

nodes, besides having a name (Application, Label), have attributes. The attributes indicate properties of the components themselves. The clearest example in view is the Text attribute of the Label component. (See code 02)

Code 02: Component Label

The Label component's text property allows us to modify the text displayed by the Label component.
Similarly the Application component attributes. In 03 you can see that Application has a layout and a xmlns attribute.

Code 03: Application

The value of the attribute or property layout is "absolute" and the xmlns attribute is "http://www.adobe.com/2006/mxml ".

is possible that the xmlns attribute of the Application component is a little confusing. For now, ignore them. Most of the attributes that we see will be rather similar to the text of the Label attribute. Ie attribute = "value."

Attributes serve to modify any behavior, shape, size, position, etc. component.

Now if we are able to answer the following question:

If I have more than one component how is it sorted as I want?

We will continue the previous example to show how to add more components and are located within the application.

1. If we have not followed the various tutorials of progress until we can download the project by clicking here: Introduction to MXML
2. To learn how to import the project, see the chapter: Import Projects
3. After importing the project will open the application and enter the mode FlexAr.mxml "Source."
   
4. Between Label and the closing tag of the application, add a TextInput tag that has the property "x" equal to 100 (see code 04). This will make the tag is equal to 100 pixels to the right of the upper right corner of the application. The position is relative to the position of the parent node. Under the TextInput
5. add a Label tag with the attribute "text" as a "second label" and the attribute "and" equal to 25. (See code 05)
6. Under the latter add a TextInput with the attribute "x" equal to "100" and the attribute "and" with a value of "25." (See code 05)
7. Run the application. We'll see how they were placing the components.
   

Code

04

Code 05

And the word the left of the ":" for each MXML tag? We

in each MXML tag, a syntax like this: "mx: TextInput. We know that refers to the TextInput component that is used for text input, but ... What is the word that is on the left? The answer is

Namespace or namespace. In Flex you can create your own components. This means that we can have a component called "MiTextInput." Assuming that our custom component does not want to call it "MiTextInput" but simply "TextInput". How would the application to know which component is being referenced?

The answer is the namespace. We have 2 components with the same name from the namespace. That is, in our project we have "mx: TextInput" and we can have "foo: TextInput.

In the second line of code that we see the following: xmlns: mx = "http://www.adobe.com/2006/mxml" . Xmlns

is XML Name Space
mx is the name we put to
http://www.adobe.com/2006/mxml namespace is the location of the components with that namespace

Usually, when we create our own folder structure within the project will look like this:

xmlns: foo = "com.miproyecto.componentes .*" This

define that when you type "foo: "The application looks for all components are in the structure created by us .*

com.miproyecto.componentes
One last question to address in this post ...

In what is the first line of the application?

The first line of the application is:

This line indicates which version of XML that the browser has to interpret that character encoding is used.

are mandatory every time you create an application. There is not much to say about it, we call it bureaucracy. Yet we should not worry about it since the Flex Builder 3 is responsible for writing for us.

Finally! All these simple tasks we have given a small notion of what is MXML. I hope they have served and as I said before, if something is not clear, alert!

Vanessa Paradis Without Makeup

02 - Understanding the working environment (IDE)

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.

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

This will open a window with options for creating a new project. (See Figure 02)

Image 02

In this window you can specify the following options:

1. Project Name: The name under which contain all parties that make up our project.
2. 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.
3. 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.

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

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 .

• 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

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

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.

1. 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.
   
2. Go to Outline view and note that it has added a new component. (See figure 11)
   
3. Click on the new Label component in the Outline view as shown in Figure 11.
4. Observe the Properties view. We will see that the Text property is assigned the value "Label."
5. Replace the value "Label" in the Text property to "First label."
Clear
6. 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.
7. 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:

1. Right-click on the file FlexAr.mxml located in the Flex Navigator view and then go to the "Run Application" .
2. Click on the black arrow pointing down which is the button . Then go to the application you want to use.
3. must be other ways but with 2 reached! : P

Automatically open the browser that we have configured our application. (See figure 12)

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.

Victoria Styles Escort

01 - Introduction to Flex world

What is Flex?

Adobe Flex is a platform, framework, technology or whatever you call for building RIAs (Rich Internet Application). Rich Internet Applications (RIAs) are complete applications that run from a simple browser.

An example of an RIA is that Google Docs is not just a word processor that runs entirely from a browser and a very acceptable speed. Perhaps you are reading this ever wondered how it is that you can use a very powerful word processor from a browser and, moreover, that this start faster than the same Microsoft Office or Open Office you have installed on your computer. This is due to principle that handles all the web 2.0. Asynchronous calls . (Come to the bear is!?)

remember the sweat drops that fell on our faces when navegávamos Internet using a telephone modem. Before clicking on any link to a page 2 times and thought to do that here demanded that the page is reloaded peer to peer. If the header of the page was a picture of 500Kb (enough for a header image) the 500K plus all the rest of the page is reloaded what had long waiting time and unnecessary traffic on the network.

The interaction with the page was us by clicking on the buttons and the page changing shape. This type of web server calls are called Synchronous requests as we choose when to send information to the server and then we stayed waiting for the server to process our order and then change the page. Our Click us completely immobilized.

Here comes the definition! asynchronous requests allows us to continue our interaction with the page while the server processes the information. When the server finishes processing our data will tell us that the data has been received and we will handle this data as we see fit. Que tal?

In the example of a word processor, initially only charge us the cover of the application, and as we interact with the site will make small calls to the server that affect only a small small part of the page. Today

in the world of these rich Internet applications are a lot of competition. We have AJAX (Asynchronous JavaScript and XML), JavaFX , Microsoft Presentation Foundation, Open Lazlo and obviously Adobe Flex. All these are grouped in what became known as Web 2.0.

Flex, to run in browsers, Flash Player uses the (known through the pages made in flash and play videos from youtube). This means that any browser that can view youtube videos will be able to view and interact with an application made in flex.
The main advantages are basically noticed using flex 3:

1. is very, very simple create a page using its Flex 2 languages: MXML and Actionscript.
2. Pages created in flex are the same everywhere Internet browser (either Firefox, Internet Explorer, Chrome, etc)
   
3. Adobe created a small Google alliance and Yahoo to create a algorimo allowing indexing of SWF files . This means that pages will do to flex to be found from Google or Yahoo.
   

Anyway, as you know this blog is dedicated to learn a bit of the Flex platform, so I hope they can learn, nerd or geek in the blog. For my part I will try to overturn the modest knowledge I have about Flex so that they can use this powerful tool. I hope, too, do not lose the incentive and end all practices that I have thought of writing to date.