Skip to end of metadata
Go to start of metadata

In this tutorial, you're going to learn how to create a simple to-do app which syncs ToDo data with Project data using multiple sync channels. This tutorial is a continuation of the the previous tutorial: Walkthrough: Create a To-Do App with OS-Level Data Synchronization. At the end of this tutorial, you should have the following result.

Samples:

CrosslightToDoMultipleSyncChannels.zip

Follow these steps:

Prerequisite

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

It is also recommended that you have read through these conceptual topics in order to get a better understanding:

To use this walkthrough, you will need to use at least Crosslight version 5.0.5000.626-experimental in order to achieve the desired result. You also need to have Mobile Studio for Windows installed. If you haven't done so, download here.

Let's get started. 

Preparing the Project

In this tutorial, we're going to continue from the previous tutorial, where you've learned how to perform OS-level synchronization with SyncAdapter and Background App Refresh. Download the sample here (from the previous tutorial). After you've downloaded the sample, you're ready to proceed.

We're going to modify the current database models and EDMX. So, in the application, one user can have multiple Projects, where in each project may consists of multiple ToDo items.

Modifying the Database

Start by modifying the CrosslightDb.mdf database inside CrosslightToDo.WebAPI/AppData folder. Add a new table called Project.

Use the following query to create the Project table. 

Next, open up the ToDo table.

Change the CreatedBy column to ProjectID, with reference to the Id column of the newly created Project table. Update your database. Use this query, if you prefer.

In the CrosslightToDo.DomainModels project, select the other three files other than ToDoModel.edmx, then delete them.

Then in the CrosslightToDo.Core/DomainModels, delete both of these files.

Once you've done that, open up ToDoModel.edmx inside CrosslightToDo.DomainModels/ToDo folder.

Right click on the empty area in the designer surface and select Update Model from Database.

In the dialog that appears, untick the option Save connection settings as shown in the following image.

Click Next. In the next screen, add the Project table.

Then, change to the Refresh tab. Select the ToDo table and hit Finish.

When this dialog appears, click OK on all dialogs.

You will end up an updated EDMX. However, you may notice that it will still have CreatedBy in the ToDo model. Right-click on the property and select Delete from Model.

Save this EDMX and hit OK on all dialogs that appear.

Click on the Project table.

Don't forget to set the properties of the Project table such as changing the Repository Type to EditableLocalEntityRepository, setting the Logical Delete Property to IsDeleted, and Synchronization Date Property to ModifiedOn.

Should you get a compile error similar to the following (especially in CrosslightToDo.DomainModels project), simply set the Build Action to None.

If you try to build the project, you'll get several errors. Let's resolve these errors next. Open up SimpleViewModel.cs inside CrosslightToDo.Core/ViewModels folder and modify the ExecuteAdd method.

Remove this line for now. Next, open up ToDoController.cs inside CrosslightToDo.WebAPI/Controllers folder. In BeforeExecuteQueryDelegate method, comment out these lines for now.

Associating User with Project

From the previous tutorial, we have made created a single, simple ViewModel for displaying the user's ToDo items, which is the SimpleViewModel. Since we're going introduce the Projects to the application, let's rename the SimpleViewModel into ToDoListViewModel instead. 

Use the following code for ToDoListViewModel.

ToDoListViewModel.cs

Note that you can simply override ValidateNewSynchronizedItem method inside this ViewModel in order to display the ToDo items relative to the project.

Then, in the same folder, create a new Crosslight Data List View Model and give it a name of ProjectListViewModel. Use the following code.

ProjectListViewModel.cs

The code is pretty similar to the one in previous ToDoListViewModel, except we're using Project and IProjectRepository this time. Then, proceed by renaming AddToDoViewModel to AddViewModel. We're going to reuse this ViewModel for adding new Project and new ToDo item.

Inside AddViewModel, rename the ToDoText property to Text. Use the following code.

AddViewModel.cs

Don't forget to change the BindingProvider definition as well. Rename AddToDoBindingProvider to AddBindingProvider. Here's the contents.

AddBindingProvider.cs

Also, rename ToDoQueryDefinition inside CrosslightToDo.Core/QueryDefinition folder into ProjectQueryDefinition.

Copy the ProjectQueryDefinition and name the file as ToDoQueryDefinition. Use the following code.

ToDoQueryDefinition.cs

Then, set ProjectListViewModel as the root ViewModel in OnStart method of AppService.cs inside CrosslightToDo.Core/Infrastructure folder.

Still in the same file, add the following entry to register the ProjectRepository with the EntityContainer.

Don't forget to add the website bindings in the applicationhost.config so that your IIS Express instance is exposed to the local network. 

In your web.config, modify the connection string for ToDoEntities.

web.config

Rename SimpleBindingProvider to ToDoListBindingProvider. Then create a new BindingProvider called ProjectListBindingProvider. Use the following code.

ProjectListBindingProvider.cs

 

Preparing the Android Project

Then, in the Android project, rename AddToDoFragment into AddFragment. Create a new Fragment called ProjectListFragment and use the following code.

ProjectListFragment.cs

Rename SimpleFragment to ToDoListFragment. Also, open up SimpleActivity.cs inside CrosslightToDo.Android/Activities folder. Change the ViewModel here from ToDoListViewModel to ProjectListViewModel.

SimpleActivity.cs

Remove this line from ToDoListFragment.

ToDoListFragment.cs

You should get the following result.

Preparing the iOS Project

Rename the MainViewController inside CrosslightToDo.iOS/ViewControllers folder to ToDoListViewController. Use the following code.

ToDoListViewController.cs

Then, add a new Crosslight Table View Controller for iPhone named ProjectListViewController. Use the following code.

ProjectListViewController.cs

Save the files and try to run the iOS app. You should get the following result.

Enabling Multi-Channel Synchronization

So far, we've managed to modify the app to include the Project model and the ToDo model, in which a user can have multiple Projects, and each Project can have multiple ToDo items. Let's finish this app by enabling multi-channel synchronization, we're going to create different channels for Project synchronization, and another for ToDo synchronization.

Open AppService.cs inside CrosslightToDo.Core/Infrastructure folder and add the following snippet lines to ISynchronizationService initialization.

AppService.cs

Which should look like the following image.

Then, open SaveAndSynchronize method inside ProjectListViewModel.cs. Modify the method into the following.

ProjectListViewModel.cs

So, instead of calling synchronization service to synchronize everything, we can simply synchronize the required channels, in this case, it's the Project channel defined previously in the AppService.

Similarly, open the ToDoListViewModel.cs and modify the method as well.

ToDoListVieModel.cs

Save these files and re-run the project. You should get the following result.


Conclusion

In this lesson, you've learned how to utilize multiple sync channels with Crosslight's synchronization framework. Stay tuned for more Crosslight tutorials to come!

Sample

You can also find the resulting sample here: CrosslightToDoMultipleSyncChannels.zip. Simply open this sample and restore the NuGet packages with Xamarin Studio or Visual Studio and run the project. Consult this documentation should you need help on restoring the NuGet packages.