CF to .NET: request and session scopes

Coldfusion has a request and session scope and I was determined to find the same in .NET. After some googling I stumbled across this:

HttpContext.Current.Session["Username"] = username;

Using "HttpContext.Current.Session" and "HttpContext.Current.Request" I was able to start a session for use once they logged in. Also I could now store things the request scope which I don't really need because .NET's Viewbag handle most of what I needed for that. In the example above I am storing the username after a login into the session. I am sure there is a more proper way of doing it, but for basic concepts this worked.

Full Calendar JS

Using full calendar js I was able to make a timesheet app. The app involved dragging tasks from a left on to a day view of calendar. Simliar to this drag and drop events demo. I added trash can on the top of calendar to drag and drop events to be removed. Here is the js I used to make it happen. All of which is in document.ready. We will break down after this code snippet.

var loadTasks = function(){
      
 $('##external-events div.external-event').each(function() {
          
  var self = $(this);
  
  var eventObject = {
   title: $.trim(self.text())
   ,id: $.trim(self.data("taskid"))
   ,taskID:$.trim(self.data("taskid"))
  };
  
  self.data('eventObject', eventObject);
  
  self.draggable({
   zIndex: 999,
   revert: true, 
   revertDuration: 0
  });
 });

};

var saveEvent = function(taskID,orgStartObj,orgEndObj,newStartObj,newEndObj){
 
 var format = "yyyy-MM-dd HH:mm:ss";
 
 $.ajax({
  url:'/timesheet/saveEvent'
  ,type:'POST'
  ,data:{
   orginalStartTime:orgStartObj.toString(format)
   ,orginalEndTime:orgEndObj.toString(format)
   ,newStartTime:newStartObj.toString(format)
   ,newEndTime:newEndObj.toString(format)
   ,taskID:taskID
  }
  ,dataType:'json'
 });
 
};

//---Check if inside the trashcan div
var draggedOverTrashCan = function(draggedItem, dropArea) {    
 var itemOffset = draggedItem.offset;
 var trashCanOffset = $(dropArea).offset(); 

 itemOffset.right = $(draggedItem.helper).outerWidth() + itemOffset.left;
 itemOffset.bottom = $(draggedItem.helper).outerHeight() + itemOffset.top;
 
 trashCanOffset.right = $(dropArea).outerWidth() + trashCanOffset.left;
 trashCanOffset.bottom = $(dropArea).outerHeight() + trashCanOffset.top;
         
 // Compare
 if (itemOffset.right >= trashCanOffset.left
    && itemOffset.bottom >= trashCanOffset.top
    && itemOffset.top <= trashCanOffset.bottom
    && itemOffset.left <= trashCanOffset.right
 ){ 
     return true; 
 }else{
  return false;
 }
};


$('##calendar').fullCalendar({
 header: {left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'}
 , editable: true
 , firstHour: 6
 , slotMinutes: 15
 , defaultView: "agendaDay"
 , aspectRatio: "1.60"
 , year: #datePart("yyyy", now())#
 , month: #datePart("m", now())-1#
 , date: #datePart("d", now())#
 , events: #serializeJSON(viewBag.events)#
 , droppable: true
 , drop: function(date, allDay, jsEvent, ui) {   
  
 var originalEventObject = $(this).data('eventObject');
  var copiedEventObject = $.extend({}, originalEventObject);
  copiedEventObject.id = uid();
  copiedEventObject.start = date;
  copiedEventObject.end = new Date(date).hours().add(-1);
  copiedEventObject._end = new Date(date).hours().add(-1);
  copiedEventObject.allDay = allDay;

  $('##calendar').fullCalendar('renderEvent', copiedEventObject, true);
  
  saveEvent($(this).data("taskid"),'','',copiedEventObject.start,copiedEventObject.end,'');

  
 }
 , eventResize: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view){
  
  var newStart = event.start;
  var newEnd = event.end;
  var orgStart = new Date(newStart);
  var orgEnd = new Date(newEnd).addMinutes(minuteDelta * -1);
  
  saveEvent(event.taskID,orgStart,orgEnd,newStart,newEnd);
  
 }
 , eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ){
            
     var newStart = event.start;
  var newEnd = event.end;
  var orgStart = new Date(newStart).addDays(dayDelta * -1);
   orgStart.addMinutes(minuteDelta * -1);
  var orgEnd = new Date(newEnd).addDays(dayDelta * -1);
   orgEnd.addMinutes(minuteDelta * -1);
  
  saveEvent(event.taskID,orgStart,orgEnd,newStart,newEnd);
       
 }
 ,eventDragStop:function(event, jsEvent, ui, view){
  
  
  if (draggedOverTrashCan(ui, $('div##trash-can'))) {
           
       var format = "yyyy-MM-dd HH:mm:ss";
       
         $.ajax({
    url:'/timesheet/deleteEvent'
    ,type:'POST'
    ,data:{
     startTime:event.start.toString(format)
     ,endTime:event.end.toString(format)
     ,taskID:event.taskID
     ,userID:'#viewBag.userID#'
    }
    ,dataType:'json'
    ,success:function(){
     $("##calendar").fullCalendar('removeEvents', event._id);
    }
   });
   
         
     }     
 }
});

