Guide For Building a New Line of Business Application

by JasonRShaver 18. October 2011 23:53

Make note that I define a line of business (LOB) application as:

An application needing centrally stored/processed data; using its own networking contracts, where requirements change rapidly.

This given as a counterpoint to some common consumer-focused applications such as:

  • Angry Birds, games generally don't have changing requirements, only new levels
  • Weather Applications, they do not store and/or process data, only pull data from simple web APIs
  • Facebook applications, they process data, but don't have their own data contracts

So, with that in mind, I plan to cover all the points a normal LOB developer would need to cover, but I will use tricks, such as attached databases, that will speed development.  In addition, I will not be covering items that are just good practice, such as using source control, even for yourself. 

I am also not doing this from a clean machine, so if I am missing anything, such as a download link, contact me.

Finally, I am focusing on using ASP.NET MVC 3 and Windows Phone 7.5 (Mango).  In the future I may make additions covering:

  • Integrating the phone’s navigation into MVVM Light
  • Adding and sharing code with Silverlight 5
  • Adding and sharing code with ASP.NET MVC 3
  • More complex data relationships (foreign keys, many-to-many, blobs)
  • Porting the ASP.NET and database site over to Azure
  • Publishing your application on the App Store
  • Integration with my Offline (Occasionally Disconnected) Application demo
  • Better “Design-Time Data”

Adding the Web Application

Ok, let’s start with the basics, open Visual Studio 2010 and create a new ASP.NET MVC 3 Web Application, I think you may need to download and install this package.

image
and on the next screen, select “Internet Application”.  I personally don’t create a unit test project at this point, I think it is better to just build it yourself at a later point.

image

Creating your Database

Now, let's get a database into the mix.  In your Solution Explorer (if you don’t see it, the hotkey is Ctrl + W, S), right click on App_Data and click Add and select New Item… and select SQL Server Database and give it a name like so:

image

Now, in the Solution Explorer, expand App_Data and double click on LobData.mdf to open it in the Server Explorer.

Now, right click on the Tables folder and select Add New Table:

image

Now, I am only planning on touching on the core point here, but you will ultimately want to create your schema as needed.  Here is the one I am going to roll with for now:

image

But, it is a good idea to set a Primary Key, and Row GUID Column.  To set the primary key, right click on your CustomerGuid column and select Set Primary Key.  Now in the Properties window (F4), make sure you don’t have any columns selected and change the Row GUID Column to CustomerGuid:

image

Click Save, give the table a name, such as “Customer” and you should be done with the database for now.

Creating your Entities

Now I personally love using a more ‘enterprise’ framework, such as CSLA, for the sake of time, we'll just stick with Entity Framework.  So, right click on your project and select Add and New Item… and choose the following:

image

and make sure to give it a name, such as LobModel.edmx in my case.  Then choose from the following sets of options:

image
image
image

And you should be dropped right into the edmx Model Editor:

image

And that’s all you need for that step, but first, let's add some sample data.  I like to plan my sample data to work two ways: Create it when I need it, or setup new sample data every time.  To make this happen I like to add an AddSampleData method to my Global.asax.cs; let’s do that now:

  1. protected void Application_Start()
  2. {
  3.     AreaRegistration.RegisterAllAreas();
  4.  
  5.     RegisterGlobalFilters(GlobalFilters.Filters);
  6.     RegisterRoutes(RouteTable.Routes);
  7.  
  8.     AddSampleData();  // Add this
  9. }
  10.  
  11. // Create this
  12. private void AddSampleData()
  13. {
  14.     var MyContext = new LobDataEntities();
  15.     if (MyContext.Customers.Count() != 0)
  16.         return;
  17.  
  18.     MyContext.AddToCustomers(new Customer()
  19.     {
  20.         CustomerGuid = Guid.NewGuid(),
  21.         FirstName = "First",
  22.         LastName = "Customer",
  23.         Level = 1,
  24.         Created = DateTime.Now,
  25.         LastUpdated = DateTime.Now,
  26.     });
  27.     MyContext.AddToCustomers(new Customer()
  28.     {
  29.         CustomerGuid = Guid.NewGuid(),
  30.         FirstName = "Second",
  31.         LastName = "Guy",
  32.         Level = 2,
  33.         Created = DateTime.Now,
  34.         LastUpdated = DateTime.Now,
  35.     });
  36.     MyContext.AddToCustomers(new Customer()
  37.     {
  38.         CustomerGuid = Guid.NewGuid(),
  39.         FirstName = "That",
  40.         LastName = "Other One",
  41.         Level = 2,
  42.         Created = DateTime.Now,
  43.         LastUpdated = DateTime.Now,
  44.     });
  45.     MyContext.SaveChanges();
  46. }

Now, if you want to have clean data every time, just remove the if statement.

Adding Your Windows Phone 7.5 (Mango) Project

First, I think you need to install this package.  Once you have that (and restarted Visual Studio), right click on your solution and select Add and select New Project… and select the following:

