How to display images from FileReferenceList? - apache-flex

I have a FileReferenceList from which I'd like to display images in a DataGrid; currently I'm getting the following error: Only one download, upload, load or save operation can be active at a time on each FileReference. Following is my code; anyone know how to resolve the error I'm getting? Thanks.
Here is my DataGrid:
<s:Panel>
<mx:DataGrid id="imageGrid" width="100%" height="100%" dataProvider="{imageFiles}">
<mx:columns>
<mx:DataGridColumn itemRenderer="renderers.GridImgRenderer" headerText="Image"/>
<mx:DataGridColumn dataField="name" headerText="Image Name"/>
<mx:DataGridColumn dataField="size" headerText="Image Size"/>
</mx:columns>
</mx:DataGrid>
<s:controlBarContent>
<s:Button id="browse" label="Browse" click="browseHandler(event)"/>
<s:Button id="upload" label="Upload"/>
</s:controlBarContent>
<s:controlBarLayout>
<s:HorizontalLayout horizontalAlign="center" paddingBottom="5" paddingTop="5"/>
</s:controlBarLayout>
</s:Panel>
Here's my renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" creationComplete="init()">
<fx:Script>
<![CDATA[
private function init():void
{
data.addEventListener(Event.COMPLETE, function(event:Event):void
{
imagePreview.source = event.target.data;
});
data.load();
}
]]>
</fx:Script>
<mx:Image id="imagePreview" width="200" maintainAspectRatio="true" scaleContent="true"/>
</s:MXDataGridItemRenderer>

Try this It May help You.
http://blog.snowflax.com/multiple-image-browse-using-filereferencelist-in-flex/

Well for starters, your renderer is wrong. You'll run into problems when they are recycled.
To answer your main question, you are probably running into the security issue around file access and user initiated events.
Its a thorny issue and I suggest reading the documentation on it!

Related

Why I get "Error #1069: Property softKeyboardRect not found on flash.display.Stage and there is no default value." when I add a DateField component?

I am trying to add a DateField component to my flex application but when I click on it I get this runtime error:
[Fault] exception, information=ReferenceError: Error #1069: Property softKeyboardRect not found on flash.display.Stage and there is no default value.
It works ok if I do in a simple application and I add the DateField on it but it does not work when I add it on another application.
<mx: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"
color="#333333"
creationComplete="init()">
.... action script code.....
<fx:Declarations>
.............
</fx:Declarations>
<mx:Panel id="MainPanel" title="MyApp" height="1000" width="1100" layout="horizontal" verticalScrollPolicy="auto" >
<mx:HBox id="HBoxHeader" >
<mx:DateField id="StartDate">
</mx:DateField>
</mx:HBox>
<mx:VBox id = "VBoxGroupHeader_LB" height="950" width="250" verticalScrollPolicy="on" visible="true" horizontalAlign="center">
<mx:Label id="groupLable_LB" text="GROUPS" />
<mx:LinkBar id="linkBarGroup" direction="vertical" horizontalAlign="center" itemClick="getMembers(String(event.label))"/>
</mx:VBox>
<mx:VBox id = "VBoxMembersHeader_LB" height="950" width="250" verticalScrollPolicy="on" visible="true" horizontalAlign="center">
<mx:Label id="memberLabel_LB" text="MEMBERS" />
<mx:LinkBar id="linkBarMember" direction="vertical" horizontalAlign="center" itemClick="getMemberTypes('stats.' + activeGroup + '.' + String(event.label))"/>
</mx:VBox>
<mx:VBox id = "VBoxGraphs" height="950" width="580" verticalScrollPolicy="on" visible="true">
</mx:VBox>
</mx:Panel>
Any idea of what might cause this problem?
Thanks
you are targeting older flash player, if you are using SDK 4.6 you need at least flash player 11.1.

Trying to get global y coordinate of datagrid selecteditem