//--- add a trash can div to the top of the calendar    
$('##calendar').children('.fc-content').prepend('<div id="trash-can" style="border: 2px solid ##C1454B;padding:15px 100px 15px;border-radius:5px;background:##DD9094;text-align:center;">Drag Events Here To Remove</div>');

//---make the tasks available.
loadTasks();

loadTasks() - is used to make the tasks in the left nav drag and droppable for the calendar. The task are created in ColdFusion like this.

<div id="external-events">
 <ul>
  <cfloop query="viewBag.tasks">
   <li>
    <div class="external-event ui-draggable" data-taskID="#viewBag.tasks.taskID#">
     <div><strong>###viewBag.tasks.taskID# #viewBag.tasks.name#</strong></div>
     <div><strong>Status: </strong>#viewBag.tasks.taskStatusName#</div>
    </div>
   </li>
  </cfloop>
 </ul>
</div>

Then document.ready I do this:

var loadTasks = function(){
 
 //--- loop through each draggable task   
 $('##external-events div.external-event').each(function() {
          
  var self = $(this);
  
  //---set the event Object's title which will be seen on the calendar, set the id so that each event on the calendar is unique, and set any other values you want to be carried along with that event. in the case below taskID is an extra value I want. It will be used later to saveACalendarEvent.
  var eventObject = {
   title: $.trim(self.text())
   ,id: $.trim(self.data("taskid"))
   ,taskID:$.trim(self.data("taskid"))
  };
  
  self.data('eventObject', eventObject);
  
  //---make the task draggable
  self.draggable({
   zIndex: 999,
   revert: true, 
   revertDuration: 0
  });
 });

};

saveEvent() - is used to make an ajax call with the taskID, orginal start time, orginal end time, new start time, and new end time. I send the orginal and new dates so if I am resizing a task or moving the task on calendar I want to make sure I delete the old record.

var saveEvent = function(taskID,orgStartObj,orgEndObj,newStartObj,newEndObj){
 
 var format = "yyyy-MM-dd HH:mm:ss";
 
 $.ajax({
  url:'/timesheet/saveEvent'
  ,type:'POST'
  ,data:{
   orginalStartTime:orgStartObj.toString(format)
   ,orginalEndTime:orgEndObj.toString(format)
   ,newStartTime:newStartObj.toString(format)
   ,newEndTime:newEndObj.toString(format)
   ,taskID:taskID
  }
  ,dataType:'json'
 });
 
};

draggedOverTrashCan() - checks to see if the user drags a calendar event over the trash can. The trash can code gets prepended later in code.

var draggedOverTrashCan = function(draggedItem, dropArea) {    
 var itemOffset = draggedItem.offset;
 var trashCanOffset = $(dropArea).offset(); 

 itemOffset.right = $(draggedItem.helper).outerWidth() + itemOffset.left;
 itemOffset.bottom = $(draggedItem.helper).outerHeight() + itemOffset.top;
 
 trashCanOffset.right = $(dropArea).outerWidth() + trashCanOffset.left;
 trashCanOffset.bottom = $(dropArea).outerHeight() + trashCanOffset.top;
         
 // Compare
 if (itemOffset.right >= trashCanOffset.left
    && itemOffset.bottom >= trashCanOffset.top
    && itemOffset.top <= trashCanOffset.bottom
    && itemOffset.left <= trashCanOffset.right
 ){ 
     return true; 
 }else{
  return false;
 }
};

invoking the full calendar js
drop() - handles dragging new events from off the calendar onto the calendar.

eventResize(),eventDrop() - handles just that. Full calendar give you back the deltas from where the event used to be on the calendar. With those we can create the orginal date.

eventDragStop() - used when event has stopped being dragged. For my use case, I want to know if they drug the task over the tash can so I can do an ajax call and delete the task.

