Author Archives: pgfeldman

Phil 2.3.15

8:00 – 5:00 SR

  • Deploying new FR, with debugging. Everything but the login works. Dong is perplexed.
  • More Angular. Working on figuring out how to do complex directives. Huh. The secret is to understand that directives are static. And it turns out that factories are static too.
  • I’ve got my test app now working with
    • a controller
    • a service
    • a directive (with link function)
    • a factory.
  • Next, inheritance on all of the above.
    • Back to TypeScriptEssentials….
    • Modified the command line for the tsc compiler (under ‘watch’). It’s now tsc.cmd –declaration –noImplicitAny –target ES5 –sourcemap <filename>
    • Inheritance works like a charm. Classes with static functions (Factories and Directives) are a bit problematic, since there’s no ‘this’ to refer to. This means that functions are referred to by their fully qualified name (i.e. TestDirective.foo(), rather than this.foo()). Overloading can’t quite work the way that I’d like to. That being said, the static functions do come along for the ride, so as long as all the references are updated, everything works the way it should.

Phil 2.2.15

8:00 – 10:00, 12:00 – 5:30 SR

  • DB backups
  • Worked with Dong to install FR on the test server. The services still aren’t working. Maybe missing jar files?
  • Status report
  • More Angular
    • Tried making factories work but I got stuck trying to access the object’s this. Since they are structured differently but generally have the same functionality(ish), I tried configuring the TypeScript class as a service. That worked just fine – I was able to access public variables and functions through dependency injection.
    • Discovered that the ‘static’ keyword allows for directives to work with classes. THis might also be true for factories. The issue to work through is how the link function connects to the directive. Components like the scatterplot are big directives, and can’t be crammed into a single method in a class.
  • Timesheet!

Phil 1.30.15

8:00 – 5:00 SR

  • Had a scary email from Ronda about the center where our servers live getting shut down sometime in June. I thought we had started this process, but maybe not?
  • Meeting with Ronda at 4:00 on Monday.
  • More Typescript/Angular integration. Today’s results!
  • First, plain old angular HTML:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="simpleApp">
<div ng-controller="MainCtrl as mc">
    <p>String = {{mc.myString}}</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="simple.js"></script>

</body>
</html>
  • Next, the TypeScript (simple.ts):
/// <reference path="../definitelytyped/angularjs/angular.d.ts" />

class TestClass{
   myString:string;

   constructor(){
      this.myString = "Hello, TypeScript4";
   }
}

class AngularMain{
   myModule:ng.IModule;
   myController:ng.IModule;
   public doCreate(angular:ng.IAngularStatic, sfn:Function){
      this.myModule = angular.module('simpleApp', []);
      this.myController = this.myModule.controller('MainCtrl', [sfn]);
   }
}

new AngularMain().doCreate(angular, TestClass);
  • Last, the generated JavaScript code (simple.js):
/// <reference path="../definitelytyped/angularjs/angular.d.ts" />
var TestClass = (function () {
    function TestClass() {
        this.myString = "Hello, TypeScript4";
    }
    return TestClass;
})();
var AngularMain = (function () {
    function AngularMain() {
    }
    AngularMain.prototype.doCreate = function (angular, sfn) {
        this.myModule = angular.module('simpleApp', []);
        this.myController = this.myModule.controller('MainCtrl', [sfn]);
    };
    return AngularMain;
})();
new AngularMain().doCreate(angular, TestClass);
//# sourceMappingURL=simple.js.map

Phil 1.29.15

8:00 – 5:00 SR

  • Deployed swf fix
  • Tried FR webapp again, but login still won’t work. The service can’t be found.
  • Working on using Typescript for our modules, now that we’ve settled on a variant of the Angular Prototype pattern.
  • Had to get the definitely typed angular and jquery ‘libraries’ and put them in their own folder for the 
    /// <reference path="../definitelytyped/angularjs/angular.d.ts" />
  • declarations(?) to work.
  • Went back to the angular with typescript video. The key points are really around 15:00 in, where the controllers and factories are built. Sean Hess’s github repository for the demo code is here.

Phil 1.28.15

8:00 – 3:30 SR

Phil 1.27.15

8:00 – 4:00 SR

  • Working on promoting the dialog and server components to the Novetta libs folder(s)
  • Aaaaaand while working on that I figured I’d make sure that inheritance works with my example server factory class. Turns out the Revealing Module Pattern breaks inheritance because the private functions don’t come along with closure, which surprised me. A google search brings up this post by MetaDuck, which I’m looking at….
  • No luck with that. It’s wierd, I’m just not getting the pointer from angular when I inherit. Giving up for a little while.
  • Moved password dialog to the novetta libs
  • Moved phpConnection to novetta libs
  • Ok, after a long walk to clear my head, I realized that my problems are because factories require a return object. This means that you have to change the first line of the inheritance code to store that return object so that it in turn can be returned to angular:
