Flex layout Interface

Create the ecomm. mxml file.

Deploy e-commerce applications in Design Mode

Open the ecomm. mxml file, select the design view, and drag the applicationcontrolbar component into the view.

Set the attribute of this component in the view to dock: true (automatically top to 100% in width), height: 90; for example:

Add a canvas container to the controlbar and set the canvas attribute to width: 100%, height: 100%. For example:

You can add the desired component in the canvas.

First, drag a lable. The attribute is set to text: Flex, X: 0, Y: 0. Then, drag a lable. The attribute is set to text: grocer, X: 0, Y: 41. Drag a button and set the property to ID: btnviewcart, lable: View cart. Then add a button and set the property to ID: btncheckout, lable: checkout; drag a lable to the bottom right corner and set the attribute to text :( c) 2010 flex.
Grocer.

Drag an hbox and set its attribute to: width100 %, height: 100%; add vbox to hbox, and set its attribute to: width: 100%, height: 100%, ID: products, make sure it has been added to the hbox. You can view it on the layout panel.

Drag lable into the vbox, set the attribute to: ID: prodname, text: milk, drag a lable, set the attribute to: ID: Price, text: $1.99, and drag the button, set the property to: ID: add, lable: Add to cart. For example

Run the program,

We can see that the two buttons on the right are in the middle of the generated page, because the layout of our page uses "absolute position ".

Use constraints-based layout

Return to the design attempt on the page, select the checkout button, find constraints in the attribute, select the right alignment (corresponding to the parent container canvas), and change the value (offset) of X to 10.

Select the view cart button, find constraints in the attribute, select the right alignment (corresponding to the parent container canvas), and change the value (offset) of X to: 90.

Open the source code and try to view the source code of the two buttons. Both have a right attribute:

<Mx: button y = "20" label = "view cart" id = "btnviewcart" Right = "90"/> <br/> <mx: button y = "20" label = "checkout" id = "btncheckout" Right = "10"/> <br/>Add a vbox to the hbox. Set the property to ID: cartbox and width to null. Add lable in the vbox and set the attribute to your.
Cart total: $; add a linkbutton and set the property to lable: View cart. Run the page again, as shown below:

View status

The currently used attempt state is the basic attempt state, as shown below:

Create a new status, right-click base state, select new state, and enter the name cartview.

 

Select the newly created attempt status cartview (in the attempt status of cartview), and change the vbox attribute corresponding to products to the following: width: 0, height: 0, that is, hide, set the vbox width of cartbox to 100%.

The following code is provided in the source code:

<Mx: States> <br/> <mx: State name = "cartview"> <br/> <mx: setproperty target = "{products}" name = "width" value = "0"/> <br/> <mx: setproperty target = "{products}" name = "height" value = "0"/> <br/> <mx: setproperty target = "{cartbox}" name = "width" value = "100%"/> <br/> </MX: State> <br/> </MX: states> <br/>Start to control the attempt status below

Return to the Base State (Click base state), select the linkbutton corresponding to view cart, and add the onclick event, which is this. currentstate = 'cartview', that is, when we click the linkbutton of view cart, the current attempt state is changed to the cartview attempt state.

Return to the cartview attempt state, delete the linkbutton corresponding to the view cart, and add the linkbutton. The attribute is lable: continue shopping, on CLICK: This. currentstate = ''(indicating returning to the basic attempt state), add the DataGrid on the linkbutton corresponding to the continue shopping, and set the attribute to: width: 100%, as shown below

The source code of view cart's attempt is as follows:

<Mx: State name = "cartview"> <br/> <mx: setproperty target = "{products}" name = "width" value = "0"/> <br/> <mx: setproperty target = "{products}" name = "height" value = "0"/> <br/> <mx: setproperty target = "{cartbox}" name = "width" value = "100%"/> <br/> <mx: addchild relativeto = "{cartbox}" position = "lastchild"> <br/> <mx: linkbutton label = "continue shopping" Click = "this. currentstate = ''" id = "linkbutton2"/> <br/> </MX: addchild> <br/> <mx: removechild target = "{linkbutton1}"/> <br/> <mx: addchild relativeto = "{linkbutton2}" position = "before"> <br/> <mx: dataGrid width = "100%"> <br/> <mx: columns> <br/> <mx: datagridcolumn headertext = "column 1" datafield = "col1"/> <br/> <mx: datagridcolumn headertext = "column 2" datafield = "col2"/> <br/> <mx: datagridcolumn headertext = "column 3" datafield = "col3"/> <br/> </MX: columns> <br/> </MX: dataGrid> <br/> </MX: addchild> <br/> </MX: State> <br/>Run page, as shown below

Click View cart"