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







Forms And User input

Overview

Using Simple Controls
  • Controls are visual components that display information or provide the
    application with user interaction capabilities.
  • Flex control serve two purposes:
    •  All controls help  to create the visual presentation of the application.
    •  Interactive controls allow the user to provide  with information
      through data entry and mouse gestures.
  • Data  is displayed, and user input is  given, depending on the type of control  used.
  • Controls are placed within containers that define their layout.
  •  Examples of controls  include  TextInput,TextAreas, Buttons,
    and CheckBoxes,RadioButtos,Menu,Datagrid etc.
  • The mx.controls package contains the Flex user-interface controls.
Picklist controls

CheckBox
  • The CheckBox control consists of an optional label.
  • It is a small box that can contain a check mark or not.
  • It is  placed with the optional text label to the left, right, top,
    or bottom of the CheckBox.
  • On clicks a CheckBox control or its associated text, the CheckBox control
    changes its state from checked to unchecked or from unchecked to checked.
  • CheckBox controls gather a set of true or false values that are not mutually exclusive.
  • The CheckBox control has the following default characteristics:

Example:-

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Label x="119" y="104" text="Hobbies" fontWeight="bold"/>
  <mx:CheckBox x="119" y="139" label="Movie"  id="c1"/>
  <mx:CheckBox x="119" y="139" label="Movie"/>
  <mx:CheckBox x="119" y="169" label="Swiming" fontWeight="bold" id="c3"/>
  <mx:CheckBox x="119" y="139" label="Movie"/>
  <mx:CheckBox x="207" y="169" label="Music" fontWeight="bold" id="c4"/>
  <mx:CheckBox x="119" y="139" label="Movie" enabled="true" selected="true"/>
  <mx:CheckBox x="207" y="139" label="Reading" fontWeight="bold" id="c2"/>
  <mx:Button x="119" y="208" label="show" click="disp()"/>

<mx:Script>
  <![CDATA[
    import mx.controls.Alert;
    function disp():void{
      var ar:Array=new Array();
      if(c1.selected)
        {          
      Alert.show("u selected "+c1.label);    
        }
          
      if(c2.selected)
        {          
      Alert.show("u selected "+c2.label);    
        }
         if(c3.selected)
        {          
      Alert.show("u selected "+c3.label);    
        }
         if(c4.selected)
        {          
      Alert.show("u selected "+c4.label);  
        }
        c4.selectedField    
    }
  ]]>
</mx:Script>
  
</mx:Application>

Output:-




Download Code


ComboBox
  • This drop-down menu control displays the currently selected option.
  • When clicked drops a display list of options from which to choose.
  • ComboBox is the same as a <select> box in HTML.
  • Unlike its HTML equivalent, you can allow the user to free-form edit the
    selected text.

Example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:ComboBox x="73" y="75" click="" id="city" change="show()">
  <mx:dataProvider>
  <mx:String>Delhi</mx:String>
      <mx:String>Kolkotta</mx:String>
      <mx:String>Mumbai</mx:String>
      <mx:String>Chennai</mx:String>
      <mx:String>Patna</mx:String>    
  </mx:dataProvider>
  </mx:ComboBox>
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      function show():void
      {
        mx.controls.Alert.show("your selected city is"+city.selectedItem.toString());  
      }
    ]]>
  </mx:Script>  
</mx:Application>


Output:-

 
Download Code


Example:-2 Same above example with <mx:Array>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:ComboBox x="73" y="75" id="city" dataProvider="{a1}"/>  
  
  <mx:Array id="a1">
  <mx:String>Delhi</mx:String>
      <mx:String>Kolkotta</mx:String>
      <mx:String>Mumbai</mx:String>
      <mx:String>Chennai</mx:String>
      <mx:String>Patna</mx:String>
    
  </mx:Array>
</mx:Application>
Output:-


Download code

Text controls

  • The basic purpose for the UI of any application is to display text.
  • Flex provides a variety of components that allow you to capture and
    display textual information.
Text A simple control that displays textual information
Label Same as Text except the texual data it contains does not wrap.
It can be used for title in the application
TextInput Presents a single line text entry field. This is similar to <input type ="text">tag of HTML
TextArea Presents a multi-row  text entry field. This is similar to <textarea>tag of HTML
RichTextEditor A robust editor that allow the user to edit their text.

Date controls
  • Two data entry controls are designed to show or select a date value:
    •  DateChooser displays a calendar from which the user selects a date.
    •  DateField displays a TextInput and a small calendar icon.
      •  When either is clicked, a calendar is displayed for date selection.
The DateChooser control
  • The DateChooser control presents an interactive calendar that displays a month
    and year and allows the user to do the following:
  • Navigate forward and back one month at a time
  • Select a single date, multiple dates, or a range of dates with mouse operations
  • The following code declares a simple DateChooser control:
    • <mx:DateChooser id=”myDateChooser”/>




The DateField control
  • The DateField control presents the user with an input control and a small calendar icon.
  • By default, when the user clicks either the icon or the input, a calendar control pops up
    that looks the same as the DateChooser and allows the user to make his selection.
  • Unlike the DateChooser component, DateField allows only a single date value to be selected.
  • The following code declares a simple DateField control:
    • <mx:DateField id=”myDateField”/>
   




Example:- Showing date of birth with date field.

DateField1.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:DateField x="91" y="63" change="birthday()" id="d2"/>
  <mx:Label x="80" y="33" text="Select your BirthDate" fontWeight="bold" fontSize="13"/>
  <mx:Text x="91" y="111" id="t1" width="159" height="25"/>
  <mx:Script>
    <![CDATA[
      internal function birthday():void{
      t1.text=d2.selectedDate.toDateString();  
      }      
    ]]>
  </mx:Script>
</mx:Application>


Output:




Download Code


Buttons
  •  Flex offers an expanded range of button components
Button The standard, all-purpose button for accepting a mouse click interaction.
ButtonBar Dynamically generates a series of buttons based on an array.
LinkButton Flex’s version of an HTML link
LinkBar Similar to the relationship between a Button and a ButtonBar, the LinkBar is an easy way to create a series of LinkButtons.
PopUpButton A dual-button that combines the functionality of two buttons—the left side acts like a normal Button; the right side invokes another UI object 
PopUpMenuButton A descendent of the PopUpButton, it is geared to specifically create a drop-
down menu.

Example:-1  A Simple Button Creation

Button2.mxml
<?xml version="1.0"?>
<!-- controls\button\ButtonLabel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Button id="mybutton" label="MyButton!" width="100"/>
</mx:Application>

Output:-

Download Code

Example:- Using PopUpMenuButton

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    public function disp(mes:String):void
    {
      mx.controls.Alert.show('You just clicked on ' + mes);
    }
  </mx:Script>
  <mx:Panel width="100" height="100">
    <mx:PopUpMenuButton id="menubutton" 
              dataProvider="{['Sunday','Monday','Tuesday']}"
             
              itemClick="disp(' ' + event.label)"/>
  </mx:Panel>
</mx:Application>

Output:-
  • PopUpMenu- Button is similar to a
    Button and a ComboBox  wrapped into one.

Download Code

Radio Button
  • It is an option button.
  • You can select Only one at a time.

Example:-

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
  <mx:RadioButton label="cricket"/>
  <mx:RadioButton label="hockey"/>
  <mx:RadioButton label="chess"/>
  
</mx:VBox>

Output:-


Download Code