function QueryServiceFn2($http){
   var retObj = QueryServiceFn.call(this, $http);
   globalU.inheritPrototype(this, QueryServiceFn);
   return retObj;
}
  • And that works just fine. Going to check that closure works the way that I think it should now. And lo, it does. So here’s a full example of inheriting a factory object:
globalUtils.appMap.phpFactories2 = (function(globalU, base){
   "use strict";
   function QueryServiceFn($http){
      var retObj = base.call(this, $http);
      globalU.inheritPrototype(this, base);
      return retObj;
   }

   return{
      queryServicePtr: QueryServiceFn
   };
})(globalUtils, globalUtils.appMap.phpFactories.queryServicePtr);
  • To override a function, simply declare it normally and then set the pointer in retObj to point at the new version. The only thing to watch out for is that closure won’t hold. If you need access to an item in the base class that’s accessed through closure, you’ll probably have to copy it.

Phil 1.26.14

8:00 – 3:00 SR

  • Looks like the presentation went well. Chris wants a single presentation as well, which should be easy – just add the FY to the title and then make one large slideshow.
  • Hopefully finishing login directive.
    • Added in the factory calls to the http calls. Needed to add an additional then to process the reselts of the password query.
    • Working on a reset password capability – done.
    • Cleaning up CSS.

Phil 1.23.15

9:00 – 5:00 SR

  • Validating that my new, improved inheritance pattern works. Yep!
  • Building a login directive using OO. If that all behaves, then I can get back to scatterplot.
  • Broke apart the set login/password and the check password functions. For the test app, I’m communicating with PHP, since it comes with apache and I don’t have to spend a lot of time switching between Eclipse/Tomcat and Webstorm.
  • Good lord, I’ve completely forgotten how to build a simple directive. Ok, maybe not. What I’m trying to do is make a self-contained directive that will reach out through a couple of objects to a server to set and check a password. The calling page really just needs to know it the directive succeeds. As such, I need to have self contained information in the scope of the directives. After poking around for a while, I discovered that I could declare the variables in the link function, and then refer to them by name using ng-model
  • HTML
<div class="passwordDialog" ng-hide="isValid">
    <form>
        Name: <input type="text" ng-model="name" /><br />
        Password: <input type="text" ng-model="password" /><br />
        <input type="submit" ng-click="checkValues()" value="Check" />
    </form>
    <div>
        <input type="button" value="Click Me" ng-click="isValid = true">
    </div>
</div>
  • Directive JavaScript
function passwordFn(){
   return {
      restrict: 'AE',
      scope: {isValid: '@'}, // all we need to return - passed in from calling page.
      templateUrl: 'directives/passwordDialog.html',
      link: function(scope, element, attr) {
         scope.name = 'unset Name';
         scope.password = 'unset Password';
         scope.checkValues = function(nm,pw){
            console.log('scope.name = '+scope.name);
            //call the server and do tests here. Scope values are visible
         };
      }
   };
}

Phil 1.22.15

8:00 – 5:00 SR

  • Add a script that checks to see if a user has logged in within the last n months. If they have not, delete them
  • In future, add a ‘last used’ timestamp to user-generated content so that it can be culled
  • Look into why the FinancialAssistantServices logs file is being placed at the root.
  • Inheritance. So it turned out that what I thought was parasitic combination inheritance was just parasitic. The globalUtils.inheritPrototype() function was being called before the function/objects were being called. I think that this is because Angular is calling the functions after the other JavaScript is called. Since (I think!) the code has to be structured in this decoupled way to allow flexible use of OO, I had to look again at how all the pieces fit together. It turns out that a properly configured function object that inherits from a base class looks like this:
function ChildFn3(globalService) {
    console.log("Start ChildFn3");
    ChildFn2.call(this, globalService);
    globalU.inheritPrototype(this, ChildFn2);
    console.log("Finish ChildFn3");
}
  • we can adjust inherited values such as arrays without ‘static’ behaviors as well:
function ChildFn4(globalService) {
    console.log("Start ChildFn4");
    ChildFn2.call(this, globalService);
    globalU.inheritPrototype(this, ChildFn2);
    this.colors.push('black');
    console.log("Finish ChildFn4");
}

Phil 1.21.15

8:00 – 5:00 SR

  • Deploying new dynamic chart script
  • Fixed a few things, but a Month4 Obligated is not working. Manually updating tables for briefing.
  • Got promises to work. This is a very nice thing.
  • Working on Object/Function construction and it is way strange. Masking depends on the order of declarations in a very counter intuitive way. More here.

Phil 1.20.15

