Thiết kế flash với flash cs5 part 73

ptg 448 Chapter 18 The DataGrid component allows you to create strong data-enabled dis- plays and applications. You can use the DataGrid component to create a recordset (retrieved from a database query in ColdFusion, Java, or .Net) using Adobe Flash Remoting and display it in columns. You can also use data from a data set or from an array to fill a DataGrid compo- nent. The DataGrid component includes horizontal scrolling, event sup- port (including event support for editable cells), sorting capabilities, and performance optimizations. The data for a grid can come from a recordset that is fed from a database query in Adobe ColdFusion, Java, or .Net using Flash Remoting, a data set or an array. To pull the informa- tion into a DataGrid, you set the DataGrid.dataProvider property to the recordset, data set, or array. Adding a Data Grid Add a DataGrid Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the DataGrid component onto the Stage, and then select the component. Enter a unique instance name for the DataGrid component in the Property Inspector. Select Frame 1 in the actions layer in the Timeline. Open the Actions panel, and then enter the script as shown in the illustration. The Flash Remoting recordset recordSetInstance is assigned to the dataProvider property of myDataGrid. 6 5 4 3 2 1 1 DataGrid component 5 2 3 6 Did You Know? You can resize or copy the DataGrid. Select the Transform tool from the tool- box, and then use the resize nodes to change the width and height. To copy the DataGrid, select the Selection tool, hold down the Alt key (Win), Option key (Mac), and then drag the component. From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 449 Modify DataGrid Options Select the DataGrid component. Open the Properties panel, and then click the Component Parameters arrow to expand it. Select from the following DataGrid parameters: ◆ editable. When you select the check box, the field can be edited. If you deselect the check box, the field can be selected but not edited. ◆ mutipleSelection (2.0) or allowMultipleSelection (3.0). When you select the check box, the visitor can select more than one item. If you deselect the check box, the visitor can only select a single item. ◆ headerHeight (3.0). Click the Value field, and then enter a header height. ◆ rowHeight. Click the Value field, and then enter a number to determine the spacing between items in the list. The higher the value, the more space between items. ◆ horizontal or vertical ScrollPolicy (3.0). Click the Value field, and then select auto, on, or off to show or hide scroll bars. ◆ horizontal or vertical Line or Page ScrollSize (3.0). Click the Value field, and then enter a number for the scroll size. ◆ resizableColumns (3.0). When you select the check box, columns are resizeable. ◆ showHeaders (3.0). When you select the check box, headers are displayed. ◆ sortableColumns (3.0). When you select the check box, columns are sortable. 3 2 1 Editable field Multiple Selection field 3 2 From the Library of Wow! eBook ptg 450 Chapter 18 Using a Local Data Provider Use a Local Data Provider Open the Components panel. Click the User Interface arrow to expand the list. Drag the DataGrid component onto the Stage, and then select the component. Enter a unique instance name for the DataGrid component in the Property Inspector. Select Frame 1 in the actions layer in the Timeline. Open the Actions panel, and then enter the script as shown in the illustration. Click the Control menu, point to Test Movie, and then click Test. The name and home fields are the column headings for the DataGrid component, and the values fill the cells in each row. 7 6 5 4 3 2 1 The DataGrid component lets you provide data using a local (embedded in the document) data provider. The data is read into the grid from a pre-written ActionScript, and since Flash components are on the Stage, the ActionScript would typically be entered into the first frame of the Flash Timeline. It's smart programming to create a separate layer to hold the ActionScript for the DataGrid. That way you have much easier access to the script. 1 DataGrid component 5 32 Did You Know? You can use a Data Provider. Data Provider, such as adding data within an ActionScript, makes the Flash docu- ment display the same data every time the Flash document is displayed. You can always modify the data as the movie plays, by adding additional ActionScript instructions on the Timeline, and therefore, create a more dynamic Data Provider. 6 From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 451 1 Loader component 4 2 3 Adding a Loader Add a Loader Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the Loader (2.0) or UILoader (3.0) component onto the Stage, and then select the component. Select the Free Transform tool to size the Loader to the dimensions of the image file. Open the Properties panel, and then click the Component Parameters arrow to expand it. Enter the path to the JPG or SWF file in the contentPath value (2.0) or source (3.0) field. Click the Control menu, point to Test Movie, and then click Test. Flash displays the selected image in the Loader component. 7 6 5 4 3 2 1 5 4 The Loader component is a container that can display a .swf or a .jpg. You use the Loader component when you want to pull in external con- tent into a Flash movie. For example, you can bring in a product intro- duction (.swf) or a company logo (.jpg) at the beginning of a movie. In addition, you can scale the contents of the loader, or resize the loader itself, to accommodate the size of the contents. By default, the contents are scaled to fit. From the Library of Wow! eBook ptg 452 Chapter 18 The NumericStepper component allows a user to step through an ordered set of numbers. The component consists of a number displayed beside small up and down arrow buttons. You can decide the maximum and minimum values along with the step value. When the visitor clicks the up or down buttons, the value changes until the maximum or mini- mums are reached. As its name implies, the numeric stepper compo- nent only handles numbers, text or special characters are not allowed. The NumericStepper component has many uses; for example, a site that books rooms for a major hotel chain would use a stepper for letting the visitor indicate how many people are staying, or an airline for how many people are flying. Adding a Numeric Stepper Add a NumericStepper Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the NumericStepper component onto the Stage, and then select the component. Open the Properties panel, and then click the Component Parameters arrow to expand it. IMPORTANT The NumericStepper component can be used to change the properties of items on the stage. You could link a NumericStepper instance to the property value of a dynamic text box, and then use the stepper to change the size of the text. This can be useful for people who require larger, readable text. 4 3 2 1 1 2 3 NumericStepper component From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 453 Select from the following NumericStepper parameters: ◆ maximum. Click the Value field, and then enter the maximum value associated with the NumericStepper. ◆ minimum. Click the Value field, and then enter the minimum value associated with the NumericStepper. ◆ stepSize. Click the Value field, and then enter a numerical value for stepping between numbers. For example, a stepSize value of 2, would cause the values to step by 2 (2, 4, 6, 8). ◆ value. Click the Value field, and then enter the first number value that appears in the NumericStepper. ◆ enabled. When you select the check box, the field can be selected. If you deselect the check box, the field appears grayed out and is not selectable. ◆ visible. When you select the check box, the field can be viewed. If you deselect the check box, the field is invisible. ◆ minHeight (2.0). Click the Value field, and then enter a minimum height for the NumericStepper. ◆ minWidth (2.0). Click the Value field, and then enter a minimum width for the NumericStepper. Click the Control menu, point to Test Movie, and then click Test. 6 5 6 5 4 From the Library of Wow! eBook . ActionScript, and since Flash components are on the Stage, the ActionScript would typically be entered into the first frame of the Flash Timeline. It's. as adding data within an ActionScript, makes the Flash docu- ment display the same data every time the Flash document is displayed. You can always modify