I also downloaded the express versions of Visual Studio 2012. Yes, that’s right, I said versions (plural). There is an express edition for each different kind of application you can develop. Here is the breakdown;

• Visual Studio Express 2012 for Web
• Visual Studio Express 2012 for Windows 8
• Visual Studio Express 2012 for Windows Desktop
• Visual Studio Express 2012 for Windows Phone
• Visual Studio Express 2012 Team Foundation Server Express 2012

If you buy the professional edition of Visual Studio 2012, all of these different types of apps can be developed from a single IDE.

My focus is on developing apps for the Windows Store. This is the type of application development covered in “Beginning Windows 8 Application Development”. For this purpose I’m using Visual Studio Express 2012 for Windows 8. As you would expect, Visual Studio is already loaded up with an adequate set of templates to jump start development. The express edition even comes with a Windows 8 start screen simulator, so you can test things like screen orientation on your desktop.

Microsoft has done a great deal of work to extend Windows 8 style development to a very broad developer community. Windows 8 Style app development supports the following programming languages;

• C++
• C#
• Visual Basic
• JavaScript

User interfaces can be developed with the following languages;

• HTML5, CSS, and JavaScript
• XAML (Extensible Markup Language)

XAML based user interfaces can be designed and developed using another free development tool called Blend for Visual Studio 2012 (Windows Store apps). Blend is fully integrated with Visual Studio 2012. This makes it very easy for the programmer to seamlessly collaborate with the user interface designer.

At this time I have mostly focused on developing some very simple Windows 8 Style applications using JavaScript, HTML5 and CSS.  In support of rapid application development, Microsoft has developed a robust set of pre-written JavaScript functions specifically for development of Windows Store apps.

Here is a helpful link on learning to build Windows Store apps.

On Friday October 26th, the first day they were available, I bought a new Microsoft Surface tablet. Microsoft installed one of their pop-up holiday stores at North Star Mall, here in San Antonio, Texas. The Microsoft store is located in the mall just a few 100 feet from the Apple store. The Microsoft store is cool and modern looking, but it certainly can’t compare to the style and the on-going buzz of excitement, ones gets at the Apple store. The people working in the Microsoft store were friendly, knowledgeable and very helpful with hands on demonstrations and training. You can also get more information at the online Microsoft Store.

Purchase of the Microsoft Surface Tablet at North Star Mall

It’s been two weeks now and I’m really enjoying the Surface tablet. In my opinion, Microsoft brings a right out of the box, fantastic product to the market. Surface meets all expectations, by providing a great mobile tablet experience, in a light weight and very durable package. More importantly, Surface exceeds expectations by taking the tablet to a whole new level of usability, by extending the desktop PC and notebook experience to a mobile device.

The Surface comes with several built in components which also provide a great notebook like experience.

• Side mounted USB port
• Snap on screen cover that doubles as a key board with track pad
• High definition video output port
• Memory expansion slot that will accommodate an SD card
• And Finally, a built in kickstand to prop up the screen at just the right viewing angle
• Here is an article at Information Week with more details on the Cool Features of the Surface

I’ve been using the Surface tablet on a daily basis for two weeks now. The user experience is fantastic. Of course, during the first few days there was a small learning curve. This was mostly adapting to the new Windows 8 style start screen, which replaces the Windows start button, which was first introduced in Windows 95. Using the touch screen was no problem at all, because of previous experience with smartphones, iPads and iPods. The one thing that did take some time to get used to, is how every edge of the Surface also has functions. The left edge is used for navigating to all the apps you happen to be using. The right edge has a feature called the charm bar, which has functions for search, computer settings and navigating back to the start screen. The top and bottom edges provide functions based on the context of the app you are currently using. The bottom edge also has a built in button for returning to the start page. Once I learned the edges, I found these features to be very useful. They provide a fast and smooth transition when switching from one task to another.

Clearly, this new user interface is a bold attempt on the part of Microsoft, to reach out to the consumer who simply wants to consume content on a mobile device, and perform some light content creation tasks, such as responding to email, and interacting on social media like Facebook and Twitter. The Windows 8 style user interface will also appeal to the consumer who simply wants to use a computer, and is not interested in learning about file systems or managing the hardware. This is similar to the experience you get with an iPad or a MacBook; you just turn on the device and start using it, intuitively learning as you go.

However, there is another side to the Surface experience, which is very appealing to the traditional Windows desktop user. A user who wants to not only consume content on a mobile device, but also generate content and perform office productivity tasks on the same device. The Surface tablet runs a version of the Windows operating system called Windows RT. This version of the operating system also supports the traditional Windows desktop. The desktop is simply another active tile on the start screen that you tap or click on to start. Once in the desktop, it looks very similar to the desktop in Windows 7. The Surface comes with the Office 2013 suite of productivity apps preinstalled. You get;

• Word
• Excel
• Power Point
• One Note
• All of the other productivity accessories we are used to having available in the desktop

In my opinion the Microsoft Surface is the only tablet on the market that lends its self very well to enterprise productivity. Mainly because it does a good job of extending the traditional PC desktop experience to a mobile device. Along with the high resolution screen, the screen cover which also acts as a keyboard, and the built in USB port to support other peripheral devices like a mouse, a memory stick, etc.. In fact I wrote this entire post using the Surface, and my productivity was equal to, if not better, than using a traditional desktop PC.

During this two week experience, I found only one item to complain about, and that is the track pad on the keyboard. I’m using the type cover, which has mechanical keys that work great and feel natural. However, the track pad is adequate at best. Compared to the smooth and accurate performance of the track pad on the MacBook, this track pad leaves a lot to be desired. However, It was easy to work around this problem. I simply attached a wireless mouse with a USB receiver to the Surface, and kept right on working. Besides, the natural tendency to manipulate the touch screen with finger gestures, kind of makes the track pad redundant.

