New Component: Collapsible

samples/components-explorer/src/Main.hx

@@ -7,6 +7,7 @@ import com.feathersui.components.views.ButtonScreen;
 import com.feathersui.components.views.CalloutScreen;
 import com.feathersui.components.views.CheckScreen;
 import com.feathersui.components.views.CircleSkinScreen;
+import com.feathersui.components.views.CollapsibleScreen;
 import com.feathersui.components.views.ComboBoxScreen;
 import com.feathersui.components.views.DatePickerScreen;
 import com.feathersui.components.views.DonutSkinScreen;
@@ -123,6 +124,9 @@ class Main extends Application {
 		var circleSkin = Route.withClass(ViewPaths.CIRCLE_SKIN, CircleSkinScreen, [Event.COMPLETE => GoBack()]);
 		this._navigator.addRoute(circleSkin);
 
+		var collapsible = Route.withClass(ViewPaths.COLLAPSIBLE, CollapsibleScreen, [Event.COMPLETE => GoBack()]);
+		this._navigator.addRoute(collapsible);
+
 		var comboBox = Route.withClass(ViewPaths.COMBO_BOX, ComboBoxScreen, [Event.COMPLETE => GoBack()]);
 		this._navigator.addRoute(comboBox);
 

samples/components-explorer/src/com/feathersui/components/ViewPaths.hx

@@ -61,6 +61,7 @@ class ViewPaths {
 	public static final ACTIVITY_INDICATOR = "/activity-indicator";
 	public static final ALERT = "/alert";
 	public static final CALLOUT = "/callout";
+	public static final COLLAPSIBLE = "/collapsible";
 	public static final DRAWER = "/drawer";
 	public static final ITEM_RENDERER = "/item-renderer";
 	public static final POP_UP_MANAGER = "/pop-up-manager";

samples/components-explorer/src/com/feathersui/components/views/CollapsibleScreen.hx

@@ -0,0 +1,76 @@
+package com.feathersui.components.views;
+
+import feathers.layout.VerticalLayout;
+import feathers.text.TextFormat;
+import feathers.controls.Label;
+import feathers.skins.RectangleSkin;
+import feathers.controls.LayoutGroup;
+import openfl.display.DisplayObject;
+import feathers.controls.Button;
+import feathers.controls.Collapsible;
+import feathers.controls.Header;
+import feathers.controls.Panel;
+import feathers.events.TriggerEvent;
+import feathers.layout.AnchorLayout;
+import feathers.layout.AnchorLayoutData;
+import openfl.events.Event;
+
+class CollapsibleScreen extends Panel {
+	private var collapsible:Collapsible;
+
+	override private function initialize():Void {
+		super.initialize();
+		this.createHeader();
+
+		this.layout = new AnchorLayout();
+
+		this.collapsible = new Collapsible();
+		this.collapsible.text = "Click to collapse and expand";
+		this.collapsible.content = this.createContent("This is the content", 0x339933);
+		this.collapsible.layoutData = AnchorLayoutData.topCenter(20.0);
+		this.collapsible.addEventListener(Event.OPEN, collapsible_openHandler);
+		this.collapsible.addEventListener(Event.CLOSE, collapsible_closeHandler);
+		this.addChild(this.collapsible);
+	}
+
+	private function createHeader():Void {
+		var header = new Header();
+		header.text = "Collapsible";
+		this.header = header;
+
+		var backButton = new Button();
+		backButton.text = "Back";
+		backButton.addEventListener(TriggerEvent.TRIGGER, backButton_triggerHandler);
+		header.leftView = backButton;
+	}
+
+	private function createContent(text:String, color:UInt):DisplayObject {
+		var content = new LayoutGroup();
+		var contentLayout = new VerticalLayout();
+		contentLayout.setPadding(50.0);
+		contentLayout.horizontalAlign = CENTER;
+		contentLayout.verticalAlign = MIDDLE;
+		content.layout = contentLayout;
+		var backgroundSkin = new RectangleSkin();
+		backgroundSkin.fill = SolidColor(color);
+		content.backgroundSkin = backgroundSkin;
+		var label = new Label();
+		label.textFormat = new TextFormat("_sans", 20, 0xffffff);
+		label.text = text;
+		label.layoutData = AnchorLayoutData.center();
+		content.addChild(label);
+		return content;
+	}
+
+	private function collapsible_openHandler(event:Event):Void {
+		trace("Collapsible opened");
+	}
+
+	private function collapsible_closeHandler(event:Event):Void {
+		trace("Collapsible closed");
+	}
+
+	private function backButton_triggerHandler(event:TriggerEvent):Void {
+		this.dispatchEvent(new Event(Event.COMPLETE));
+	}
+}

samples/components-explorer/src/com/feathersui/components/views/MainMenu.hx

@@ -90,6 +90,7 @@ class MainMenu extends Panel {
 			new MenuItem("Miscellaneous", null, [
 				new MenuItem("Alert", ViewPaths.ALERT),
 				new MenuItem("Callout", ViewPaths.CALLOUT),
+				new MenuItem("Collapsible", ViewPaths.COLLAPSIBLE),
 				new MenuItem("Drawer", ViewPaths.DRAWER),
 				new MenuItem("Item Renderer", ViewPaths.ITEM_RENDERER),
 				new MenuItem("Pop Up Manager", ViewPaths.POP_UP_MANAGER),