Flex Spark Replace text to color text - apache-flex

I'm making simple editor. And I want that, let write replacing colorless text to color text from RichEditableText when I will write any text.
For example:
PHP --> <s:span color="#FF0000">PHP<s:span>
This codes not work:
editorum.text = editorum.text.replace('PHP','<s:span color="#FF0000">php<s:span>');
Editorum is: <s:RichEditableText id="editorum" ></s:RichEditableText>
Click here and try
Source code:
<?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"
width="319" height="198" minWidth="955" minHeight="600">
<fx:Style source="ops.css"/>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import flashx.textLayout.formats.TextLayoutFormat;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import spark.events.TextOperationEvent;
import spark.utils.TextFlowUtil;
protected function editorum_changeHandler(event:TextOperationEvent):void
{
editorum.text = editorum.text.replace('melon','<s:span color="#FF0000">melon<s:span>');
}
]]>
</fx:Script>
<s:RichEditableText id="editorum" x="10" y="28" width="299" height="159"
change="editorum_changeHandler(event)">
</s:RichEditableText>
<s:Label x="10" y="10" width="119" text="Write 'melon' :"/>
</s:Application>
A other problem; How do I send the pointer at the end? When I press any key, pointer going to deal. Try: http://samed.us/samples/ops3.swf
Thanks for your help...

Instead of this line:
editorum.text = editorum.text.replace('melon','<s:span color="#FF0000">melon<s:span>');
Try something like this:
var text : String = editorum.text.replace('melon','<s:span color="#FF0000">melon<s:span>')
editorum.textFlow = TextConverter.importToFlow(text, TextConverter.TEXT_FIELD_HTML_FORMAT);
Basically, you need to convert the HTML into something that the TLF Framework will understand. Read some docs on textFlow and the TextConverter

Related

flex 4 air app open modules in a new modal window

