Thoughts on CodeMash 2010

As CodeMash 2010 has come to a close I would like to take some time to reflect on the conference.  This year was, in my opinion, not quite as good as last year but a lot of fun.  I think this year more people decided to really forgo the sessions and focus on the networking and social interactions that really define what CodeMash is. To me CodeMash has ALWAYS been about the people; people that you meet and the people you get to talk to and learn from.  So that said, I didnt feel the sessions were quite as good as last year, so we will look forward to next year.

One thing that did happen was I did my first ever open spaces sessions where I spoke on Developing for Android. Considering I decided I want to talk about it earlier in the morning and did no formal preparation, it went very well.  I had about 20 people around me and we just talked.  I explained some of the things I have discovered in developing CodeMashDroid and really perked the interest for a lot of people.  I really want to speak next year, but for right now I am preparing to submit my first abstract to the New York City Code Camp, which would give me a chance to really push RCM’s name for web development in the New York area.  But I digress. Speaking of CodeMashDroid, I was amazed at how many people had Droids at the conference. It really is nice to see that Android is making good success against ATT.

I was also not the only one to develop a mobile application for Droid, as an entire company decided to get involved in the development. I also missed the emails about posting information on the app so other would know where to find it, in addition I targeted only Android 2.0+ so I limited myself to those with Droids or newer; but its good to take away lessons from such an experience.  I also learned about some of the shortcomings in my test methodology and emulator capabilities.

Overall, CodeMash was a great experience and I look forward to the same experience next year.  I will be posting my pictures to Facebook later this week as well as hopefully getting time to write up a few blog entries elaborating on the topics I spoke about in my Open Spaces discussion.

Introducing CodeMashDroid

I am pleased to announce the release of a new app in the Android app store which I have entitled CodeMashDroid.  This app was developed in response to the request from the CodeMash organizers that attendees develop a solution for managing the CodeMash schedule using a REST API containing information for all conference information.  In addition, I had just purchased a Motorola Droid and was curious in entering the world of modern mobile development.  So I set out to create such an application.

As I developed the application I began to think about the fact that each time I went to a conference we were always being handed a piece of paper with the schedule or people would use their laptops to look up times.  It seems with the prevalence of cell phones, especially in the geek community, the smart handset could be used to manage this information and be used to alert people if they are missing something.  Think of it as a specialized calendar, or even better based on what suggestion, allow integration with Outlook, gCal, and iCal.  From this feedback and train of thought the idea for a conference managing application was born.  CodeMashDroid is a proof of concept app for this idea, and should it prove successful the project will officially kick into gear after CodeMash when we have collected feedback.

To download this app please look for it in the Android App store, it is free and we welcome any feedback as we decide on how to move forward. Please leave these comments in the AppStore feedback section, we will be monitoring this and will work the features into planning as we move forward.  We also welcome naming suggestions as I have no idea what I am going to call this yet 🙂

Thanks

2009 Year in Review

Its amazing how much has changed in my life this decade, even in the last year. We all know how 2009 was bad for a lot of people and at the start there was much we wondered about.  For me, 2009 was a year of redemption, a chance to make my mark and advance in my industry.  When 2008 ended I had narrowly avoided being laid off from my company, and now as we ring in 2010, I feel that I can breath easy with a fair amount of job security.  Many other things occurred so I thought I would publish a year in review posting for this pivotal year.

Job Questions
As December of 2008 came around I already had a feeling that I would be included in the layoffs.  I hadn’t really been on a billable project in quite some time and though the work I had done was valuable from a process standpoint, as a consultant it really comes down to billable hours. I steeled myself for the outcome which came to fruition.  But all was not lost to me, I continued to work even after I was told I didn’t have to, I wanted to finish this final feature I was working on, as a token of thanks to the company that gave me my start.  As I started looking around I had garnered much interest from the tech community and my transition to a new company seemed assured when I caught a most fortunate break. I received a phone call from our head manager in Grand Rapids who asked me if I would like my job back.  I was taken aback by this and asked for some time as I was considering other offers.  But the more I thought about it, the more I wanted to be at RCM, I felt it was the best place to learn and grow.

So I had a conversation in which I asked the reasons behind the decision to let me go, it was because they had not put me on work because of the good work I was doing to improve process.  I said to them that if I were to come back, I would not like it if I were simply laid off again for the same reasons, something must change.  And so it did.  From the get-go they were true to their words and through work at me and I thrived.  I worked on one of the biggest projects the company had that year, and it became the most successful, a testament to good planning and a well organized team.

