Display image with absolute path in Flex Air - apache-flex

I have very simple Flex Air application where I'd like to load image from documents directory:
<?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" creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function init(event:FlexEvent):void {
image.source = File.documentsDirectory.resolvePath('image.jpg').nativePath;
}
]]>
</fx:Script>
<s:BitmapImage id="image"/>
</s:WindowedApplication>
The problem is that Flex Air doesn't know how to handle native (absolute) path.
Looks very easy, but I don't know how to solve it...

You need a URL (or a ByteArray) to load an non-embedded image, so use the File's url property instead of its nativePath.
image.source = File.documentsDirectory.resolvePath('image.jpg').url;

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>

Flex Spark Replace text to color text

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

PDF preview in AIR

I'm trying to preview a PDF file into a Flex (AIR) application : I am using the mx.controls.HTML component and it works perfectly when I build my project into flex builder. But when exporting to a validated version : I can preview a web page but not a PDF file. Do you have any idea ?
Thanks,
Nicolas
<?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" creationComplete="init()"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:HTML width="100%" height="100%" id="h" />
<fx:Script>
<![CDATA[
private var pdf:HTMLLoader;
private function init():void
{
var request:URLRequest = new URLRequest("http://www.tagg.org/pdftest.pdf");
pdf = new HTMLLoader();
pdf.height = 800;
pdf.width = 600;
pdf.load(request);
h.addChild(pdf);
}
]]>
</fx:Script>
</s:WindowedApplication>

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>

Flex 4 - 9scalling is not working at runtime (although working in Flash)

I created a 9-scalled background in Flash CS5 which is working fine in Flash CS5
But when i imported it as embeded graphic in Flex, and change dimensions in runtime, 9-scalling doesnt work.
Here is my 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.events.FlexEvent;
[Embed(source='mgraphic.swf', symbol='Bck')]
[Bindable]
public var imgCls:Class;
protected function button1_clickHandler(event:MouseEvent):void
{
nineScalled.width = 100 + (this.width - 100) * Math.random();
nineScalled.height = 100 + (this.height - 100) * Math.random();
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Button label="change" click="button1_clickHandler(event)"/>
<s:BorderContainer id="nineScalled" backgroundImage="{imgCls}" backgroundImageFillMode="scale" width="469" height="187"/>
</s:Application>
Here is the fla file of my 9-scalled file
http://rapidshare.com/files/405441500/9scalledgraphic.fla
Thanks
if you have a sprite/movieclip, that uses 9slice-scaling and you scale this thing directly, it works nicely. If this things is a child of another sprite/movieclip/whatever and you scale that one, the 9slice-scaling of your child does not work anymore.
A workaround for this is normally to write functions, that take size-change requests and then resize the children that use9slice-scaling directly, instead of resizing themselves.

Resources