Here's the situation:
I have a populated datagrid and I want to move a form to be inline (same y position) with the datagrid's selectedItem. I cannot rely on a mouseClick event because the selected item may change with a keyboard event. The datagrid does not have an itemRenderer, just plain old dataField.
Anyone done this before?
Here's some stubbed out example code for all those interested based on Jacob's answer.
<?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="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.events.ListEvent;
import mx.formatters.DateFormatter;
[Bindable] public var ac_POitems:ArrayCollection = new ArrayCollection();
[Bindable] public var selectedY:int;
protected function dg_POitems_creationCompleteHandler(event:FlexEvent):void
{
//TODO
}
protected function submit_clickHandler(event:MouseEvent):void
{
//TODO
}
protected function format_sqlite_date(item:Object, col:DataGridColumn):String
{
var df:DateFormatter = new DateFormatter();
df.formatString = "MM/DD/YYYY";
var value:Object = item[col.dataField];
return df.format(value);
}
protected function dg_POitems_changeHandler(event:ListEvent):void
{
trace(event.itemRenderer.y);
selectedY = event.itemRenderer.y;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:VBox width="100%" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
<mx:DataGrid id="dg_POitems" dataProvider="{ac_POitems}" creationComplete="dg_POitems_creationCompleteHandler(event)"
editable="true" height="100%" change="dg_POitems_changeHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Consumer" dataField="consumer" editable="false"/>
<mx:DataGridColumn headerText="Description" dataField="description" width="300" editable="false"/>
<mx:DataGridColumn headerText="Amount" dataField="item_cost" editable="false" width="55"/>
<mx:DataGridColumn headerText="Service Date" dataField="service_date" labelFunction="format_sqlite_date"/>
<mx:DataGridColumn headerText="Invoice Date" dataField="invoice_date" labelFunction="format_sqlite_date"/>
<mx:DataGridColumn headerText="Paid Date" dataField="payment_received" labelFunction="format_sqlite_date"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<mx:Form id="form_POItemDateEditor" label="{dg_POitems.selectedItem.consumer}" x="{dg_POitems.x + dg_POitems.width + 10}"
y="{selectedY + 10}" visible="{dg_POitems.selectedItem}" borderColor="#ffffff">
<s:Label text="edit {dg_POitems.selectedItem.consumer}" width="100%" textAlign="center" verticalAlign="middle" fontWeight="bold" textDecoration="underline"/>
<mx:FormItem label="Service Date">
<mx:DateField id="service_date"/>
</mx:FormItem>
<mx:FormItem label="Invoie Date">
<mx:DateField id="invoice_date"/>
</mx:FormItem>
<mx:FormItem label="Paid Date">
<mx:DateField id="payment_received"/>
</mx:FormItem>
<mx:FormItem>
<s:Button id="submit" label="Submit" click="submit_clickHandler(event)"/>
</mx:FormItem>
</mx:Form>
</s:Application>
This should help you get started:
<fx:Script>
<![CDATA[
import mx.events.ListEvent;
protected function datagrid1_changeHandler(event:ListEvent):void
{
trace(event.itemRenderer.y);
}
]]>
</fx:Script>
<mx:DataGrid dataProvider="{steps}" change="datagrid1_changeHandler(event)" >
....
Edit Showing listener for spark:List valueCommit Event.
protected function valueCommitHandler(event:FlexEvent):void
{
trace(event.currentTarget.layout.getElementBounds(list.selectedIndex));
}
Have a look at DisplayObject's localToGlobal function. It will allow you to convert the ItemRenderer's 'y' position (that is with respect to the parent container, probably a List) to a global 'y' position (with respect to the Stage).
globalToLocal will do the opposite.
You'll have to do some additional calculations from here on, but those will depend on what your application display hierarchy looks like, so I can't be more specific than that.
You can find full code for exactly what you want to do right here http://flexdiary.blogspot.com/2009/11/flex-template-component.html

Deleting selected rows from a DataGrid in Flex

I added a checkbox in a DataGrid using ItemRenderer. I have pasted the code I am using below.
<mx:DataGrid id="dgEmployeeInfo" dataProvider="{resultArray}" x="131" y="95" editable="false">
<mx:columns>
<mx:DataGridColumn headerText="Select" rendererIsEditor="true" editorDataField="selected">
<mx:itemRenderer>
<fx:Component>
<mx:HBox>
<s:CheckBox id="testChk" click="testChk_clickHandler(event)" selected="{cbSelected}">
</s:CheckBox>
<fx:Script>
<![CDATA[
[Bindable]
public var cbSelected:Boolean;
protected function testChk_clickHandler(event:MouseEvent):void
{
cbSelected = testChk.selected;
}
]]>
</fx:Script>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="First Name" dataField="firstName"/>
<mx:DataGridColumn headerText="Last Name" dataField="lastName"/>
<mx:DataGridColumn headerText="City" dataField="city"/>
<mx:DataGridColumn headerText="Employee Code" dataField="empCode"/>
</mx:columns>
</mx:DataGrid>
I also have a button outside the DataGrid, and when this button is clicked, I want to delete all rows which have a checked CheckBox. Can someone tell me how to do this?
HI!
First of all, your code will not work properly, since not every DataGrid row has its own ItemRenderer instance. There are exactly n item renderer instances for a DataGrid having n VISIBLE rows. You can check this easily, if you create DataGrid, that can not fit all the data and then select some rows and scroll datagrid up/down. You'll see unexpected results.
One of solutions could be having additional field "selected" (or whatever you want to name it) in resultArray item properties. Then you can access this property through "data" object of ItemRenderer. Check the code below:
<?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="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var resultArray:ArrayCollection = new ArrayCollection
([
{firstName:"1-1",lastName:"1-2",city:"1-3",empCode:"1-4"},
{firstName:"2-1",lastName:"2-2",city:"2-3",empCode:"2-4"},
{firstName:"3-1",lastName:"3-2",city:"3-3",empCode:"3-4"},
{firstName:"4-1",lastName:"4-2",city:"4-3",empCode:"4-4"},
{firstName:"5-1",lastName:"5-2",city:"5-3",empCode:"5-4"},
{firstName:"6-1",lastName:"6-2",city:"6-3",empCode:"6-4"},
{firstName:"7-1",lastName:"7-2",city:"7-3",empCode:"7-4"},
{firstName:"8-1",lastName:"8-2",city:"8-3",empCode:"8-4"},
{firstName:"9-1",lastName:"9-2",city:"9-3",empCode:"9-4"},
{firstName:"10-1",lastName:"10-2",city:"10-3",empCode:"10-4"},
]);
protected function button1_clickHandler(event:MouseEvent):void
{
for (var i:int=0; i< resultArray.length; i++)
{
if (resultArray[i].selected == true)
{
resultArray.removeItemAt(i);
}
}
dgEmployeeInfo.invalidateList();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup>
<mx:DataGrid id="dgEmployeeInfo" dataProvider="{resultArray}" x="131" y="95" editable="false">
<mx:columns>
<mx:DataGridColumn headerText="Select" rendererIsEditor="true" editorDataField="selected">
<mx:itemRenderer>
<fx:Component>
<mx:HBox>
<s:CheckBox id="testChk" click="testChk_clickHandler(event)" selected="{data.selected}">
<fx:Script>
<![CDATA[
[Bindable]
public var cbSelected:Boolean;
protected function testChk_clickHandler(event:MouseEvent):void
{
data.selected = testChk.selected;
}
]]>
</fx:Script>
</s:CheckBox>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="First Name" dataField="firstName"/>
<mx:DataGridColumn headerText="Last Name" dataField="lastName"/>
<mx:DataGridColumn headerText="City" dataField="city"/>
<mx:DataGridColumn headerText="Employee Code" dataField="empCode"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Delete Items" click="button1_clickHandler(event)"/>
</s:VGroup>
</s:Application>
I used ArrayCollection as dataProvider as it is much mor easier to add/remove items to Collection objects then with Arrays.
Regards.

how to pass an array of values from one mxml component to another in Flex?

I have a mxml component with a datagrid listing project names and code versions. I have the selected projects from the datagrid binded to a public variable named "selectedProjects". But how to access this variable in another mxml component. I want the selected project's name in that component's text area. how to do that?
I even created an instance of the first component and using that called the selectedProjects variable. But I do not get the value updated in the text area.
This is the code for the first component where I get the selected projects name in a variable:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="handleCreationComplete();"
width="800" height="600">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
import mx.collections.ArrayCollection;
import mx.events.ItemClickEvent;
[Bindable] public var selectedProjects:Array;
private function handleCreationComplete():void {
PopUpManager.centerPopUp(this);
}
public var pages:ArrayCollection=new ArrayCollection([
{label:"10"},
{label:"20"},]);
public var projectList:ArrayCollection=new ArrayCollection([
{ItemName:"User Requirement Specification",ItemCodeVersion:"URS - 1"},
{ItemName:"User Requirement Specification",ItemCodeVersion:"URS - 2"},
{ItemName:"Software Requirement Specification",ItemCodeVersion:"SRS - 2.1"},
{ItemName:"Software Design Specification",ItemCodeVersion:"SDS - 2"},
{ItemName:"Software Design Specification",ItemCodeVersion:"SRS - 1.1"},
{ItemName:"User Manual",ItemCodeVersion:"User Manual - 1"},
{ItemName:"User Manual",ItemCodeVersion:"User Manual - 2.1"},]);
private function close():void
{
PopUpManager.removePopUp(this);
}
private function select():void
{
Alert.show(projectListDG.selectedItem.ItemName);
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Binding source="projectListDG.selectedItems" destination="selectedProjects" />
<mx:Label styleName="labelHeading" text="Project Documents List"/>
<mx:Panel width="100%" height="100%" layout="vertical" title="Documents List" >
<mx:HBox>
<mx:Label text="Show"/>
<mx:ComboBox dataProvider="{pages}" width="60" />
<mx:Label text="results per page" />
</mx:HBox>
<mx:DataGrid id="projectListDG" dataProvider="{projectList}" allowMultipleSelection="true" rowCount="10" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Select" itemRenderer="mx.controls.CheckBox" textAlign="center" width="50"/>
<mx:DataGridColumn headerText="Item Name" dataField="ItemName" textAlign="center" />
<mx:DataGridColumn headerText="Item Code - Version" dataField="ItemCodeVersion" textAlign="center" width="150 " />
</mx:columns>
</mx:DataGrid>
<mx:Label text="{projectListDG.selectedItem.ItemName}"/>
</mx:Panel>
<mx:HBox horizontalAlign="center" width="100%">
<mx:Button label="Select" click="select();"/>
<mx:Button label="Cancel" click="close();"/>
</mx:HBox>
</mx:TitleWindow>
I now have the selected projects in the selectedProjects variable.
Now this is the second componenent in which I am trying to make use of the project name.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.core.IFlexDisplayObject;
import mx.managers.PopUpManager;
import mx.containers.TitleWindow;
[Bindable]
public var projectList:projDocsLookUp=new projDocsLookUp();
//Datagrid
[Bindable]
private var defectDetails:ArrayCollection = new ArrayCollection([
{Select:true},
]);
private function projDocsPopUp():void{
var helpWindow:TitleWindow = TitleWindow(PopUpManager.createPopUp(this, projDocsLookUp, true));
helpWindow.title="Project Documents List";
}
]]>
</mx:Script>
<mx:Label styleName="labelHeading" text="Defect Entry - Verification" />
<mx:Panel width="100%" height="30%" layout="vertical" title="Review Report Details">
<mx:VBox width="100%">
<mx:FormItem label="Project Name:" width="100%">
<mx:Text text="IPMS"/>
</mx:FormItem>
<mx:HRule width="100%"/>
<mx:VBox>
<mx:FormItem label="Project Documents:">
<mx:HBox>
<!--text="{projectList.projectListDG.selectedItem.ItemName}"-->
<mx:TextArea id="projDocs" width="150" text="{projectList.selectedProjects}" />//text area field is not updated.
<mx:Button width="30" label=".." click="projDocsPopUp();"/>
</mx:HBox>
</mx:FormItem>
</mx:VBox>
</mx:Panel>
<mx:Panel width="100%" height="50%" layout="vertical" title="Defect Details" >
<mx:DataGrid id="defectDG" dataProvider="{defectDetails}" variableRowHeight="true" width="100%" height="75" >
<mx:columns>
<mx:DataGridColumn dataField="Select" itemRenderer="mx.controls.CheckBox" width="50" textAlign="center" />
<mx:DataGridColumn dataField="Defect Id" itemRenderer="mx.controls.TextInput" textAlign="center"/>
<mx:DataGridColumn dataField="Status" itemRenderer="mx.controls.ComboBox" textAlign="center"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:VBox>
I was trying to update the value of the selected projects in the text area of Id "projDocs", But I do not get it.. Please some one help me..
Well I found out the solution by myself..
Googling of course. I followed the method given in this tutorial.
I added a reference to the parent application's TextArea control. The pop up component uses that reference to update the first component's TextArea.
In the first component, I changed the function that creates the pop up as
private function projDocsPopUp():void{
var helpWindow:projDocsLookUp = projDocsLookUp(PopUpManager.createPopUp(this, projDocsLookUp, true));
helpWindow.title="Project Documents List";
helpWindow.showCloseButton=true;
helpWindow.targetComponent=projDocs; //I get the value returned by the pop up window here
And then in the pop up component, changed the select function as:
private function select():void
{
var i:int;
for(i=0;i<selectedProjects.length;i++)
{
targetComponent.text+=selectedProjects[i].ItemName+",";
}
PopUpManager.removePopUp(this);
}
And finally I get the project name updated in the first components text area box.

Cannot get itemDoubleClick event to work in Flex (even with doubleClickEnabled=true)

I am trying to do a simple datagrid in Flex with a doubleclick event, but I cannot get itemDoubleClick to fire:
<mx:DataGrid id="gridReportConversions" height="100%" width="100%" mouseEnabled="true" doubleClickEnabled="true" itemDoubleClick="refererRowDoubleClicked(event)">
<mx:columns>
<mx:DataGridColumn width="75" dataField="qty" headerText="Qty" />
<mx:DataGridColumn dataField="referer" headerText="URL" />
</mx:columns>
</mx:DataGrid>
If I use the itemClicked event then the event is raised just fine. When I search for this problem I find many people saying 'you need to set doubleClickEnabled=true, but I've done that and it still doesn't work.
This control is nested within quite a few levels of VBox and other containers. Surely I dont need to set doubleClickEnabled on each of those containers do I?
Just to clarify how I tested this - I have an alert box in my refererRowDoubleClicked event handler and it never gets shown when I use itemDoubleClick
Simon,
I was able to get your code to work, no problem. Wrapped it up in several layers of containers that didn't have doubleClickEnabled set to true, to see if that was an issue, but it doesn't seem to be.
I'm wondering if one of the parents is causing a problem somehow. Would it be possible for you to post a larger section of the code?
Here is what I ran to test this with:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
[Bindable] private var dp:ArrayCollection = new ArrayCollection([{qty:1,referer:'http://google.com'},{qty:25,referer:'http://cnn.com'},{qty:4,referer:'http:stackoverflow.com'}]);
private function refererRowDoubleClicked(e:Event):void
{
var msg:String = "target: " + e.target + "\n\ncurrentTarget: " + e.currentTarget + "\n\nselected item qty: " + gridReportConversions.selectedItem.qty + "\nselected item referer: " + gridReportConversions.selectedItem.referer;
Alert.show(msg);
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:VBox width="100%" height="100%">
<mx:Box width="100%" height="100%">
<mx:Canvas width="100%" height="100%">
<mx:DataGrid id="gridReportConversions" height="100%" width="100%" dataProvider="{this.dp}"
mouseEnabled="true" doubleClickEnabled="true" itemDoubleClick="refererRowDoubleClicked(event)">
<mx:columns>
<mx:DataGridColumn width="75" dataField="qty" headerText="Qty" />
<mx:DataGridColumn dataField="referer" headerText="URL" />
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:Box>
</mx:VBox>
</mx:VBox>
</mx:Application>
Before I use the propety doubleClickEnabled, my itemDoubleClick doesn't work, but when I set doubleClickEnabled=true, it work good, no problem.

Resources