The adequacy and relevance of flex controls, data structures, and even flex languages displayed in the arraycollection and DataGrid code examples

This article briefly describes the functional extension of DataGrid and other controls using labelfield \ labelfunction and other attributes, and demonstrates the use of data structures such as array, arraylist, and arraycollection as data effects and their performance in mxml and ActionScript. form and Their Derivative functions are enhanced, it is intended to explain that there is a certain way of learning and using between controls, data types, and even between mxml and ActionScript.

Flex controls such as DataGrid, list, dropdownlist, and ComboBox will display the label attribute value in the data source by default, but if this attribute is not available, you can also use labelfield (the DataGrid is datafield) to specify the property value of the data source displayed by the control. The existence of this property greatly enhances the plasticity of the Control. We can dynamically modify the display content of the control by changing this property value. In addition, many controls provide the labelfunction function, you can format the value of the attribute specified by labelfield again (horizontal: you do not know whether to display the content of the specified field, you can also add other display content, for example, in the DataGrid, multiple field values are displayed on one field. Vertical: this field value is deeply processed to make the display effect more compliant with requirements and habits, for example, changing the time format of a time field ).

The following code shows how to format the Greenwich Mean Time in the DataGrid for different functions.

<FX: SCRIPT> <! [CDATA [import MX. collections. arraycollection; import MX. formatters. dateformatter; import MX. controls. alert; private var arraycollection = new arraycollection ([{Name: 'A', Date: new date ("Thu Jan 5 10:49:39 GMT + 0800 2012")}, {Name: 'B', Date: new date ('wed, 30 May 2007 15:19:43 GMT + 8')},]); Private function date_labelfunction (item: object, column: datagridcolumn ): string {var dateformatter: dateformatter = new dateformatter (); dateformatter. formatstring = "YYYY mm dd Jj: NN: SS"; var datestr: String = dateformatter. format (item [column. datafield]); // alert. show (dateformatter. error); Return datestr;}]> </FX: SCRIPT> <s: hgroup> <s: vgroup> <mx: dataGrid dataprovider = "{arraycollection}"> <mx: columns> <mx: datagridcolumn datafield = "name"/> <mx: datagridcolumn datafield = "date" width = "300"/> </MX: columns> </MX: DataGrid> <mx: DataGrid dataprovider = "{arraycollection}"> <mx: columns> <mx: datagridcolumn datafield = "name"/> <mx: datagridcolumn datafield = "date" width = "300" labelfunction = "date_labelfunction"/> </MX: columns> </MX: DataGrid> </S: vgroup>

 

Shows the effect:

The above code can also be expressed as the definition of the arraycollection data source using the mxml tag. In addition, there are many such examples. The principle of this fact is similar to JSP and Java. In fact, JSP is a label encapsulation of Java, while mxml is also an encapsulation of ActionScript, making it more suitable for Web developers. The following code is a demonstration of the description of this section. It is also an example of "all the content represented by mxml can be expressed using ActionScript.

<FX: declarations> <! -- Place a non-visual element (such as a service or value object) Here --> <s: arraycollection id = "declararraycollection"> <FX: object Name = "E" date = "Thu Jan 5 10:49:39 GMT + 0800 2012"/> <FX: Object Name = "F" date = "wed, 30 May 2007 15:19:43 GMT + 8 "/> </S: arraycollection> <s: arraylist id =" declararraylist "> <FX: object Name = "C" age = "12"/> <FX: Object Name = "D" age = "16"/> </S: arraylist> <FX: array id = "declararray"> <FX: Object Name = "A" age = "18"/> <FX: Object Name = "B" ag E = "19"/> </FX: array> </FX: declarations> <FX: SCRIPT> <! [CDATA [import MX. collections. arraycollection; import MX. containers. form; private var array: array = new array ([{name: "A", age: "18" },{ name: "B", age: "19"},]); Private var arraylist: arraylist = new arraylist ([{name: "C", age: "12" },{ name: "D ", age: "16"},]); Private var arraycollection = new arraycollection ([{Name: 'E', Date: new date ("Thu Jan 5 10:49:39 GMT + 0800 2012")}, {Name: 'F', Date: new date ('wed, 30 May 2007 15:19:43 GMT + 8 ')},]); </FX: SCRIPT>

 

The data structures of array, arraylist, and arraycollection are very similar, and most of them can be used as data sources of the same control. However, arraylist appears in flex4.0, one of the reasons is that some dataprovider types in Spark should be implemented ilist, such as List controls.

The above three data structures can be said to be disruptive. array is the basis. As a data source, the controller cannot well perceive the changes in the data source array. arraycollection extends many functions for array, such as retrieval, filtering, sorting, classification, update monitoring, and other functions; as for the newly added arraylist in flex4., it can be viewed as a lightweight arraycollection, which cannot be used to filter data like arraycollection. The following code uses sort to sort the time field values in arraycollection.

<? XML version = "1.0" encoding = "UTF-8"?> <Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute" minwidth = "955" minheight = "600"> <mx: SCRIPT> <! [CDATA [import MX. collections. arraycollection; import MX. containers. form; private var arraycollection = new arraycollection ([{Name: 'A', Date: new date ('wed, 30 May 2007 15:19:43 GMT + 8')}, {Name: 'B', Date: new date ("Thu Jan 5 10:49:39 GMT + 0800 2012")},]); import MX. formatters. dateformatter; import MX. controls. alert; Private function date_labelfunction (item: object, column: datagridcolumn): String {var dateformatter: dateformatter = new dateformatter (); dateformatter. formatstring = "YYYY-MM-DD Jj: NN: SS"; var datestr: String = dateformatter. format (item [column. datafield]); // alert. show (dateformatter. error); Return datestr;} import MX. collections. sortfield; import MX. collections. sort; protected function button1_clickhandler (Event: mouseevent): void {var sort: Sort = new sort (); sort. fields = [New sortfield ("date", true, false, null)]; arraycollection. sort = sort; arraycollection. refresh () ;}]]> </MX: SCRIPT> <mx: vbox> <mx: DataGrid dataprovider = "{arraycollection}"> <mx: columns> <mx: datagridcolumn datafield = "name"/> <mx: datagridcolumn datafield = "date" width = "300" labelfunction = "date_labelfunction"/> </MX: columns> </MX: dataGrid> <mx: button label = "sort" Click = "button?clickhandler (event)"> </MX: button> </MX: vbox> </MX: Application>

 

Click sort and compare

Controls often have functional similarity, such as list and DataGrid. The former is a single column, and the latter is multi-column data (we can also compare dropdownlist and ComboBox ). Data structures are also correlated or correlated, as shown in the array, arraylist, and arraycollection mentioned in this article. In terms of learning and usage, pay attention to the difference between derivative and association, and select the most appropriate object to complete the required functions.