PDF preview in AIR - apache-flex

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>

Related

Display image with absolute path in Flex Air

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;

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>

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>

How to pass and retrieve values to/from popup window in Flex?

I want to send some text value to my custom popup window when it pops up from main application which is having some text input and also I want to know how to retrieve data(of text input) which entered by a user in popup window. Any help is appreciated.
You can access popUp data using setter as example shows. Or make a popUp component as a global in your main application so you can refer component properties globally.
<!-- TitleWindow.mxml -->
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="600" title="" height="160">
<fx:Script>
<![CDATA[
public function get UserTypedData():String
{
return tiSomeText.text;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:TextInput id="tiSomeText" x="76" y="101"/>
<!-- Application.mxml -->
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" >
<fx:Script>
<![CDATA[
public var popup:YourPopupWindow;
private function createPopUp():void
{
popup = YourPopupWindow(PopUpManager.createPopUp(this, YourPopupWindow, false));
}
private function getPopUpData():String
{
var retVal:String = "";
if (popUp != null)
{
// get data from setter
retVal = popUp.UserTypedData();
// of from TextInput
retVal = popUp.tiSomeText.text;
}
return retVal;
}
]]>
</fx:Script>
</mx:Application>
var popup:YourPopupWindow = PopupManager.createPopup(YourPopupWindow, true) as YourPopupWindow;
popup.someData = yourData;

Dynamic Flex Form Duplication

I'm designing a data entry app that allows multiple entries to its subject. For example, a person might have received education from multiple institutions. Each educational entry is a form and app user can click on a button to add another entry, which is a blank but identical form.
I figure it involves states and custom form components but not sure how everything fits together. Can someone shed some lights on how to accomplish that? Some sample codes would be greatly appreciated.
Thanks in advance,
Required flex version if there is a requirement? or just going with the newest available Flex 4 code? Generally speaking this is a very easy task in Flex, you create a class definition in MXML of AnEntry.mxml which is just a TextInput (or a label and TextInput or whatever you need for each entry). In the click handler of the a button you in Flex 3 call this.addChild(new AnEntry()) or in Flex 4 call this.addElement(new AnEntry());. To submit you'd do a loop starting at 0 and going to this.numChildren and for each TextInput pass along as params to an HTTPService.
Two files below compiled against Flex 3.4
[AnEntry.mxml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Label text="Link:"/>
<mx:TextInput id="theTextInput"/>
</mx:Box>
[MainApplication.mxml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
minWidth="955"
minHeight="600">
<mx:Script>
<![CDATA[
import mx.rpc.http.HTTPService;
protected function button1_clickHandler(event:MouseEvent):void
{
var params:Object = {};
var paramCount:Number=0;
// TODO Auto-generated method stub
for(var i:Number = 0; i<numChildren; i++)
{
var currentChild:DisplayObject = getChildAt(i);
if(currentChild is AnEntry)
{
params[paramCount++] = (currentChild as AnEntry).theTextInput.text;
}
}
var httpService:HTTPService = new HTTPService();
httpService.method = "POST"
httpService.url = "http://www.shaunhusain.com/somewhere.php";
httpService.send(params);
}
]]>
</mx:Script>
<mx:Button label="Add Entry" click="this.addChild(new AnEntry())"/>
<mx:Button label="Submit Info" click="button1_clickHandler(event)"/>
</mx:Application>
Please let me know if this gets you going in the right direction, if you're a beginner at Flex search for the Flex in a week videos, they're a great tutorial to get you started on Flex development.
Amendment for Flex 4:
[MainApplication.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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.rpc.http.HTTPService;
protected function button1_clickHandler(event:MouseEvent):void
{
var params:Object = {};
var paramCount:Number=0;
// TODO Auto-generated method stub
for(var i:Number = 0; i<numChildren; i++)
{
var currentChild:DisplayObject = getChildAt(i);
if(currentChild is AnEntry)
{
params[paramCount++] = (currentChild as AnEntry).theTextInput.text;
}
}
var httpService:HTTPService = new HTTPService();
httpService.method = "POST"
httpService.url = "http://www.shaunhusain.com/somewhere.php";
httpService.send(params);
}
]]>
</fx:Script>
<mx:Button label="Add Entry" click="this.addElement(new AnEntry())"/>
<mx:Button label="Submit Info" click="button1_clickHandler(event)"/>
</s:Application>
[AnEntry.mxml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:Label text="Link:"/>
<mx:TextInput id="theTextInput"/>
</mx:Box>

Resources