Then came another challenge, we had a client who wanted something done but only PHP could be used due to the existing technologies. This time I pulled out the skills that I had not used since converting to a .NET programmer (heavily anyway) and created a well architected easily extensible enhancement to an existing software product, this time working remotely in more of a leadership role for my potion of the project, again I thrived.  My boss, who had always believed in me, was thrilled, I was starting to really carve out a niche for myself.  Then it came, the need for someone to go to New York to work on a huge project for another division in RCM, one under the direct supervision of the RCM brass.  After a long interview process, I was chosen and so as I close 2009, I look back on the great breaks I had knowing full well that my positioning had a lot more to do with getting them then luck.

Preparations for Japan
With questions about my employment swirling at the end of 2008, my Japan trip for 2010 was also placed in doubt.  Once the employment situation stabilized, the stability led to me beginning to take the steps to prepare for my trip to Japan.  The first step was to refresh my knowledge of the Japanese language through study.  To aid in this study I purchased Rosetta stone with levels 1, 2, & 3 and immediately began my training.  The remote work in New York helped bolster my accounts and allowed me to purchase a new camera which is something that I indicated was necessary for my trip.  And now, as we enter the new year I am preparing final preparations for plane tickets and ryokan, hostel, and hotel reservations following CodeMash.  In addition, I am preparing for the final purchase, a Netbook to help with blogging details of my journey.  Truly 2009, was a great year that saw me take great strides in preparing for my trip.  The final detail that solidified my desire to go was learning that my host brother and sister would be graduating from juugaku (middle school) and shogaku (elementary school) and thus I would be in country and able to attend a juugaku entrance ceremony, and a kookoo (high school) entrance ceremony.  This is very exciting.

Final Reflections
I generally tend to think that each year should bring knowledge and new experiences from which you should grow as a person.  And you should be proactive in seeking these experiences and seeking new challenges to increase your knowledge.  I feel that in the past year I have done this and grown as a person.  I hope to continue to increase my experience and knowledge in 2010 by continuing to challenge myself professionally and grown from the experiences I will have in Japan.  Happy New Year everyone, have a happy 2010.

Experiments with ASP .NET MVC Model Binding

I am really becoming a fan of the ASP .NET MVC framework, it has a lot of flexibility and lends itself well to design patterns that I currently use.  I also like the emerging MVVm pattern that has really become widely used among RIA apps.  It functions well with MVC and SilverLight because it gives us the flexibility to use ORMs like Entity Framework and Linq2Sql without having to battle with the lost context problem.

I decided this weekend to sit down with MVC and play around with a feature that I really dig: Model Binding.  For the uninitiated, model binding in MVC offers developers a way to specify an entity as the argument to a function and based on data sent over via the request create the object for you.  The out of the box binder works great and will cover the vast majority of cases.  I decided to take this one step further and I wanted to be able to totally bind up my proxy classes (essentially the ViewModels) without having throw away properties that were just used for this purpose and without creating an inheritance hierarchy to allow subclass proxy objects to be used for the binding, offering essentially the same thing as option 1.  I wanted this to all happen inside the model binder, so it would be totally transparent.

My result was pretty good, but not perfect.  It relies on a dependency and therefore is not 100% transparent and standalone.  This is because of what we are doing, we need to abstract the set of the property we need, this could be done via an enforced rule that constructors for proxy entities must follow or have you entities inherit from a common interfaces to guarantee that you have such a setter.  I choose to go with the later and defined IEntity as such:

public interface IEntity
{
     int ID { get; set; }
     string Name { get; set; }
}

For our example, the Name setter will not be used, but it is there because it really makes sense that an Entity should provide a name for its object.

So very briefly, the view model pattern relies on the creation of entity classes which are translated from generated entities.  This ensures that extraneous information is not passed to the client which can happen frequently when you use generated code in an all-or-nothing scenario.  Furthermore, you can reuse these objects within each other and thus gain higher amounts of code reuse which usually translates to greater maintainability.  In this example we are going to be focusing on my SeriesEntity class, defined as such:

public class SeriesEntity : IEntity
{
     // simple data references
     public int SeriesId { get; set; }
     public string Name { get; set; }
     public bool IsActive { get; set; }

     // complex data references
     public IList Seasons { get; set; }
     public IList Genres { get; set; }
     public StudioEntity Studio { get; set; }
     
     #region IEntity Members
     public int ID
     {
          get
          {
               return SeriesId;
          }
          set
          {
               SeriesId = value;
          }
     }
     #endregion
}

The use of IList here is crucial to the solution I am going to propose, though you could make this any collection type, with the exception of an array.

One of the really neat things about MVC is that in addition to allowing you the ability to override the default binder, you can also specify a binder of a specific type, all you need to is define the binders dictionary in Global.asax.

protected void Application_Start()
{
     RegisterRoutes(RouteTable.Routes);
     RegisterModelBinders(ModelBinders.Binders);
}

