Hands-On Lab

Building Online/Offline Distributed

Applications
Lab version: 1.0.0
Last updated: 12/7/2021
Contents

Overview............................................................................................................................................3
Starting Materials...........................................................................................................................5
Exercise 0: Creating an Azure Services Account for Live Services.......................................................6
Task 1 – Creating your Azure Services Account..........................................................................6
Exercise 1: Accessing the Live Operating Environment from a WPF Rich Client Application............10
Task 1 – Installing the Live Framework Client...........................................................................10
Task 2 – Working with Resources Using the .NET Live Framework Toolkit...............................13
Verification...................................................................................................................................20
Exercise 2: Accessing the Live Operating Environment from a ASP.NET Web Application...............25
Task 1 – Connecting the Web Application to the Cloud Live Operating Environment..............26
Verification...................................................................................................................................29
Exercise 3: Working Online and Offline with Synchronized Data.....................................................31
Task 1 – Starting the Applications............................................................................................32
Task 2 – Going Offline...............................................................................................................36
Task 3 – Coming Back Online....................................................................................................40
Summary..........................................................................................................................................44
Overview
Today, with the rise of "social computing", sharing data efficiently and consistently across different
applications in different platforms is a frequent scenario. Live Services, through the Live
Framework and its core service engine the Live Operating Environment, allows you to develop
distributed, data-centric applications that work seamlessly both from the cloud or from an offline
local environment against a centralized resource model.
The Live Operating Environment is a service composition that provides a unified and consistent
programming model to all the applications interacting with Live Services. The Live Operating
Environment is available both in the cloud and on a device and has similar functionality regardless
of whether it is executing on the client device, such as a computer running the Windows operating
system or in the cloud.
This "symmetric" Cloud-Client approach lets an application work in the same way with local data
and with data stored in the cloud. If an application is running on a desktop or device that’s
currently offline, it can work on the local copy of the data, which acts as a cache for the last known
state of the cloud data. When the device is connected again, the application can either access the
cloud data directly or wait for the local copy of the data to be updated by Live Operating
Environment synchronization.
This lab will demonstrate how two different applications made with different technologies such as
WPF and ASP.NET consume the Live Framework resource model as a centralized repository. Both
applications implement a simple project management scenario with different milestones for each
project. From one side, the WPF rich client application will consume the resource model through
the local Live Operating System hosted by the Live Framework Client. On the other side, the
ASP.NET Web application will consume it directly from the Live Operating Environment hosted on
the cloud. Data synchronization will be done seamlessly between the two Live Operating
Environment instances.
Figure 1
Local versus Cloud Live Operating Environment

Objectives
In this Hands-On Lab, you will learn how to:
Connect an application to the different Live Operating Systems versions (client and cloud)
Store applications custom data on Mesh by using the Live Framework Resource Model
Perform create, read, update and delete operations of custom application data by
accessing the Live Operating Environment
Make applications share the same data by using Live Framework Synchronization

Exercises
This Hands-On Lab comprises the following exercises:
1. Accessing the Live Operating Environment from a WPF Rich Client Application
2. Accessing the Live Operating Environment from a ASP.NET Web Application
Estimated time to complete this lab: 60 minutes.

Note: You must have a Live Services account to complete this lab. If you don’t already have an
account, you can request an invitation code for Live Services from http://www.azure.com.

Starting Materials
This Hands-On Lab includes the following starting materials.
Visual Studio solutions. The lab provides the following Visual Studio solutions that you
can use as starting point for the exercises.
◦ %TrainingKitInstallationFolder%\Labs\BuildingClientAppsLiveFramework\Ex1-
WPFApplication\Begin\Begin.sln: This is the starting solution for Exercise 1.
◦ %TrainingKitInstallationFolder%\
Labs\BuildingClientAppsLiveFramework\Ex2-WebApplication\Begin\Begin.sln:
This is the starting solution for Exercise 2.

