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.
Related
In a Flex Mobile app I would like to have a ButtonBar at the bottom and I need to change the labels of its buttons:
(I don't want to use TabbedViewNavigatorApplication here, because all my logic is in a single View with an ActionBar at its top and ButtonBar at its bottom).
So I have prepared a very simple test case to demonstrate my problem.
Please just create a "blank" Flex mobile project in Flash Builder and put my 2 files (below) into it and you will see my problem - touching the buttons at the bottom doesn't change the label of the very right button).
TestAC.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"
applicationDPI="160">
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
import spark.skins.mobile.TabbedViewNavigatorTabBarSkin;
private function handleTabs(event:IndexChangeEvent):void {
trace(_tabBar.selectedIndex);
_tabs[2].label = String(1 + _tabBar.selectedIndex);
}
]]>
</fx:Script>
<fx:Declarations>
<s:MultiDPIBitmapSource id="CHAT"
source160dpi="#Embed('chat.png')"
source240dpi="#Embed('chat.png')"
source320dpi="#Embed('chat.png')" />
<s:ArrayCollection id="_tabs">
<fx:Object label="One" />
<fx:Object label="Two" />
<fx:Object label="Three" icon="{CHAT}" />
</s:ArrayCollection>
</fx:Declarations>
<s:ButtonBar id="_tabBar"
requireSelection="true"
width="100%"
bottom="0"
skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin"
dataProvider="{_tabs}"
change="handleTabs(event)">
</s:ButtonBar>
</s:Application>
chat.png:
Allright, adding _tabs.refresh(); to handleTabs has helped.
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>
How can we navigate within an itemRenderer?
For example, in Views we use the View.navigator (ViewNavigator) to push and pop views, there is no such feature in ItemRenderer.
Navigation within a View (Easy)
<s:View>
<s:HGroup >
<s:Button label="Questionnaire" click="navigator.pushView(view.QuestionnaireCategory1View)"/>
</s:HGroup>
Navigation within a Item Renderer (Impossible?)
<?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"
autoDrawBackground="true" height="56">
<s:HGroup>
<s:Button text="Button" click="?????????"/>
</s:HGroup>
</s:ItemRenderer>
You want to use bubbling events to catch when the user interacts with an item renderer.
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:HGroup>
<s:Button text="Button" click="dispatchEvent(new Event('buttonClicked', true));"/>
</s:HGroup>
</s:ItemRenderer>
Then when do this with whatever is using your item renderer:
<DataGroup id="group" itemRenderer="YourItemRenderer" dataProvider="{someData}" creationComplete="group.addEventListener('buttonClick', someHandlerFunction);" />
And then within your handler function, do whatever action you wanted to do. In this case, I'm adding the event listener on creation complete of the DataGroup, but you can add it to the creation complete event of the main container. This way you keep your item renderer decoupled and reusable, as well as using proper software practices (data in, events out).
In when you create your itemRenderer
<comp:MyItemRenderer navigator="{navigator}"/>
In your itemRenderer (here call MyItemRenderer)
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
autoDrawBackground="true" height="56">
<fx:Script>
<![CDATA[
import spark.components.ViewNavigator;
private var _navigator:ViewNavigator;
public function set navigator(value:ViewNavigator):void
{
_navigator = value;
}
]]>
</fx:Script>
<s:HGroup>
<s:Button label="Button" click="{_navigator.pushView(view.QuestionnaireCategory1View)}"/>
</s:HGroup>
I wanted to know if there's a way to put the label of the FormItem tag right . I mean , by default the FormItem label and the TextInput look like this : "Name: [textinput] "
but I want my form to look like this : "[textinput] :Name" . I tried many properties and attributes but seems there's no property for doing that . can anyone help me with this?
thanks
Use Flex 4.5 SDK
<?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">
<s:Form layoutDirection="rtl">
<s:FormItem label="First item">
<s:TextInput>
</s:TextInput>
</s:FormItem>
</s:Form>
</s:Application>
Instead of using FormItem, we can use HBox but we need to mention Label explicitly
<mx:HBox>
<mx:TextInput id="text"/>
<mx:Label text="Text Input"/>
</mx:HBox>
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>