Tab Navigator in a Title window : issue - apache-flex

I am adding a tab navigator to a title window here. Once the title window is closed, it can be reopened using the button.But on opening the title window second time in this manner ,the content of the children of the Tab navigator(here, a label) is not visible.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"
<mx:TabNavigator x="68" y="68" width="200" height="200" id="tabNavig" historyManagementEnabled="false">
</mx:TabNavigator>
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
public function init():void{
tabNavig.removeAllChildren();
tabNavig.addChild(canvas1);
tabNavig.addChild(canvas2);
tabNavig.addChild(canvas3);
expenseTitle.showCloseButton = true;
expenseTitle.addChild(tabNavig);
PopUpManager.addPopUp(expenseTitle,this,false);
expenseTitle.addEventListener(CloseEvent.CLOSE,titleWindow_close);
}
private function titleWindow_close(evt:CloseEvent):void
{
expenseTitle.removeAllChildren();
PopUpManager.removePopUp(expenseTitle);
}
]]>
</mx:Script>
<mx:TitleWindow id="expenseTitle" >
</mx:TitleWindow>
<mx:Canvas id="canvas1" x="476" y="117" width="200" height="200" >
<mx:Label x="64" y="93" text="Label1"/>
</mx:Canvas>
<mx:Canvas id="canvas2" x="244" y="310" width="200" height="200" >
<mx:Label x="111.5" y="29" text="Label2"/>
</mx:Canvas>
<mx:Canvas id="canvas3" x="697" y="117" width="200" height="200" >
<mx:Label x="59" y="79" text="Label3"/>
</mx:Canvas>
<mx:Button x="78" y="310" label="Button" click="init()"/>
</mx:Application>

The structure of your MXML is completely wrong.
You need to keep MXML components (e.g. a TitleWindow that you plan on using as a popup) separate from your main application markup.
For example, create a separate MXML component, called MyForm.mxml. This component should be a TitleWindow with a Tab Navigator. The Tab Navigator should have the 3 Canvas components as children.
Then, in your main application logic, the Button should launch the pop up, MyForm.mxml like so:
var form:MyForm = MyForm(PopUpManager.createPopUp(this, MyForm, true));
PopUpManager.centerPopUp(MyForm);
Finally, in your MyForm.mxml component, add the event listener for closing. The method should only need to call: PopUpManager.removePopUp(this);

Related

Flex 3: How do I remove a Component Using a Button in the Component

I'd like to use a button within a component to remove it. So, you click it and the component is gone. But, I haven't figured out how you reference the component from within the component. What should I put in click=""?
My component: popCanvas
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel width="200" height="200" title="hello"
click="remove=">
</mx:Panel>
</mx:Canvas>
In the main app:
var popCanvas:PopCanvas= new PopCanvas;
popCanvas.x = 20;
popCanvas.y = 30;
this.addChild(popCanvas);
Any suggestions?
Thank you.
-Laxmidi
Okay,
This is what I came up with:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function removeMe(event:MouseEvent):void {
this.removeChild(event.currentTarget as DisplayObject);
}
]]>
</mx:Script>
<mx:Panel width="400" height="300" title="hello" click="removeMe(event)">
</mx:Panel>
</mx:Canvas>
So, I used the event's currentTarget to reference the component in order to remove it. If someone clicks anywhere on the component it's removed.
Thanks.
-Laxmidi

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

How content dynamically updated in flex