$('##calendar').fullCalendar({
 header: {left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'}
 , editable: true
 , firstHour: 6
 , slotMinutes: 15
 , defaultView: "agendaDay"
 , aspectRatio: "1.60"
 , year: #datePart("yyyy", now())#
 , month: #datePart("m", now())-1#
 , date: #datePart("d", now())#
 , events: #serializeJSON(viewBag.events)#
 , droppable: true
 , drop: function(date, allDay, jsEvent, ui) {   
  
  var originalEventObject = $(this).data('eventObject');
  var copiedEventObject = $.extend({}, originalEventObject);
  copiedEventObject.start = date;
  copiedEventObject.end = new Date(date).hours().add(-1);
  copiedEventObject._end = new Date(date).hours().add(-1);
  copiedEventObject.allDay = allDay;

  $('##calendar').fullCalendar('renderEvent', copiedEventObject, true);
  
  saveEvent($(this).data("taskid"),'','',copiedEventObject.start,copiedEventObject.end,'');

  
 }
 , eventResize: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view){
  
  var newStart = event.start;
  var newEnd = event.end;
  var orgStart = new Date(newStart);
  var orgEnd = new Date(newEnd).addMinutes(minuteDelta * -1);
  
  saveEvent(event.taskID,orgStart,orgEnd,newStart,newEnd);
  
 }
 , eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ){
            
     var newStart = event.start;
  var newEnd = event.end;
  var orgStart = new Date(newStart).addDays(dayDelta * -1);
   orgStart.addMinutes(minuteDelta * -1);
  var orgEnd = new Date(newEnd).addDays(dayDelta * -1);
   orgEnd.addMinutes(minuteDelta * -1);
  
  saveEvent(event.taskID,orgStart,orgEnd,newStart,newEnd);
       
 }
 ,eventDragStop:function(event, jsEvent, ui, view){
  
  if (draggedOverTrashCan(ui, $('div##trash-can'))) {
           
       var format = "yyyy-MM-dd HH:mm:ss";
       
         $.ajax({
    url:'/timesheet/deleteEvent'
    ,type:'POST'
    ,data:{
     startTime:event.start.toString(format)
     ,endTime:event.end.toString(format)
     ,taskID:event.taskID
     ,userID:'#viewBag.userID#'
    }
    ,dataType:'json'
    ,success:function(){
     $("##calendar").fullCalendar('removeEvents', event._id);
    }
   });
   
         
     }     
 }
});

This piece prepends a div to the top of the calendar to be used as a trash can.

$('##calendar').children('.fc-content').prepend('<div id="trash-can" style="border: 2px solid ##C1454B;padding:15px 100px 15px;border-radius:5px;background:##DD9094;text-align:center;">Drag Events Here To Remove</div>');

Railo Annotations

I've spent some time using Railo Coldfusion and recently purchased a home. I haven't had much time to write so I am catching up now.

I got a message that Railo is finally going to support annotations. Why is this a good thing? Because I can now use ColdMVC.

cfsavecontent vs CSS when wanting to add styles.

I ran into some confrontation when I decided to use a cfsavecontent and write some styles in <style/> tags and do a <cfhtmlhead/>. Another developer prefers everything in a .css file. While, yes all styles are in one place in the app, unneeded styles are being loaded on pages that don't need them.

I prefer the other route of doing styles in style tags on the page I am working in and then adding them to the head section. Don't get me wrong I still have some global styles set in .css files. Most of the pages I am working on are all custom interfaces and the .css file(s) would be unnecessary large between pages. Not to mention lots and/or large .css files bring down browser load time.

Thoughts?

Writing text over an image

I know alot of people have already done this, but I thought I would share writing text over image as well. Only because the first time you do it, it's really cool.

Read in the image

 <cfimage name = "local.image" action="read" source="test.jpg"/>

Turn on anti-aliasing ("softens jagged edges")

<cfset ImageSetAntiAliasing(local.image)/>

Set the text color

<cfset ImageSetDrawingColor(local.image, "000000")/>

Set extra attributes

<cfset local.attrs = {
    Font = 'Arial',
    Size = 36,
    Style = 'bold'
   }/>

Draw over the image (image,text,x-position,y-position,attributes)

<cfset ImageDrawText(local.image, "Hello World!", 10, 10, local.attrs)/>

HQL vs. SQL

I've been playing with HQL for awhile now and want to share my thoughts of it against SQL. Some developers are hesitant to switch to HQL because of the querying. I don't blame them. Writing HQL can be tougher than SQL. After fighting threw some HQL queries I have found that SQL still has its place in an HQL application. Here are some of my findings:

1. List pages and aggregates are faster and easier to write in SQL. Most of the time the data points that list pages and aggregates are going to be displayed are already hashed out and don't need to be changed much.

2. HQL is great for getting and setting simple data quickly. SQL takes too much energy and time to insert or get a piece of data. The SQL queries you write are not going to be flexible enough for the new fields people are going to request.

3. Some routines are more efficient to be ran in SQL. HQL can be slow and it brings back too much data sometimes.

With the above findings I have organized my code to do saves and single entity gets with HQL and lists and routines with SQL. With this combo I have found it to be quick to get and set the data I need. It does take knowledge of both HQL and SQL to do this, but the languages are very similar and the learner curve isn't too bad. Here is an earlier post about the similarities. I hope this brings down the hesitation for the SQL people to try and use HQL for what it's good for.

I would like to hear peoples thoughts on this matter. It seems to come up a lot in HQL conversations, so comment away.

ColdMVC: Quick start now available

After a long wait, ColdMVC finally has a quick start guide. Check it out here: http://www.coldmvc.com/quickstart.

ColdMVC: get an object's parents

Awhile back I posted on flattening an array of objects with Parent-Child relationship (link) and have been using it alot. But one issue I had with it was when I was looping through the array of objects I didn't know who my parents were for the current object I was working with. I already knew how deep thanks to the treeDepth property. I made this function to recursively go up the tree of objects and bring back an array of parent objects for an object.

<cffunction name="getObjectsParents" access="public" output="false" returntype="array">
 <cfargument name="object" required="true"/>
 <cfargument name="result" required="false" default="#[]#"/>
  
 <cfif isObject(arguments.object.parent())>
  <cfset arrayPrepend(arguments.result,arguments.object.parent())/>
  <cfreturn getObjectsParents(arguments.object.parent(),arguments.result)/>
 <cfelse>
  <cfreturn arguments.result/>
 </cfif>

