I'm trying to create a navigation panel based on the Flex Accordion control. The 2 things I'm trying to figure out are how to:
modify the Accordion so that all of the of "panels" are closed by default. (normally one of the panels is open by default)
treat some of the Accordian headers as just simple buttons (ie you click and an event is triggered instead of an accordion panel opening)
Does anyone have any pointers on implementing these 2 items or know of any existing components that could yield this behavior?
Thanks!
Flexlib has CanvasButtonAccordionHeader, which would help implement the button functionality.
This SO question suggests starting with flexlib's WindowShade component instead, which might make the "none-selected" case easier.
Related
I wanted to know if it is possible to add a checkbox in the accordion control.
The main idea is to have a list of selectable items (like selecting various items for checkout) and each of them should have an option to display additional information (the accordion panel).
So basically, 3 questions:
Can I have a checkbox in the accordion header?
Can I have all the panels closed from the start? So the user chooses which panel to open, and not start with one panel displayed.
Can I have multiple panels opened at the same time?
Some notes:
- I tried a header renderer option, but the checkbox was the same for all accordion headers, so it was useless.
- It would be great to avoid the use of libraries or external controls. I am aware of some of the limitations of Flex controls though.
Thanks for any help or information you can provide ! :)
If you're not dead set on using mx controls, I'd give the 4.6 list/item renderer skinning method a try.
I'd use the sparks list control and create a custom item render that's comprised of checkbox control, several nested group/border-container wrappers depending on your design/creative requirements and whatever as3 logic would be necessary to expand and contract the item renderer keyed off of the checkbox's click event or change events-- that's some of the beauty of skinning item renderers in flex 4, you can encapsulate all that dope-ass logic within renderer itself.
In any case, here's some links you might find helpful:
http://www.adobe.com/devnet/flex/articles/flex4_skinning.html
http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/
http://saturnboy.com/2009/09/flex4-component-states-skin-states/
hope this helps!
when user clicks on Add button, then a pop up button will be opened with certain form elements (like textinput, date field, text area).. When i used 'TAB' inside this form,it is not working. I found in couple of Questions / forums that we need to create an instance of FocusManager and then bring/activate focus for the pop up. But still i didn't see the tab working inside the form. In order to tab order working inside a pop up, what steps we need to follow.
I tried using focusmanager and property like tabfocusenabled, tabenabled and also added taborder inside each form element. But no luck.
Iam using Flash Builder 4.5 and using spark components for development.
Is there any workaround for this problem?
Thanks in Advance,
Regards
Srinivasan
Thanks for all your responses.
Finally the issue has been solved by one of my colleague. Problem is , the form has been loaded inside Horizontal accordion (flexlib HACCORDION). So inorder to draw focus inside the accordion to child elements, we need to add 'hasFocusableChildren="true"' for the HAccordion (horizontal accordion component). Adding this property solves the tab order problem.
I have also pasted the code below:
The customer I am working for wants to display popup in an AIR application (designed in Flex 4).I will therefore use TitleWindow and PopupManager for this (or NativeWindow could be an option too).
Pretty basic, I can handle this.
Trouble is, this customer would like this popup to be looking as a Fancybox, that is, with the close button, slightly out of the popup.
Do you know how to do this ?
Easy enough. Just create a custom skin based for your TitleWindow which you can then change the appearance and location of the close button (among other things). The setup is fairly straightforward, but you should look up how to skin in Flex 4.
I searched but couldn't find my answer, I'm sure it's easy for anyone with a little experience. I have multiple datagrids on a page, each one I want sortable with drag and drop, but I don't want items drug from one control to the other. How can I prevent a user from dragging an item out of a conrol. I would prefer to have it just stop moving with the mouse, but I am prepared to just completely cancel out of the dragging if need be.
I was trying to do something like this
dragExit="dragEvent.CANCEL"
This is obviously wrong, but I can't find the correct way to do it.
Thanks in advance.
~Mike
Ok, so you have an app with multiple drag/drop datagrids, and you only want items dragged within a datagrid, and not from 1 to the other, is how I understand this.
What you need to do is create a custom dragDrop event handler for each datagrid which has the following command: event.preventDefault(). This in effect will stop a datagrid from receiving items from another .
This does not prohibit the dragging an item outside its host's borders, but it will prohibit the item being dropped into a different datagrid.
HTH.
Steps to reproduce:
Create a modal popup to popup with popupmanager (mine is a group with a skinnable container inside of it)
Put field components (textinputs) on the modal popup
Attempt to tab between controls
Tab switches to controls behind the modal-popup and ignores the fact that the modal is there. The tab loop only contains controls behind the modal.
I've tried everything from setting tabChildren, to hasFocusableChildren. I can't implement IFocusManager as it's Halo and my modal is a Spark group, but would that work in some capacity? It really seems like Flex just ignores the modal in its focusmanager.
This is not a bug, I'm assuming it's by design.
Group is supposed to be a lightweight container -- just for grouping things together. Group does not implement the IFocusManagerContainer interface.
SkinnableContainer (or more correctly SkinnableContainerBase) implements that interface, and that's why tabbing works when you use it w/PopupManager.
Solution can be found here (if you want to use a Group):
http://googolflex.com/?p=650
Can you try using TitleWindow instead of group with a skinnable container? We use TitleWindow all the time and it does tab correctly.