Skinning tutorial part 1
From TrillWiki
[edit] Part 1 - Introduction
by DREADNOUGHT
This is not the first tutorial on Trillian's XML skinning system. The first was written a long time ago on a site far, far away. By Lukedaniel, his evil father Darth Geek and the equally evil Emperor Sim.
Ok please excuse my all-too-frequent moments of insanity. However, Marcdaniel, JavaGeek and SimMaster were responsible for the original tutorial for 0.63. And it was great - a step-by-step guide to making your very own Trillian skin. When 0.70 hit the streets - who helped people get up-to-date on the vast numbers of differences? It was Md of course with his second tutorial. These two tutorials were written without payment. They were done in spare time, and for nothing more than a sense of satisfaction. Which is why it was very upsetting to hear of the levels of criticism, and downright abuse that was received for writing them. Yet still they persevered Md teaming up with Juz to start the 3rd incarnation of the tutorial (well, actually the fourth, but not many people saw the second ;)). Unfortunately, with Md moving away to greater things, this never got very far :(.
With the advent of Pro, we have STIXE for those who don't like code or just want to create a basic skin. But what of those who don't have pro? Or those who wish to create a skin that is a 'bit different'? Or those who just like to be in control of what their skin is doing? For people who fall into these categories (myself included), another tutorial is required IMO. If it isn't, please tell me now, and I'll not waste my time/effort.
This tutorial will be written in conjunction with the Skinning Reference. The reference was started by me a good while back, and has outgrown my original idea by a mile. As with so many things (Civillians included) it was created one day when I was bored. Originally, I was just going to list all the IControls available to each window, but once I did that, I figured I may as well add more to it - how to code the Controls, Code snippets, etc. Of course, this was far too much work for me myself, and subsequently I have enlisted the help of both Tometheus and Risen, who have added a lot of stuff to the reference. It is still patchy at best, but I hope of some use. I will be linking to it in many places throughout the tutorial, as it will help re-iterate some things, and also once you get to grips with the language, you will find yourself using it more and more (I know a good few skinners who do), and it helps to get to know your way around it at an early stage. If anyone feels they can add/correct anything to/in the reference, feel free to edit it yourself or leave comments on the discussion pages.
Lastly, before I get down to the tutorial itself, I would like to mention that all pages on a wiki are commentable. Please leave comments/suggestions/corrections on the Discussion pages, as it helps me maintain the tutorial, and will help other people reading it for the first time, to have as many mistakes removed, and points clarified. Secondly, if you have a problem with a particular chunk of code, please feel free to use the skinning forum, as I read it, as do other skinners who will be able to help.
And now, the moment you've all been waiting for...
[edit] What A Trillian Skin Consists Of
Yup, that's right. To start off with, I'm not going to go too heavily into the code itself, I'm going to try and give a rough outline of what a Trillian skin is, as it's an integral part of understanding the language as a whole. Part 1 of this tutorial will just be a basic overview.
A Trillian skin consists of 7 main types of windows. These are; transfers, the contact list, messages, containers, templates, channels, and consoles (status windows / connection windows).
Each of these windows is built from three main things: Components, IControls and Controls.
Components define how the window is created, what it looks like, how it moves etc. A window can be comprised of just 1 component, or lots of them, depending on how complex the window is. The components are linked together by anchors and frames, but more on those later. For now, you just need to understand that a window is made from components, not what a component actually is.
IControls tell Trillian where to place all of your buttons etc. IControls have 2 main properties, "source" and "name". The name tells Trillian what it is that the button actually does, and the source tells it which control to use. In this way, if you have 3 buttons which look the same, but perform different functions (eg, your Minimize, Maximize and Close buttons are all the same), you can just create one control, and then have 3 IControls with a source of that control. This will make more sense later on, but in short, an IControl is a space marked out for a control.
Controls are the place where you define all of your buttons/labels/text input boxes/displays/scrollbars etc etc. The control contains all of them code on what a button looks like when the mouse is over it, when it is pressed etc. It tells an edit box which colour it should be. It does not place it inside a window - that is what IControls are for.
These 3 things make up the Trillian skin. To illustrate, take this image
The blue box is your component. Off in the component somewhere are details of how the window moves, what the background looks like etc.
The white areas are your IControls. By themselves, they are just spaces, it is the controls that contain their appearance.
That concludes Part 1
Of course, this has only been a very basic intro, and Part 2 will follow very shortly, but I feel I have covered the basics of what comprises a Trillian skin.
Next Step: Part 2 - The File Structure
