You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2017/03/01 21:09:53 UTC

[05/10] git commit: [flex-asjs] [refs/heads/dual] - move native examples to src/main/flex

move native examples to src/main/flex


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/c8228288
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/c8228288
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/c8228288

Branch: refs/heads/dual
Commit: c8228288268108e9b27ff7045adccabcfdadcf68
Parents: b7ce542
Author: Alex Harui <ah...@apache.org>
Authored: Wed Mar 1 13:06:46 2017 -0800
Committer: Alex Harui <ah...@apache.org>
Committed: Wed Mar 1 13:06:46 2017 -0800

----------------------------------------------------------------------
 .../native/AngularExample/src/AngularExample.as |  84 -----------
 .../native/AngularExample/src/MyController.as   |  70 ----------
 .../src/components/IWebComponent.as             |  27 ----
 .../src/components/WebComponent.as              |  38 -----
 .../src/components/mdbutton/MDButton.as         |  61 --------
 .../src/components/mdbutton/MDButtonFactory.as  |  56 --------
 .../src/main/flex/AngularExample.as             |  84 +++++++++++
 .../src/main/flex/MyController.as               |  70 ++++++++++
 .../src/main/flex/components/IWebComponent.as   |  27 ++++
 .../src/main/flex/components/WebComponent.as    |  38 +++++
 .../main/flex/components/mdbutton/MDButton.as   |  61 ++++++++
 .../flex/components/mdbutton/MDButtonFactory.as |  56 ++++++++
 .../native/ButtonExample/src/ButtonExample.as   |  34 -----
 .../src/main/flex/ButtonExample.as              |  34 +++++
 examples/native/USStatesMap/src/MapCoords.as    |  75 ----------
 examples/native/USStatesMap/src/USStatesMap.as  | 140 -------------------
 .../USStatesMap/src/main/flex/MapCoords.as      |  75 ++++++++++
 .../USStatesMap/src/main/flex/USStatesMap.as    | 140 +++++++++++++++++++
 18 files changed, 585 insertions(+), 585 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/AngularExample.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/AngularExample.as b/examples/native/AngularExample/src/AngularExample.as
