At this time I have demonstrated three iterations of the Artist web page in The World of Art Web App. The first iteration, simply called the Artist page, was designed with the ASP.Net Web Form model. In this example, I developed the user interface with three ASP.Net server side controls;
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'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; } |
