Home arrow Tricks, Tips, and Help arrow Advanced Tips arrow Spark List Vscrollbar on Left side
Spark List Vscrollbar on Left side Print E-mail
I spend an unusual amount of time trying to figure out how to set up scrollbars in spark flex (flash builder) beta 2. I wanted a list with the scrollbar on the left side instead of the right side. With a little help from flexpotential.com I managed to figure it out. Its a bit of a hack and I'm just adding this for a comp, but here is the skinclass you need to implement on your list control with a vertical or tile layout. It doesn't include the hscrollbars and a lot more needs to be done, but I hope this helps people started!

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark List component.  

@see spark.components.List

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
  minWidth="112" minHeight="112"
  alpha.disabled="0.5" blendMode="normal"> 
 
 <fx:Metadata>
 <![CDATA[ 
 /** 
 * @copy spark.skins.spark.ApplicationSkin#hostComponent
 */
 [HostComponent("spark.components.List")]
 ]]>
 </fx:Metadata> 
 
 <fx:Script>
 /* Define the skin elements that should not be colorized. 
 For list, the skin itself is colorized but the individual parts are not. */
 static private const exclusions:Array = ["scroller", "background"];
 
 /** 
  * @copy spark.skins.SparkSkin#colorizeExclusions
  */     
 override public function get colorizeExclusions():Array {return exclusions;}
 
 /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
 static private const contentFill:Array = ["bgFill"];
 <!--- @inheritDoc -->
 override public function get contentItems():Array {return contentFill};
 
 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
 {
 if (getStyle("borderVisible") == true)
 {
 border.visible = true;
 background.left = background.top = background.right = background.bottom = 1;
 //scroller.minViewportInset = 1;
 }
 else
 {
 border.visible = false;
 background.left = background.top = background.right = background.bottom = 0;
 //scroller.minViewportInset = 0;
 }
 
 super.updateDisplayList(unscaledWidth, unscaledHeight);
 }
 </fx:Script>
 
 <s:states>
 <s:State name="normal" />
 <s:State name="disabled" />
 </s:states>
 
 <!-- border -->
 <s:Rect visible="false" left="0" right="0" top="0" bottom="0" id="border">
 <s:stroke>
 <s:SolidColorStroke color="{getStyle('borderColor')}" 
 alpha="{getStyle('borderAlpha')}" 
 weight="1"/>
 </s:stroke>
 </s:Rect>
 
 <!-- fill -->
 <!--- Defines the background appearance of the list-based component. -->
 <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
 <s:fill>
 <!--- Defines the color of the background. The default color is 0xFFFFFF. -->
 <s:SolidColor id="bgFill" color="0xFFFFFF" />
 </s:fill>
 </s:Rect>
 
 <!--- The Scroller component to add scroll bars to the list. -->
 <!--- The container for the data items. -->
 <s:Scroller visible="false" id="scroller" includeInLayout="false"/>
 <s:HGroup gap="2">
 
 <s:VScrollBar height="100%" viewport="{dataGroup}" top="0" left="0" right="0" bottom="0" />
 
 <s:DataGroup id="dataGroup" clipAndEnableScrolling="true" height="{this.height}" itemRenderer="spark.skins.spark.DefaultItemRenderer">
 <s:layout>
 <s:VerticalLayout gap="0" horizontalAlign="contentJustify" />
 </s:layout>
 </s:DataGroup>
 </s:HGroup>
 
</s:SparkSkin>

 
< Prev   Next >

Jibwa Work Samples

Contact Jibwa LLC

Under Construction

Jibwa.com is under construction. Watch out for broken links, missing pages, potholes and bulldozers. We apologize for the temporary inconvenience - Jibwa.com Staff

News and Updates

Flex 4 Pediatrics One

Recently Jibwa LCC published demonstration videos and a new website design for Pediatrics One Clinical Management software built on Flex Flash Builder...
Read More ...

Eclectic Flea Simple Business Site

Using hand written materials and some photos we managed to create a simple site for Tucson's artsy thrift store. The Eclectic Flea ...
Read More ...

Flash Builder 2 Release changes from beta

I am moving from (flex) Flash Builder Beta 2 to Flash Builder Release Stable and keeping notes on changes I've had to make to my code. 1.) mx names...
Read More ...

Radiology Gallery

Jibwa and Tripwirearts have built and  launched a new website with Dr Benjamin Strong. radiologygallery.com for radiology continuing medical educ...
Read More ...