Dan's Green Shoes

Got my green shoes on!

clip_image010_thumb.jpg


4 Comments

SignalR with Silverlight 5

SignalR is truly an amazing API. It’s ridiculously easy to use. The majority of SignalR client examples that I see on the web are for HTML/JS or WPF. There are examples for Silverlight but for older version of SignalR and Silverlight. What I was hoping to find was a step by step example using VS2k12, SL5 and latest greatest Nuget Packages. Since I could not find one, I thought I would create one and share. This step by step was highly inspired by the samples found here:

https://github.com/SignalR/SignalR/tree/master/samples

Setting up the Solution

Recommend you download the code and follow along. In Visual Studio 2012, create a new Silverlight 5 application called “SilverlightClientSignalR” as seen below. Continue reading


5 Comments

HTML JavaScript Data Grids

Line-of-Business applications tend to have data grids and ProModel products are no exception.  Our users have come to expect some rich behaviors that are not inherit in your basic HTML table element.  ProModel recently ranked the most popular HTML/JavaScript data grids out there right now.  Below you will find our summary.  Please note that many “Yes” and/or “No” values are hyperlinks into an example if we could find one.

We chose jxqGrid.  If you see a data grid we missed, please let me know which one.

Feature Rankings

Got To Have It Features

  1. Sorting
  2. Inline Editing
  3. Column Resizing
  4. Cell Selection
  5. Cell copy/paste
  6. Range copy/paste “Update”
GRID Sorting Inline Editing Column Resizing Cell Selection Cell copy/paste Range copy/paste
jqxGrid Yes Yes Yes Yes Yes Yes
jqGrid Yes Yes   (but not great) Yes No No No
SlickGrid Yes Yes   (but not great) Yes Yes Yes Yes
ParameterQuery Yes Yes (but not great) Yes Yes No No
Handontable Yes Yes Yes (but buggy) Yes Yes Yes
wijmo (ComponentOne) Yes Yes Yes Yes No No
KendoUI (Telerik) Yes Partial Yes Yes No No
koGrid Yes No Yes No No No
dhtmlxGrid Yes Yes Yes Yes No No
jTable Yes No Yes No No No
Sencha Ext JS Yes Yes Yes Partial No No
IgniteUI (Infragistics) Yes Partial Yes Yes No No
Syncfusion Yes Yes Yes No No No
WebGrid (Intersoft Solutions) Yes Yes Yes Yes No No

Love It Features

  1. Row Selection
  2. Filtering
  3. Flood Fill
  4. Virtualizing
  5. Range copy/paste “Adds”
  6. Knockout/Data Integration
GRID Row Selection Filtering Flood Fill Virtualizing Knockout/Data   Integration
jqxGrid Yes Yes No Partial Can   bind to pretty much anything..   Can   use KO as well
jqGrid Yes Yes   – Search No Yes MVC
SlickGrid No Yes – Search Yes Yes Seems to be kinda   “hard-wired”
ParameterQuery Yes Yes – Search No Yes Doesn’t   support KO
Handontable No No Yes No Not   sure about KO
wijmo   (ComponentOne) Yes Yes –   Filter Row No No Seems   you can use KO
KendoUI (Telerik) Yes Yes No Yes They   kinda have their own framework and server wrappers
koGrid Yes No No No Seems   you can use KO
dhtmlxGrid Yes Yes   – Search No Yes Doesn’t   support KO
jTable Yes Yes – Search No No Not   sure about KO
Sencha Ext JS Yes Yes No Yes Not   sure about KO
IgniteUI (Infragistics) Yes Yes No Yes KO   support
Syncfusion Yes Yes No Yes Not   sure about KO
WebGrid (Intersoft Solutions) Yes Yes No Yes Not   sure about KO

Like It Features

  1. Moving Rows
  2. Frozen Columns
  3. Col Selection
  4. Grouping
  5. Merged Column Headers
  6. Direct Breeze.js integration
  7. Column Reorder
GRID Frozen Columns Grouping Merged Column   Headers Column Reorder Excel Like Direct Breeze.js   integration
jqxGrid Yes Yes No Yes Yes No (refer to   notes for further links)
jqGrid Yes Yes   – but not user Yes Yes No No
SlickGrid No No No Yes Partial No
ParameterQuery Yes No Yes No No No
Handontable No No No Yes (but buggy) Yes No
wijmo   (ComponentOne) No Yes Yes Yes No No
KendoUI (Telerik) No No No Yes No Yes,   but a hack
koGrid No Yes No Yes No No
dhtmlxGrid Yes No No Yes No No
jTable No No No No No No
Sencha Ext JS Yes Yes   – (but buggy) Yes Yes No No
IgniteUI (Infragistics) No Yes Yes Yes No No
Syncfusion Yes Yes Yes Yes No No
WebGrid (Intersoft Solutions) Yes Yes Yes Yes No No