private void RegisterModelBinders(
     ModelBinderDictionary binderDictionary)
{
     binderDictionary.DefaultBinder =
          new Binders.AnimeModelBinder();
     binderDictionary.Add(
          typeof(SeriesEntity), new SeriesModelBinder());
}

I am showing this as an example of what you can do with the binding at a type level.  We will be using the the DefaultModelBinder base class, so lets start with that class, firstly it must inherit from DefaultModelBinder.  This class provides a variety of virtual methods that you can override, the first one we will look at is BindProperty, this is my implementation:

protected override void BindProperty(
     ControllerContext controllerContext,
     ModelBindingContext bindingContext,
     PropertyDescriptor propertyDescriptor)
{
     // need name of the property we are trying to bind
     var propertyName = propertyDescriptor.Name;
 
     // find the property on the object we are binding
     var property = bindingContext.Model.GetType()
          .GetProperty(propertyName);
            
     if (property != null)
          property.SetValue(bindingContext.Model,
          GetObjectValueFromProperty(property,
               bindingContext.ValueProvider[propertyName]),
               null);
}

The BindProperty method is called each time a new property is discovered that could potentially be binded to.  You can control this action by specifying Exclude when defining the parameter list for your action, example:

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

public ActionResult Create([Bind(Exclude = "SeriesId,Seasons")]SeriesEntity series)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Notice the use of Exclude here, which ensures that the binder will not get SeriesId and Seasons to bind.  While our binder can handle it not being there, the lessens the load on the binder.

So lets understand the Binder, first we make a call into GetObjectValueFromProperty function which essentially determines if we need to do anything special with the values, if we dont we make a call to Convert.ChangeType:

return Convert.ChangeType(result.AttemptedValue, property.PropertyType);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

I love this method, as it calls the underlying parsing logic to convert the value from (in this case) a string to whatever I desire.  It will fail, of course, if the value is not as expected, but this would happen with the normal binder as well.  So at this point, we can handle simple one-to-one arguments for value types now.  Lets add a means to work with complex objects.

At this point we need to introduce a dependency within our code, that is we need a way to construct our proxy entities and since these are generally custom based on the application, this is where IEntity comes into play.  Thus we create a method to generate an instance of a type that, using IEntity, we can set a value to:

private object GetInstanceWithId(int entityId, Type type)
{
     var constructor = type.GetConstructor(new Type[] { });
     var value = constructor.Invoke(null);

     ((IEntity) value).ID = entityId;
     return value;
}

Looking at this code there is one flaw and one major area of improvement.  The first one is this casting is unsafe, we have no idea if we can convert the type passed to IEntity and we are hardcoding IEntity rather then letting it being provided.  This is not that big of a deal as this is not code most developers working with this binder would ever see, but it is a hard dependency.  The best way to check this is before we call the function, we validate the the property type CAN be cast to IEntity, example:

private bool CanConvertToType(Type type, Type conversionType)
{
     var interfaces = type.GetInterfaces();
     return interfaces.Length > 0 &&
          interfaces.Select(t => t.Name)
               .Contains(conversionType.Name);
}

Simply pass the type of the property and the a type reference to the type we want to check the cast for and this method will tell you, though it only works for interfaces.

The final pieces to this is binding a collection of values.  One of the things we can do with HTML is send a comma delimited list of values from the view by naming controls with the same name.  This will form the basis for our collection binding.  The reason we use IList for our entities is so we can perform the binding and as I came to find, creating generic arrays is something .NET does not allow.  So the first step is to determine if the property we are looking at IS in fact a collection, we can reuse our CanConvertToType function and pass typeof(ICollection) as the conversionType parameter.

The next step is determining the actual type being held by the collection, so we can determine if we can make objects that can be stored in this collection.  We can make a simple call to get this information:

Type elementType = property.PropertyType.GetGenericArguments()[0];

Because this is a generic, there will always be at least one argument, and because its an IList we know that the first argument is the contained type.  Once we confirm that this type can be used with IEntity we can break apart incoming value and create the IList reference we are going to return.  These two lines handle these tasks:

var valueArray = result.AttemptedValue.Split(',');
var valueList = (IList)Activator.CreateInstance(
     (typeof(List).MakeGenericType(elementType)));

This code is fairly self explanation, but to reiterate, create a string array from the values coming from the form submit, and use the Activator class to create an instance of List that we then cast to an IList.

Finally, we iterate over the string array, and call our GetInstanceWithId function to generate an instance of the underlying type with the ID property set via the abstraction provided by IEntity.

