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>
Related
I am playing around with flex 4 GUI with a simple alignment but couldnt figure out why.
I have button1, button2, and a text field. I want to align them horizontally, and center vertically for the text.
For the following code, i see the following output.
_______ ______
|bt1 | |bt2 | text1
|______| |______|
my question is;
1) why with the properties i sent on btn 1 verticalCenter="10" and btn2 verticalCenter="-10" they are still aligned? shouldnt i see one is up and the one is donw?
2 ) why my text1 is aligned top, even though i set it to verticalCenter=0, i tried it with or without in a group.
Thanks guys
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group minWidth="100">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="myButton" click="" horizontalCenter="0"
verticalCenter="10"/>
<s:Button label="myButton" click="" verticalCenter="-10"/>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Label text="hello" color="#FFFF" verticalCenter="0"
textAlign="center" />
</s:Group>
</s:Group>
</s:Application>
It might be helpful for others to understand why this occurs, as it is a common problem.
When you use a HorizontalLayout or VerticalLayout some properties you set on the "layout objects" are not used. This occurs because these properties do not really work or make sense in a vertical/horizontal layout.
Layout properties that are ignored by vertical/horizontal layouts:
x and y coordinates
horizontalCenter and verticalCenter
top, bottom, left, right contstraints
The above properties will work for the default BasicLayout class.
As indicated in the answer by #Mahesh Parate, the vertical/horizontal layouts do allow for content to be centered by using the horizontalAlign and verticalAlign properties.
Below code may help you: - add verticalAlign="middle" in HorizontalLayout this will solve your problem.
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function onClickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<s:Group minWidth="100" >
<s:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</s:layout>
<s:Button label="myButton" click="onClickHandler(event)" horizontalCenter="0"
verticalCenter="10"/>
<s:Button label="myButton" click="onClickHandler(event)" verticalCenter="-10"/>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Label text="hello" color="#FFFF" verticalCenter="0"
textAlign="center" />
</s:Group>
</s:Group>
</s:Application>
I'm trying to set the hand cursor on an HBox. I've tried buttonMode and useHandCursor but have had no luck. This example displays the busy cursor. Can anyone tell me how to make it display the flashPlayer's hand cursor?
<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" xmlns:components="com.dn2k.components.*" >
<fx:Script>
<![CDATA[
private var cursorID:int;
//cursorManager
protected function box_mouseOverHandler(event:MouseEvent):void
{
cursorManager.setBusyCursor()
}
]]>
</fx:Script>
<mx:HBox id="box" useHandCursor="true" buttonMode="true" mouseChildren="false" backgroundColor="0xcc0000" mouseOver="box_mouseOverHandler(event)">
<s:Label text="Hiya sexy..."/>
</mx:HBox>
This code shows it perfectly while mouse is over container:
<?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">
<mx:HBox backgroundColor="0xcc0000" buttonMode="true" id="box" mouseChildren="false" useHandCursor="true">
<s:Label text="Hiya sexy..." />
</mx:HBox>
</s:Application>
If you want to set hand cursor in Label you must set mouseChildren=”false” and below is the revised code
<mx:HBox backgroundColor="0xcc0000" buttonMode="true" id="box" useHandCursor="true">
<s:Label text="Hiya sexy..." buttonMode="true" mouseChildren="false" useHandCursor="true" />
</mx:HBox>
Hope this works for you.
What Jeff said. Also you can use CursorManager.setCursor(). You'll have to embed a graphic for the cursor though.
You can also use the newer Mouse class which provides a higher frame rate native cursor.
<mx:HBox rollOver="Mouse.cursor = MouseCursor.BUTTON"
backgroundColor="0" backgroundAlpha="0"
rollOut="Mouse.cursor = MouseCursor.AUTO"/>
The background color and background alpha are used to draw out graphics that are used as the hit area. In empty Spark containers there is a mouseEnabledWhereTransparent property that I don't think existed in mx containers. Here is documentation on it:
When true, this property ensures that the entire bounds of the Group
respond to mouse events such as click and roll over. This property
only goes in to effect if mouse, touch, or flash player gesture events
are added to this instance. In addition, it assumes that the calls to
addEventListener()/removeEventListener() are not superfluous.
Having said that it seems that this works without setting the mouseEnabledWhereTransparent property:
<s:Group id="testingHitGroup" left="10" top="10"
rollOver="cursorObject_rollOver(event)" width="100" height="100"/>
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>
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.
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>