需要在 Flex 4 中使用 AS3 创建数据网格和饼图

Question

好吧，我知道这听起来不像是这样，但在 Flex 4 之前的版本中，我曾经非常擅长 AS3。

我曾经能够使用 AS3 和零 MXML 创建任何东西。

使用 MXML 可以正常工作，但是当我尝试在 AS3 中做同样的事情时，我遇到了一系列问题。

以下是两者的代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           minWidth="640"
           minHeight="480"
           width="100%" height="100%"
           creationComplete="creationCompleteHandler();">

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->

    <mx:RemoteObject id="remotesvc" destination="ColdFusion" source="testCF-debug/cfc/myEmployees" showBusyCursor="true">
        <mx:method name="getEmployees" result="getEmployeesResult(event)" fault="getEmployeesFail(event)"/>
    </mx:RemoteObject>

    <mx:RemoteObject id="remoteDepartment" destination="ColdFusion" source="testCF-debug/cfc/myDepartments" showBusyCursor="true">
        <mx:method name="getDepartments" result="getDepartmentsResult(event)" fault="getDepartmentsFail(event)"/>
    </mx:RemoteObject>

</fx:Declarations>

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    .headerCustomStyle
    {
        color: #ffffff;
        backgroundColor: #6b6767;
    }
</fx:Style>

<fx:Script>
    <![CDATA[
        import mx.charts.Legend;
        import mx.charts.PieChart;
        import mx.collections.ArrayCollection;
        import mx.containers.HBox;
        import mx.controls.Alert;
        import mx.controls.DataGrid;
        import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;


        private var dgHeaderStyles:CSSStyleDeclaration;

        [Bindable] private var myUsers:ArrayCollection;

        public function init():void{

        }

        private function getEmployeesResult(event:ResultEvent):void {
            employeesDg.dataProvider = event.result as ArrayCollection;
        }

        private function getEmployeesFail(event:FaultEvent):void {
            Alert.show(event.toString());
        }

        private function getDepartmentsResult(event:ResultEvent):void {
            departmentChart.dataProvider = event.result as ArrayCollection;
        }

        private function getDepartmentsFail(event:FaultEvent):void {
            Alert.show(event.toString());
        }

        private function creationCompleteHandler():void{
            remotesvc.getEmployees();
            remoteDepartment.getDepartments();
        }

    ]]>
</fx:Script>



<s:Panel title="Employees and Departments" id="empDept">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <mx:DataGrid id="employeesDg" x="10" y="88" headerStyleName="headerCustomStyle" chromeColor="{0x6b6767}">
        <mx:columns>
            <mx:DataGridColumn dataField="id" />
            <mx:DataGridColumn dataField="firstname" />
            <mx:DataGridColumn dataField="lastname" />
            <mx:DataGridColumn dataField="title" />
            <mx:DataGridColumn dataField="departmentid" />
            <mx:DataGridColumn dataField="officephone" />
            <mx:DataGridColumn dataField="cellphone" />
            <mx:DataGridColumn dataField="email" />
            <mx:DataGridColumn dataField="street" />
            <mx:DataGridColumn dataField="city" />
            <mx:DataGridColumn dataField="state" />
            <mx:DataGridColumn dataField="zipcode" />
            <mx:DataGridColumn dataField="office" />
            <mx:DataGridColumn dataField="photofile">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:Image height="20" />
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

    <mx:HBox>
        <mx:PieChart id="departmentChart" height="100%" width="100%">
            <mx:series>
                <mx:PieSeries field="budget" nameField="name" labelPosition="callout">

                </mx:PieSeries>
            </mx:series>
        </mx:PieChart>
        <mx:Legend dataProvider="{departmentChart}" />
    </mx:HBox>


</s:Panel>

</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           minWidth="640"
           minHeight="480"
           width="100%" height="100%"
           creationComplete="creationCompleteHandler();">

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->

    <mx:RemoteObject id="remotesvc" destination="ColdFusion" source="testCF-debug/cfc/myEmployees" showBusyCursor="true">
        <mx:method name="getEmployees" result="getEmployeesResult(event)" fault="getEmployeesFail(event)"/>
    </mx:RemoteObject>

    <mx:RemoteObject id="remoteDepartment" destination="ColdFusion" source="testCF-debug/cfc/myDepartments" showBusyCursor="true">
        <mx:method name="getDepartments" result="getDepartmentsResult(event)" fault="getDepartmentsFail(event)"/>
    </mx:RemoteObject>

