6 Replies Latest reply on Sep 15, 2011 11:14 PM by Adel F Ahmed

    CheckBox in IconItemRenderer is half-sensitive to a click/touch

    Adel F Ahmed

      I am facing a very weird behaviour from a CheckBox inside an IconItemRendere in a mobile application.

       

      I've got a CheckBox inside an IconItemRenderer. It is instantiated in ActionScript then placed at the far right of the IconItemRenderer using this code inside the IconItemRenderer custom component

       

      var c:Checkbox = new CheckBox();

      this.addChild(cb);

      cb.x = this.parent.width - 70;

       

      then the CheckBox is resized inside a resizeHandler function using the code

       

      cb.width = this.height;
      cb.height = this.height;

       

      At runtime, half of the CheckBox icon is sensitive to the click/touch. That is, the CheckBox gets checked if it is clicked/touched in the upper half area of its icon but nothing happens when it is clicked/touched in its lower half area.

       

      I've tested it with the Desktop emulation using the mouse pointer and on two Android devices, once running Android 2.2 and the other running Andorid 2.3 using the touch but I get the same result.

       

      Visualize this with me. Take the square area of the CheckBox, cut it horizontally in half from the middle. The upper half area is click/touch sensitive and responds to clicks/touches but the lower half area does not.

       

      I've also noticed that the click/touch area extends beyond the upper border of the visible CheckBox icon, i.e. if I click/touch empty area above the CheckBox icon it responds to the action.

       

      Is there a need to resize the click/touch sensitive area after resizing the CheckBox? Or what?

       

      Can anyone help?

      -Adel

        • 1. Re: CheckBox in IconItemRenderer is half-sensitive to a click/touch
          Flex harUI Adobe Employee

          I think I would probably not use a Checkbox in an ItemRenderer in mobile

          apps.  You don't need the rollover highlighting.

           

          All you really want is a checkmark icon to appear when selected and use the

          selection code built into the list.  I haven't built it out to prove that it

          works, but that's how I would approach the problem.

           

          If you don't have lots of items, you can try turning off useVirtualLayout

          and see if that makes a difference.

          1 person found this helpful
          • 2. Re: CheckBox in IconItemRenderer is half-sensitive to a click/touch
            kokorito Level 4

            set the size and position in layoutContents

            that works ok for me

            1 person found this helpful
            • 3. Re: CheckBox in IconItemRenderer is half-sensitive to a click/touch
              Adel F Ahmed Level 1

              Flex harUI:

               

              I tried useVirtualLayout bu it did not work with me.

               

              I think I'll take your other advice of displaying an image in that location instead of using a CheckBox.

               

              -Adel

              • 4. Re: CheckBox in IconItemRenderer is half-sensitive to a click/touch
                Adel F Ahmed Level 1

                kokorito:

                 

                I'll need ot read onlayoutContents and try your suggestion. I'll update this thread with my findings.

                 

                -Adel

                • 5. Re: CheckBox in IconItemRenderer is half-sensitive to a click/touch
                  Adel F Ahmed Level 1

                  I took the advice of not using CheckBox inside an IconItemRenderer. I decided to use an image as the decorator. But I ran into another issue of the decorator not being updated or redrawn when the underlying dataprovider is changed. I read on the flex bug site that this was a reported bug to be fixed in 4.5.1. Although I do have 4.5.1 it did not work for me.

                   

                  So I used the follwoing workaround. I update the list dataprovider whenever a list item is clicked in the click event handler of the list. As a side effect, I can see the list flashing occasionally when it redraws itself. But I couldn't find a better way to do this.

                   

                  Here is the View source:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark"
                            initialize="view1_initializeHandler(event)" title="HomeView">
                       
                       <fx:Script>
                            <![CDATA[
                                 import mx.collections.ArrayCollection;
                                 import mx.events.FlexEvent;
                                 
                                 [Embed(source="assets/check.png")]
                                 [Bindable]
                                 public static var selectedIcon:Class;
                                 
                                 [Embed(source="assets/cross_icon.png")]
                                 [Bindable]
                                 public static var notSelectedIcon:Class;          
                                 
                                 private var catalog:ArrayCollection = new ArrayCollection([    
                                      {confirmed: new Date(), Location: "Spain", state: false},
                                      {confirmed: new Date(2006,0,15), Location: "Italy", state: false},
                                      {confirmed: new Date(2004,9,24), Location: "Bora Bora", state: true},
                                      {confirmed: new Date(), Location: "Vietnam", state: false}
                                 ]);
                                 
                                 [Bindable]
                                 private var listDataProvider:ArrayCollection = new ArrayCollection();
                                 
                                 protected function myList_clickHandler(event:MouseEvent):void
                                 {
                                      myList.selectedItem.state = !myList.selectedItem.state;
                                      
                                      // save data in catalog
                                      catalog.removeAll();
                                      catalog.addAll(listDataProvider);
                                      
                                      // reset the dataProvider
                                      listDataProvider.removeAll();
                                      listDataProvider.addAll(catalog);
                                 }
                                 
                                 protected function view1_initializeHandler(event:FlexEvent):void
                                 {
                                      listDataProvider.removeAll();
                                      listDataProvider.addAll(catalog);
                                 }
                                 
                            ]]>
                       </fx:Script>
                       
                       <fx:Declarations>
                       </fx:Declarations>
                       
                       <s:List id="myList" width="100%" height="100%" click="myList_clickHandler(event)"
                                 dataProvider="{listDataProvider}">
                            <s:itemRenderer>
                                 <fx:Component>
                                      <s:IconItemRenderer decorator="{(data.state)? DecoratorTestHomeView.selectedIcon : DecoratorTestHomeView.notSelectedIcon}"
                                                               labelField="Location" messageField="confirmed"/>
                                 </fx:Component>
                            </s:itemRenderer>
                       </s:List>
                  </s:View>
                  
                  
                  

                   

                  I'd be very happy to find a better solution than the one above, but for now I think I'll carry on with my project using this solution.

                   

                  -Adel

                  • 6. Re: CheckBox in IconItemRenderer is half-sensitive to a click/touch
                    Adel F Ahmed Level 1

                    The solution I posted using the decorator is a workaround.