It seems like there is a bug in flex's RichTextEditor that on change of view(view state change) the RTE loses its formatting. Has anyone encountered this issue before and know how to solve it. Any help is much appreciated.
<?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" xmlns:base="ui.components.base.*" xmlns:ui="ui.*" xmlns:local="*">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function click_clickHandler(event:MouseEvent):void
{
trace(this.rte.htmlText);
this.currentState = "other";
}
protected function clickother_clickHandler(event:MouseEvent):void
{
this.currentState = "normal"
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="other"/>
</s:states>
<s:VGroup includeIn="normal">
<mx:RichTextEditor id="rte">
</mx:RichTextEditor>
<s:Button id="click" x = "500" y = "500" click="click_clickHandler(event)">
</s:Button>
</s:VGroup>
<s:VGroup includeIn="other" >
<s:Label>
test
</s:Label>
<s:Button id="clickother" click="clickother_clickHandler(event)">
</s:Button>
</s:VGroup>
</s:Application>
i have faced that issue and solution is applying style external.
means when view is changed apply that css to rte.
Have a nice day....
Related
In flex application how to get the ID of specific display component using mouse event. For example if I want to get the ID of a button it should be displayed when I click the button
do it with event.currentTarget.id like this :
<?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:Script>
<![CDATA[
import mx.controls.Alert;
protected function niceButton_clickHandler(event:MouseEvent):void
{
Alert.show(" the button id is: "+event.currentTarget.id)
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Button id="niceButton" label="click me" click="niceButton_clickHandler(event)" />
</s:HGroup>
</s:Application>
I'm using Flash Builder 4.6. and working for a flex project in which i want to setFocus on textInput after the intitialize is complete. I am using the code myTextInput.setFocus();
this is working fine cursor are blinking but not Highlighting the TextInput for focusing the TextInput. My All code is here:
<?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" initialize="init();">
<fx:Script>
<![CDATA[
private function init():void{
myTextInput.setFocus();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel x="54" y="23" width="250" height="200">
<s:TextInput x="98" y="42"/>
<s:TextInput id="myTextInput" x="98" y="12"/>
</s:Panel>
</s:Application>
Index-template:
function setFocus(){
window.document.getElementById("APPNAME").focus();
$('#myTextInput').focus();
$('#myTextInput').focusEnables=true;
}
</script> </div>
Application:
private function init():void{
if (ExternalInterface.available) {
ExternalInterface.call('setFocus');
}
}
I have an application width a mx:ViewStack component with differents view components under each s:NavigatorContent as it follows.
<mx:ViewStack id="vsOne" resizeToContent="true">
<s:NavigatorContent label="First">
<package:MyFirstComponent id="myFirstComponent"/>
</s:NavigatorContent>
<s:NavigatorContent label="Second">
<package:MySecondComponent id="mySecondComponent"/>
</s:NavigatorContent>
</mx:ViewStack>
And this is package.MyFirstComponent's important part..
<s:Button label="Next" click="somethingToGoForward()"/>
What I've tried:
Calling somethingToGoForward() in the view component and triyng to access to a parent vsOne: Don't work.
Calling parent.somethingToGoForward() (when this method is in the same mxml as the ViewStack): Don't work
How can I change my ViewStack's selectedIndex from anywhere outside the mxml file containing it?
Thanks.
This is an example using simple events:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" initialize="application1_initializeHandler(event)"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application1_initializeHandler(event:FlexEvent):void
{
viewStack.selectedChild=one;
}
protected function one_changeViewHandler(event:FlexEvent):void
{
viewStack.selectedChild=two;
}
protected function two_changeViewHandler(event:FlexEvent):void
{
viewStack.selectedChild=one;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:ViewStack id="viewStack" >
<local:ccomp id="one" changeView="one_changeViewHandler(event)" text="LAbel ONE">
</local:ccomp>
<local:ccomp id="two" changeView="two_changeViewHandler(event)" text="LAbel TWO" >
</local:ccomp>
</mx:ViewStack>
</s:Application>
ccomp is a custom component
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox 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="400" height="300">
<fx:Metadata>
[Event(name="changeView", type="mx.events.FlexEvent")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var _text:String;
public function get text():String
{
return _text;
}
[Bindable]
public function set text(value:String):void
{
_text = value;
}
protected function button1_clickHandler(event:MouseEvent):void
{
this.dispatchEvent(new FlexEvent("changeView",true));
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Button label="Change" click="button1_clickHandler(event)">
</s:Button>
<s:Label fontSize="24" text="{text}">
</s:Label>
</mx:HBox>
Davide
Is it possible within Flex 4 to change the background color of an <s:Application> at runtime? I've seen examples of how to do this with the MX version of the Application component, but not the spark version.
I cannot bind the backgroundColor property to a variable and modify that. However, I am thinking that I should use the styleManager property of the component to perform this change.
Could anyone explain how to do this?
Thank you for your time.
I recommend you go through this:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fee.html
The video tutorial steps through using CSS and using skins in Flex 4 which are the primary means of changing visual components.
Application has a backgroundColor style still:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Application.html
<?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"
creationComplete="application1_creationCompleteHandler(event)">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
setStyle('backgroundColor',0xCCCCCC);
}
]]>
</fx:Script>
<s:Button click="setStyle('backgroundColor','0xff0000');" label="turn red"/>
<s:Button click="setStyle('backgroundColor','0x0000ff');" label="turn blue"/>
<s:Button click="setStyle('backgroundColor','0x00ff00');" label="turn green"/>
</s:Application>
A Better way to go IMO
<?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">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|Application{
backgroundColor:#CCCCCC;
}
</fx:Style>
<s:Button click="setStyle('backgroundColor','0xff0000');" label="turn red"/>
<s:Button click="setStyle('backgroundColor','0x0000ff');" label="turn blue"/>
<s:Button click="setStyle('backgroundColor','0x00ff00');" label="turn green"/>
</s:Application>
Better still pull the CSS out into it's own file and just reference it with a
<fx:Style source="myStyle.css"/>
You may try it with
FlexGlobals.topLevelApplication.setStyle("backgroundColor", 0xff0000); // that would turn it into bright red
FlexGlobals.topLevelApplication.setStyle("backgroundAlpha", 1); // Sometimes background color is ignored when background alpha is zero
If the background color does not change, that means one of your component might be dictating the background color.
I am applying s:Fade effect on s:ItemRenderer on mouseOver event. The fade effect ends fine, but during its execution, it is applied only on half of the ItemRenderer object, plus half of the adjacent (right) ItemRenderer.
ItemRenderer objects are inside a s:List which uses a HorizontalLayout.
Here is the code for the ItemRenderer called FilterTagRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 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="false"
mouseOver="{fadeIn.play()}"
mouseOut="{alpha = 0.6}"
alpha="0.6">
<fx:Declarations>
<s:Fade id="fadeIn" alphaTo="1" duration="500" target="{this}"/>
</fx:Declarations>
<s:Label id="lblFilterName" text="{data}" paddingBottom="5" fontWeight="bold" fontSize="14"/>
</s:ItemRenderer>
Here is the code for List:
<s:List id="filterValuesList" width="{this.width}" borderVisible="false"
itemRenderer="view.FilterTagRenderer">
<s:layout>
<s:HorizontalLayout id="flowLayout" gap="6"/>
</s:layout>
</s:List>
I am using Flex SDK 4.0.
Does anyone know if this is a bug in flex or am I doing something wrong?
Thanks
You're doing something a little bit wrong, in that with Spark components you should let the state change run th effect, rather than trying to run it yourself. However, effects under the hood are just a filter on a single DisplayObject, so I'm not sure how you can get an effect that's partially on two different objects. Your renderers are probably just not where you think they are. What happens if you use one of the layouts that came with Flex, such as TileLayout?
Seems like a bug.
Steps to reproduce: simply compile and run the following two files, and then move the mouse over to any word.
Application file (FadeBug.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"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
]]>
</fx:Script>
<s:List dataProvider="{new ArrayCollection('The quick brown fox jumped over the lazy dog'.split(' '))}"
itemRenderer="BuggyItemRenderer" >
<s:layout>
<s:HorizontalLayout gap="6"/>
</s:layout>
</s:List>
</s:Application>
BuggyItemRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 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="false"
alpha="0.4"
mouseOver="{fadeEffect.play()}"
mouseOut="itemrenderer1_mouseOutHandler(event)">
<fx:Script>
<![CDATA[
protected function itemrenderer1_mouseOutHandler(event:MouseEvent):void
{
if (fadeEffect.isPlaying) {
fadeEffect.stop();
}
this.alpha = 0.4;
}
]]>
</fx:Script>
<fx:Declarations>
<s:Fade id="fadeEffect" target="{this}" alphaFrom="0.4" alphaTo="1"/>
</fx:Declarations>
<s:Label text="{data}" fontSize="25" fontWeight="bold"/>
</s:ItemRenderer>