So there you have it, with some very clean reflection we can build an entire proxy entity via the custom model binder, this sets us up for validation and then actions within the controller method.  This also centralizes how we set the values for our objects helping with maintainability.  Finally, if the case arises that a totally different binder is needed for a certain type, MVC does allow type level model binding configuration which allows MVC to use a certain binder for a certain type.  I wonder if you can specify a interface type thus you can declare an model binder for a set of entities.

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

I hope to add validation to this example for the next entry.

http://cid-18f9d8896416d2fb.skydrive.live.com/embedicon.aspx/BlogFiles/AMCode.zip

The MVVM pattern and some developer reflection

It is not uncommon in the world of web programming to see a new acronym floating around every other week.  I saw MVVM for the first time a few months ago, but I put off really learning what it was, I was focused on other things and since all the conversation pertained to its use with SilverLight and I was not focused on SilverLight at the time I put it on the list of things to look at.

Then I attended the ASP .NET MVC FireStarter in New York city where they talked about the ViewModel pattern being used for MVC applications.  I immediately saw the benefits of this pattern with respect to Microsoft Entity Framework as it took the hassle out of the lost/unloaded context problem I had to circumvent whenever using the framework.  I was able to fully create a set of objects that translated the generated entities into classes that could be efficiently used by the View, in addition, I found added benefits from having these classes inherit from each other.  And since every OO programmer is continually striving for a way to reuse as much as possible without creating too much complexity, this was a win in my opinion.

What I did not realize at the time was, this is the essence of the MVVM pattern that has been gaining popularity.  It happened recently when I was thinking about the application I am developing for the client out here in New York.  I realized that in fact I had architected the application to follow this pattern without even realizing it.  As is the case whenever you realize such a thing, you start wanting to refactor bits that you did not design according to the pattern, without taking too much time in doing so.  I have a number of cases that I am correcting where we are using anonymous objects where we could be using these “proxy” objects as I call them, but they really are ViewModels, I am even starting to create facades for other objects that are composites of other properties within the object.

What I did was I had Linq2Sql generate a bunch of classes based on the tables we are using, each of these classes is proceeded by either a t (table) or a vw (view).  The ActiveRecord pattern is used to make these calls into the model, thereby creating a clean separation that allows data access calls to be refactored without changing calling code.  At the start, we were returning the data from these calls to the View via anonymous objects. (reasons for using this architecture where mostly due to using the Coolite ExtJs ASP .NET UI Framework).  However, as we began to develop the controllers which handled the brunt of the more involved functionality, I began creating classes for use by these controllers.  It became almost instantly apparent that these classes could also be used in the Read calls.  And now, I am rewriting old code to use objects themselves.  The value of this was recently demonstrated when the client asked for a formatting change that required a minimal to change, but the effect was application wide.

The one thing I would like to do differently next time, is make the static methods use to call into the model hang off the view model objects instead, this way there is no visible usage of the generated model classes, this is how my current personal application is setup, though it uses a service based pattern for data access, this is the recommended approach when using a context driven ORM as is the case with Linq2Sql or EF.  I have handled the cases in which I want to share my context across many functions (for transacted scenarios) by creating internal functions that can accept an existing context as a parameter, though it is only visible within the assembly it is defined in, this keeps calls in the view from being able to see these functions, thereby hiding the use of a context reference entirely from the view.

The idea of taking the static methods off the generated views and onto the view models themselves is that, like the service pattern, the translation is shared and not implemented all over the place.  This means that if you want to change a property that needs to come back, you do it in one spot.  For custom queries, you can still define the custom translation in a custom view model.  But the point is that you can better control over your translation which helps with maintenance and code cleanliness.  One of the ways I am doing this now is creating constructors that build the ViewModel objects for me.  But if I can find the time to perform this refactor, it is something I will do.  The other concern is that I am training other developers to develop this application, so I need to be careful changing patterns on them.

My Trip to the New York ASP .NET MVC Firestarter

Being in New York has its many perks, one is the awesome big city an hour train ride away. This city and its surrounding area offer one of the biggest markets for technology in the world and it is no surprise that Microsoft has a tremendous presence here.  I was informed of this event by my colleague here in New York, Anis.  Upon seeing it I immediately registered, not just for its content, but also its location: At the Grand Hyatt in New York City next to Grand Central station.  Any excuse I can find to go into the city is a valid one in my book.

I want to thank Peter Laudati, Stephen Bohlen, and Sara Chipps for taking the time to put on this wonderful event, while a lot of the information for me was review, it was still very helpful to get other people’s perspective on the technology as well as meet local members of the New York technology community.

I really enjoyed this session because it got me into thinking mode and finally got a design pattern to click in my head for MVC, I have to thank Stephen for this as he pointed out something that I was doing which I see now is a bit of an overstep in terms of the responsibility of the control.  I assumed that I should use EF or L2SQL entity classes as the models that are passed to my strongly typed views.  Stephen pointed out that why should I pass these objects, which contain so much extra information, to the model. Make simple versions, he said, and passed those.

