You use the @ and dot (.) operators not only to read data values from an XML structure, but also to assign data values to it.

In the following example, you create a master-detail view of an XML structure. The master view contains a DataGrid component that displays a list of books. The detail view has controls for editing the book that is currently selected in the master view.

The master and detail views use data binding and E4X to both read data from the XML and to update data in the XML.

The following examples uses E4X in these ways:

• myBooks.book refers to the XMLList of book elements
• myBooks.book[selectedBookIndex] references the currently selected book element index
• myBooks.book[selectedBookIndex].title references the value of the title element of the currently selected book element

To update the titleInput TextInput control with the title of the currently selected book, you bind the text property of the titleInput TextInput control to myBooks.book[selectedBookIndex].title. Similarly, to update the XML with the user's latest input, you assign the value of the text property of the TextInput control to myBooks.book[selectedBookIndex].title when the text in the titleInput TextInput control changes.

The other components in the detail view work exactly the same way as the titleInput control.

Example

 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="500" height="470"
    creationComplete="myDataGrid.selectedIndex=0;"
>

    
        [CDATA[        
            // Model: XML structure describing 
            // some of the books in my collection.    
            [Bindable]

            private var myBooks:XML = 
                <books>
                    <book ISBN="1590595181">

                        <title>Foundation ActionScript Animation: Making Things Movetitle>
                        <author>Keith Petersauthor>
                        <amazonUrl>http://tinyurl.com/npuxt

                    book>
                    <book ISBN="1582346194">
                        <title>Send in the Idiots: Stories from the Other Side of Autismtitle>

                        <author>Kamran Nazeerauthor>
                        <amazonUrl>http://tinyurl.com/lo5ts
                    book>

                books>
        ]]>
    
    
    
     id="selectedBookIndex">{myDataGrid.selectedIndex}

    
    
     
        title="Assigning XML data"
        paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"
    >

        
         id="myDataGrid" dataProvider="{myBooks.book}">

            
                 dataField="@ISBN" headerText="ISBN" width="85"/>
                 dataField="title" headerText="Title"/>

                 dataField="author" headerText="Author"/>
                 dataField="amazonUrl" headerText="Web site">

                    
                        
                            
                                label="Visit"
                                click="navigateToURL(new URLRequest(data.amazonUrl), 'blank');"
                            />                                    
                        

                                            
                
            
        
        
        

         width="100%" autoLayout="false">
             label="Edit book details"/>

             label="ISBN:" width="100%">
                 
                    id="isbnInput" 
                    width="100%"
                    text="{myBooks.book[selectedBookIndex].@ISBN}"
                    change="{myBooks.book[selectedBookIndex].@ISBN = isbnInput.text}"
                />

            
             label="Title:" width="
			100%">
                 
                    id="titleInput" 
                    width="100%"
                    text="{myBooks.book[selectedBookIndex].title}"
                    change="{myBooks.book[selectedBookIndex].title = titleInput.text}"
                />

            
             label="Author:" width="100%">
                 
                    id="authorInput"
                    width="100%"
                    text="{myBooks.book[selectedBookIndex].author}"
                    change="{myBooks.book[selectedBookIndex].author = authorInput.text}"
                />

            
             label="Amazon Url" width="100%">
                 
                    id="amazonUrlInput"
                    width="100%"
                    text="{myBooks.book[selectedBookIndex].amazonUrl}"
                    change="{myBooks.book[selectedBookIndex].amazonUrl = amazonUrlInput.text}"
                />