Skinning Messenger Plus! Itself

If you're really maniac about customizing every last bit of Messenger, then you may be interested in customizing the windows of Messenger Plus! itself. Messenger Plus! uses its own proprietary windowing system that's not so difficult to understand and modify, or you may say, it's way easier to modify Messenger Plus! windows than it is to modify Messenger ones (Messenger uses a more complex system that allows more liberty in the layout).

Windows Interface Files

In order to use the interface system of Messenger Plus!, you will need to get used to the way XML interface files are constructed and this may require a little bit of time. Interface files contain a lot of different kinds of elements and attributes, here is an example of what a simple window with a label and a button looks like:

<Interfaces>

    <Window Id="WndTest" Version="1">
        <Attributes>
            <Caption>Test Window</Caption>
        </Attributes>

        <TitleBar>
            <Title><Text>Hello!</Text></Title>
        </TitleBar>

        <Position ClientWidth="170" ClientHeight="45"/>
        <DialogTmpl/>

        <Controls>
            <Control xsi:type="StaticControl" Id="LblTop">
                <Position Left="10" Top="10" Width="150"/>
                <Caption>Hello world!</Caption>
            </Control>

            <Control xsi:type="ButtonControl" Id="BtnClose">
                <Position Left="115" Top="25" Width="50"/>
                <Caption>Close</Caption>
            </Control>
        </Controls>
    </Window>

</Interfaces>

