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/
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.
I'm trying to make a horizontal list of labels with a space in-between them (for use as part of a ticker tape).
Labels outside of a list have a transparent background but as part of either the ItemRenderer or List, they get a white background. My assumption is that this is part of the default styling applied to a Spark ItemRenderer.
Question - Is there any way to totally get rid of all default visual stylings applied to an ItemRenderer?
protected var messages:ArrayCollection = new ArrayCollection( new Array("1", "2", "3", "etc") );
<s:List dataProvider="{messages}" itemRenderer="SimpleTextRenderer">
<s:layout >
<s:HorizontalLayout verticalAlign="middle" />
</s:layout>
</s:List>
SimpleTextRenderer:
<?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="false" contentBackgroundAlpha="0" >
<s:Label text="{data}" />
</s:ItemRenderer>
You can implement your own custom item renderer, extending UIComponent (or Label) for instance and implementing IItemRenderer. It's actually quite easy, as explained here (you won't need to implement both of the given interfaces, as one implements the other).
This will allow you to get rid of styling and stuff, because you'll precisely manage how your component gets rendered through its validation cycle.
I need hand cursor to appear on roll over spark Label. I've tried useHandCursor + buttonMode properties, but no result. And is there anything like htmlText property for spark Label (I need underline)? Any alternative solutions are welcome. Thanks.
Does this code suites your needs?
<?xml version="1.0" encoding="utf-8"?>
<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">
<s:Label buttonMode="true" horizontalCenter="0" text="Test" textDecoration="underline" verticalCenter="0" />
</s:Application>
If you want to have ability to mix styles together you can use the following:
<?xml version="1.0" encoding="utf-8"?>
<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">
<s:RichText buttonMode="true" horizontalCenter="0" verticalCenter="0">
<s:content>Hello, <s:span textDecoration="underline">World</s:span>!</s:content>
</s:RichText>
</s:Application>
According to documentation:
The Spark architecture provides three
text "primitives" -- Label, RichText,
and RichEditableText -- as part of its
pay-only-for-what-you-need philosophy.
Label is the fastest and most
lightweight, but is limited in its
capabilities: no complex formatting,
no scrolling, no selection, no
editing, and no hyperlinks. RichText
and RichEditableText are built on the
Text Layout Framework (TLF) library,
rather than on FTE. RichText adds the
ability to render rich HTML-like text
with complex formatting, but is still
completely non-interactive.
RichEditableText is the slowest and
heaviest, but can do it all: it
supports scrolling with virtualized
TextLines, selection, editing,
hyperlinks, and images loaded from
URLs. You should use the fastest one
that meets your needs.
Normally on other IDEs, I simply drag a Rectangle object to the body or content of my application then resize it, define colors, etc. What I discovered in Flex 4 (Flash Builder 4) was that it's not just like that (or is it?) and I can't seem to find something to drag to my application to create a Rectangle object.
My question is, how do I do it? How do I create a simple Rectangle?
There is no support for FXG elements in Flash Builder Design mode.
What you can do is, use Flash Catalyst, draw your primitives with it and copy/paste the generated code in Flash Builder.
I think I just figured out how to deal with it. I just make a new component and base it on spark.primitives.Rect. Then after that, I just assign the fill's SolidColor to whatever I need just like my component code below.
<?xml version="1.0" encoding="utf-8"?>
<s:Rect 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[
[Bindable]
public var fillColor:String;
]]>
</fx:Script>
<s:fill>
<s:SolidColor color="{fillColor}" />
</s:fill>
</s:Rect>
Not sure if this is the best way but it works for me so I'll go along with it. :)
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>