Нужно создать сетку данных и круговые диаграммы с AS3 в Flex 4 - PullRequest
Новая
       33

Нужно создать сетку данных и круговые диаграммы с AS3 в Flex 4

0 голосов
/ 01 ноября 2011

Хорошо, я знаю, что это не будет звучать так, но я имел обыкновение быть действительно хорошим в AS3 в версиях до Flex 4.

Раньше я мог создавать что-нибудь с 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>

Не могу понять, как добавить элементарендер или как импортировать FX: компонент и т. Д. *

Как мне сделать то же самое в AS3?

Если вам нужно спросить «почему?», То это потому, что я хотел бы создать кнопки, которые изменяют значения атрибута PieSeries field = "budget" nameField = "name", нажимая кнопку, которая вызывает функцию для выполнения чего-то подобного: 

myPieSeries.field="expectedCosts";

После чего новые данные отражаются в круговой диаграмме.

Заранее спасибо

1 Ответ

0 голосов
/ 02 ноября 2011

ОК, без ошибок, когда я понял, как правильно импортировать.

Вот ссылка для просмотра: введите описание ссылки здесь 

<?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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...