Integration by creating a custom client

Introduction

This guide will give another alternative to integrating a new service method into the angular migrated application. This is a proposal of changes that can be done to consume the services in an easier way. It is important to remember that for some scenarios, the code included in this guide will need some modifications depending on your needs.

Source Code

Here you can download the source code that is used across the example.

• WCF Silverlight application (WCFGuideApplication): You can find the source code of the Silverlight application in the resources of the section Integration by manually migrating the code generated in the Reference file.

• Angular migrated application (WCFGuideApplicationMigratedPresentation)

Creating a custom client

There are two scenarios if you want to add a new service method for a service client (Reference file) which is already migrated. The first scenario is where you want to follow the structure that is already defined in the Reference file, so you will need to manually write in typescript all the methods, classes, and properties that would be automatically generated if you updated the service reference in a Silverlight application. For this scenario, you can find information in the section "Integration by manually migrating the code generated in the Reference file".

The second scenario is exactly the same, you add a new service method in the WCF services and you already have the migrated code for the Reference (including the service client) but you want to avoid writing all the code that requires the migrated service client to be able to consume the new service method.

For this second scenario, a possible option to add or consume the new service method could be to add a custom client where we implement some basic methods to do the job of executing the logic that will handle the requests and responses of the service operations.

The following code is an example of a generic custom client that can help you to consume a new service method.

import { SubscriptionEvent, HttpChannel, AsyncCallback, IAsyncResult, AsyncCompletedEventArgs, InvokeAsyncCompletedEventArgs, ClientBase} from "@mobilize/wms-framework";

export class CustomClient<T> extends HttpChannel<T> {

    public Completed : SubscriptionEvent < (sender : any,e : AsyncCompletedEventArgs) => void>;
    public getSubscriptionEvent() : SubscriptionEvent < (sender : any,e : AsyncCompletedEventArgs) => void> {
        if (!this.Completed)  {
            this.Completed = new SubscriptionEvent < (sender : any,e : any) => void> ();
        }
        return this.Completed;
    }
    public BeginGetMethod (client: ClientBase<T>,  methodName:string, requestArgs: any[], callback : AsyncCallback,asyncState : any) : void {
        let message = client.binding.CreateMessage(client.url, methodName, requestArgs);
        let _result : IAsyncResult = this.BeginRequest(message, callback, asyncState);
    }

    public EndGetMethod(state: any, classConstructor?: any): any {
        state.classConstructor = classConstructor;
        let result = this.EndRequest(state);
        const invokeAsyncCompletedEventArgs = new InvokeAsyncCompletedEventArgs(result.result, null, false, state);
        return this.Completed.toFunction()(null, invokeAsyncCompletedEventArgs);
    }
}

As you can see, this custom client class uses a generic type that needs to receive the type of the already existing service client (the one that was automatically migrated) and there are two methods, one to begin the request process and one to end the request process.

Using the CustomClient to consume the new service method

After adding the CustomClient class, no you can consume the new service method. The following code shows you how to consume the new service method by using the custom client created in the previous section.

private LoadDepartmentsData() {
      let client = ServiceHelper.GetGuideServiceClient();
      let customClient = new CustomClient<GuideService>(client);
      customClient.getSubscriptionEvent().addHandler(this.ClientGetDepartmentsCompleted, this);
      customClient.BeginGetMethod(client, "GetDepartments",[], (v1) => customClient.EndGetMethod(v1, ObservableCollection), null);
   }

   ClientGetDepartmentsCompleted(sender: any, e: InvokeAsyncCompletedEventArgs) : void {
      let departments = e.Results;
   }

We can even change the way we consume other service methods. For example, the following service method was consumed using the Service Client included in the Reference.ts file.

private LoadData () : void {
      let proxy = ServiceHelper.GetGuideServiceClient();
      proxy.GetCustomersCompleted.addHandler(this.Proxy_GetCustomersCompleted,this);
      proxy.GetCustomersAsync__overload_0();
   }
   Proxy_GetCustomersCompleted (sender : any,e : InvokeAsyncCompletedEventArgs) : void {
      let result = e.Results;
      this.model.customers = e.Results;
      this.comboBox.ItemsSource = this.model.customers;
   }

We can change the previous code and use the custom client as follow

private LoadData () : void {
      let client = ServiceHelper.GetGuideServiceClient();
      let customClient = new CustomClient<GuideService>(client);
      customClient.getSubscriptionEvent().addHandler(this.Proxy_GetCustomersCompleted, this);
      customClient.BeginGetMethod(client, "GetCustomers",[], (v1) => customClient.EndGetMethod(v1, ObservableCollection), null);
   }
   Proxy_GetCustomersCompleted (sender : any,e : InvokeAsyncCompletedEventArgs) : void {
      let result = e.Results;
      this.model.customers = convertTypeTo <ObservableCollection <CustomerDTO>>(e.Results, ObservableCollection);
      this.comboBox.ItemsSource = this.model.customers;
   }

As you can see, we are always creating the Reference service client because we still need some information that is stored in the migrated client. We add the completed handler by using the getSubscriptionEvent.addHandler and the name of the method that we need to consume are explicitly written when calling the BeginRequestMethod.

An additional detail to notice is that when you get the response it's necessary to case the result to the type we require. In this case, you can see the convertTypeTo used to case the e.Results to an ObservableCollection<CustomerDTO> which is the type of the variable this.model.customers.

Resources

Angular (migrated) application

9MB

WCFGuideApplicationMigratedPresentation.zip

archive

Open