I have a panel2 inside panel1.
When I rollover panel1, I want panel2 to be visible and when mouseOut, panel2 to be invisible.
This is simple with mouseOcer and MouseOut events
Of course trouble is when I rollover panel2 (inside panel1): it starts blinking.
My question is: how to simply correct it ? (of course I would like buttons inside panel2 to be active as well)
regards
Why this code won't work for you?
<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
[Bindable]
private var isOver:Boolean;
]]>
</fx:Script>
<s:Panel horizontalCenter="0" id="panel1" mouseOut="isOver = false" mouseOver="isOver = true" title="Panel1"
verticalCenter="0">
<s:Panel bottom="10" id="panel2" left="10" right="10" title="Panel2" top="10" visible="{isOver}">
<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10"
paddingTop="10" verticalAlign="middle" />
</s:layout>
<s:Label id="actionResult" />
<s:HGroup>
<s:Button click="actionResult.text = 'Button 1 clicked'" label="Button1" />
<s:Button click="actionResult.text = 'Button 2 clicked'" label="Button2" />
</s:HGroup>
</s:Panel>
</s:Panel>
</s:Application>
Related
At runtime when I click the Lire button then the TextArea field under it is populated from a sharedobject data and the display becomes bigger :
Here is code :
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" title=""
creationComplete="creationCompleteHandler(event)" >
...
<s:VGroup width="100%" height="100%" paddingTop="5" verticalAlign="middle" horizontalAlign="center">
<s:TextInput id="chp1" width="50%"/>
<s:TextInput id="chp2" width="50%"/>
<s:Button label="Enregistrer" click="enregistrer(event)" />
<s:Label/>
<s:Button label="Lire" click="lire(event)" />
<s:TextArea id="area"/>
<s:Label/>
<s:HGroup>
<s:Button label="Envoyer" click="send(event)" />
<s:Button label="Retour" click="navigator.popView()" />
</s:HGroup>
<s:TextArea id="resultHTTP"/>
<s:TextInput id="h_url" text="{url}" visible="false"/>
</s:VGroup>
How to enable vertical scroll then to view others components at the bottom ?
wrap your VGroup with a scroller. something like this:
's:Scroller width="100%" height="100%"
s:VGroup width="100%" height="100%" paddingTop="5" verticalAlign="middle" horizontalAlign="center"'
For my flex project I am making, I'm trying to change the background of my website change to the image I have clicked on. The background in my main page I have set like this:
<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="#Embed('assets/background.png')" borderAlpha="0">
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<mx:LinkBar styleName="mainnav" width="600" dataProvider="content" horizontalCenter="0" paddingLeft="20" paddingTop="125"/>
<s:Image top="5" bottom="5" horizontalCenter="50" source="assets/nav.png"/>
<mx:ViewStack id="content">
<mx:HBox id="home"
label="Home">
<component:home/>
</mx:HBox>
<mx:HBox id="bio"
label="Bio">
<component:bio/>
</mx:HBox>
<mx:HBox id="portfolio"
label="Portfolio">
<component:portfolio/>
</mx:HBox>
<mx:HBox id="contact"
label="Contact">
<component:contact/>
</mx:HBox>
</mx:ViewStack>
</s:BorderContainer>
Now from inside my component, I am trying to set the the background of the image you click on.
<fx:Script>
<![CDATA[
import mx.core.Application;
public function changeBackground(event:MouseEvent):void
{
Application.application.backgroundContainer.setStyle('backgroundImage', img1.source);
}
]]>
</fx:Script>
I call this function when you click on an image.
<mx:Image id="img1" source="assets/placeholder.jpg" click="changeBackground(event)"/>
But it doesn't work.
So I was wondering how this should be done?
Thank you,
Thomas
you can use BitmapFill and declare all your backgrounds first. Also, be sure your changeBackground function is public in your main application since it will be called from a component.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:component="component.*">
<fx:Script>
<![CDATA[
public function changeBackground(bitmapFillObj:BitmapFill):void
{
backgroundContainer.backgroundFill = bitmapFillObj;
}
]]>
</fx:Script>
<fx:Declarations>
<s:BitmapFill id="_bg1" source="#Embed('assets/bg1.jpg')"/>
<s:BitmapFill id="_bg2" source="#Embed('assets/bg2.jpg')"/>
</fx:Declarations>
<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="#Embed('assets/bg1.jpg')" borderAlpha="0">
<component:home/>
</s:BorderContainer>
</s:WindowedApplication>
And now your component
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="click to show bg 1" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg1)"/>
<s:Button label="click to show bg 2" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg2)"/>
Your just have to adapt the code to your project, clicking on your images instead of buttons. Good luck!
I have a small problem with rollover effects. First time after loading everything's fine. But after clicking the button twice (= going to studyState and then coming back to Sate1) the rollover effect on the bordercontainer stops working.
I don't have a clue what the reason could be. Please give me a hint.
<?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:Declarations>
<s:AnimateColor id="animateColorON" colorPropertyName="backgroundColor" colorFrom="#FFFFFF" colorTo="#e7eae4" duration="300"/>
<s:AnimateColor id="animateColorOFF" colorPropertyName="backgroundColor" colorFrom="#e7eae4" colorTo="#FFFFFF" duration="600"/>
</fx:Declarations>
<s:transitions>
<s:Transition id="t1" autoReverse="true">
<s:CrossFade
target="{this}"
duration="1500" />
</s:Transition>
</s:transitions>
<s:states>
<s:State name="State1" />
<s:State name="studyState" />
</s:states>
<s:VGroup id="globalGroup" includeIn="State1" width="100%">
<s:Button label="State1 to studyState" click="this.currentState = 'studyState'" />
<s:BorderContainer width="100%" height="30" cornerRadius="4" borderVisible="false" buttonMode="true" rollOverEffect="animateColorON" rollOutEffect="animateColorOFF">
<s:HGroup width="100%" height="30" verticalAlign="middle" paddingLeft="5" paddingRight="5">
<s:Label id="p_dob_label" text="text" width="55%"/>
<s:Label id="p_dob_value" text="text" width="40%" verticalAlign="top" textAlign="right" color="#8DA576"/>
</s:HGroup>
</s:BorderContainer>
</s:VGroup>
<s:VGroup id="studyGroup" includeIn="studyState" width="100%">
<s:Button label="studyState to State1" click="this.currentState = 'State1'" />
</s:VGroup>
</s:Application>
Here is a fix. add an event listener for when the state changes. I use the currentStateChangeevent:
<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" currentStateChange="application1_currentStateChangeHandler(event)">
In the listener, manually set the rollOverEffect and rollOutEffect effects:
<fx:Script>
<![CDATA[
import mx.events.StateChangeEvent;
protected function application1_currentStateChangeHandler(event:StateChangeEvent):void
{
// TODO Auto-generated method stub
if(bc){
bc.setStyle('rollOverEffect',animateColorON);
bc.setStyle('rollOutEffect',animateColorOFF);
}
}
]]>
</fx:Script>
Be sure to give the BorderContainer an ID. I used bc:
<s:BorderContainer id="bc" width="100%" height="30" cornerRadius="4" borderVisible="false" buttonMode="true" rollOverEffect="animateColorON" rollOutEffect="animateColorOFF" >
I'm not sure why those effects are lost. My best theory is that this has something to do with how the ActionScript is generated behind the scenes. Even though the rollOverEffect and rollOutEffect appear to be properties on the component, they are actually implemented behind the scenes as styles. I bet, for some reason, when switching states the 'effect' styles are not reset. You'd have to look at the generated ActionScript to know for sure, though.
How do I wordwrap in a spark list w/ an itemrenderer? This posting at http://blog.flexexamples.com/2009/10/27/setting-word-wrapping-on-a-spark-list-control-in-flex-4/ works 100% but when I try to set a separate item renderer, I can't get the word wrapping...instead, I get an ugly horizontal scroll bar. HEre is my mxml:
<?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" width="100%"
height="100%"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:List id="lst"
useVirtualLayout="false"
width="200"
horizontalCenter="0" verticalCenter="0"
itemRenderer="testRenderer"
>
<s:dataProvider>
<s:ArrayList>
<fx:Object />
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
here is my testRenderer ------------>
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="testRenderer"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true"
creationComplete="makeLabel(event);">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<fx:Script>
<![CDATA[
protected function makeLabel(evt:Event):void {
test.text = "this is just a really long line of text that I want to wrap and just look normal";
}
]]>
</fx:Script>
<s:HGroup>
<s:Label id="test" color="black" />
</s:HGroup>
</s:ItemRenderer>
try giving your Label (id="test") a width
I've found a very annoying problem with the itemRenderers in a DataGroup in flex 4, when I mouseout of the itemRenderer is returns to its default state. Here's an example:
<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">
<s:BorderContainer>
<s:DataGroup>
<s:layout>
<s:VerticalLayout gap="1"/>
</s:layout>
<s:dataProvider>
<s:ArrayCollection>
<fx:Object title="One" />
<fx:Object title="Two" />
<fx:Object title="Three" />
</s:ArrayCollection>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:states>
<s:State name="expanded" />
<s:State name="collapsed" />
</s:states>
<fx:Script>
<![CDATA[
private function expandCollapse():void
{
currentState = (currentState == "collapsed") ? "expanded" : "collapsed";
}
]]>
</fx:Script>
<s:VGroup>
<mx:Button click="expandCollapse();" label="Click me to hide the number" />
<s:SkinnableContainer>
<s:VGroup height="0" height.expanded="NaN">
<s:Label text="{data.title}" />
</s:VGroup>
</s:SkinnableContainer>
</s:VGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:BorderContainer>
</s:Application>
When the user clicks on the button the VGroup is collapsed as expected, but then if a user moves their mouse out of the item renderer it then collapses, i.e. returns to its default state.
Is this a bug or am I missing something here?
Cheers,
Chris
It turns out that ItemRenderer already has some of its own states. This example works as expected if we use a DataRenderer instead of an ItemRenderer.