1 Comment

Using your “User” table with MVC4 Internet Template

The MVC4 Internet template assumes that it will be adding a user table called “UserProfile” to your database.  What I think a high percentage of developers would want is to use their domain model’s “user” entity and have SimpleMembership just manage the passwords.  In this blog post I will demonstrate how I did this and welcome alternative suggestions.
I recommend you first understand the authentication process provided by the MVC 4 Internet template.  There are 2 fantastic posts you should read first.

  1. MVC 4 Authentication
  2. SimpleMembership, Membership Providers, Universal Providers and the new ASP.NET 4.5 Web Forms and ASP.NET MVC 4 templates

In addition, please check out Scott Allen’s excellent Pluralsight course called “Building Applications with ASP.NET MVC 4”.

MVC 4 Internet Template with pre-existing Domain Model

Create a new ASP.NET MVC 4 Internet Application and name it “SimpleMemberExample”

image

Custom Domain Model/Database

The first thing I want to do is create the custom domain model/database.  In the “Model” directory, lets add a class that represents our custom “User” table.  Lets call this custom user entity “Administrator” as seen here:

namespace SimpleMembershipExample.Models
{
    public class Administrator
    {
        public Administrator(){}
        #region Fields and Properties
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        #endregion
    }
}

(I was unable to figure out how my user table’s unique identifier could use a Guid.  I think the unique identifier of your custom user entity/table must be an int to use SimpleMembership.  anyone know?)

Lets add a custom DbContext as shown here to the root of the project.

using System.Data.Entity;
using SimpleMembershipExample.Models;

namespace SimpleMembershipExample
{
    public class SomeAppDbContext: DbContext
    {
        public SomeAppDbContext(): base(nameOrConnectionString: "SomeAppName"){}
        public DbSet<Administrator> Administrators { get; set; }
    }
}

The DbContext only contains a single table called Administrators just to keep this super duper easy.  Yours would contain lots more. Notice in the custom constructor, I am telling the DbContext to use a specific connection string.  Lets add that connection string to the Web.Config.

image

This connection string could be anything you want it to be.

Just for demo purposes, I am naming the database “SomeAppName”.  As a final step, in “Global.asax.cs”, put the following code:

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        SomeAppDbContext dbcontext = new SomeAppDbContext();
        dbcontext.Administrators.All(i => i.Name != "Dan");

Running the application, the magical EF Code First will create the following database.  We have a custom database with a custom user table called “Administrators”.

image

Customizing MVC 4 Internet Template

Remove InitializeSimpleMembershipAttribute

The Internet template contains an Action filter called “InitializeSimpleMembershipAttribute”.  I deleted that class and removed any references to it.

Replace UserProfile with your Custom User Entity

The Internet template assumes that it will be adding a user table called “UserProfile” to your database.  What I think a high percentage of developers would want is to use their domain model’s “user” entity and have SimpleMembership just manage the passwords.  Let me demonstrate how to do this.

In the “Model” folder, in the “AccountModel.cs” file, delete the “UserProfile” class.  We want to use our “Administrator” entity instead.  Wherever UserProfile is referenced elsewhere, replace with Administrator.   The original UserProfile had properties called “UserName” and “UserId”.  Administrator has properties “Name” and “Id”.  Make sure to sync those properties up.

I want to have only 1 DbContext and I want to use my DbContext.  In the “Model” folder, in the “AccountModel.cs” file, delete the “UsersContext” class.  Wherever UsersContext is referenced elsewhere, replace with SomeAppDbContext.

Call WebSecurity.InitializeDatabaseConnection

As a final step, in “Global.asax.cs”, put the following code:

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        SomeAppDbContext dbcontext = new SomeAppDbContext();
        dbcontext.Administrators.All(i => i.Name != "Dan");
        WebSecurity.InitializeDatabaseConnection("SomeAppName", 
            "Administrators", "Id", "Name", autoCreateTables: true);

WebSecurity.InitializeDatabaseConnection takes the web.config connection string name, the name of your custom user table (“Administrators”), the unique identifier field name of your user table (“Id”) and the user name field.  Running the InitializeDatabaseConnection method does several things:

  1. Initializes the static Roles and WebSecurity classes.
  2. Adds the following tables to your database: webpages_Membership, webpages_OAuthMembership, webpages_Roles, webpages_UsersInRoles, UserProfile.