</cffunction>

ColdMVC: Number Tag

I've playing around with mobile web apps lately. ColdMVC has been a big help in getting them done quickly and "in the cloud".

I've been looking for a house since the market is so good right now and one thing I noticed when searching for houses online is the when you type in a price range only the keypad shows up on my phone. No letters. Just numbers. It's really nice. I viewed the source when I got back to my laptop and found out they were doing it with <input type="number" >. I decided to hack a ColdMVC tag together to hanlde this.

Here is how you call the tag...

<c:number name="miles" value="#service.miles()#">

Here is my hacked in logic...

<cfparam name="attributes.class" default="input"/>
<cfparam name="attributes.value" default=""/>
<cfif thisTag.executionMode eq "end">
 <cfoutput>
  <cfsavecontent variable="attributes.field">
   <input type="number" name="#attributes.name#" title="#attributes.name#" value="#attributes.value#" class="#attributes.class#"/>
  </cfsavecontent>
 </cfoutput>
 
 <cfset thisTag.generatedContent = coldmvc.form.field(argumentCollection=attributes) />
</cfif>

The above logic doesn't supporting binding, but it works to use. It would be cool if this tag was managed my ColdMVC HTMLHelper.cfc then I would have to worry about the attributes.

ColdMVC: Binding

I really like the binding option in the form tag of ColdMVC. It takes an object from the param scope, prefixes all the elements within it, with model's name (ex. user.first_name), and sets the value from the object. It's very handy. Here is an example of what it currently does:

<c:form controller="user" action="save" bind="user">
 <c:hidden name="id"/>
 
 <c:input name="first_name"/>
 <c:input name="last_name"/>
 
 <c:buttons>
  <c:submit label="save"/>
 </c:buttons>

</c:form>

If you wanted to bind the form to 2 or more objects it would be cool if you could use a bind tag and group a set of elements within a form.

<c:form controller="student" action="save">

 <c:bind key="user">
  <c:hidden name="id"/>
  
  <c:input name="first_name"/>
  <c:input name="last_name"/>
 </c:bind>
 
 <c:bind key="student">
  
  <c:input name="student_number"/>
 
 </c:bind>
 
 <c:buttons>
  <c:submit label="save"/>
 </c:buttons>

</c:form>

Or even better on the tag itself. (I think this available already, but I am not sure).

<c:form controller="student" action="save">

 <c:hidden name="id" bind="user"/>
 
 <c:input name="first_name" bind="user"/>
 <c:input name="last_name" bind="user"/>
 <c:input name="student_number" bind="student"/>

 <c:buttons>
  <c:submit label="save"/>
 </c:buttons>

</c:form>

Type Ahead Searches with jQuery

I was working on a mobile app and wanted to try a type ahead search to easy the user typing on a phone keyboard. I was able to make the ajax calls using jQuery to get the data, but I ran into some race conditions. As the user typed I made an ajax call but sometimes the first ajax call would take longer than the second. Thus updating the results with the first ajax calls data, because it finished later.

Example:
I starting typing "b". Then it would fire off an ajax call to get all the data with the letter "b".

Next I typed "a". So my search input box looked like this "ba". And firing off another ajax call to get all the data with the letters "ba".

I didn't know this but you can put the ajax request in a variable and kill it. Check it out.

<script type="text/javascript">
       var ajaxCall;
       typeAheadSearch = function(){
               if(ajaxCall != undefined){
                       ajaxCall.abort();
               }
               
               ajaxCall = jQuery.ajax({
                       url: "http://www.somedomain.com/typeAheadSearch/_results.cfm",
                       data:{search:jQuery("##search").val()},
                       success:function(data){
                               jQuery("##results").html(data);
                       }
               });
       };
</script>

I started a variable called "ajaxCall" to store the request in. The first thing I do in the typeAheadSearch() is kill the current request by calling abort(). The next thing that I didn't know you could is that jQuery's ajax() returns the request. This is so handy.

CF9 computed properties

I wanted to make a computed property in CF9 just like you can on a sql table (computed column). Dan Vega had a nice how-to awhile back but it didn't show a complex example.

In my project I had a "project" class that had many ratings on it (Example: rating of 1-5, 1 being bad and 5 being great) and I wanted to have a computed property that gave me the average rating of a project. Here is what my hib file looks like for the "project" class.

<class entity-name="Project" lazy="true" name="cfc:myproject.app.model.Project" table="`Project`">
        <id name="id" type="int">
                <column length="10" name="ID" />
         <generator class="identity" />
        </id>
        <property name="name" type="string">
                <column name="Name" sql-type="varchar(max)" />
        </property>
  <property name="description" type="string">
        <column name="Description" sql-type="varchar(max)" />
        </property>
        <property type="float" 
                formula="(select (sum(r.rank)*100.0) / (count(pr.id) *100.0) from project as p inner join project_rating as pr on pr.project_id = p.id inner join rating as r on r.id = pr.rating_id where pr.project_id = id)" 
                name="rating"/>  