I decided to take a detour of my objectives and explore the MVC 4 design pattern in more detail. I must say, the detour has taken more time than I anticipated, but it has proven to be well worth the extra time. The MVC 4 template in Visual Studio 2012 automatically generates a fully functional website solution. The template contains all of the required components of the Model-View-Controller (MVC) design pattern. The Model-View-Controller (MVC) pattern separates the modeling of the domain, the presentation, and the actions based on user input into three separate classes:

• Model. The model manages the behavior and data of the application domain, responds to requests for information about its state (usually from the view), and responds to instructions to change state (usually from the controller).
• View. The view manages the display of information.
• Controller. The controller interprets the mouse and keyboard inputs from the user, informing the model and/or the view to change as appropriate.

Here is the structural relationship between the three objects.

Model-View-Controller design pattern

The MVC 4 template in Visual Studio 2012 effectively addresses the architectural concerns covered in this blog throughout the development life cycle of the World Of Art Web App;

• Separation of concerns between database access, user interface and business logic
• Incorporates the Entity Framework in a code first process, where the developer can code plain old classes to define the domain in the model, and then generate the database through the entity framework
• The controller object automatically adheres to best practices when handling http request and response actions

The MVC 4 template automates and streamlines much of the development life cycle, by not only generating code, but also providing a well structured scaffolding approach, which causes architectural and design concerns to fade to the background, allowing the developer to focusing more attention on satisfying the functional requirements of the application.

The ASP.Net Web site has an entire section devoted to the MVC 4 template. There is a complete set of tutorials to help you become familiar with all the components and features of MVC 4. I will continue following the MVC 4 tutorial all the way through deployment of sample movie application. After completing the tutorials, I plan to develop an MVC 4 version of the World of Art Web app, and report on how this template improves application design and development inefficiencies.

Visual Studio 2012 – New look and Feel

Within Visual Studio 2012, I have discovered a new technology called Web API. According to ASP.net website, ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework. The Web API framework appears to be a subset of the MVC 4 design pattern, which is also included in Visual Studio Express 2012. ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. ASP.NET MVC includes many features that enable fast, Test Driven Development (TDD) for creating sophisticated applications that use the latest web standards.

As you know from my most recent articles, I’ve been focusing on developing web services based on the Microsoft Windows Communication Foundation (WCF). You may also recall that the web service I developed is based on the REST architectural model. Since the Web API technology is also based on REST, I have decided to add this technology to my repertoire. My objectives are the following;

• Learn Web API from the online tutorials at the ASP.Net website
• Develop a prototype web service with Visual Studio 2012
• Deploy the web service to the could using Microsoft Azure
• Develop a client app for mobile devices like IPad to consume the web service
• If all of this works as expected, I will develop a new web service for the World of Art Web App based on Web API

• GridView
• DetailsView
• SqlDataSource

The ASP.Net Web Form model depends on the ASP.Net Engine, in the web server, to generate the actual HTML rendered by the client. The input to the ASP.Net engine is the XHTML elements and attributes defined in the .aspx web form file. This model supports a very rapid development process. However, it is a poor architectural design for a distributed web app, because the user interface and database access are tightly coupled. This tight coupling of architectural elements, makes long term maintenance and further development of the app more complicated, because the impact of change has a broad affect across the application. Here is the XHTML source code of the first iteration of the Artist page;

<%@ Page Title="World of Art Artist Web Form" Language="C#" MasterPageFile="~/Views/SiteMaster.Master" AutoEventWireup="true" CodeBehind="ArtistWebForm.aspx.cs" Inherits="WorldOfArtWebApp.Views.ArtistWebForm" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:HyperLink ID="HyperLinkBlog" runat="server"  CssClass="devbloglink"
      NavigateUrl="http://lexicon-software.com/the-artist-web-form/" Target="_blank">Developer&#39;s Blog</asp:HyperLink>
 
    <div  id="detailsArtist" class="artistdetaildiv">
    <asp:DetailsView ID="DetailsViewArtist" runat="server" Height="50px"  CssClass="artistview"
          Width="347px" AutoGenerateRows="False" DataSourceID="SqlDataSourceArtist" 
          AlternatingRowStyle-CssClass="altrowstyle" PagerStyle-CssClass="footerstyle" 
          CellPadding="4" RowStyle-CssClass="rowstyleartistviews"
         PagerStyle-ForeColor="#f9f9f9" AllowPaging="True">
          <AlternatingRowStyle CssClass="altrowstyle"></AlternatingRowStyle>
        <Fields>
            <asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="Name" />
            <asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="Name" />
 
           <asp:BoundField DataField="BirthDay" HeaderText="Birthday" 
                SortExpression="BirthDay" DataFormatString="{0:d}" />
            <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
            <asp:BoundField DataField="Country" HeaderText="Country" 
                SortExpression="Country" />
            <asp:BoundField DataField="TypeOfArtist" HeaderText="Type Of Artist" 
                SortExpression="TypeOfArtist" />
        </Fields>
         <PagerStyle CssClass="footerstyle" ForeColor="#F9F9F9"></PagerStyle>
         <RowStyle CssClass="rowstyleartistviews"></RowStyle>
    </asp:DetailsView>
   </div>
 
   <div id="gridArtist" class="artistgriddiv">
    <asp:GridView ID="GridViewArtist" runat="server" AllowPaging="True"  
           CssClass="artistview" AlternatingRowStyle-CssClass="altrowstyle" CellPadding="4"
           RowStyle-CssClass="rowstyleartistviews" HeaderStyle-CssClass="headerstyle" 
           HeaderStyle-ForeColor="#f9f9f9"  AllowSorting="True" 
           DataSourceID="SqlDataSourceArtist" AutoGenerateColumns="False">
        <AlternatingRowStyle CssClass="altrowstyle"></AlternatingRowStyle>
 
        <Columns>
            <asp:BoundField DataField="FirstName" HeaderText="First Name" 
                SortExpression="FirstName" />
            <asp:BoundField DataField="LastName" HeaderText="Last Name" 
                SortExpression="LastName" />
            <asp:BoundField DataField="BirthDay" DataFormatString="{0:d}" 
                HeaderText="Date of Birth" SortExpression="BirthDay" />
            <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
            <asp:BoundField DataField="Country" HeaderText="Country" 
                SortExpression="Country" />
        </Columns>
 
        <HeaderStyle CssClass="headerstyle" ForeColor="AntiqueWhite"></HeaderStyle>
 
        <RowStyle CssClass="rowstyleartistviews"></RowStyle>
    </asp:GridView>
 </div>
 
