Ever since I started targeting Starling Framework for my open source user interface components, I’ve wanted the name of my project to more closely match the Starling brand. The name should reference birds in some way, but also have a deeper meaning associated with the purpose of the code. Allow me to reintroduce Feathers.
A bird’s feathers offer functional and aesthetic benefits similar to how UI controls enhance a graphics library.
Along with the new name comes a number of great changes that help bring Feathers to the next level. The package structure has been simplified. org.josht.starling.foxhole.controls.Button is now feathers.controls.Button. Short and simple. It makes the documentation easier to read and cleans up everyone’s code a bit.
The Feathers Documentation has moved to the official Starling Wiki. If you’re going to develop with Starling and Feathers, everything you need will now be found in one place. Daniel, Starling’s author, has been wonderfully supportive and I can’t thank him enough for being so generous and helpful. Not only with the wiki, but also the Feathers forum. He’s led the Starling community with such positive enthusiasm, and I couldn’t be happier joining him in sharing code and interacting with all the great folks who use Starling.
As part of this relaunch, I’ve also designed a new Feathers theme that I call Metal Works. I made it to match the website design of the new feathersui.com. You can see it in action in the Components Explorer example that highlights many of the UI components that Feathers provides.
I’m looking forward to watching Starling and Feathers grow in the future. It’s been so long since I was excited about my work like this, and I love that I’m returning to component development with such enthusiasm. I hope you’ll take some time to try out Feathers and let me know what you think. Happy coding!
It seems this UI framework is really making significant strides.
Love the new UI site, looks very promising. Haven’t had a chance yet to compile tests for Android/iOS. Still think it would be a great move to publish a Feathers Component Explorer app on each platform, especially now with the new nicely packaged branding
This would be far more useful than the web demo (seeing as most people are probably going to use Feathers on devices anyway). Great work!
By the way, are you really a karaoke addict? If so, we should most definitely have a chat!
Yes, some kind of published app to demo Feathers components on devices is something I will consider. Probably after 1.0. Also yes, I really am a karaoke addict. I sing twice a week, most of the time. Sometimes more.
Great components.
Can you explain how to add scrollbar to List and apply custom skin?
A scroll bar is created automatically, but it won’t be skinned. There are a couple of different ways to skin the scroll bars.
First, you could go down the properties chain using the @ syntax that I’ve provided for that:
Instead, you might create a custom scroll bar factory:
list.scrollerProperties.verticalScrollBarFactory = function():SimpleScrollBar { var scrollBar:SimpleScrollBar = new SimpleScrollBar(); scrollBar.thumbProperties.defaultSkin = new Image( texture ); return scrollBar; }If you want a more desktop-like scroll bar, you could use the ScrollBar class instead of SimpleScrollBar.
Hi Josh,
I tried the above code to add a SimpleScrollBar to my ScrollContainer but it appears on the right side, half hidden by the items, and it doesn’t move up/down. It only appears/disappears on touch down/up.
Any suggestion? I can’t find any documentation about that.
Thank you!
Regards
The default behavior for a scroll bar is for a mobile device. If you want interaction more like desktop where you can actually use the scroll bar with your mouse, you need to set the interactionMode on the Scroller to Scroller.INTERACTION_MODE_MOUSE. You might also want to change the scrollBarDisplayMode. The default is Scroller.SCROLL_BAR_DISPLAY_MODE_FLOAT, which places the scroll bar floating above the content in the scroller.
Hi Josh,
Thank you for the fast answer.
I’m working on mobile so I need the default state.
Here is the texture:
http://dl.dropbox.com/u/10483409/Flo/scrollbar/snapshot.png
And here is the result when I scroll (you can see a 1 px line on the right):
http://dl.dropbox.com/u/10483409/Flo/scrollbar/0_listScrollbar.png
Thanks for your feedback.
What does your code look like? I don’t know why the scroll bar would appear as a 1 pixel line.
_resultContainer = new ScrollContainer(); _resultContainer.layout = new VerticalLayout(); _resultContainer.scrollerProperties.verticalScrollPolicy = Scroller.SCROLL_POLICY_ON; _resultContainer.scrollerProperties.snapScrollPositionsToPixels = true; _resultContainer.maxHeight = 560; _resultContainer.onScroll.add( onContainerScroll ); _resultContainer.addEventListener( TouchEvent.TOUCH, resultContainerTouchHandler ); _resultContainer.scrollerProperties.verticalScrollBarFactory = function():SimpleScrollBar { var scrollBar:SimpleScrollBar = new SimpleScrollBar(); scrollBar.thumbProperties.defaultSkin = new Image( TextureFactory.getTexture( TexturesList.COM_LISTSCROLLBAR ) ); return scrollBar; }Hey Josh,
We met back in 2005 at the Adobe component dev summit, I have followed you doing yahoo and all that component stuff. It’s great to see you doing this component framework.
I had to laugh at your statement of;
”
It’s been so long since I was excited about my work like this, and I love that I’m returning to component development with such enthusiasm.
”
I to fell off the train last year with component dev, but I have an Android mobile project I’m working on that I was considering doing all the UI in Java Android. I have been stalling by investigating all the new stuff that might becoming out of the Flash genre since I love ActionScript.
Long story short, I think you have convinced me to put my effort here with the Android Caustic Audio framework and it’s UI.
See; http://blog.teotigraphix.com/2012/08/23/caustic-toolkit-android-apache-flex-audio-synth-sequencer-framework/
Flex was just getting to heavy for what I wanted to do. I’ll let you know what I come up with.
Thanks for your components!
Mike
Thanks, Mike. I remember meeting you at the component dev summit, and I check in on your components from time to time to see what’s new. I always admired the fact that you went commercial with them. I’m partial to open source, but the thought was always in the back of my mind that it would be interesting to try some commercial components. Anyway, looking forward to seeing what you come up with.
Yeah, well I’m out of the commercial components for the most part, haven’t really switched my site over.
Basically I’m partial to open-source now as well since last November.
I just got the component explorer running in the FlashBuilder beta and on my tablet, very impressive!
I really have decided to grab onto this framework and see what I can do. Besides, the audio framework I’m working on with the developer of Caustic is very fun if your into sequencers and synths.
Plus the fact that Flash is so artistic, I figure that allowing this on AIR first would be fun and I might get some interest From the Flash community. All my stuff will be opensource with this (Android).
The only component I need to make right now is a dial/knob implementation.
Hi Josh,
Can i set the button’s states with new Image like doing with the Starling default button?
I have tried to change skins (defaultSkin, upSkin…) but unsuccessful.
Yes, you can use Images for a button’s skin states. defaultSkin, upSkin, downSkin, etc. are what you should use, as you guessed. I’m not sure what you could have done wrong, though. Take a look at the Getting Started with Feathers tutorial. Maybe you can figure it out from reading that one.
Maybe i have not used setInitializerForClass() function.
Is it always need to use this function for customize skins?
Are you using a theme? If so, and you want to customize a specific button, then yes, you need to extend the theme.
If you’re not using a theme, then no, you shouldn’t need to use setInitializerForClass().
yes, thank you very much