deleted file mode 100644
index 6bc74c9..0000000
--- a/examples/native/AngularExample/src/AngularExample.as
+++ /dev/null
@@ -1,84 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package {
-	import angular.IModule;
-
-	import components.mdbutton.MDButton;
-	import components.mdbutton.MDButtonFactory;
-	/**
-	 * @author omuppirala
-	 */
-	public class AngularExample {
-		
-		private var app:IModule;
-		
-		public function AngularExample() {
-			//set up angular app
-			app = angular.module("app",["ngMaterial"]);
-			app.controller("MyController", ["$scope", "$mdDialog", MyController]);
-			document.body.setAttribute("ng-app", "app");
-			
-			//App container
-			var container:HTMLDivElement = document.createElement('div') as HTMLDivElement;
-			container.style.width = '100%';
-			container.style.height = '100%';
-			container.setAttribute("layout", "row");
-			container.setAttribute("layout-align", "center center");
-			document.body.appendChild(container);
-			
-			//App
-			var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
-			div.id = 'div';
-			div.style.width = '50%';
-			div.style.height = '50%';
-			div.setAttribute("layout", "column");
-			div.setAttribute("layout-align", "center center");
-			
-			div.setAttribute("ng-controller", "MyController");
-			div.setAttribute("md-whiteframe", "18");
-			div.setAttribute("class", "md-whiteframe-14dp");
-			container.appendChild(div);
-			
-			//App children
-			div.innerHTML = '<h1>FlexJS + Angular + Angular Material Demo</h1>';
-			div.innerHTML += '<span flex />';
-			div.innerHTML += '<md-button id="myBtn" class="md-primary md-raised" ng-click="handleBtnClick()">{{btnLabelStr}}</md-button>';
-//			div.innerHTML += '<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>';
-//			div.innerHTML += '<md-progress-circular md-mode="indeterminate"></md-progress-circular>';
-			div.innerHTML += '<md-input-container class="md-block" flex-gt-sm><label>Change button label...</label><input ng-model="btnLabelStr"></md-input-container>';
-			div.innerHTML += '<span flex />';
-
-//			var labelButtonClass:Object = MDButtonFactory.getInstance().getButtonClass();
-//			var labelButton:MDButton = new labelButtonClass();
-//			labelButton.setAttribute("class", "md-primary md-raised");
-//			div.appendChild(labelButton);
-//			labelButton.setLabel("Label Button");
-			
-//			var cakeButtonClass:Object = MDButtonFactory.getInstance().getButtonClass();
-//			var cakeButton:MDButton = new cakeButtonClass();
-//			cakeButton.setAttribute("class", "md-fab");
-//			//cakeButton.setAttribute("md-no-ink", "");
-//			div.appendChild(cakeButton);
-//			cakeButton.setIcon("cake");
-//			cakeButton.clickHandler("handleBtnClick");
-			
-		}
-
-	}
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/MyController.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/MyController.as b/examples/native/AngularExample/src/MyController.as
deleted file mode 100644
index 295df23..0000000
--- a/examples/native/AngularExample/src/MyController.as
+++ /dev/null
@@ -1,70 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package {
-	import angular.material.MDAlertDialog;
-	import angular.material.MDDialogService;
-	import angular.IScope;
-	/**
-	 * @author omuppirala
-	 */
-	 
-	public class MyController {
-		
-		private var $scope:IScope;
-		private var $mdDialog:MDDialogService;
-		
-		public function MyController(scope:IScope,mdDialog:MDDialogService) {
-			this.$scope = scope;
-			this.$mdDialog = mdDialog;
-			this.$scope["handleBtnClick"] = this.handleBtnClick;
-			this.$scope["close"] = this.close;
-			this.$scope["myDate"] = new Date();
-			this.$scope["btnLabelStr"] = "Click me";
-
-			//setupWatchForDate();
-		}
-
-		private function setupWatchForDate() : void {
-			$scope.$watch('myDate', this.handleDateChange,true);
-		}
-
-		private function handleDateChange() : void {
-			alert('Date selected: ' + $scope["myDate"].toString());
-		}
-		
-		public function handleBtnClick(event:Event):void
-		{
-			$mdDialog.show(
-			{
-				scope: $scope,
-				preserveScope: true,
-      			//template: '<div style="margin:25px;"><img src="http://flex.apache.org/images/logo_01_fullcolor-sm.png" alt=""/><h1 md-heading">Angular Material</h1><img src="https://material.angularjs.org/latest/img/icons/angular-logo.svg" alt=""/><div layout="row"><span flex/><md-button ng-click=close()>CLOSE</md-button></div></div>',
-      			template: '<div layout="column" layout-align="left center" style="width:500px; height:500px; margin:25px;"><h3>Select a date: </h3><md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker><br>Selected date: {{myDate}}<span flex/><div layout="row"><span flex/><md-button ng-click=close()>CLOSE</md-button></div></div>',
-			    clickOutsideToClose: true,
-				openFrom: angular.element(document.querySelector('#myBtn')),
-				closeTo: angular.element(document.querySelector('#myBtn'))
-		    });
-		}
-		
-		private function close():void
-		{
-			$mdDialog.cancel();
-		}
-	}
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/components/IWebComponent.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/components/IWebComponent.as b/examples/native/AngularExample/src/components/IWebComponent.as
deleted file mode 100644
index ca0e8ca..0000000
--- a/examples/native/AngularExample/src/components/IWebComponent.as
+++ /dev/null
@@ -1,27 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package components {
-	/**
-	 * @author omuppirala
-	 */
-	public interface IWebComponent {
-		
-		function setupComponent():void;
-	}
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/components/WebComponent.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/components/WebComponent.as b/examples/native/AngularExample/src/components/WebComponent.as
deleted file mode 100644
index 3637fd2..0000000
--- a/examples/native/AngularExample/src/components/WebComponent.as
+++ /dev/null
@@ -1,38 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package components {
-	import components.IWebComponent;
-
-	/**
-	 * @author omuppirala
-	 */
-	public class WebComponent extends HTMLElement implements IWebComponent {
-
-		protected var sr : ShadowRoot;
-
-		public function createdCallback() : void {
-			sr = this['createShadowRoot']();
-			setupComponent();
-		}
-
-		public function setupComponent() : void {
-			//override in subclass
-		}
-	}
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/components/mdbutton/MDButton.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/components/mdbutton/MDButton.as b/examples/native/AngularExample/src/components/mdbutton/MDButton.as
deleted file mode 100644
index 05f9377..0000000
--- a/examples/native/AngularExample/src/components/mdbutton/MDButton.as
+++ /dev/null
@@ -1,61 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package components.mdbutton {
-	import components.WebComponent;
-	/**
-	 * @author omuppirala
-	 */
-	public class MDButton extends WebComponent
-	{
-		
-		protected var label:Text;
-		protected var iconSpan:HTMLSpanElement;
-		override public function setupComponent():void {
-			createLabel();
-			createIcon();
-		}
-		
-		protected function createLabel():void
-		{
-			label = ownerDocument.createTextNode("");
-    		sr.appendChild(Node(label));
-		}
-		
-		public function setLabel(labelStr:String):void {
-			this.textContent = labelStr;
-		}
-		
-		protected function createIcon():void
-		{
-			iconSpan = ownerDocument.createElement("span") as HTMLSpanElement;
-			iconSpan.setAttribute("class","material-icons");
-    		this.appendChild(iconSpan);
-		}
-		
-		public function setIcon(iconName:String):void {
-			iconSpan.textContent = iconName;
-		}
-		
-		public function clickHandler(functionName:String):void
-		{
-			this.setAttribute("ng-click", functionName+"()");
-		}
-		
-	}
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/components/mdbutton/MDButtonFactory.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/components/mdbutton/MDButtonFactory.as b/examples/native/AngularExample/src/components/mdbutton/MDButtonFactory.as
deleted file mode 100644
index 39b47cb..0000000
--- a/examples/native/AngularExample/src/components/mdbutton/MDButtonFactory.as
+++ /dev/null
@@ -1,56 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package components.mdbutton {
-	public class MDButtonFactory {
-		private static var _instance : MDButtonFactory;
-		protected var elementName : String = "md-button";
-		protected var baseComponent : Object = MDButton;
-		protected var componentClass : Object;
-		protected var alreadyRegistered: Boolean = false;
-
-		public function MDButtonFactory() {
-			if (_instance) {
-				throw new Error("MDButtonFactory is a singleton. Use getInstance instead.");
-			}
-			_instance = this;
-		}
-
-		public static function	getInstance() : MDButtonFactory {
-			if (!_instance) {
-				new MDButtonFactory();
-			}
-			return _instance;
-		}
-		
-		protected function registerComponent() : void {
-			if(!alreadyRegistered)
-			{
-				var classProto:Object = Object["create"](components.mdbutton.MDButton['prototype']);
-				componentClass = document["registerElement"](elementName, {'prototype':classProto});
-				alreadyRegistered = true;
-			}
-		}
-		
-		public function getButtonClass():Object
-		{
-			registerComponent();
-			return componentClass;	
-		}
-	}
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/main/flex/AngularExample.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/main/flex/AngularExample.as b/examples/native/AngularExample/src/main/flex/AngularExample.as
new file mode 100644
index 0000000..6bc74c9
--- /dev/null
+++ b/examples/native/AngularExample/src/main/flex/AngularExample.as
@@ -0,0 +1,84 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package {
+	import angular.IModule;
+
+	import components.mdbutton.MDButton;
+	import components.mdbutton.MDButtonFactory;
+	/**
+	 * @author omuppirala
+	 */
+	public class AngularExample {
+		
+		private var app:IModule;
+		
+		public function AngularExample() {
+			//set up angular app
+			app = angular.module("app",["ngMaterial"]);
+			app.controller("MyController", ["$scope", "$mdDialog", MyController]);
+			document.body.setAttribute("ng-app", "app");
+			
+			//App container
+			var container:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+			container.style.width = '100%';
+			container.style.height = '100%';
+			container.setAttribute("layout", "row");
+			container.setAttribute("layout-align", "center center");
+			document.body.appendChild(container);
+			
+			//App
+			var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+			div.id = 'div';
+			div.style.width = '50%';
+			div.style.height = '50%';
+			div.setAttribute("layout", "column");
+			div.setAttribute("layout-align", "center center");
+			
+			div.setAttribute("ng-controller", "MyController");
+			div.setAttribute("md-whiteframe", "18");
+			div.setAttribute("class", "md-whiteframe-14dp");
+			container.appendChild(div);
+			
+			//App children
+			div.innerHTML = '<h1>FlexJS + Angular + Angular Material Demo</h1>';
+			div.innerHTML += '<span flex />';
+			div.innerHTML += '<md-button id="myBtn" class="md-primary md-raised" ng-click="handleBtnClick()">{{btnLabelStr}}</md-button>';
+//			div.innerHTML += '<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>';
+//			div.innerHTML += '<md-progress-circular md-mode="indeterminate"></md-progress-circular>';
+			div.innerHTML += '<md-input-container class="md-block" flex-gt-sm><label>Change button label...</label><input ng-model="btnLabelStr"></md-input-container>';
+			div.innerHTML += '<span flex />';
+
+//			var labelButtonClass:Object = MDButtonFactory.getInstance().getButtonClass();
+//			var labelButton:MDButton = new labelButtonClass();
+//			labelButton.setAttribute("class", "md-primary md-raised");
+//			div.appendChild(labelButton);
+//			labelButton.setLabel("Label Button");
+			
+//			var cakeButtonClass:Object = MDButtonFactory.getInstance().getButtonClass();
+//			var cakeButton:MDButton = new cakeButtonClass();
+//			cakeButton.setAttribute("class", "md-fab");
+//			//cakeButton.setAttribute("md-no-ink", "");
+//			div.appendChild(cakeButton);
+//			cakeButton.setIcon("cake");
+//			cakeButton.clickHandler("handleBtnClick");
+			
+		}
+
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/main/flex/MyController.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/main/flex/MyController.as b/examples/native/AngularExample/src/main/flex/MyController.as
new file mode 100644
index 0000000..295df23
--- /dev/null
+++ b/examples/native/AngularExample/src/main/flex/MyController.as
@@ -0,0 +1,70 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package {
+	import angular.material.MDAlertDialog;
+	import angular.material.MDDialogService;
+	import angular.IScope;
+	/**
+	 * @author omuppirala
+	 */
+	 
+	public class MyController {
+		
+		private var $scope:IScope;
+		private var $mdDialog:MDDialogService;
+		
+		public function MyController(scope:IScope,mdDialog:MDDialogService) {
+			this.$scope = scope;
+			this.$mdDialog = mdDialog;
+			this.$scope["handleBtnClick"] = this.handleBtnClick;
+			this.$scope["close"] = this.close;
+			this.$scope["myDate"] = new Date();
+			this.$scope["btnLabelStr"] = "Click me";
+
+			//setupWatchForDate();
+		}
+
+		private function setupWatchForDate() : void {
+			$scope.$watch('myDate', this.handleDateChange,true);
+		}
+
+		private function handleDateChange() : void {
+			alert('Date selected: ' + $scope["myDate"].toString());
+		}
+		
+		public function handleBtnClick(event:Event):void
+		{
+			$mdDialog.show(
+			{
+				scope: $scope,
+				preserveScope: true,
+      			//template: '<div style="margin:25px;"><img src="http://flex.apache.org/images/logo_01_fullcolor-sm.png" alt=""/><h1 md-heading">Angular Material</h1><img src="https://material.angularjs.org/latest/img/icons/angular-logo.svg" alt=""/><div layout="row"><span flex/><md-button ng-click=close()>CLOSE</md-button></div></div>',
+      			template: '<div layout="column" layout-align="left center" style="width:500px; height:500px; margin:25px;"><h3>Select a date: </h3><md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker><br>Selected date: {{myDate}}<span flex/><div layout="row"><span flex/><md-button ng-click=close()>CLOSE</md-button></div></div>',
+			    clickOutsideToClose: true,
+				openFrom: angular.element(document.querySelector('#myBtn')),
+				closeTo: angular.element(document.querySelector('#myBtn'))
+		    });
+		}
+		
+		private function close():void
+		{
+			$mdDialog.cancel();
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/main/flex/components/IWebComponent.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/main/flex/components/IWebComponent.as b/examples/native/AngularExample/src/main/flex/components/IWebComponent.as
new file mode 100644
index 0000000..ca0e8ca
--- /dev/null
+++ b/examples/native/AngularExample/src/main/flex/components/IWebComponent.as
@@ -0,0 +1,27 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package components {
+	/**
+	 * @author omuppirala
+	 */
+	public interface IWebComponent {
+		
+		function setupComponent():void;
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/main/flex/components/WebComponent.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/main/flex/components/WebComponent.as b/examples/native/AngularExample/src/main/flex/components/WebComponent.as
new file mode 100644
index 0000000..3637fd2
--- /dev/null
+++ b/examples/native/AngularExample/src/main/flex/components/WebComponent.as
@@ -0,0 +1,38 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package components {
+	import components.IWebComponent;
+
+	/**
+	 * @author omuppirala
+	 */
+	public class WebComponent extends HTMLElement implements IWebComponent {
+
+		protected var sr : ShadowRoot;
+
+		public function createdCallback() : void {
+			sr = this['createShadowRoot']();
+			setupComponent();
+		}
+
+		public function setupComponent() : void {
+			//override in subclass
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/main/flex/components/mdbutton/MDButton.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/main/flex/components/mdbutton/MDButton.as b/examples/native/AngularExample/src/main/flex/components/mdbutton/MDButton.as
new file mode 100644
index 0000000..05f9377
--- /dev/null
+++ b/examples/native/AngularExample/src/main/flex/components/mdbutton/MDButton.as
@@ -0,0 +1,61 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package components.mdbutton {
+	import components.WebComponent;
+	/**
+	 * @author omuppirala
+	 */
+	public class MDButton extends WebComponent
+	{
+		
+		protected var label:Text;
+		protected var iconSpan:HTMLSpanElement;
+		override public function setupComponent():void {
+			createLabel();
+			createIcon();
+		}
+		
+		protected function createLabel():void
+		{
+			label = ownerDocument.createTextNode("");
+    		sr.appendChild(Node(label));
+		}
+		
+		public function setLabel(labelStr:String):void {
+			this.textContent = labelStr;
+		}
+		
+		protected function createIcon():void
+		{
+			iconSpan = ownerDocument.createElement("span") as HTMLSpanElement;
+			iconSpan.setAttribute("class","material-icons");
+    		this.appendChild(iconSpan);
+		}
+		
+		public function setIcon(iconName:String):void {
+			iconSpan.textContent = iconName;
+		}
+		
+		public function clickHandler(functionName:String):void
+		{
+			this.setAttribute("ng-click", functionName+"()");
+		}
+		
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/AngularExample/src/main/flex/components/mdbutton/MDButtonFactory.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/main/flex/components/mdbutton/MDButtonFactory.as b/examples/native/AngularExample/src/main/flex/components/mdbutton/MDButtonFactory.as
new file mode 100644
index 0000000..39b47cb
--- /dev/null
+++ b/examples/native/AngularExample/src/main/flex/components/mdbutton/MDButtonFactory.as
@@ -0,0 +1,56 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package components.mdbutton {
+	public class MDButtonFactory {
+		private static var _instance : MDButtonFactory;
+		protected var elementName : String = "md-button";
+		protected var baseComponent : Object = MDButton;
+		protected var componentClass : Object;
+		protected var alreadyRegistered: Boolean = false;
+
+		public function MDButtonFactory() {
+			if (_instance) {
+				throw new Error("MDButtonFactory is a singleton. Use getInstance instead.");
+			}
+			_instance = this;
+		}
+
+		public static function	getInstance() : MDButtonFactory {
+			if (!_instance) {
+				new MDButtonFactory();
+			}
+			return _instance;
+		}
+		
+		protected function registerComponent() : void {
+			if(!alreadyRegistered)
+			{
+				var classProto:Object = Object["create"](components.mdbutton.MDButton['prototype']);
+				componentClass = document["registerElement"](elementName, {'prototype':classProto});
+				alreadyRegistered = true;
+			}
+		}
+		
+		public function getButtonClass():Object
+		{
+			registerComponent();
+			return componentClass;	
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/ButtonExample/src/ButtonExample.as
----------------------------------------------------------------------
diff --git a/examples/native/ButtonExample/src/ButtonExample.as b/examples/native/ButtonExample/src/ButtonExample.as
deleted file mode 100644
index a3772e9..0000000
--- a/examples/native/ButtonExample/src/ButtonExample.as
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- *
- *  Licensed to the Apache Software Foundation (ASF) under one or more
- *  contributor license agreements.  See the NOTICE file distributed with
- *  this work for additional information regarding copyright ownership.
- *  The ASF licenses this file to You under the Apache License, Version 2.0
- *  (the "License"); you may not use this file except in compliance with
- *  the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- *
- */
-
-package
-{
-public class ButtonExample
-{
-	public function start():void
-	{
-		var button:Element = document.createElement("button");
-        button.onclick = function ():void {
-            alert("Hello browser from FalconJX!");
-        };
-        button.textContent = "Say Hello";
-        document.body.appendChild(button);
-	}
-}
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c8228288/examples/native/ButtonExample/src/main/flex/ButtonExample.as
----------------------------------------------------------------------
diff --git a/examples/native/ButtonExample/src/main/flex/ButtonExample.as b/examples/native/ButtonExample/src/main/flex/ButtonExample.as
new file mode 100644
index 0000000..a3772e9
--- /dev/null
+++ b/examples/native/ButtonExample/src/main/flex/ButtonExample.as
@@ -0,0 +1,34 @@
+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+package
+{
+public class ButtonExample
+{
+	public function start():void
+	{
+		var button:Element = document.createElement("button");
+        button.onclick = function ():void {
+            alert("Hello browser from FalconJX!");
+        };
+        button.textContent = "Say Hello";
+        document.body.appendChild(button);
+	}
+}
+}
\ No newline at end of file