</class>

Some key things to point out:
1. The formula is a sql query not a hql query.
2. I wrapped my entire statement in (), don't know why but it worked.
3. You always start the sql statement with the table of the class you are working on. Reason being is when you get to the "where" clause notice this piece "pr.project_id = id". "id" is not aliased because it grabs the current id of the object that is running the formula against. This is how the query will only run for single object and not all of the other db records in the project table.
4. Alias every thing except the "where id" part.

I struggled through these above. Hope this helps someone.

ColdMVC: AJAX call

Trying to make ajax calls with ColdMVC was a little difficult for me because I struggle with routes, but I found a way. Here is what I did to make an AJAX call with ColdMVC.

First I created a function on a Controller so I can return "hi" back from the AJAX call. Notice I have @view json.cfm above the function. Since ColdMVC uses routes I need to send the data to a view and cfoutput it on the page.

TestController

/**
 * @accessors true
 * @extends coldmvc.controller
 */
component {

 /**
  @view json.cfm
 */
 function testMethod(){
  params.json = "hi";
 }

}

Here is json.cfm. All that I do with it is output the variable "json".

json.cfm

 <cfoutput>#params.json#</cfoutput>

And lastly I preform my AJAX call using jQuery. In the url setting of jQuery.ajax() I just link to the controller. In my case, my controller's name is TestController, so my route with just be "test" and then I can change out the method. In my case I am calling the "testMethod" on the controller.

ajaxCall = function(){
  
 jQuery.ajax({
  url:"#coldmvc.link.to('/test')#/test?returnformat=json",
  type:"GET",
  success:function(data){
   jQuery("body").html(data);
  }
 });
};

If you want to return json back just go to json.cfm and wrap params.json in SerializeJSON(). Then in your ajax call, do jQuery.parseJSON(). This is the only way I can think of right now to make an ajax call with ColdMVC, if there are any other techniques I would be more then happy to listen.

CF9 hibernate file includes.

This was so cool I had to repost it. After you've defined a few hibernate.hbmxml files it gets annoying to have type the same properties on every class. My fingers were getting sore to complain a little. After a reference shown to me by Tony Nelson, Mark Mandal had a great post on "includes in the hibernate file". Check it out.

If you notice in the hibernate.hbmxml below there is a line that says "&common;".

hibernate.hbmxml

<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
                                   "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"
[ <!ENTITY common SYSTEM "common.hbm.xml"> ]
>
<hibernate-mapping>
 
 <class entity-name="User" lazy="true" name="cfc:beforeandafter.app.model.User" table="`User`">
        &common;
  <property name="firstName" type="string">
       <column name="First_Name" length="200" />
  </property>
  <property name="lastName" type="string">
       <column name="Last_Name" length="200" />
  </property>
  <property name="emailAddress" type="string">
       <column name="Email_Address" length="200" />
  </property>
  <property name="password" type="string">
       <column name="Password" length="200" />
  </property>
  <bag name="projects">
   <key column="User_ID" />
   <one-to-many class="cfc:beforeandafter.app.model.Project" />
  </bag>
  <bag name="projectRatings">
   <key column="User_ID" />
   <one-to-many class="cfc:beforeandafter.app.model.ProjectRating" />
  </bag>
 </class>
</hibernate-mapping>

&common; points to file called common.hbm.xml. Within common.hbm.xml file I defined all my similiar properties and just include it on all my classes.

common.hbm.xml

<id name="id" type="int">
 <column length="10" name="ID" />
 <generator class="identity" />
</id>
<property name="isDeleted" type="boolean">
 <column name="isDeleted" />
</property>
<property name="createdBy" type="int">
 <column length="10" name="Created_By" />
</property>
<property name="createdOn" type="timestamp">
  <column name="Created_On" />
</property>
<property name="updatedBy" type="int">
  <column length="10" name="Modified_By" />
</property>
<property name="updatedOn" type="timestamp">
  <column name="Modified_On" />
</property>

Make sure your include file ends in .xml and not .hbmxml otherwise it won't work. Made my life a ton a easier. Thanks Mark and Tony for sharing this.

ColdMVC: Plugging in fckeditor

I am working on a CMS app and I wanted the fckeditor in my app, while using ColdMVC. Here's what I did to get it in my app.

I downloaded the fckeditor and put it in the public folder, like below...

app
>public
>>plugins
>>>fckeditor

