flex datagrid problem - apache-flex

i have a data grid in my application and am pulling data from a MYSQL DB using php.
is there a way to store all that data into an array and pass it to a function or is it possible to just store the data directly into an array instead of pulling it from the datagrid
here is the code
<mx:DataGrid id="dgUserRequest" x="150" y="10" dataProvider=" {userRequest.lastResult.users.user}" editable="false">
<mx:columns>
<mx:DataGridColumn headerText="UserID" dataField="userid"/>
<mx:DataGridColumn headerText="Ip Address" dataField="ip"/>
<mx:DataGridColumn headerText="latitude" dataField="lat"/>
<mx:DataGridColumn headerText="longitude" dataField="lng"/>
</mx:columns>
</mx:DataGrid>
<mx:HTTPService id="userRequest" url="http://localhost/post.php" useProxy="false" method="POST">
<mx:request xmlns="">
</mx:request>
</mx:HTTPService>

Add a listener to the "result" event of you HTTPService and have the code in the listener function fill a locally stored array.

something like this should help
[Bindable]
public var dp:ArrayCollection;
protected function samplePhp_resultHandler(event:ResultEvent):void
{
dp = event.result as ArrayCollection;
}
<mx:HTTPService id="userRequest" url="http://localhost/post.php" useProxy="false"
method="POST" result="samplePhp_resultHandler">
<mx:request xmlns="">

Related

How to Reset a Arraycollection and Reinitialize and Overwrite the Arraycollection and refresh datagrid in FLEX 4

I am listing an Arraycollection in a datagrid using flex and inside the datagrid I have a button to delete a row, after that I re-assign the same Arraycollection again by fetching an array from a java service
My Code:
<mx:DataGrid width="100%" height="100%" dataProvider="{xxx}" >
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="status" headerText="Status"/>
<mx:DataGridColumn dataField="path" headerTeUxt="Actions" wordWrap="true" minWidth="120">
<mx:itemRenderer>
<mx:Component>
<mx:Script>
<![CDATA[
protected function deliteminlist(event:MouseEvent):void
{
//delete a value in arrayCollection
//Fetch the array collection from java Service
//assigning to variable dataprovider variable
_view.xxx = null;
_view.xxx = temp;
//xxx is the arraycollection and dataprovider for the datagrid
}
]]>
</mx:Script>
<mx:Image source="#Embed(source='/assets/images/clone.png')" click="deliteminlist(event)" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
This is throwing an error (An internal error has occurred - Error #1010.
) and data is not refreshing in the datagrid.
You are using inline item renderer. Its scope is different from the parent view so that you can't reference _view.xxx ( not in scope ).
You can try outerDocument keyword to solve this problem.
outerDocument.xxx = null;
outerDocument.xxx = temp;

Event handler associated to DataGrid row in Flex

I'm loading some images from a database using a PHP script through CodeIgniter, but when I try to add an event handler to do some stuff with these images, Flex compiler is showing me an error:
1180: Call to a possibly undefined method cloneCar.
Why I can not add an event handler in this context?
<mx:Accordion>
<mx:Form id="menu5" label="Prueba" width="100%" height="100%" backgroundColor="#707070" icon="{roadIcon}">
<mx:DataGrid x="251" y="95" dataProvider="{traffic_signals.lastResult..signal}"
showHeaders="false"
horizontalGridLines="false"
selectionColor="#707070"
themeColor="#707070"
alternatingItemColors="[#707070, #707070]"
borderColor="#707070"
rollOverColor="#707070">
<mx:columns>
<mx:DataGridColumn dataField="source" >
<mx:itemRenderer >
<mx:Component >
<mx:Image width="94" height="94" mouseDown="cloneCar(event)"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Form>
</mx:Accordion>
Without mouseDown sentence, everything works fine, but I need to allow drag 'n' drop (and other features) with these images.
Thanks!
EDIT:
cloneCar method defined like this:
private function cloneCar(e:MouseEvent):void
{
// do stuff
}
I solved my own problem. As 'awq' said, ItemRenderer scope is independent of global scope, so I need to declare my event handler function as public and link to it in mouseDown event using outerDocument directive:
public function cloneCar(e:MouseEvent):void
{
// do stuff
}
....
<mx:itemRenderer >
<mx:Component >
<mx:Image width="94" height="94" mouseDown="outerDocument.cloneCar(event)"/>
</mx:Component>
</mx:itemRenderer>

advanced datagrid