</fx:Declarations>

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    .headerCustomStyle
    {
        color: #ffffff;
        backgroundColor: #6b6767;
    }
</fx:Style>

<fx:Script>
    <![CDATA[
        import flash.utils.flash_proxy;

        import mx.charts.Legend;
        import mx.charts.PieChart;
        import mx.charts.chartClasses.Series;
        import mx.charts.series.ColumnSeries;
        import mx.charts.series.PieSeries;
        import mx.collections.ArrayCollection;
        import mx.containers.HBox;
        import mx.controls.Alert;
        import mx.controls.DataGrid;
        import mx.controls.dataGridClasses.DataGridColumn;
        import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;


        private var employeesDg:DataGrid;
        private var employeesCol1:DataGridColumn;
        private var employeesCol2:DataGridColumn;
        private var employeesCol3:DataGridColumn;
        private var employeesCol4:DataGridColumn;
        private var employeesCol5:DataGridColumn;
        private var employeesCol6:DataGridColumn;
        private var employeesCol7:DataGridColumn;
        private var employeesCol8:DataGridColumn;
        private var employeesCol9:DataGridColumn;
        private var employeesCol10:DataGridColumn;
        private var employeesCol11:DataGridColumn;
        private var employeesCol12:DataGridColumn;
        private var employeesCol13:DataGridColumn;
        private var employeesCol14:DataGridColumn;


        private var departmentChart:PieChart;
        private var departmentChartPieSeries:PieSeries;
        private var departmentChartSeries:Series;
        private var departmentLegend:Legend;
        private var departmentChartHbox:HBox;

        private var dgHeaderStyles:CSSStyleDeclaration;

        [Bindable] private var myUsers:ArrayCollection;

        public function init():void{
            departmentChartHbox = new HBox();
            departmentChartHbox.id = "departmentChartHbox";

            employeesDg = new DataGrid();
            employeesDg.id = "employeesDg";
            employeesDg.x = 10;
            employeesDg.y = 88;
            employeesDg.styleName = "";
            // employeesDg.headerStyleName="headerCustomStyle";
            employeesDg.chromeColor="{0x6b6767}";

            employeesCol1 = new DataGridColumn;
            employeesCol2 = new DataGridColumn;
            employeesCol3 = new DataGridColumn;
            employeesCol4 = new DataGridColumn;
            employeesCol5 = new DataGridColumn;
            employeesCol6 = new DataGridColumn;
            employeesCol7 = new DataGridColumn;
            employeesCol8 = new DataGridColumn;
            employeesCol9 = new DataGridColumn;
            employeesCol10 = new DataGridColumn;
            employeesCol11 = new DataGridColumn;
            employeesCol12 = new DataGridColumn;
            employeesCol13 = new DataGridColumn;
            employeesCol14 = new DataGridColumn;

            employeesCol1.dataField = "id";
            employeesCol2.dataField = "firstname";
            employeesCol3.dataField = "lastname";
            employeesCol4.dataField = "title";
            employeesCol5.dataField = "departmentid";
            employeesCol6.dataField = "officephone";
            employeesCol7.dataField = "cellphone";
            employeesCol8.dataField = "email";
            employeesCol9.dataField = "street";
            employeesCol10.dataField = "city";
            employeesCol11.dataField = "state";
            employeesCol12.dataField = "zipcode";
            employeesCol13.dataField = "office";
            employeesCol14.dataField = "photofile";

            employeesCol14.itemRenderer;

            employeesDg.addChild(employeesCol1);
            employeesDg.addChild(employeesCol2);
            employeesDg.addChild(employeesCol3);
            employeesDg.addChild(employeesCol4);
            employeesDg.addChild(employeesCol5);
            employeesDg.addChild(employeesCol6);
            employeesDg.addChild(employeesCol7);
            employeesDg.addChild(employeesCol8);
            employeesDg.addChild(employeesCol9);
            employeesDg.addChild(employeesCol10);
            employeesDg.addChild(employeesCol11);
            employeesDg.addChild(employeesCol12);
            employeesDg.addChild(employeesCol13);
            employeesDg.addChild(employeesCol14);


            departmentChartHbox.addChild(employeesDg);


            departmentChart = new PieChart();
            departmentChart.id = "departmentChart";
            departmentChart.height = 320;
            departmentChart.width = 240;

            departmentChartSeries = new Series();
            departmentChart.addChild(departmentChartSeries);

            departmentChartPieSeries = new PieSeries();
            departmentChartPieSeries.field = "budget";
            departmentChartPieSeries.nameField = "name";
            // departmentChartPieSeries.labelPosition = "callout";
            departmentChartSeries.addChild(departmentChartPieSeries);

            departmentLegend = new Legend();
            departmentLegend.dataProvider = departmentChart;
            departmentLegend.id = "departmentLegend";

            departmentChartHbox.addChild(departmentChart);
            departmentChartHbox.addChild(departmentLegend);

            empDept.addChild(departmentChartHbox);

        }

        private function getEmployeesResult(event:ResultEvent):void {
            employeesDg.dataProvider = event.result as ArrayCollection;
        }

        private function getEmployeesFail(event:FaultEvent):void {
            Alert.show(event.toString());
        }

        private function getDepartmentsResult(event:ResultEvent):void {
            departmentChart.dataProvider = event.result as ArrayCollection;
        }

        private function getDepartmentsFail(event:FaultEvent):void {
            Alert.show(event.toString());
        }

        private function creationCompleteHandler():void{
            remotesvc.getEmployees();
            remoteDepartment.getDepartments();
        }

    ]]>
