A preview of Feathers 2.2(with the first look at the Feathers SDK)
Josh Tynjala / Flash Online Conference #12 / 2015 May 29
What’s new?• Feathers 2.2 is almost ready
for beta.
• The Feathers SDK is almost ready for alpha.
• Over 1,000 downloads per month.
Retina desktop themes• Support for HiDPI Macs.
• Original designs drawn with vectors in FLA file.
• May be edited and exported as a new sprite sheet.
Building a media player• Create a new VideoPlayer or SoundPlayer component.
• Add playback controls as children.
• Playback controls may be nested in containers.
• Media player automatically detects components that implement IMediaPlayerControl interface.
• No event listeners to set up. It’s automatic.
Media Player Controls• PlayPauseToggleButton
• SeekSlider
• TimeLabel
• VolumeSlider
• MuteToggleButton
• FullScreenToggleButton
SoundPlayer Example Codevar player:SoundPlayer = new SoundPlayer();player.layout = new HorizontalLayout();this.addChild(player);
var playPauseButton:PlayPauseToggleButton = new PlayPauseToggleButton();player.addChild(playPauseButton);
var seekBar:SeekSlider = new SeekSlider();seekBar.layoutData = new HorizontalLayoutData(100, 100);player.addChild(seekBar);
var timer:TimeLabel = new TimeLabel();player.addChild(timer);
var muteButton:MuteToggleButton = new MuteToggleButton();muteButton.showVolumeSliderOnHover = true;player.addChild(muteButton);
player.soundSource = "example.mp3";
Anything else in Feathers 2.2?• Performance improvements in Lists, item renderers, and text.
• Fixed issues in BitmapFont and TextBlock text editors to properly support non-Latin characters.
• More unit tests for improved stability.
• Build and test on Travis-CI after every push to Github.
• Bug fixes and minor features.
What is the Feathers SDK?• A fork of the Apache Flex SDK.
• Feathers components in MXML!
• Sensible defaults: 60 FPS, direct render mode.
• SDK installer that can download different versions of AIR and playerglobal.swc, just like Apache Flex.
Feathers in MXML• Add components to containers.
• Set properties.
• Listen for events.
• Bind data to properties.
• Create inline components with <fx:Component>
• <fx:Script>, <fx:Declarations>, and <fx:Metadata>
Example MXML<?xml version="1.0" encoding="utf-8"?>
<f:LayoutGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:f="library://ns.feathersui.com/mxml">
<f:layout>
<f:HorizontalLayout gap="10"
horizontalAlign="center" verticalAlign="middle"/>
</f:layout>
<f:Slider id="slider1" minimum="0" maximum="1" value="0.5"
change="trace(slider1.value)"/>
<f:Slider id="slider2" minimum="0" maximum="1" value="{slider1.value}"/>
</f:LayoutGroup>
Binding• Can add [Bindable] or [Bindable("eventType")]
metadata to properties in ActionScript.
• Automatically detects if a class is a Starling EventDispatcher or a Flash IEventDispatcher.
• One-way {} and two-way @{} binding are both supported.
<f:Application>• Subclass of LayoutGroup.
• Automatically starts up Starling, behind the scenes.
• Customize context3DProfile.
• Set the theme.
• Additional application classes based on Drawers and StackScreenNavigator.
<?xml version="1.0" encoding="utf-8"?><f:Application
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:f="library://ns.feathersui.com/mxml"theme="feathers.themes.MetalWorksMobileTheme"context3DProfile="baseline">
<f:layout><f:VerticalLayout
horizontalAlign="center"verticalAlign="middle"/>
</f:layout>
<f:Button id="button" label="Click Me”/>
</f:Application>
Inline components• <fx:Component>
• May be used with sub-component factories.
• Support outerDocument property to access parent MXML document.
<?xml version="1.0" encoding="utf-8"?>
<f:List xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:f="library://ns.feathersui.com/mxml">
<f:itemRendererFactory>
<fx:Component>
<f:DefaultListItemRenderer
labelField="text"/>
</fx:Component>
</f:itemRendererFactory>
</f:List>
Limitations• Flash Builder’s generates a broken application class
when creating a new project.
• No good way for the SDK to tell Flash Builder that Feathers should always use the f namespace in MXML (like it uses s or mx for Flex).
• Custom templates for new files should help with both of these.
Limitations (continued)• Flash Builder expects flash.events.Event will always
be imported, so it automatically uses the fully-qualified starling.events.Event — even when it’s not necessary.
• IntelliJ IDEA doesn’t recognize Feathers components in the MXML editor, but the code will compile. Will try to fix in the future.
Future plans for the SDK• Test with more IDEs, and
improve IntelliJ IDEA support.
• States in MXML?
• ResourceManager?
• Open to suggestions!
Thank you!Presented by Josh Tynjala
twitter.com/feathersuifacebook.com/feathersuigoogle.com/+feathersui
instagram.com/feathers_ui