[英]Need to create datagrid and piecharts with AS3 in Flex 4
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. 好的,我知道这听起来并非如此,但是在Flex 4之前的版本中,我曾经非常擅长AS3。
I used to be able to create anything with AS3 and zero MXML. 我曾经能够使用AS3和零个MXML创建任何东西。
This works fine using MXML, but I have a series of issues when I try to do the same thing in AS3. 使用MXML可以正常工作,但是当我尝试在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... 我不知道如何添加itemrenderer或如何导入fx:Component等。
How do I do the same thing in AS3? 在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: 如果您应该问“为什么?”,那是因为我想创建按钮来更改PieSeries field =“ budget” nameField =“ name”属性的值,方法是单击按钮,该按钮调用一个函数来执行以下操作:
myPieSeries.field="expectedCosts";
Followed by the new data being reflected in the PieChart. 随后,新数据将反映在PieChart中。
Thanks in advance 提前致谢
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.