</fx:Script>



<s:Panel title="Employees and Departments" id="empDept">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>


</s:Panel>

</s:Application>

我不知道如何添加 itemrenderer 或如何导入 fx:Component 等...

我如何在 AS3 中做同样的事情？

如果您应该问“为什么？”，那是因为我想通过单击调用函数的按钮来创建更改 PieSeries field="budget" nameField="name" 属性值的按钮像这样：

myPieSeries.field="expectedCosts"; 

紧随其后的是饼图中反映的新数据。

提前致谢

Answer 1

好的，一旦我弄清楚如何进行正确的导入，就没有错误了。

这是一个查看链接： enter link description here

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           minWidth="1280"
           minHeight="1024"
           width="100%" height="100%"
           creationComplete="init();creationCompleteHandler();">

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->

    <mx:RemoteObject id="remotesvc" destination="ColdFusion" source="testCF/cfc/myEmployees" showBusyCursor="true">
        <mx:method name="getEmployees" result="getEmployeesResult(event)" fault="getEmployeesFail(event)"/>
    </mx:RemoteObject>

    <mx:RemoteObject id="remoteDepartment" destination="ColdFusion" source="testCF/cfc/myDepartments" showBusyCursor="true">
        <mx:method name="getDepartments" result="getDepartmentsResult(event)" fault="getDepartmentsFail(event)"/>
    </mx:RemoteObject>

</fx:Declarations>

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    .headerCustomStyle
    {
        color: #ffffff;
        backgroundColor: #6b6767;
    }
</fx:Style>