Next, on a custom helper called "util.cfc", I added a function called editor().
1. Create a fckeditor bean.
2. Set the properties of the fckeditor. Specifically the basepath is really important. I used $.config.get('assetPath') to get to the directory where the fckeditor is located.
3. Lastly, I wrap the fckeditor in ColdMVC's field() so it looks like the other fields.

 <cffunction name="editor" access="public" output="false" returntype="string">
  <cfargument name="name" required="true"/>
  <cfargument name="value" required="false" default=""/>
  <cfargument name="width" required="false" default="100%"/>
  <cfargument name="height" required="false" default="300px"/>
  
  <cfset local.bean = application.coldmvc.beanFactory.getBean("fckeditor")/>
  
  <cfset local.bean.basePath = "#$.config.get('assetPath')#plugins/fckeditor/"/>
  <cfset local.bean.instanceName = arguments.name/>
  <cfset local.bean.value = arguments.value/>
  <cfset local.bean.width = arguments.width/>
  <cfset local.bean.height = arguments.height/>
  
  <cfif not StructKeyExists(arguments,"label")>
   <cfset arguments.label = $.string.humanize(arguments.name)/>
  </cfif>
  
  <cfoutput>
   <cfsavecontent variable="local.field">
    #local.bean.create()#
   </cfsavecontent>
  </cfoutput>
  
  <cfreturn $.form.field(label=arguments.label,field=trim(local.field))/>
  
 </cffunction>

Finally on my view, I call the helper function editor() and pass in my value. The use case below is for the editing a layout record for a cms app.

 <cfoutput>
  <c:form action="save" bind="layout">
   <c:hidden name="id" value="#layout.id()#" />
   <c:input name="name" value="#layout.name()#" />

   #$.util.editor(label="Layout",name="layout.layout",value=layout.layout())#

   <c:submit name="save" />
  </c:form>
 </cfoutput>

One thing to note is that if you want to bind the fckeditor textarea to an object, so it can be used in ColdMVC's populate() for a save, you will need to prefix your instanceName in the fckeditor. I do this by wrapping the fckeditor in a helper function and use the "name" argument like this...

 <--- on my view I put in "layout.layout" as the name--->
 #$.util.editor(label="Layout",name="layout.layout",value=layout.layout())#

 <--- inside the editor()--->
 <cfset local.bean.instanceName = arguments.name/>

ColdMVC: Deploying my first app.

I just wanted to share some things I struggled with when deploying my first ColdMVC app.

1. Deploying the code to the server.
My web root on the hosted server looks like this:

->myApp
->coldMVC
->hyrule

2. Make sure the config.ini is setup correctly.
config.ini file
[default]
controller=route
action=render

[development]
development=true

[production]
datasource=myDataSourceName
development=false
sesURLs=true
urlPath=
assetPath=http://www.myDomain.com/myApp/public/
tagPrefix=c

In the block [production] you will see that sesURLs=true. This will get rid of /index.cfm on the tail of url. Example www.myDomain.com/public/

Next, I changed my urlPath to nothing because I want urls to not have the public in front of them. Example www.myDomain.com/

Finally, Since my urlPath doesn't point to the public folder any more all my assets ( css, js..etc) will be broken. So I point my assets back to the public folder. Examples http://www.myDomain.com/myApp/public/

Note: If you haven't already, make sure you create a default controller and action to hit. This will be excuted if somebody hits your base url. Example www.myDomain.com

3. Use apache or isapi rewrite rules to make the url prettier.
With out the /public/index.cfm at the end of url the app can't do routes. In order to solve this I had to make isapi rewrite rules to point anything after www.myDomain.com to the http://www.myDomain.com/myApp/public/index.cfm files so routes would work again.
.htaccess file
RewriteEngine on

#---redirect actions for www.myDomain.com
RewriteCond %{HTTP_HOST} ^www.myDomain.com [QSA]
RewriteCond %{SCRIPT_NAME} ^/index.cfm$
RewriteRule ^(.*)$ http://www.myDomain.com/myApp/public/index.cfm/%{REQUEST_URI} [QSA]

#---redirect assets for www.myDomain.com
RewriteCond %{HTTP_HOST} ^www.myDomain.com [QSA]
RewriteCond %{SCRIPT_NAME} !^/index.cfm$
RewriteCond %{SCRIPT_NAME} !(css|js|images)
RewriteCond %{SCRIPT_NAME} !-f
RewriteCond %{SCRIPT_NAME} !-d
RewriteRule ^(.*)$ http://www.myDomain.com/myApp/public/index.cfm/%{REQUEST_URI} [QSA,L]

4. Make sure the production environment.txt has the production text in it.
Since my app's config.ini file has block called [production] in it the environment.txt on the hosted server needs to have the text "production" in it.

5. Remember to create a datasource.
If the datasource name is not the same as your app folder name you need to add the datasource name in config.ini
[production]
datasource=myDataSourceName

Other than the isapi rewrite rules, it was my first time writing them, deploying my first ColdMVC app went well.

ColdMVC: Basic CMS app request handling

I wanted to try make a cms app with ColdMVC so I took a stab at it. This is my first draft at a cms app. Below is a light weight request handler for cms views. We will break it down in a sec.

/**
 * @accessors true
 * @extends coldmvc.Controller
 * @controller cmsview
 * @layout cms_public
 */
