13 Replies Latest reply on Sep 22, 2010 11:03 AM by Gregory Lafrance

    faking the CTRL key

    Devtron Level 3

      Hi,

       

      I need to "fake" the CTRL key when I click on a control.

       

      The control, by default, has different behaviour for multi-selection, only if you hold the CTRL key.

       

      Most users to not understand or want to do this.

       

      How can I perform multi-selection from a single click event? How can I "fake" the CTRL key from being pressed?

       

      Cheers

        • 1. Re: faking the CTRL key
          Devtron Level 3

          I know how to do this for a DataGrid, but cannot figure out how to do this for a DateChooser.

           

          What function do I need to override in the DateChooser class, to fake the CTRL key being pressed??

          • 2. Re: faking the CTRL key
            Devtron Level 3

            C'mon FLEX guys, I know one of you know the answer to this.......which one is it? How would you approach this? Add listener events? Okay, where?

             

             

             

            Adjust the focus rectangle.
            UIComponent
            Inherited
            Commits the computed matrix built from the combination of the layout       matrix and the transform offsets to the flash displayObject's transform.
            UIComponent
            Inherited
            This is an internal method used by the Flex framework       to support the Dissolve effect.
            UIComponent
            Inherited
            Determines if the call to the measure() method can be skipped.
            UIComponent
            Inherited
            Performs any final processing after child objects are created.
            UIComponent
            Inherited
            Processes the properties set on the component.
            UIComponent
            Inherited
            Create child objects of the component.
            UIComponent
            Inherited
            Creates a new object using a context       based on the embedded font being used.
            UIComponent
            Inherited
            Creates the object using a given moduleFactory.
            UIComponent
            Inherited
            dispatchPropertyChangeEvent(prop:String, oldValue:*, value:*):void
            Helper method for dispatching a PropertyChangeEvent       when a property is updated.
            UIComponent
            Inherited
            The event handler called when a UIComponent object gets focus.
            UIComponent
            Inherited
            The event handler called when a UIComponent object loses focus.
            UIComponent
            Inherited
            Initializes the implementation and storage of some of the less frequently       used advanced layout features of a component.
            UIComponent
            Inherited
            Finalizes the initialization of this component.
            UIComponent
            Inherited
            Initializes this component's accessibility code.
            UIComponent
            Inherited
            Helper method to invalidate parent size and display list if       this object affects its layout (includeInLayout is true).
            UIComponent
            Inherited
            Typically overridden by components containing UITextField objects,       where the UITextField object gets focus.
            UIComponent
            Inherited
            The event handler called for a keyDown event.
            UIComponent
            Inherited
            The event handler called for a keyUp event.
            UIComponent
            Inherited
            Calculates the default size, and optionally the default minimum size,       of the component.
            UIComponent
            Inherited
            This method is called when a UIComponent is constructed,       and again whenever the ResourceManager dispatches       a "change" Event to indicate       that the localized resources have changed in some way.
            UIComponent
            Inherited
            setStretchXY(stretchX:Number, stretchY:Number):void
            Specifies a transform stretch factor in the horizontal and vertical direction.
            UIComponent
            Inherited
            stateChanged(oldState:String, newState:String, recursive:Boolean):void
            This method is called when a state changes to check whether       state-specific styles apply to this component.
            UIComponent
            Inherited
            updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            Draws the object and/or sizes and positions its children.
            • 3. Re: faking the CTRL key
              Gregory Lafrance Level 6

              First, a clarification. Do you want the user to be able to click an item in a List for example, thus selecting it, and then they click on another item, and rather than deselect the first one, they also select that clicked item?

               

              In that case, you might be able to that by adding the currently clicked item to an ArrayCollection, and binding that AC to the selectedItems property.

               

              If this post answers your question or helps, please mark it as such.


              Greg Lafrance - Flex 2 and 3 ACE certified

              www.ChikaraDev.com

              Flex Training and Support Services

              • 4. Re: faking the CTRL key
                Devtron Level 3

                Hi Greg,

                 

                I am actually trying to do this with a DateChooser control. I am unsure if you can databind it, to an ArrayCollection?

                 

                I see how this is easier to do with a DataGrid, hence my situation/problem.

                 

                What I am trying to accomplish is selecting days based on mouse clicks. Every day in the control that is clicked needs to be selected.

                 

                Currently, by default, you must hold the CTRL key to get this to work. I simply want to bypass the CTRL key and make the control behave like the CTRL key is always pressed.

                 

                Any ideas? I am thinking it needs an Event Listener, but am unsure what type or where to put it.

                 

                Thanks for your help!

                Regards.

                • 5. Re: faking the CTRL key
                  Flex harUI Adobe Employee

                  Try adding an event listener to the DateChooser with a higher priority and

                  set the ctrl property on the event.  Technically this is a hack, and may

                  stop working someday, but it might work for you.

                  • 6. Re: faking the CTRL key
                    Devtron Level 3

                    Thanks Flex HarUI, but I am unsure what you mean by "higher priority"?

                     

                    Also, why would this stop working "one day"? I know FLEX is extra hacky, but any reason why this may stop working? that bothers me, LOL, because this will go into production next week....eeeeek!!

                     

                    I understand how to add an event listener, but after that I get a little lost. Like, what event listener do I need to add? and how does that handle the CTRL key? I am confused.

                     

                     

                     

                    I add the event listener like this:

                    datechooser.addEventListener(MouseEvent.CLICK, myListenerClickEvent);

                     

                    and define the listenerFunction like this:

                                public function myListenerClickEvent(event:MouseEvent):void{
                                    event.ctrlKey=true;
                                    Alert.show('click event occured');
                                }

                     

                     

                    This does not produce the results I am after. I need to select multiple days in the DateChooser, this simply chooses a single day. Once I click a different day, it does not stay selected. How can I keep everything click selected?

                    • 7. Re: faking the CTRL key
                      Gregory Lafrance Level 6

                      For DateChooser, this code seems to work perfectly:

                       

                      <?xml version="1.0"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                        <mx:Script>
                          <![CDATA[
                            import mx.events.CalendarLayoutChangeEvent;
                            import mx.collections.ArrayCollection;
                            
                            [Bindable] private var ac:ArrayCollection = new ArrayCollection();
                            
                            private function addDate(evt:CalendarLayoutChangeEvent):void{
                              var newDateObj:Object = {rangeStart: evt.newDate, rangeEnd: evt.newDate};
                              var found:Boolean = false;
                              for each(var obj:Object in ac){
                                if(obj.rangeStart.toString() == newDateObj.rangeStart.toString()){
                                  found = true;
                                  ac.removeItemAt(ac.getItemIndex(obj)); 
                                }
                              }
                              if(!found){
                                ac.addItem(newDateObj);
                              }
                              dc.selectedRanges = ac.toArray();    
                            }
                          ]]>
                        </mx:Script>
                        <mx:DateChooser id="dc" change="addDate(event);"/>
                      </mx:Application>
                      


                      If this post answers your question or helps, please mark it as such.


                      Greg Lafrance - Flex 2 and 3 ACE certified

                      www.ChikaraDev.com

                      Flex Training and Support Services

                      • 8. Re: faking the CTRL key
                        Devtron Level 3

                        ^ Very cool, I had no idea it binds to an ArrayCollection.

                         

                        What exactly is the addDate doing there? What is it adding? I mean, what is the purpose of "addDate" function?

                        • 9. Re: faking the CTRL key
                          Gregory Lafrance Level 6

                          Actually the [Bindable] is unnecessary, because you can't  use binding in this case.

                           

                          As far as what the addDate() method is doing, just examine the code.

                           

                          1) I create an object in the format expected by the DateChooser selectedRanges property.

                          2) I see if the date has already been clicked, if so I remove from ac.

                          3) If not I add it to ac.

                          4) I set the DateChooser selectedRanges property to ac.toArray()

                           

                          If this post answers your question or helps, please mark it as such.


                          Greg Lafrance - Flex 2 and 3 ACE certified

                          www.ChikaraDev.com

                          Flex Training and Support Services

                          • 10. Re: faking the CTRL key
                            Devtron Level 3

                            Thank you for the clarification. I was under the impression that the ArrayCollection was actually bound to the DateChooser. I now understand its not.

                             

                            This is useful to store selected date values in an ArrayCollection, which is definitely something I will probably want to do.

                             

                            But I must color code them, and keep them selected in the DateChooser. By default, in a DateChooser control, you must hold the CTRL key. Adding an eventListener to the MouseClick event doesnt work, I think it gets overriden by the parent events. But am unsure about that, but from my testing it seems so.

                             

                            How would you approach that, Greg? Do you think the best approach is in overriding the MouseUpHandler, which is private? This is getting pretty difficult just to make this CTRL key press a possiblity.

                             

                            Also, wouldnt "ac" be empty? Since you are defining it as "new", I do not see where it gets any data. How can you remove items if no items exist? Sorry for my confusion...

                            • 11. Re: faking the CTRL key
                              Gregory Lafrance Level 6

                              For the color coding, please start a new post. I think I've answered this one.

                               

                              The ArrayCollection is created the first time the app loads, so yes, initially it is empty.

                               

                              When the user clicks a date, it gets added to ac, unless they had already clicked it, then it gets removed.

                               

                              You really need to read the code. It is fairly straightforward.

                               

                              If this post answers your question or helps, please mark it as such.


                              Greg Lafrance - Flex 2 and 3 ACE certified

                              www.ChikaraDev.com

                              Flex Training and Support Services

                              • 12. Re: faking the CTRL key
                                Devtron Level 3

                                The color coding does not need a new thread, it has been here:

                                http://forums.adobe.com/thread/720127

                                 

                                Your addDate function rocks!! Thank you.

                                 

                                This is not actually a solution to "faking the CTRL key", but it does produce the end result I am looking for, although I think looping through the dates would be much slower than using a MouseUPHandler "hack". Any thoughts on performance on this vs. MouseUpHandler?

                                • 13. Re: faking the CTRL key
                                  Gregory Lafrance Level 6

                                  Its just a few clicks, so I don't think performance would be an issue. Unless of course user might select 200 dates manually, even then it might not be a problem.