< pr o du c t id = ”1 ”> < na me > Br oc c ol i < de sc r ip ti o n l an g= ” en ”> F ir m a nd no bi t te r ne ss < /d es c ri p ti on > < de sc r ip ti o n l a ng =” n l” > St ev i g e n ni et b it t er < /p r od u ct > < pr o du c t id = ”2 ”> < na me > Ba na n as < /n am e > < de sc r ip ti o n l an g= ” en ”> B un c he s o f Ba n an as , fr e sh of f t he t r ee < /d es c ri pt i on > < de sc r ip ti o n l an g =” nl ” >B an a ne n p e r t ro s, ve r s ge p lu k t< /d e sc ri p ti o n> < /p r od u ct >
Copyright © 2008 Adobe Systems Incorporated
3
Working with XML data in ActionScript 3 • ActionScript 3 incorporates XML as a native data structure • ActionScript 3 has a new way of working with XML ■ Ways of working with XML in prior versions of ActionScript not based on ECMAScript standards ■ This is based on ECMAScript Edition 4 ■ New classes and functionality collectively called E4X (ECMAScript for XML)
E4X introduction • E4X (ECMAScript for XML) is a new set of classes and functionality for working with XML data in ECMAScript. • More information can be found at http://www.ecma-international.org/ publications/standards/ECMA-357.htm • ActionScript 3 includes this new standard and implements the new E4X classes: XML, XMLList, XMLListCollection, QName and Namespace • These classes make working with XML data in ActionScript 3: ■ Simpler - no complex loops necessary ■ More consistent - both internally and with other parts of ActionScript ■ More familiar - uses familiar syntax The XML Class from ActionScript 2.0 has been renamed XMLDocument in ActionScript 3 and is included primarily for legacy support.
E4X classes • XML and XMLList classes implement E4X XML handling standards ■ XML: Contains methods and properties for working with XML objects ■ XMLList: An ordered collection of XML (can be more than one XML object) ■ XMLListCollection: A collection class that wraps an XMLLIst and implements the IList and ICollectionView interfaces
4
Copyright © 2008 Adobe Systems Incorporated
XML • Example properties ■ ignoreComments: Determines whether XML comments are ignored when XML objects parse the source XML data ■ ingoreWhitespace: Determines whether white space characters at the beginning and end of text nodes are ignored during parsing • Example methods ■ appendChild(): Appends the given child to the end of the XML object's properties ■ childIndex(): Identifies the zero-indexed position of this XML object within the context of its parent ■ children(): Lists the children of the XML object in the sequence in which they appear
XMLList • An XMLList object is an ordered collection of properties. ■ Represents an XML document, an XML fragment, or an arbitrary collection of XML objects. • An individual XML object is the same thing as an XMLList containing only that XML object. • All methods of the XML class are also available for an XMLList object that contains exactly one XML object, otherwise some methods not allowed for XMLList ■ Example: childIndex() does not make sense on an XMLList • Differences with XML class ■ The length() method of XML class is always 1, whereas the length() method of XMLList returns the number of properties in the XMLList object
Using XMLListCollection • mx.collections.XMLListCollection is a wrapper class for an XMLList • Must import the class to use it m x. co l le ct i on s .X ML L is tC o ll ec t io n
• Instantiate with XMLListCollection constructor method, passing XMLList object as only argument v ar m y Co ll e ct i on :X M LL is t Co ll e ct i on = ne w X ML Li s tC o ll ec t io n( m yX M LL is t );
Copyright © 2008 Adobe Systems Incorporated
5
• If XMLLIstCollection is already instantiated, fill with data by setting source property to an XMLList m yC ol l ec ti o n. s ou rc e = m y XM LL i st ;
• An XMLListCollection object is used as a data provider to enable automatic data provider updates when the underlying XML data changes. • Placing an XMLList or XML object into an XMLListCollection class has these advantages ■ The elements of the XMLListCollection can be used in bindings that will continue to be monitored – This is not the case with the normal XMLList class, once an element from an XMLLIst or XML object is used in a binding it is no longer monitored ■ Implements both the ICollectionView and IList interfaces – Provides rich set of tools for data manipulation • Recommended data structure when data used as a data provider • Analogous to using an ArrayCollection instead of the Array, you would use an XMLListCollection instead of an XMLList Note: You can use the filtering options of the ICollectionView, but E4X expressions can be more powerful and easier to implement.
6
Copyright © 2008 Adobe Systems Incorporated
Demonstration 1: Using E4X Expressions In this demonstration, your instructor will perform the following tasks: • Execute pre-coded E4X expressions to evaluate and update an XML structure
Steps 1. Import the E4X project from the exercise files folder. 2. Open E4XDemo.mxml.
Figure 1: The E4X Demo Application
3. Follow the instructor’s directions to execute the sample E4X expressions. The demo application uses the following XML object for E4X expression samples: m ea ls X ML = < me al s > < li t e c os t= " 5. 95 " > < me at > sp am < /m e at > < wa ff l e> pl a in < /w af f le > < /l i te > < he a rt y c os t =" 9. 9 5" > < me at > ba co n a n d sa u sa ge < /m e at > < wa ff l e> bl u eb e rr y< / wa ff l e> < /h e ar t y>
Copyright © 2008 Adobe Systems Incorporated
7
< li t e c os t= " 10 .9 5 "> < me at > tu rk e y< / me at > < sa nd w ic h> m us t ar d o nl y< / sa n dw ic h > < /l i te > < he a rt y c os t =" 12 . 95 " > < me at > pa st r am i < sa nd w ic h> t ri p le -d e ck er < /s a nd wi c h> < /h e ar t y> < li t e c os t= " 11 .9 5 "> < me at > ch ic k en br ea s t< /m e at > < si de > st ea m ed ve gg i es < /l i te > < he a rt y c os t =" 14 . 95 " > < me at > t- bo n e< / me at > < si de > ga rl i c m as he d p ot a to s < /h e ar t y> < /m ea l s>
8
Copyright © 2008 Adobe Systems Incorporated
Using E4X Expressions • E4X expressions can be used to access attributes and elements of an XML object. • Expressions can be used for both data retrieval and assignment. • The E4X demo application demonstrates use of the following operators and expressions.
Dot (.) operator and array syntax • Use the XML dot (.) operator to navigate to child elements of an XML object • Use array syntax ([indexNumber]) to access one of a set of repeating elements • Like an ActionScript Array, indexing starts at 0 me a ls X ML .s e rv in g [1 ] < li t e co s t= "1 0 .9 5 "> < m ea t> t ur ke y < s an dw i ch >m u st a rd o n ly < /l i te > < he a rt y c os t= " 12 . 95 "> < m ea t> p as tr a mi < /m ea t > < s an dw i ch >t r ip l e- de c ke r< / sa n dw ic h > < /h e ar ty > -- - -- - -- -- - -- -- - -- - -- -- - -- me a ls X ML .s e rv in g [2 ] .h ea r ty .m e at t- b on e
Parentheses [( )] operators • Named Predicate Filtering • Use the ( and ) operators to evaluate an expression in an E4X XML construct • Use parentheses to insert conditional search logic with the dot operator ■ Can also use Regular expressions me a ls X ML .s e rv in g .l i te .( m ea t= = 't u rk ey ' ) < me a t> tu r ke y< / me a t> < wa f fl e> p la in < /w a ff le > < me a t> tu r ke y< / me a t> < sa n dw ic h >m us t ar d o nl y
Copyright © 2008 Adobe Systems Incorporated
9
Attribute (@) operator • Use the XML attribute (@) operator to identify attributes of an XML object ■ Use in combination with the dot operator and parentheses for searches m ea ls X ML .s e rv i ng .h e ar ty . (@ co s t = = 9. 9 5) < he ar t y co s t= " 9. 95 " > < me a t> ba c on an d s au sa g e< /m e at > < wa f fl e> b lu e be rr y < /h ea r ty > < he ar t y co s t= " 9. 95 " > < me a t> pa s tr a mi < sa n dw ic h >t r ip le - de ck e r< /s a nd w ic h> < /h ea r ty >
• Can use operators multiple times m ea ls X ML .s e rv i ng .h e ar ty . (@ co s t = = 9 .9 5) . (m ea t == ' pa st r am i' ) < he ar t y co s t= " 9. 95 " > < me a t> pa s tr a mi < sa n dw ic h >t r ip le - de ck e r< /s a nd w ic h> < /h ea r ty >
Descendent accessor (..) operator • Use the XML descendent accessor (..) operator to navigate to descendant elements of an XML object m ea ls X ML .. l it e < li te co st = "5 . 95 "> < me a t> tu r ke y < wa f fl e> p la i n< /w a ff le > < /l it e > < li te co st = "7 . 95 "> < me a t> tu r ke y < sa n dw ic h >m u st ar d o nl y < /l it e > < li te co st = "1 2 .9 5" > < me a t> ch i ck e n br e as t< / me at > < si d e> st e am e d ve g gi es < /s id e > < /l it e >
• Use in combination with the dot and attribute operators and parentheses for searches m ea ls X ML .. l it e .( @c o st > 6) < li te co st = "7 . 95 "> < me a t> tu r ke y
10
Copyright © 2008 Adobe Systems Incorporated
< sa n dw ic h >m u st ar d o nl y < /l it e > < li te co st = "1 2 .9 5" > < me a t> ch i ck e n br e as t< / me at > < si d e> st e am e d ve g gi es < /s id e > < /l it e >
Data assignment • With dot and attribute operators can also assign data • Assignment expressions return the resulting XML or XMLList object me a ls X ML .s e rv in g [0 ] .l it e .@ co s t= ' 10 0' me a ls X ML .s e rv in g [0 ] .l it e .m ea t =' t ur ke y b ac o n' < li t e co s t= "1 0 0" > < m ea t> t ur ke y b a co n< / me at > < w af fl e >p la i n< / wa ff l e> < /l i te > < he a rt y c os t= " 9. 9 5" > < m ea t> b ac on an d s au s ag e< / me a t> < w af fl e >b lu e be r ry < /h e ar ty >
Copyright © 2008 Adobe Systems Incorporated
11
Using the Tree control • The Tree control displays hierarchical data as an expandable tree • A Tree control consists of branches and leaf nodes. An item in a Tree is either a branch or a leaf • Branch and leaf have default icons, a folder icon for a branch and a file icon for a leaf. Tree icons can be changed by specifying the folderOpenIcon, folderClosedIcon and defaultLeafIcon properties of the Tree control.
Figure 2: The Tree control
Creating a Tree
• When you assign a dataProvider, the Tree class handles the source data object as follows: ■ A String containing valid XML text is converted to an XML object ■ An XMLNode is converted to an XML object ■ An XMLList is converted to an XMLListCollection ■ An XMLListCollection is used in its current state ■ Any object that implements the ICollectionView interface is cast to an ICollectionView ■ An Array is converted to an ArrayCollection ■ Any other type object is wrapped in an Array with the object as its sole entry • As with all data provider controls, if the data provider content can change outside the control and an automatic screen update is required, wrap the the data source in an ArrayCollection or an XMLListCollection.
Tree Nodes • The Tree control reads the XML data and builds nodes based on the data in the data provider.
12
Copyright © 2008 Adobe Systems Incorporated
• Specify the name of the attribute to be used node labels with the Tree control’s labelField property l ab el F ie ld = ”@ m yA tt r ib ut e ”
Note: All XML elements must have the same attribute name to properly use the labelField property • Nodes at the highest level are called root nodes ■ A Tree can have more than one root node ■ To prevent the displaying of a root node, set the showRoot property of the Tree control to false. • Branch nodes ■ A Branch node can contain multiple Child nodes ■ Child nodes can be branches or leafs • Leaf nodes ■ A Leaf node is an endpoint in the Tree ■ The following code displays the Tree in figure on previous page < mx : XM L f or m at =" e 4x " > < fo ld e r la b el = "M ai l "> < Pf o ld e r la b el =" B us i ne ss " / > < Pf o ld e r la b el =" D em o " /> < Pf o ld e r la b el =" P er s on al " is Br a nc h =" tr u e" / > < Pf o ld e r la b el =" S av e d Ma i l" / > < /f ol d er > < /m x :X M L>
Copyright © 2008 Adobe Systems Incorporated
13
Walkthrough 1: Retrieving XML data and populating a Tree In this walkthrough, you will perform the following tasks: • Create an event handler for an HTTPService call that retrieves XML from a server • Use the XML data to populate a Tree
Steps 1. Open E4X_wt1.mxml. 2. Run the application. You should see the Cafe Townsend Delivery Service application with 3 panels. In the left panel you need to display the dishes in a Tree.
Returning E4X data 3. In the HTTPService tag just below the Script block, add a result event and call a function named dishesXMLHandler(). Pass the event object as a parameter. 4. In the HTTPService tag, use the resultFormat property to specify you want the XML object to be deserialized so that you can access the data using ECMAScript for XML (e4x). < mx :H T TP Se r vi c e id =" d is he s XM L " ur l= " as se t s/ x ml /d i sh es . xm l " s ho w Bu sy C ur s or =" t ru e" r es u lt =" d is h es XM L Ha nd l er ( ev en t )" r es u lt Fo r ma t =" e4 x " />
5. Inside the Script block, place a trace() statement inside the dishesXMLHandler() event handler and display the result property of the event object. p ri va t e fu n ct i on d i sh es X ML Ha n dl e r( ev en t :R es u lt E ve nt ) :v oi d { t ra c e( e ve nt . re su l t) ; }
6. Debug the application and open Flex Builder’s Console view. You should see the XML object displayed in the Console view. Note: Double click the Console view tab to see it in full screen mode. 7. Terminate the debugging session.
14
Copyright © 2008 Adobe Systems Incorporated
Populating a Tree with data 8. In the Script block just below the import, define a private, bindable variable named dishesDP datatyped as XMLListCollection. [ Bi nd a bl e] p ri va t e va r d i sh es D P: XM L Li st C ol l ec ti o n;
9. Inside the dishesXMLHandler() event handler, remove the trace() method and instantiate the dishesDP variable with the ArrayCollection() constructor method. Pass an E4X expression that retrieves all category nodes and their child nodes. Use the ‘..’ descendant operator d is he s DP = ne w X ML L is tC o ll ec t io n ( ev en t .r es u lt . .c at e go ry ) ;
10. Inside the left Panel of the application, insert a Tree tag. Add the following properties: • id:dishesTree • dataProvider:{dishesDP} • labelField:@name • width:100% • height:100% • borderThickness:0 < mx :T r ee i d =" d is he s Tr ee " d at aP r ov id e r= " {d is h es DP } " l ab el F ie ld = "@ n am e" w id th = "1 00 % " h ei gh t =" 10 0 %" b or de r Th ic k ne s s= "0 " / >
11. Run the application. You should see the populated Tree in the left panel. Be sure you can open the branch nodes and see the actual dishes.
Copyright © 2008 Adobe Systems Incorporated
15
Using Tree Control Events and Properties • • • •
The Tree control is a List control Supports same events and properties as List, DataGrid, etc. Use change event to detect when user has selected a node Use selectedItem property to access selected data ■ Use selectedItems if allowing multiple selections • Selected node will usually be an XML object • Other helpful properties for controlling display ■ showRoot: Boolean: Sets the visibility of the top level nodes ■ firstVisibleItem: The node that is currently displayed in the top row of the tree
Using the change event and selectedItem property • Create a change event handler to respond to user selecting a node of the Tree control c ha ng e =c ha n ge H an dl e r( ev e nt )
• Event object is instance of ListEvent class • If unique properties of ListEvent aren’t needed, can refer to event object as superclass Event. • Use selectedItem property to access selected node’s underlying data p ri va t e fu n ct i on t r ee Ch a ng eH a nd l er ( ev en t :E ve n t) : vo id { va r m yX ML : XM L = e ve n t. t ar ge t .s el e ct e dI te m a s X ML ; }
Using the Tree control’s dataDescriptor • The Tree control has a dataDescriptor property that provides programmatic read/write access to the Tree control’s data • Includes these methods: ■ addChildAt():Boolean ■ getChildren():ICollectionView ■ getData():Object ■ hasChildren():Boolean
16
Copyright © 2008 Adobe Systems Incorporated
■ isBranch():Boolean ■ removeChildAt():Boolean • isBranch() returns Boolean value indicating whether node contains child elements • Use to test whether Tree control’s currently selected node has child elements • Example: v ar s e le ct e dN o de :X M L = my T re e. s el e ct ed I te m; v ar h a sC hi l dr e n: Bo o le an = my Tr e e. da t aD e sc ri p to r. i sB r an ch ( s el e ct e dN od e );
Copyright © 2008 Adobe Systems Incorporated
17
Walkthrough 2: Displaying the selected item in a form In this walkthrough, you will perform the following tasks: • Use the XML data from the Tree to populate a form that is a detailed view of a selected dish.
Steps 1. Open E4X_wt2.mxml. 2. Notice that there is a bindable XML variable named selectedNode, and that properties of selectedNode are used in binding expressions in the form’s TextInput controls.
Populating the form 3. Add a change event handler to the Tree control. In the ActionScript call a function named manageForm() and send the event object as a parameter. c ha ng e =" ma n ag e Fo rm ( ev en t )"
4. Locate the private function named manageForm(). 5. In the function, assign selectedNode as a reference to the selected XML node of the Tree. Use the target property of the event object. s el ec t ed No d e = e ve n t. ta r ge t. s el e ct ed I te m;
6. Using the Tree’s dataDescriptor property, set the form’s visible property based on whether the selectedNode has child elements. t he Fo r m. vi s ib l e = !d is h es Tr e e. d at aD e sc ri p to r .i sB r an ch ( s el e ct e dN od e );
The complete function should look like this: p ri va t e fu n ct i on m a na ge F or m( ev en t :E ve n t) : vo id { se le c te dN o de = ev en t .t ar g et . se le c te dI t em ; th eF o rm .v i si b le = ! di s he s Tr ee . da ta D es c ri pt o r. is B ra n ch ( s el e ct e dN od e ); }
7. Run the application.
18
Copyright © 2008 Adobe Systems Incorporated
You should see that the form is populated with data when you select a dish from the Tree. When you select a category from the Tree, the form should become invisible again.
Copyright © 2008 Adobe Systems Incorporated
19
Using E4X Expressions for Search • You may want to use XML expression in a way other than as a dataProvider for a Tree • Can display XML data using String conversion functions • Use E4X expressions to determine whether an item exists in a collection
XML Type Conversion • Converting XML objects to Strings ■ To convert an XML object to a String, use the toString() method ■ The toString() method returns a string with all namespace declarations, tags, attributes and content from the XML object. • Converting Strings to XML objects ■ Instantiate the XML Class to create an XML object. ■ Specify a String as an argument v ar m y XM L: X ML = ne w X ML (“ < pr o du ct s >< /p r od u ct s> ” )
Searching for XML objects with E4X expressions • Use E4X expressions to determine whether an item exists • Use an E4X expression that returns an XMLList • If data is stored in XMLListCollection, use source property to access XMLList in E4X expression m yX ML L is tC o ll e ct io n .s ou r ce .m y E4 X Ex pr e ss io n
• Use XMLList object’s length() method to determine whether items were found v ar i t em To U pd a te :X M LL is t = sh op p in gC a rt D at a. s ou rc e .( @ id = = s el e ct e dN od e .@ id ) ; i f (i t em To U pd a te .l e ng th ( ) > 0 ) { it em T oU pd a te . @q ty + +; } e ls e { se le c te dN o de . @q ty = 1; sh op p in gC a rt D at a. a dd It e m( s el ec t ed No d e) ; }
20
Copyright © 2008 Adobe Systems Incorporated
Walkthrough 3: Adding items to the shopping cart In this walkthrough, you will perform the following tasks: • Create an XML based shopping cart • Add items to the shopping cart • Add the same item to the shopping cart and update the quantity
Steps 1. Open E4X_wt3.mxml.
Creating the shopping cart 2. Create a bindable, private variable named ShoppingCartData datatyped as XMLListCollection. Instantiate the variable with the XMLListCollection() constructor method. [ Bi nd a bl e] p ri va t e va r s h op pi n gC ar t Da ta : XM L Li st C ol le c ti o n = ne w X ML L is t Co ll e ct io n () ;
Check to be sure an import statement was created for the mx.collections.XMLListCollection class. i mp or t m x. c ol l ec ti o ns .X M LL is t Co l le ct i on ;
Adding and updating shopping cart items 3. Locate the function named addToShoppingCart(). 4. Inside the function, create a variable local to the function named itemToUpdate typed as an XMLList object to hold the product to add or modify in the shopping cart. Populate itemToUpdate with an expression that searches the shopping cart data for an object whose id attribute matches the selectedNode.@id. v ar i t em To U pd a te :X M LL is t = sh op p in gC a rt D at a. s ou rc e .( @ id = = s el e ct e dN od e .@ id ) ;
5. Add a conditional block that checks the length() method of the returned XMLList object. If the object’s length() method returns greater than zero, increment its qty attribute by 1. i f (i t em To U pd a te .l e ng th ( ) > 0 ) { it em T oU pd a te . qt y+ + }
Copyright © 2008 Adobe Systems Incorporated
21
6. In the else clause, set the selectedNode object’s qty attribute to 1 and add it to the shopping cart with the XMLListCollection’s addItem() method. e ls e { se le c te dN o de . @q ty = 1; sh op p in gC a rt D at a. a dd It e m( s el ec t ed No d e) ; }
7. Check to be sure your function appears as follows: p ri va t e fu n ct i on a d dT oS h op pi n gC a rt () : vo id { va r i te mT o Up d at e: X ML Li s t = s ho p pi n gC ar t Da ta . so u rc e. ( @i d = = s el ec t ed No d e. @ id ); if ( i te mT o Up d at e. l en gt h () > 0) { i te m To U pd at e .@ qt y ++ } el se { s el e ct e dN od e .@ qt y =1 ; s ho p pi n gC ar t Da ta . ad d It em ( se le c te d No de ) ; } }
Displaying the shopping cart in the DataGrid 8. Bind the shoppingCartData XMLListCollection as the dataProvider for the DataGrid in the right Panel. 9. Run the application. You should see the products in the Tree and you should be able to add them to the shopping cart. Note that items are added as separate items when you add the same item multiple times. 10. Run the application. You should see that when you add the same product multiple times to the shopping cart the quantity is increased.
22
Copyright © 2008 Adobe Systems Incorporated
Removing Items from XML • When removing items from a list you have two options ■ Remove from the XMLList ■ Remove from the XMLListCollection ■ Since the XMLListCollection is nothing more than a view onto the List, both accomplish the same thing
Using an XMLListCollection • Use the IList methods (implemented in XMLListCollection) i ns ta n ce .r e mo v eI te m At () i ns ta n ce .r e mo v eA ll ( )
Using the XML delete operator • Can also remove attributes or elements using the XML delete operator • General syntax: d el et e r ef e re n ce
Table 11: Example of XML delete operator
Code
Result
va r x 1: XM L = < a i d= " 2" >A Y Y< /a > < a> A YY 2 < b> B EE < /b > < c> C EE < /c >
< a i d= " 52 "> A YY < /a > < a >A YY 2< /a > < b >B EE < /b > < c >C EE < /c >
; delete x1.a.@id;
Copyright © 2008 Adobe Systems Incorporated
< a> AY Y < a> AY Y 2 < b> BE E < c> CE E
23
Table 11: Example of XML delete operator
24
Code
Result
delete x1.b;
< a> AY Y < a> AY Y 2 < c> CE E
delete x1.a;
< c> CE E
Copyright © 2008 Adobe Systems Incorporated
Walkthrough 4: Removing items from and clearing the cart In this walkthrough, you will perform the following tasks: • Create functionality to remove an item from the shopping cart • Create functionality to clear the shopping cart
Steps 1. Open E4X_wt4.mxml. 2. Run the application. Note: Note that the right panel has two buttons: one labeled Remove and the other Clear Cart. Both are initially disabled.
Enabling the Remove and Clear Buttons 3. Locate the removeButton Button instance. Change the enabled property from false to a binding that checks to see if the selectedIndex of the shoppingCart DataGrid is not equal to -1. e na bl e d= "{ s ho p pi ng C ar t. s el ec t ed I nd ex != - 1 }"
Note: A selectedIndex has the value of -1 when nothing is selected. 4. Locate the clearButton Button instance. Change the enabled property from false to the length of the shoppingCartData variable. Cast the value as a Boolean. e na bl e d= "{ B oo l ea n( s ho pp i ng Ca r tD a ta .l e ng th ) }"
Note: You must cast the numeric value of length to a Boolean since the enabled property expects a Boolean value. The only value interpreted as false will be 0, and that is the only time you want the Clear Button disabled.
Removing a single item from the cart 5. Locate the removeFromShoppingCart() method. 6. Inside the function, create a variable local to the function named itemToRemove datatyped as Object. 7. Set the new variable equal to the selectedItem from the shoppingCart. v ar i t em To R em o ve :O b je ct = sh op p in gC a rt . se le c te dI t em ;
Copyright © 2008 Adobe Systems Incorporated
25
8. Delete the node found from the shoppingCartData using the removeItemAt() method of the XMLListCollection. Since the removeItemAt() method requires the ordinal position, use the DataGrid control’s selectedIndex property to retrieve that. s ho pp i ng Ca r tD a ta .r e mo ve I te mA t ( sh op p in gC a rt . se le c te dI n de x );
9. Your code should look like this: p ri va t e fu n ct i on r e mo ve F ro mS h op p in gC a rt () : vo i d { sh op p in gC a rt D at a. r em ov e It e mA t( s ho p pi n gC ar t .s el e ct e dI nd e x) ; }
10. Run the application. You should see that when you add items to the shopping cart, then select an item you can delete it.
Clearing the cart 11. Locate the clearCart() function. 12. Inside the function clear the shopping cart using the removeAll() method of the shoppingCartData XMLListCollection. Note: Since this is a reference to the shoppingCartXML XMLList, the underlying XML will be cleared also. 13. Your code should appear as follows: p ri va t e fu n ct i on c l ea rC a rt () : vo i d { sh op p in gC a rt D at a. r em ov e Al l () ; }
14. Run the application. You should be able to remove items from the cart and clear the shopping cart.
26
Copyright © 2008 Adobe Systems Incorporated
Summary • XML is a native data structure in ActionScript 3 • ECMAScript for XML (E4X) defines how XML handling is implemented in AS3 ■ E4X defines a set of classes and functionality for working with XML • XML class has the following methods that are often useful ■ appendChild(): Appends the given child to the end of the XML object's properties ■ childIndex(): Identifies the zero-indexed position of this XML object within the context of its parent ■ children(): Lists the children of the XML object in the sequence in which they appear • E4X has a rich set of operators to use on XML including ■ Dot (.): Navigate to child elements ■ Parentheses: Evaluate expressions (also called predicate filtering) ■ @: Identify attributes ■ Descendent accessor (..): Navigate to descendant elements ■ Data assignment: Assign data with dot and attribute operators • Tree control displays hierarchical data as an expandable tree ■ Consumes XML data as dataProvider • Levels of Tree are: root nodes, branch nodes and leaf nodes • When a node of a Tree is selected that item is stored in the selectedItem property • XMLListCollection has the same advantages the ArrayCollection has since it implements the same interfaces • To remove XML data from an XML object ■ From an XMLListCollection i ns ta n ce .r e mo v eI te m At () i ns ta n ce .r e mo v eA ll ( )
■ From XML or XMLList d el et e r ef e re n ce
Copyright © 2008 Adobe Systems Incorporated
27
Review 1. What is E4X?
2. Name three methods of the XML class and what they do.
3. Name five E4X operators and what they do.
4. Name the different nodes of a Tree
5. Name three properties of the Tree class and what they represent
6. Name three ways to remove data from an XML object.
28
Copyright © 2008 Adobe Systems Incorporated
Setup information 1. 2. 3. 4.
Copy the file E4X.zip to your drive. Start Flex Builder 3. Select File > Import > Flex Project... For the Archive file browse to the location where you saved E4X.zip and select it. 5. Use the default, or change Use default location to specify where you want the project files copied.
Copyright © 2008 Adobe Systems Incorporated
29
30
Copyright © 2008 Adobe Systems Incorporated