At first I didn’t agree with this point as I thought it would lead to class clutter.  But as I started to think about it I realized this is already what I am doing on the project out here in New York, where we use Linq2Sql unfortunately.  When you look at the application the L2SQL entity NEVER leave the Model layer except as an anonymous object or as a simplified entity object (realizing this made me recognize some areas that should be refactored starting Monday).  By using this approach with MVC we can open the ability to TRUELY leverage the idea of the Universal Model.  Where a single View can be used by n controllers to display data.

Think about a maintenance screen for satellite data.  Generally you just have a Name field and then your normal Create or Update logic.  You could design a Web level model class with an interface that has the desired methods on it and simply work with that in the View passing it off as necessary without ever know what you are actually working with.  In turn this would use just one view, and save you the headache of many satellite maintenance screens.

That aside, the majority of what was discussed was review, though the conversations were interesting and I was able to get to know a few of the local technologists.  Thinking I may look into visiting the New York .NET User group.

Grouping with Coolite GridPanel

One of the nicest things about Coolite is that you can easily get a very modern looking website in short order, provided you take the time to understand the examples and ExtJS documentation, which maps pretty closely to the controls.  But there are still little niches you need to know to get the controls to work how you want.  One of the most finicky controls, I have found is the GridPanel.

So much interactivity can be achieved these days via JSON and grids it really is breathtaking when you pull it off.  Coolite is no exception, in fact, when configured properly, it has one of the must full featured grids I have seen on the web, once you get there that is. I will talk about the grid a lot in posts to come, primarily about databinding, and updating.  But today we will focus on grouping.

Grouping is an effect where by a top level is rendered based on data groups, these can be expanded to show the children of that group along with aggregation data.  Today I am going to explain how to take a simple array of data and generate a grid panel which supports grouping.  To begin, here is some sample data we will feed our grid:

var aList = new List()
{
    new Order() { OrderId = 100, ProductId = 3,
        ProductName="Product 3", UnitPrice = 5.00m,
        Quantity = 21 },
    new Order() { OrderId = 100, ProductId = 6,
        ProductName="Product 6", UnitPrice = 1.00m,
        Quantity = 22 },
    new Order() { OrderId = 100, ProductId = 7,
        ProductName="Product 7", UnitPrice = 2.00m,
        Quantity = 23 },
    new Order() { OrderId = 200, ProductId = 3,
        ProductName="Product 3", UnitPrice = 3.00m,
        Quantity = 24 },
    new Order() { OrderId = 300, ProductId = 4,
        ProductName="Product 4", UnitPrice = 4.00m,
        Quantity = 25 },
    new Order() { OrderId = 400, ProductId = 5,
        ProductName="Product 5", UnitPrice = 5.00m,
        Quantity = 26 },
    new Order() { OrderId = 500, ProductId = 8,
        ProductName="Product 8", UnitPrice = 6.00m,
        Quantity = 27 },
    new Order() { OrderId = 500, ProductId = 9,
        ProductName="Product 9", UnitPrice = 7.00m,
        Quantity = 28 },
    new Order() { OrderId = 500, ProductId = 1,
        ProductName="Product 1", UnitPrice = 8.00m,
        Quantity = 29 },
    new Order() { OrderId = 200, ProductId = 2,
        ProductName="Product 2", UnitPrice = 9.00m,
        Quantity = 20 },
    new Order() { OrderId = 700, ProductId = 3,
        ProductName="Product 3", UnitPrice = 1.00m,
        Quantity = 21 },
    new Order() { OrderId = 700, ProductId = 4,
        ProductName="Product 4", UnitPrice = 2.00m,
        Quantity = 22 },
    new Order() { OrderId = 800, ProductId = 4,
        ProductName="Product 4", UnitPrice = 3.00m,
        Quantity = 23 }
};

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Ok, maybe that was a bit excessive, but moving on.  Coolite emphasis a UI pattern I like to call “late loading”. The basics of this pattern is that the main frame of the page should come in first and then the data. This gives the user the impression of a page load and lightens the load. This technique is commonly employed with data heavy applications which utilize a single page architecture and simply move data (usually in JSON) to and from the server using asynchronous calls.

My favorite way of getting data with Coolite are ASP .NET Generic Handlers (.ashx), mainly because they are extremely lightweight and have some very nice uses with GridPanels. This is the code for the ASHX, notice the use of the NewtonSoft JSON Library (this is included with the Coolite download) to serialize the List into JSON and pass it back, also notice the content type definition, to text/json.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class DataHandler : IHttpHandler
{
        public void ProcessRequest(HttpContext context)
        {
            List list = Order.GetData();

            context.Response.ContentType = "text/json";
            StoreResponseData data = new StoreResponseData();
            data.Data = JSON.Serialize(list);
            data.Return();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
    }
}

