Brian Mains

Catch me on linked in at: http://linkedin.com/in/brianmains, or follow me on twitter at: @brianmains.

August 2009 - Posts

Facebook Connect JavaScript API

I recently submitted a Facebook development article to ASP.NET Pro magazine.  It was quite the challenge initially to get it started.  But once I got going (I think I'll blog on this later), I was off and running but there aren't a lot of examples on the WIKI.  I put a combination of items together in order to figure it all out.

First, the core content I used to extract user's information was the Facebook JavaScript API, available here: http://wiki.developers.facebook.com/index.php/JS_API_Index.  The core object in Facebook to extract data from its servers is the ApiClient object (http://wiki.developers.facebook.com/index.php/JS_API_T_FB.ApiClient).  Unfortunately, for most method calls, there isn't any documentation.  A few things to note:

  • If you google on these methods (like groups_get, friends_get, or photos_getAlbums), you're likely to come up with something.  Usually, it's PHP examples, but it's something you can go off of.
  • You can post in the forums, but in the questions I had, there really wasn't any movement.
  • If you see the method return FB.PendingResult, this is because it returns data asynch from the server.  In most cases that I saw, it fires a callback with the signature function(results, ex) { }.  This callback can be specified in the parameter list where the SequencerBase parameter is defined.
  • Speaking of SequencerBase, the WIKI has an example of how you can use a SequencerBase class to download all of the user data on one shot simultaneously.

Some other notes/general issues I found are:

I hope this helps, and more content will be coming.

TypeMock Isolation Members - CallOriginal

This post assumes you are familiar with TypeMock's Arrange-Act-Assert method of test creation.  If you are not, please read my overview at: http://dotnetslackers.com/articles/designpatterns/TypeMocks-Arrange-Act-Assert.aspx.

 When creating your fakes with TypeMock, you have to be careful which member your choose as the default mocking level.  For instance, when you create the following class:

var cls = Isolate.Fake.Instance<TestClass>();

The variable cls has a fake reference to our test class.  All calls to any method are mocked (no code actually runs for that method), unless you do:

Isolate.WhenCalled(() => cls.MyMethod()).CallOriginal();

You can also control the results through the other methods available from Isolate.WhenCalled, such as using WillReturn to return a pre-specified value.  That is out of scope, but a good subject for a future blog post.  Anyway, back to the subject, you may wonder why certain methods fail, especially if you use Isolate.Verify to verify method calls.  I had the same issue, and it turns out its because of the default behavior of the fake.  For instance, if I would have done:

var cls = Isolate.Fake.Instance<TestClass>(Members.CallOriginal);

The default behavior is to call the original instance of methods within the class, and not to mock their calls.  This was the solution to an issue was having; I had an internal collection of objects like:

private ACollection AList
{
    get
   {
       if (_aList == null)
             _aList = new ACollection();
       return _aList;
    }
}

Because I didn't do the following statement during the default level of mocking access:

Isolate.NonPublic.Property.WhenGetCalled(cls, "AList").CallOriginal();

AList was mocked in my test and my test failed.  Adding Members.CallOriginal caused AList original implementation to be called, and then the test succeeded.

Paging Table Columns Using JavaScript

I recently have been thinking about tabular displays and how to make them better.  For instance, suppose that your final output of an application looked like the following:

<table id="tbl">
 <thead>
  <tr>
   <th>One Header</th>
   <th>Two Header</th>
   <th>Three Header</th>
   <th>Four Header</th>
   <th>Five Header</th>
   <th>Six Header</th>
   <th>Seven Header</th>
   <th>Eight Header</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
  </tr>
  <tr>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
   <td>Value</td>
  </tr>
  .
  .
  .
  .

</table>

Imagine this is for a form of some sort.  Think in reverse of a GridView control in ASP.NET; the GridView control renders a dynamic number of rows; this example is more suited for an application you may build that is columns-based, say to render a comparison between products, or maybe the headers a representative of people, and the rows contains some attributes about them (name, height, weight, and other stats).

So, this example using JavaScript and JQuery is  meant to enable a new way of paging columns-based data; however, it could be adapted to page row-based data.  Now, if you have a lot of data in the column-based form, it will  force a horizontal scrollbar, something that is against standards in most organizations (and is not a preferred approach anyway unless culturally significant).  To offset this, the script I'm about to show you will show only 4 columns at a time, allowing the user to page left/right.  To do this, I will use a looping construct to loop through the columns and rows to change visibility.  The script looks like:

<script type="text/javascript">
 var leftColumn = 0;
 var columnCount = 4;

 $(document).ready(function() {
  var t = $("#tbl");
  $("#output").html(t.outerWidth().toString() + ", " + t.outerHeight().toString());
  
  refresh();
 });

 
 function refresh() {
  var table = $("#tbl")[0];
  var headerRow = tbl.getElementsByTagName("THEAD")[0].rows[0];
  var rightColumn = leftColumn + columnCount;
  
  if (leftColumn <= 0) leftColumn = 0;
  if (leftColumn >= headerRow.cells.length - 3) leftColumn--;
  
  for (var r = 0, rlen = table.rows.length; r < rlen; r++) {
   for (var c = 0, clen = headerRow.cells.length; c < clen; c++) {   
      table.rows[r].cellsCoffee.style.display = ((leftColumn <= c && c < rightColumn) ? "table-cell" : "none");
   }
  }
 }
</script>

To begin, to figure out which 4 columns to show is determined by the leftColumn variable; it stores the current column index of the far left visible column.  The column count stores the number of columns to display, so that is configurable and can be something other than 4 columns.  When the document loads (using JQuery's document ready event), the UI initializes to show the 4 columns.  The refresh method actually shifts the columns, and it does this using math.

 The THEAD definition is special, because that is the easy way to figure out how many columns their are; there isn't any explicit way to figure columns (unless a COLGROUP is specified); so the header easily figures out there are 8 columns available.  Two loops take place; first, it loops through each row to show/hide the appropriate cells, while the rest get hidden.  It iterates through the rows first, then the columns, and changes the display accordingly.

To page, I included two buttons that will page left/right.  You may have notice the if checkes in the previous JS code; it simply ensures the paging isn't out of the valid range of values.

<button id="navleft">Move Left</button>
<button id="navright">Move Right</button>

JQuery hooks up to the click event, and refreshes the UI after it increments or decrements the left column index.

$("#navleft").click(function() {
  leftColumn--;
  refresh();
 });
 
 $("#navright").click(function() {
  leftColumn++;
  refresh();
 });

And that is all that it takes to use JavaScript, and JQuery (even if I don't fully take advantage of it) to create a way to page columns of a table.  It works really well and is fast.