I am new to flex and I am trying to open modules in a new window modal.
I have managed to load and add a module in a container ( vbox ) but what I really need is to open them in separate windows.
All posts that I could find are samples on how to load modules but nothing on how to show them.
I found a post here
Modules and Panels issue
and it looks by the screenshot exactly what I am looking for.
Thanks for your help.
I found a way of doing this.
Thanks for all the pointers
here is how I did it for all of you to see and maybe use. If you have suggestions to make it better, do not hesitate to comment.
I am using a component : collapsabletitlewindow
mainapp.mxml
<?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:components="de.aggro.components.*">
<fx:Script>
<![CDATA[
import de.aggro.components.*;
private function createWindow():void{
var w:window = new window;
w.title = "Window " + container.numChildren;
container.addChild(w);
}
]]>
</fx:Script>
<components:CollapsableTitleWindowContainer id="container" width="100%" height="100%" >
</components:CollapsableTitleWindowContainer>
<s:Button buttonDown="createWindow()" label="Create Window" />
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:WindowedApplication>
window.mxml
<?xml version="1.0" encoding="utf-8"?>
<components:CollapsableTitleWindow 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:components="de.aggro.components.*" layout="absolute" width="400" height="300"
creationComplete="initApp()" >
<fx:Script>
<![CDATA[
import mx.events.ModuleEvent;
import mx.modules.ModuleManager;
import mx.modules.IModuleInfo;
import mx.core.IVisualElement;
public var info:IModuleInfo;
private function initApp():void {
info = ModuleManager.getModule("mod.swf");
info.addEventListener(ModuleEvent.READY, modEventHandler);
/* Load the module into memory. Calling load() makes the
IFlexModuleFactory available. You can then get an
instance of the class using the factory's create()
method. */
info.load(null, null, null, moduleFactory);
}
/* Add an instance of the module's class to the display list. */
private function modEventHandler(e:ModuleEvent):void {
this.addElement(info.factory.create() as IVisualElement);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</components:CollapsableTitleWindow>
mod.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Module 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:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:LinkButton x="131" y="124" label="Module link"/>
</s:Module>

Taking a snapshot, scaling it and repeating

I'm trying to scale text from 1 to 5, a sort of zoom in type of look. I'm using the code below:
<s:Scale target="myLabel" autoCenterTransform="true"
duration="2000"
scaleYFrom="1" scaleYTo="5" scaleXFrom="1" scaleXTo="5"
>
The text scales terribly. So my goal is to take a snapshot of the text label at a large font, add it to the display list, set the scale to a 5th and then animate the scale up to 1. After that I have to set the text again and do it all over again.
This is a Flex app and that's where my question comes in. I don't know how to take a snapshot, then what to add it to (group?) and then how to erase it and start over again? Any advice in any of this would be appreciated.
Here's a very simple approach which animates the fontSize style, instead of animating the scale properties:
Depending on what you're doing this may not perform well b/c it is setting a new style so frequently. Also, if you play this animation slowly, it looks like the individual characters "wobble" (they move or shake a teeny bit).
I'll post something on taking a snapshot and scaling that next...
<?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:Animate id="scaler" target="{scaledText}" >
<s:MotionPath property="fontSize">
<s:Keyframe time="0" value="12"/>
<s:Keyframe time="1500" value="48"/>
</s:MotionPath>
</s:Animate>
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function onLabelClick():void
{
scaler.play();
}
]]>
</fx:Script>
<s:Label id="scaledText" text="this is some text" click="onLabelClick()" />
</s:Application>
And here is the approach that takes a snapshot of the text. This has the same problem as your original solution, the scaled text is very jagged. But this does show how to take a snapshot of something and use the snapshot in another Flex object:
<?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:Scale id="scaler" target="{drawingTarget}" scaleXFrom="1" scaleXTo="5" scaleYFrom="1" scaleYTo="5"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.core.SpriteVisualElement;
protected function onLabelClick():void
{
var data:BitmapData = new BitmapData(200,200,true, 0xFFFFFF);
data.draw(scaledText);
var g:Graphics = drawingTarget.graphics;
g.beginBitmapFill(data);
g.drawRect(0,0, 200,200);
g.endFill();
}
protected function onBitmapClick(event:MouseEvent):void
{
scaler.play();
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label id="scaledText" text="this is some text" click="onLabelClick()" />
<s:SpriteVisualElement id="drawingTarget" width="200" height="200" click="onBitmapClick(event)"/>
</s:Application>

Dynamically create an embedded image

I need to dynamically create a LinkButton with an icon. The names of files (icons) have the format images/icon_0.png, images/icon_1.png, ... images/icon_1000.png. But I don't know the specific image for this button. I only know the index of the icon.
I tried this, with no success:
var path:String = "#Embed(source='images/icon_" + imageindex + ".png')";
myButton.setStyle("icon", path);
I get a runtime error:
Type Coercion failed:
*cannot convert "#Embed(source='images/icons/icon_427.png')" to Class*
Sorry that will not work.
Since imageindex is a compile-time variable, then embedding tag will trigger an error message.
Why not to override the button and add extra property like 'iconPath' that will expect a string path instead of a Class object. This way you can manually set (inside extended Button) the icon.source = iconPath without having to use embed.
pls try this.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="application1_creationCompleteHandler(event)"
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.events.FlexEvent;
[Embed(source='icon_1.png')]
[Bindable]
private var linkButtonIcon:Class;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
lnkbutton.setStyle("icon",linkButtonIcon);
}
protected function button1_clickHandler(event:MouseEvent):void
{
[Embed(source='icon_2.png')]
var linkButtonIcon2:Class;
lnkbutton.setStyle("icon",linkButtonIcon2);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup>
<mx:LinkButton label="test" id="lnkbutton"/>
<s:Button label="change Icon" click="button1_clickHandler(event)"/>
</s:VGroup>
</s:Application>

Alert gives PopUpManager error when used with SWFLoader

I am using SWFLoader to load a swf file. The code is below:
<?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>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:SWFLoader source="alerttesting.swf"/>
</s:Application>
And the alerttesing.swf code is given blow:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" fontFamily="Arial" fontSize="12"
xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
xmlns:local="c7.views.apps.calendar.*"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
import mx.controls.Alert
public function testingalerta():void{
Alert.show("sa;lfks;aljfa;sljf");
}
]]>
</mx:Script>
<mx:Canvas>
<mx:VBox>
<mx:Button click="testingalerta()"/>
<mx:Button label="aslkdfjasj" click="{Alert.show('sdfslfjlsjf;asjfa;sj');}"/>
</mx:VBox>
</mx:Canvas>
</mx:Application>
Every time I click the button I get the following error:
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.x\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:686]
at mx.managers::PopUpManagerImpl/addPopUp()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:401]
at mx.managers::PopUpManager$/addPopUp()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\PopUpManager.as:193]
at mx.controls::Alert$/show()[E:\dev\4.x\frameworks\projects\framework\src\mx\controls\Alert.as:618]
at alerttesting/abcd()[C:\Users\zee\Adobe Flash Builder 4.5\calendar\src\alerttesting.mxml:12]
at alerttesting/___alerttesting_Button1_click()[C:\Users\zee\Adobe Flash Builder 4.5\calendar\src\alerttesting.mxml:16]
Can you explain how can I fix this issue.
Regards
Zeeshan
Jason was close. Not only do you have to import the PopUpManager but you also have to use it.
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private var manager:PopUpManager;
]]>
</fx:Script>
I found the answer here.
I think you just need to import the mx PopUpManager.
Try adding an import to your app:
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
]]>
</fx:Script>

Special Characters in flex from HTML Params

I am accessing some params from HTML to flex, those are special characters(html codes).
Below is the Sample Code:
HTML Param:
flashvars.sampleText = "スー谷スー谷スー谷スー谷"
Flex Code:
<?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.core.FlexGlobals;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel>
<s:Label text="{FlexGlobals.topLevelApplication.parameters.sampleText}" />
</s:Panel>
</s:Application>
When i am checking the above sample code in IE Browser its working fine, But its not working in Mozilla and Chrome browsers.
What could be the Problem ? How can i able to display this in other browsers? Can anyone help on this?
Thanks in Advance
Rajesh
Have you tried url encoding your String in Javascript then decodinf in AS?
For e.g.:
Javascript:
flashvars.sampleText = escape("String with special characters");
AS/MXML:
<s:Label text="{unescape(FlexGlobals.topLevelApplication.parameters.sampleText)}" />
Hope it helps,
Rob

Resources