I created a "Loading" spinner in a SWF. I display this spinner in my main application SWF using SWFLoader. How do I make the SWFLoader transparent? Currently it uses Flex's default background color even though I've set backgroundAlpha="0".
My spinner SWF's main MXML: (Note the use of backgroundAlpha)
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:Controls="Controls.*" width="30" height="30" backgroundAlpha="0">
<Controls:Spinner id="ctrlSpinner" /> <!-- spinner logic encapsulated in a component -->
</mx:Application>
My application SWF's main MXML:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="801">
<mx:SWFLoader x="10" y="173" id="swfSpinner" autoLoad="true" scaleContent="true" >
<mx:source>SWFs/LoadingSpinnerApp.swf</mx:source>
</mx:SWFLoader>
</mx:Application>
Note that the Spinner control itself is transparent. There's just something about the SWFLoader that causes it to ignore my backgroundAlpha setting. Any ideas?
I think your problem is within the Spinner component you must be setting the background color or alpha in there and that's causing your loader to have a background color. if you not setting it then set it because it probably defaults to an alpha of 1. when I do the following I don't get any background but when I change the alpha to 1 the black background appears.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" backgroundAlpha="1"
backgroundColor="#000000">
<mx:Text id="textBox" text="Hey World"/>
</mx:Application>
and
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" backgroundColor="#ffffff">
<mx:Canvas backgroundColor="#ff0000" width="200"
height="200" verticalCenter="0" horizontalCenter="0">
<mx:SWFLoader x="10" y="173" id="swfSpinner"
autoLoad="true" scaleContent="true" source="DebuggerTest.swf"/>
</mx:Canvas>
</mx:Application>
It turns out that I was doing the correct thing -- Flex just wasn't copying the latest version of my spinner SWF to the bin of my main app. Instead it had been holding on to a previous version built before I added the transparency.
I manually copied the new spinner SWF to the main app's bin and then it worked!
Related
I have an item renderer tied to an mx:DataGrid column. The renderer used to be inline with the column, but I've moved it out to its own file so I can reuse it across multiple tables.
The problem is that now the renderer doesn't resize (grow/shrink) when the column is resized. So if the user makes the column very small, the contents displayed by the renderer just eat up space and show up over top other columns Any ideas how to make this work?
Code for Item Renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<mx:HBox verticalScrollPolicy="auto" horizontalScrollPolicy="off" width="100%">
<mx:Spacer top="0" bottom="0" width="4" />
<mx:Image id="typeIcon" buttonMode="false" source="{data.type}" />
</mx:HBox>
</s:MXDataGridItemRenderer>
Code for column using that renderer:
<mx:DataGridColumn headerText="Type" dataField="type" itemRenderer="com.myCompany.myProject.TypeRenderer" />
Edit
Adding width=100% to the MXDataGridItemRender didn't work.
I posted my question on Adobe's flex forum -- the solution was to remove the outer s:MXDataGridItemRenderer and to just let the mx:HBox be the root control (no other changes were necessary.)
Strange that he Flex Builder app doesn't give you the option of defining the outermost control, it just plops an s:MXDataGridItemRenderer on top...
How can I set up the LabelItemRenderer or use any other item renderer that wouldn't truncate the overflowing text but would word wrap it?
UPDATE:
This blog post solved it:
http://flexponential.com/2011/08/21/adding-multiline-text-support-to-labelitemrenderer/
What version of the SDK are you using? You can just make a custom renderer and use a label in it and it'll work, use ItemRenderer as the base class
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer width="100%"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Label text="{data}"
width="100%"/>
</s:ItemRenderer>
I must be making a simple mistake (new to Flex). Here is main.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="#ff0000">
<mx:Style source="/testing123.css"/>
<mx:Canvas top="0" bottom="0" left="0" right="0" styleName="bg-lowlight" >
</mx:Canvas>
</mx:Application>
and here is testing123.css:
.bg-lowlight
{
backgroundColor: #003366;
}
The Canvas renders fine in design mode (a nice deep blue) but when I run the application (either in the browser or in the Flash Player) the frame is red (the color from the Application tag). If I specify the color for the Canvas directly, instead of through the styleName, it works as expected (blue canvas at runtime).
I'm using FlexBuilder3, and would much rather put colors in a .css file than on every Flex element!
Help!!!
*** Additional problem description ... has nothing to do with an external .css file. Even if I declare the CSS styles within the main.xml file, it still looks fine in Design mode and wrong when it runs. I am completely stymied.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ff0000">
<mx:Style >
.bg-lowlight
{
backgroundColor: #003366;
}
</mx:Style>
<mx:Canvas top="0" bottom="0" left="0" right="0" styleName="bg-lowlight" id="canvas1">
</mx:Canvas>
</mx:Application>
The active directory changes when you run the application, so "/testing123.css/" no longer refers to the correct file.
EDIT: It's actually REALLY annoying.
So...with CookieOfFortune's help I tracked down the root of the problem:
the CSS class name (bg-lowlight) was invalid. The '-' is not allowed
that's what happens, I guess, when you guess at what is logical!
Recently I've found a nice on-line diagramming tool - LovelyCharts. I like the way UI is designed - you can view screenshot here. I wonder how to make an image that span across multiple components, like the LovelyCharts logo in the upper right corner of the screenshot. Could anybody kick me in the right direction?
You need to create an image with a transparent background. The JPEG format does not support transparent backgrounds so you need to use GIF or another format. Then embed the image as in the following code.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Canvas width="476"
height="264">
<mx:Label x="103"
y="110"
text="Some text"
width="155"/>
<mx:Image x="115"
y="110"
width="100"
height="100"
source="#Embed('assets/transparent_back.gif')"/>
</mx:Canvas>
You can position the image where you want on the canvas, overlapping other components if you like. Here is an example of an image with a transparent background, http://commons.wikimedia.org/wiki/File:Gluecksklee_%28transparent_background%29.gif
This should definitely work for you. The layout of the application is absolute and there are two examples of images - one declared inside the canvas tags and the other outside
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Canvas width="476"
height="264"
x="50"
y="0"
borderStyle="solid"
borderThickness="5"
borderColor="black">
<mx:Label x="103"
y="110"
text="Some text"
width="155"/>
<mx:Image x="115"
y="110"
width="100"
height="100"
source="#Embed('assets/transparent_back.gif')"/>
</mx:Canvas>
<mx:Image x="30"
y="110"
width="100"
height="100"
source="#Embed('assets/transparent_back.gif')"/>
</mx:Application>
I'm trying to load an mxml component into my main flex project.
I saw that there are many related question regarding this issue but i'm too of a newbie to understand them.
the page contains a vbox on left and right sides and another flash file in the middle.
i want the vbox's that are placed on the left and right sides to be in separated mxml component. how can i do so?
thanks
Create the mxml component for your side boxes. In the following, I based it on VBox since that might be what you're looking for. I gave it an obnoxious backgroundColor that should be easy to spot when we run the app.
SideBox.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="300"
backgroundColor="0x990000">
</mx:VBox>
So in your main mxml application you can include your custom component by telling the application what namespace to look for it (that's what the xmlns:local="*" is for - the word local is just a name so that I can easily remember what it means, you can call it anything, the * essentially means to look in the current/same directory).
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="*" layout="absolute">
<local:SideBox x="40" y="20" />
<local:SideBox x="500" y="20" />
</mx:Application>