Skip to main content

The Conversion: Trips for Keeps - Part 2

Ack! A few days off work and then updates to other applications that needed to be made has delayed more work on TRIPS. But we're back and ready to continue.

In the last post, we started to build out the trip.html template and it's corresponding controller. The dataService was updated with an abstraction that would allow a CFC method to be called and data to be passed.  This post will focus on retrieving that data from the dataService to the CFC method.

Before we get started, I thought it would be kind of cool to keep a count of the number of lines of code for the project.  I'm not sure if it will provide any insight, but it might be nice to compare the line count to the number of lines in the Flex application.  Rather than posting the counts on each blog post, I have created a separate post tracking the line count per post.

In review, let's take a look at the dataService code that's going to call the Coldfusion function to save the trip information.
 this.process = function(_method, _data){  
     var _params = {objectData: JSON.stringify(_data)}  
     return $http({  
       method: 'POST',  
       url: 'trips.cfc?method=' + _method,  
       headers: {  
         'Content-Type': undefined  
       },  
       data: _params  
     }).then(function successCallback(response){  
         console.log(response.data);  
         return response;  
       },  
       function errorCallback(response){  
         console.log('ruh-roh')  
       }  
     );  
   }  
The _method parameter is going to be the name of the CFC function, in this case saveTrip. The _data parameter is the trip object, initially returned by the getTrip CFC function and potentially modified in the trip.html.
 <cffunction name="saveTrip" returnformat="json" returntype="struct" access="remote">  
   <cfset _params = getHttpRequestData()>  
      <cfset _content = deserializeJSON(_params.content)>  
      <cfset _trip = deserializeJSON(_content.objectData)>  
   <cfreturn _trip>  
 </cffunction>  
The core of saveTrip is the CF getHttpRequestData() function. This function will return any information sent over from the $HTTP call. So let's take a look and see what the initial request data looks like.
 <cfset _params = getHttpRequestData()>  
The getHttpRequestData() function returns a structure with, in this case, four properties: content, headers, method, protocol. For saving data, the one we are interested in is the content property. But you can see it's not quite in the format we need. So let's deserializeJSON() the content property.
 <cfset _content = deserializeJSON(_params.content)>  
So now we have a structure with one property, objectData, which is in the content of the data parameter in the $http request. But the objectData value is still not how we need it to save our trip information. So we need to do one more deserializeJSON() to fully realize the trip data structure.
 <cfset _trip = deserializeJSON(_content.objectData)>  
Now we have a structure that we can very easily work with to save our trip data.  Stay tuned for Part 3 where we actually save the trip data to the database and continue building out the trip.html template.

Comments

Popular posts from this blog

The Conversion: MAIN.CFM

Within the current development pattern I have for our portal system, the main.cfm is the starting point for an application. For the most part, this is really boilerplate and serves to get the application off the ground. The way the portal works is that the user lands on the main menu page and provide with a menu of options. Each option is called a function and is assigned a unique id. When the user clicks on a menu option, the page is reloaded with the function id. The process checks to see if the user is actually allowed to have access to the function. It then accordingly looks up the path and displays the page via a . In the case of the TRIPS application, the included file is the main.cfm page for the application. So far the project looks like this: we have the folder structure defined with no files aside from the main.cfm. The main.cfm contains a few javascript includes, the overarching controller for the application as well as the route viewer. The next blog post will foc...

The Conversion: Lay of the Landing Page - Part 1

In the last post  the groundwork has been laid for real development to begin. The data service, router, and landing pages have been created and are ready for code. The last thing to add for this part of the process is the Coldfusion component. A data folder has been added to store any cfcs relevant to the TRIPS application. The first is to write the CFFUNCTION that will return the list of trips. My development pattern for creating CF functions is fairly routine.  First, decide on a name, parameters and return type.  Sometimes the naming of a function is the hardest part.  I've settled on actionDataObject.  So in this case, the function will be named: getTrips.    At moment, the landing controller (landing.js) is empty. angular.module('core').controller('LandingController',['$scope','dataService', function($scope,dataService){ }]); The basic task of this controller is getting the list of trips.  First is the establishment of an empty tr...

Dynamically Loading an AngularJS UI.Router

When starting out on my AngularJS journey, I couldn't get a good handle on the router native to the framework. So I adopted the use of the wonderful angular-ui / ui-router.  During the past few years of development, I've honed in (for better or worse) my paradigm for setting new applications and nearly every AngularJS app has a routes.js file. Without going into background, I wanted a way to load the ui-router dynamically. Typically, the routes gets defined in a .js file and typically looks something like this: angular.module('core').config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/landing/201820"); $stateProvider .state('landing', {url: "/landing/:term", templateUrl: "apps/noted/templates/landing.html"}) .state('uploadCalendar', {url: "/uploadCalendar", templateUrl: "apps/noted/templates/uploadCalendar.html"}) .state('noteTakers...