JaiswalTraining

Get the online training        


Get Best Tutorial on all major programing language


Corejava Servlet Jsp  Php  Hibernate  Ajax Web Service   Ejb2.1 Ejb3.0 Struts Struts2  JPA Spring Ibatis   JSF    JSF2.0  CoreJavaDesignPattern    Jquery  Flex J2EE-Design-Patterns  Jboss7  Maven  Contact Me                                                                                                                                                                        
            IGNOU SMU PTU Project                                           Training                                                                                                                              
              

Contact Us  0091- 9210721663         jaiswaltraining@gmail.com




Corejava
Servlet
Jsp
Php
Hibernate
Ajax
Web Service
Ejb2.1
Ejb3.0
Struts  
Struts2
JPA
Spring
Ibatis
JSF
JSF2.0
CoreJavaDesignPattern
Jquery
Flex
J2EE-Design-Patterns
Jboss7
Maven







Layout And Containers

Overview

  • All layout in Flex is done using containers. 
  • An <mx:Application> tag, which is in fact a container.
  •  Each container has a set of rules, which determines how any child tags will be laid out.
  •  The following table shows commonly used containers and the rules they use to lay out their children.




Absolute layout
  • Its positioning based  on a two-dimensional coordinate grid.
  • The top-left corner of any container represents the home coordinates of 0,0.
  •  Any item placed in the container is positioned in the grid relative to this point.
Benefits
  •  It gives you fine-grained control of how objects are located and sized.
  •  The container doesn’t waste effort arranging its children
Drawback
  • There’s a chance two items on the screen could be inadvertently positioned
    on the same real estate and overlap.
Mentioning that we want to work with absolute layout as given below.
<mx:Application  layout="absolute">
</mx:Application>



Example:-

absolutelayoutapp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute">
  <mx:Button label="OK"/>
  <mx:Button label="Cancel"/>
</mx:Application>

Run the application

Output:-
  •  The result of omitting coordinates when laying out items in absolute layout.
    These buttons overlap.


Now  providing values to the Button’s x and y properties

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute">
  <mx:Button label="OK" x="120" y="50"/>
  <mx:Button label="Cancel"
x="120" y="80"/>
</mx:Application>
  • Overlapping is fixed in absolute layout by explicitly defining a position.

Download Code


Constraint-based layout
  • Instead of specifying x and y coordinates to position components
    relative to  the container’s top-left corner, constraint-based layout has
    you position items relative to the edges of the container, or its center.
Benefits
  • You can configure components to maintain a relative position within the container,
    even if the user resizes their window.
constraints
  • Users can make the rules using this feature for the position of the container.
  • It works only  with the container
  • It is related to location(x,y coordinates) and size
  • To this location and size the  container  elements will get placed 
  • It can be used with Canvas,Box and Tile container  
  • Canvas has absolute position but the Tile and  Box has automatic layout for
    children and methods 
Setting the Constraint
  • Constraint can be  used only in  absolute Layout
  • Hbox and Vbox component doesn't have absolute  ayout .
    So, Constraint cannot be used within it
  • Canvas ,Panel  and Application can have children components .
    so we can use constraint over it

Basic constraints
  • top
    • The number of pixels between the top edge of the container
      and the top edge of the component
  • buttom
    • The number of pixels between the bottom edge of the con-
      tainer and the bottom edge of the component.
  • left
    • The number of pixels between the left edge of the container
      and the left edge of the component
  • right
    • The number of pixels between the right edge of the container
      and the right edge of the component.
  • horizontalCenter
    • The number of horizontal pixels between the center of the
      container and the center of the component.
  • verticalCenter
    • The number of vertical pixels between the center of the con-
      tainer and the center of the component.

Example:-
  • To set the constraints make a flex application
  • Take two labels  and two input text boxes
  • Select the 2nd  text box and set the constraints as shown below.

  • Set the constraints for vertical and horizontal position
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute" backgroundColor="#CCCCCC">
  <mx:Label text="Name" width="75" id="nme" top="5" left="5"/>
  <mx:TextInput id="txt" x="119" y="3"/>
  <mx:Label text="Comments" width="75" id="comt" top="106" left="5"/>
  <mx:TextInput id="comtxt" height="110" width="250" top="82" left="118"/>
  
</mx:Application>

Output:-
  • Using constraint-based layout, these components are
    positioned relative to the top-left of the page.






Download Code

Automatic layout
  • In Automatic layout you explicitly determine the location and layout of elements within a container. 
  • Using this, you are directing the container to position elements for you.
  • You can choose between two layout modes: 
    • vertical or horizontal.
  • The container places child objects, one after another, based on the selected direction.
Example:-

AutomaticlayoutApp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal">
  <mx:Button label="OK"/>
  <mx:Button label="Cancel"/>
  <mx:Button label="Abort"/>
</mx:Application>

