Category Archives: World Of Art Web App

An actual web development project

ASNA Visual RPG – Using The List Class with Generic Types

One of my most favorite classes in the .NET Framework has to be the List Class in the System.Collections.Generic namespace. More specifically, the generic list class as List(T) where T represents a generic type. According to Microsoft Developer Network (MSDN), the list class represents a strongly typed list of objects that can be accessed by index. The List class also provides methods to search, sort, and manipulate lists.

Collections Vs. Arrays

In many applications it is desirable to create and manage groups of related objects. The .NET Framework offers two ways to group objects;

  1. Creating arrays of objects
  2. Creating collections of objects

Arrays are most useful for creating and working with a fixed number of strongly-typed objects.

Collections provide a more flexible way to work with groups of objects. Unlike arrays, the group of objects you work with can grow and shrink dynamically as the needs of the application change.

If your collection contains elements of only one data type, you can use one of the classes in the System.Collections.Generic namespace. A generic collection enforces type safety so that no other data type can be added to it. When you retrieve an element from a generic collection, you do not have to determine its data type or convert it.

A collection is a class, so you must declare a new collection before you can add elements to it. Here is an example where I created a collection of Guitar objects, and used the add method of the List class, to load the collection with guitar objects;

Sorting
The List class has great sorting capabilities. The List Class contains a Sort method that is easy to use when the collection contains simple value types like strings or integers. However when the collection of objects are complex types, with multiple properties, sorting by the value of specific properties does get a little more complicated. Here is an example;

I created a class called guitar with multiple properties as follows;

Now, lets say I want to sort a collection of guitar objects by price. With the sort method of the List class I can delegate sorting by price to another class, whose sole purpose is to perform the sort function. I can accomplish this by inheriting from another class in the System.Collections namespace called Comparer and overriding its Compare method.
Here is the class I wrote for this purpose;

Anytime I need to sort a collection of guitars by price, I can simply pass an instance of the SortGuitarsByPrice class, as an argument to the List Sort method. Here is a code snippet;

Here is another example for sorting the collection of guitars by builder and model;

To Array

Converting the generic list of objects to a simple array of objects can be very handy in a number of situations. For example, a generic list of objects can be very powerful in a web service application. However, it may be necessary to convert the generic list to an array, in order to support Java and other types of web service consumers. To accomplish this the List class also contains a ToArray() method. Here’s a code snippet;

In my next post I’ll discuss the search capabilities of the List class. I’ll also cover the object-oriented design concept of delegation with an example that utilizes the FindAll() method of the list class.

Customized Configuration File Sections

The Microsoft .NET framework supports application figuration files for Windows applications, and web applications. An application configuration file is an XML document which contains settings specific to an application. The file contains configuration settings that the common language runtime can read. It can also contain settings that the application itself can read.

In this post I’ll show you how to create custom configuration file sections and how to access the configuration settings in an AVR.NET program. In order to demonstrate this concept, I have created an example AVR.NET application dealing with geometric shapes. In the application configuration file, I want to provide settings that an application administrator can manipulate, without modifying or rebuilding the application. For this example the settings will control the order in which geometric shapes will be drawn by the application.

Here is the XML of the App.config file

In this configuration example, everything is contained in the configuration section. Within the configSections element I describe my custom section with a sectionGroup element. On line 4 of the XML file I declare a sectionGroup named “shapeConfiguration” and a section named “shapeOrder”. I also specified that this section consists of name/value pairs by giving the type attribute a value of “System.Configuration.NameValueSectionHandler”. The type attribute is required, and specifies the name of the configuration section handler class, that handles the processing of the configuration settings that are in the section or element that is specified in the name attribute.

Accessing The Configuration File In AVR.NET

Accessing the configuration settings in an AVR.NET class will require two using statements;

The AVR.NET example will use the ConfigurationManager Class and the NameValueCollection class. The ConfigurationManager class will access the settings in the shapeOrder element of the configuration file. The NameValueCollection class will store the settings in memory as a collection of key/value pairs.

Here is the AVR.NET Code

The ConfigurationManager Class has a GetSection method that takes a string argument. Notice how the string is in file path notation for navigation to the shapeOrder element in the configuration file. The GetSection method returns a type of System.Object, so I used the AVR *As keyword to cast the name/value pairs of the shapeOrder element to a NameValueCollection. This type cast is also facilitated by the NameValueSectionHandler class I specified in the configuration file.

Now I can use the name value collection to assign a sorting rank to each instance of shape.

Here is the AVR.NET code

The NameValueCollection class has a Get method that accepts a string argument, which represents a key associated with a value in the collection. The Get method retrieves the value associated with the key. Notice how I used the Type class and the GetType method of each shape to form the key to get from the name value collection. This ensures that I retrieve the correct sort ranking associated with each shape object, no matter what the new instance of the shape class is called.

