You are here: Home > Forums > General > Styling Components

SPAS 3.0 Forums: General

You have been banned from this forum. If you have any questions, please contact the Administrator.

Sign in or create an account

You are logged in as:

Styling Components

Page : 1

Reply New topic
Author Message
Community Member
Join Date: 2012-03-08
Posts: 4
Post date 03-08-2012, 17:02
#1
Hello,
I just discovered SPAS and am looking to utilize the ListBox in a pure AS3, FlashBuilder project I am working on. I have added the ListBox and started learning about the library. The first challenge I came across was how to get the ListBox to show up at all in my project. I modified my root class so that it extends SPAS' Application - and that got the ListBox to appear. Now, I would like to modify the look and feel of it, but am a little lost. How do I format the list item text? Are there multiple ways to do it? What are those ways? I looked through the tutorials, the cookbook and the forums, but could not find an explanation for how to skin and style the ListBox. Any guidance would be welcome - thank you!
Chris

Administrator
Join Date: 2008-12-01
Location: French Riviera
Posts: 47
Post date 03-09-2012, 13:40
#2
Hi Chris,

I hope the following class will answer your question:
package {

import org.flashapi.swing.*;
import org.flashapi.swing.constants.*;
import org.flashapi.swing.databinding.*;
import org.flashapi.swing.plaf.spas.*;
import org.flashapi.swing.text.*;

[SWF(width="615", height="350", frameRate="30", backgroundColor="#FFFFFF" ) ]
public class TestListBox extends Application {

public function TestListBox() :void {
super(init);
}

private function init() :void {
createStyle();
var lb:ListBox = new ListBox();
var s:ScrollBar = lb.vScrollBar;
s.showDownButton = s.showUpButton = false;

var dp: DataProvider = new DataProvider() ;
dp.addAll(
{ label:"Label 1" }, { label:"Label 2" },
{ label:"Label 3" }, { label:"Label 4" },
{ label:"Label 5" }, { label:"Label 6" },
{ label:"Label 7" }, { label:"Label 8" }
);
lb.dataProvider = dp;

this.addElement(lb);
}

private function createStyle() :void {
this.scrollPolicy = ScrollPolicy.NONE;
SpasScrollBarUI.setCornerStyle(ScrollBarCornerStyle.SQUARE);
var css:CssString = new CssString();
css.appendStyle(" ListBox { lineHeight:80; width:100%; height:100%; borderStyle:none; } " ) ;
css.appendStyle(" SelectableItem { fontSize:40; } " ) ;
css.appendStyle(" ScrollBar { thickness:50; } " ) ;
this.styleSheet = css;
}
}
}


Creator of SPAS 3.0
Community Member
Join Date: 2012-03-08
Posts: 4
Post date 03-09-2012, 18:09
#3
Yes, thank you kindly!
How do I access the Application if I have instantiated the list box in a child sprite class of Application?
i.e. instead of using this.applicationProperty, I will need to do application.applicationProperty from any child Sprite class.
Chris

Administrator
Join Date: 2008-12-01
Location: French Riviera
Posts: 47
Post date 03-09-2012, 18:51
#4
You're welcome!

Just use the "document" static property of the UIManager class:
var app:Application = UIManager.document;
app.applicationProperty = myValue;


Creator of SPAS 3.0
Community Member
Join Date: 2012-03-08
Posts: 4
Post date 03-09-2012, 23:09
#5
Great, thank you.
Another question.
I've been trying to figure out how to change the highlight color of the list box's selectable items.
I've tried
css.appendStyle(" SelectableItem { fontSize:15;glowColor:#2BCDFA;} " ) ;
css.appendStyle(" SelectableItem { fontSize:15;selectedStateColor:#2BCDFA;} " ) ;
css.appendStyle(" SelectableItem { fontSize:15;focusColor:#2BCDFA;} " ) ;

Not working. What's the secret?
thanks again,
Chris




Administrator
Join Date: 2008-12-01
Location: French Riviera
Posts: 47
Post date 03-10-2012, 14:45
#6
Use CSS pseudo selectors:
SelectableItem:over { font-color:red; }
You'll find more information at the following address:
http://www.flashapi.org/spas-doc/org/flashapi/swing/button/core/ABM.html

Creator of SPAS 3.0

Page : 1