Quantcast Is there a way for me to add to the toolbox? - WoWInterface
Thread Tools Display Modes
10-13-05, 03:32 PM   #1
noraj
A Flamescale Wyrmkin
AddOn Author - Click to view addons
Join Date: Jul 2005
Posts: 102
Is there a way for me to add to the toolbox?

like closebuttons (template is from standard bliz XML's)
or other virtual templates(is that the right word even?)

It seems like i should be able to....but i cant figure out how

if possible can someone tell meh how?
  Reply With Quote
10-13-05, 06:12 PM   #2
Nulkris
A Cobalt Mageweaver
 
Nulkris's Avatar
AddOn Author - Click to view addons
Join Date: Sep 2005
Posts: 214
Post Creating a Skin

OK, I will try to write a tutorial on creating skins here using your simple Close Button example.

1. Create a new XML file somewhere, start it off with the usual xml header:

Code:
<?xml version="1.0" encoding="utf-8" ?>
2. Now start off the root element

Code:
<Skin name="Noraj's Skin" skinid="{5dc5ab78-d504-41b0-a23d-f0d823f697cb}">
Here we have the root element name "Skin", the attribute name, which is what is displayed as the root node in the toolbox tree, and a GUID skinid which allows you to uniquely identify this skin, do not reuse this value ever. You will notice that there are commented lines in the generated XML that contain this ID, it is what allows the designer to match up a component in the XML, to a designable component in the toolbox.

3. Now start defining components

Code:
<Button name="CloseButton" displayName="Close Button" inherits="UIPanelCloseButton" render="ComponentRender" frameid="{5dc5ab79-d504-41b0-a23d-f0d823f697cb}">
Element name Button matches up to any Frame or element derived from it (can't be Texture or FontString). Attribute name is the unique name of the component, is used in the toolbox if the attribute displayName is not present. Notice that name can't have spaces, while displayName can (and could be localised). You can set any frame properties you want from the XML definition, we set inherits here, which brings in the definition of UIPanelCloseButton.

Next is the render attribute, this controls how the component is edited, it can be either FrameRender (for a base form), ContainerRender (for any control that can contain other controls, like the Panel), and ComponentRender for the rest. For each skin there can be only 1 FrameRender component, and it must have the name "form".

The frameid is another GUID that uniquely identifies the frame within or without the skin, make sure this is unique for all components you create.

4. Now define the editing interface to your component:

Code:
<!--
<FrameSkin>
<Setup>
	<Property name="Location" visible="true" />
	<Property name="Size" value="new System.Drawing.Size(32,32)" />
</Setup>
<Script>
	<OnSetupFrame>
	 frame.Anchors.Clear();
	 frame.Anchors.Add(new LayoutFrame.Anchor());
	 frame.Anchors[0].point = FRAMEPOINT.TOPLEFT;
	 frame.Anchors[0].Offset = Dimension.FromPoint(control.Location);
	</OnSetupFrame>
	<OnSetupForm>
	 control.Location = frame.Anchors[0].Offset.ToPoint();
	</OnSetupForm>
</Script>
</FrameSkin>
-->
All this is in comments so it can pass through the same loading code as the normal XML files, it is parsed later. Here you need some knowledge on the .NET framework and C# so may not be for everyone, I am investigating ways to make it lua scriptable but its not too high a priority right now.

The way that the editor works is that you design the form in a Windows Forms world, this allows me to use the DesignSurface already available in .NET. What this section of the skin does is convert between the Windows Forms world and the XML Frame world.

In the setup section you define a list of properties you want to edit in the property viewer, or what you need setup before the component can be edited. Because this control is so simple only really the location is needed, so it is exposed by putting in the visible attribute and setting it to true. All properties except the name and scripts are set to invisible by default, so you have to explicitly display them.

You will notice with Size, that we didn't set visible to true, that is because the component is a fixed size so we don't want to change it, all we did was setup the edit component to match the size of the close button texture (32x32). Look in the default skin (_defaultskin.xml in the install zip) for more examples of properties, the other usable attributes are:

type : sets the type of any new properties you create
category : sets the category within the property list
description: allows you to set a description that is displayed in the property form at the bottom
persist: allows you to save properties whose values you cannot put within the XML
defaultCopy: uses the default copy mechanism to copy properties, i.e. frame.hidden = (bool)control.Properties["hidden"] and control.Properties['hidden"] = frame.hidden equivalent.

Next, there are 2 scripts, OnSetupFrame basically copies the properties used in the base edit control to the XML frame, and OnSetupForm does the reverse. This is coded only in C# at the moment, but I can allow VBScript if someone needs it.

If you create properties in the Setup section, then these are gettable/settable through the Properties property, (ie. control.Properties["NewProperty"]), this works with objects so casting is required when getting, see the default skin for examples.

In the Windows Forms world, components with a FrameRender have System.Windows.Forms.Form properties by default, ContainerRender has System.Windows.Forms.Panel properties and ComponentRender have System.Windows.Forms.Control's properties.

5. Close up the XML file and save

Code:
</Button>
</Skin>
For this example that is all, but you could add more components or whatever, the default skin is the best place to look for more examples.

6. Install the skin

Copy the file into the [InstallDir]\Skins directory and restart the application.

I have attached the full example skin to this message so you can use it now.

Good luck
Attached Files
File Type: zip NorajSkin.zip (579 Bytes, 1683 views)
__________________
Nulkris - A80 Rogue - Proudmoore
(Also Drukris, Hamkris on Proudmoore; Hulkris on Jubei'Thos & Khaz Modan)

Last edited by Nulkris : 11-13-05 at 09:02 PM. Reason: Updated Info
  Reply With Quote
10-13-05, 08:57 PM   #3
noraj
A Flamescale Wyrmkin
AddOn Author - Click to view addons
Join Date: Jul 2005
Posts: 102
lol ok cool I think i got it now :P

I saw the thread on skins and knew you could make them :P I just didnt know how. thanks
  Reply With Quote
10-27-05, 07:01 PM   #4
Flolaen
A Murloc Raider
Join Date: Mar 2005
Posts: 5
Can you inherit any component? I have tried to inherit "SpellBookNextPageButton" from the file list shown below and I got an error stating that it could not be found.

Code:
-SpellBookFrame.xml
  ...
  +SpellBookFrame [Frame]
    ...
    +SpellBookNextPageButton [Button]
Is there a way to inherit it?
  Reply With Quote
10-27-05, 07:55 PM   #5
Nulkris
A Cobalt Mageweaver
 
Nulkris's Avatar
AddOn Author - Click to view addons
Join Date: Sep 2005
Posts: 214
To speed up searching, I only search for named frames at the first level when looking for inherited frames. This works well as virtual templates are only really valid when defined as such. Unfortunately that means that your button will not be found as it is a few levels in.
__________________
Nulkris - A80 Rogue - Proudmoore
(Also Drukris, Hamkris on Proudmoore; Hulkris on Jubei'Thos & Khaz Modan)
  Reply With Quote
11-14-05, 02:12 PM   #6
lfreak
A Fallenroot Satyr
 
lfreak's Avatar
Join Date: Oct 2005
Posts: 24
how do I add a button with a personal (blizzard-own) texture? I mean not a normal texture with an onclick function, but a real button. that is shown as this in the designer too
  Reply With Quote

WoWInterface » Developer Discussions » General Authoring Discussion » Is there a way for me to add to the toolbox?

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off