image

And select Windows Phone 7.1 from the New Windows Phone Application dialog.  Now, if I have learned anything from being a Program Manager at Microsoft, it is that when you create new applications all the time (I am up to “SilverlightApplication52” on this computer), learn to LOVE NuGet.  Let me show you how…  Come on, don’t fight it.

Right click on your Silverlight project and select Manage NuGet Packages… and enter MVVM Light into the “Search Online” box in the upper right hand corner and click the Install button on the first item that shows up:

image

Now, there are a lot of MVVM frameworks, and trust me, I have tried them all (or at least it feels like it).  I can say I am impressed with MVVM Light, BxF, and Caliburn Micro, but for the purpose of creating an application in 5 minutes or less and avoiding as much magic as possible, MVVM Light by Laurent Bugnion is awesome.

While we are at it, let’s get the Silverlight Toolkit for Windows Phone.  Search for “windows phone toolkit” and click Install:

image

Building the Solution

Right click on your solution and select Build Solution. Yup, not joking, this is a step.  If you skip this step, Entity Framework will not generate the code that we will need for the next step.  Please don’t skip it. 

Connecting Your Client And Server

To get the data from the web server to the phone and back again, we are going to use oData.

Getting the Server Ready

This might be a good time to talk about your options, but if you want to do this fast and easy, you really don’t have any.  The first step is to wrap our entities as a DataService<T>. 

First, add a reference to System.Data.Services, System.Data.Services.Client and System.ServiceModel DLLs that should be in your GAC.  Then create a new folder in the root of you web project called Services and create a new WCF Data Service like so:

image

And replace the contents of the LobEntities.svc.cs file with the following:

  1. using System.Data.Services;
  2. using System.Data.Services.Common;
  3. using System.ServiceModel;
  4.  
  5. namespace LobApplication.Services
  6. {
  7.     [ServiceBehavior(IncludeExceptionDetailInFaults = true)]
  8.     public class LobEntities : DataService< LobApplication.LobDataEntities >
  9.     {
  10.         public static void InitializeService(DataServiceConfiguration config)
  11.         {
  12.             config.SetEntitySetAccessRule("*", EntitySetRights.All);
  13.             config.DataServiceBehavior.MaxProtocolVersion =
  14.                 DataServiceProtocolVersion.V2;
  15.         }
  16.     }
  17. }

and if you F5 your web application and go to the following address:

http://localhost:[WhateverYourPortIsGoesHere]/Services/LobEntities.svc/

you should see the following:

image

Ok, I know, not that impressive, but we will get there. 

Silverlight (or WP7) and oData, Friends Forever!

If you want to get data back and forth in a modern application, I can’t see myself going with anything other than oData for all but the most hard-core enterprise applications.  It seems to be supported on everything, pretty much everywhere, and works great with Azure. 

Hell, did you know that SQL Server 2008 R2 can host a database as oData without any other tools?  Spin up SQL Server Management Studio, right click on a database, select Tasks and Register as Data-tier Application… and you will get a nice wizard walking you though the process.  More data can be found here.

image

Ok, back to the walkthrough:

Go to your Windows Phone project, right click on Service References and select Add Service Reference.

image

Click Discover and it should automatically find your service.  Give it a name and click OK.

You're done, the data is there. 

Don’t trust me?  Do we need to prove it to you.  Ok, fine, but I want to let you know that that hurts.

Making Your First ViewModel

On the Windows Phone project, the MVVM Light NuGet package creates a ViewModel\MainViewModel.cs class for you.  Let's go there, it looks something like this (with the comments removed).

  1. using GalaSoft.MvvmLight;
  2.  
  3. namespace LobApplication.Silverlight.ViewModel
  4. {
  5.     public class MainViewModel : ViewModelBase
  6.     {
  7.         public MainViewModel()
  8.         {
  9.             ////if (IsInDesignMode)
  10.             ////{
  11.             ////    // Code runs in Blend --> create design time data.
  12.             ////}
  13.             ////else
  14.             ////{
  15.             ////    // Code runs "for real"
  16.             ////}
  17.         }
  18.     }
  19. }

