Category Archives: HTML5

HTML5

Evolution of the User Interface

By Tim Daniels
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;

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;

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;

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.

The AJAX Client and Cross-Domain GET Requests

By Tim Daniels
In developing the client to consume the World of Art Web Service, I decided to stick with the ASP.Net Web Form (.aspx). This allowed me to take advantage of the master page concept already implemented in the World of Art Web App. Following is the markup source code of the .ASPX page. As you can see it has some very basic ingredients;

  • 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;

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.

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;

Cross Domain Get Request

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

Return of the Jedi Blogger with HTML5 and Web Services

It has been a very busy summer and three months have slipped away since my last post. Since then, I’ve been working on other projects and doing some summer time traveling, which included visits to Los Angeles and Las Vegas. I have also been doing some very interesting work with HTML5 and web services. Well, with summer time activities winding down, it’s time to get back to work on the World of Art Web App project. In coming posts, I will be enhancing the server side of the web app, with a new web service, based on Microsoft’s Windows Communication Foundation (WCF). I will also enhance the client, with a new artist page based on the new web standard, HTML5.

My next post will cover the WCF web service. The purpose of the web service, is to listen for requests from various software clients, and respond to the requests with information from the World of Art Web app. The architectural objective in the design of the web service, is not to expose the business logic of the web app to world wide web. Instead, the design objective is to only expose specific data elements and implement a scheme, that enables client applications to access this data, and manipulate it using their own business logic. With these design objectives in mind, I have decided to use the Representational State Transfer (REST) architectural model.

The web service will reuse all of the Entity Framework and the data access layer components already developed. As previously stated, these components will not be exposed by the web service. However, the web service will use the output of these components to satisfy a basic contract for information, as requested by a client application.