Skinning tutorial part 4

From TrillWiki

Jump to: navigation, search

[edit] Skinning Tutorial v1.0 (Part 4 - Resizing)

Reference Files:

SampleStructure.zip

xfer-gfx.zip

Ok, so we now have our background for our transfer window fully coded and looking as below:

Transfer window background

Ain't it pretty?

However, when we created the component (cast your mind back), we added some properties to it, to tell it how big/small it could get when resized. The properties in question were as follows:

maxy="174" minx="216" miny="174" defaultx="216" defaulty="174"

As you can see, we set the minimum and default values for both width and height. We also set the maximum for the height to the same value as the minimum - we didn't want it getting taller. What we left off was a max value for the width - we want to let it grow as wide as the user desires. To do this, we have to define where the "grab handles" (the bits the user clicks on to resize it) will appear.

Open up your xml/windows/xfer.ext once again.

Now, resize code is very similar to background, in the way that the upperleft, upper, upperright, left, right, lowerleft, lower, and lowerright (herein referred to as the "8 background types") all function in the same way - left repeats vertically, upper horizontally etc etc.

What is specific to resize code about these background types, is that each one gives a different resize cursor when the mouse is placed over them. If you place the cursor over the upperleft resize region of a trillian window, you will get a diagonal cursor that allows you to drag the window wider and taller. If you hover over the lower section, you will get a vertical cursor, which allows you to resize the height. And so on. As our window resizes horizontally, we only need to include 2 resize regions - the left and the right.

To do this, I will add the following lines to my transfer <component>, just above the closing </component> tag:

<rect>

</rect>

</region>

</rtype>

<rect>

</rect>

</region>

</rtype>

</resize>

Ok, I realise that that looks like a whole bunch of new stuff to understand, but it really isn't. Trust me :). Break it down:

The first bit;

This tells trillian that we are defining the resize areas. Leave the 'type' to all - there are currently no other values that go here, but there might be in the future.

This bit may seem familiar to you. This is where we define which of the 8 background types we are defining, so you know what values it takes :).

This bit is possibly the hardest to explain, so I'm not going to. If you want irregular shaped resize regions, then this is how you would define them, using these lines, but you wouldn't normally use this, so don't worry about it. If you are interested, take a look at this page of the reference, but otherwise forget about it.

<rect>

</rect>

And finally, you recognise this, you used it for the background sections, so you know what it does. I want the grab handles to appear as below on my window:

Resizing handles

You may notice that my areas extend of into the transparent parts. Don't worry about this, as the transparent bits also remove any resize handles from that area, so it will still function as the user would expect.

Luckily for me, my left resize region extends from the top to the bottom, so I already know my left, top and bottom coordinates. (Remember: as resize areas don't include any graphics, all coords are in relation to the window, and not the background graphics files.). All three of these will be 0, with left coming from the left hand side ( width="0" ), upper from the top ( height="0" ), and lower from the bottom ( height="1" ).

The "right" tag in the left resize region will also be coming from the left hand side ( width="0" ). I want the width to be 58 pixels, so I will set the right "num" to 58.

For the right resize region, although I don't need the resize region to go all the way down from top to bottom of the window, as the bottom pixels are cut off (transparent) anyway, it's easier just to stretch it all the way down - making the "top" and "bottom" stuff the same as with the left resize region

Note: If all these "left"s and "right"s are comfusing you, I'm sorry, I have to tried to seperate the two different "right"s and "left"s, by including the words region or resize region in the appropriate places in an effort to make it clearer. I've also italicized the ones that are "types", and not tags.

Finally, I want my right resize region to extend in 22 pixels, so my "left" num will be 22, with the width as "1" (coming from the right).

Put all together it looks like this:

<rect>

</rect>

</region>

</rtype>

<rect>

</rect>

</region>

</rtype>

</resize>

We can (hopefully) now resize our window to our hearts content. Congratulations, you have learned another vital part of the basics of Trillian skinning. There are a few of them left to go, but soon it will just be a case of appyling these theories into creating your other windows. Remember to comment your code, so you know what each bit of this resize stuff actually does. And remember - if you forget what something does, you can always look it up in the reference.

Back: Part 3 - Building A Window
Next: Part 5 - Adding Control

Retrieved from "http://developer.ceruleanstudios.com/index.php/Skinning_tutorial_part_4"

Category: DREADNOUGHT's Skinning Tutorial

Skinning tutorial part 4

From TrillWiki

[edit] Skinning Tutorial v1.0 (Part 4 - Resizing)

Views

Personal tools

Navigation

Search

Toolbox