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>
Related
I have read the Adobe's docs Using FXG and Embedding application assets, but can only embed the FXG through MXML -
MyStars.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.Home">
</s:ViewNavigatorApplication>
Home.mxml (works okay, when embedding FXG through MXML):
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="assets.*"
title="Home">
<comps:Star />
</s:View>
Star.fxg (located in src/assets/Star.fxg):
<?xml version='1.0' encoding='UTF-8'?>
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">
<fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
<fxg:fill>
<fxg:SolidColor color="#FFFFFF"/>
</fxg:fill>
<fxg:stroke>
<fxg:SolidColorStroke
caps="none"
color="#4769C4"
joints="miter"
miterLimit="4"
weight="20"/>
</fxg:stroke>
</fxg:Path>
</fxg:Graphic>
When I however try to instansiate the FXG graphic through ActionScript (still in the same Flex mobile project), I get the compile error:
Call to a possibly undefined method Star
Home.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="assets.*"
title="Home">
<fx:Script>
<![CDATA[
import spark.core.SpriteVisualElement;
private static const STAR:SpriteVisualElement = new Star();
]]>
</fx:Script>
<s:BitmapImage source="{STAR}" />
</s:View>
I've also tried import comps; and/or new comps.Star();
When I move the FXG file to src/ and use xmlns:comps="*" everything works.
Import Star in ActionScript, which based on your code I assume will be something like this:
import assets.Star
private static const STAR:SpriteVisualElement = new Star();
I suspect that will get rid of the compiler error. However, I'm not sure if you can use a SpriteVisualElement as the source for a BitmapImage. You may have to add the SpriteVisualElement as a child of the parent container and make use of the Flex Component Lifecycle to do this.
I've done some experimenting around this, and just contributed this code to Apache Flex. The specific class is here. Although, for some reason I missed the fact that FXG elements could be SpriteVisualElements. Using my FXGImage class will not absolve you of the responsibility of having to size and position the component in ActionScript if you create it in ActionScript.
For FXG graphic, pay attention to your artwork size. When you create object using FXG, the white-space around the icon counts. Make sure you set the artwork size to the size of your icon (no extra white-space around the icon). This way, the FXG asset will look much better when you embed to the bitmapImage.
What I'd like to do: create an MXML component with some children, then extend it via MXML to create a new component with more children, without losing the original set.
In other words
create a component bc.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer 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">
<s:Button id="b1" label="button1"/>
</s:BorderContainer>
and then extend it to a separate component mc.mxml
<?xml version="1.0" encoding="utf-8"?>
<borderContainerX:bc 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:borderContainerX="borderContainerX.*">
<s:Button id="b2" y="100" label="button2"/>
</borderContainerX:bc>
and get a component with 2 buttons.
I've seen various threads on how this is either not possible (1) or on workarounds to accomplish this (2, 3) and have been wondering if something has changed with the advent of Flex 4 or if we're still stuck with these workarounds the last reply in thread 3 seems to hint at Flex 4 fixing it all?
In Flex 4, you will have to override your "mxmlContent" property setter in order to preserve your already defined children in a parent class
One of possible implementations of such a override is presented in the comment for this blog entry
Quick tip (Flex 4): Goodbye templates – hello mxmlContent
http://www.websector.de/blog/2009/10/02/quick-tip-flex-4-goodbye-templates-hello-mxmlcontent/
How to use validator controls like Required validator, integer validator etc in Air application? I tried to use them but I got this error:
Component declarations are not allowed here. (Note: visual children must implement mx.core.IUIComponent)
i have imported the validator like this...
import mx.validators.Validator;
and used like this
<mx:TextArea id="txtQuestCaption" change="txtQuestCaption_change(event)"/>
<mx:Validator id="reqValidator" source="txtQuestCaption">
</mx:Validator>
But i got that above error..
how to use validator in air ?
It seems that this code is nested inside some container tag. Move the <mx:Validator/> tag out of the current position and place it directly within the root mxml tag. Non visual tags like Validator, Style etc should be added as the immediate children of the root mxml tag
<!-- wrong -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas>
<mx:TextArea id="txtQuestCaption" change="txtQuestCaption_change(event)"/>
<mx:Validator id="reqValidator" source="txtQuestCaption"/>
</mx:Canvas>
</mx:Panel>
<!-- correct -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas>
<mx:TextArea id="txtQuestCaption" change="txtQuestCaption_change(event)"/>
</mx:Canvas>
<mx:Validator id="reqValidator" source="txtQuestCaption"/>
</mx:Panel>
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!
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!