0 Replies Latest reply on Jan 31, 2011 10:23 AM by Yozef0

    A 2-sided track's Thumb, with a list of items in center, forces the tumb to jump on selected item

    Yozef0

      With Adobe Catalyst, you can create nifty VerticalScrollBars for DataLists. I've create a thumb of the verticalscroll bar as two images (left & right of track).  When I click on an item in the list, the thumb listens to the mouse on the track and tries to scroll to that area, instead on selecting the ticket.

       

      Check the image for a clearer explanation:

      DataListProblem.png

       

      In the Code of the Skin of List:

      <s:VScrollBar fixedThumbSize="true" skinClass="components.VerticalScrollbar1" x="0" y="0" viewport="{dataGroup}"/>

       

      And the Skin VerticalScrollBar1:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
      <fx:Metadata>[HostComponent("spark.components.VScrollBar")]</fx:Metadata>
       <s:states>
       <s:State name="normal"/>
       <s:State name="disabled"/>
       <s:State name="inactive"/>
       </s:states>
       <s:Button skinClass="components.Track1" x="7" y="0" id="track"/>
       <s:Button skinClass="components.Thumb1" x="0" y="104" id="thumb"/></s:Skin>
      

       

      and the Thumb1:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:s="library://ns.adobe.com/flex/spark"     xmlns:fx="http://ns.adobe.com/mxml/2009"     xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:graphics="assets.graphics.*">
       <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
       <s:states>
       <s:State name="up"/>
       <s:State name="over"/>
       <s:State name="down"/>
       <s:State name="disabled"/>
       </s:states>
       <graphics:Graphic2 x="0" y="0" d:userLabel="ThumbLeft"/>
       <graphics:Graphic1 x="146" y="0" d:userLabel="ThumbRight"/>
      </s:Skin>
      

       

      Notice that there are two thumbs, and an empty area in the middle, in the hope that it would ignore the mouse of that area where the items are located.