All interface files must be saved in Unicode (UTF16). Many windows can be declared in the <Interfaces> root element, each one constructed with the same basic principle: first, a <Window> element is declared with two attributes: Id (used by Messenger Plus! to locate the correct template for each window) and Version (don't worry about that and set it to 1 when creating new windows).  Inside the <Window> element are a couple of interesting sub elements:

• <Attributes>. You'll often see this element in various other places. In a <Window> element. it is used to define optional attributes for the window such as <Caption> (which is the caption of the window displayed in the task bar), <TopMost> (to make the window appear above every other), ...
• <TitleBar>. Most Messenger Plus! windows display a title bar baring a Messenger Plus! logo, the name of the window and system buttons to minimize, maximum or close the window. Everything related to the title bar is defined in this element.
• <Position>. Used to define the default width and height of the client area, this element can also be used to specify that the window can be resized. You may want to notice that the size is specified in Dialog Units, not Pixels. Every positions and sizes defined in interface files uses Dialog Units by default which allows the windows to adapt on various dpi settings (if this does not make any sense to you, forget about it).
• <DialogTmpl>. This empty element is very important as it defines one of possible three choices for each window: dialog, window or child window. Most of the windows you'll see in Messenger Plus! will be based on the dialog template which defines a double border and allows different kinds of extra settings such as a bottom bar. Custom option panels are based on the child window template.
• <Controls>. This is where you'll define all the controls displayed in the window like static controls (text labels), buttons, checkboxes, lists, ...

Let's take a look at the controls defined in this window:

• Each control has the same basic structure. A control is always defined with a <Control> element and two mandatory attributes: xsi:type and Id. xsi::type specifies the kind of control that's being defined, like a a static control (label) or a button. Id is the unique identifier of the control in the window. No control can have the same Id in a given window or the creation of the window will fail (remember that as it can easily be the cause of copy/paste frustrations). The Id can be anything you want but cannot contain any space character. Although it is considered to be a good practice to prefix your identifiers with the kind of control you're defining (like "Btn" for buttons), it is not mandatory.
• Next comes <Position>. This element is required for any kind of control. The Left and Top attributes are always mandatory, Width is generally required too, however, Height can be optional for controls that don't need it. For example, in the case of a single line static control and a button, the Height parameter is automatically computed by Messenger Plus! to prevent inconsistencies through out the windows. You can always specify your own value though.
• Elements that come after <Position> are generally type dependant, meaning that each kind of control has its own set of possible elements and attributes. Here, we see <Caption> being used in both controls, however, we could also have used <BackgroundColor> for the static control and <Image> for the button which are elements reserved for each type of control respectively.

The Interface Windows schema file and its documentation can be found in the schema reference section of this documentation. Study it and use it as a constant reference when editing interface files.

Skinning Messenger Plus!

Remember the "Messenger Plus! Resources" option of the Resource Extractor that you were told to ignore in Integration with Messenger? it's time to take off the gloves and to extract this special set of resources! you've probably already guessed it by now, this option will create a Messenger Plus! subdirectory, in your extracted resources directory, containing all the interface files of Messenger Plus! as well as all the pictures it uses.

The windows of Messenger Plus! are structured this way: many xml files are used and each one of them includes the definition of several windows. The only ones not accessible to the skinning system are the Log Viewer windows (technical limitation) and the Uninstaller windows (security reasons). Each xml files is self contained and makes no external references except for picture files. All the pictures can be found in the Images subdirectory and use PNG encoding by default. Skins can replace windows and picture files alike. It is important to note that each window is loaded separately, replacing a file doesn't necessarily mean replacing a whole set of windows. When you want to skin one of Messenger Plus!'s windows, just create a new xml file with the new window's code in it and save the file in your interfaces directory, using the name of your choice (it just needs to have an .xml extension). When Messenger Plus! will search for the window's template, it will read all your xml files to find a corresponding window's id.

Here is an example of skininfo code declaring skinned interfaces for Messenger Plus! :

<PlusSkin>
    <ResGroup>
        <PlusVersion Major="4" Minor="50"/>
        <InterfaceDir>PlusWindows</InterfaceDir>
    </ResGroup>
</PlusSkin>

<PlusSkin> is the last element that can be defined under <SkinInfo>. Like <MessengerSkin>, it uses resource groups but in a much simpler fashion. Resource groups are not combined here, the first one found to match the current version of Messenger Plus! is used, that's all. Here is a description of the supported elements:

• PlusVersion. This element restricts the group to a given version of Messenger Plus!. A Language  ISO code attribute can also be specified to be compared to Messenger Plus!'s current translation (see .ini files in the Languages directory of Messenger Plus!).
• InterfaceDir. Name of the subdirectory in your skin's directory where the interface files can be found.

In the example above, Messenger Plus! would search for its interface files in %skindir%\PlusWindows and the new/modified pictures for the interfaces would need to be in %skindir%\PlusWindows\Pictures. Note that Messenger Plus! will always search in its own resources if a picture or a window is missing so don't redistribute copies of unmodified resources with your skin. Also, you must always keep the current control ids intact and not remove any of them from any window, with the exception of static controls: if you want to modify the text of a label, you'll have to modify its id as Messenger Plus! will automatically replace the text of known controls with their corresponding localized versions.

Testing Your Windows

Complex windows created with XML data can become difficult to visualize and testing them in Messenger itself can sometimes cause additional complications and unnecessary delays. For those reasons, a special tool called "Interface Tester" was created to help developers preview their creations quickly and without hassle (the same tool is also provided to script developers).

The software can be downloaded and run from any directory and Messenger Plus! Live needs to be properly installed on the system (Messenger does not need to run). "Interface Tester" will be able to properly preview any file that is located in a sub-directory of the Messenger Plus!'s "Skins" directory.

In addition to displaying your windows on screen, "Interface Tester" is also capable of validating your XML files if the schema file is copied in the same directory and if MSXML 5.0 or above is installed on your system (you can get MSXML at microsoft.com, Windows Vista users don't need it). It is highly recommended that you do not redistribute any file that does not validate against the most current version of the Interface Windows' Schema File. If a file is considered to be invalid, "Interface Tester" will refuse to load it and will display an error message explaining the problem.

Download "Messenger Plus! Live - Interface Tester"

Note that this software is provided as-is, as a development tool only. It is not meant for general public use and must not be redistributed without direct authorization.

See Also

Specialized Subjects.