What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

What is Data Integration: Using XML for a Timesheet (Flash Professional Only)
 

Data Integration: Using XML for a Timesheet (Flash Professional Only)

Create the user interface

Add DataGrid and Button components

Edit the data

Data Integration: Using XML for a Timesheet (Flash Professional Only) 

TOP

This tutorial shows you how to create an application for editing timesheet data. The timesheet data is stored as XML within a native XML database. The XUpdateResolver component is the best choice for this type of application, because it generates XUpdate statements that can be sent to the server to update the data.

In this tutorial, you will complete the following tasks:

Create the user interface

Edit the data

This tutorial uses a public web service and therefore requires that you have an Internet connection. In addition, the tutorial won't work in a browser because of sandbox restrictions, but will work in the Flash authoring environment or the stand-alone Flash Player.

NOTE The use of a public web service in this tutorial does not imply that you should use one for real-world applications. In fact, Macromedia does not recommend using public web services directly from within any client-side application.

For this tutorial, you will need to the data.xml file provided in the Tutorial Assets folder. This file can be found in one of the following locations:

  • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Data Integration\Using XML for a Timesheet\data.xml

  • On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data Integration/Using XML for a Timesheet/data.xml

NOTE For demonstration purposes, you will access the XML data from your hard disk and display the DeltaPacket property within your screen. In the real world, the XUpdate would be sent to the server for processing.

 

Create the user interface

#TOP

You will begin by creating a user interface, which displays the information in the XML file.

Add XMLConnector and DataSet Components

First you will add the components that will manage the data.

  1. Create a new Flash document using Flash Professional 8. Make sure your computer is connected to the Internet.

  2. From the Components panel, open the Data category and drag an XMLConnector component on the Stage. In the Property inspector, enter the instance name timeInfo_con.

  3. In the Component inspector or the Property inspector, click the Parameters tab. For the URL parameter, enter data.xml, and for the Direction parameter, select Receive from the pop-up menu.

  4. From the Components panel, drag a DataSet component on the Stage. In the Property inspector, enter the instance name timeInfo_ds.

  5. On the Stage, select the XMLConnector component. In the Component inspector, click the Schema tab. Select the results:XML property, and then click Import a Schema from a Sample XML File on the upper-right side of the Schema tab.

    NOTE Alternatively, you can select Import XML Schema from the Component inspector title bar menu.

  6. Browse to where you saved the data.xml file, and select the file.

    The Schema tab now shows the structure of the data in the file. The row node is mapped to an ActionScript array of anonymous objects, because it repeats several times within the XML file.Any subnodes or attributes directly under the row node are considered properties of the anonymous objects contained within the array.

    NOTE The XMLConnector component stores information internally as strings. When a request is made for the data through a DataBinding component, you can define how the string data is converted into the correct ActionScript types. This is accomplished by selecting an item within the Schema Tree pane and modifying its settings.

  7. Select the Date schema field. Its type is set to String. This is because the Flash authoring tool cannot determine that it is a date type based on its value. You need to give Flash some additional information to encode this value correctly.

  8. Select the Data Type parameter for the Date schema field and change it to Date. This tells the DataBinding component to try to work with this value as a date.

  9. Select the encoder parameter for the Date schema field and change it to Date. Select the encoder options parameter and select the value "MM/DD/YYYY". This tells the DataBinding component how the string value is represented in the XML file. With this information, the DataBinding component can successfully take any string in this format and convert it into an ActionScript date object.

  10. Select the @billable schema field.

    The field's data type was automatically set to Boolean by the authoring tool, which looks for certain patterns to guess the type of an XML element. However, you need to modify the encoder options for the field. For Boolean data types, the encoder options specify strings that indicate true and false values.

  11. With the @billable schema field still selected, double-click the Encoder Options field.

  12. In the Boolean Encoder dialog box that appears, enter true in the Strings That Mean True text box and enter false in the Strings That Mean False text box.

  13. Select the @duration schema field.

    The field's data type was automatically set to Integer. This is because the sample XML field contained only whole number values for this attribute.

  14. Select the Data Type setting for the @duration schema field and change it to Number so that it is not limited to integer values.

  15. In the Component inspector, click the Bindings tab.

  16. Click the Add Binding button.

  17. In the Add Binding dialog box, select the row: Array item and click OK.

  18. In the Component inspector, select the Direction property and set it to Out.

  19. Double-click the Bound To property.

  20. In the Bound To dialog box, click the Data Set component, and then select the dataProvider: Array schema location and click OK.

    The DataBinding component copies each object within the row array into a new record (transfer object) within the DataSet component. It applies the settings you selected as the data is copied so that the DataSet component receives ActionScript Date, Boolean, and Number fields for the @date, @billable, and @duration attributes.

    Next, you will create fields for the DataSet component that match those in the XMLConnector component.

  21. On the Stage, select the DataSet component. In the Component inspector, click the Schema tab.

  22. Click Add a Component Property (+) and enter id for Field Name and Integer for Data Type.

  23. Using the same method, create the following new fields:

    • Field Name = billable, Data Type = Boolean

    • Field Name = date, Data Type = Date

    • Field Name = duration, Data Type = Number

    • Field Name = rate, Data Type = Number

    NOTE The field names must exactly match the names of their corresponding properties within the XMLConnector component (@date = date, @billable = billable, @duration = duration), including capitalization.

  24. Select the Date field that you just created. Select the encoder setting and change it to DateToNumber.

    NOTE The DataSet component needs to store date values internally in their numeric format so that they can be sorted correctly. The DateToNumber encoder converts a date into a number whenever the value is set. It converts a number into a date whenever the value is accessed.

  25. With the Date field still selected, double-click the Formatter field in the Component inspector and select Date from the pop-up menu.

  26. Double-click the Formatter Options field in the Component inspector.

  27. In the Date Formatter Settings dialog box that appears, enter MM-DD-YYYY in the Format text box.

 

