Category Archives: NextGen experimentation

Phil 10.7.14

8:00 – 4:00 SR

  • Another day, another ticket trying to get back my servers.
  • Updated the database though, through the scripting server.
  • More Angular. First, we’re going to try to move the QueryService off to it’s own file.
  • AngularJS: Getting around ngApp limitations with ngModule
  • Here’s how to have multiple files with dependencies in Angular, at least insofar as I can tell.
  • First, make sure that all your scripts are listed at the bottom of your html file. In this case, the ng-app is queryAppServlet, which is shown below:
<html ng-app="queryAppServlet">
    <body ng-controller="MainCtrl as mainCtrl">
        <script src="libs/angular.js"> </script>
        <script src="queryAppServlet.js"></script>
        <script src="tomcatConnection.js"></script>
    </body>
</html>
  • Each javascript file contains an individual module. Here’s a truncated version of ‘tomcatConnection.js’:
 var tc = angular.module('tomcatConnection', []);
 tc.factory('QueryService', ['$http', function($http){
     "use strict";
     var items = ["Ready"];
     var message = "No Messages";
     var subscribers = [];
     return{
         addSubscriber: function(subscr){
         subscribers.push(subscr);
     }
}]);
  • ‘queryAppService.js’ uses tomcatConnect for the communication with the server. It looks like this:
var qa = angular.module('queryAppServlet', ['tomcatConnection']);
qa.controller('MainCtrl', ['QueryService', '$http', function (QueryService, $http) {
     "use strict";
     var self = this;
     QueryService.addSubscriber(self);
     self.query = "show tables";

     self.items = QueryService.getItems();
     self.message = QueryService.getMessage();

     self.submit = function(){
         QueryService.submit(self.query);
     };
}]);

Phil 10.6.14

8:00 – 10:00, 1:00 – 5:00 SR

  • No joy in getting on the servers. Put in another ticket to get my admin accounts back(?)
  • Ronda seems to be making progress though
  • Angular
    • learning about $q
    • Re-rigged the Angular ‘QueryAppServlet’ to use a service. There doesn’t seem to be a straightforward way to bind the values from the service to the controller, so I used a pubsub pattern, which worked just fine and I don’t feel too bad about it, but it seems… clunky. In looking for an answer, I found this discussion on stackoverflow, which I need to spend more time reading.
    • Tried to get the Java Servlet to see straight json, but no luck. back to URL encoding.

 

Phil 10.2.14

8:00 – 4:00

  • More paperwork! Woohoo!
  • For tomorrow, assuming I’m still waiting for access: http://philfeldman.com/GaText/,  http://philfeldman.com/SierpinskiGasket.
  • Rebuilt the project_portfolio_enh database after blowing it away upgrading xampp. Funding Requests should now work, which is probably a good target for the Angular app, once I get some more basics out of the way.
  • Discovered a bug in the DbTable.toJson() method – arrays were being quoted. Fixed now.

Phil 10.1.14

8:00 – 4:00 SR

  • Still no server access. Looks like Dave W. is the hangup. Also, the reason that Ronda can’t get her Centrify account is because she doesn’t have access either.
  • Added an “EchoServlet” to the YUITestServlets for playing with Angular. In retrospect, maybe we should have called this the JS-JavaServlets. Ah, well. Lockin sucks.
  • After considerable flailing, figured out how to handle deployments (to the local Tomcat Server) in Webstorm. The process is as follows:
  • Under the Tools tab, select ‘Deployment’, then ‘Configuration’. This will bring up the dialog that appears below. Click the green ‘plus’ to add a configuration.
  • DeploymentConnection
  • Give the configuration and a name, then set up the project file and urls as shown. Once that’s done, you can configure the mappings. Note that if the deployment options in the Tools->Deployment tab are disabled, you’ve probably messed up a mapping, so be careful here:
  • DeploymentMapping
  • The tricky part that I found is that there has to be at leas a ‘\’ in the deployment path or this doesn’t work. So just follow the above template and things ‘should’ work.
  • Ok, got everything working. The following is a complete example that echoes the request from the client back from the server
  • First, the html
<!DOCTYPE html>
<html ng-app="queryAppServlet">
<head lang="en">
 <meta charset="UTF-8">
 <title>Test</title>
 <style>
 .queryDiv {
 background-color: lightgrey;
 width: 700px;
 height: 200px;
 padding: 5px;
 margin: 5px;
 overflow: auto;
 }

 .responseDiv {
 background-color: lightgrey;
 width: 700px;
 height: 400px;
 padding: 5px;
 margin: 5px;
 overflow: auto;
 }

 p.messages{
 font-size: 12px;
 font-style: italic;
 }
 .results{
 font-family: "Courier New";
 font-size: 12px;
 }
 </style>
</head>
<body body ng-controller="MainCtrl as mainCtrl">
<div>Raw queries of irev database. Copy results and paste into Excel or .csv file</div>
<textarea class="queryDiv"contenteditable="true" ng-model="mainCtrl.query"></textarea>
<div></div>
<input type="button" value="Submit Query" ng-click = "mainCtrl.submit()"/>
<div class="responseDiv">
 <p class = "messages">{{mainCtrl.message}}</p>
 <div class = "results" ng-repeat="item in mainCtrl.items"> {{item}}</div>
</div>

<script src="libs/angular.js"> </script>
<script src="queryAppServlet.js"></script>
</body>
</html>
  • Next, the Angular component:
var qa = angular.module('queryAppServlet', []);
qa.controller('MainCtrl', ['$http', function ($http) {
 "use strict";
 var self = this;
 self.items = ["Ready"];
 self.message = "No Messages";
 self.submit = function () {
 self.message = "No Messages";
 var upstring = encodeURI("query=" + self.query);
 var upObj = {
 url: 'EchoServlet/foo.json',
 method: "POST",
 data: upstring,
 headers: {'Content-Type': 'application/x-www-form-urlencoded'}
 };

 function goodResponse(response){
 var data = response.data;
 if (data['database access']) {
 self.message = data['database access'];
 self.items = [];
 return;
 }
 if (data.connect_error) {
 self.message = data.connect_error;
 self.items = [];
 return;
 }
 self.items = [];
 var item;
 var keys = Object.keys(data[0]);
 var key;
 var i = 0, j = 0;
 var str = "";
 for (i = 0; i < keys.length; i++) {
 str += keys[i] + ', ';
 }
 self.items.push(str);
 for (i = 0; i < data.length; i++) {
 item = data[i];
 str = "";
 for (j = 0; j < keys.length; j++) {
 key = keys[j];
 str += item[key] + ', ';
 }
 self.items.push(str);
 }
 }

 function errorResponse(response){
 alert('queryApp.js: Error while fetching data from io2.php: '+response);
 }

 $http(upObj).then(goodResponse, errorResponse);
 };
}]);
  • Last, the Java Servlet
 package com.novetta.yuitest;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Enumeration;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;

public class EchoServlet extends HttpServlet {
 protected Logger logger = Logger.getLogger(EchoServlet.class.getName());

 public EchoServlet() {
 // TODO Auto-generated constructor stub
 }
 
 
 public void doPost(HttpServletRequest req, HttpServletResponse rsp)
 throws ServletException
 {
 System.out.println("EchoServlet.doPost()");
 
 Enumeration<String> pNames = req.getParameterNames();
 
 ArrayList<String> nameArray = new ArrayList<String>();
 ArrayList<String> valArray = new ArrayList<String>();
 while(pNames.hasMoreElements()){
 String pName = pNames.nextElement().toString();
 String pVal = req.getParameter(pName);
 System.out.println(pName+" = '"+pVal+"'");
 nameArray.add(pName);
 valArray.add(pVal);
 } 
 
 PrintWriter out;
 try {
 
 String buf = "[";
 for(int i = 0; i < nameArray.size(); i++){
 buf += "{\""+nameArray.get(i)+"\":\""+valArray.get(i)+"\"},";
 }
 buf = buf.substring(0, buf.length()-1);
 buf += "]";
 System.out.println(buf);
 rsp.setContentType("application/json");
 out = rsp.getWriter();
 out.print(buf);

 } catch (IOException e) {
 logger.error(e.getMessage());
 e.printStackTrace();
 }

 }

 /**
 * @param args
 */
 public static void main(String[] args) {
 // TODO Auto-generated method stub

 }

}

Phil 9.30.14

8:00 – 4:00 SR

  • Lost server access over the break so no deployments or backups today. The single point of failure failed. Working on getting access restored.
  • Status reports.
  • Uploaded code from the break to subversion
  • More Angular
  • Installing newer/better xampp

Phil 9.12.14

8:00 – 5:00 SR

  • DB Backups
  • Deployed new FA and RA
  • Added a column to the master table
  • Added labs to FRa
  • Angular
    • Worked on http interaction. It turns out that Angular likes to post in JSON format, but most servers (PHP, Java) use URI encoding. Spent a few hours going around and around with that. There are also no directives around <br>, and ng-model doesn’t seem to work with <div>. Nonetheless, I’m interacting with the database through a web page, so yay.

Phil 9.10.14

8:00 – 4:00 SR

  • Got an email from Geena – she’s unable to save a mitigation plan. “To elaborate, looks like the malfunction occurs when ‘copy from previous month’ is selected, unable to save. I selected ‘copy from previous month’ and modified the data yet unable to save”
  • DB Backups.
  • Get for class, this too.
  • Working through chapter 3 of AngularJS Up and Running, which introduces unit testing. I was having trouble getting karma to run – getting the error
    • ERROR [karma]: { [Error: listen EACCES] code: ‘EACCES’, errno: ‘EACCES’, syscall: ‘listen’ }
  • Poking around led to this post, which suggested changing the port in the karma.conf.js file to 8001 from 8080. This works just fine, though I’m not sure why port 8080 is choking. I have Tomcat installed on 8080, but even with Tomcat off, I get the same error. Odd.
  • On to forms and validation. Very nicely done.

Phil 9.4.14

8:00 – 8:00SR

  • DB Backups
  • More Angular. Going to try to connect to the server and get Funding Request data.
  • Nope, got distracted. It turns out that the browser DOM keyboard model is not ASCII. If you listen for keyboard events (as some of the charting apps do), then it’s impossible to determine what key has been clicked by just looking at the event.charCode in the keypress event. So instead, my first Angular app is going to be a webapp that allows you to enter in a set of keyboard characters and have the javascript determine what the keycode maps to. This varies by browser and edition. Did someone not tell early web developers that there was this thing called an ASCII table? Here’s the angular directive

Dong Shin 08.26.2014

  • grails experiment – 2.3.1
    • changed generated class names to singular – use table in static mapping
    • relation working – make sure ID fields are named correctly
    • got XML/JSON server working – replace json with xml to get xml response
      • /project.json to get a list JSONized
      • /project/index to get an HTML standard scaffolding
      • /project/create.html scaffold for a new item
      • /project/show/1.html scaffold edit item 1
      • /project/show/1.json JSON for item id: 1