Skip to end of metadata
Go to start of metadata

In this walkthrough, you're going to learn how to introduce your own custom services using Crosslight's extensible architecture and resolve them in the ViewModel. In this example, we're simply going to show a simple, native toast invoked using the custom service by modifying the ShowToast command that comes with the SimpleViewModel when creating a new Blank project using the Crosslight Project Wizard.

At the end of this tutorial, you should have the following result:

Samples:

CrosslightCustomServices.zip

Follow these steps:

Prerequisite

Before starting the walkthrough, it is recommended that you have followed these walkthroughs in order:

To use this tutorial, you'll need to create a new project

Let's get started. 

Creating Your Custom Service

First, you'll need to create a new Blank project using the Crosslight Project Wizard. Give it a name of CrosslightCustomServices. Once the project is created, create a new folder called Custom inside CrosslightCustomServices.Core and create a new Empty Interface file there called ICustomService. This is will be our custom service that will be invoked from the ViewModel.

 

Use the following code snippet for the newly created file.

ICustomService.cs

As you can see, the custom service derives from IMobileComponentService, which is essential for the custom service to work properly.

 

Implementing the Custom Service on Android

Next, let's create the concrete implementation for each platform that will utilize this new service. Let's begin with Android. First, let's create a new folder named Custom inside CrosslightCustomServices.Android. Then, create a new Empty Class inside the newly created folder and give it a name of CustomAndroidService

Use the following snippet code for CustomAndroidService.

In the above code, you'll see that we derive from AndroidMobileComponentServiceBase, which contains the necessary base implementations for Crosslight services to work properly, and also here we've implemented the ICustomService that we've created. To obtain the Context object in Android, you must called this.DispatchContext(this.Owner); and then you can use the Context object any way you like. Here, we're going to display a simple native toast that is invoked from our custom service, which returns a callback with "test" string callback. This is just to show you an example on how to interact back to the ViewModel once you get the result from the custom service.

Next, modify the AppInitializer.cs file inside CrosslightCustomServices.Android/Infrastructure folder. In the InitializeServices method, add the following line.

This registration is needed so that your custom Android service can be invoked from the ViewModel. Now your Android custom service should be ready. Run the project and click the button to see the result.

Let's move on with iOS.

Implementing the Custom Service on iOS

To implement the custom service on iOS, we'll do something similar to the one we've just did on Android. First, create a new folder called Custom inside CrosslightCustomServices.iOS project. Then create a new Empty Class called CustomiOSService.

Use the following code.

In the above code, we simply invoke a new UIAlertView that will display a message box with the title "Custom Service" and the message "Custom Service". In this example, we also added a callback to the ViewModel that will return a string "test". Next, modify the AppInitializer.cs inside CrosslightCustomServices.iOS/Infrastructure and modify the InitializeServices method.

Similar to Android, this will register our custom service so that it can be invoked from the ViewModel.

Invoking the Custom Service from the ViewModel

To invoke the custom service from the ViewModel, open up the SimpleViewModel.cs inside the CrosslightCustomServices.Core/ViewModels and modify the ShowToast method.

Here, we've commented out the old implementation and you can simply resolve your custom services via IoC. Simply run the project and hit the button to see the result.

Conclusion

Congratulations! You've just successfully created a new custom service using Crosslight and you're now ready to create your own custom services.

Sample

You can also find the resulting sample here: CrosslightCustomServices.zip. Simply open this sample with Xamarin Studio or Visual Studio and run the project.