Flex3 Quick Start: Build a simple user interface and use controls

From: http://www.airia.cn/FLEX_Directory/using_controls/Flex3 Quick Start: Build a simple user interface using controls [Source: adobe.com]
[Author: Adobe DEVNET]
[Date: 08-08-01]
[Browsing: 1018
Times]

Use Controls

In Adobe Flex Model-View Design Mode, user interface components represent views. Mxml supports two types of user interface components: Controls and containers. A container is a rectangle that contains controls and screens of other containers. Controls are form elements, such as buttons, text fields, and list boxes.

When there are many types of flex controls, this Quickstart describes three most common controls: text-based controls, button-based controls, and list-based controls.

• Use text-based controls
  
  
• Use button-based controls
  
  
• Use List-based controls
  
  
• Use text-based controls to display text and/or receive text input from users.

The text-based controls provided in flex include label, text, textarea, textinput, and richtexteditor.
Control. The textinput and textarea components can both display text and accept user input, while the label and text controls are only used to display text.

The text and textarea controls can display cross-line text, while the label and textinput controls are used to display single-line text.

You can use the richtexteditor control to enter, edit, and set the text format. You can apply text format and URL links by using the child Control located at the bottom of the richtexteditor control.

All text-based components have a text attribute, which can be used to set the text to be displayed.

Example

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application
Xmlns: MX = "http://www.adobe.com/2006/mxml
"
Viewsourceurl = "src/controlstextbased/index.html"
Layout = "horizontal" width = "380" Height = "320"
Horizontalalign = "center" verticalalign = "Middle"
>
<Mx: Panel
Title = "Leave a comment"
Paddingbottom = "10" paddingtop = "10"
Paddingleft = "10" paddingright = "10"
>
<Mx: Text
TEXT = "Fill out this form to leave us a comment :"
Width = "100%"
/>
<Mx: Label text = "name:"/>
<Mx: textinput id = "username"/>
<Mx: Label text = "Email:"/>
<Mx: textinput id = "useremail"/>
<Mx: Label text = "comment:"/>
<Mx: textarea id = "usercomment" width = "100%"/>
</MX: Panel>
</MX: Application>

 

Result

To view all source code, right-click the flex application and choose View Source code from the context menu ".

Use button-based controls

The buttons of components include buttons, linkbutton, checkbox, radiobutton, and popupbutton controls.

The button control is a common rectangular button. The button control looks like it is pressed,
There is a text label, an icon, or both. You can choose to specify the appearance of each of the buttons. You can create a common button.
Control or a switch button control. As long as you press the mouse button after the selection, the normal button control will remain pressed. Switch button
The widget remains in the pressed State until you select it again.

When a user selects a control, the button usually uses the event listener for operations. When you click the button control and the button control is enabled, it sends a click event and a buttondown event.

The linkbutton control creates a single-line hypertext link that supports optional icons. It is basically a button control without borders. You can use the linkbutton control to open a URL in a web browser.

The checkbox control is a common graphical control that can contain a check mark or unselected (empty ). True or
Where the value is false, you can use the checkbox control. You can add text labels to the checkbox control,
Place text labels on the left, right, top, or bottom of the check box. FLEX will crop the label of the checkbox control to fit the control boundary.

With the radiobutton control, you can make a single choice within a group of mutually exclusive options. Radiobuttongroup
Controls consist of two or more radiobutton controls with the same group name. This group can be referred to by <mx: radiobuttongroup>
The Group created by the tag. The user selects only one member of the group at a time. Selecting a member of an unselected group removes the currently selected radiobutton control from the group.

The popupbutton control adds a flexible pop-up control interface to the button control. It contains a primary button and a secondary button,
This auxiliary button is also called a pop-up button. When you click the pop-up button, it will pop up any uicomponent object. Popupbutton
A common purpose of a control is to enable the list control or menu control with the pop-up button. These two controls change the functions and labels of the main button.

