Easily Generate Microsoft Office Files From C#

Wednesday, July 30, 2014 by K. Scott Allen
9 comments

It was over a decade ago when I was first asked to generate Microsoft Office files from a web application. In those days there weren’t many options available to create Office files, but for small applications it was possible to automate Office programs on the server with COM. Since Office wasn’t designed to run on a server, the automation approach always felt like climbing a frozen waterfall. From a support page:

Microsoft does not currently recommend, and does not support, automation of Microsoft Office applications from any unattended, non-interactive client application or component … because Office may exhibit unstable behavior and/or deadlock when Office is run in this environment.

These days, Office files are no longer in a proprietary binary format, and are we can create the files directly without using COM automation. A .docx Word file, for example, is a collection of XML documents zipped into a single file. The official name of the format is Open XML.

There is an SDK to help with reading and writing OpenXML, and a Productivity Tool that can generate C# code for a given file. All you need to do is load a document, presentation, or workbook into the tool and press the “Reflect Code” button.

 

Document Reflector

The downside to this tool is that even a simple document will generate 4,000 lines of code. Another downside is that the generated code assumes it will write directly to the file system, however it is easy to pass in an abstract Stream object instead.

So while this code isn’t perfect, the code does produce valid document and  is useful for figuring out how the SDK classes work together. It’s also not difficult to rework the logic so the class functions as a “view”. You can pass in a model object and have the code dynamically generate a document by replacing hard coded content inside with data from the model.

Debugging AngularJS In The Console

Tuesday, July 29, 2014 by K. Scott Allen
5 comments

Although Batarang gets a lot of attention, there may come a time when you need to dig a bit deeper into an Angular application, particularly if you are debugging or spelunking someone else’s application and you aren’t familiar with the entire code base.

Here are some tricks I’ve learned.   

Find The Scope For An Element

Update: note  David Boike's comment- "When you have Batarang installed in Chrome, no need to type out angular.element($0).scope() - Batarang makes the scope of the last clicked element available in the console as '$scope'"

A non-trivial page built with Angular will have dozens of scopes containing model information for controllers, directives, transclusions, and repeaters. Although Batarang provides a clickable hierarchy of scopes on the Models tab, it’s sometimes difficult to find the exact scope you need.

Batarang showing all the models

In these scenarios I’ve found it faster to use Chrome’s $0 symbol in the developer tools console window.

You’ve never used $0? Here is an excerpt from the Chrome console documentation:

Often when testing you'll select DOM elements—either directly in the Elements panel or using the Selection tool (magnifying glass)—so that you can further inspect the element.

The Console remembers the last five elements (or heap objects) you've selected and makes them available as properties named $0, $1, $2, $3 and $4. The most recently selected element or object is available as $0, the second most as $1, and so forth.

 

Once you have an element reference, you can wrap the element with angular.element and use the scope method to retrieve the associated scope.

Using $0 to find a scope

Once you have the scope, you can drill in to see details, or take the $id property to find the scope in Batarang’s display.

Evaluate Binding Expressions

If an element has an ng-binding attribute present, you’ll find the function used to execute the binding in the data property of the element. Combine the function with a scope object or a custom object (if you want to tinker with the binding), to see what the binding function produces.

angular binding The data of an element can also hold other interesting pieces of information, like a reference to a controller.

Interact With Services

The injector method gives you access to the single injector for an application, and the injector can give you access to any service from the application. Using a service interactively allows you to play with the service, debug it, pass it strange parameters, and watch to see how it behaves.

ng services in the console

One last tip: you can always check the version of Angular a page is using by typing angular.version in the console.

Videos from NDC Oslo 2014

Monday, June 16, 2014 by K. Scott Allen
6 comments

NDC Oslo featured some fantastic content, and most of the talks are uploaded to the NDC vimeo channel.

In addition to a 2 day AngularJS workshop, I presented one session on building directives for AngularJS.

image

