SOA at the User Interface

Service-oriented architecture (SOA) is a common approach to enterprise application development where systems package functionality as interoperable web services. Its core principles are reuse, modularity, componentization and interoperability.

ComponentArt SOA.UI for .NET is a framework for building web services specialized to serve the user interface tier. It is designed to streamline the development of presentation layer server-side code, while decoupling it from a specific front-end technology. As a result, server-side logic developed with SOA.UI can be used with AJAX, Silverlight, WPF or mobile front ends.

SOA.UI fully complies with the recommended architecture for Silverlight and WPF applications, as outlined in the diagram above. Silverlight and WPF front ends communicate with the business logic through a UI-centric web service layer. Developers typically write the entire code for this layer and target only one type of a front-end client (e. g. Silverlight).

The SOA.UI framework provides a set of reusable components that enables easy development of the UI web service layer. Additionally, ComponentArt’s Silverlight and ASP.NET AJAX user interface controls have the ability to “plug into” the SOA.UI layer directly and thus dramatically decrease the amount of code necessary to implement common UI patterns. Finally, server-side code exposed through SOA.UI can be entirely reused with ASP.NET AJAX, Silverlight, WPF or mobile front ends.

Elements of SOA.UI

ComponentArt SOA.UI for .NET is comprised out of a set of abstract UI controls, data transfer objects, web service base classes and request/response descriptor objects.

• Abstract UI Controls. (Examples: SoaTreeView, SoaDataGrid).
  
  When serving the user interface layer, it is convenient to be aware of the UI elements that the web service is communicating with. For example, the UI web service layer needs to know that it is dealing with a DataGrid or a TreeView control on the client, however, it doesn’t need to concern itself with the details of AJAX or Silverlight UI implementations. The SOA.UI abstract UI controls contain the properties common to all client-side platform implementations, providing a framework for user interface abstraction in the web service tier.
  
  
• Data Transfer Objects. (Examples: SoaTreeViewNode, SoaDataGridColumn).
  
  Data transfer objects are used to serialize data and send it over the network (for example collections of TreeViewNode objects). Similar to abstract UI controls, these objects are abstractions of elements contained within UI controls and they are convenient both for the implementation of UI web services as well as the communication between server-side and client-side layers.
  
  
• Web Service Base Classes. (Examples: SoaTreeViewWebService, SoaDataGridWebService).
  
  Web service base classes provide the foundation for implementing web services that serve the user interface layer. Each abstract UI control has a web service base class. To implement a web service that targets a particular type of UI control, developers simply need to inherit from the corresponding base class and override method(s) of interest. For example, to implement DataGrid paging/sorting/filtering, one would inherit from the SoaDataGridWebService class and override the Select method.
  
  
• Request / Response Descriptor Objects. (Examples: SoaTreeViewGetNodesRequest, SoaDataGridSelectRequest).
  
  Request and response descriptor objects aid in the implementation of web service methods. Request objects provide the data necessary to process the request. For example, the SoaTreeViewGetNodesRequest object has a ParentNode property to help identify the TreeViewNode whose sub nodes are being requested. Response objects carry the necessary data back to the client. For example, the SoaTreeViewGetNodesResponse object contains a collection of treeview nodes that the client will receive.

The SOA.UI "Hello World" Application

To illustrate how easy it is to use SOA.UI, we will create an application that utilizes a WCF web service to implement a treeview load on demand user interface. Note that the identical web service will be used with ComponentArt Silverlight and ASP.NET TreeView controls.

public class MySoaTreeViewService: SoaTreeViewService
{
  public override SoaTreeViewGetNodesResponse GetNodes(SoaTreeViewGetNodesRequest request)
  {
    SoaTreeViewGetNodesResponse response = new SoaTreeViewGetNodesResponse();

    SoaTreeViewNode newNode = new SoaTreeViewNode();
    newNode.Text = "Hello World!";
    newNode.IsLoadOnDemandEnabled = true;

    response.Nodes = new List<SoaTreeViewNode>();
    response.Nodes.Add(newNode);

    return response;
  }
}

<ComponentArt:TreeView x:Name="tree1"
  SoaServiceUrl="../MySoaTreeViewService.svc" ></ComponentArt:TreeView>

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Services><asp:ServiceReference path="~/MySoaTreeViewService.svc" /></Services>
</asp:ScriptManager>

<ComponentArt:TreeView id="tree1" SoaService="ComponentArt.SOA.UI.ISoaTreeViewService"
   runat="server"></ComponentArt:TreeView>

In both cases, we will get an infinitely expanding treeview, with each node loaded from our web service:

The principles employed in this simple example can be applied to much larger and more complex applications. For elaborate examples of the SOA.UI framework in action, please visit ComponentArt's SOA.UI demo page.