<asp:SqlDataSource ID="SqlDataSourceArtist" runat="server" 
    ConnectionString="<%$ ConnectionStrings:DB_38836_aspnetdbConnectionString %>" 
    SelectCommand="SELECT FirstName, LastName, BirthDay, City, Country, TypeOfArtist FROM aspnet_Artist">
</asp:SqlDataSource>
 
</asp:Content>

In the second iteration of the Artist page, which I called Art Entities, I eliminated the SqlDataSource web server control, and created a separation of concerns between the user interface and data access. This is where I introduced the concept of a layered architectural design, with the development of the Data Access Layer, and the Data Model Layer. In the Data Model Layer, I developed an Entity Relationship Model with the ADO.Net Entity Framework, which created a line of clear separation, and decoupling, between data access functions and the SQL Server database.

In this phase of development, the user interface evolved into an external layer of the overall web app design. However, the user interface is still based on server side ASP.Net web server controls. I simply exploited the data binding methods, built into these controls, to create an API to the data access layer. Here is the XHTML and C# source code used to render the Art Entities page of the World of Art Web App;

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/SiteMaster.Master" AutoEventWireup="true" CodeBehind="ArtistEntityWebForm.aspx.cs" Inherits="WorldOfArtWebApp.Views.ArtistEntityWebForm" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="gridArtist" class="artistgriddiv">
    <asp:GridView ID="GridViewArtist" runat="server" AllowPaging="True"  
           CssClass="artistview" AlternatingRowStyle-CssClass="altrowstyle" CellPadding="4"
         RowStyle-CssClass="rowstyleartistviews" HeaderStyle-CssClass="headerstyle" 
           HeaderStyle-ForeColor="#f9f9f9"  AllowSorting="True" AutoGenerateColumns="False">
        <AlternatingRowStyle CssClass="altrowstyle"></AlternatingRowStyle>
 
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Artist Name" />
            <asp:BoundField DataField="DateOfBirth" DataFormatString="{0:d}" HeaderText="Date of Birth" />
            <asp:BoundField DataField="PlaceOfBirth" HeaderText="Place Of Birth" />
 
        </Columns>
 
      <HeaderStyle CssClass="headerstyle" ForeColor="AntiqueWhite"></HeaderStyle>
      <RowStyle CssClass="rowstyleartistviews"></RowStyle>
    </asp:GridView>
</div>
<div id="gridWorkOfArt" class="artistgriddiv">
   <asp:GridView ID="GridViewWorkOfArt" runat="server" AllowPaging="true"
    CssClass="artistview" AlternatingRowStyle-CssClass="altrowstyle" CellPadding="4"
         RowStyle-CssClass="rowstyleartistviews" HeaderStyle-CssClass="headerstyle" 
           HeaderStyle-ForeColor="#f9f9f9"  AllowSorting="True" AutoGenerateColumns="False">
        <AlternatingRowStyle CssClass="altrowstyle"></AlternatingRowStyle>
 
        <Columns>
           <asp:BoundField DataField="Title" HeaderText="Title" />
           <asp:BoundField DataField="ArtistName" HeaderText="Artist" />
 
        </Columns>
 
        <HeaderStyle CssClass="headerstyle" ForeColor="AntiqueWhite"></HeaderStyle>
        <RowStyle CssClass="rowstyleartistviews"></RowStyle>
   </asp:GridView>
</div>
 
 
   <div>
   <asp:Label runat="server" ID="labelException"></asp:Label>
   </div>
</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using ArtWorldObjects;
using WorldOfArtWebApp.DataAccess;
 
 
namespace WorldOfArtWebApp.Views
{
    public partial class ArtistEntityWebForm : System.Web.UI.Page
    {
        protected ArtWorldCollectionArtist artistData;
        protected ArtWorldCollectionArtPiece workOfArtData;
        protected TitleArtist titleArtist;
        protected List<TitleArtist> titleArtistList;
 
        protected void Page_Load(object sender, EventArgs e)
        {
            LoadArtistView();
            LoadWorkOfArtView();
        }
 
        protected void LoadArtistView()
        {
            try
            {
                artistData = new ArtWorldCollectionArtist();
 
                if (artistData.ArtWorldCollection.Count > 0 && artistData.ExceptionMessage == string.Empty)
                {
                    this.GridViewArtist.DataSource = artistData.GetListOfArtist();
                    this.GridViewArtist.DataBind();
                }
                else
                {
                    this.labelException.Text = "The artist information you requested is not available. " + artistData.ExceptionMessage;
                }
            }
            catch (Exception ex)
            {
                this.labelException.Text = "The artist information you requested is not available. " + ex.Message;
            }
        }
 