What this will do is return a JSON object to be read by a Coolite ExtJS data store and then bound to a control.  In this case, the data that is being returned can easily be grouped by its OrderId property. We can have Coolite take care of most the heavy lifting for us.  So we will first define our data store:

   1:  <ext:Store ID="store" runat="server" AutoLoad="true"
   2:      AutoDataBind="true" GroupField="OrderId">
   3:      <Proxy>
   4:          <ext:HttpProxy DisableCaching="true" Json="true"
   5:              Method="GET" Url="/DataHandler.ashx" />
   6:      </Proxy>
   7:      <Reader>
   8:          <ext:JsonReader>
   9:              <Fields>
  10:                  <ext:RecordField Name="OrderId" />
  11:                  <ext:RecordField Name="ProductId" />
  12:                  <ext:RecordField Name="ProductName" />
  13:                  <ext:RecordField Name="UnitPrice" />
  14:                  <ext:RecordField Name="Quantity" />
  15:                  <ext:RecordField Name="Total" />
  16:              </Fields>
  17:          </ext:JsonReader>
  18:      </Reader>
  19:  </ext:Store>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Ok there is a lot here so we will go line by line.  First we are defining the Store and saying that we want it to AutoLoad which means a request will be made as the page becomes ready.  The key here is the GroupField definition which is what will format the outgoing result in a way that the GridPanel will use a grouping format to output it.

The connections to the data sources are initiated through Proxies.  The interesting thing here is that you can also define a WriteProxy to handle changes to Store via the Grids inline editing feature.  In this tutorial we are only going to be covering using a ReadProxy:

  • DisableCaching: This prohibits the browser from caching a request.
  • Json: This just ensures that what we get back from the request is JSON, I define this just to be explicit with what is coming back
  • Method: Once again this overloads the default value, and just explicitly states that we wish this request to be carried out over GET
  • Url: The URL of where to make the request to, in this case we are specifying the URL to our custom ASHX

The next part is the Reader definition; this is defining what the JSON object is going to look like on the client side as it is worked with on the client side.  Make sure the values of the Name attributes match their respective property values of on the JSON object coming over.  I mistakenly thought this was the order of serialization, but it is not; they match one to one.  You can optionally define the Type attribute, but for the most part Coolite will infer the types.

With this defined, we are now ready to move onto defining our GridPanel which will actually provide the UI for the user to see.  The definition is rather long, so I will be breaking this apart based on the internal nodes for definition, to start here is the outer structure which has the base property definitions:

<ext:GridPanel ID="gpPanel" runat="server" AutoHeight="true"
    StripeRows="true" StoreID="store" AutoDataBind="true">
</ext:GridPanel>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

The important attributes here StoreID (which defines which store this control is associated with), also AutoDataBind which will automatically rebind the grid whenever a change is detected in the associated store.  The other attributes are defined for aesthetic purposes.

The next thing to do is to define how the grid will look without Grouping and what columns will be included, to do this we define a ColumnModel node within the GridPanel:

<ColumnModel runat="server">
    <Columns>
        <ext:Column DataIndex="OrderId" />
        <ext:Column DataIndex="ProductName"
            Header="Product" />
        <ext:Column DataIndex="UnitPrice"
            Header="Price">
            <Renderer Format="UsMoney" />
        </ext:Column>
        <ext:Column DataIndex="Quantity"
            Header="Qty" />
        <ext:Column DataIndex="Total">
            <Renderer Format="UsMoney" />
        </ext:Column>
    </Columns>
</ColumnModel>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

You notice the DataIndex matches the value of the Name attribute from the JsonReader RecordFields.  Understand that the column model defines ONLY what fields from the JSON object you want to display.  The row will STILL contain a reference to the whole JSON object, but this way you can choose to hide fields like PKs (We are doing this with ProductId in this case), but they are still usable when a GridCommand is invoked.

Notice also that we are using the built in Render formatting that is provided by Coolite.  There are quite a few of them that come out of the box, in addition you can define your own.

So if you run this code right now, you will get a simple grid, but you will still not see any groupings, this is because we need to define a GroupingView node for this GridPanel to see the grouping in action.

<View>
    <ext:GroupingView ID="gvGrouping" runat="server"
        ForceFit="true" HideGroupedColumn="true">
    </ext:GroupingView>
</View>

