Monthly Archives: October 2014

Phil 10.8.14

8:00 – 2:30 SR

  • Backups!
  • More angular. Filters yesterday, directives today?
  • Discovered an interesting problem with bound arrays, at least for strings. If the value that Angular is using to connect it to the div is the same for two or more rows, it complains with a “Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use ‘track by’ expression to specify unique keys”. The default seems to be the first column. This is discussed in the documentation here, with the upshot that you can generally get around this by using “<div ng-repeat="value in [4, 4] track by $index"></div>“. not sure how that would play with some of the large tables we’re using. I’ve just tried this for objects, and it seems just fine. This implies that we’ll need to be careful about how we populate datagrids, but nothing horrible.
  • Working my way through ng-route.

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.

 

Dong Shin 10.02.2014

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.

Dong Shin 10.01.2014

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

 }

}