        protected void LoadWorkOfArtView()
        {
            try
            {
                workOfArtData = new ArtWorldCollectionArtPiece();
 
                if (workOfArtData.ArtWorldCollection.Count > 0 && workOfArtData.ExceptionMessage == string.Empty)
                {
                    titleArtistList = new List<TitleArtist>();
                    foreach (var workOfArtInList in workOfArtData.GetListOfArtPiece())
                    {
                        titleArtist = new TitleArtist(workOfArtInList.TheArtist, workOfArtInList);
                        titleArtistList.Add(titleArtist);
                    }
                    this.GridViewWorkOfArt.DataSource = titleArtistList;
                    this.GridViewWorkOfArt.DataBind();
                }
                else
                {
                    this.labelException.Text = "The art information you requested is not available. " + workOfArtData.ExceptionMessage;
                }
            }
            catch (Exception ex)
            {
                this.labelException.Text = "The art information you requested is not available. " + ex.Message;
            }
        }
    }
 
 
    /// <summary>
    /// Helper class for binding data to the Work of art gridview 
    /// </summary>
    public class TitleArtist
    {
        protected string m_artistName;
        protected string m_title;
 
        public TitleArtist()
        {
        }
 
        public TitleArtist(Artist artist, ArtPiece workOfArt)
        {
            m_artistName = artist.Name;
            m_title = workOfArt.Title;
        }
 
        public string ArtistName
        {
            get { return m_artistName; }
        }
 
        public string Title
        {
            get { return m_title; }
        }
    }
}

The ASP.Net Web server controls, used in the first two iterations of the user interface, is a suitable design solution for an enterprise level application, which is running internally to the enterprise. The number of users is limited to the employee and associates base, the application is supported by the internal IT infrastructure of the enterprise as an intranet appliation. The view state and post back model, supported by these web server controls, performs very well in this environment. However, if the application is to be distributed over a wide range of clients, and accessible from the world wide web, a much leaner and flexible architectural model is required. This is a requirement for the World of Art Web App. Therefore, in this latest iteration of the app, I added a web service layer to the architecture, based on the Microsoft Windows Communication Foundation (WCF). Accessing the service layer of the World of Art Web app, was a driving factor behind the design of the third iteration of the user interface.

Accessing the service layer, reverses the flow of content between the client and the server. In the previous versions, where server side controls were used, content was pushed from the server to the client. However, acquiring content from the service layer, requires the client to pull content from the server through an HTTP request.

The third iteration of the artists page, which I called Art Entities from Service, is a very minimal and efficient design, utilizing an HTTP GET Request to retrieve artist data from the web service, and JavaScript to render the artist result set in HTML. I also employed a CSS 3 cascading style sheet to complete the look and feel of the page.

Here is the XHTML source code of the ASP.net web form and the JavaScript source code used in the third iteration of the user interface;

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/SiteMaster.Master" AutoEventWireup="true" CodeBehind="ArtistEntityAjax.aspx.cs" Inherits="WorldOfArtWebApp.Views.ArtistEntityAjax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<link href="Styles/Art.css" rel="Stylesheet" type="text/css" />
<h2>
    List of Artists From World of Art Web Service
</h2>
<p>
 
</p>
<div id="arts">
</div>
<script type="text/javascript" src="../Scripts/GetArtists.js"></script>
 
</asp:Content>

/*
* get the artist content of a JSON file using Ajax 
*
*/
 
$(document).ready(function () {
    getArtistsAjax();
 
});
 
function getArtistsAjax() {
    jQuery.ajax({
        type: 'GET',
        url: 'http://lexicon-software-apps.com/ArtService.svc/GetArtists',
        dataType: "jsonp",
        success: function (result) {
            updateArtists(result);
        },
        error: function (result) {
            requestFailed(result);
        }
    });
}
 
function updateArtists(artists) {
    if (artists.length == 0 || artists == null) {
        requestFailed(artists);
    }
    else {
        var artistDiv = document.getElementById("arts");
        for (var i = 0; i < artists.length; i++) {
            var artist = artists[i];
            var div = document.createElement("div");
            div.setAttribute("class", "artItem");
            div.innerHTML = artist.Name + " was born in " + artist.PlaceOfBirth + " on " + artist.DateOfBirthLongString;
            artistDiv.appendChild(div);
        }
    }
}
 
function requestFailed(results) {
    alert("The artist information you requested is not available");
}

Here is the cascading style sheet. You will notice some of the new CSS 3 attributes like “border-radius”, which is used to form the rounded corners of the artist grid in the Entities From Service page.

/* artists.css */
 
