Flex - Data binding not working - apache-flex

I'm having some troubles with binding data.
I have an application that contains a viewstack of components.
Let's say I have comp1, comp2 and comp3 inside the viewstack.
Each component, has its own data class --> comp1Data.as, comp2Data.as and comp3Data.as.
All values in each component are binded to the corresponding data in it's data object.
A click in a control in comp1 leads to comp3, the same goes for comp2. Clicking a control in comp2 leads to comp3.
When going from comp1 to comp3, comp3Data.as is initialized and and comp3 displays the binded values.
When going from comp2 to comp3, comp3Data.as is also initialized but the binded values are not displayed...
I tried using an initialize but it is not working. And when debugging, the data is right there, but it's is not displaying.
Any help would be really appreciated.
Regards,
BS_C3
Some code ^__^
Main application:
<mx:Application>
<mx:Script>
<![CDATA[
private function order(s:String):void
{
if(s == 'order')
OrderData.instance.state = 'order';
else if(s == 'reporting')
{
OrderData.instance.state = 'reporting';
.
.
.
}
pages.selectedChild = or;
}
]]>
</mx:Script>
<mx:ViewStack id="pages" horizontalCenter="0" verticalCenter="0" width="100%" height="100%">
<components:SearchResult id="sr" width="100%"
order="order('order')"
/>
<components:Reporting id="rp" width="100%"
reportingOrder="order('reporting')"/>
<components:Order id="or" width="100%"
/>
</mx:ViewStack>
</mx:Application>
Both SearchResult and Reporting acces Order.
Order.mxml looks like this:
<mx:Canvas>
<mx:HBox width="100%">
<mx:Box paddingBottom="15" paddingLeft="15" paddingRight="15" paddingTop="15" backgroundColor="#FFFFFF" height="100%">
<components:OrderView id="ov"/>
</mx:Box>
<mx:Spacer width="15"/>
<components:OrderedSDR id="sdr" height="100%"/>
</mx:HBox>
</mx:Canvas>
I'm getting troubles with OrderedSDR.mxml:
<mx:Canvas>
<mx:VBox width="100%" height="100%" paddingBottom="28" paddingLeft="28" paddingRight="28" paddingTop="28" backgroundColor="#FFFFFF">
<mx:HBox width="100%" paddingBottom="6" horizontalAlign="center">
<mx:Canvas>
<mx:Image id="thumbnailBG" source="#Embed(source='assets/Images/SearchResult/BoxBagueOverview.PNG')"/>
<mx:Image id="overview" source="{GlobalData.instance.collection.overview.toString()}"/>
<mx:Label id="thumbnailCarats"
text="{GlobalData.instance.collection.carats.toString() + GlobalData.instance.languageProperties.orderedSDR.imageInfo.toString()}"
styleName="OVLBL"
paddingBottom="5" paddingRight="10"
x="{thumbnailBG.x + thumbnailBG.width - thumbnailCarats.width}"
y="{thumbnailBG.y + thumbnailBG.height - thumbnailCarats.height}"/>
</mx:Canvas>
</mx:HBox>
<mx:VBox id="mainBox" paddingBottom="8" paddingTop="8" verticalGap="6" width="180">
<mx:HBox width="100%" height="13">
<mx:Label width="80"
text="{GlobalData.instance.languageProperties.orderedSDR.product.toString()}"
styleName="OVDataLbl" opaqueBackground="#ECE5E2"/>
<mx:Label text="{SearchResultData.instance.selectedSDR.matnr_fp}" styleName="OVData"/>
</mx:HBox>
<mx:HBox width="100%" height="13">
<mx:Label width="80"
text="{GlobalData.instance.languageProperties.orderedSDR.netPrice.toString()}"
styleName="OVDataLbl" opaqueBackground="#ECE5E2"/>
<mx:Label text="{SearchResultData.instance.selectedSDR.currSymbol + ' ' + SearchResultData.instance.selectedSDR.fNet_price_fp}" styleName="OVData"/>
</mx:HBox>
.
.
.
</mx:VBox>
</mx:VBox>
</mx:Canvas>
Inside mainBox, I've got a list of hbox with the same structure as shown in the first two Hboxes.
Regarding the datasources, these are the following datasources that I'm using, their expected behaviour and their actual behaviour:
#
Embed(source='assets/Images/SearchResult/BoxBagueOverview.PNG --> The image is displayed as it should
GlobalData.instance.collection.overview.toString() --> GlobalData.instance.collection is a XMLList that contains the data for the image with id="overview". I do get the correct source, but the image is not displayed.
GlobalData.instance.languageProperties. ... --> It's a XMLList. The data is shown as it should.
SearchResultData.instance.selectedSDR.matnr_fp --> SearchResultData.instance.selectedSDR is an object that contains all the data that has to be displayed. Matnr_fp is a property of this object. And each hbox inside mainbox have to display a property of the object selectedSDR. The only property that is being displayed is SearchResultData.instance.selectedSDR.currSymbol. The other properties are not displaying even if the datasource is populated.
Hope this will be useful.
Thanks!
Regards,
BS_C3

Looks like nobody's seen anything wrong with the code??
Me neither. But doing other modifications on the code, it finally worked. Still don't know why... >_<

Related

Enable drag and drop between itemrenderers

I have two tilelists in my mxml application. The items (image and a label) get rendered by an itemrenderer. The functionality I want to achieve: drag image from tilelist #1 and drop it on tilelist #2 (and then a httpservice with sql query will be launched).
How would I tackle this problem? (high level info would suffice).
The main issue I have is that I don't know how to call methods from the main to my itemrenderer. I would like to code the d&d functionality within the renderer but I have no clue how to access watchlist #2 from within the renderer.
Relevant code in main.mxml:
<s:Panel id="panel" width="100%" height="100%" title="Watchlist">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="20"
paddingRight="20" paddingTop="5"/>
</s:layout>
<s:Label width="20%" fontSize="17" fontWeight="bold" text="Your watched movies"/>
<mx:TileList id="myWatchedList_tile" height="360" borderVisible="false" width="80%"
columnCount="5" columnWidth="200"
itemRenderer="components.TileListItemRenderer" rowCount="1" rowHeight="360"/>
<s:Label width="20%" fontSize="17" fontWeight="bold" text="Your to watch movies"/>
<mx:TileList id="myToWatchList_tile" height="360" borderVisible="false" width="80%"
columnCount="5" columnWidth="200"
itemRenderer="components.TileListItemRenderer" rowCount="1" rowHeight="360" />
</s:Panel>
The itemrenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
borderVisible="false" horizontalAlign="center" verticalAlign="middle"
xmlns:components="components.*">
<mx:Image source="{data.poster_url}" />
<mx:Label text="{data.movie_title}" height="20" />
</mx:VBox>
You can access methods outside of your item renderer using the outerDocument object. Make sure they are (scope)public methods.
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.edu.html
Alternative solution might be to use spark lists instead (with a TileLayout) - then you can easily use drag+drop between lists: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7cfd.html
..and launch service in response to 'drop' event (event will have reference to dropped image)

Return value instead of null

I'm trying to call a function and pass a couple of properties to it however it's complain the object i'm attempting to target is null. Can anyone see where I am going wrong?
<mx:ViewStack id="vs" width="100%" height="100%" y="53">
<mx:Canvas id="view1" label="Community" width="100%" height="100%" backgroundColor="#ff9900" showEffect="WipeDown" hideEffect="WipeUp">
<mx:Label text="Community"/>
</mx:Canvas>
<mx:Canvas id="view2" label="Apps" width="100%" height="100%" backgroundColor="green">
<mx:HTML id="myHTML" width="100%" height="100%"
visible="true"
paintsDefaultBackground="true"
htmlRender="browser_completeHandler(event)"
locationChange="browser_locationChangeHandler(event)"
complete="browser_completeHandler(event)" />
</mx:Canvas>
</mx:ViewStack>
<local:DockBar id="dockbar" horizontalCenter="0" bottom="0" width="100%" height="100" minSize="32" maxSize="80">
<mx:Label visible="false" id="menuLabel" text="Menu" bottom="0" horizontalCenter="0" fontSize="24" color="#ffffff" alpha=".75" />
<mx:Image click="gotoApp('Google','http://www.google.com/')" source="{icon1}" buttonMode="true" useHandCursor="true" toolTip="Nice red" rollOver="turnOn(event)" rollOut="turnOff(event)" />
<mx:Image click="gotoApp('Yahoo','http://www.yahoo.com/')" source="{icon2}" buttonMode="true" useHandCursor="true" toolTip="Cool orange" rollOver="turnOn(event)" rollOut="turnOff(event)" />
</mx:HBox>
</local:DockBar>
and the function looks like this:
private function gotoApp(id:String,url:String):void {
vs.selectedChild=view4;
trace(myHTML);
}
It's returning null the first time I click an image however subsequent attempts traces a value (I assume because it is set then, just not when the app loads). Any ideas how to recognize it when the app loads?
Cheers
Well "view4" isn't a child of your viewstack, so its going to throw a null pointer when it tries to shift its children.
The reason it doesn't throw it the second time is probably due to something like
public function set selectedChild( child : Object ) : void {
if ( child == _selectedChild ) return;
...
}
That's a pretty common pattern in setters.
Assuming "view4" is a typo and you meant "view2", you can set the creationPolicy on your ViewStack to "all". By default, ViewStacks only instantiate the first view when created, setting the creationPolicy to "all" will force all of the views in the stack to get instantiated.
The ViewStack will, by default, create its children lazily in document-order, so only the first child which will be visible on load (i.e view1) will not have a null id in your function. Subsequent clicks on the ViewStack will create the other views (view2, view3 and view4) which is why the error will no longer occur.
So you need to modify your code to include a creationPolicy="all" to fix this:
<mx:ViewStack id="vs" creationPolicy="all" width="100%" height="100%" y="53">
<mx:Canvas id="view1" label="Community" width="100%" height="100%">
...
</mx:Canvas>
...
<mx:Canvas id="view4" label="Apps" width="100%" height="100%">
...
</mx:Canvas>
</mx:ViewStack>
Try setting by using the selectedIndex property instead:
vs.selectedIndex = 1;
This way you're not losing out on the benefits of the deferred instantiation.

How to call a mxml component from another mxml component in flex-edited

I need to call a component named "defectTracker.mxml" by clicking a link in another mxml component called "reviewComponent.mxml". How do I achieve that?
This is my reviewComponent.mxml code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
private function defectTrackerLink(event:Event):void{
//call defectTracker
}
]]>
</mx:Script>
<mx:LinkButton label="Delete" textDecoration="underline" textRollOverColor="blue"/>
<mx:LinkButton label="Defect Tracker" textDecoration="underline" textRollOverColor="blue" click="defectTrackerLink(event)"/>
</mx:VBox>
Some one guide me.
Main.mxml:
<mx:Script>
<![CDATA[
private function subBtnBar(evt:ItemClickEvent):void{
switch (evt.label){
case "IQA/UAT":
this.bdyStack.selectedChild = screenIQA;
break;
case "EQA":
Alert.show("Yet To Design");
break;
case "Review Tracker":
this.bdyStack.selectedChild = reviewTracker;
break;
case "Defect Tracker":
this.bdyStack.selectedChild = defectTracker;
break;
default:
trace ("Neither a or b was selected")
}
}
]]>
</mx:Script>
<mx:ViewStack id="tabView" width="910" creationPolicy="all">
<mx:ToggleButtonBar horizontalGap="0" id="subTabBar"
itemClick="subBtnBar(event);" styleName="SubButtonBar"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}">
<mx:dataProvider>
<mx:String>IQA/UAT</mx:String>
<mx:String>EQA</mx:String>
<mx:String>Review Tracker</mx:String>
<mx:String>Defect Tracker</mx:String>
<mx:String>Defect Configuration</mx:String>
<mx:String>Defect Export</mx:String>
<mx:String>Defect Import</mx:String>
</mx:dataProvider>
</mx:ToggleButtonBar>
</mx:ViewStack>
<mx:ViewStack id="bdyStack" width="910" height="80%">
<components:ScrIQA id="screenIQA"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
<components:scrWorkList id="screenWorkList"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
<components:DefectEntryVerification id="defectEntryVerification"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
width="100%" height="100%"/>
<components:scrDefectResolutionAndCause id="defectResolutionnVerification"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
width="100%" height="100%"/>
<components:reviewTracker id="reviewTracker"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
width="100%" height="100%"/>
<components:defectTracker id="defectTracker"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
width="100%" height="100%"/>
</mx:ViewStack>
The defect Tracker scren is already linked with the main mxml file. How to call the function in the reviewComponent file?
reviewComponent consist of 2 link buttons and it is a column entry of the reviewTracker.mxml file's datagrid. So when I click the link in the review component, I want the defectTracker screen to be called. Its already a child of the main.mxml file.
I tried creting an instance of the main file in the component, and changes the selected child to defect tracker, It shows an error saying:
Error #1009: Cannot access a property or method of a null object reference.
My modified reviewComponent.mxml code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
private function defectTrackerLink(event:Event):void{
var main:Main=new Main();
main.bdyStack.selectedChild=main.defectTracker; }
]]>
</mx:Script>
<mx:LinkButton label="Delete" textDecoration="underline" textRollOverColor="blue"/>
<mx:LinkButton label="Defect Tracker" textDecoration="underline" textRollOverColor="blue" click="defectTrackerLink(event)"/>
</mx:VBox>
Please some one guide me in this? Should I call the item click event function of the Toggle button Bar? If so how to do It?
I would use a custom event that bubbles. You would dispatch it from the reviewComponent and it would be caught by the defectTracker.
Here are some good articles that tell you how to create a custom event and how to use it http://livedocs.adobe.com/flex/3/html/help.html?content=createevents_3.html
http://www.connatserdev.com/blog/?p=86
By calling, do you mean adding it to the VBox?
var dTracker:DefectTracker = new DefectTracker();
addChild(dTracker);
Would calling is with a popup work?
var dTracker:DefectTracker = new DefectTracker();
PopUpManager.addPopUp(dTracker, this, true);

