My flex journey (2) Layout containers

 

Sorry, blog updates are slow, so I updated flex and so on every one day.ArticleAfter all, I was just getting started with Flex. Well, I don't need to talk much about it. Let's start learning in Chapter 2.

Most of the time, we place data in different regions to process different data, so how do we plan the data? Obviously, we can use containers to tolerate this data, so we have involved the concept of layout containers. Similar to HTML pages, div + CSS is used to divide different regions and beautify them.

Create an applicationProgramProject (for more information, see Chapter 1)

Open the main application file, such as my demo. mxml, and switch on the stageSource codeAttempt, initialCodeAs follows:

  <?XML version = "1.0" encoding = "UTF-8"?>
<MX: ApplicationXmlns: MX= "Http://www.adobe.com/2006/mxml"Layout= "Absolute">
</MX: Application>
 

We can see that 1st nodes describe this file based on the XML file format and indicate the encoding. As follows:

<? XML version = "1.0" encoding = "UTF-8"?>

At the same time, we can see 2nd nodes, which start and end with <mx: Application> </MX: Application>. This is a main container that can contain sub-containers or other components, controls. By default, the layout method in the main container is layout = "absolute", which is absolute positioning. Of course, you can select verticl (vertical) as the layout method of the main container ), horizontal (horizontal) Layout mode.

First, let's learn about the panel container, find layout in the components view in the lower left corner of the form, find the Panel container in it, and drag it to the stage,

 

This panel is a container that can contain other content or containers. Now this container has nothing by default. Of course, we can add some attributes for it and select this container, some attributes and events of the container can be found in the right-side attribute panel.

We can specify some values for this container: ID, title, width, height, rounded corner, bordercolor, layout method in the container (also verticl, absolute, horizontal) alignment with objects in the container. Of course, you can slowly view these attributes and events. You can find that there are three switching cards in this property panel.

 

You can switch to view some features of this container.

We specify some values for this container: ID: Panel/Title: This my panel. At the same time, we add two lable controls in this container and attach the values to them ,:

You can take advantage of your initiative and add anything at will.

Next, we will introduce a container closely related to the Panel container: The controlbar container is usually placed in the panel container, which will be automatically added to the bottom of the Panel container and act as the container.

Drag a controlbar container to the Panel and you will see it automatically layout to the bottom of the Panel. At this time, you can add two buttons to the controlbar.

The source code of the entire page is very concise as follows:

 

 

Code

  <?  XML version = "1.0" encoding = "UTF-8"  ?>  
 <  MX: Application  Xmlns: MX  = "Http://www.adobe.com/2006/mxml"  Layout  = "Vertical"  Cornerradius  = "13"  >  
  <  MX: Panel  Width  = "250"  Height  = "200" Layout  = "Vertical"  Horizontalalign  = "Left"  ID  = "Panel"     Title  = "This my panel"  Color  = "# 03181d"  Bordercolor  = "# Eb1717"  Cornerradius  = "0"  Fontweight = "Bold"  >  
  <  MX: Label  Text  = "Firstname"  />  
  <  MX: Label  Text  = "Lastname"  />  
  <  MX: controlbar >  
  <  MX: button  Label  = "Button"  />  
  <  MX: button  Label  = "Button"  />  
  </  MX: controlbar  > 
  </  MX: Panel  >  
  </  MX: Application  >  
 

 

Next we will learn the other two containers: hbox and vbox:

We can create a new main file: Right-click the SRC folder New-> mxml application, or you can

<Mx: Application> </MX: Application> codes are commented out and added again, because FLEX can only run one master file or master controller file at a time. We switch the source to try, select the text to be annotated, and press Ctrl + Shift + C, so the code is commented out. Generally, we comment out the code instead of deleting the code, after all, it may be used in the future, and the annotated code compiler does not care about it or occupy the memory overhead.

We changed the layout method in the application to layout = "horizontal". At the same time, we found the H box container from layout and dragged it to the main container. The following pop-up is displayed:

 

It asks you whether to set the container width to 100% and Height: fit to content height to adapt to content changes. We set the width and height to 100%. You will see that the hbox is full of the entire main file area.

We will drag another hbox container to the hbox container. The dialog box still pops up asking you to set it. We will set it:

At the same time, modify the background color of the container to facilitate our observation. At the same time, we drag a vbox container to the applicaton container (note that it is not in the hbox just added), and set the width and height (50%, 100%) and the background color.

Of course, we can also add two container panels in the red area, that is, vbox,

You will find that the vbox layout is vertical, that is, the objects in the vbox are arranged vertically. On the contrary, the hbox layout is horizontal, that is, the objects in the hbox are arranged horizontally.

We can select appropriate containers as needed to layout our application interface.

Next, we will learn another container. Form container. May we say this is not a form? How is a container? Of course, it is a container function in flex, used to layout objects, such as some information to be filled in, similar to some information to be filled in the form. However, this is definitely not a form. After all, the form function collects user-filled data and sends it to the server. This is a container and does not have the above functions.

Let's take a look. Drag a form to the yellow area, that is, in the hbox container. Similar to vbox, a selection box is displayed for you to set and change the container width and height. Let's confirm it by default!

Now we will fill in the Form for user input.

Drag a textinput control in controls to form, and you will find that it seems to be filled with labl labels and textinput. Otherwise, you will find that switching the source code:

 

 
  <MX: formitemLabel= "Label">
<MX: textinput/>
</MX: formitem>
 

 

In fact, this is the label of a form item. Of course, it saves us the trouble to add lable. Of course, the textinput control also supports the Password box function and sets the attributes of textinput: dispay as Password = "true"

Of course, you may also need to prompt the user that this text box must be filled in, Mark "*" as in the general registration page, so we can select formitem to find required in the right attribute panel: and set it to true.

We can try other controls, such as radionbuttongroup, which will pop up automatically:

This is a single-choice button group. You can name this single-choice button group. By default, there are two single-choice buttons. You can add several more single-choice buttons. Of course, you know, in the single-choice button group, you can only select a single button because they are mutually exclusive. Select a single-choice button and select selected = "true"

We also add a text control. Unlike lable, it can represent multiple lines of text, while lable can only represent one row. We can add it to textarea. This segment can provide multiple lines of input text. Of course, Rich Text controls richtexteditor are also available. Of course, you can avoid them in formitem, so you can selectively remove formitem as the parent container.

You can add it to view the effect.

Now, let's talk about other containers, such as navigation containers, in the next section.