Each shape object has a RankOrder property which can be set based on the shapeOrder settings in the configuration file.

The GetShapesWithRank function in the above code snippet returns a generic list of shape objects. In my next post I’ll show you how to sort the generic list of shapes based on the RankOrder property of each shape.

Object Oriented Programming Stuff

Each shape class is derived from a shape base class which implements a shape interface. In the code snippet below, you can see that the IShape interface provides an abstraction for all shape entities referenced by the application. The interface defines only the essential elements of a shape;

  • Rank Order – a property that defines the rank of a shape in a hierarchy
  • Draw – a method for drawing a shape

The Shape class implements the IShape interface. You can see that the implementation of the Rank Order property is now concrete. However, the Draw method remains abstract and it is defined as a virtual method by the Modifier keyword with a value of *Overridable.

The concrete implementation of shape is completed in the Square class and the Circle class. They inherit from the Shape base class and override the Draw method with their own unique implementation. The Modifier keyword with a value of *Overrides facilitates the concrete implementation.

The following code sample demonstrates how well AVR.NET supports object oriented programming concepts like abstraction and inheritance. This design makes the AVR.NET code more flexible, reusable and maintainable. This design is much less vulnerable to the impact of ever changing requirements.

Here is the AVR.NET code where the shapes object model is defined

The complete source code of the application developed for this post can be downloaded here.

Code-First Entity Framework’s Fluent API

By Tim Daniels
This is a follow-up to my post on the Code-First Development Workflow. In that post I described how the Code-First workflow automatically generated an object model and a SQL Server database, by implementing the concept of convention over configuration. With this approach, Code-First assumes that the POCO classes defined in the Entities class library, follow the conventions of the schema that Entity Framework uses for a conceptual model. If this is the case, then Entity Framework is able to work out the details of what needs to be done, to form the object model and the relational database. However, if the conventions established in the POCO classes do not produce the desired result, you still have the ability to add configurations to your classes. As we look more closely at this approach, you will see that sometimes the best solution, is a compromise between two opposing techniques and technologies.

When I defined the domain entities for the Action Manager app, I created a one-to-many relationship between the customer object and the project object. In other words, a customer can have one-to-many projects. Here is the code where this is accomplished.

In the customer class, there is a virtual property called Projects, which is defined as a generic list of Project objects. This is known as a navigation property. The project class also has a navigation property of type customer. In this case, the navigation properties establish the convention that a customer can have one to many projects. With this bit of information, Entity Framework created the Customers table and the Projects table in the SQL Server database as illustrated here;

Fluent API Customers table and Projects table

Fluent API Cutomers table and Projects table


As you can see from the code snippet above, I chose not to clutter up the project class with a property for customer ID. However, this caused Entity Framework to create a foreign key relationship between projects and customers that allows the foreign key to be null. Obviously, this was not my intention.

With the code-first fluent API, I can configure the contextual model to generate the foreign key relationship between project and customer ID as not nullable. Here is the code where this is accomplished.

The DbContext class has an overridable method called OnModelCreating. This is where I can tweak the conventions of the entity classes, with specific configurations, to produce the desired result. In this case, the HasRequired method of the modelBuilder class, configures the Customer property of the Project entity, to be required for input. This configuration causes the foreign key relationship between project and customer ID to be defined as not nullable, as illustrated here.

Fluent API Configuration of Customers table and Projects table

Fluent API Configuration of Customers table and Projects table


Here is an outstanding article by Julie Lerman on Code First Relationships Fluent API. Julie covers this subject in more detail with several different examples of configuration through the fluent API.

Managing Database Connections

By Tim Daniels

Before an application can access information from a database, a proper connection to the server hosting the database, and the database itself, must be established. Managing database connections to optimize application performance, and application maintainability, is relatively easy to accomplish on the Microsoft .NET platform. To demonstrate this, I’ve developed a C#.NET class, which utilizes three key components for managing database connections;

Configuration File

First, lets discuss the configuration file. A configuration file in .NET, is simply an XML file with parent/child nodes. Each node can contain a set of both system defined, and programmer defined, key/value pairs. These key/value pairs contain application settings to control specific application and program level functions. The configuration file can be accessed by program code throughout an application. Many of the project templates in Visual Studio will automatically generate a configuration file for the project. However, a configuration file can be manually added to a project simply by right clicking on the project name in the Solution Explorer, taking the add new item menu option, and then selecting Application Configuration File, as illustrated here;

Adding an application config file

Adding an application configuration file to a project in Visual Studio 2012

