1 Reply Latest reply on Sep 27, 2009 7:32 AM by Pimenov Oleg

    how to use the Spark VScrollbar

    sans_comic

      I am trying out the spark components, and i am new to flex. what i do not understand is how to use the spark scrollbars. for example in the code below how do i associate the VScrollbar "bar" to scroll the content in the VGroup "exmp".

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/halo">
          
           <fx:Style>
                @namespace s "library://ns.adobe.com/flex/spark";
               
                /* Custom style which lets you style Panels by setting the styleName property. */
                .customPanel {
                     skinClass: ClassReference("skins.CustomPanelSkin");
                     contentBackgroundColor: haloGreen ;
                }
                    
                /* Advanced CSS which lets you style individual objects by id. */
                     s|Panel #panel4 {
                     skinClass: ClassReference("skins.CustomPanelSkin");
                     contentBackgroundColor: haloOrange;
                }
                         
                /* Or, to style ALL Spark Panels globally... */
                /*
                     s|Panel {
                     skinClass: ClassReference("skins.CustomPanelSkin");
                }
                */
           </fx:Style>
          
           <s:HGroup>
               
                <s:VGroup id="exmp" horizontalCenter="0" verticalCenter="0" height="300" clipAndEnableScrolling="true">
                    
                     <s:Panel title="Spark Panel #1" width="150">
                          <s:SimpleText text="I'm a Panel with no styling." percentWidth="100" />
                     </s:Panel>
                    
                     <s:Panel title="Spark Panel #2" styleName="customPanel" width="150">
                          <s:SimpleText text="I'm a Panel with styleName defined." percentWidth="100" />
                          <s:VScrollBar id="bar2" height="100%"/>
                     </s:Panel>
                    
                     <s:Panel title="Spark Panel #3" skinClass="skins.CustomPanelSkin" contentBackgroundColor="0xFF0000" width="150">
                          <s:SimpleText text="I'm a Panel with a skinClass defined." percentWidth="100" />
                     </s:Panel>
                    
                     <s:Panel id="panel4" title="Spark Panel #4" width="150">
                          <s:SimpleText text="I'm a Panel with a styling from CSS." percentWidth="100" />
                     </s:Panel>
                    
                     <s:TextArea text="Spark TextArea" contentBackgroundColor="red" />
                    
                     <s:TextInput text="Spark TextInput" contentBackgroundColor="haloOrange" />
                    
                     <s:Button label="Spark Button" baseColor="yellow" />
                    
                     <mx:TextArea text="Halo TextArea" contentBackgroundColor="haloGreen" />
                    
                     <mx:Panel title="Halo Panel" contentBackgroundColor="haloBlue" width="300" height="200" />
                    
                     <mx:Button label="Halo Button" baseColor="purple" />
                    
                </s:VGroup>
               
                <s:VScrollBar id="bar" height="100%"/>
               
           </s:HGroup>    
          
      </s:Application>

       

       

      I searched a lot of documentation and the forums, but can't seem to find the solution to achieve this seemingly simple objective. Will be grateful for any help. Thanks.