Also a session on using NodeJS tools for front end development (npm, Bower, Grunt, Gulp, Treceur, and more).

NodeJS Tools

I hope you like them!

Model Options and Pristine Forms In AngularJS

Tuesday, June 10, 2014 by K. Scott Allen
5 comments

Here is a plunk that demonstrates how to reset an Angular form. The form itself will display any element with a dirty flag using a thick red border. The ngModel and ngForm directives automatically add the ng-dirty class to elements with a dirty flag, and the CSS rule applied is like so:

.ng-dirty {
    border: red 5px solid;
}

Notice how typing into an input not only makes the input dirty, but also makes the form itself dirty (a double border).

Dirty AngularJS Form

You might also notice when typing into the first input how the dirty flag takes a couple seconds to appear. The delay is because of the new ngModelOptions directive in 1.3. With ngModelOptions you can specify the events required to push values into the model (perhaps using the blur event instead of the keypress event), and also debounce the data binding by specifying a number of quiet milliseconds to elapse before pushing data. The example plunk is waiting for 2,000 milliseconds.

<form name="editUserForm">

    <input type="text" ng-model="user.firstName" ng-model-options="{debounce:1000}"/>
    <input type="text" ng-model="user.lastName"/>
    <input type="submit" value="Submit"/>
    <input type="button" value="Reset" ng-click="reset()"/>

</form>

The reset button will set the form back into a pristine state using $setPristine. $setPristine recursively sets all the controls inside the form to a pristine state, too. It’s up to the application logic to replace the data, perhaps by making a copy of the original form data, as shown below.

$scope.user = {
    firstName: "Scott",
    lastName: "Allen"
};

$scope.originalUser = angular.copy($scope.user);

$scope.reset = function(){
    $scope.user = angular.copy($scope.originalUser);
    $scope.editUserForm.$setPristine();
};

Quite a bit of power from a minimum amount of code.

AngularJS: Get Started Video Course

Monday, June 9, 2014 by K. Scott Allen
10 comments

AnguarJS: Get Started is now available to Pluralsight subscribers.

This video course is a small but focused subset of my full Angular class. The course assumes you know a bit about HTML, CSS, and JavaScript, but want to start from the beginning and learn about the core pieces of Angular, like how to work with controllers, services, and directives.

In the video we’ll build a “GitHub Viewer” application to search GitHub users and repositories.

AngularJS and GutHub

I hope you like it!

Building Multiple Filters with Lo-Dash and AngularJS

Thursday, May 29, 2014 by K. Scott Allen
4 comments

You can try the code in this post yourself.

Imagine we have the following movie data returned by an API call from the server.

var movies = [
    { title: "Godzilla", genre:"Action", released: 2014},
    { title: "Neighbors", genre: "Comedy", released: 2014},
    { title: "Into The Woods", genre: "Musical", released: 2014},
    . . .
];

Now, we need to display the data and allow the user to filter on genre, release year, or both. First, we’ll use lodash to build a unique list of available options for these attributes, and then store the options in scope.

app.controller("mainController", function($scope, movieData) {

    $scope.movies = movieData.getAll();

    $scope.genres = _.chain($scope.movies).pluck("genre").uniq().sortBy().value();
    $scope.years = _.chain($scope.movies).pluck("released").uniq().sortBy().value();

    $scope.clearFilters = function(){
        $scope.selectedGenre =  undefined;
        $scope.selectedYear = undefined;
    };

});

In the view we can build the filtering selects and a table using ngOptions and ngRepeat.

<div ng-controller="mainController">

  <select ng-model="selectedGenre" ng-options="genre for genre in genres"></select>
  <select ng-model="selectedYear" ng-options="year for year in years"></select>
  <button ng-click="clearFilters()">Clear</button>

  <table class="table">
    <thead>. . . </thead>
    <tbody>
      <tr ng-repeat="movie in movies |
            filter:{ genre: selectedGenre, released:selectedYear }">
        <td>{{movie.title}}</td>
        <td>{{movie.genre}}</td>
        <td>{{movie.released}}</td>
      </tr>
    </tbody>
  </table>