i need your help about below purposes.
problem-1:In php we can easily move one page to another and easily use different type of function from those pages.In flex3 how i can use different type of .mxml pages like php. Please guide me with tutorials.It will really helpful for me.
problem-2: In same page some content dynamically updated its resource by done one task.How can i do that please guide me.
Rather than treating your Flex application as a series of pages, you may want to consider an all-in-one SWF instead. This greatly reduces navigation time, at the cost of a longer initial download. You can switch among different views using tab pages or view stacks. As far as keeping your functions for each page separate, you can do this by implementing each logical "page" as a separate MXML component. Your top-level application MXML would look something like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:my="com.mycompany.myapp"
>
<mx:ViewStack id="pageViewStack" width="100%" height="100%">
<my:MyComponent1 width="100%" height="100%"/>
<my:MyComponent2 width="100%" height="100%"/>
</mx:ViewStack>
</mx:Application>
For your second problem I have 2 files
imageResize.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var _imageHolderWidth:Number = 500;
private var _imageHolderHeight:Number = 500;
[Bindable]
private var imageArrayCollection:ArrayCollection = new ArrayCollection();
private function changeSize():void{
this.imageHolder.width = this._imageHolderWidth *(this.widthSlider.value * 0.01);
this.imageHolder.height = this.imageHolder.width;
}
private function addToTileList():void{
var bitmapData : BitmapData = new BitmapData(this.imageHolder.width, this.imageHolder.height );
var m : Matrix = new Matrix();
bitmapData.draw( this.imageHolder, m );
this.imageArrayCollection.addItem({bitmapData: bitmapData, width: this.imageHolder.width, height: this.imageHolder.height});
}
]]>
</mx:Script>
<mx:Image id="imageHolder" source="#Embed('fx.png')" />
<mx:HSlider id="widthSlider" width="400" y="520" maximum="100" value="100" minimum="1" labels="[1%, 50%, 100%]" snapInterval="1" change="{changeSize();}" liveDragging="true" />
<mx:Button label="add to tile" click="{this.addToTileList();}"/>
<mx:TileList x="520" dataProvider="{this.imageArrayCollection}" itemRenderer="TileListRenderer" />
</mx:Application>
second file TileListRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="140">
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
override public function set data(value:Object):void
{
super.data = value;
}
]]>
</mx:Script>
<mx:VBox horizontalAlign="center">
<mx:Image id="thumbHolder" source="{new Bitmap(data.bitmapData)}" maxWidth="100" maxHeight="100" />
<mx:Label text="{data.width}x{data.height}" />
</mx:VBox>
</mx:Canvas>
Because it is easier to see it with working source (right mouse button to see the source):
blog.arnomanders.nl/upload/imageResize/imageResize.html

Adobe Flex component events

I wrote a component that displays a filename, a thumbnail and has a button to load/play the file. The component is databound to a repeater. How can I make it so that the button event fires to the main application and tells it which file to play?
On your custom component you can listen to the button click event and then generate a custom event that holds information about the file you want to play. You can then set the bubbles property to true on the event and dispatch the custom event from your custom component. The bubbles property will make your event float up the display list and reach your main application. Now on your main application you can listen to that event and play the correct file. Hope this helps.
Figured it out (finally)
Custom Component
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" x="0" y="0" width="215" height="102" styleName="leftListItemPanel" backgroundColor="#ECECEC" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
[Bindable] public var Title:String = "";
[Bindable] public var Description:String = "";
[Bindable] public var Icon:String = "";
[Bindable] public var FileID:String = "";
private function viewClickHandler():void{
dispatchEvent(new Event("viewClick", true));// bubble to parent
}
]]>
</mx:Script>
<mx:Metadata>
[Event(name="viewClick", type="flash.events.Event")]
</mx:Metadata>
<mx:Label x="11" y="9" text="{String(Title)}" styleName="listItemLabel"/>
<mx:TextArea x="11" y="25" height="36" width="170" backgroundAlpha="0.0" alpha="0.0" styleName="listItemDesc" wordWrap="true" editable="false" text="{String(Description)}"/>
<mx:Button x="20" y="65" label="View" click="viewClickHandler();" styleName="listItemButton" height="22" width="60"/>
<mx:LinkButton x="106" y="68" label="Details..." styleName="listItemLink" height="18"/>
<mx:HRule x="0" y="101" width="215"/>
The Repeater
<mx:Canvas id="pnlSpotlight" label="SPOTLIGHT" height="100%" width="100%" horizontalScrollPolicy="off">
<mx:VBox width="100%" height="80%" paddingTop="2" paddingBottom="1" verticalGap="1">
<mx:Repeater id="rptrSpotlight" dataProvider="{aSpotlight}">
<sm:SmallCourseListItem
viewClick="PlayFile(event.currentTarget.getRepeaterItem().fileName);"
Description="{rptrSpotlight.currentItem.fileDescription}"
FileID = "{rptrRecentlyViewed.currentItem.fileName}"
Title="{rptrSpotlight.currentItem.fileTitle}" />
</mx:Repeater>
</mx:VBox>
</mx:Canvas>
Handling function
private function PlayFile(fileName:String):void{
Alert.show(fileName.toString());
}

Resources