Running the Internet Application

When you run the code with those changes, the following database is created:

image

The home screen looks like this:

image

Click on the Register link in the upper right.

image

Fill out the form and click the “Register” button.  The MVC 4 Internet template application will navigate you back to the home page.

image

Notice it knows the name you registered with.  If you check for cookies, you will see the typical ASPXAUTH as shown below.

image

If you click the “Log off” link and check cookies, the ASPXAUTH cookie disappears.  The ASPXAUTH cookie is the key to the authentication.

When you look at the database you will see the following:

image

Notice with the code changes, the MVC Internet template knew to save to the custom user table “Administrators”.  The password was saved to the webpages_Membership table with a foreign key relationship to the Administrators table.

Please download the code here.


4 Comments

ASP.Net MVC 4 SPA navigation with Sammy.js

I am learning from John Papa’s “Single Page Apps with HTML5, Web API, Knockout and jQuery” on Pluralsight. The course outlines building an application called “Code Camper”.  The “Code Camper” sample is very effective at showing an end to end SPA design.  It leverages a bunch of open source libraries and can be a lot to take in all at once.  One of the libraries used is called Sammy.js.  I decided it would beneficial to focus on just Sammy.js library which is the focus of this blog post.

If you are like me then you are also new to Single-Page Applications.  I find it helpful to start with a simple definition.  Wikipedia defines SPA as a “web application…that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.  In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or partial changes are performed loading new code on demand from the web server, usually driven by user actions.” Continue reading

GamifyMockup_thumb.png


Leave a comment

Building a LOB Gamification Service Administration Website: UI Mockup

  1. Introduction
  2. Simulation
  3. Domain Model
  4. Server Data Services
  5. Web API Crud

I have had the pleasure of working with some pretty talented U.I. developers.  There are some people that can look at a screen 10 feet away and notice a couple of borders are not lined up properly. ProModel refers to these folks as having the “pixel eye”.  I do not have the pixel eye unfortunately.  I will say however with the increased emphasis on usability and design that I am starting to be more opinionated in this area.

All along I have had a mental concept of what the administrative website would look like.  I used Balsamic Mockups and produced the following image.

GamifyMockup

This is not going to win any awards but it at least gives me a target.  ProModel uses Pivotal Tracker and I have always been impressed with the usability of their website.  If you look at my design, I was definitely inspired by Pivotal Tracker Smile.

The workflow begins with the user administrator signing in.  In my next blog post in this series, i will discuss how to register and authenticate new administrators.


2 Comments

Building a LOB Gamification Service Administration Website: Web API CRUD

At the end of the last post I had shown a high level overview of some data design patterns such as Repositories and Unit of Work and ended with the browser fetching data from the database for the Application entity of the domain model. In this post, I would like to discuss adding, deleting and updating data through the Web API.

Here is the fully coded ApplicationsController. Notice much of the code is simply delegating to the UoW which in turn simply delegates its work to the generic EFRepository.

clip_image001[1] Continue reading


2 Comments

LOB Gamification Service Admin Website: Data Services

At the end of the last post, I had a solution with multiple projects. One of the projects contained the POCO domain model and another project leveraged EF Code First to read/write the domain model to a dynamically created SQL Server database. The goal of this post is to use ASP.NET MVC Web API to surface database data to the client browser.

Most of my career I have spent on the server side of things moving data between layers. I have been part of teams where we created our own application infrastructure as well as a user of IdeaBlade’s DevForce, WCF RIA Services, CSLA, etc.

In the last year, I have had the pleasure of learning from Jon Sarker who is a senior software architect at ProModel. Jon has helped ProModel streamline moving data efficiently and quickly through the use of enterprise design patterns such as Repositories, Commanding, Factories (for repos and commands in particular), DTOs, Request/Response objects, etc. Once you understand and start using these data design patterns, everything seems so modular, clean and maintainable.

As I embarked on learning the new world of HTML5, JavaScript and Web API, I figured the learning materiel on the web would be the equivalent of showing me how to drag and drop a datasource control. That is why I was so blown away at the depth of John Papa’s course “Single Page Apps with HTML5, Web API, Knockout and jQuery”. From John’s blog, the SPA has lots of patterns “including the Repository Pattern (to expose the data in a consistent way), Unit of Work Pattern (to decouple the Web API from the lower layers and to aggregate the repositories), the Factory pattern (for creating repositories), and Single Responsibility Principle (SRP). The SRP is all throughout the client and server, in fact. Simply put, the patterns help make the app easier to debug, scale and maintain.” Continue reading

Follow

Get every new post delivered to your Inbox.

Join 446 other followers