Can anyone provide me with an example of how to use the advanced datagrid in Flex?
I am trying to get the values from a database and construct the hierarchial data. In particular, constructing the dynamic hierarchal data for advanced datagrid.
There are some examples in the official documentation: http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_07.html
You might also be interested in the HierarchicalData class: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/HierarchicalData.html
You can try this
<mx:AdvancedDataGrid left="0"
right="0"
top="0"
bottom="35"
allowMultipleSelection="false"
folderClosedIcon="{null}"
folderOpenIcon="{null}"
defaultLeafIcon="{null}"
displayItemsExpanded="true"
dataTipFunction="testTip"
sortExpertMode="true" variableRowHeight="true" wordWrap="true">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierrarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Result Name"
dataField="resultName"
width="150"
/>
<mx:AdvancedDataGridColumn headerText="Run Date"
dataField="runDate"
/>
<mx:AdvancedDataGridColumn headerText="File Count"
dataField="fileCount"
width="300"
/>
</mx:columns>
</mx:AdvancedDataGrid>
Form the "dpHierrarchy" from the result obtained from the service result as given below:
[ArrayElementType("ResultsVO")]
public var dpHierrarchy:ArrayCollection = new ArrayCollection();
public function createHierarchialResultVO(results:ArrayCollection):void
{
for each(var result:Result in results)
{
var resultVO:ResultsVO= new ResultsVO();
resultVO.resultName = result.resultName;
resultVO.runDate = result.runDate.toString();
resultVO.type="header";
var childrens:ArrayCollection = new ArrayCollection();
for each(var processDetails:ProcessDetails in result.details)
{
var children:ResultsVO= new ResultsVO();
children.files =result.fileCount;
children.status=result.status;
children.type="result";
}
resultVO.children =children;
dpHierrarchy.addItem(resultVO);
}
//return dpHierrarchy;
}
The advanced datagrid will look like this

Flex datagrid component and aggregated classes

I have the following question regarding Flex/AIR data grids:
Can I access the value of a var of one aggregated object as a dataField of a column of the DataGrid?
What I would like to have is:
public class A {
public var id:String;
}
public class B {
public var a:A;
public var value:uint;
}
<mx:DataGrid id="grid" dataProvider="{items}">
<mx:columns>
<mx:DataGridColumn headerText="aId" dataField="a.id"/>
<mx:DataGridColumn headerText="value" dataField="value"/>
</mx:columns>
</mx:DataGrid>
items is an ArrayCollections of B's.
From what I have read and looked in the code for the DataGridColumn this 'a.id' does not work as that value is taken from the data object using the array syntax data[key], I have tried to use a custom item renderer but that did not work either.
Could I get some help with this? I am trying to figure out Flex as home project and I just started out.
After some more tries got the problem solved.
<mx:DataGrid id="grid" dataProvider="{items}">
<mx:columns>
<mx:DataGridColumn headerText="aId">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.a.id}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="value" dataField="value"/>
</mx:columns>
</mx:DataGrid>

How to Connect Flex to HTTP

I have created a project in Flex Builder 3 and I do not think it is connecting to the HTTP I have assigned. It is a blog application, that is connected to a database with a PHP page. When I view the application on a HTML page, the text fields are not editable--you cannot type in them. This leads me to believe that I have assigned the HTTP incorrectly. Could this be the problem? How do I fix this?
Are you able to dsplay any data in your DataGrid?
If you set a break point in your getData HTTPService, can you catch it? In other words, is it getting called? Or, is there a fault? Add a Fault handler like this:
result="getPHPData(event)" fault="getFault(event)"
and define getFault().
Below is some of the mxml code that I am using. I am not getting any errors about not being able to connect to the database, so I don't think anything is wrong with the PHP.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="535" height="345">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.controls.TextInput;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import com.adobe.serialization.json.JSON;
[Bindable]
private var dataArray:ArrayCollection;
private function initDataGrid():void
{
dataArray = new ArrayCollection();
getData.send();
}
private function getPHPData(event:ResultEvent):void
{
var rawArray:Array;
var rawData:String = String(event.result);
rawArray = JSON.decode(rawData) as Array;
dataArray = new ArrayCollection(rawArray);
}
private function sendPHPData():void
{
var objSend:Object = new Object();
var dataString:String = JSON.encode(dataArray.toArray());
dataString = escape(dataString);
objSend.setTutorials = "true";
objSend.jsonSendData = dataString;
sendData.send(objSend);
}
private function updatedPHPDataResult(event:ResultEvent):void
{
lblStatus.text = String(event.result);
}
private function checkRating(event:DataGridEvent):void
{
var txtIn:TextInput = TextInput(event.currentTarget.itemEditorInstance);
var curValue:Number = Number(txtIn.text);
if(isNaN(curValue) || curValue < 0 || curValue > 10)
{
event.preventDefault();
lblStatus.text = "Please enter a number rating between 0 and 10";
}
}
]]>
</mx:Script>
<mx:HTTPService id="getData" url="/keishalexie/imd465/forum.php"
useProxy="false" method="GET" resultFormat="text"
result="getPHPData(event)">
<mx:request xmlns="">
<getTutorials>"true"</getTutorials>
</mx:request>
</mx:HTTPService>
<mx:HTTPService id="sendData" url="/keishalexie/imd465/forum.php"
useProxy="false" method="GET" resultFormat="text"
result="updatedPHPDataResult(event)">
</mx:HTTPService>
<mx:Binding source="dgData.dataProvider as ArrayCollection"
destination="dataArray"/>
<mx:Panel x="0" y="0" width="535" height="345" layout="absolute"
title="Forum">
<mx:DataGrid id="dgData" x="10" y="10" width="495" height="241"
dataProvider="{dataArray}" creationComplete="{initDataGrid()}"
editable="true" itemEditEnd="{checkRating(event)}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" editable="false"/>
<mx:DataGridColumn headerText="Author" dataField="author" width="115"
editable="false"/>
<mx:DataGridColumn headerText="Rating" dataField="rating" width="50"
editable="true" />
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="259" label="UpdateDatabase" id="butUpdate"
click="{sendPHPData()}"/>
<mx:Label x="140" y="261" id="lblStatus"/>
</mx:Panel>
</mx:Application>

Resources