I was trying to create an Adobe AIR application that loads an external swf file. However when the swf file is loaded from it does not render properly.
My Main.mxml file:
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0"
creationComplete="Created()">
<fx:Script><![CDATA[
private var moduleLoader:Loader;
private function Created():void {
moduleLoader = new Loader();
var urlre: URLRequest = new URLRequest("Shell1.swf"); //http://localhost:8080/aps/
moduleLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
moduleLoader.load(urlre);
}
private function loaded(event:Event):void {
uic.addChild(moduleLoader);
}
]]></fx:Script>
<mx:UIComponent id="uic" width="100%" height="100%" ></mx:UIComponent>
</mx:Application>
My Shell1.mxml file:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%" creationComplete="Created(event)"
backgroundColor="0xf5deb3">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function Created(event:Event):void {
}
]]>
</fx:Script>
<fx:Declarations>
<mx:RemoteObject id="RO" destination="AdministrationHandler"
fault="Alert.show(event.fault.faultString), 'Error'">
</mx:RemoteObject>
</fx:Declarations>
<s:Group id="Group" width="100%" height="100%">
<s:Label id="Introduction"
text="This is a demo application to show that the flex based application works. Click on the button below get generate a random number"
styleName="FilterLabel"/>
<s:VGroup id="VertGroup" paddingLeft="10" paddingRight="10" paddingTop="10" width="100%" height="100%">
<s:Label backgroundColor="green" width="1000" id="firstNumberLabel" text="Enter First Number"
styleName="FilterLabel"/>
<s:TextInput id="firstNumber" width="20%"/>
</s:VGroup>
</s:Group>
</s:Application>
When Shell1.swf is loaded directly in adobe air (by mentioning it application-descriptor.xml), it looks like:
But when I load it by using Main.mxml it looks like this:
So why is that the Components are not properly rendered when Shell1.swf is loaded from Main.swf ?
I've been trying to do a couple of things and I couldn't.
I've been trying to skin a mx:FileSystemTree, to show de data horizontally, I think it's almost impossible, anyone has an idea how to make it?
The second thing I'm trying is to add an itemRenderer to the FileSystemTree wanting to add a pair of buttons(add and delete, which I already had working). Everything I tried so far is giving the same error:
TypeError: Error #1034: Type Coercion failed: cannot convert SKins::FileSystemItemRenderer#971c479 to mx.controls.listClasses.IListItemRenderer.
<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"
width="750" height="500">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:VGroup width="607" height="134">
<s:HGroup width="607" height="68">
<s:Button label="Button"/>
<s:Button label="Button"/>
</s:HGroup>
<s:TextInput width="600"/>
</s:VGroup>
<mx:HDividedBox>
<mx:FileSystemTree id="tree" width="615" height="480" allowMultipleSelection="true"
borderVisible="false" defaultLeafIcon="#Embed('../assets/folder.png')"
directory="{new File(raiz)}" dragEnabled="true" dropEnabled="true"
folderClosedIcon="#Embed('../assets/folder.png')"
folderOpenIcon="#Embed('../assets/openFolder.png')" fontSize="45"
fontStyle="normal" fontWeight="normal" iconFunction="selectIcon"
itemRenderer="SKins.FileSystemItemRenderer" showIcons="true"
textAlign="left" textDecoration="none" verticalAlign="middle"/>
</mx:HDividedBox>
</s:WindowedApplication>
That's the code which is going to show the tree.
<?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="true">
<s:Label text="{data}"/>
</s:ItemRenderer>
I have tried with a simple renderer receiving the error #1034.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/ -->
<s:MXTreeItemRenderer name="IListItemRenderer"
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:HGroup id="hGr" left="4" right="4" top="4" bottom="4">
<s:RichText id="lbl" text="({itemIndex}) {data.label}" width="100%" />
<mx:Image id="img" source="{data.img}" toolTip="{data.img}" width="100" height="67" />
</s:HGroup>
</s:MXTreeItemRenderer>
I also have tried another renderer, but with the same results.
Not sure about showing data horizontally, but your 2nd point about itemrenderer is working fine for me. Here is the working code
<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer
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:HGroup id="hGr" left="4" right="4" top="4" bottom="4">
<s:Rect id="indentationSpacer"
width="{treeListData.indent}" height="22"
alpha="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Group id="disclosureGroup">
<s:BitmapImage source="{treeListData.disclosureIcon}"
width="16" height="16"
visible="{treeListData.hasChildren}" />
</s:Group>
<s:BitmapImage source="{treeListData.icon}"
width="16" height="16"/>
<s:RichText id="lbl" text="{data.nativePath}" toolTip="{data.nativePath}" width="100%" maxDisplayedLines="1" />
<s:Button label="Button"/>
<s:Button label="Button"/>
</s:HGroup>
I have a component that I'm trying to position and it works fine when the parent is not scaled but when it is scaled the positioning is off.
How do I get the correct position?
I will try to provide some example code since it is part of a larger application but it's basically the following:
<Group id="MainGroup" x="10" y="10">
<Group id="SubGroup" x="10 y="10">
<Button id="original" x="10" y="10">
</Group>
</Group>
<Button id="clone">
Then I use the code from this question or similar code to find out how to position the second button that is outside of the scaled containers.
It looks like the code I'm using works so there must be something else going on. Here is updated test code:
<?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" >
<fx:Script>
<![CDATA[
import com.flexcapacitor.utils.DisplayObjectUtils;
protected function button1_clickHandler(event:MouseEvent):void
{
var point:Point = DisplayObjectUtils.getDistanceBetweenDisplayObjects(originalButton, cloneButton);
cloneButton.x = point.x;
cloneButton.y = point.y;
}
]]>
</fx:Script>
<s:Group x="10" y="10" scaleX="2" scaleY="2">
<s:Group x="10" y="10">
<s:Button id="originalButton" x="10" y="10" label="Button"/>
</s:Group>
</s:Group>
<s:Button id="cloneButton" label="position me" click="button1_clickHandler(event)"/>
</s:WindowedApplication>
When I use resize component on image, it just disappears. Even if I give widthTo and heightTo values more than image size.
Code
<?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:net="flash.net.*">
<fx:Script>
<![CDATA[
import mx.effects.Resize;
import mx.utils.ObjectUtil;
private function btn_click(evt:MouseEvent):void {
var arr:Array = [];
arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
fileReference.browse(arr);
}
private function fileReference_select(evt:Event):void {
fileReference.load();
}
private function fileReference_complete(evt:Event):void {
img.source = fileReference.data;
}
]]>
</fx:Script>
<fx:Declarations>
<net:FileReference id="fileReference"
select="fileReference_select(event);"
complete="fileReference_complete(event);" />
<s:Resize id="resizeBig"
target="{img}"
widthFrom="{img.width}" widthTo="{newWidth.text as Number}"
heightFrom="{img.height}" heightTo="{newHeight.text as Number}"/>
<s:Resize id="myResizeEffect"
target="{img}"
widthBy="10" heightBy="10"/>
</fx:Declarations>
<s:Image id="img"
verticalCenter="0"
horizontalCenter="0"
maxWidth="200"
maxHeight="200"
/>
<mx:ControlBar>
<mx:Button id="btn"
label="Upload"
click="btn_click(event);" />
<s:HGroup verticalAlign="middle">
<s:Label>Width:</s:Label>
<!-- <s:NumericStepper id="newWidth" minimum="1" maximum="100" value="10" /> -->
<s:TextInput id="newWidth" restrict="0-9.\\-" />
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label>Height:</s:Label>
<s:TextInput id="newHeight" restrict="0-9.\\-"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Button id="resize"
label="Resize"
click="resizeBig.end();resizeBig.play();"
/>
<s:Button label="Resize Me"
click="myResizeEffect.end();myResizeEffect.play();"/>
</s:HGroup>
</mx:ControlBar>
</s:WindowedApplication>
I think the binding expression doesn't like the "as Number" thing. I would try with a function that does the conversion:
widthTo="{getNumber(newWidth.text)}"
I've got the latest Beta of Adobe Flash Builder 4.
I want to use a <s:List> component, and specify the dataProvider as being an XML file.
However, after loads of research (including looking at doc links off labs.adobe.com), I still can't figure out how to do it.
The XML file will look something like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<imageList>
<image location="path/to/file1.jpg" />
<image location="path/to/file2.jpg" />
<image location="path/to/file3.jpg" />
</imageList>
if you want to display images in a list, you should load the xml with a URLLoader , store it in a bindable variable and assign that as data provider to your list. the list should use a mx:itemrenderer where you can customize your view as you wish.
Actual code goes someting like this
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.collections.IList;
import mx.controls.Image;
private var loader : URLLoader = new URLLoader();
[Bindable]
private var xml : XMLList;
private function init() : void
{
this.loader.addEventListener(Event.COMPLETE, onComplete);
this.loader.load(new URLRequest("data.xml"));
}
private function onComplete(evt : Event) :void
{
this.loader.removeEventListener(Event.COMPLETE, onComplete);
this.xml = new XML(this.loader.data).image;
}
]]>
</fx:Script>
<mx:List id="list" width="200" height="500" dataProvider="{xml}">
<mx:itemRenderer>
<fx:Component>
<mx:Image width="200" height="200" source="{data.#location}" />
</fx:Component>
</mx:itemRenderer>
</mx:List>
If you want to load the XML file over the network you can do:
<?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/halo">
<fx:Declarations>
<mx:HTTPService id="srv" url="http://ws.jamesward.com/images.xml"/>
</fx:Declarations>
<s:applicationComplete>
srv.send();
</s:applicationComplete>
<s:List dataProvider="{srv.lastResult.images.image}" width="100%" height="100%">
<s:itemRenderer>
<fx:Component>
<mx:Image source="{data.source}"/>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:Application>
You need to use the XMLListCollection class.
<s:List dataProvider="{new XMLListCollection(data.image)}" labelField="#location"/>
My original aim was to have an XML file external to the SWF that my client could maintain themselves, and thus they would have control over the images displayed.
The first answer I posted was not quite the solution I was after: using fx:XML means that the contents of the XML file is actually compiled into the SWF, and hence is not alterable after compilation.
So I've implemented James' solution.
The XML file looks like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<images>
<image source="path/to/image1.jpg" />
<image source="path/to/image2.jpg" />
<image source="path/to/image3.jpg" />
<image source="path/to/image4.jpg" />
</images>
MXML:
<?xml version="1.0" encoding="utf-8"?>
<s:Group
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function lstImages_creationCompleteHandler(event : FlexEvent) : void
{
dpHttpService.send();
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService
id="dpHttpService"
url="images.xml"
/>
</fx:Declarations>
<s:List
id="lstImages"
dataProvider="{dpHttpService.lastResult.images.image}"
width="100%"
itemRenderer="path.to.render.ImageRenderer"
skinClass="path.to.skins.ListSkin"
>
<s:layout>
<s:HorizontalLayout gap="2" />
</s:layout>
</s:List>
</s:Group>
And in the image renderer, I refer to the data like this:
<mx:Image
id="imgRendered"
source="{data.source}"
/>
The really useful thing about this solution is that I can also put full http:// references to images that exist on another site if I want to (remembering crossdomain.xml, of course).
In fact, the images.xml file can exist on another server.
Well, I found one solution.
The MXML will look like this:
<fx:Declarations>
<fx:XML
id="dpXml"
source="path/to/images.xml"
/>
<mx:XMLListCollection
id="dpXmlListCollection"
source="{dpXml.image}"
/>
</fx:Declarations>
<s:List
id="lstImages"
dataProvider="{dpXmlListCollection}"
itemRenderer="path.to.render.ImageRenderer"
skinClass="path.to.skins.ListSkin"
>
<s:layout>
<s:HorizontalLayout gap="2" />
</s:layout>
</s:List>
And images.xml like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<images>
<image>
<location>path/to/image1.jpg</location>
</image>
<image>
<location>path/to/image2.jpg</location>
</image>
<image>
<location>path/to/image3.jpg</location>
</image>
</images>
Many thanks for all your responses!
Matt