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>

 
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

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 ...

Spark List Vscrollbar on Left side

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 scrollb...
Read More ...

Flex/Flash Builder Params Base

I looked around for a while today at support forums to find out how to include params.base by default in my flash builder flex 4, and flex 3 applicati...
Read More ...

TripwireArts Website

Jibwa LLC partner TripwireArts has a newly designed website with information on some of our clients and established services....
Read More ...