This will add an XML file called App.config to the Visual Studio project. There is one subtle difference when adding a configuration file to a website project. The configuration file is called Web Configuration File, and adds an XML file called Web.config to the project, as illustrated here;

Adding a web configuration file

Adding a web configuration file to a website project in Visual Studio 2012

The beauty of the configuration file, is that it’s deployed along with the application. Configuration files can be changed as needed. Developers can use configuration files to change settings without recompiling the application. Administrators can use configuration files to set policies that affect how applications run on their computers.

Here is the application configuration file I created for an application I’m currently developing.

As you can see there are several XML nodes dealing with Entity Framework, which is another component I’m using in this application. For this discussion we are only concerned with the “configuration” node and its child node “connectionStrings”.

Now lets look at an example of using the configuration file to manage database connections in an application. Below is a C# class I wrote called “ConnectionsStrings”. Here is how the class is implemented in an application that access a SQL Server database.

Database Connection Management Solution
The objectives for developing a database connection management solution are as follows;

  • Develop a reusable class with flexibility to retrieve a connection string from the App.config file, or the Web.config file, and return the string to the consumer
  • Implementation of the ConfigurationManager class, to take advantage of having the database connection string coded in one place, the App.config file. Thus, eliminating the need to have it hard-coded throughout the application. This improves overall maintainability
  • Implementation of the SqlConnectionStringBuilder class, to supply additional values to the connection string, such as user name and password

Configuration Manager
The ConnectionStrings class below, has a method called BuildConnectionString. You will notice that the method is also overloaded with a version that will accept the following parameters;

  • dataSource
  • userName
  • userPassword

The BuildConnectionString method implements two classes from the System.Configuration name space.

The ConfigurationManager class has a property called ConnectionStrings. This property gets the connection strings section data from the current application’s default configuration file. It returns a connection string settings collection object. This collection object holds the contents of the connection strings section of the configuration file. Refer back to the configuration file example above to see the contents of the connection strings section. Remember how I described the contents of the configuration file as key/value pairs. In this case, the key is name=”DbConnection”. The value associated with this key is connectionString=”Data Source=.\SQLEXPRESS;Initial Catalog=Lexicon.ActionManager.ProjectManagementContext;Integrated Security=True”.

The following line of code retrieves the value associated with “DbConnection” and assigns it to variable called settings which is a type of ConnectionStringSettings.

Don’t forget to add a reference to the System.Configuration name space in your project and put the using System.Configuration statement at the top of the class.

Connection String Builder
Now lets take a look a the SqlConnectionStringBuilder class. This class comes in handy when additional information needs to be added to the connection string in the configuration file. In cases where it may not be practical to store the connection string in a configuration file, it can be used to build the entire connection string from a set of parameters. The SQLConnectionStringBuilder class has numerous properties for configuring all kinds of settings related to database connectivity. In my ConnectionStings class, I overloaded the BuildConnectionString method to accept data source, user name and password as parameters, that supply additional information for the connection string retrieved from the configuration file.

Final Implementation
In order to make the ConnectionStrings class as reusable as possible, I’m hosting it within a separate class library called “Connections”. This class library is referenced by a console application project I developed for unit testing purposes. This is illustrated in the solution explorer of Visual Studio 2012.

Solution Explorer with Connections class library

Solution Explorer with Connections class library


Finally, here is one implementation of the ConnectionStrings class, where it is used to populate the connection string property of a database instance of a database context class.

Code-First Development Workflow

By Tim Daniels
Over the past few weeks I’ve continued using the code-first workflow. At this point, I’m ready to share what I’ve learned and what I’ve developed so far. The code-first workflow enabled me to use the convention over configuration approach in the design and development of a solution. With this approach, I found myself focusing, almost exclusively, on the application of a solution to a business problem. Some thought and effort was given to architecture and application structure, but I did’nt concern myself with database design, or object model design, other than verifying that what was generated by the Entity Framework matched my requirements and expectations. The result was a solution, and code, that is very simple and concise. A complete, normalized relational database, and a complete object model were automatically generated by the Entity Framework.

Here is a brief description of the solution I’ve been developing. I call the application “Action Manager”. It’s a basic project management application written in C#.NET. The application will record and track the number of hours worked on a specific task, by a specific person, on a specific project, for a specific customer. The data is stored in a SQL Server database. For development purposes, I’m using SQL Server 2012, the express edition. The entire application is build on the .NET Framework 4.0.

In designing and developing an application, I first get a thorough understanding of the business domain the application will operate in. Understanding a business domain requires identification, and definition of the entities existing in the domain, and how they interact with each other. These entities are then abstracted into individual object-oriented classes in code. Here is a list of the entities currently identified and defined in the project management domain;

  • Customers
  • Projects
  • People (who work on the projects)
  • Titles (job titles)
  • Tasks
  • Rates
  • Timesheets
  • Timesheet entries