8:00 – 4:30 SR

  • Fixed most of the issues with the dynamic chart presentation. Committed isn’t carrying over, and the generalized solution to partial FY needs to be implemented for all months.
  • Trying to wrap all the pieces of JS inheritance into one call. Looking at this for the moment…
  • Had an idea about using Turk for generalized GUI testing using an Angular directive framework (it’ll need lots of OO!) and database io like what I did for iRevTurk.
  • Need to fix promises in my server code.
  • Timesheets…

Phil 1.14.15

10:00 – 4:30 SR

  • Morning doctor appt.
  • Mostly fixed the dynamic chart script. 2014_OM_ISRPMO isn’t getting any data though.
  • Deployed the new version of the Runding Request app but couldn’t get login to work.
  • Working on integrating ace/ui-ace into, well, everything.
  • Got the ui-ace editor roughtly integrated into scatterplot. The editor doesn’t have any programmatic configuration/data yet, but that can be added to the  mc.paneldata object.
  • And that’s it for the week. I’m off presenting at TEI 2015 for the rest of the week.

Phil 1.13.15

8:00 – 5:30 SR

  • ran the dynamic_charts script and then reset the last_run time to 1:00am. Now it should run when folks are not around.
  • Going to try changing the scatterplot test controller to run in a new module that references the scatterplot directive module. That worked just fine.
  • Added an appMap object to GlobalUtils. All objects are created as attributes of globalutils.appMap. to keep things clean in the function, it’s recommended to pass the values of appMap into the wrapping function:
(function(angular, scatterplot) {
    "use strict";
    angular.module('scatterApp', ['ngAnimate', 'ngSanitize', 'monospaced.mousewheel'])
        .directive('stagePlanes', [scatterplot.stagePlanesPtr])
        .directive('interactive3D', [scatterplot.interactive3dPtr])
        .directive('floatingPanelManager', [scatterplot.floatingPanelManagerPtr])
        .directive('floatingPanel', ['$sce', scatterplot.floatingPanelPtr]);
})(angular, globalUtils.appMap.scatterplotDirectives);
  • Something to look into: RequireJS. It’s got asynchronous loading of namespaced JavaScript files.
  • Continue working on the divs for scatterplot to create forms.
    • Before I try a form, I’m going to try to have the ace editor be the selected appearance. If I can get that to work, then integrating forms will be a piece of cake. Forms are always the fallback anyway…
    • Got the editor working, but it doesn’t play well with angular. There is a a directive though – UI-ace that looks promising. Got that to work, but it doesn’t seem to allow for data binding. Need to look into how to load the text in the editor.
  • Start on threejs charting?
  • Meeting with Agenia at 4:00 – 5:30

Phil 1.12.15

7:00 – 3:00 SR

  • Freezing rain today. The roads have the dull glaze of ice. It’s a great day for telework.
  • Spent a few hours chasing odd errors that I thought were based on JavaScript inheritance but actually turned out to be server oddness. Turns out data provided by remote servers like ‘HTTP_REFERER’ is not standardized and might not be provided. Good thing to note.
  • Working on making scatterplot OO. Then I’m going to see if I can make the panel consist of different directives. Or at least use ng-if two switch between the minimal, hovered and selected items.
  • OO for scatterplot is done. I didn’t like the way that the gl-matrix library was putting it’s elements into the global/window namespace, so I changed that so that they are now under glx. The way that they were doing it was really odd though:
(function(_global) {
  "use strict";

  var shim = {};
  if (typeof(exports) === 'undefined') {
    if(typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
      shim.exports = {};
      define(function() {
        return shim.exports;
      });
    } else {
      // gl-matrix lives in a browser, define its namespaces in global
      shim.exports = typeof(window) !== 'undefined' ? window : _global;
    }
  }
  else {
    // gl-matrix lives in commonjs, define its namespaces in exports
    shim.exports = exports;
  }

  (function(exports) {
	// all the matrix code goes here

  })(shim.exports);
})(this);
  • It turns out that this is a strategy for integrating with Nodejs, which has an ‘exports’ property which is how they handle namespacing. Kind of. More learning to do here.
  • Got the switching of html working with ng-if. To keep the smooth transitions, I have an outer wrapper div that gets the overall (size, color) style. It contains three divs that are switched between using ng-if:
<div class="floatingPanelStyle" ng-class="getCssClass()"
     ng-click="selectPanel()"
     ng-mouseenter="hoverPanel(true)"
     ng-mouseleave="hoverPanel(false)"
     ng-style="{'transform':getTransformString()}">
    <!-- <div ng-bind-html="getHtml()"></div> -->
    <div ng-if="checkPanelState('default')"><em>{{panelObj.id}}</em></div>
    <div ng-if="checkPanelState('hover')"><p>Hover</p></p><p>Click <a href="http://google.com">me</a>!</p></div>
    <div ng-if="checkPanelState('selected')"><p>Selected</p></p></div>
</div>
  • Next step will be to put more sophisticated markup, like a form in there.