Note: Inside each exercise you will also find an End solution that is already working, and
is useful to compare if the steps followed during the exercise were performed correctly.
This solution that can be run using the same Verification steps outlined after each
exercise.
Note: The %TrainingKitInstallationFolder% is located by default at C:\AzureServicesKit.
Exercise 0: Creating an Azure Services
Account for Live Services
To follow this lab and complete all the exercises you first need to create an Azure Services account
and redeem an invitation token for the Live Framework and Services.

Note: You only need complete this exercise once to create a Live Services account that you can
use for the hands-on labs and for any applications you would build. Please skip this exercise if
you already have an Azure Services account and you have redeemed an invitation code.

Task 1 – Creating your Azure Services Account

In this task, you will create a new Azure Services account and redeem your Live Services invitation
token.
1. Navigate to http://lx.azure.microsoft.com
2. You will be redirected to the Windows Live ID Sign In page. Please provide your own
Windows Live ID and password and click Sign In. If you do not have a Windows Live ID,
click Sign Up and follow the guided steps to create a new Windows Live ID.

Figure 2
Providing your Windows Live Id
3. You will then be redirected back to the Azure Services Developer Portal. Select your
Country and Language and click I Agree. This will create a new developer account.

Figure 3
Selecting your location

4. You will then see a message indicating your account has been created. Click OK to
proceed.
5. On the next page you will be prompted to Redeem your Invitation Token. Enter the
invitation token that you have been provided and press Redeem Token.
 Figure 4
Redeeming your invitation code

6. You will now be able to browse the Azure Services Developer Portal. Click the New
Project link in the top left corner.

Figure 5
Creating a new project

7. Verify that the Live Services options are enabled. If the Live Services are enabled, you
are ready to proceed with this lab.
Figure 6
Choosing the service component
Exercise 1: Accessing the Live
Operating Environment from a WPF
Rich Client Application
Rich Client applications, are applications that run on devices in which the processing power of the
device enables a much richer user interaction than a simple browser interface. These applications
run on platforms, such as the Windows operating system or Windows Mobile and use technologies
such as the following:
Windows Forms
Windows Presentation Foundation
Managed code under the Microsoft .NET Framework for console applications
Rich client applications access the Live Framework through the Live Operating Environment
running either on the client or on the cloud.
In this exercise, you will modify a Rich Client WPF application to interact with the Live Operating
Environment by using the .NET Toolkit for the Live Framework. The application implements a
simple project management scenario with a list milestones for each project. You will extend the
Live Framework resource model to adapt it to the application custom data needs (projects and
milestones).
Task 1 – Installing the Live Framework Client
In this task you will install the Live Framework Client in your computer.

Note: If you already have the Live Framework Client from https://developer.mesh-ctp.com/ is
installed and running go directly to the next task.

1. Browse to https://developer.mesh-ctp.com/Web/Devices.aspx. If your local computer

is not displayed it means that is not added to Mesh. If this is the case select Add Device (
), choose your operating system and click .
 Figure 7
Adding your computer to Mesh

2. Download and install the Live Framework Client.

Figure 8
Downloading the Live Framework Client

3. Start the Live Framework Client from Start | All Programs | Live Framework Client |
Live Framework Client.
 Figure 9
Running the Live Framework Client

4. A new icon for the Mesh notifier should appear ( ) on the desktop notification area,
point the icon and a Sign In window will appear. Click the Sign In link.

Figure 10
Live Framework Client

Note: The Live Mesh notifier is the gateway to the folders, devices, and news in your
mesh. The notifier allows you to view devices, folder and news from your mesh.

5. Provide your Live Id credentials and click Sign In.

 Figure 11
Signing In to Mesh

6. Once your credentials are validated you will see a new page asking you to add your
computer to Live Mesh. Type the name of your computer and click Add Device. This will
be the name given in Mesh to this Device.

Figure 12
 Setting the computer name

7. The Live Framework Client icon in the notification area shows that is signed in and
online:

Figure 13
Live Framework connection status

Note: Now your computer is running the local version of the Live Operating Environment
at http://localhost:2048.The Live Operating Environment provides the runtime for the
Live Framework and is responsible for managing resources and providing access to them
through common wire formats such as Atom, RSS or JSON.