So, let’s get our data into the mix. 

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Collections.ObjectModel;
  4. using System.Data.Services.Client;
  5. using System.Linq;
  6. using GalaSoft.MvvmLight;
  7. using LobApplication.Silverlight.LobEntitiesService;
  8.  
  9. namespace LobApplication.Silverlight.ViewModel
  10. {
  11.     public class MainViewModel : ViewModelBase
  12.     {
  13.         private Uri _DataUri = new Uri("http://localhost:35772/Services/LobEntities.svc/");
  14.  
  15.         private IEnumerable<Customer> _Customers;
  16.         public IEnumerable<Customer> Customers
  17.         {
  18.             get
  19.             {
  20.                 if (_Customers == null)
  21.                     return new ObservableCollection<Customer>();
  22.                 return _Customers;
  23.             }
  24.             set
  25.             {
  26.                 if (_Customers == value)
  27.                     return;
  28.                 _Customers = value;
  29.                 RaisePropertyChanged("Customers");
  30.             }
  31.         }
  32.  
  33.         public MainViewModel()
  34.         {
  35.             if (IsInDesignMode)
  36.             {
  37.                 // Code runs in Blend --> create design time data.
  38.             }
  39.             else
  40.             {
  41.                 var MyContext = new LobDataEntities(_DataUri);
  42.                 var MyData = new DataServiceCollection<Customer>(MyContext);
  43.                 MyData.LoadCompleted += (o1, e1) =>
  44.                 {
  45.                     // This block of code runs when we get results.
  46.  
  47.                     if (e1.Error != null)
  48.                         throw e1.Error;
  49.  
  50.                     if (MyData.Continuation != null)
  51.                         MyData.LoadNextPartialSetAsync();
  52.                     else
  53.                         Customers = MyData;
  54.                 };
  55.                 var MyQuery = from c in MyContext.Customers
  56.                               select c;
  57.                 MyData.LoadAsync(MyQuery);
  58.             }
  59.         }
  60.     }
  61. }

Connecting Your ViewModel to XAML

In our MainPage.xaml, we connect our ViewModel to our page’s DataContext, using MVVM Light’s ViewModelLocator to help make this easy.  To do this, put the following attribute into your PhoneApplicationPage element, and then just bind a list box to your ViewModel’s Customer property. 

  1. <phone:PhoneApplicationPage
  2.    x:Class="LobApplication.Silverlight.MainPage"
  3.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  6.    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  7.    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  8.    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  9.    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
  10.    FontFamily="{StaticResource PhoneFontFamilyNormal}"
  11.    FontSize="{StaticResource PhoneFontSizeNormal}"
  12.    Foreground="{StaticResource PhoneForegroundBrush}"
  13.    SupportedOrientations="Portrait" Orientation="Portrait"
  14.    DataContext="{Binding Source={StaticResource Locator}, Path=Main}"
  15.    shell:SystemTray.IsVisible="True">
  16.    
  17.     <Grid x:Name="LayoutRoot"
  18.          Background="Transparent">
  19.         <Grid.RowDefinitions>
  20.             <RowDefinition Height="Auto"/>
  21.             <RowDefinition Height="*"/>
  22.         </Grid.RowDefinitions>
  23.  
  24.         <StackPanel x:Name="TitlePanel"
  25.                    Grid.Row="0"
  26.                    Margin="12,17,0,28">
  27.             <TextBlock x:Name="ApplicationTitle"
  28.                       Text="LOB Application"
  29.                       Style="{StaticResource PhoneTextNormalStyle}"/>
  30.             <TextBlock x:Name="PageTitle"
  31.                       Text="Customer View" Margin="9,-7,0,0"
  32.                       Style="{StaticResource PhoneTextTitle1Style}"/>    
  33.         </StackPanel>
  34.  
  35.         <ListBox Grid.Row="1"
  36.                 ItemsSource="{Binding Customers}">
  37.             <ListBox.ItemTemplate>
  38.                 <DataTemplate>
  39.                     <Grid Margin="40 4 0 0">
  40.                         <Grid.RowDefinitions>
  41.                             <RowDefinition Height="Auto"/>
  42.                             <RowDefinition Height="Auto"/>
  43.                         </Grid.RowDefinitions>
  44.                         <Grid.ColumnDefinitions>
  45.                             <ColumnDefinition Width="60px" />
  46.                             <ColumnDefinition Width="*" />
  47.                         </Grid.ColumnDefinitions>
  48.                        
  49.                         <TextBlock Grid.RowSpan="2" Text="{Binding Level}"
  50.                                   Style="{StaticResource PhoneTextTitle1Style}"/>
  51.                         <TextBlock Grid.Column="1"
  52.                                   Text="{Binding FirstName}"
  53.                                   Style="{StaticResource PhoneTextNormalStyle}"/>
  54.                         <TextBlock Grid.Row="1" Grid.Column="1"
  55.                                   Text="{Binding LastName}"
  56.                                   Style="{StaticResource PhoneTextNormalStyle}"/>
  57.                     </Grid>
  58.                 </DataTemplate>
  59.             </ListBox.ItemTemplate>
  60.         </ListBox>
  61.     </Grid>
  62.  
  63. </phone:PhoneApplicationPage>

Finally, Results��

And when you run your Silverlight application, you should get results like this:

image

And that, I think a good place to stop for now.  If you followed the steps, you have a great framework that combines ASP.NET MVC 3, WCF Data Services (oData), Windows Phone Mango, MVVM, and SQL Server Express. 

That’s not a bad place to start your Silverlight journey. 

Tags: , , , , , ,

Blog

Submit to DotNetKicks...
Permalink | Comments (0)

About the author

I am a software developer working for Microsoft in Redmond, WA.  In addition, my wife and I own TTXOnline, what is likely the 3rd largest table tennis store in the US.

Month List

Page List