Output:-
  • The application container automatically places these buttons side-by-side (horizontally).


Download Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical">
  <mx:Button label="OK"/>
  <mx:Button label="Cancel"/>
  <mx:Button label="Abort"/>
</mx:Application>


The layout property is set to vertical, the buttons are placed one above the other.


Variable and fixed sizing
  • All Flex visual components support variable and fixed sizing smilar to HTML
Variable sizing
  •  If you want a button to scale proportionally but not exceed 80% of the width of the
    host container, you can simply use the code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical">
  <mx:Button label="OK" width="55%"/>
  <mx:Button label="Cancel"/>
  <mx:Button label="Abort"/>
</mx:Application>



Fixed Sizing
  • Same as varibale sizing except instead of specifying percentages you use whole numbers
    to specify the dimensions of your component (in pixels).
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical">
  <mx:Button label="OK" width="55"/>
  <mx:Button label="Cancel"/>
  <mx:Button label="Abort"/>
</mx:Application>

Container

 Application container
  • All Flex programs have an Application container, but  because your application itself is rooted
    within it, you can only use one container of this type for each application you create.
layout property accet three value
  • absolute
    • Instructs the container to be use absolute positioning mode in which you explicitly
      position each child componen
  • horizontal
    • Instructs the container to automatically lay out its child components horizontally
  • vertical
    • Instructs the container to automatically lay out its child components vertically
Adding these values into code would look like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute">
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="vertical">
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="horizontal">

Box, HBox, and VBox containers
  • Using combinations of Box containers will give you quite a bit of flexibility in arranging
    components in your application.
  • These are particularly handy when you’re supporting a variable-width application
    such as when you intend the user to change the size of the window
    and you want Flex to calculate the best way to handle the layout.
BoxcontainerApp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
  <mx:Box>
    <mx:Button label="OK"/><mx:Button label="Cancel"/>    
  </mx:Box>
</mx:Application>
  • The Box container works automatically to handle the layout.

Download Code

Panel container
  • The Panel container is used as a top-level container for the entire application.
  • Vertical placement is the default layout for Panel containers

Example:

PanelTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Panel title="Panel Application" status="Yor are Welcome" 
        width="200">  
    <mx:Text text="Button"/> <mx:Button label="Hello"/>
  </mx:Panel>
</mx:Application>
  • By default components are placed vertically.

  • Using horizontal layout, these components were placed side-by-side.
PanelTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Panel title="Panel Application" status="Yor are Welcome" 
        width="200" layout="horizontal">  
    <mx:Text text="Button"/> <mx:Button label="Hello"/>
  </mx:Panel>
</mx:Application>

Output:-


Download code


Form container

  • Its purpose is to make it easy to lay out a form in your application.
  • It is similar to creating forms in HTML, but in Flex the Form container has mechanisms
    to place labels beside each of your  form input fields.
  • Unlike HTML, which requires form elements to be contained within an HTML form tag,
    the Flex Form container is purely for lay out and it is not necessary to have form
    items within the container.
  • The Form container is one of a collection of three tags:
    •  Form—The main container
    •  FormHeader—An optional component for adding section headers
    •  FormItem—A component that lets you associate text with each form input field
Example:

formtest.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Form>
    <mx:FormHeading label="User Information"/>
    <mx:FormItem label="First Name">
      <mx:TextInput/>
    </mx:FormItem>
    <mx:FormItem label="Last Name">
      <mx:TextInput/>
    </mx:FormItem>
    <mx:FormItem label="Mobile">
      <mx:TextInput/>
    </mx:FormItem>
    
  </mx:Form>
</mx:Application>

Output:
  • Form containers make it easy to layout input components and
    give each component a label.
 

Download code

Grid container
  • The Grid container is very similar to an HTML table.
  • There is a top-level grid tag to signal the start of the grid,
    a GridRow tag for entering rows, and a GridItemtag for
    entering data into each cell.
Example:



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#CCCCCC">
  <mx:Grid>
    <mx:GridRow>  //create first row
      <mx:GridItem>
        <mx:Button label="Previous"/>
      </mx:GridItem>
      <mx:GridItem>
        <mx:Button label="Home"/>
      </mx:GridItem>
      <mx:GridItem>
        <mx:Button label="Next"/>
      </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow>    
//create second row
      <mx:GridItem colSpan="2">
        <mx:Button label="Close" width="100%"/>
      </mx:GridItem>
    </mx:GridRow>
  </mx:Grid>
</mx:Application>

Output:-
  • Control panel showing the layout abilities of the Grid
    container, which produces results similar to HTML tables.


Download code

 Tile container
  • Tile containers are similar  to a Grid, except there’s no row or column spanning allowed.
  • Tile containers lay out child objects within cells, or tiles, that is very similar to laying out
    tiles on a floor
  • It  will create tiles as necessary when you have a dynamic number of items you want to display
    , such as a collection of image thumbnails.