Our product team has requested custom cursors during drag/drop operations. They have provided me with three images to implement:
Open-Hand-Grabber.png: displays when a user hovers over an item that they can drag
Closed-Hand-Grabber.png: item is being dragged
Closed-Hand-Grabber-No-Drop: item dragged over an area where it cannot be dropped
I have embedded these images into the Flex application and I am now trying to implement the desired behavior.
My first thought was to listen to the drag/drop events and set the cursors using the CursorManager.setCursor() method. This solution seems very code intensive and I feel that there must be an easier way to skin the various drag/drop cursor states.
Any ideas?
Check out the various cursor styles available on the DragManager class:
copyCursor
defaultDragImageSkin
linkCursor
moveCursor
rejectCursor
http://livedocs.adobe.com/flex/3/langref/mx/managers/DragManager.html
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!
I have an Flex 4 application (not AIR) which has some floating windows that act essentially as modeless dialogs.
Right now, if two of these are open at once they function as siblings which are both active and whose controls are enabled for user interaction.
I now need to maintain some notion of which one is "active" in the application. I don't want to /disable/ the non-active ones so as to blur them or prevent input on their controls.
I basically want to replicate basic OS window management: when you click or type into a control in one window it comes to the front and its title bar looks "active" and the others then look "inactive". Just like with a bunch of explorers in Windows.
Can anyone clue me in on an approach?
Assuming that your pop up windows extend UIComponent, you should be able to listen to the FocusIn event to make your window active and the focusOut to make your window inactive.
Now containers do not usually dispatch the focus events; however children of the containers will. And since the focus event bubble, you can listen for them as part of your popup.
Personally I would handle this with what we call a Mediator... essentially a singleton UI controller, along with a slightly custom component and custom skin. On Popup, each window registers itself with the Mediator, so the mediator knows all the windows that are open, on close each de-registers itself, OnFocusIn on each component it notifies the mediator of this event, the mediator calls a method on every other panel to does the blurring or whatever.
The custom component can extend TitleWindow and add a property IsActiveWindow, then the custom skin can change it's appearance based on this property.
For pro points use RobotLegs to to inject the reference to the mediator into the components.
Good luck!
Flex application is being made accessibility compliant. When a custom component is made visible based on some condition, the first item (either text or formitem or textarea) inside the component is skipped by Jaws. It reads from the second item. On pressing UP arrow, the first item is then read.
Is there a way to make the first item accessible without need for pressing UP arrow?
This is likely going to be related to focus management.
You're likely going to want to assign componentId.setFocus() to the first component in the current view when the view state changes.
You need to re-assess the focus when the state of your display changes. If you post how you are managing display state I can suggest exactly how to trigger that via an event or in your custom state method.
Also, if that doesn't work, try this once your screen is ready / state changed :
focusManager.moveFocus(mx.events.FocusRequestDirection.TOP);
Is it possible to destroy/close open item editor or item renderer of a datagrid in different mxml page?
I heard about the functions editedItemRenderer and destroyItemEditor on Datagrid. Can I use these functions in different mxml page?
Your question is a bit confusing.
Flex Applications do not have the concept of a page in the same way that HTML does. You probably mean different views, or MXML Components.
All itemEditors are created and destroyed as needed. If you are not viewing the itemEditor on screen, then likely something else has focus and the itemEditor was destroyed automatically.
In most cases, two components should not talk to each other using anything other than their defined API. so, you can have one component dispatch an event, then it's parent listen for the event and have that parent call methods on another component [such as a DataGrid].
I have list of object that I want each item to be rendered with some renderer that include a delete and edit buttons with some text.
What is the best way to make the list of object re-order-able in drag/drop fashion so the user can drag on item on top of another to change the order of the list.
Basically, just use a List, or DataGrid, with an itemRenderer that displays the buttons. Look into the DragEnabled, DragMoveEnabled, and DropEnabled properties for the click and drag sorting.
Look into using itemEditors for the edit functionality.
At the risk of sounding self indulgent, our DataSorter component is designed for sorting lists. It is modeled after the Netflix movie queue / YouTube Playlist editor, but can be easily modified or extended as needed. Free developer editions are available from the web site and you can check out our API Explorer sample.