Add Data Grid and Button components

TOP

Next you will add components for displaying the data.

  1. From the Components panel, open the User Interface category and drag a DataGrid component to the Stage.

  2. In the Property inspector enter the instance name timeInfo_grd.

  3. Still in the Property inspector, set the Width to 360.

  4. In the Component inspector, click the Bindings tab.

  5. Click the Add Binding button.

  6. In the Add Binding dialog box, select the dataProvider: Array item and click OK.

  7. In the Bindings tab, click the Bound To property.

  8. In the Bound To dialog box, click the Data Set component, and then select the dataProvider: Array schema location and click OK.

  9. In the Bindings tab, set the Direction to In.

  10. With the Data Grid still selected, go to the Component inspector Bindings tab and click the Add Binding button.

  11. In the Add Binding dialog box, select the selectedIndex: Number item and click OK.

  12. Double-click the Bound To property.

  13. In the Bound To dialog box, click the Data Set component, and then select the selectedIndex: Number schema location and click OK.

  14. Leave the Direction property set to In/Out.

  15. Drag a Button component to the Stage, and give it the instance name loadData_btn in the Property inspector.

  16. In the Component inspector, click the Parameters tab. In the Label field, type Load Data.

  17. With the button still selected on the Stage, open the Behaviors panel (Window > Behaviors).

  18. Click Add Behavior (+), and select Data > Trigger Data Source. In the Trigger Data Source dialog box, select the timeInfo_con component, and click OK.

  19. Save the file in the same folder where the data.xml file resides.

  20. Run the application, and click Load Data.

    The XML data is retrieved, converted, and loaded into the DataSet component. The binding between the DataSet and the DataGrid copies the data into the grid for display.

 

Edit the data

TOP

Now you will modify the application so that you can edit data through the DataGrid component.

  1. On the Stage, select the DataGrid component. Then click the Parameters tab in the Component inspector.

  2. Set the editable property to true.

  3. Run the application.

    You can now edit the data within the grid.

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash