Is there a group box in Flex?
Is there any other control with same property?
I tried this link, but it has no answers. Also google
did not help me in this case.
there is a spark form element which you can use directly and you can include headings there.
As copied from the source http://help.adobe.com/en_US/flex/using/WSc5cd04c102ae3e973827a8e912ac2b325a4-8000.html
<s:Form id="myForm" width="450" height="125">
<s:FormHeading label="Spark Form Heading" />
<s:FormItem label="Username:">
<s:TextInput id="username" />
<s:helpContent>
<s:Label text="Enter your LDAP username" />
</s:helpContent>
</s:FormItem>
</s:Form>
If you just want to group elements you need to look at custom components (if they provide a source you can just modify those) like
https://www.assembla.com/code/shinylib/subversion/nodes
http://jayachandrababu.blogspot.de/2010/01/groupbox-fieldset-legend-component.html
I hope that helps
Andreas
Skinning a panel may also help. You can use panel's title as header like #Jason Sturges' provided link. Customizing panel's layout will also provide you with the group box you wanted.
Related
I have an implementation for a drop-down list. All the values are there, however it doesn't allow the user to select an item with the mouse instead of just with the arrow keys.
<s:FormItem label="Food:">
<s:DropDownList id="dropDownList"
dataProvider="{foodList.lastResult.Food_Display_Table.Food_Display_Row}"
labelField="Display_Name"
/>
<s:DropDownList id="TEST">
<s:dataProvider>
<mx:ArrayList>
<fx:String>Red</fx:String>
<fx:String>Orange</fx:String>
<fx:String>Yellow</fx:String>
<fx:String>Blue</fx:String>
<fx:String>Green</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:DropDownList>
</s:FormItem>
</s:Form>
The first drop-down list is my actual implementation. The second one is a test. I have the same problem with both drop-down lists.
The DropdownList is not supported in the mobile device profile. There are some opensource implementations that add support for this, and they're quite good : https://www.flextras.com/index.cfm?event=ProductHome&productID=21
I'm facing an issue with the flex Application I'm currently working on.
When I open a pop-up using the 'createPopUp' method, I've got this index out of bounds error message :
RangeError: The supplied index is out of bounds. at
mx.core::FTETextField/getLineMetrics()[E:\dev\4.y\frameworks\projects\spark\src\mx\core\FTETextField.as:2169]
at mx.core::UIFTETextField/get
baselinePosition()[E:\dev\4.y\frameworks\projects\spark\src\mx\core\UIFTETextField.as:784]
at mx.controls::DateChooser/get
baselinePosition()[E:\dev\4.y\frameworks\projects\mx\src\mx\controls\DateChooser.as:994]
at spark.components::Group/get
baselinePosition()[E:\dev\4.y\frameworks\projects\spark\src\spark\components\Group.as:282]
at
spark.layouts::ConstraintLayout/parseElementConstraints()[E:\dev\4.y\frameworks\projects\spark\src\spark\layouts\ConstraintLayout.as:1818]
at
spark.layouts::ConstraintLayout/parseConstraints()[E:\dev\4.y\frameworks\projects\spark\src\spark\layouts\ConstraintLayout.as:1632]
at
spark.layouts::ConstraintLayout/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\layouts\ConstraintLayout.as:414]
at
spark.components.supportClasses::GroupBase/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\components\supportClasses\GroupBase.as:1148]
at
mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
at
mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8430]
at
spark.components::Group/validateSize()[E:\dev\4.y\frameworks\projects\spark\src\spark\components\Group.as:1012]
at
mx.managers::LayoutManager/validateClient()[E:\dev\4.y\frameworks\projects\framework\src\mx\managers\LayoutManager.as:987]
at
mx.managers::PopUpManagerImpl/addPopUp()[E:\dev\4.y\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:382]
at
mx.managers::PopUpManagerImpl/createPopUp()[E:\dev\4.y\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:232]
at
mx.managers::PopUpManager$/createPopUp()[E:\dev\4.y\frameworks\projects\framework\src\mx\managers\PopUpManager.as:139] at
views::AddProjects/loadAddProjectPopUp()[C:\Users\Laura\Web\spidermak\spidermak\src\views\AddProjects.mxml:184]
at
views::AddProjects/___AddProjects_Button1_click()[C:\Users\Laura\Web\spidermak\spidermak\src\views\AddProjects.mxml:838]
It seems that this error is caused by a "dateChooser" component in my popup :
<mx:DateChooser id="endDate"/>
When I comment this line, the error is no longer thrown and the popup loads correctly.
It's really weird because I didn't have this issue until this morning. All I did in the meantime was changing some layout-related stuff, but I don't see what is would have to do with this problem.
I don't get it...
Does anyone have a clue about how to fix this ? I need my DateChooser !
Thanks !
Laura
EDIT -
It seems that the problem is not caused by the DateChooser itself, but by the FormItem around it. Here's what my code looks like :
<Form width="100%">
[...]
<s:HGroup width="100%">
<s:FormItem label="Date de début">
<mx:DateChooser id="startDate"
firstDayOfWeek="1"/>
</s:FormItem>
<s:FormItem label="Date de fin">
<mx:DateChooser id="endDate"
firstDayOfWeek="1"/>
</s:FormItem>
</s:HGroup>
</Form>
If I remove the two FormItems, it works. Could anyone explain me why? Thanks !
Try wrapping the component in a <s:Group> element, i.e.
<s:FormItem label="Start date">
<s:Group>
<mx:DateChooser id="startDate"
firstDayOfWeek="1" />
</s:Group>
</s:FormItem>
Apparently, it's something to do with the composition of Spark components. lolFlex.
(I had exactly the same problem, and couldn't find any solution on the interwebs either!)
I think you should upgrade to the latest TLF. This reminds me of a bug in TLF 1.x. Try 2.x.
Well, I was able to simply enough (after about an hour of googling) implement i18n (internationalization) into my Flex application by having to reverse engineer the Flex SDK and do a lot of digging (a specific question on here helped me a lot! (with some updates for flex 4.5)).
The problem is, I can't use my {getLand('key')} bind inside an <fx:XMLList> (how you define the contents of a <mx:MenuBar>. I've included some example i18n below, as well as an example of the menu bar.
<!-- Example of proper (working) i18n -->
<s:TextArea text="{getLang('Rules')}"/>
<!-- Problem Area (a bare bones example) -->
<!-- Error message in IDE: Access of undefined property _application_XMLList1 -->
<mx:MenuBar labelField="#label">
<fx:XMLList>
<menuitem label="{getLang('File')}"/>
</fx:XMLList>
</mx:MenuBar>
Try putting the XMLList outside of the menubar, like so:
<fx:Declarations>
<fx:XMLList id="_menuStuff">
<menuitem label="{getLang('File')}"/>
</fx:XMLList>
</fx:Declarations>
<mx:MenuBar labelField="#label" dataProvider="{_menuStuff}"/>
That should work, good luck!
I thought this was the default behaviour (all the Adobe docs seem to indicate that this is the case).
Say you have a form:
Name: [______]
Password: [________]
generally you want Name and Password to line up on their right-hand side (right justification). The length should be the length of the longest label.
When I add the following code to my MXML (authoring in Flex 4) it does not do that at all! But rather tjust crams everything left-justified, similar to the Name/Password example above.
What's the solution?
<s:Form id="directoryForm_A" width="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="justify"/>
</s:layout>
<s:FormItem label="Click">
<s:Button label="Button"/>
</s:FormItem>
<s:FormItem label="Root Directory">
<s:TextInput x="0" width="100%" enter="handleUserSetRootDirectory(event)"/>
</s:FormItem>
</s:Form>
Which Adobe docs were you reading? You realize that the Spark Form are going to be very different than the Halo / MX Form. I would also suspect that the Spark form is not working yet.
Here are the docs on the Spark Form.
I think you'll benefit from reading the layout rules section of the FormItemLayout details. I cannot find the documentation that claims that all labels will be right aligned.
For anyone looking to a beta solution, Peter deHaan posts about this exact topic here: http://blog.flexexamples.com/2010/08/28/setting-the-text-alignment-on-a-spark-formitem-label-in-flex-hero/
Do note, since his example doesn't translate directly over to my issue:
adding to the for some reason disables the ability for the renderer to calculate the maxLabelWidth
Hope this helps others in the future.
Our resident Flex expert is out for the day and I thought this would be a good chance to test this site out. I have a dropdown with a dataProvider that is working fine:
<ep:ComboBox id="dead_reason" selectedValue="{_data.dead_reason}"
dataProvider="{_data.staticData.dead_reason}"
labelField="#label" width="300"/>
The ComboBox is custom but I'm not sure if that matters for the question. I need to change the combo box to radios (all in one group) but maintain the dynamic options. In other words, what is the best way to generate dynamic RadioButtons?
Try using an <mx:Repeater> Something like:
<mx:Repeater dataProvider="{_data.staticData.dead_reason}">
<mx:RadioButton groupName="reasons" ...>
</mx:Repeater>
<mx:RadioButtonGroup id="RDO_Group"/>
<mx:Repeater id="myRepeater" dataProvider="{_data.staticData.dead_reason}">
<mx:RadioButton id="rdo" label="{myRepeater.currentItem}" value="{myRepeater.currentItem}" groupName="RDO_Group"/>
</mx:Repeater>
is the best way.