flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bigosma...@apache.org
Subject git commit: [flex-asjs] [refs/heads/develop] - Add AngularJS + Angular Material example. Need to figure out what to do about the externs swc files.
Date Sat, 02 Apr 2016 09:56:48 GMT
Repository: flex-asjs
Updated Branches:
  refs/heads/develop e85d9e134 -> 894b5264e


Add AngularJS + Angular Material example.  Need to figure out what to do about the externs
swc files.


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

Branch: refs/heads/develop
Commit: 894b5264e4972b48d6c4bbaa925540c44d48bee8
Parents: e85d9e1
Author: OmPrakash Muppirala <bigosmallm@gmail.com>
Authored: Sat Apr 2 02:55:26 2016 -0700
Committer: OmPrakash Muppirala <bigosmallm@gmail.com>
Committed: Sat Apr 2 02:56:10 2016 -0700

----------------------------------------------------------------------
 .../AngularExample/AngularExample-debug.html    | 28 +++++++++
 .../AngularExample/AngularExample-release.html  | 29 +++++++++
 .../native/AngularExample/src/AngularExample.as | 66 ++++++++++++++++++++
 .../native/AngularExample/src/MyController.as   | 52 +++++++++++++++
 .../src/components/IWebComponent.as             |  9 +++
 .../src/components/WebComponent.as              | 20 ++++++
 .../src/components/mdbutton/MDButton.as         | 43 +++++++++++++
 .../src/components/mdbutton/MDButtonFactory.as  | 38 +++++++++++
 8 files changed, 285 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/894b5264/examples/native/AngularExample/AngularExample-debug.html
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/AngularExample-debug.html b/examples/native/AngularExample/AngularExample-debug.html
new file mode 100644
index 0000000..51aa820
--- /dev/null
+++ b/examples/native/AngularExample/AngularExample-debug.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>AngularExample Debug Build</title>
+        
+        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        
+        <script src="bin/js-debug/library/closure/goog/base.js"></script>
+        <script src="bin/js-debug/AngularExample-dependencies.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+        
+        <!-- Angular Material requires Angular.js Libraries -->
+		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
+		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
+		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
+		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
+
+  <!-- Angular Material Library -->
+  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
+    </head>
+    <body>
+        <script>
+            new AngularExample();
+        </script>
+    </body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/894b5264/examples/native/AngularExample/AngularExample-release.html
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/AngularExample-release.html b/examples/native/AngularExample/AngularExample-release.html
new file mode 100644
index 0000000..8d329be
--- /dev/null
+++ b/examples/native/AngularExample/AngularExample-release.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>AngularExample Release Build</title>
+        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        
+        <script src="bin/js-debug/library/closure/goog/base.js"></script>
+        <script src="bin/js-debug/AngularExample-dependencies.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+        
+        <!-- Angular Material requires Angular.js Libraries -->
+		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
+		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
+		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
+		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
+
+  		<!-- Angular Material Library -->
+  		<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
+  		
+        <script src="bin/js-release/AngularExample.js"></script>
+    </head>
+    <body>
+        <script>
+            new AngularExample();
+        </script>
+    </body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/894b5264/examples/native/AngularExample/src/AngularExample.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/AngularExample.as b/examples/native/AngularExample/src/AngularExample.as
new file mode 100644
index 0000000..58517b5
--- /dev/null
+++ b/examples/native/AngularExample/src/AngularExample.as
@@ -0,0 +1,66 @@
+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/894b5264/examples/native/AngularExample/src/MyController.as
----------------------------------------------------------------------
diff --git a/examples/native/AngularExample/src/MyController.as b/examples/native/AngularExample/src/MyController.as
new file mode 100644
index 0000000..a38c0cd
--- /dev/null
+++ b/examples/native/AngularExample/src/MyController.as
@@ -0,0 +1,52 @@
+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/894b5264/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
new file mode 100644
index 0000000..47f3cf2
--- /dev/null
+++ b/examples/native/AngularExample/src/components/IWebComponent.as
@@ -0,0 +1,9 @@
+package components {
+	/**
+	 * @author omuppirala
+	 */
+	public interface IWebComponent {
+		
+		function setupComponent():void;
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/894b5264/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
new file mode 100644
index 0000000..bb90d73
--- /dev/null
+++ b/examples/native/AngularExample/src/components/WebComponent.as
@@ -0,0 +1,20 @@
+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/894b5264/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
new file mode 100644
index 0000000..bb1a9f6
--- /dev/null
+++ b/examples/native/AngularExample/src/components/mdbutton/MDButton.as
@@ -0,0 +1,43 @@
+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/894b5264/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
new file mode 100644
index 0000000..e145a48
--- /dev/null
+++ b/examples/native/AngularExample/src/components/mdbutton/MDButtonFactory.as
@@ -0,0 +1,38 @@
+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;	
+		}
+	}
+}


Mime
View raw message