This question already has an answer here:
how to call mxml application from action script
(1 answer)
Closed 9 years ago.
I've main.mxml which has login button. It looks like below -
<mx:Script>
<![CDATA[
private function onSuccessfulLogin(event):void {
// How to call second mxml application*/
}
]]>
</mx:Script>
<mx:Panel x="414" y="145" width="355" height="200" layout="absolute"
title="Enter Your Login Information">
<mx:TextInput id="textInputName" x="147" y="12"/>
<mx:TextInput id="textInputPassword" x="147" y="57"/>
<mx:Button x="142" y="115" label="Login" id="callToServer"
<mx:Label x="37" y="14" text="User Name"/>
<mx:Label x="41" y="59" text="Password"/>
</mx:Panel>
Now on successful login I want to call another mxml application, for example second.mxml. It looks like -
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*" creationComplete="iFrame.visible=true"
viewSourceURL="srcview/index.html">
<mx:HBox width="100%" height="100%">
<mx:Panel title="/ Company Home" width="200" height="100%" >
<mx:Tree id="tree" width="100%" height="100%" dataProvider="{treeData}"
labelField="#label" showRoot="false"
change="iFrame.source =
(Tree(event.target).selectedItem.attribute('path').toString());" />
</mx:Panel>
<mx:Panel width="100%" height="100%" title="Ticket Details" >
<IFrame id="iFrame" source="some url" width="100%" height="100%" />
</mx:Panel>
</mx:HBox>
</mx:Application>
Please let me know how will I do it. Thanks for your help!
One simple way to let 2 Applications communicate would be LocalConnectionDocumentation here
Related
I am getting error while attempting to get id of BorderContainer at runtime. I tried using getStyle but it is also failing.
<s:Panel id="colorPanel"
title="Dem display color"
width="500" height="500">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Label id="label" y="4" horizontalCenter="0"/>
<s:BorderContainer id="Box1" x="70" y="70" height="50" width="50" backgroundColor="#0000ff">
</s:BorderContainer>
<s:BorderContainer id="Box2" x="90" y="90" height="51" width="50" backgroundColor="#00ff00">
</s:BorderContainer>
<s:BorderContainer id="Box3" x="50" y="50" height="52" width="50" backgroundColor="#ff0000">
</s:BorderContainer>
<s:Button label="Click" click="
colorPanel.setElementIndex(colorPanel.getElementAt(0),3);
label.text = ""+colorPanel.getElementAt(0).id ;
">
</s:Button>
</s:Panel>
Instead of casting to BorderContainer, it is safe to cast to UIComponent. In your example it crashes when the returned element is Label instead of BorderContainer. You can do as below:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
import mx.core.UIComponent;
]]></fx:Script>
<s:Panel id="colorPanel"
title="Dem display color"
width="500" height="500">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Label id="label" text="Red" y="4" horizontalCenter="0"/>
<s:BorderContainer id="Blue" x="70" y="70" height="50" width="50" backgroundColor="#0000ff">
</s:BorderContainer>
<s:BorderContainer id="Green" x="90" y="90" height="51" width="50" backgroundColor="#00ff00">
</s:BorderContainer>
<s:BorderContainer id="Red" x="50" y="50" height="52" width="50" backgroundColor="#ff0000">
</s:BorderContainer>
<s:Button label="Click" click="{
colorPanel.setElementIndex(colorPanel.getElementAt(1),3);
label.text = UIComponent(colorPanel.getElementAt(3)).id;}"/>
</s:Panel>
</s:Application>
Solution I found seems like over rigidness on the part of Adobe. I was able to get value of Id the moment I casted the returned Element as BorderContainer. So we have to live with it till Adobe lowers it's compiler's expectations from us.
label.text = ""+ BorderContainer(colorPanel.getElementAt(0)).id ;
I've one main.mxml which has login button which looks like below -
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#C4D4EF" layout="absolute">
<mx:HTTPService id="serverCall" method="POST"
url="http://localhost:8080/LDAPService/reg"
result="on_Result(event)" fault="on_Fault(event)"
/>
<mx:Script>
<![CDATA[
private function on_Result(event:ResultEvent):void {
// How to write here
}
]]>
</mx:Script>
<mx:Panel x="414" y="145" width="355" height="200" layout="absolute"
<mx:Button x="142" y="115" label="Login" id="callToServer"
click="send_data(event)"/>
</mx:Panel>
</mx:Application>
Now I want to call second.mxml file which looks like below -
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*" creationComplete="iFrame.visible=true"
viewSourceURL="srcview/index.html">
<mx:HBox width="100%" height="100%">
<mx:Panel title="/ Company Home" width="200" height="100%" >
</mx:Panel>
<mx:Panel width="100%" height="100%" title="Ticket Details" paddingTop="1" >
<IFrame id="iFrame" source="some service call url" width="100%" height="100%" />
<mx:ControlBar>
<mx:CheckBox id="cbVisible" label="IFrame Visible" selected="true"
click="iFrame.visible=cbVisible.selected"/>
</mx:ControlBar>
</mx:Panel>
</mx:HBox>
</mx:Application>
How can I call second.mxml from main.mxml? Please advice, Thanks for your help!
OK this example is in flex 4! it uses spark instead of mx
This shows the basics of states.
You can read more here: http://www.artima.com/articles/flex_4_states.html
This article shows the difference between flex3 and flex4 states
This is only a start. Hope this helps you.
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Script ><![CDATA[
import mx.rpc.events.ResultEvent;
<![CDATA[
private function on_Result( event:ResultEvent ):void
{
currentState = "result";
}
]]>
]]>
</fx:Script >
<fx:Declarations >
<s:HTTPService id="serverCall"
url="http://localhost:8080/LDAPService/reg"
useProxy="false"
method="POST"
result="on_Result(event)" >
</s:HTTPService >
</fx:Declarations >
<s:states >
<s:State name="init" />
<s:State name="result" />
</s:states >
<s:Panel x="414"
y="145"
width="355"
height="200" >
<s:Button x="142"
y="115"
label="Login"
id="callToServer"
includeIn="init"
click="serverCall.send()" />
</s:Panel >
<s:Panel title="/ Company Home"
width="200"
height="100%"
includeIn="result" >
</s:Panel >
<s:Panel width="100%"
height="100%"
includeIn="result"
title="Ticket Details" >
.... your stuff
</s:Panel >
</s:Application >
How can i add a Group (with unknown size) to SkinnableContainer with a transformation effect?
Example
First, resize the SkinnableContainer smoothly to its final size and then fade in the Group.
Problem hereby
The Group-size is determined by adding it to the SkinnableContainer. Doing this, the SkinnableContainer gets the final size and the Group is shown, without playing the transition effect.
All examples i found are MXML- and State-based. But i need an Actionscript-only solution here.
<fx:Declarations>
<s:Parallel id="showEff">
<s:Rotate3D angleYFrom="-90" angleYTo="0" duration="7000"/>
<s:Fade alphaFrom="0.0" alphaTo="1.0" duration="7000" />
<mx1:WipeRight duration="9000"/>
</s:Parallel>
<s:Parallel id="hideEff">
<s:Rotate3D angleYFrom="0" angleYTo="-90" duration="4000" />
<s:Fade alphaFrom="1.0" alphaTo="0.0" duration="7000"/>
<mx1:WipeRight duration="5000"/>
</s:Parallel>
</fx:Declarations>
<s:Button id="btn"
label="Toggle Panel visibility"
click="skinnableContainerPanel.visible = !skinnableContainerPanel.visible;" />
<s:Panel id="skinnableContainerPanel" title="Using SkinnableContainer"
width="500" height="300" showEffect="{showEff}"
hideEffect="{hideEff}" >
<s:layout>
<s:VerticalLayout gap="10" verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<s:SkinnableContainer
skinClass="com.SkinnableContainerSkin"
width="50%" height="50%" horizontalCenter="0"
verticalCenter="0">
<s:HGroup horizontalCenter="0" verticalCenter="0" >
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
</s:HGroup>
</s:SkinnableContainer>
</s:Panel>
In my main application mxml I am using a tab navigator,I can access that tab navigator anywhere in the application by following code..
mx.core.FlexGlobals.topLevelApplication.menuOption.selectedIndex=0;
Now my problem is I ihave used a toggle button bar in transactionUI which is a child element of tab navigator ,How can i access that element like above mentioned code??
My main mxml tab navigator ::
<mx:TabNavigator left="10" top="20" bottom="10" right="10" id="menuOption" >
<ui1:homeUI label="Home" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:transactionUI label="Transaction" width="100%" height="100%" backgroundColor="#373737" />
<ui1:calanderUI label="Employee service" width="100%" height="100%" horizontalCenter="0" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:ManagementUI label="Management" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:reportUI label="Reports" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:admin label="Admin" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
</mx:TabNavigator>
My toggle bar inside transactionUI ::
<s:NavigatorContent 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="100%" height="100%"
xmlns:ui="com.colan.*" xmlns:ui1="com.colan.ui.*"
backgroundColor="#373737" chromeColor="#181818"
contentBackgroundColor="#181818" color="#FDFDFD">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.*;
import mx.core.*;
]]>
</fx:Script>
<mx:VBox horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="15%" >
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider="{viewStack}"
selectedButtonTextStyleName="mySelectedButtonTextStyleName"
/>
</mx:HBox>
<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="85%" >
<mx:ViewStack id="viewStack"
visible="{toggleButtonBar.selectedIndex > -1}" width="100%" height="100%" >
<ui1:transaction label="Transaction"/>
<ui1:addClient label="Add Client"/>
<ui1:invoice label="Make invoice"/>
<ui1:workCatalogue label="Work catalogue"/>
<ui1:productCataloge label="Products Categories"/>
<ui1:suppliers label="Offers"/>
<ui1:calendarPlanUI label="Calendar"/>
</mx:ViewStack>
</mx:HBox>
</mx:VBox>
Please advice me...
FlexGlobals.topLevelApplication is meant to access the public variables/functions in your main application screen from any of its child screens.
For example..
If "transactionUI" NavigatorContent's ToggleButtonBar "calendarPlanUI" is for migrating to the main application "calanderUI" NavigatorContent.
Then you can straight away mention it then and there like
<ui1:calendarPlanUI label="Calendar" click="mx.core.FlexGlobals.topLevelApplication.menuOption.selectedIndex = '2'"/>
But if by any chance you are trying for toggleButtonBar like this
mx.core.FlexGlobals.topLevelApplication.toggleButtonBar.selectedIndex = 1;
then I would like to mention that the main application's variables/functions/components can only be accessed using "topLevelApplication". Without creating an instance to transactionUI, you won't be able to use toggleButtonBar in other child screens/main app too.
How to get all child ids of myCanvas1.Also for a specific mxml tag say <mx:Move /> how to get its id from action script
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable("__NoChangeEvent__")]
[Embed(source="fruits.jpg")]
private var fruitImageClass:Class;
public function clickhandler(event:Event):void
{
//How to get all childs of myCanvas1
}
]]>
</mx:Script>
<mx:Canvas backgroundColor="#A9C0E7" borderStyle="solid" height="300" id="myCanvas1" width="300">
<mx:Move id="fruitAnimation1" target="{fruitImage}" xTo="100" yTo="10" />
<mx:Move id="fruitAnimation2" target="{fruitImage2}" xTo="100" yTo="10" />
</mx:Canvas>
<mx:Canvas backgroundColor="#A9C0E7" borderStyle="solid" height="800" id="myCanvas" width="800">
<mx:Image height="50" id="fruitImage" source="{fruitImageClass}" width="50" x="250" y="10" />
<mx:Image height="50" id="fruitImage2" source="{fruitImageClass}" width="50" x="250" y="10" />
</mx:Canvas>
<mx:Button click="clickhandler(event)" label="Generate" x="100" y="316" />
</mx:Application>
The problem of your code is children of myCanvas1 are not visual components and this declaration has no sense. You shouldn't put your animations, effects and transitions into visual container. That's all what I can say about your question :)
Have you looked at any of the getChild.. methods?
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/HierarchicalCollectionView.html#getChildren%28%29
Does this help?