Example

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application
Xmlns: MX = "http://www.adobe.com/2006/mxml
"
Viewsourceurl = "src/controlsbuttonbased/index.html"
Layout = "absolute" width = "460" Height = "400"
>
<Mx: SCRIPT>
<! [CDATA [
Import flash. Events. mouseevent;
Import MX. Controls. Alert;

Private const NL: String = "/R ";

Private function submitbuttonclickhandler (Event: mouseevent): void
{
VaR userdetails: String = "you submitted the following details:" + NL + nL;
Userdetails + = "name:" + username. Text + nL;
Userdetails + = "Email:" + useremail. Text + nL;
Userdetails + = "Hide email? "+ (Hideemail. Selected? "Yes": "no") + NL + nL;
Userdetails + = "comment:" + NL + usercomment. text;

Alert. Show (userdetails );
}

Private function emailbuttonclickhandler (Event: mouseevent): void
{
VaR MSG: String = "you can use the navigatetoURL () method to open a URL"
MSG + = "using a call similar to the following:/R ";
MSG + = "navigatetoURL (New URLRequest (& apos; mailto: comments@somewhere.com & apos ;));";

Alert. Show (MSG );
}

]>
</MX: SCRIPT>

<Mx: Panel
Title = "Leave a comment"
Left = "10" Top = "10" Right = "10" Bottom = "10"
Layout = "absolute"
>
<Mx: Text
TEXT = "Fill out this form to leave us a comment :"
Width = "250" x = "10" Y = "10" fontweight = "bold"
/>
<Mx: Label text = "name:" x = "10" Y = "38"/>
<Mx: textinput id = "username" Y = "36" Right = "10" Left = "90"/>
<Mx: Label text = "Email:" x = "10" Y = "68"/>
<Mx: textinput id = "useremail" Y = "66" Right = "10" Left = "90"/>
<Mx: Label text = "comment:" x = "10" Y = "129" type = "regxph" text = "yourobjectname"/>
<Mx: textarea id = "usercomment" Left = "10" Right = "10" Height = "109" Bottom = "40"/>

<Mx: checkbox
Id = "hideemail"
Y = "103" Left = "90"
Label = "hide my email address"
Selected = "true"
/>

<Mx: linkbutton
Id = "emailbutton"
Y = "272" horizontalcenter = "0"
Label = "having trouble? Email us! "
Click = "emailbuttonclickhandler (event );"
/>

<Mx: controlbar x = "120" Y = "258" horizontalalign = "center">
<Mx: button
Id = "submitbutton" label = "Submit"
Click = "submitbuttonclickhandler (event );"
/>
</MX: controlbar>

</MX: Panel>
</MX: Application>

 

Result

To view all source code, right-click the flex application and choose View Source code from the context menu ".

Use List-based controls

List-based controls are controls that extend the listbase class at certain points within the hierarchy. They include ComboBox, list, horizontallist, DataGrid, tile, menu, and tree controls.

Several FLEX framework components (including all list-based controls) represent data from a data provider, which is an object that contains the data required by the control. For example,
The data provider of a tree control determines the structure of the tree and the associated data allocated to each tree node, while a ComboBox
The data provider of the control determines the items in the drop-down list of the control.

Note: Many standard controls (including colorpicker and menubar controls)
You can also obtain data from the data provider. Controls that display application data are sometimes called data provider controls. For more information about using the data provider, see flex 2
"Use data providers and Collections" in the developer guide ".

You can set the data provider of the component in two ways: the first method is
It is defined as the sub-tag of the control for obtaining the data provider, and the data provider is defined online in mxml. This method has the advantages of fast implementation,
It is suitable for use with static data and for prototype design. The second method is to bind the control to an existing array or
Collection. This method is used to display the data caused by server calls and bind the data to
The data structure created in. This method is also more scalable in the two methods.

The following example shows the two methods.

Example

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application
Xmlns: MX = "http://www.adobe.com/2006/mxml
"
Viewsourceurl = "src/controlslistbased/index.html"
Layout = "horizontal" width = "460" Height = "360"
>

<Mx: SCRIPT>
<! [CDATA [
Import flash. Events. mouseevent;
Import MX. Controls. Alert;
Import MX. Collections. arraycollection;

Private const NL: String = "/R ";

// A data provider created by using ActionScript
[Bindable]
Private var subscriptions: arraycollection =
New arraycollection
(
[
{Data: 0, label: "print "},
{Data: 1, label: "website "},
{Data: 2, label: "RSS (text )"},
{Data: 3, label: "podcast "}
]
);

Private function submitbuttonclickhandler (Event: mouseevent): void
{
VaR userdetails: String = "you submitted the following details:" + NL + nL;
Userdetails + = "name:" + username. Text + nL;
Userdetails + = "Email:" + useremail. Text + nL;
Userdetails + = "site rating:" + userrating. selecteditem. Label + NL + nL;
Userdetails + = "subscriptions :";

VaR selectedsubscriptionitems: array = usersubscriptions. selecteditems;
For (var I: String in selectedsubscriptionitems)
{
// Display the selected subscriptions, separated by commas
Userdetails + = selectedsubscriptionitems [I]. Label + ",";
}
// Remove the last comma and space from the string we & apos; re displaying
Userdetails = userdetails. substring (0, userdetails. Length-2 );

Alert. Show (userdetails );
}

]>
</MX: SCRIPT>

<Mx: Panel
Title = "feedback form" width = "99%"
Paddingleft = "10" paddingtop = "10" paddingright = "10" paddingbottom = "10"
Layout = "vertical"
>
<Mx: Text
TEXT = "Thank you for giving us feedback :"
Width = "100%" fontweight = "bold"
/>
& Lt; mx: Form width = "100%" & gt;
<Mx: formitem label = "name:" width = "100%">
<Mx: textinput id = "username"/>
</MX: formitem>
<Mx: formitem label = "Email:" width = "100%">
<Mx: textinput id = "useremail"/>
</MX: formitem>
<Mx: formitem label = "site rating:" width = "100%">
<Mx: ComboBox id = "userrating" width = "100%">
<! -- An inline data provider -->
<Mx: array>
<Mx: Object Data = "0" label = "zero"/>
<Mx: Object Data = "1" label = "one"/>
<Mx: Object Data = "2" label = "two"/>
<Mx: Object Data = "3" label = "three"/>
<Mx: Object Data = "4" label = "four"/>
</MX: array>
</MX: ComboBox>
</MX: formitem>
<Mx: formitem label = "subscriptions:" width = "100%">
<Mx: List
Id = "usersubscriptions" rowcount = "3"
Allowmultipleselection = "true" width = "100%"
Dataprovider = "{subscriptions }"
/>
</MX: formitem>
</MX: Form>

<Mx: controlbar x = "120" Y = "258" horizontalalign = "center">
<Mx: button
Id = "submitbutton" label = "Submit"
Click = "submitbuttonclickhandler (event );"
/>
</MX: controlbar>

</MX: Panel>
</MX: Application>

Result

To view all source code, right-click the flex application and choose View Source code from the context menu ".