component {

 property _CMSPage;

 /**
 * @events requestStart
 */
 function requestStart(){

  var page = _CMSPage.findByAddress(getPath());

  /*---check if the path is a cms page---*/
  if(len(page.id()) gt 0){
   $.event.action("render");
   $.event.controller("cmsView");
   $.event.view("cms/view/index.cfm");
  }
  
 }
 
 function render(){
  
  var path = getPath();
  var actual_path = expandPath("/app/views/#path#");

  /*---handles pages that end in a slash. Ex: www.mydomain.com/public/index.cfm/products/---*/
  if(right(path,1) eq "/"){
   actual_path = actual_path & "index.cfm";
   path = path & "index.cfm";
  }

  /*---if the file exists render it, else run the page's html through the cms_public layout.---*/
  if(fileExists(actual_path)){

   $.event.view(path);
  
  }else{
  
   params.page = _CMSPage.findByAddress(getPath());
   
   if(len(params.page.id()) eq 0){
    
    render404();
   
   }
  
  }

 }
 
 /**
 * @events invalidController, invalidAction
 */
 function render404(){
 
  params.page = _CMSPage.findByAddress("404");
 
  if(len(params.page.id()) eq 0){
   params.page._set("html","Sorry. We couldn't find the page you were looking for.");
  }
  
  $.event.controller("cmsView");
  $.event.action("render404");
  $.event.view("cms/view/index.cfm");
  
 }
 
 function getPath(){
 
  var path = $.event.path();
  
  if(left(path,1) eq "/"){
   path = replace(path,"/","");
  }
 
  return path;
  
 }

}

When a request begins I use the event "requestStart" to check if it's a cms page. This happens here...

 /**
 * @events requestStart
 */
 function requestStart(){

  var page = _CMSPage.findByAddress(getPath());

  /*---check if the path is a cms page---*/
  if(len(page.id()) gt 0){
   $.event.action("render");
   $.event.controller("cmsView");
   $.event.view("cms/view/index.cfm");
  }
  
 }

As you can see above we are checking if getPath() is a cms page. getPath() gets the tail end of the url. Example: If the url read "www.mydomain.com/public/index.cfm/contact_us/", getPath() would return "contact_us/". This happens here...

 function getPath(){
 
  var path = $.event.path();
  
  if(left(path,1) eq "/"){
   path = replace(path,"/","");
  }
 
  return path;
  
 }

If a cms page isn't found the request will run as usual. If a cms page is found it will go to render(). render() does a lot of checks.

First, we check if there is no file extension, example ".cfm", on path. If there is none I put in an "index.cfm" at the end. I do this for the next check which checks to see if the file exists.

Second, next we check if the file path actually exists in the app/views/ directory. If it does I render it. I do this because some pages might need to be coded where as other pages will be setup with a "web page generater" tool.

Third, if the file doesn't exists I can assume it's a page that was created by web page generator tool.

Lastly, I check if the page doesn't exists. I do this because my config.ini uses render() as defaults.
[default]
controller=cmsView
action=render

If someone requests "www.mydomain.com/public/index.cfm" the path won't exist. Therefore we excute the 404 handler, which is called render404().

This happens here...

 function render(){
  
  var path = getPath(); 
  var actual_path = expandPath("/app/views/#path#");

  /*---handles pages that end in a slash. Ex: www.mydomain.com/public/index.cfm/products/---*/
  if(right(path,1) eq "/"){
   actual_path = actual_path & "index.cfm";
   path = path & "index.cfm";
  }

  /*---if the file exists render it, else run the page's html through the cms_public layout.---*/
  if(fileExists(actual_path)){

   $.event.view(path);
  
  }else{
  
   params.page = _CMSPage.findByAddress(getPath());
   
   if(len(params.page.id()) eq 0){
    
    render404();
   
   }
  
  }

 }

If a page doesn't exists in the cms pages, an invalid controller or action is found I render404() is executed. I first check to see if a 404 page was created in the cms pages else I render my own html message.

This happens here...

 /**
 * @events invalidController, invalidAction
 */
 function render404(){
 
  params.page = _CMSPage.findByAddress("404");
 
  if(len(params.page.id()) eq 0){
   params.page._set("html","Sorry. We couldn't find the page you were looking for.");
  }
  
  $.event.controller("cmsView");
  $.event.action("render404");
  $.event.view("cms/view/index.cfm");
  
 }

As I have been going through these functions I didn't explain where the pages are getting renderer. If you noticed at the top of first block of code there was an annotation @layout cms_public. All cms pages, whether they are coded up or database driven, run through the layout cms_public.cfm. Here's what it looks like...

<cfoutput>
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us" xmlns="http://www.w3.org/1999/xhtml">

<cfif structKeyExists(params,"page")>
 #page.html()#
<cfelse>
 #render()#
</cfif>

</html>
</cfoutput>

All database driven pages run through a view in "views/cms/view/index.cfm" which looks like this...

 <cfoutput>#page.html()#</cfoutput>

Thoughts on what I have so far?

Declaring a variable with same name as a column in cfloop

I have a query with a column name json in it, which may or maynot contain a json string. If it does contain json I want to deserialize it, put it into an array loop, and output the results. I want to use the same in a variable as the column coming from the query because it reads good. When I did this I noticed that you can't declare a variable with the same name...even if you prefix the query column.

Here's is my test case. We will break it down in a sec.

<cfset query = queryNew("id,json")/>

