For one that has a rich component GUIDesign tools, the layout of the interface technology has become an important aspect of the interface beautification. FlexThere are two approaches to the functionality of a control: container (Control Layout), component (provides GUIsubstantive function processing). Using a container to manage the GUI hierarchically is the current trend, and Flex also uses this approach, subjectively we think that it has managed to group or classify the components of our interface through containers.
Next, I'll introduce the design of the various interface layouts by using a simple example.
Canvas Layout container
The
, which defines the area of a rectangular frame that is used to place the user's containers and controls. Unlike other components, you cannot allow flex controls. You must specify absolute or constraint-based To specify the location of the component. The absolute mode must specify x,y coordinates. constrain-based must specify side, Baseline, or Font face= "Times New Roman" >center anchors. The next describes two layout styles:
absolute mode : You can specify x,y coordinates to specify the location of each component in the container. The coordinates are designed relative to the upper-left corner of the canvas container. The upper-left corner of the container is the (0,0). The x.y can be positive negative, and if it is negative, the component is placed beyond the container but in the range. Of course, you can use the actionscript to complete the move operation, which involves event Event.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="219" height="230">
<mx:Canvas id="mycanvas" height="182" width="200"
borderStyle="solid" backgroundColor="white">
<mx:Button x="10" y="10" label="button1"/>
<mx:Button x="50" y="67" label="Button2"/>
<mx:Button x="92" y="129" label="Button3"/>
</mx:Canvas>
</mx:WindowedApplication>
|
The effect of the following figure:
constraint-based mode: This introduces the Vbox of canvas and the two combinations of Hbox . Canvas usually has x,y the location of the specified component,x,y The default should be 0. So if you don't specify x, then the component will be placed in the position of x=0 . This is likely to overlap. You can, of course, specify the layout of other patterns, such as Vbox, or hbox. This allows you to not specify the x,y .
| <?xml version= "1.0" encoding= "Utf-8"?>
<mx:windowedapplication xmlns:mx= "Http://www.adobe.com/2006/mxml" >
<mx:canvas
Width= "height=" "247"
Backgroundcolor= "#FFFFFF" >
<mx:vbox id= "VB"
left= "10"
right= "248"
Y= "26"
height= "153"
Backgroundcolor= "#A9C0E7" >
<mx:button label= "button1" width= "/>"
<mx:button label= "Button2"/>
<mx:button label= "Button3"/>
</mx:VBox>
<mx:hbox id= "HBox2"
left= "100"
right= "27"
Y= "26"
height= "153"
Backgroundcolor= "#A9C0E7" >
<mx:button label= "Button4"/>
<mx:button label= "Button5"/>
<mx:button label= "Button6"/>
</mx:HBox>
<mx:button label= "Button8" y= "/>"
<mx:button label= "Button7" y= "190"/>
</mx:Canvas>
</mx:WindowedApplication>
|
The effect of the following figure:
Vbox or hbox layout
The previous introduction of the Vbox or hbox embedded Canvas. In fact, they are a container that can be used independently. The effect is the same as the one shown in the above picture. So about VBox,Hbox will not be introduced. For example, good:
| <?xml version= "1.0"
<!--containers\layouts\vboxsimple.mxml
<mx: Application xmlns:mx= "Http://www.adobe.com/2006/mxml" "
<mx:vbox borderstyle=" Solid "
paddingtop="
Paddingbottom= "Ten"
paddingleft= "
" paddingright="
<mx:button id= "fname" label= "button 1"/>
<mx:button id= "lname" label= "button 2"/>
<mx:button id= "ADDR1" Button 3 "/>
<mx:combobox id=" state "
<mx:arraycollection>
<mx:string>combobox 1</mx:string>
</mx:arraycollection>
</mx:combobox>
</mx:vbox>
</mx:application>
|
The effect chart is as follows:
ControlBar Layout container
You can use controlbar and panel or titlewindow containers together. The advantage of this is that the components in the container can be shared by a panel or a titlewindow component. (Original:the use of theControlBar container with a Panel or Titlewindow container to hold components which can be shared By the other children in the Panel or Titlewindow container. ) For example:
| <?xml version= "1.0" encoding= "Utf-8"?>
<mx:windowedapplication xmlns:mx= "Http://www.adobe.com/2006/mxml" >
<mx:Script>
<! [cdata[
Private Function AddToCart (): void {
Handle event.
}
]]>
</mx:Script>
<mx:panel title= "My Application"
Paddingtop= "Ten" paddingbottom= "10"
Paddingleft= "Ten" paddingright= "ten" >
<mx:hbox width= "height=" >
<!--area for your catalog. -->
</mx:HBox>
<mx:controlbar width= ">"
<mx:label text= "Quantity"/>
<mx:NumericStepper/>
<!--use spacer to push Button control to the right. -->
<mx:spacer width= "100%"/>
<mx:button label= "Add to Cart"
Click= "AddToCart ();" />
</mx:ControlBar>
</mx:Panel>
</mx:WindowedApplication>
|
Effect Chart:
Applicationcontrolbar Container
This is primarily used to make the navigation bar at the top of the interface. This container menubar, Combox button and other components. As an example:
| <?xml version= "1.0"?>
<!--Containers\layouts\appcbarsimple.mxml-->
<mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml" >
<mx:Script>
<! [cdata[
Import Mx.controls.Alert;
]]>
</mx:Script>
<mx:xmllist id= "Menuxml" >
<menuitem label= "File" >
<menuitem label= "New" data= "new"/>
<menuitem label= "Open" data= "open"/>
<menuitem label= "Save" data= "Save"/>
<menuitem label= "Exit" Data= "Exit"/>
</menuitem>
<menuitem label= "Edit" >
<menuitem label= ' cut ' data= ' cut '/>
<menuitem label= "Copy" data= "Copy"/>
<menuitem label= "Paste" data= "Paste"/>
</menuitem>
<menuitem label= "View"/>
</mx:XMLList>
<mx:array id= "CMBDP" >
<mx:string>item 1</mx:string>
<mx:string>item 2</mx:string>
<mx:string>item 3</mx:string>
</mx:Array>
<mx:applicationcontrolbar id= "Dockedbar"
Dock= "true" >
<mx:menubar height= "100%"
Dataprovider= "{Menuxml}"
Labelfield= "@label"
Showroot= "true"/>
<mx:hbox paddingbottom= "5"
paddingtop= "5" >
<mx:combobox dataprovider= "{CMBDP}"/>
<mx:spacer width= "100%"/>
<mx:textinput id= "Myti" text= ""/>
<mx:button id= "Srch1"
Label= "Search"
click= "alert.show (' searching ')"/>
</mx:HBox>
</mx:ApplicationControlBar>
<mx:textarea width= "height="/>
</mx:Application>
|
Effect Chart:
Dividedbox, Hdividedbox and vdividedbox layouts
In fact,Dividedbox, and box is very similar, the only difference is that the box plate has been built into a separate bar, users can more have their own needs to adjust each child Box the size of the plate. The distribution of the sub Box Plate can be divided into two types, horizontal and vertical. Like what:
The implementation code is as follows:
| <?xml version= "1.0"?>
<!--Containers\layouts\hdivboxsimple.mxml-->
<mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml"
backgroundcolor= "White" >
<mx:Script>
<! [cdata[
Private Function Mygrid_initialize (): void {
Mygrid.dataprovider = [
{Artist: ' Pavement ', Album: ' Slanted and Enchanted ',
price:11.99, Comment: ' One of the their best. 4 stars. '},
{Artist: ' Pavement ', Album: ' Brighten the corners ',
price:11.99, Comment: ' My Favorite. '}
];
}
]]>
</mx:Script>
<mx:hdividedbox width= "100%" height= "100%" >
<mx:tree id= "Tree1"
Width= "30%" height= "100%"
Labelfield= "@label"
Showroot= "true" >
<mx:XMLList>
<menuitem label= "Products" >
<menuitem label= "Posters" isbranch= "true"/>
<menuitem label= "CDs" >
<menuitem label= "Pavement"/>
<menuitem label= "Pavarotti"/>
<menuitem label= "Phish"/>
</menuitem>
<menuitem label= "T-shirts" isbranch= "true"/>
<menuitem label= "Tickets" isbranch= "true"/>
</menuitem>
</mx:XMLList>
</mx:Tree>
<mx:vdividedbox width= "70%" height= "100%" >
<mx:datagrid id= "Mygrid"
Width= "100%" height= "100%"
Initialize= "Mygrid_initialize ();"
Change= "currentmessage.text=
event.currentTarget.selectedItem.Comment; " />
<mx:textarea id= "Currentmessage"
Width= "100%"
height= "60"
Text= "One of the their best. 4 stars. " />
</mx:VDividedBox>
</mx:HDividedBox>
</mx:Application>
|