Task 2 – Working with Resources Using the .NET Live Framework Toolkit
In this task, you learn how to connect the application to the local Live Operating Environment and
persist application information by storing it as Live Framework resource objects (MeshObjects).

Note: MeshObject objects, one of the Live Framework Resource model entities, are the Mesh
containers for user-defined metadata, and are the fundamental units of extensibility, sharing,
and synchronization. The objects can be replicated across a set of devices and shared among a
set of identities. MeshObject objects support create, read, update, and delete (CRUD)
operations.

1. Open the provided starting solution. To do this, from Visual Studio, open the solution
file located at %TrainingKitInstallationFolder
%\Labs\BuildingClientAppsLiveFramework\Ex1-WPFApplication\Begin\Begin.sln.
 Figure 14
ProjectManagerWpf Project

2. Add the code to create the connection to the local Live Operating Environment. To do
this, in Solution Explorer, double-click the ProjectsHelper.cs file located under the Library
folder . Replace the current RetrieveSession method with the following code:
(Code Snippet – Online-Offline Distributed Apps Lab - RetrieveSession)
C#
private static Mesh RetrieveSession()
{
if (meshSession == null)
{
// Use "LiveItemAccessOptions" to pre-fetch the resources
var accessOptions = new LiveItemAccessOptions(true);

try
{
LiveOperatingEnvironment endpoint = new
LiveOperatingEnvironment();
endpoint.ConnectLocal(accessOptions);
meshSession = endpoint.Mesh;
}
catch
{
throw;
}
 }
else
{
meshSession.MeshObjects.Load();
}

return meshSession;
}

Note: The WPF application connects to the local Live Operating Environment using the
LiveOperatingEnvironment.ConnectLocal method and then obtains the Mesh object
that provides access to the Live Framework resources as MeshObjects, devices and
news. The connection is performed against the local Live Framework Client (previously
installed) that is running in your local host (using port 2048). The local Live Framework
Client is then responsible for synchronizing the changes made to the resource model to
and from the cloud Live Operating Environment.

3. Add the code to create and store a new project a MeshObject. Go to the CreateProject
method and remove the line where the exception is thrown, and paste the following
code:
(Code Snippet – Online-Offline Distributed Apps Lab - CreateProject)
C#
public static void CreateProject(Project project)
{
var meshSession = RetrieveSession();
if (meshSession == null)
{
throw new InvalidOperationException("Session timeout");
}

// Create mesh object

var meshProject = new MeshObject(project.Title);
meshSession.MeshObjects.Add(ref meshProject);

// Update mesh object data

project.MeshObjectId = meshProject.Resource.Id;
meshProject.Resource.Type = "Project";
meshProject.Resource.SetUserData<Project>(project);

// Add Milestone feed

var milestonesDataFeed = new DataFeed("Milestones");

// Set the Resource type for the feed for easy query later
milestonesDataFeed.Resource.Type = "Milestones";
 // Add Milestones DataFeed to Project Mesh Object
meshProject.DataFeeds.Add(ref milestonesDataFeed);

meshProject.Update();
}

The previous methods is doing the following actions in order to store a project as a
MeshObject:

◦ Create a new MeshObject using the project title as the MeshObject title.
◦ Pass the MeshObject, by reference, to the Add method of the MeshObjects
collection of the Mesh object.
◦ Store the MeshObject identifier in the project (MeshObject.Resource.Id). This
will then be used to retrieve a project.
◦ Every MeshObject should have a Type in this case you will add the type
Project.
◦ The Project object is serialized into the MeshObject by calling SetUserData
method.

Note: The Live Framework Resource Model directly supports extension by

storing custom user data through the SetUserData<> and GetUserData<>
methods. These accept a properly mesh attributed instantiated class object and
store the serialized content in the MeshObject’s Resource UserData attribute.
These attributes can be deserialized back into an instantiated object to be used
like any other class within the application.

◦ Then a Milestones DataFeed is created to store in that feed all of the project
milestones.

Note: DataFeed objects are descriptors pointing to a collection of DataEntry

resources. Each DataEntry will store a Milestone.

◦ The meshProject instance is saved calling the Update method.