Adding components to CoverFlow in Flex

I'm working with the CoverFlow library by Doug McCune.
In the example included, he has created some panels inside a CoverFlowContainer. There are other examples of him populating the coverflow from an RSS feed on the page linked above but he doesn't include the source for these :(
I will eventually be retrieving data from a web service to add to the coverflow however I'm starting with this simple example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" verticalAlign="middle" xmlns:containers="com.dougmccune.containers.*" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.TextArea;
public var articlePanel:Panel = new Panel();
public var articleTextArea:TextArea = new TextArea();
private function init() : void
{
articlePanel.addChild(articleTextArea);
articlePanel.title = "test tile"
articleTextArea.text = "article1" + "\n" + "www.article.com" + "\n" + "hello this is article 1";
coverflow2.addChild(articlePanel);
}
]]>
</mx:Script>
<mx:VBox id="box" verticalGap="0" height="306" width="100%" maxWidth="600" maxHeight="300" >
<containers:CoverFlowContainer id="coverflow2" width="100%" height="244"
horizontalGap="40" borderStyle="inset" backgroundColor="0x000000"
segments="6" reflectionEnabled="true">
<mx:Panel id="testpanel" width="200" height="200" title="Mxml title">
<mx:DataGrid width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<mx:Panel id="buttonpanel" width="200" height="200" title="Mxml title">
<mx:Button id="myButton" label="Change title" click="buttonpanel.title = ('hello') "/>
</mx:Panel>
</containers:CoverFlowContainer>
</mx:VBox>
</mx:Application>
I've defined some panels in the mxml and set creationComplete=init() so that the new panel I've created in ActionScript will be added to the CoverFlow container.
When I launch the application it displays the two predefined panels but not the one I have created in ActionScript.
Any ideas? Is there a better way of doing this?
you can try mx:Repeater component
<mx:HTTPService id="srv" url="pics.xml"/>
<ns2:CarouselContainer id="cf" width="100%" height="303" horizontalGap="40"
segments="6" reflectionEnabled="true" angle="10" >
<mx:Repeater id="r" dataProvider="{srv.lastResult.images.image}">
<mx:Canvas width="200" height="200">
<mx:Image source="{r.currentItem.src}"/>
</mx:Canvas>
</mx:Repeater>
</ns2:CarouselContainer>
Fixed this by first defining the coverflow container with nothing in it:
<containers:CoverFlowContainer id="coverflow" width="100%" height="244"
horizontalGap="40" borderStyle="inset" backgroundColor="0x000000"
reflectionEnabled="true"/>
In the actionscript section I retrieve an array from a web service and for each item in the array I create a panel. It is important to give each panel a width and height otherwise it will only show one element in the coverflow or no elements at all:
articlePanel.width = 200;
articlePanel.height = 200;

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