<cfset queryAddRow(query)/>
<cfset querySetCell(query,"id","1")/>
<cfset querySetCell(query,"json","")/>

<cfset array = [{id=1,name="Joe"},{id=2,name="Tony"},{id=3,name="Ryan"}]/>

<cfset queryAddRow(query)/>
<cfset querySetCell(query,"id","2")/>
<cfset querySetCell(query,"json",serializeJSON(array))/>

<cfloop query="query">

 <cfset json = []/>
 
 <cfif len(query.json) gt 0>
  <cfset json = deserializeJSON(query.json)/>
 </cfif>
 
 <cfloop from="1" to="#arrayLen(json)#" index="i">
  #i.name#
 </cfloop>

</cfloop>

The above test case will error out. Because you can't loop the following because ColdFusion thinks that variable "json" is a string, even though I declared it as an array.

<cfloop from="1" to="#arrayLen(json)#" index="i">

First we make a query with a json string in it

<cfset query = queryNew("id,json")/>

<cfset queryAddRow(query)/>
<cfset querySetCell(query,"id","1")/>
<cfset querySetCell(query,"json","")/>

<cfset array = [{id=1,name="Joe"},{id=2,name="Tony"},{id=3,name="Ryan"}]/>

<cfset queryAddRow(query)/>
<cfset querySetCell(query,"id","2")/>
<cfset querySetCell(query,"json",serializeJSON(array))/>

Next we loop the query and check if there is a json string in the query column "JSON". I started an array with the same name as query column json. I did this so if there isn't any json after we deserialize the json it won't error when we try to loop the array.

<cfset json = []/>
 
<cfif len(json) gt 0>
 <cfset json = deserializeJSON(query.json)/>
</cfif>

Lastly I try to loop the array "json" and output the data, but it errors out because it still is looking at the loop variable "json" not the variable I declared "json". Yes, I can solve this problem easily but changing my declared variable from "json" to "array" or something like that, but I wanted to be clear what I was loop...and I just wanted to use the variable name "json".

ColdMVC: Flatten an array of objects with children.

In record based systems "non object based" if you wanted to store a parent/child relationship you usually stored a parent_id on the same table.

Example:

CMS example showing a page table where a page can have many pages underneath it.

Page table.
ID,Name,Address,Parent_ID
1,Products,products/,null
2,Tiles,products/tiles/,1

Then in order to simulate an object based system, you usually loop the query and put the records in structs of structs.

Example.

result = {
id="1",
name="Products",
address="products/",
children=[
{
id="1",
name="Products",
address="products/",
children=[]
}
]
}

Notice there is children an array.

Using ColdMVC we actually start with "struct of structs" or object based, instead of starting with a query. So we need to take the objects array, we are using array of objects because that is what is return from an hql query, and pull out the children and put them in the array, thus flattening the tree.

To do this I run it through a helper function I made below.

<cffunction name="flattenArrayTree" access="public" output="false" returntype="array"> 
  <cfargument name="array" required="true"/> 
  <cfargument name="result" required="false" default="#[]#"/> 
  <cfargument name="treeDepth" required="false" default="0"/> 
  <cfargument name="childrenPropertyName" required="false" default="children" hint="A property with an array of child objects."/> 

  <cfset var local = {}/> 
  <cfset var i = ""/> 

  <cfloop from="1" to="#arrayLen(arguments.array)#" index="i"> 
  
   <cfset local.object = arguments.array[i]/> 
   
   <cfset local.object.setTreeDepth(arguments.treeDepth)/> 
   
   <cfset arrayAppend(arguments.result,local.object)> 
   
   < !---make sure the "children" property exists is in the object---> 
   <cfif not structKeyExists(local.object,"set"&arguments.childrenPropertyName)> 
   
    <cfthrow detail="The argument childrenPropertyName which is currently #arguments.childrenPropertyName# does not exist as a property in the object"/> 
   
   < /cfif> 

   <cfif arrayLen(local.object._get(arguments.childrenPropertyName)) gt 0> 
   
    <cfset arguments.treeDepth++/> 
    
    <cfset arguments.result = flattenArrayTree(local.object._get(arguments.childrenPropertyName),arguments.result,arguments.treeDepth)/> 
    
    <cfset arguments.treeDepth--/> 
    
   < /cfif> 

  < /cfloop> 
  
  <cfreturn arguments.result/> 

 < /cffunction> 

You will notice I add a property called "treeDepth". In order to use the function you need to add a property to the model cfc called "treeDepth". Don't worry about it being added to db, if it's not mapped in hibernate file it won't be added to the db. I use the treeDepth property to know how far in a child object is. Technically...you don't need this, but I find a very handy.

CF9 ormsetting dialect

I was just wondering why you need to specify a dialect in ORM, if you define this in your datasource?

Example:
Application.cfc
this.ormSettings = { datasource="jbankenBlogspot",dialect="MySQLwithInnoDB" };

I shouldn't have to specify dialect="MySQLwithInnoDB" if I did it already in my datasource. Maybe I am missing something here.

The real hard part is that hibernate was throwing an error that was the same as if you had a bad path to your entity cfc.