4. Add code to retrieve a Project from the MeshObjects collection by using the Project Id.
To do this, replace the current GetProject method implementation with the following
code.
(Code Snippet – Online-Offline Distributed Apps Lab - GetProject)
C#
 public static Project GetProject(string meshObjectId)
{
var meshSession = RetrieveSession();
if (meshSession == null)
{
throw new InvalidOperationException("Session timeout");
}

// Get Mesh Objects where type = Project

var meshObject = (from mo in meshSession.MeshObjects.Entries
where mo.Resource.Id == meshObjectId
select mo).SingleOrDefault();

if (meshObject != null)
{
return meshObject.Resource.GetUserData<Project>();
}
else
{
return null;
}
}

Note: Live Framework supports a query model that enables the callers to perform LINQ
queries using the Live Framework SDK libraries. In this method, a MeshObject being is
retrieved by using a LINQ query to filter the MeshObject collection DataEntries by the
resource id. The Project object it is then deserialized from the MeshObject by calling the
GetUserData method passing it the type of the object you want to create.

5. Now you will add code to add a new Milestone to the Milestones DataFeed. The
DataFeed is obtained from the MeshObject of the given project. To do this, find the
CreateMilestone method and add the following code (shown in bold).
(Code Snippet – Online-Offline Distributed Apps Lab - CreateMilestone)
C#
public static void CreateMilestone(Milestone milestone)
{
var meshSession = RetrieveSession();
if (meshSession == null)
{
throw new InvalidOperationException("Session timeout");
}

var meshProject = (from mo in meshSession.MeshObjects.Entries

where mo.Resource.Id == milestone.MeshObjectId
select mo).SingleOrDefault();
 // Look up the Milestones datafeed
DataFeed milestonesDataFeed = (from de in
meshProject.DataFeeds.Entries
where de.Resource.Title ==
"Milestones"
select de).SingleOrDefault();

var dataEntry = new DataEntry();

dataEntry.Resource.Type = "Milestone";
dataEntry.Resource.Title = milestone.Title;
milestonesDataFeed.DataEntries.Add(ref dataEntry);

milestone.DataEntryId = dataEntry.Resource.Id;
dataEntry.Resource.SetUserData<Milestone>(milestone);
dataEntry.Update();
}

Note: The Milestone is being stored as a DataEntry and added to the DataFeed
collection. Notice the Milestone object is being serialized in the DateEntry by using the
SetUserData method.

6. Add the code to update a Milestone. Add the following code (shown in bold) inside the
UpdateMilestone method.
(Code Snippet – Online-Offline Distributed Apps Lab - UpdateMilestone)
C#
public static void UpdateMilestone(Milestone milestone)
{
var meshSession = RetrieveSession();
if (meshSession == null)
{
throw new InvalidOperationException("Session timeout");
}

var meshProject = (from mo in meshSession.MeshObjects.Entries

where mo.Resource.Id == milestone.MeshObjectId
select mo).SingleOrDefault();

var milestonesEntry = (from e in meshProject.DataFeeds.Entries

where e.Resource.Type == "Milestones"
select e).SingleOrDefault();

var dataEntry = (from e in milestonesEntry.DataEntries.Entries

where e.Resource.Id == milestone.DataEntryId
select e).SingleOrDefault();
 dataEntry.Resource.SetUserData<Milestone>(milestone);
dataEntry.Update();
}

Note: In this method, the Project MeshObject is retrieved, from which the milestones
DataFeed is obtained. Finally, the DataEntry of the Milestone is obtained and updated
by re-serializing the Milestone object (SetUserData method). Everything is done using
LINQ queries.

7. Now add the code to retrieve one Milestone. Replace the current GetMilestone
method with the following code.
(Code Snippet – Online-Offline Distributed Apps Lab - GetMilestone)
C#
public static Milestone GetMilestone(string meshObjectId, string
dataEntryId)
{
var meshSession = RetrieveSession();
if (meshSession == null)
{
throw new InvalidOperationException("Session timeout");
}

var meshProject = (from mo in meshSession.MeshObjects.Entries

where mo.Resource.Id == meshObjectId
select mo).SingleOrDefault();

var milestonesEntry = (from e in meshProject.DataFeeds.Entries

where e.Resource.Type == "Milestones"
select e).SingleOrDefault();

var dataEntry = (from e in milestonesEntry.DataEntries.Entries

where e.Resource.Id == dataEntryId
select e).SingleOrDefault();
if (dataEntry != null)
{
return dataEntry.Resource.GetUserData<Milestone>();
}
else
{
return null;
}
}