Following are the C# classes representing each of the entities in the project management domain. These classes are completely independent of a database source, the object relationship model (ORM), and any third-party attributes. They are also independent of any base class inheritance. This type of class is sometimes refered to as a plain old common language runtime object, or POCO class. I created one class library project called “Entities” to store these classes.

Convention over configuration
Examine each entity class closely. You will notice that the entities have properties which define relationships with other entities in the domain. For example, The customer class has a property called projects. This property is defined as a generic list of project objects. This establishes the conventional relationship between customers and projects, that is customers can have one to many projects. In the same way, the person class has a property called time sheets, establishing the convention that a person can submit one to many time sheets for work performed on a project. These properties are called navigation properties in the object model.

Notice also, that each class has an ID property defined with an object type of integer. The property is named after the class with a suffix of Id (e.g., CustomerId and PersonId). This naming convention is used by the entity framework to create a unique key column when generating tables in a database. This also facilitates the creation of primary key and foreign key relationships, in the object model and the database.

Entity Framework
The Entity Framework can use the conventional relationships established in these POCO classes to automatically generate an object model, and a relational database schema. The DbContext class is where this can be accomplished. The DbContext class is in the System.Data.Entity namespace. Let’s look at some code to see how this is done.

In the above code snippet I created a class called ProjectManagementContext which is derived from DbContext. I then added a property for each of the classes in my entity class library. The type of each property is DbSet. When developing with the Code First workflow you can define a derived DbContext that represents your session with the database and exposes a DbSet for each type in your model. The DbSet Class represents a typed entity set that is used to perform create, read, update and delete operations for each of the entities defined in the object model of the context.

Here is an illustration of the object model generated by the Entity Framework, based on the conventions defined in the POCO classes of the Entity class library. Notice the Navigation Properties, and how they form relationships between the objects in the model. For example, the one to many relationship between the customer object and the project object, is clearly illustrated here.

Object model generated by the Entity Framework in Code-First Workflow

Object model generated by the Entity Framework in Code-First Workflow


Here is an illustration of the database and database model generated by the Entity Framework.
Database generated by the Entity Framework in Code-First Workflow

Database generated by the Entity Framework in Code-First Workflow

In the near future I’ll be writing about the Entity Framework’s fluent API. I’ll also explore the implementation of the create, read, update and delete methods in the DbSet of entity class.

Here are several helpful links to help you get familiar with Entity Framework Development Workflows and the code-first workflow.

Code-First Development with Entity Framework 5.0

By Tim Daniels
As you know from previous posts, I prefer using an Object Relational Mapping (ORM) framework, as part of a domain driven approach to design and development of a business solution. The Microsoft ADO.NET Entity Framework is an Object Relational Mapping framework that enables developers to work with relational data as domain-specific objects, eliminating the need for most of the data access plumbing code that developers usually need to write. Developers can focus on their application-specific business logic rather than the data access fundamentals.

Recent development in the ADO.NET Entity Framework provide further support for two other software development techniques, which I find very appealing and effective, in design and development of new solutions.

  • Code-First Development Workflow
  • Convention over configuration

The code first approach offers several advantages to the application developer. It allows the developer to focus on domain specific entity classes and how these classes relate to each other in the business model. These classes are completely independent of a database source, the ORM and any third-party attributes. They are also independent of any base class inheritance. These classes are sometimes refered to as plain old common language runtime objects or POCO classes.

The entity classes form a set of conventions which the ADO.Net Entity Framework uses to automatically generate an object model and a SQL Server relational database.

Here is an example of two POCO entity classes. A time sheet object and a time sheet entry object. There is a one to many relationship between the time sheet object and the time sheet entry objects. This relationship is expressed by the TimeSheetEntries property of the TimeSheet class. This is known as a navigational property.

In the near future, I’ll be writing a series of posts on the Code-First development workflow, and then follow-up with a post on how code first ties into the convention over configuration development technique.

Here are several helpful links to help you get familiar with Entity Framework Development Workflows and the code-first workflow.

Visual Studio 2012 and MVC 4

By Tim Daniels
In my previous post, I laid out a set of objectives for pursuing the ASP.net Web API technology, for developing RESTful web servies. I quickly discovered that the Web API technology is actually a subset of the MVC 4 design pattern, which is available as a project template in Visual Studio 2012.

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 and Web API

By Tim Daniels
Visual Studio 2012 recently became available, so I decided to download the Express for Web edition from the Microsoft Products Store. Here is a snapshot of the new look and feel of Visual Studio 2012. See what else is new in Visual Studio 2012.

Visual Studio 2012

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

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