Navigate to a new view upon click using flex - apache-flex

friends.
I'm developing a flex mobile app. I've declared a Titlewindow which contains the alert message following the example of "TourdeFlex". And I failed to navigate to a new View after clicking YES button.
<fx:Script>
<![CDATA[
protected function some_handler():void
{
(new AlertMsg()).open(this,false);
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="AlertMsg">
<s:SkinnablePopUpContainer x="70" y="300">
<s:TitleWindow title="MSG" close="close()">
<s:VGroup horizontalAlign="center" paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="5" width="100%">
<s:Label text="Some Alert MSG"/>
<s:HGroup>
<s:Button label="YES" click="{outerDocument.navigator.pushView(myNewView)}"/>
<s:Button label="No" click="close()"/>
</s:HGroup>
</s:VGroup>
</s:TitleWindow>
</s:SkinnablePopUpContainer>
</fx:Component>
</fx:Declarations>
This code can be successfully compiled but it was wrong during runtime:Error #1009: Cannot access a property or method of a null object reference.
How can I handle this kind of problem.

outerDocument is null. Try owner:
click="(owner as spark.components.View).navigator.pushView(myNewView)"

Related

Flex PopUp Null Object Module

I'm doing a flex program, but i'm having some trouble when calling a pop up from my module. These are the codes:
The function that calls the popUp.
[Bindable] private var popUp : newMemberPopUp;
private function btnNewClickHandler(event:MouseEvent):void {
popUp = newMemberPopUp(PopUpManager.createPopUp(this, newMemberPopUp, true));
}
The popUp mxml
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="350" height="250"
title="Dados Cadastrais">
<fx:Declarations>
</fx:Declarations>
<s:VGroup width="100%">
<mx:Form width="100%">
<mx:FormItem label="Nome">
<mx:TextInput id="nameTextInput"/>
</mx:FormItem>
<mx:FormItem label="Telefone">
<mx:TextInput id="phoneTextInput"/>
</mx:FormItem>
<mx:FormItem label="Email">
<mx:TextInput id="emailTextInput"/>
</mx:FormItem>
<mx:FormItem label="Data de Nascimento">
<mx:DateField/>
</mx:FormItem>
<mx:FormItem label="Data de Cadastro">
<mx:DateField/>
</mx:FormItem>
</mx:Form>
<s:HGroup paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<s:Button label="Gravar"/>
<s:Button label="Cancelar"/>
</s:HGroup>
</s:VGroup>
</s:TitleWindow>
The error i'm getting is this one:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.managers::PopUpManagerImpl/http://www.adobe.com/2006/flex/mx/internal::createModalWindow()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:682]
at mx.managers::PopUpManagerImpl/addPopUp()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:397]
at mx.managers::PopUpManagerImpl/createPopUp()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:236]
at mx.managers::PopUpManager$/createPopUp()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\PopUpManager.as:139]
at view::Members/btnNewClickHandler()[E:\MyFlexWorkspace\CTCA\src\model\Members.as:29]
at view::Members/__btnNew_click()[E:\MyFlexWorkspace\CTCA\src\view\Members.mxml:39]
If i call the pop up from the application it works fine, but if i call it from the module i have this error.
Make sure you include PopupManager in your top level application. Here is a fairly detailed writeup that talks about a similar issue:
http://blog.flexicious.com/post/Modules-Ultimate-Styles-Popups-and-CheckBoxes-29.aspx

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)

How to display images from FileReferenceList?

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!

Flex: Double click event propagation on datagrid dependent on component order?

I'd like to have a double click event on a datagrid in Flex3. The following example only works if the Accordion (id = "mustBeSecond") container comes after the DataGrid. Why is the order of the components important and what can I do to prevent this behavior?
(The example does not work. If you change the order of "mustBeSecond" and "gridReportConversions" the example works fine)
<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 {
Alert.show("double click");
}
]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<mx:Accordion width="200" height="200" id="mustBeSecond">
<mx:Canvas label="Navigation Box" width="100%" height="100%">
<mx:VBox>
<mx:LinkButton label="First Link" />
<mx:LinkButton label="Second Link" />
</mx:VBox>
</mx:Canvas>
</mx:Accordion>
<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:HBox>
I tested your code in Flex and it didn't make any difference which order they were in. The double click event fired either way. This was in a fresh project with no other code except the default stuff that a Flex application sets you up with.
Sometimes when a Flex project starts acting weird it helps to go to click Project -> Clean.
Do you get any errors or notices showing up in the Problems pane?

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);

Resources