You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by cd...@apache.org on 2016/04/18 15:26:35 UTC
[12/50] git commit: [flex-asjs] [refs/heads/feature/maven-migration]
- Add AngularJS + Angular Material example. Need to figure out what to do
about the externs swc files.
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/feature/maven-migration
Commit: 894b5264e4972b48d6c4bbaa925540c44d48bee8
Parents: e85d9e1
Author: OmPrakash Muppirala <bi...@gmail.com>
Authored: Sat Apr 2 02:55:26 2016 -0700
Committer: OmPrakash Muppirala <bi...@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;
+ }
+ }
+}