Flex Summary-Basic mxml Functions

Storage and verification data
You can use a data model to store specific data. A data model is an as object that provides data attributes and contains additional methods. Declare that a simple data model without any method can use the <mx: Model> or <mx: XML> tag. You can also use the verification component to verify the validity of the stored data. Flex contains a set of standard data verification components. Of course, you can also create your own verification components.
The following example shows a simple data verification.

 <? XML version = "1.0" encoding = "UTF-8"?> <Br/> <mx: application <br/> xmlns: MX = "http://www.adobe.com/2006/mxml" <br/> viewsourceurl = "src/databindingactionscriptexpressionssimple/index.html" <br/> width = "420" Height = "350" <br/> <br/> <mx: model id = "mymodel"> <br/> <mymodel> <br/> <! -- Perform simple property binding. --> <br/> <A> {nameinput. Text} </a> <br/> <! -- Perform String concatenation. --> <br/> <B> This is {nameinput. Text} </B> </P> <p> <! -- Perform a calculation. --> <br/> <C> {(number (numberinput. text) as number) * 6/7} </C> </P> <p> <! -- Perform a conditional operation using a ternary operator; <br/> the person object contains a Boolean variable called ismale. --> <br/> <D >{( ismale. Selected )? "Mr. ":" ms. "} {nameinput. text} </D> <br/> </mymodel> <br/> </MX: Model> </P> <p> <mx: panel paddingbottom = "10" paddingleft = "10" paddingright = "10" paddingtop = "10" <br/> width = "100%" Height = "100%" <br/> title = "binding expressions" <br/> <mx: form> <br/> <mx: formitem label = "Last Name:"> <br/> <mx: textinput id = "nameinput"/> <br/> </MX: formitem> <br/> <mx: formitem label = "select sex: "> <br/> <mx: radiobutton <br/> id = "ismale" <br/> label = "male" <br/> groupname = "gender" <br/> selected = "true" <br/ >/> <br/> <mx: radiobutton <br/> id = "isfemale" <br/> label = "female" <br/> groupname = "gender" <br/> </ MX: formitem> <br/> <mx: formitem label = "enter a number:"> <br/> <mx: textinput id = "numberinput" text = "0"/> <br/> </MX: formitem> <br/> </MX: Form> <br/> <mx: text text = "{'simple binding: '+ nameinput. text} "/> <br/> <mx: Text text =" {'string concatenation: '+ mymodel. b} "/> <br/> <mx: Text text =" {'calculation: '+ numberinput. text + '* 6/7 =' + mymodel. c} "/> <br/> <mx: Text text =" {'Conditional: '+ mymodel. d} "/> <br/> </MX: Panel> <br/> <mx: stringvalidator source = "{nameinput}" property = "text" maxlength = "5"/> <br/> <mx: numbervalidator source = "{numberinput}" property = "text" maxvalue = "9999"/> <br/> </MX: Application> <br/>

Note that the character verification and digit verification components are used.
 
Format data
In addition to data verification, formatting input data is also frequently required. Flex also contains a set of components for data formatting. The following example formats the zip code:

 <Mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml"> <br/> <mx: zipCodeFormatter id = 'zipcodedisplay' formatString = '###########'/> <br/> <mx: Script> <br/> <! -- [CDATA [<br/> [Bindable] <br/> public var storedZipCode: int = 123456789; <br/>] --> <br/> </mx: script> <br/> <mx: Panel title = 'my application'> <br/> <mx: TextInput text = '{ZipCodeDisplay. format (storedZipCode)} '/> <br/> </mx: Panel> <br/> </mx: Application>

 

 

Common data formatting and date formatting:

1: numberformatter number formatting
2: currencyformatter currency format
3: phoneformatter phone number formatting
4: zipcodeformatter zip code formatting
5: dateformatter Date Format
6: switchsymbolformatter creates a custom format

 

Use a style sheet
You can also use the <mx: style> label table to define the style sheet of the Flex component.
Note that the tag cannot be nested in the tag except the root tag.

<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml"> <br/> <mx: style> <br/>. myclass {color: Red}/* class selector */<br/> button {font-size: 18pt}/* type selector */<br/> </MX: style> <br/> <mx: panel title = 'my application'> <br/> <mx: button stylename = 'myclass' label = 'this is red 18 point text. '/> <br/> </MX: Panel> <br/> </MX: Application>

 

Effect
You can use a transitional effect on components. The effect is usually generated after an event is triggered, such as mouse clicking, component losing focus, and component disappearing. Flex provides a set of built-in effect components. The following is an example:

 <Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml"> <br/> <mx: Zoom id = "zoom"/> <br/> <mx: panel Title = 'my application'> <br/> <mx: button id = 'myclick' label = "press me" mousedowneffect = "{zoom}"/> <br/> </MX: Panel> <br/> </MX: application>

 

Use the mxml component
You can use the MXML file to define your own components or a combination of existing components, as shown in figure<? Xml version = "1.0" encoding = "UTF-8"?> <Br/> <mx: Panel xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "absolute" width = "275" <br/> height = "150" title = "Member Login"> <br/> <mx: script> <br/> <! -- [CDATA [<br/> private function handleLoginEvent (): void {<br/> lblTest. text = "logging in... "; <br/> // login logic <br/>}< br/>] --> <br/> </mx: Script> <br/> <mx: label x = "10" y = "25" text = "Username"/> <br/> <mx: label x = "11" y = "52" text = "Password"/> <br/> <mx: textInput x = "74" y = "19" id = "txtUID"/> <br/> <mx: textInput x = "74" y = "49" id = "txtPwd" displayAsPassword = "true"/> <br/> <mx: button x = "178" y = "84" label = "Login" click = "handleLoginEvent ()"/> <br/> <mx: label x = "74" y = "85" id = "lblTest"/> <br/> </mx: Panel>

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute" xmlns: NS1 = "component. * "> <br/> <NS1: myb x =" 40 "Y =" 34 "> <br/> </NS1: myb> </P> <p> </MX: Application> <br/>