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 <[email protected]> Authored: Sat Apr 2 02:55:26 2016 -0700 Committer: OmPrakash Muppirala <[email protected]> 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; + } + } +}
![http://flex.apache.org/images/logo_01_fullcolor-sm.png"](http://flex.apache.org/images/logo_01_fullcolor-sm.png"){kind=link}
![https://material.angularjs.org/latest/img/icons/angular-logo.svg"](https://material.angularjs.org/latest/img/icons/angular-logo.svg"){kind=link}