Note: The Milestone object is deserialized from the DataEntry by using the GetUserData
method.
 8. Add the code to delete a Milestone. To do this, in the DeleteMilestone method
replace the following code (shown in bold):
(Code Snippet – Online-Offline Distributed Apps Lab - DeleteMilestone)
C#
public static void DeleteMilestone(string meshObjectId, string
dataEntryId)
{
...

if (dataEntry != null)
{
milestonesEntry.DataEntries.Remove(dataEntry);
}
}

Note: This method is very similar to the GetMilestone method described before. The
only difference is that instead of calling the GetUserData to desearialize the object, the
milestone is deleted by calling the Remove method of the parent DataFeed object's
(milestonesEntry) DataEntries property.

Verification
In order to verify that you have correctly performed every steps of exercise one, proceed as
follows.
1. Run the solution. To do this, from Visual Studio, press F5.

Note: Ensure the Live Framework Client is running and connected by checking the state
of the icon in the notification area:
 Figure 15
WPF application

2. Add a new project. To do this, click the Add Project button.

Figure 16
WPF application

3. Create a new Project. To do this, set the Title to OS Development Project and click the
Save Project button.
 Figure 17
Creating a project

4. Select the Project in the Selected Project drop-down list.

Figure 18
Selecting a project

5. Add a new milestone. To do this, click Add Milestone.

Figure 19
Adding a milestone

6. Set the Title to Device drivers and the Status to Pending. Click Save Milestone to
commit the changes.
 Figure 20
Creating a milestone

7. Add a new milestone. To do this, click Add Milestone.

Figure 21
Adding a milestone

8. Set the Title to Memory Management and the Status to Pending.

 Figure 22
Creating a milestone

9. Click Save Milestone to commit the changes. The milestones of the project are listed in
the grid.
 Figure 23
Project with Milestones

Note: The application is working against the Live Framework Resource Model exposed by
the local Live Operating Environment. However, all the changes made by the application
locally are synchronized (in the background) with the cloud Live Operating Environment
If you were disconnected from the internet the application would still be fully functional,
but changes would be replicated to the cloud once the connection is re-established.

Exercise 2: Accessing the Live

Operating Environment from a
ASP.NET Web Application
In this exercise, you will be using with an ASP.NET Web application (Web Project Manager) that
implements a simple project management scenario with projects and milestones, very similar to
the one used in exercise one.
The application will also store and retrieve the application data as Live Framework resource
objects, but accessing the cloud Live Operating Environment running at https://user-
ctp.windows.net, instead of its client version running at the local device. This way, you have two
different applications running on different platforms (browser-based or desktop-based) that can
seamlessly share the same data using a consistent interface.
Task 1 – Connecting the Web Application to the Cloud Live Operating Environment
In this task, you will see how the application connects to the cloud Live Operating System by using
the LiveOperatingSystem and Mesh classes from the Live Framework .NET Toolkit.
1. Open the provided starting solution. To do this, from Visual Studio, open the solution
file located at %TrainingKitInstallationFolder%\
Labs\BuildingClientAppsLiveFramework\Ex2-WebApplication\Begin\Begin.sln.

2. The solution is made up of one project. This project is a Web Application project. The
project has four ASP.NET pages and inside the Library folder there exist a Milestone.cs
and a Project.cs file, these two classes are used to manage Milestones and Projects.
Also inside Library you will find a static helper classes that interacts with Live Mesh.
Pages do not know anything about Mesh and the Live Operating Environment, they send
and receives typed object to the helper and the helper solves all the operations against
Mesh.

Figure 24
Solution overview

Note: Notice that is just a web application that consumes Live Services, it is not a mesh-
enabled web application.
3. Open the ProjectHelper.cs file inside Library folder.

