How to bind a custom window to the toolbar

In this tutorial I will show you how to create a new button on the toolbar and bind a window to it. This is assuming you have already done the previous tutorial, since we are going to be using the DollWindow we just made. Alas, we can open and close it using the /show doll command that we just wrote, but what if that's not good enough and we want it in the toolbar as well? Well, this insanely short tutorial will show you how to please your users!

Our objectives are the following:

1. Modify the DollWindow we made in the previous tutorial so the toolbar can work with it
2. Add DollWindow to the toolbar itself
3. Resize the toolbar

If you are reading this tutorial, then:

• You have some knowledge of C++ and XML
• You can compile and run psclient
• You have done the previous tutorial because we will be using the same source code

So we begin. Also, how to skin your new toolbar button is going to be beyond the scope of this tutorial.

Modifying DollWindow

First off, we have to modify the pawsDollWindow class that we just made so that it can work with the toolbar. This is the easy part.

pawsdollwindow.h

Go into your src/client/gui directory and open up the pawsdollwindow.h file you made in the previous tutorial. First off, in your includes, add the following line:

#include "gui/pawscontrolwindow.h"

This will include the header file for pawscontrolwindow.cpp. Remember the part of the last tutorial where we modified pawscontrolwindow.cpp to add the /show doll command? It just happens to be that this same source file has the class for the toolbar! The toolbar class itself is called pawsControlWindow, but the same source file has another class called pawsControlledWindow that we are interested in. The prior is the toolbar itself and the latter is the superclass for windows that appear in the toolbar. Now, go down to your pawsDollWindow declaration. See the following line?

class pawsDollWindow : public pawsWidget

We want to change it to the following:

class pawsDollWindow : public pawsControlledWindow

Wow, that was easy! On to the next part.

Modifying the toolbar

As I said before, the pawsControlWindow class is the class for the toolbar itself, so let's open up pawscontrolwindow.cpp now.

pawscontrolwindow.cpp

Go ahead and read down until you get to its PostSetup function. You get something that looks like the following:

bool pawsControlWindow::PostSetup()
{
    SetAlwaysOnTop(true);

    AddWindow( "InventoryWindow" ,   "InventoryButton" );
    AddWindow( "ConfigWindow" ,      "OptionsButton" );
    ...
    AddWindow( "GuildWindow" ,       "GuildButton" );

This is a list of windows that are linked to the toolbar, as they are named in their respective XML files, and the button names they are associated with as named in control.xml. The AddWindow function itself creates the actual button and binds a window to it. So the button called "InventoryButton" in control.xml is associated with the widget called "InventoryWindow". Of course there is none for our pawsDollWindow class. Remember in our dollwindow.xml file how we named our widget "DollWindow"? For now let's name it that and give the button the name "DollButton". So add the following line of code:

    AddWindow( "DollWindow" ,        "DollButton" );

For the next step we're gonna have to remember that we named our new button "DollButton" in the source file.

control.xml

Go to your data/gui directory and open up control.xml. What you see is your "ControlWindow" widget (the toolbar) and a whole bunch of child nodes resembling the buttons used here. The "ShowButtonUp" and "ShowButtonDown" are used for collapsing and expanding the toolbar. On the end of this list, add the following:

<widget name="DollButton" factory="pawsButton" id="1500" tooltip="Doll" sound="gui.toolbar">
   <frame x="495" y="1" width="34" height="34" />
   <bgimage resource="InventoryButton" />
   <attachpoints>
      <attach point="PROPORTIONAL_RIGHT" />
      <attach point="PROPORTIONAL_LEFT" />
      <attach point="PROPORTIONAL_BOTTOM" />
      <attach point="PROPORTIONAL_TOP" />
   </attachpoints>
</widget>

What this does is add a button to the toolbar called "DollButton"; since we changed the source file in the previous step it's going to expect a pawsButton called "DollButton" to appear in this widget. Also, it's going to use whatever graphics your inventory button use, but you can change it and see what happens; how to skin it is beyond the scope of this tutorial. I have no idea what the id attribute does since it seems to do absolutely nothing. The placement of this button doesn't matter since we're changing it in control_styles.xml anyways. Also, you can resize the toolbar here by changing the following line, but it's not going to matter since this part is ignored anyways:

<frame x="10" y="10" width="497" height="36" border="no" />

We resize the toolbar itself in control_styles.xml.

control_styles.xml

Open up your control_styles.xml in the same directory. When I wrote this tutorial, this was not a well-formed XML document because it had three document-level nodes instead of one. Anyways, you'll notice that there are three toolbar styles defined in this document. What we are going to do is resize all three of these toolbar styles and place the "DollButton" widget in all three of them.

For the first style, change the following line:

<bar width="73" height="257" min_w="30" min_h="60" />

To the following:

<bar width="73" height="291" min_w="30" min_h="60" />

Also, add the following to the list of buttons:

<button name="DollButton"     y="257" x="35" />

Same with the second style. Replace the following line:

<bar width="278" height="244" min_w="210" min_h="185"  always_resize="no" />

With the following:

<bar width="278" height="278" min_w="210" min_h="185"  always_resize="no" />

And add your "DollButton" widget to the list of buttons:

<button name="DollButton"  x="5" y="243" />

Finally, your third style. Change the following:

<bar width="500" height="36" min_w="360" min_h="30" />

To this:

<bar width="534" height="36" min_w="360" min_h="30" />

And add this line:

<button name="DollButton"     x="495" y="1" />

Alas, we are almost done here. Now, save and recompile psclient, then launch it and connect to a server. You should see that your toolbar has a new button on it, and rumor has it that when you click on it the DollWindow will appear!