<fx:Script>
    <![CDATA[
        import mx.charts.Legend;
        import mx.charts.PieChart;
        import mx.charts.chartClasses.Series;
        import mx.charts.series.*;
        import mx.charts.series.PieSeries;
        import mx.collections.ArrayCollection;
        import mx.containers.HBox;
        import mx.containers.Panel;
        import mx.containers.VBox;
        import mx.controls.Alert;
        import mx.controls.Button;
        import mx.controls.DataGrid;
        import mx.controls.Image;
        import mx.controls.Label;
        import mx.controls.dataGridClasses.DataGridColumn;
        import mx.core.ComponentDescriptor;
        import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;

        import spark.components.supportClasses.ItemRenderer;
        import spark.layouts.VerticalLayout;



        public var empDeptLabel:Label;

        private var employeesDg:DataGrid;
        private var employeesCol1:DataGridColumn;
        private var employeesCol2:DataGridColumn;
        private var employeesCol3:DataGridColumn;
        private var employeesCol4:DataGridColumn;
        private var employeesCol5:DataGridColumn;
        private var employeesCol6:DataGridColumn;
        private var employeesCol7:DataGridColumn;
        private var employeesCol8:DataGridColumn;
        private var employeesCol9:DataGridColumn;
        private var employeesCol10:DataGridColumn;
        private var employeesCol11:DataGridColumn;
        private var employeesCol12:DataGridColumn;
        private var employeesCol13:DataGridColumn;
        private var employeesCol14:DataGridColumn;
        private var employeesDgItemRend:ItemRenderer;
        private var employeesDgComp:ComponentDescriptor;
        private var employeesDgImg:Image;



        private var departmentChart:PieChart;
        private var departmentChartPieSeries:PieSeries;
        private var departmentChartSeries:Series;
        private var departmentLegend:Legend;

        /*************************************
         * Buttons
         * ***********************************/
        private var departBudgetBtn:Button;
        private var departActualExpensesBtn:Button;
        private var departEstSalaryBtn:Button;
        private var departActualSalaryBtn:Button;
        private var departEstTravelBtn:Button;
        private var departActualTravelBtn:Button;

        private var departmentChartHbox:HBox;
        private var departmentChartVbox:VBox;


        private var dgHeaderStyles:CSSStyleDeclaration;

        [Bindable] private var myUsers:ArrayCollection;

        public function init():void{
            departmentChartVbox = new VBox();
            departmentChartVbox.id = "departmentChartVbox";

            /*************************************
             * Employee DataGrid
             * ***********************************/
            empDeptLabel = new Label();
            empDeptLabel.id = "empDeptLabel";
            empDeptLabel.text = "Budget";
            empDeptLabel.percentWidth = 100;
            empDeptLabel.setStyle("textAlign","center");
            empDeptLabel.setStyle("fontSize", 18);
            empDeptLabel.setStyle("fontWeight","bold");

            employeesDg = new DataGrid();
            employeesDg.id = "employeesDg";
            employeesDg.x = 10;
            employeesDg.y = 88;
            employeesDg.height = 200;
            employeesDg.styleName = "";
            employeesDg.setStyle("headerStyleName",".headerCustomStyle");
            employeesDg.setStyle("chromeColor", 0x6b6767);


            employeesCol1 = new DataGridColumn;
            employeesCol2 = new DataGridColumn;
            employeesCol3 = new DataGridColumn;
            employeesCol4 = new DataGridColumn;
            employeesCol5 = new DataGridColumn;
            employeesCol6 = new DataGridColumn;
            employeesCol7 = new DataGridColumn;
            employeesCol8 = new DataGridColumn;
            employeesCol9 = new DataGridColumn;
            employeesCol10 = new DataGridColumn;
            employeesCol11 = new DataGridColumn;
            employeesCol12 = new DataGridColumn;
            employeesCol13 = new DataGridColumn;
            employeesCol14 = new DataGridColumn;

            employeesCol1.dataField = "id";
            employeesCol2.dataField = "firstname";
            employeesCol3.dataField = "lastname";
            employeesCol4.dataField = "title";
            employeesCol5.dataField = "departmentid";
            employeesCol6.dataField = "officephone";
            employeesCol7.dataField = "cellphone";
            employeesCol8.dataField = "email";
            employeesCol9.dataField = "street";
            employeesCol10.dataField = "city";
            employeesCol11.dataField = "state";
            employeesCol12.dataField = "zipcode";
            employeesCol13.dataField = "office";
            employeesCol14.dataField = "photofile";

            employeesDgImg = new Image;
            employeesDgItemRend = new ItemRenderer;
            employeesDgItemRend.id = "myemployeesDgItemRend";
            employeesCol14.itemRenderer = new ClassFactory(mx.controls.Image);

            employeesDg.columns = [employeesCol1,employeesCol2,employeesCol3,employeesCol4,employeesCol5,employeesCol6,employeesCol7,employeesCol8,employeesCol9,employeesCol10,employeesCol11,employeesCol12,employeesCol13,employeesCol14];               

            /*************************************
             * Department Pie Chart
             * ***********************************/
            departmentChart = new PieChart();
            departmentChart.id = "departmentChart";
            departmentChart.percentWidth = 100;
            departmentChart.percentHeight = 100;

            departmentChartPieSeries = new PieSeries();
            departmentChartPieSeries.field = "budget";
            departmentChartPieSeries.nameField = "name";
            departmentChartPieSeries.setStyle("labelPosition","callout");
            departmentChart.series.push(departmentChartPieSeries);

            /*************************************
             * Legend
             * ***********************************/             
            departmentLegend = new Legend();
            departmentLegend.dataProvider = departmentChart;
            departmentLegend.id = "departmentLegend";

            departmentChartHbox = new HBox();

            /*************************************
             * Buttons
             * ***********************************/
            departBudgetBtn = new Button();
            departBudgetBtn.label = "Budget";
            departBudgetBtn.id = "budgetBtn";
            departBudgetBtn.addEventListener(MouseEvent.CLICK,whichCategory);

            departActualExpensesBtn = new Button();
            departActualExpensesBtn.label = "Actual Expenses";
            departActualExpensesBtn.id = "actualExpensesBtn";
            departActualExpensesBtn.addEventListener(MouseEvent.CLICK,whichCategory);

            departEstSalaryBtn = new Button();
            departEstSalaryBtn.label = "Estimated Salary";
            departEstSalaryBtn.id = "estsalaryBtn";
            departEstSalaryBtn.addEventListener(MouseEvent.CLICK,whichCategory);

            departActualSalaryBtn = new Button();
            departActualSalaryBtn.label = "Actual Salary";
            departActualSalaryBtn.id = "actualsalaryBtn";
            departActualSalaryBtn.addEventListener(MouseEvent.CLICK,whichCategory);

            departEstTravelBtn = new Button();
            departEstTravelBtn.label = "Estimated Travel";
            departEstTravelBtn.id = "esttravelBtn";
            departEstTravelBtn.addEventListener(MouseEvent.CLICK,whichCategory);

            departActualTravelBtn = new Button();
            departActualTravelBtn.label = "Actual Travel";
            departActualTravelBtn.id = "actualtravelBtn";
            departActualTravelBtn.addEventListener(MouseEvent.CLICK,whichCategory);             

            /*************************************
             * Vbox and Hbox addChild
             * ***********************************/
            departmentChartVbox.addChild(employeesDg);

            departmentChartVbox.addChild(empDeptLabel);

            departmentChartVbox.addChild(departmentChart);
            departmentChartVbox.addChild(departmentLegend);

            /*************************************
             * add buttons
             * ***********************************/
            departmentChartHbox.addChild(departBudgetBtn);
            departmentChartHbox.addChild(departActualExpensesBtn);
            departmentChartHbox.addChild(departEstSalaryBtn);
            departmentChartHbox.addChild(departActualSalaryBtn);
            departmentChartHbox.addChild(departEstTravelBtn);
            departmentChartHbox.addChild(departActualTravelBtn);

            departmentChartVbox.addChild(departmentChartHbox);

            empDept.addChild(departmentChartVbox);

        }

        private function getEmployeesResult(event:ResultEvent):void {
            employeesDg.dataProvider = event.result as ArrayCollection;
        }

        private function getEmployeesFail(event:FaultEvent):void {
            Alert.show(event.toString());
        }

        private function getDepartmentsResult(event:ResultEvent):void {
            departmentChart.dataProvider = event.result as ArrayCollection;
        }

        private function getDepartmentsFail(event:FaultEvent):void {
            Alert.show(event.toString());
        }

        private function creationCompleteHandler():void{
            remotesvc.getEmployees();
            remoteDepartment.getDepartments();
        }


        private function whichCategory(event:MouseEvent):void{
            // Alert.show(event.currentTarget.id.toString());
            switch(event.currentTarget.id.toString())
            {
                case "budgetBtn":
                    departmentChartPieSeries.field = "budget";
                    departmentChartPieSeries.nameField = "name";
                    departmentChartPieSeries.setStyle("labelPosition","callout");
                    empDeptLabel.text = "Budget";
                    break;
                case "actualExpensesBtn":
                    departmentChartPieSeries.field = "actualexpenses";
                    departmentChartPieSeries.nameField = "name";
                    departmentChartPieSeries.setStyle("labelPosition","callout");
                    empDeptLabel.text = "Actual Expenses";
                    break;
                case "estsalaryBtn":
                    departmentChartPieSeries.field = "estsalary";
                    departmentChartPieSeries.nameField = "name";
                    departmentChartPieSeries.setStyle("labelPosition","callout");
                    empDeptLabel.text = "Estimated Salary";
                    break;
                case "actualsalaryBtn":
                    departmentChartPieSeries.field = "actualsalary";
                    departmentChartPieSeries.nameField = "name";
                    departmentChartPieSeries.setStyle("labelPosition","callout");
                    empDeptLabel.text = "Actual Salary";
                    break;
                case "esttravelBtn":
                    departmentChartPieSeries.field = "esttravel";
                    departmentChartPieSeries.nameField = "name";
                    departmentChartPieSeries.setStyle("labelPosition","callout");
                    empDeptLabel.text = "Estimated Travel";
                    break;
                case "actualtravelBtn":
                    departmentChartPieSeries.field = "actualtravel";
                    departmentChartPieSeries.nameField = "name";
                    departmentChartPieSeries.setStyle("labelPosition","callout");
                    empDeptLabel.text = "Actual Travel";
                    break;
                default:
                    departmentChartPieSeries.field = "budget";
                    departmentChartPieSeries.nameField = "name";
                    departmentChartPieSeries.setStyle("labelPosition","callout");
                    empDeptLabel.text = "Budget";                       
                    break;
            }

            departmentChart.validateNow();
        }
    ]]>
</fx:Script>



<mx:Panel title="Employees and Departments" id="empDept">



</mx:Panel>

</s:Application>