Figure 25
Editing ProjectHelper class

4. Add the code to create a connection to the Live Operating Environment. To do this,
find the CreateMeshSession method and replace the current code with the following:
(Code Snippet – Online-Offline Distributed Apps Lab - CreateMeshSession)
C#
public static bool CreateMeshSession(string userName, string password,
Uri meshCloudUri)
{
// Use "LiveItemAccessOptions" to pre-fetch the resources
var accessOptions = new LiveItemAccessOptions(true);
NetworkCredential credentials = new NetworkCredential(userName,
password);

try
{
LiveOperatingEnvironment endpoint = new
LiveOperatingEnvironment();
var authToken = credentials.GetWindowsLiveAuthenticationToken();
endpoint.Connect(authToken, AuthenticationTokenType.UserToken,
meshCloudUri, accessOptions);
Mesh meshSession = endpoint.Mesh;
HttpContext.Current.Session["MeshSession"] = meshSession;
 return true;
}
catch (WebException ex)
{
if (ex.Message.Contains("(401) Unauthorized"))
{
return false;
}
else
{
throw;
}
}
catch
{
throw;
}
}

Note: The method creates a user token using the Windows Live ID userId and password
and connects to the cloud Live Operating Environment by calling the connect method of
the Live Operating Environment class using the token and the cloud operating
environment endpoint uri. Finally it obtains the Mesh object to get access to the
resource model entities that will be used in the application.

5. You will notice that every method inside the ProjectHelper class starts with a
validation. This validation checks if the session is still active before the method is
executed.
C#
var meshSession = RetrieveSession();
if (meshSession == null)
{
throw new InvalidOperationException("Session timeout");
}

6. Also notice that the methods for retrieving and storing Projects and Milestones in the
ProjectHelper class are identical to the ones used in exercise one (where the client Live
Operating Environment was being used).

Note: It is important to note that the programming model exposed by the cloud Live
Operating Environment is identical to that of the client version, Client LOE (referred as
cloud/client symmetric programming model).
 7. The RetrieveSesion method checks if the Mesh session object is stored in the
HttpContext session.
C#
private static Mesh RetrieveSession()
{
var session = HttpContext.Current.Session["MeshSession"] as Mesh;
return session;
}

Verification
Now you will verify that the Web Project Manager application works as expected against the cloud
Live Operating Environment. Also, if you have done exercise one, you will be able to check that as
a result of client and cloud Live Operating Environment synchronization the data consumed by
both applications is the same.
1. Press F5 to debug the application.
2. In this login page you should provide your Live Id credentials and click Login.

Figure 26
Providing your Live Id credentials

Note: By providing the live id credentials the user the application has is authorized to
access to the entire user Mesh data and application instances. In a more realistic
scenario, the Web Project Manager application would use delegated authentication to
request access permission from the user to its resource model data.
3. If the login was successful, you will be redirect to the ProjectManager.aspx page.
In this page you will see a drop-down list with all the loaded projects and their milestones.

Figure 27
Browsing projects

Note: Notice that the project being displayed was created with the WPF desktop-based
application locally.

4. In this page you can also add, edit or create a new project. To create a new project,
click the Create Project link on the upper right corner of the page.

Figure 28
Creating a new project
 5. Once you clicked the link you will see EditProject.aspx page. In this page, fill the
project title and click Save. The project will be stored in Live Mesh and you will be
redirected to ProjectManager.aspx page

Figure 29
Filling Project information

Note: You can edit a project by selecting the Edit Project link.

Exercise 3: Working Online and Offline

with Synchronized Data
In this task, you will learn about the online and offline capabilities of the client Live Operating
Environment. The WPF desktop application will working disconnected from the internet against a
local version of the Live Operating Environment. The Live Framework Client will be then
responsible of synchronizing the local data with the cloud.
Task 1 – Starting the Applications
Note: In this task you will use WPF and ASP.NET solutions created in the previous exercises. The
previous exercises contain finished solutions. You may use them in this exercise if you have not
completed the previous exercises.