Views are an extremely vital piece to the GridPanel as they can help you define further configuration in terms of function and formatting.  Here we are using the GroupingView which defines how the Grid will look when it is grouping.  We define two attributes for aesthetical purposes: ForceFit and HideGroupedColumn.  ForceFit merely forces the Grid to fit its entire available width, it tends to make the grid look a lot nicer.  HideGroupedColumn hides the column you are grouping on.

Running the code now you will see the GridPanel and your data grouped by the OrderId.  The blocks are expandable and collapsible, and their initial state can be defined on the GroupingView.  The GridPanel offers an immense amount of functionality and can really help you display your data.  It also best demonstrates ExtJs reliance on the “late-load” content loading technique.  Your controls will be rendered and the data will be brought in via Store’s that in most cases will be linked to a web service of some kind.  This data is then placed into either an Array, JSON, or XML, depending on what you define. In our example, we used JSON.  We associated this Store with a Grid via the StoreID attribute of the GridPanel.  In addition, we define the Grouping column for the Store, this is what enables our grouping.

Finally, we use a ColumnModel and View to define how the Grid will look under certain situations.  Remember that you do not have to define a column for all members of your JSON object, only the ones you want to display, sending a row command will still give you access to all the properties defined on the object via the JSON reader.

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Moving from ASP .NET MVC to ASP .NET Webforms

It is very common to hear developers talk about successfully switching to MVC and generating much cleaner applications and there is no doubt that using MVC can certainly generate that.  But as with any technology/framework, misusing it can still result in an application with maintainability issues and the need for the developer to make undesirable decisions.

Such was the case out here in New York where our client had decided to use the MVC framework with the Coolite UI toolset. I am a big believer then when it comes to using the MVC framework one needs to be careful that the toolset you are using also leverages what MVC gives you.  In the case of the project out here, after numerous discussions it was clear that really the way we were approaching the project we were just not going to leverage MVC in a way that would make sense to use it.  In reality, the project would be better off, given the aims, as a Silverlight project, but due to circumstances surrounding the project it was not an option.