</div>

Notice how the filter filter in Angular understands how to take an object expression and apply predicates to the specified attributes.

Compile, Pre, and Post Linking in AngularJS

Wednesday, May 28, 2014 by K. Scott Allen
12 comments

Explanations of the compile and link functions in an AngularJS directive don’t often come with examples. Let’s look at a directive named simple which appears in the following markup. You can also play along  in this plunk. Open the browser’s developer tools to see the logging output. 

<div ng-repeat="i in [0,1,2]">
    <simple>
        <div>Inner content</div>
    </simple>
</div>

Notice the directive appears once inside an ng-repeat and will need to render three times. The directive also contains some inner content.

What we want to focus on is how and when the various directive functions execute, as well as the arguments to the compile and linking functions.

To see what happens we’ll use the following shell of a directive definition.

app.directive("simple", function(){
   return {
     restrict: "EA",
     transclude:true,
     template:"<div>{{label}}<div ng-transclude></div></div>",

     compile: function(element, attributes){

         return {
             pre: function(scope, element, attributes, controller, transcludeFn){

             },
             post: function(scope, element, attributes, controller, transcludeFn){

             }
         }
     },
     controller: function($scope){

     }
   };
});

Compile Executes Once

Element in Angular Compile FunctionThe first function to execute in the simple directive during view rendering will be the compile function. The compile function will receive the simple element as a jqLite reference, and the element contents will look like the content in the picture to the right. 

Notice how Angular has already added the directive template, but has not performed any transclusion or setup the data binding.

At this point it is safe for the code inside the compile function to manipulate the element, however it is not a place where you want the code to wire up event handlers. The element passed to compile in this scenario will be an element that the framework clones three times because we are working inside an ngRepeat. It will be the clones of this element the framework places into the DOM, and these clones are not available until the linking functions start to run. The idea behind the compilation step is to allow for one time DOM manipulation before the cloning – a performance optimization.

This compile function in the sample above returns an object with the pre and post linking functions. However, many times we don’t need to hook into the compilation phase, so we can have a link function instead of a compile function.

app.directive("simple", function(){
    return {
       //... 
        link: function(scope, element, attributes){

        },
        controller: function($scope, $element){

        }
    };
});

A link function will behave like the post-link function described below.

Loop Three Times

Since the ngRepeat requires three copies of simple, we will now execute the following functions once for each instance. The order is controller, pre, then post.

Controller Function Executes

The first function to execute for each instance is the controller function. It is here where the code can initialize a scope object as any good controller function will do.

Note the controller can also take an $element argument and receive a reference to the simple element clone that will appear in the DOM.

The element will look just like the element in the previous picture because the framework hasn’t performed the transclusion or setup data binding, but it is the element that will live in the DOM, unlike the element reference in compile.

However, we try to keep controllers from referencing elements directly. You generally want to limit direct element interaction to the post link function.

Pre-link Executes

Element In Angular Pre LinkBy the time we reach the pre-link function (the function attached to the pre property of the object returned from compile), we’ll have both a scope initialized by the controller function, and a reference to a real element that will appear in the DOM.

However, we still don’t have transcluded content and the template isn’t linked to the scope because the bindings aren’t setup.

The pre link function is only useful in a couple special scenarios, which is why you can return a function from compile instead of an object and the function will be considered by the framework as the post link function.

Post-link Executes

Element in AngularJS Post LinkPost link is the last function to execute. Now the transclusion is complete, the template is linked to a scope, and the view will update with data bound values after the next digest cycle .

In post-link it is safe to manipulate the DOM, attach event handlers, inspect child elements, and setup observations on attributes and watches on the scope.

Summary

Directives have many mysterious features when you first come across them, but with some time and experiments like these you can at least figure out the working pieces. As always, the harder part is knowing how to apply this knowledge to the real components you need to build. More on that in the future.

by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!