How to create your own application for My World@Mail.ru on Silverlight 4 in 10 minutes

I am glad to share with you the news that today we announced the Silverlight SDK for developing applications for the social network My World@Mail.Ru. This product is the result of close cooperation between Mail.Ru, Microsoft and us.

Here I would like to talk about how anyone can make their application in 10 minutes. So let's go.

Install SDK

')
To create the application, you will need Silverlight 4 runtime installed, Silverlight 4 developer tools, and My World@Mail.Ru Silverlight SDK directly. To download the latter, you can use the official website , download from the Visual Studio Gallery, or use the built-in mechanisms of the Visual Studio Extension Manager for downloading extensions.

Installing the SDK is a standard procedure from the sequence “Next - Next - Next” and confirming the addition of the extension in Visual Studio 2010. After installing the SDK, the extension should appear in the Extension Manager. You should make sure it is active, if not, then activate.

After these steps, when creating new projects, you should have a template for creating an application for the My World network.

This completes the installation and you can proceed to creating the application directly.

Creating an application

After the installation of the SDK is over it's time to go to creating the application. To do this, select the “New Project” menu item and create a new project using the “My World@Mail.Ru” template from the “Silverlight” section. After creating the application, you can see that the project is a typical Silverlight application, in which there is a link to the “Oogsoft.MyMir.SilverlightAPI” assembly. In addition, instead of the standard Application class, the new class SocialApplication is used. This is necessary so that the application can automatically get the settings from the My World network.

  <SilverlightAPI: SocialApplication xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                   xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
                                   xmlns: SilverlightAPI = "clr-namespace: Oogsoft.MyMir.SilverlightAPI; assembly = Oogsoft.MyMir.SilverlightAPI"
                                  
                                   x: Class = "FriendsApp.App">
     <SilverlightAPI: SocialApplication.Resources>

     </SilverlightAPI:SocialApplication.Resources>
 </ SilverlightAPI: SocialApplication>

Now we can go to the main form of the application and add the necessary controls there. Let's create an application that will receive the list of friends of the current user and display on the screen. To do this, add a ListBox control to the form and a button that, when clicked, will access the social network.

  <UserControl x: Class = "FriendsApp.MainPage"
     xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns: d = "http://schemas.microsoft.com/expression/blend/2008"
     xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc: Ignorable = "d"
     d: DesignHeight = "300" d: DesignWidth = "400">

     <Grid x: Name = "LayoutRoot" Background = "White">
         <ListBox Height = "276" HorizontalAlignment = "Left" Margin = "12,12,0,0" 
                  Name = "listBox1" VerticalAlignment = "Top" Width = "232" />
         <Button Content = "Friends" Height = "23" HorizontalAlignment = "Left" 
                 Margin = "250,12,0,0" Name = "button1" VerticalAlignment = "Top" Width = "75" />
     </ Grid>
 </ UserControl>

Now we need to define an event handler for the button. In it, we turn to social network resources and try to get data.

To work with social network resources, objects with public interfaces are used. For example, the IFriends interface should be used for working with the list of friends, and IPhotos for working with photos. A complete list of social networking sites can be found in the SDK documentation .

To obtain the corresponding objects, a special factory is used - SocialFactory. This object has a static Create method with a generic parameter. This parameter is necessary in order to tell the factory exactly which object we need at the moment. For example, if we need to work with the list of friends, then as a parameter, we should pass the interface IFriends.

  private void button1_Click (object sender, RoutedEventArgs e)
 {
     var friends = SocialFactory.Create <iFriends> ();
 }

Each interface has a set of operations that are allowed to perform. Since all operations on working with external resources in Silverlight are performed asynchronously, the operations themselves do not return any result. Instead, as a parameter for these operations, a delegate is passed to the method that will be executed after the operation is completed. The second delegate is executed during the data load process and can be used to display the progress of the load. If we do not need to display the download progress, then in place of this parameter, you can specify null.

The code for getting a list of friends and displaying it in ListBox will look like this.

  var friends = SocialFactory.Create <iFriends> ();
 friends.Get (delegate (IEnumerable <Friend> result, Exception error)
                 {
                     if (error == null)
                     {
                         listBox1.ItemsSource = result;
                     }
                     else
                     {
                         listBox1.ItemsSource = null;
                         MessageBox.Show (error.Message);
                     }
                 },
                 null);

Now let's work with ListBox. We need to customize the appearance of this control to display data. We will display user avatars. Therefore, we will place an Image object into the template of this control and assign its Source property to the Pic field, which contains the avatar address for each user. As a result, we get the following markup for the control.

  <UserControl x: Class = "FriendsApp.MainPage"
     xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns: d = "http://schemas.microsoft.com/expression/blend/2008"
     xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc: Ignorable = "d"
     d: DesignHeight = "300" d: DesignWidth = "400">

     <Grid x: Name = "LayoutRoot" Background = "White">
         <ListBox Height = "276" HorizontalAlignment = "Left" Margin = "12,12,0,0" 
                  Name = "listBox1" VerticalAlignment = "Top" Width = "232">
             <ListBox.ItemTemplate>
                 <DataTemplate>
                     <Image Source = "{Binding Pic}" Width = "100" Height = "100" />
                 </ DataTemplate>
             </ListBox.ItemTemplate>
         </ Listbox>
         <Button Content = "Friends" Height = "23" HorizontalAlignment = "Left" 
                 Margin = "250,12,0,0" Name = "button1" VerticalAlignment = "Top" Width = "75" Click = "button1_Click" />
     </ Grid>
 </ UserControl>

On this the logic of our application is ready and we can proceed to the publication of the application.

Application Publishing

To get the opportunity to communicate with the developer community, you can join a special community for application developers . The rules for joining the community are also described on a special page .

In order to publish your application you need to go to your personal account at http://api.mail.ru/apps/my/ and click the button "Create an application".

Then you should indicate the name of the application and indicate the type of application “iFRAME”. After creating the application in the application management section, you can get a special key - private key. It must be specified in the App.xaml.cs file of your application.

  public partial class App
 {
     protected override string PrivateKey
     {
         get {return "31ce536824a120e24ea73ad80d5a8dd8";  }
     }

After that, you can build the application. For the convenience of the developers, the SDK itself copies the necessary files into the Publish folder, and also creates an archive for the download to the server. To host the application, you can use two options - place the received files on your own server, or use the Mail.Ru offer and place the application on their servers.

If you use your own hosting, then you should place the file “receiver.html” in the server root. For example, if you host your application at mymir.oogsoft.com/apps/mailru/testapp1 , then the path for placing this file should be mymir.oogsoft.com/receiver.html .

If you want to use Mail.Ru resources to host applications, you should go to the hosting tab and download all the necessary files.

As I mentioned, My World@Mail.Ru Silverlight SDK automatically packs all files into an archive for easy downloading. You just need to upload a single file “publish.zip” and its contents will be unpacked and placed on the server.

After placing your application on the server, you should specify the path to the application files. To do this, go to the iFrame Settings tab and specify paths.

Now you can go to the application page. In order for the application to work correctly with network services, you should install it for the current user.

Our application is ready to use! Once the application is ready, it should be declared public. To do this, you need to change the status of the application on the “Publication” tab.

How to create your own application for My World@Mail.ru on Silverlight 4 in 10 minutes

Install SDK

Creating an application

Application Publishing

Links

More articles: