0 out of 1 rated this helpful - Rate this topic

Creating UI Controls Dynamically

Note:
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.

You can use JavaScript to dynamically add, update, and remove Messenger Connect UI controls from your webpage. Dynamically added controls offer more programming flexibility than imperatively defined controls, which are controls that are defined in the XHTML markup.

Using the ASP.NET Ajax Library

Messenger Connect UI Controls inherit from the ASP.NET Ajax Library Sys.UI.Control class. To ease development, the Ajax library provides methods for creating and disposing of controls. The methods are static and can be called without creating an instance of the class. For example, use the create method of the Ajax Library Sys.Component class to add a control, and the dispose method to remove a control.

The following example adds a Display Name Control control for the signed-in user in the DOM element named display-name.

JScript

Microsoft.Live.Core.Loader.onReady(function () {
    Microsoft.Live.Core.Loader.load(["Microsoft.Live", "Messenger.UI"], function () {
        $create(Microsoft.Live.UI.Messenger.DisplayNameControl,
            { cid: '$user' },
            {},
            {},
            $get('display-name')
            );
        });
    });

The following example adds a Sign In Control control to the DOM element named signin-div and defines several properties of the control. Defined items include the signedInText and the signedOutText properties as well as the callback functions for the signin and signout events.

JScript

Microsoft.Live.Core.Loader.onReady(function () {
    Microsoft.Live.Core.Loader.load(["Microsoft.Live", "Microsoft.Live.UI", "Microsoft.Ajax.Core"], function () {
        $create(Microsoft.Live.UI.SignIn,
            { signedOutText: 'Sign In', signedInText: 'Sign Out' },
            { signin: signInCallback, signout: signOutCallback },
            {},
            $get('signin-div')
            );
    });
});

Using the Initialize Method

Each control class in the Microsoft.Live.UI namespace has an initialize method that provides an additional way to create an instance of that class. The following example adds a Sign In Control control in the DOM element named signin-div by use of the initialize method of the SignIn control class.

JScript

Microsoft.Live.Core.Loader.onReady(function () {
    Microsoft.Live.Core.Loader.load(['microsoft.live', 'microsoft.live.ui'], function () {
        signInControl = new Microsoft.Live.UI.SignIn($get('signin-div2'));
        signInControl.set_signedInText('Sign Out');
        signInControl.set_signedOutText('Sign In');
        signInControl.add_signin(signInCallback);
        signInControl.add_signout(signOutCallback);
        signInControl.initialize();
    });
});

Using Data from the Windows Live Messenger Library

Most UI Controls reference a CID value, which uniquely identifies each user contact. For example, CIDs are used to instantiate each contact's display name, display picture, status, personal message, conversation, and profile control.

The following code example shows how to get the CID from a contact object and how to use the CID in the controls that you create.

JScript

var cid = contact.get_cid();
Microsoft.Live.Core.Loader.onReady(function () {
    Microsoft.Live.Core.Loader.load(["Microsoft.Live", "Messenger.UI"], function () {
        $create(Microsoft.Live.UI.Messenger.DisplayNameControl,
            { cid: cid },
            {},
            {},
            $get('display-name-contact')
            );
    });
});

Concepts

Messenger Connect UI Controls

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)