body {
	margin-left: 40px;
	margin-right: 40px;
}
div#arts {
	background-color: #d9d9d9;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	margin: 10px 0px 0px 0px;
	padding: 0px;
	border: 1px solid #d9d9d9;
}
div.artItem {
	font-family: Verdana, Helvetica, sans-serif;
	color: #434343;
	padding: 10px;
}
div.artItem:nth-child(2n)
{
    background-color: #fafafa;
}
div.artItem:first-child {
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
div.artItem:last-child {
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

• Page declaration with a reference to the web site master page
• HTML Heading Tag
• A script tag pointing to a JavaScript source code file called GetArtists.js

Here is the XHTML mark up code of the .aspx web form;

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/SiteMaster.Master" AutoEventWireup="true" CodeBehind="ArtistEntityAjax.aspx.cs" Inherits="WorldOfArtWebApp.Views.ArtistEntityAjax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<link href="Styles/Art.css" rel="Stylesheet" type="text/css" />
<h2>
    List of Artists From World of Art Web Service
</h2>
<p>
 
</p>
<div id="arts">
</div>
<script type="text/javascript" src="../Scripts/GetArtists.js"></script>
 
</asp:Content>

The heart of the client application is the JavaScript in the GetArtists.js file. There are two primary functions;

• getArtistsAjax() – Requests artist data from the World Of Art Web Service
• updateArtists() – Dynamically generates the user interface

Here is the JavaScript source code of the client.

/*
* get the artist content of a JSON file using Ajax 
*
*/
 
 
$(document).ready(function () {
    getArtistsAjax();
 
});
 
 
function getArtistsAjax() {
    jQuery.ajax({
        type: 'GET',
        url: 'http://lexicon-software-apps.com/ArtService.svc/GetArtists',
        dataType: "jsonp",
        success: function (result) {
            updateArtists(result);
        },
        error: function (result) {
            requestFailed(result);
        }
    });
}
 
 
function updateArtists(artists) {
    if (artists.length == 0 || artists == null) {
        requestFailed(artists);
    }
    else {
        var artistDiv = document.getElementById("arts");
        for (var i = 0; i < artists.length; i++) {
            var artist = artists[i];
            var div = document.createElement("div");
            div.setAttribute("class", "artItem");
            div.innerHTML = artist.Name + " was born in " + artist.PlaceOfBirth + " on " + artist.DateOfBirthLongString;
            artistDiv.appendChild(div);
        }
    }
}
 
function requestFailed(results) {
    alert("The artist information you requested is not available");
}

Lets first examine the getArtistsAjax() function. There are many different ways to perform an HTTP GET request. After trying a number of different combinations, I found this implementation to be a straightforward and flexible solution. The getArtistsAjax() function uses the JQuery.ajax() method, to perform the asynchronous HTTP(Ajax) request for artist data from the ArtService. The jQuery.ajax() method can be configured with a multitude of settings and parameters. However, for the simple HTTP GET request required by this application, I found it necessary to only pass five arguments to the jQuery.ajax() method, which are coded as key/value pairs;

• type: “GET” – The type of request to make (“POST” or “GET”)
• url: ‘http://lexicon-software-apps.com/ArtService.svc/GetArtists’ – A string containing the URL to which the request is sent.
• dataType: “jsonp” – Loads in a JSON block using JSONP. Adds an extra “?callback=?” to the end of your URL to specify the callback. Disables caching by appending a query string parameter, “_=[TIMESTAMP]“, to the URL unless the cache option is set to true.
• success: function() – A function to be called if the request succeeds.
• error: function() – A function to be called if the request fails.

The most interesting setting is the dataType set to “jsonP”. This gives the client flexibility to perform a “GET” request from a domain other than the one that served the original page request. The following illustrates an example of this. I setup an alternate domain at Winhost called Lexicon-Software-Learning.com. I published the World of Art Web Service at Lexicon-Software-Learning.com. I then changed the url setting to point to the learning domain. Here is the result;

The artists entity web page is served from Lexicon-Software-Apps.com domain and the get artists data request is served from Lexicon-Software-Learning.com.

The other primary JavaScript function in GetArtists.js is the updateArtists() function. It receives the JSON formatted data result set from the HTTP GET request. The JSON data is basically an array of artist objects. This function simply iterates through the array of artist objects, and adds them as elements to the web pages’ Document Object Model (DOM) object. I also applied some new CSS 3 style sheet elements, to finish off the look and feel, of the list of artists page.

I will cover the user interface in more detail in my next post. We will also look at the evolution of the user interface in the World of Art Web App, from the first iteration which was server side generated, to this latest iteration which is client side generated.

Here is the CSS 3 Cascading Style Sheet

/* artists.css */
 
body {
	margin-left: 40px;
	margin-right: 40px;
}
div#arts {
	background-color: #d9d9d9;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	margin: 10px 0px 0px 0px;
	padding: 0px;
	border: 1px solid #d9d9d9;
}
div.artItem {
	font-family: Verdana, Helvetica, sans-serif;
	color: #434343;
	padding: 10px;
}
div.artItem:nth-child(2n)
{
    background-color: #fafafa;
}
div.artItem:first-child {
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
div.artItem:last-child {
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

From the Build Menu in Visual Studio 2010, select the Publish WorldOfArtServiceApp option. This will launch the Publish Web dialogue box.

As you can see from the illustration below, my hosting provider, WinHost, supports the one click publishing feature in Visual Studio 2010. I’m using the same server URL and domain name as the World of Art Web App. Notice the check box to indicate this is an IIS application on destination.

By structuring the WCF web service as a separate project I have the flexibility to publish to other domain names I have hosted at WinHost. The only disadvantage to this approach, is that anytime the World of Art Web App is re-published with new development, the World of Art Web Service also must be re-published. It appears that the World of Art Web Service looses the reference to the ArtWorldObjects in the World of Art Domain.

Publish WCF Web Service in Visual Studio 2010 to hosting provider Winhost

My hosting provider, WinHost, fully supports IIS 7 hosting for my .NET web apps and WCF web services. In the illustration below, I’m using the IIS 7 Manager to remotely manage the IIS 7 server where my applications have been deployed.

Internet Information Services (IIS) 7 Manager is an administration UI that provides you with a new way to remotely manage IIS 7.x servers. I recommend reviewing the Getting Started with IIS Manager article by Tobin Titus on the IIS.net website.

IIS 7 Support at WinHost

As you can see, deployment and remote administration of the World Of Art Web Service, is a very straight forward process. The important thing to remember, is that I put some careful forethought into selecting a hosting provider, that fully supports the combination of technologies exploited in the architectural design of the applications;

• ASP.net
• MS SQL Server
• WCF Web Services
• IIS 7 Remote Management
• One-Click Publishing

Visit WinHost for more information.

In my next post, we begin discussions about the World of Art Client, which is consuming the artist data from the World of Art Web Service.

<?xml version="1.0"?>
<configuration>
  <connectionStrings>
    <add name="ApplicationServices" connectionString="Data Source=tcp:s07.winhost.com;Initial Catalog=DB_38836_aspnetdb;User ID=DB_38836_aspnetdb_user;Password=**********;Integrated Security=False;" providerName="System.Data.SqlClient" />
    <add name="ConnectionStringArtWorld" connectionString="Data Source=tcp:s07.winhost.com;Initial Catalog=DB_38836_aspnetdb;User ID=DB_38836_aspnetdb_user;Password=**********;Integrated Security=False;" providerName="System.Data.SqlClient" />
    <add name="DB_38836_aspnetdbConnectionString" connectionString="Data Source=s07.winhost.com;Initial Catalog=DB_38836_aspnetdb;Persist Security Info=True;User ID=DB_38836_aspnetdb_user;Password=**********" providerName="System.Data.SqlClient" />
    <add name="WorldOfArtContext" connectionString="metadata=res://*/DataModels.WorldOfArt.csdl|res://*/DataModels.WorldOfArt.ssdl|res://*/DataModels.WorldOfArt.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=s07.winhost.com;initial catalog=DB_38836_aspnetdb;persist security info=True;user id=DB_38836_aspnetdb_user;password=**********;multipleactiveresultsets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />
  </connectionStrings>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <httpRuntime maxRequestLength="524288" />
  </system.web>
  <system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="webHttpBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <bindings>
      <webHttpBinding>
        <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>
    <services>
      <service name="WorldOfArtServiceApp.ArtService">
        <endpoint address="" binding="webHttpBinding"
                  bindingConfiguration="webHttpBindingWithJsonP"
                  contract="WorldOfArtServiceApp.IArtService"
                  behaviorConfiguration="webHttpBehavior"/>
      </service>
    </services>
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

The first thing to notice is the ConnectionStrings tag. Since the World of Art Web Service references the Data Access Layer and the Data Model, from the World of Art Web App, it is necessary to provide the database connection information to the web service.

Now, lets discuss the configuration of the World of Art Web Service. Configuring the service in the Web.config file, gives us the same flexibility in deployment and management of the web service, as configuring a web application in the Web.config file. Instead of hard coding configuration elements in the application code, it is preferable to expose this information in the configuration file. This will allow an administrator to configure the application for final deployment, without having to modify code and rebuild the application.

The World of Art Web Service, is based on the Windows Communication Foundation (WCF) and will be hosted by Internet Information Services (IIS). The web service run time environment is .NET Framework version 4. Therefore, this configuration is specific to a WCF services hosted in IIS. IIS depends on the mark up found in the .svc file to implement the WCF service. My hosting provider, Winhost, supports all of these components.

The WCF configuration scheme includes three major sections;

• serviceModel
• bindings
• services

Here is the serviceModel seciton ;

<system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="webHttpBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <bindings>
      <webHttpBinding>
        <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>
    <services>
      <service name="WorldOfArtServiceApp.ArtService">
        <endpoint address="" binding="webHttpBinding"
                  bindingConfiguration="webHttpBindingWithJsonP"
                  contract="WorldOfArtServiceApp.IArtService"
                  behaviorConfiguration="webHttpBehavior"/>
      </service>
    </services>
  </system.serviceModel>

The entire service configuration is bound by the system.serviceModel elelment. Lets first examine the services element. Within services we find one or more service elements. It has a name attribute to identify the service. Within the service element, the endpoint element is used to configure one or more service endpoints. Notice how the address attribute has a null value. Since this service is hosted in IIS, it’s not necessary to specify an endpoint address. In fact, specifying a fully qualified endpoint address can lead to deployment errors in IIS. With an IIS hosted WCF service, the end point address is always relative to the .svc file that represents the service.

The binding attributes of the endpoint element, specify how the endpoint communicates with the world, in terms of transport and protocol schemes. In this case, I specified the WebHttpBinding Class. A binding used to configure endpoints for WCF Web services that are exposed through HTTP requests instead of SOAP messages. I am also utilizing the bindingConfiguration attribute of the endpoint element. This attribute is used in conjunction with binding to reference a specific binding configuration in the configuration file. In this case it is referencing a binding elelment in the webHttpBinding section named “webHttpBindingWithJsonP”, where I specify a custom binding configuration using the crossDomainScriptAccessEnabled, which is set to true. I will discuss cross domain access to web services in a future post.

The final attribute of the endpoint element is the behavior configuration attribute. I gave the behavior configuration a unique name of “webHttpBehavior”. The configuration of the endpoint itself can be found in the behavior element of endpoint behaviors section. The only required element I utilized is the webHttp element. This element specifies the WebHttpBehavior on an endpoint through configuration. This behavior, when used in conjunction with the webHttpBinding standard binding, enables the Web programming model for a Windows Communication Foundation (WCF) service. I simply took all of the default values for attributes in the webHttp element.

As you can see, it is absolutely necessary to completely understand the operational requirements of the WCF web service, prior to configuration. There is a lot of flexibility in this area of WCF. However, with more flexibility comes more responsibility. In my next post I will cover deployment of the WCF web service.

In the early phases of development, I isolated the entities of the world of art domain into a separate class library called ArtWorldObjects. Artist is one of the entities defined in this class library. At this time, I want the WorldOfArtServiceApp to only expose the Artist object, and more specifically, only certain properties of the Artist object. To acomplish this, I will utilize the Data Contract Attribute Class and the Data Member Attribute Class. The data contract attribute specifies that the type defines or implements a data contract. The data member contract, when applied to the member of a type, specifies that the member is part of a data contract, and can be serialized by the DataContractSerializer Class.

Here is the source code for the IArtist interface and the Artist class, with data contract attribute and data member attribute applied;

using System;
using System.Collections.Generic;
using System.Runtime.Serialization;
using System.Linq;
using System.Text;
 
namespace ArtWorldObjects
{
    public interface IArtist
    {
        [DataMember]
        string Name
        { get; set; }
 
        DateTime DateOfBirth
        { get; set; }
 
        [DataMember]
        string DateOfBirthShortString
        { get; set; }
 
        [DataMember]
        string DateOfBirthLongString
        { get; set; }
 
        [DataMember]
        string PlaceOfBirth
        { get; set; }
 
        ArtistTypes.TypesOfArtists Type
        { get; set; }
 
        Int64 ID
        { get; }
 
        ArtPiece CreateWorkOfArt();
    }
}

using System;
using System.Collections.Generic;
using System.Runtime.Serialization;
using System.Linq;
using System.Text;
 
namespace ArtWorldObjects
{
    [DataContract]
    public  class Artist : IArtist
    {
        protected string artistName;
        protected DateTime dateOfBirth;
        protected string placeOfBirth;
        protected ArtistTypes.TypesOfArtists typeOfArtist;
        protected ArtPiece workOfArt;
        protected Int64 artistID;
 
        public Artist()
        {
 
        }
 
        [DataMember]
        public string Name
        {
            get
            {
                return artistName;
            }
            set
            {
                artistName = value;
            }
        }
 
        public DateTime DateOfBirth
        {
            get
            {
                return dateOfBirth;
            }
            set
            {
                dateOfBirth = value;
            }
        }
 
        [DataMember]
        public string DateOfBirthShortString
        {
            get
            {
                return DateOfBirth.ToShortDateString();
            }
 
            set
            {
                DateOfBirthShortString = DateOfBirth.ToShortDateString();
            }
 
        }
 
        [DataMember]
        public string DateOfBirthLongString
        {
            get
            {
                return DateOfBirth.ToLongDateString();
            }
            set
            {
                DateOfBirthLongString = DateOfBirth.ToLongDateString();
            }
        }
 
        [DataMember]
        public string PlaceOfBirth
        {
            get
            {
                return placeOfBirth;
            }
            set
            {
                placeOfBirth = value;
            }
        }
 
 
        public ArtistTypes.TypesOfArtists Type
        {
            get
            {
                return typeOfArtist;
            }
            set
            {
                typeOfArtist = value;
            }
        }
 
        public ArtPiece CreateWorkOfArt()
        {
            return workOfArt;
        }
 
 
 
        public long ID
        {
            get
            {
                return artistID;
            }
 
        }
    }
}

Click on this link; Artists in JSON Format to send a “GET” request to the World of Art Web Service app. You can also copy the following link into your browser’s address bar to retrieve the JSON data;

http://lexicon-software-apps.com/ArtService.svc/GetArtists

Upon examining the JSON text returned by the service, you will see that the only properties of artist returned by the web service, are those enhanced with the Data Member attribute. Here is what the artist data in JSON format looks like;

[{"DateOfBirthLongString":"Thursday, August 04, 1960","DateOfBirthShortString":"8\/4\/1960","ExceptionMessage":"No Errors","Name":"Michael Swearngin","PlaceOfBirth":"Olathe, Kansas United States"},{"DateOfBirthLongString":"Monday, January 01, 1753","DateOfBirthShortString":"1\/1\/1753","ExceptionMessage":"No Errors","Name":"Michelangelo di Lodovico Buonarroti Simoni","PlaceOfBirth":"Florence Italy"},{"DateOfBirthLongString":"Monday, January 01, 1753","DateOfBirthShortString":"1\/1\/1753","ExceptionMessage":"No Errors","Name":"Donatello di Niccolo` di Betto","PlaceOfBirth":"Florence Italy"},{"DateOfBirthLongString":"Monday, January 01, 1753","DateOfBirthShortString":"1\/1\/1753","ExceptionMessage":"No Errors","Name":"Sandro Botticelli","PlaceOfBirth":"Florence Italy"},{"DateOfBirthLongString":"Monday, January 01, 1753","DateOfBirthShortString":"1\/1\/1753","ExceptionMessage":"No Errors","Name":"Leonardo da Vinci","PlaceOfBirth":"Florence Italy"},{"DateOfBirthLongString":"Monday, August 06, 1928","DateOfBirthShortString":"8\/6\/1928","ExceptionMessage":"No Errors","Name":"Andy Warhol","PlaceOfBirth":"Pittsburgh, Pennsylvania United States"},{"DateOfBirthLongString":"Saturday, November 14, 1840","DateOfBirthShortString":"11\/14\/1840","ExceptionMessage":"No Errors","Name":"Claude Monet","PlaceOfBirth":"Paris France"},{"DateOfBirthLongString":"Friday, November 25, 1881","DateOfBirthShortString":"11\/25\/1881","ExceptionMessage":"No Errors","Name":"Pablo Picasso","PlaceOfBirth":"Malaga Spain"}]

For the sake of convenience I added three properties, of type string, to the IArtist Interface;

• ExceptionMessage – messages to communicate any problems to the client
• DateOfBirthShortString – date in “mm/dd/yyyy” format
• DateOfBirthLongString – date in fomat “Monday, August 06, 1928″

The short and long data formats where necessary, because I discovered that when type System.DateTime is serialized to JSON, a very nasty date format is produced. Something like this; “DateOfBirth”:”\/Date(-296931600000-0700)\/”. Therefore, I excluded the date of birth property with a type of System.DateTime from being a Data Member. However, you can see in the source code, that the short and long date of birth properties are derived from the System.DateTime date of birth property.

In my next post, I will cover the configuration and deployment of the World Of Art Web Service. After that, I will cover the client, which uses JavaScript to consume artist data from the web service. This link; Artists from the Web Service will launch the client in the World of Art Web App.

• The request must be an XMLHttpRequest using the “GET” verb
• The “GET” request must specifically request access to the ArtService.svc and the GetArtists method
• The service must respond to the request with data serialized into the Json format

Here is a simple JavaScript function which would satisfy the contractual requirements for a request;

function getArtistsAjax() {
    $.ajax({
        type: 'GET',
        url: 'http://lexicon-software-apps.com/ArtService.svc/GetArtists?callback=updateArtists',
        dataType: "jsonp",
        success: function (result) {
            updateArtists(result);
        }
    });
}

Once again, here is the IArtService interface where the mutually binding contract between the service and clients is defined;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using ArtWorldObjects;
 
namespace WorldOfArtServiceApp
{
    [ServiceContract]
    public interface IArtService
    {
 
        [OperationContract]
        [WebGet(ResponseFormat = WebMessageFormat.Json)]
        List<Artist> GetArtists();
    }
  }

As you can see, the interface also uses the System.Runtime.Serialization and System.ServiceModel.web name spaces to fulfill the request.

Now, lets examine the implementation of the IArtService interface. Here is the source code of the ArtService class which implements the IArtService interface;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.ServiceModel.Activation;
using System.Text;
using System.Net;
using ArtWorldObjects;
using WorldOfArtWebApp.DataAccess;
 
namespace WorldOfArtServiceApp
{
    public class ArtService : IArtService
    {
        protected ArtWorldCollectionArtist artistData;
 
        public List<Artist> GetArtists()
        {
            try
            {
                artistData = new ArtWorldCollectionArtist();
 
                if (artistData.ArtWorldCollection.Count > 0 && artistData.ExceptionMessage == string.Empty)
                {
                    return artistData.ArtWorldCollection;
                }
                else
                {
                    throw new WebFaultException(HttpStatusCode.BadRequest);
                }
            }
            catch 
            {
                throw new WebFaultException(HttpStatusCode.BadRequest);
 
            }
 
        }
    }
}

As I stated in an earlier post, the purpose of the Art Service Class is not to expose the business logic of the World of Art web app. Instead, the purpose of the Art Service, is to simply expose specific data elements from the World of Art domain, which can be served upon request, to various software clients. In order to retrieve data from the world of art domain, the ArtService class references two name spaces from the WorldOfArtWebApp;

• ArtWorldObjects
• WorldOfArtWebApp.DataAccess

With these references, the GetArtist() method can reuse components of the WorldOfArtWebApp from the Data Access Layer and the Data Model defined in the Entity Framework.

The GetArtist() method is bound by the Operation Contract, defined in the IArtService interface, to return a list of artist objects. This requirement is satisfied by simply creating a new instance of the ArtWorldCollectionArtist Class, and accessing the collection of artist objects in the ArtWorldCollection property. The collection of artist objects is retrieved from the WorldOfArtContext, generated from the Entity Framework. The WCF web service will serialize each of this artist objects into JSON format as specified in the operation contract.

In my next post, I will discuss how to specify which properties of the Artist object are exposed to the web service. Also, here is the source code for the ArtWorldCollectionArtist class, invoked by the GetArtist() method.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Objects;
using ArtWorldObjects;
using WorldOfArtWebApp.DataModels;
 
namespace WorldOfArtWebApp.DataAccess
{
    public class ArtWorldCollectionArtist : IArtWorldCollection<Artist>
    {
        protected WorldOfArtContext m_WorldOfArtEntities;
        protected List<Artist> m_artistList;
        protected string m_exceptionMessage;
        protected Artist m_artist;
 
        public ArtWorldCollectionArtist()
        {
            m_exceptionMessage = string.Empty;
            m_WorldOfArtEntities = new WorldOfArtContext();
            m_artistList = new List<Artist>();
            GetArtCollectionData();
        }
 
        public ObjectContext WorksOfArtContext
        {
            get { return m_WorldOfArtEntities; }
        }
 
        public List<Artist> ArtWorldCollection
        {
            get { return m_artistList; }
        }
 
        public string ExceptionMessage
        {
            get { return m_exceptionMessage; }
        }
 
        public void GetArtCollectionData()
        {
            try
            {
                using (m_WorldOfArtEntities)
                {
                    var artistQuery = from artists in m_WorldOfArtEntities.aspnet_Artist
                                      select artists;
                    foreach (var artist in artistQuery)
                    {
                        m_artist = new Artist();
                        m_artist.Name = artist.FirstName + " " + artist.LastName;
                        m_artist.PlaceOfBirth = artist.City + " " + artist.Country;
                        m_artist.DateOfBirth = (DateTime)artist.BirthDay;
 
                        m_artistList.Add(m_artist);
                    }
                }
            }
            catch (Exception ex)
            {
                m_exceptionMessage = ex.Message;
            }
        }
 
        public Artist[] GetListOfArtist()
        {
            Artist[] artistList = ArtWorldCollection.ToArray();
            return artistList;
        }
    }
}