Trying to understand why when creating a component in flex (flash builder 4) I am unable to create a component from file->new component and reference "data.", but a slightly different sample works. This component is going to be used as an advanced data grid renderer.
This one compiles fine:
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" height="100%" width="100%" >
<s:RichText text="{data.presentingProblemNotes}"/>
</mx:VBox>
This one does not compile, does not like the data.presentingProblemNotes
<?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/mx" width="100%" height="100%">
<s:RichText text="{data.presentingProblemNotes}"/>
</s:Group>
The error is on the "data" variable - that it does not exist.
In mx components, all UIComponent had a 'data' property which was used for item renderers, but that has been removed in Spark components because not all of them needed it. They now need to extend DataRenderer for it to work. In your particular case, you could do this instead:
<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" width="100%" height="100%">
<s:RichText text="{data.presentingProblemNotes}"/>
</s:ItemRenderer>
Related
how to I pass in a uicomponent to a mxml custom component?
ex: I want to pass in any number of buttons, and I want my custom component to lay them out in a certain order.
MainApp.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" xmlns:local="*"
>
<local:myComp >
<s:Button label='Button1' />
<s:Button label='Button2' />
<!--I want to add anything else here -->
</local:myComp>
myComp.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/mx"
creationComplete="init()"
width="400" height="300"
>
<fx:Script>
<![CDATA[
private function init():void {
// how do I access the added components and place them where I want?
// do I use removeChildren and AddChildren?
// addItemsHere.addchild(nextButton);
]]>
</fx:Script>
<s:HGroup id='addItemsHere' />
As your component extends Group, you shall use addElement instead of addChild (and for all other methods with 'child' in their name it shall be replaced with 'element'. So, access to all elements will be like that:
for(var i:int =0; i < numElements; i++){
var button:Button = Button(getElementAt(i));
doWhatIWantWithMyButton(button);
}
It is also better to override createChildren method of your component if you know what to add at the creation moment.
If you don't need very specific button placement, you can set layout property of your component to any desired layout (like VerticalLayout, for example), and those layouts are tunable.
You seem to be trying to recreate functionality that already exists in the SDK. This is wat SkinnableContainer is for.
Depending on your use case, there are two ways to use it:
You only need to add some custom graphic elements to you custom component, but no additional behaviour
In this scenario, you would simple reuse SkinnableContainer and assign it a custom skin, like so:
<s:SkinnableContainer skinClass="MySkin">
<s:Button label='Button1' />
<s:Button label='Button2' />
</s:SkinnableContainer>
With MySkin.mxml perhaps something like:
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
[HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label text="I'm a SkinnableContainer"/>
<s:Group id="contentGroup" width="100%" height="100%">
</s:SkinnableContainer>
Your Buttons will now automatically be added to the contentGroup; the SkinnableContainer class handles this for you. Note that this Group must have exactly that id; it's a required SkinPart.
You want to add some behaviour to you component
The procedure is the same, but you would now subclass SkinnableContainer (this is usually done in pure ActionScript), write some behaviour in there, and assign the skin to an instance of this class.
public class MyComp extends SkinnableContainer {
//additional behaviour goes here
}
Usage:
<local:MyComp skinClass="MySkin">
<s:Button label='Button1' />
<s:Button label='Button2' />
</local:MyComp>
I am trying to create an AIR app that you can maximize, and when you maximize all the components contained in the windowedApplication are scaled with the containing windowedApplication.
At the moment when you maximize the window all the components just stay the same size. Is this even possible?
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:ATE="http://ns.adobe.com/ate/2009"
xmlns:ai="http://ns.adobe.com/ai/2009"
xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
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:lib="assets.graphics.UI.*"
xmlns:flm="http://ns.adobe.com/flame/2008"
xmlns:lib2="assets.graphics.*"
xmlns:components="components.*"
xmlns:lib3="assets.graphics.logout.*"
xmlns:lib4="assets.graphics.logo.*"
xmlns:sparkTree="com.sparkTree.*"
xmlns:testsubmitassessmentscore2="services.testsubmitassessmentscore2.*"
minWidth="800" minHeight="600" backgroundColor="#FFFFFF"
creationComplete="creationCompleteHandler()" showStatusBar="false"
currentState="{model.whichViewState}" currentStateChange="onStateChange()"
preloaderChromeColor="#FFFFFF" title="MyApplication">
<!--<fx:Style source="Main.css">-->
<!--minWidth="800" minHeight="600"-->
<fx:Style>
You can listen for the resize event dispatched by any UIComponent :
<?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/mx"
width="100%" height="100%"
resize="onResize(event)"
>
<fx:Script>
<![CDATA[
import mx.events.ResizeEvent;
private function onResize(event:ResizeEvent):void
{
// code goes here : resize your components and stuff...
}
]]>
</fx:Script>
</s:Group>
Be careful, though, because this kind of trick may cause infinite loop : you listen for a resize event, then resize a component that causes another resizeevent to be dispatched, and the loop goes back from the start...
I am trying to make a simple change on look of Flex 4.5 Spark DropDownLis trough extending it's item renderer, anyway even a just shiny new item renderer bring me as result a items which labels is blanks.
If i remove the renderer everything is fine, but with it - the items is blank white.
<s:DropDownList id="cbX" x="140" y="281" width="276" itemRenderer="comboItemRenderer" labelField="#text">
<mx:XMLListCollection>
<fx:XMLList>
<node text="1" />
<node text="2" />
<node text="3" />
</fx:XMLList>
</mx:XMLListCollection>
</s:DropDownList>
item renderer :
<?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>
Is it a bug, or i am doing it wrong ?
Try to use:
<?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="{label}"/>
</s:ItemRenderer>
The data for the renderer is still the data. But if you use labelField you rely on List's label calculation routine. So just display it.
When loading an Application (spark.Application) as a SWF in another Application using SWFLoader without preserving the domain, the scaling of the first application gets scrambled.
Examples are below:
App1.mxml
<s:Application width="100%"
height="100%"
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[
private static const LOADER_CONTEXT:LoaderContext = new LoaderContext(false, new ApplicationDomain());
]]>
</fx:Script>
<mx:SWFLoader width="100%"
height="100%"
source="App2.swf"
loaderContext="{LOADER_CONTEXT}" />
</s:Application>
App2.mxml
<s:Application width="100%"
height="100%"
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:Panel width="100%"
height="100%"
title="Panel" />
</s:Application>
When not using LoaderContext in App1.mxml scale is OK. When using it, App2.mxml is scaled. I tried to set scaleContent=false in SWFLoader but then the loaded application only occupies a fraction of the screen (600x400 or something like that).
Any help or suggestion is welcomed.
I'm trying to word wrap a richeditable text but I'm having some problems:
I want it to wrap vertically so I can avoid the horizontal scrollbar.
The Air app only has a spark list and the itemrenderer used is this:
<?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:RichEditableText width="100%" height="100%" multiline="true" text="{data.text}"/>
</s:ItemRenderer>
Any ideas ho to fix this? Thank you.
Add minWidth to your text component like so:
<s:RichEditableText width="100%" height="100%" minWidth="0" multiline="true" text="{data.text}"/>
This is an old trick to force a component to calculate its size properly.
lineBreak property seems to work for flex 4.5 in actionscript and mxml, but only in mxml in previous versions.
<s:RichEditableText lineBreak="toFit" width="100%" height="100%" multiline="true" text="{data.text}" />
Set the ItemRenderer width to 100%:
<?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"
width="100%">
<s:Label width="100%" text="{data.text}"/>
</s:ItemRenderer>