1. Start the Live Framework Client from Start | All Programs | Live Framework Client |
Live Framework Client ( ).

2. A new icon for the Mesh notifier should appear ( ) on the desktop notification area,
point the icon and a Sign In window will appear. Click the Sign In link.

Figure 30
Live Framework Client

3. Provide your Live Id credentials and click Sign In.

Figure 31
Signing In to Mesh
4. The mesh notifier should be displayed and the live framework client icon in the
notification area should change to a connected state ( ).

Figure 32
Signing In to Mesh

5. Run the Project Manager WPF application. To do this, in Visual Studio, open the end
solution file located in the %TrainingKitInstallationFolder
%\Labs\BuildingClientAppsLiveFramework\ Ex1-WPFApplication\End\End.sln.
 Figure 33
WPF Application

Note: The WPF application creates a Mesh object using the ConnectLocal method of the
LiveOperatingEnvironment class from the Live Framework SDK. The connection is
performed against the Client Live Operating Environment that is running in your local
host (using port 2048). The Live Mesh Client is responsible for synchronizing the change
sets to and from the Live Mesh cloud.

6. Now run the Project Manager ASP.NET Web Application. To do this, in Visual Studio,
open the end solution file located by default in %TrainingKitInstallationFolder
%\Labs\BuildingClientAppsLiveFramework\Ex1-WPFApplication\End\End.sln. Press F5
to run the solution and provide your Live Id credentials.
 Figure 34
ASP.NET Application

Note: The Web application is connected directly with the Live Mesh cloud (it is not using
the Live Framework Client)

7. You should see the projects created in the previous exercise.

Figure 35
Previously created project
Task 2 – Going Offline
1. Simulate an offline work. To do this, in the desktop notification area, right-click the Live
Framework Client icon ( ) and select Work offline.

Figure 36
Singing In to the Live Mesh client

2. The Live Framework Client icon changes to an offline state ( ) . This means that all
the data will be stored locally.
3. Create a new milestone in the OS Development Project. To do this, from the WPF Live
Mesh Sample application, select the OS Development Project from the Selected Project
drop-down list to list all the project milestones. Click the Add Milestone.
 Figure 37
Selecting a project

4. Set the Milestone data. To do this, set the Title to Offline Milestone and click Save
Milestone.
 Figure 38
Adding a milestone

5. The Offline Milestone is displayed in the Milestones grid. This milestone has been
created in a local instance created by the Client Live Operating Environment and has not
been sent to the cloud.
 Figure 39
Viewing the milestones

6. Refresh the web page to notice that there is no new milestone added in Live Mesh. To
do this, go to the browser where the Web Project Manager application is running and
press F5.
 Figure 40
Milestones

Task 3 – Coming Back Online

1. Enable online work. This will synchronize the newly created milestone to the Live Mesh
Cloud. To do this, right-click in the Live Mesh Client icon inside the task bar and uncheck
the Work offline option.

Figure 41
Milestones

2. The Live Mesh Client icon should be displayed without the exclamation sign ( ).
3. Create a new milestone in the OS Development Project. To do this, from the WPF Live
Mesh Sample application, select the OS Development Project from the Selected Project
dropdown list to list all the project milestones. Click Add Milestone.
 Figure 42
Adding a milestone

4. Set the Milestone data. To do this, set the Title to Online Milestone and click Save
Milestone.
 Figure 43
Creating a milestone

5. The Online Milestone is displayed in the Milestones grid. This milestone has been
created in a local instance created by the Live Mesh Client and has been sent to Live Mesh
because now the Live Mesh Client is working online.
 Figure 44
Viewing the milestones

6. Refresh the web page to notice that there both milestones have been synchronized to
the Live Mesh Cloud. To do this, press F5 in your browser.
 Figure 45
Milestones.

Note: The local Live Operating Environment has sent to the cloud, both the milestone
created when working offline and the newly created milestone created when working
online.

Summary
In this lab, you have learnt how to setup the local environment by installing the Live Framework
Client. learned how to connect to the different flavors of the Live Operating Environment from
different applications for persisting and retrieving shared data, using the Live Framework Resource
Model as a centralized repository.