In addition, we had decided to use the Coolite control toolkit for UI.  Given the way that Coolite is setup it makes sense to use it with WebForms over MVC.  While you can certainly use MVC with Coolite (as demonstrated by http://mvc.coolite.com) after spending a week developing in MVC with Coolite it became apparent that it didn’t make sense and I felt we were heading for some problems.  I took these problems to the other developers and after some conversation we decided we needed to talk to the client about possibly changing, let me enumerate some of the arguments that were made:

  • MVC’s biggest strength is the decoupling of the view from the controller and the lack of reliance on server controls
    • In our case we are not really using this methodology heavily, instead relying more on web services to talk to the database. This due to the other devices that must be able to tie into this system
  • Coolite is designed to work with ASP .NET webforms.  Using Coolite with MVC means a large reliance on JavaScript to gather values and perform saves.
    • Using Webforms we can use the code behind to leverage .NET in a way that makes sense given the operations we are performing
  • With Webforms we can still use web service method calls to get data from our database.  It also allows use to make WCF calls via code-behind if needed

The big point that was made here was that we are only talking minimal gain using MVC from a structure standpoint vs. potentially difficult choices in saving and persisting data and leaning very heavily on JavaScript.  In addition, if done properly an ASP .NET Webform app can be just as well organized as an MVC application if done correctly.  I have certainly see it done by some of the best in the industry and I have their experience to lean on in doing this.  I really think this is the best decision, as much as I want to use MVC, I think you just don’t gain anything give what we are doing and how we are approaching it.

Off to New York

I am quite excited and nervous.  Recently I was chosen to work as an Embedded Expert for a company in Long Island doing a rewrite of a legacy application using .NET.  This is a big chance for me and I am very excited for the opportunity.  I look forward to being to New York, a state and city that I have never visited.

Interestingly enough, the opportunity should last for three months, which is the same amount of time I lived in Japan three years ago.  Though I personally think that this will be a bit easier, since at least I will still be in America where English is spoken more then Japanese.  I leave in August following my brother’s wedding. Wish me luck, I will try to post about things as much as I can, but this is a fairly confidential project.

JavaScript Design Tips

As the use of JavaScript continues to grow in its involvement with developing cutting edge web applications, so too will grow the amount of JavaScript developers will be asked to write.  In the pasts few years many JavaScript framework have emerged to help ease the burden of writing large amounts of JavaScript by encapsulating common operations and providing abstraction against the variety of JavaScript Engine implementations among the popular browsers.  However, even with these frameworks in place JavaScript can still a pain in the butt to code and maintain.  Below I will talk about some tips that can be used to improve the code your write as well as increase the productivity of writing the code.

At the end of this article I have posted the code for a very simple ASP .NET application that employ’s these strategies in its design.

Unobtrusive JavaScript
We often talk about the graceful degradation with respect to developing computer applications. How to handle a condition where the program cannot achieve a desired result become circumstances disallow it; the same is true when developing a JavaScript driven application.  In its purest form developing an Unobtrusive JavaScript application involves an application that functions with or without JavaScript. The principle idea is that JavaScript should NOT drive a page but rather should AUGMENT it.

While this idea is very good in practice, it is often never done to the purest form due to budget or time considerations.  However, the central point of Unobtrusive JavaScript is the user should be alerted that this application can work better with JavaScript. The user should not click on features with the expectation that they are available and have the feature be “dead” due to lack of JavaScript.

The main practice with Unobtrusive JavaScript is to separate all JavaScript code out from the presentation, that is the HTML.  This means no defining of event handlers in the tag’s themselves, but rather using an external JavaScript file to augment the page.  This has many advantages, for one it allows you to more easily take advantage of certain syntaxes such as closure available to you from JavaScript. In addition, it also allows the browser to cache the JS file, therefore lightening the load when the document is being downloaded.  This is the same practice we employ with CSS.

You can almost consider there to be a fourth layer to the application design: Models, Controllers, View, and Interaction.  The additional layer interaction, is the layer that allows the view to manipulate it self as well as talk to the controllers; basically provide interactivity to the view.

Closure
Closure is a syntax advantage that can be leveraged to help obfuscate your code and provide decreased visibility to sensitive values. It can also help to circumvent undesirable parsing of values in certain situations. When developing JavaScript intensive application you always need to consider malformed data as a potential security risk. Remember that using a tool such as Firebug users can have free reign with your pages and even wire up their own JavaScript events to call your services.  The code is all right there in front of them and the security of these services is something you must be constantly aware of.

By using closure you can effectively store your values in the JavaScript runtime, I have an example of this in my sample application available for download.  But JQuery takes this a step further by providing the JQuery data cache which allows you to store data on a per node basis using a hashtable; consider the following code:

var totalAge = 15;
$("#totalAge").text(totalAge).data("total", totalAge);

Again we can put whatever data we want in the data cache and identify it with a key.  As you probably have guessed this is not as secure as the closure idea since our user could easily wire up a JavaScript event to alert back the values used here. What  I tend to use this for is to store data that I can use in client side operations so that I dont have to parse numbers, but rather can read the value in native JavaScript format.

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Prototype & JQuery Plugin Architecture

If you have ever written a .NET extension method then you already understand the basics of JavaScript prototyping.  JavaScript contains several standard types: Number, Date, String, Integer, Array, Boolean, as well as others.  All of these types contain a property named prototype that can be used to add custom methods onto the type.  However, much like the namespace containing the extension method must be available in .NET, you must have the prototyped method definition in scope on the page the use it.  You define a prototype method like this:

   1:  String.prototype.parseToNumber = function() {
   2:      // convert to a number
   3:      var number = parseInt(this);
   4:      if (!isNaN(number)) {
   5:          return number;
   6:      }
   7:   
   8:      return 0; 
   9:  }

Here we are creating a new function for a String that will attempt to parse the string value to a Number, notice that we return zero if we are unable to do this.  So we can see its usage here:

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

var totalAge = $("#listing :text").SumContainer(function($obj) {
        return $obj.val().parseToNumber();
 });

By using prototype functions we can promote cleaner more reliable code the emphasis reuse and centralizes functionality to make maintenance easier.  Also included in this sample is a custom JQuery plugin I wrote called SumContainer.  Remember that JQuery is essentially a query language built on top of JQuery. We make queries into the DOM and get results, we then call functions to act on the results.  Here is the code for the SumContainer plugin:

   1:  jQuery.fn.SumContainer = function(fn) {
   2:      var total = 0;
   3:      this.each(function() {
   4:          value = fn(jQuery(this));
   5:          total += value;
   6:      });
   7:   
   8:      return total;
   9:  };

What this does is, by using fn we effectively prototype JQuery with a new function called SumContainer, which takes as a parameter a function that denotes HOW to get the value to sum.  As you will notice above when we call SumContainer we pass it an anonymous function that is passed a JQuery reference to the current element within the plugin.

While this technique is, to my knowledge, contained to just the JQuery world, you can understand that both of these techniques are doing roughly the same thing: centralizing code and make it easier to create libraries and frameworks to support your code; in fact the vast majority of frameworks and libraries and built on these two concepts.

To further demonstrate these techniques and tips I invite you to download my code and the slides from this presentation.  I have done the best I can commenting the source code to help you understand what is going, but please feel free to leave a comment with questions.

http://cid-18f9d8896416d2fb.skydrive.live.com/embedgrid.aspx/BlogFiles/JavaScript.DesignTips.zip

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }