当前位置： 文江博客话题详情

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

发布于 2024-12-13 09:16:45 字数 12334 浏览 0 评论 0原文

好吧，我知道这听起来不像是这样，但我曾经非常擅长 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";

随后新数据会反映在饼图中。

提前致谢

原文

OK, I know that this will not sound like it is so, but I used to be really good at AS3 in versions prior to Flex 4.

I used to be able to create anything with AS3 and zero MXML.

This works fine using MXML, but I have a series of issues when I try to do the same thing in AS3.

Below is the code for both:

<?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>

I can not figure out how to add an itemrenderer or how to import an fx:Component, etc...

How do I do the same thing in AS3?

In case you should ask "why?", then it is because I would like to create buttons that change the PieSeries field="budget" nameField="name" attribute's values by clicking on a button which calls a function to do something like this:

myPieSeries.field="expectedCosts";

Followed by the new data being reflected in the PieChart.

Thanks in advance

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

余厌 2024-12-20 09:16:45

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

这是一个可以查看的链接：
在此处输入链接说明

<?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>

OK, no errors once I figured out how to do the proper imports.

Here's a link to view:
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>
回复 原文
~没有更多了~

关于作者

别想她

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文