Export (0) Print
Expand All

Declarative vs. Imperative Programming (JavaScript Library)

Ff750239.note(en-us,MSDN.10).gifNote:
Current information about Live Connect is now available in the Windows Live Developer Center. The information in the following sections is provided for legacy purposes only.

The JavaScript Controls for Windows Live Messenger Connect provide a way to invoke the JavaScript API without writing code. The following table describes the two models for using the API.

Model Description

Declarative

Involves the use of markup to invoke the underlying API implicitly. For example:

  • The <wl:userinfo> and <wl:signin> controls automatically call the underlying API as needed. The <wl:userinfo> control enables you to show a user's profile on a webpage, and the <wl:signin> control displays a button that initiates the Windows Live ID sign-in and consent process.
  • The <wl:app> tag provides application metadata. You use this tag only to initialize your application. It generates no user interface.

In this model, you add only the markup and don't do any programming. For a list of supported controls, see Messenger Connect UI Controls.

Imperative

Involves writing code and making explicit API calls.

The rest of this topic discusses these controls and the corresponding API calls.

The following is the simplest form of markup for implementing user sign-in.

<wl:signin></wl:signin>

This markup causes a Connect button to be rendered on the page. When a user clicks this button, underlying JavaScript API calls initiate the Windows Live ID sign-in process. Upon successful authentication of the user, the button text changes to Sign Out.

You can customize this control to match your site's look and feel. For details, see Messenger Connect UI Controls.

Instead of using the JavaScript control, you can call the JavaScript signIn method as shown in the following code example.

function signin() {
     Microsoft.Live.App.signIn(signInComplete);
}

In its simplest form, the markup for the <userinfo> control is as follows.

<wl:userinfo></wl:userinfo>

If you add this control to a webpage, after a user is authenticated and provides consent, it shows the user's Windows Live general profile data (the first name and thumbnail picture).

You can customize this control to match your site's look and feel. For example, before sign-in, the control displays a common "unauthenticated user" profile image that can also be configured to use some other image. You can also bring in additional user profile data from Windows Live. For details, see Customizing the UserInfo Control.

Instead of using the JavaScript control, you can make explicit API calls to retrieve Windows Live user profile data and add it to your website. The following JavaScript function retrieves all user profiles from Windows Live and shows several examples of processing the user profiles collection.

function GetProfiles(dataContext) {
    dataContext.loadAll(Microsoft.Live.DataType.profiles,
            function(args) {
                if (args.get_resultCode() !== Microsoft.Live.AsyncResultCode.success) {
                    alert("Error retrieving profiles");
                    return;
                }
                var profileCollection = args.get_data();
                alert("Successfully retrieved profiles: " + profileCollection.get_length() + " entries");

                // Display the first name from the AboutYouProfile.
                alert("First name: " + profileCollection.get_aboutYouProfile().get_firstName());

                // Alternatively, read a specific profile and process it.
                var aboutYouProfile = profilesCollection.findFirstWithTitle("AboutYouProfile", true);
                alert(aboutYouProfile.get_firstName());

                // You can also iterate through all the profiles.
                for (var i = 0; i < profileCollection.get_length(); i++) {
                    // Process the profiles.
                    Var profile =  profileCollection.getItem(i);
                }
            });
}

In the preceding code, the second parameter of the loadAll() function is an inline callback function that is executed when loadAll() is complete.

You use the <app> tag to provide application-configuration information (or metadata). The <app> tag in the following example is used in the Getting Started Sample for ASP.NET.

<wl:app 
    client-id="<Your-Client-Id>" 
    channel-url="/channel.html"
    callback-url="/OAuthWrapCallback.ashx" 
    scope="WL_Profiles.View, Messenger.SignIn" 
    onload="{{appLoaded}}">
</wl:app>

Again, instead of using the markup, you can write code and make explicit JavaScript API calls to accomplish the same result. The following example demonstrates this use of the API.

Microsoft.Live.Core.Loader.load(["microsoft.live"], function () {
    Microsoft.Live.App.initialize({
    channelurl: "https://<Your-Domain>/channel.html",
    callbackurl: "https://<Your-Domain>/OAuthWrapCallback.ashx",
    clientid: "<Your-Client-ID>",
    scope: "WL_Profiles.View, Messenger.SignIn",
    onLoad: "{{appLoaded}}"
    });
});

For both preceding examples, you must include a loader reference (<script type=”text/javascript” src=”http://js.live.net/4.1/loader.js”></script>) on your webpage.

Show:
© 2014 Microsoft