main page

Tutorial 3

[MainWindow]
Class=MainWindow
MinWidth=274
MinHeight=248
ResizeX=100
ResizeY=100
ColorGroup.BGColor=RGBA(-20,-20,100,0)

Window1.Name=SimpleTile
Window1.X=0
Window1.Y=0
Window1.Z=1
Window1.ResizeX=100
Window1.ResizeY=100

Window2.Name=ResizeBox
Window2.X=0
Window2.Y=0
Window2.Z=2
Window2.JustX=RIGHT
Window2.JustY=BOTTOM

Window3.Name=BuddyViewTile
Window3.X=0
Window3.Y=0
Window3.ResizeX=100
Window3.ResizeY=100
Window3.IndentLeft=20
Window3.IndentTop=20
Window3.IndentRight=20
Window3.IndentBottom=20

[SimpleTile]
Class=Menu
MinWidth=100
MinHeight=100
Graphics.ColorGroup=BGColor
Graphics.topleft=circle_ul.gif
Graphics.topright=circle_ur.gif
Graphics.bottomleft=circle_ll.gif
Graphics.bottomright=circle_lr.gif
Graphics.left=circle_middle.gif
Graphics.top=circle_middle.gif
Graphics.right=circle_middle.gif
Graphics.bottom=circle_middle.gif
Graphics.left=circle_middle.gif
Graphics.middle=circle_middle.gif
Action.lbtndown=AppDragWindow
Action.rbtndown=MenuTool

[ResizeBox]
Class=Tile
MinWidth=50
MinHeight=50
Cursor=ResizeNWSE
Action.lbtndown=ResizeBR

[BuddyViewTile]
Class=BuddyListView
WindowFocus=true

This example will make a purple rounded square with a friends list and a built in ad.

[MainWindow] Definition of the containing window. This does not have graphics of its own.
Class=MainWindow Each window must define its class. Its class defines its possible behaviors. There can only be one class of MainWindow.
MinWidth=100
MinHeight=100
This defines the starting size of the skinned window as well as the minimum size of any resizable windows.
Window1.Name=SimpleTile This is the start of a definition of a child window. The name binds the specific child definition to the template defined later in the .ini file
ResizeX=100
ResizeY=100
The main window is resizable. Anything besides 100% on the main window does'nt make sense
ColorGroup.BGColor=RGBA(-20,-20,100,0)
This defines a ColorGroup called "BGColor". This color group will be used to adjust the values of a .gif file so think of the values as relative.
Window1.Name=SimpleTile This is the start of a definition of a child window. The name binds the specific child definition to the template defined later in the .ini file
Window1.X=0
Window1.Y=0
This sets the child window's position relative to its owner. In this case the owner is the MainWindow.
Window1.ResizeX=100
Window1.ResizeY=100
This tells the "SimpleTile" that it will be assigned 100% of the width and height of its parent.
Window2.Name=ResizeBox This is the start of a definition of the second child window. The name binds the specific child definition to the template defined later in the .ini file
Window2.X=0
Window2.Y=0
This sets the child window's position relative to its owner. In this case the owner is the MainWindow.
Window2.JustX=RIGHT
Window2.JustY=BOTTOM
This sets the justification to orient the "ResizeBox" to the lower right corner of the parent.


Window3.Name=BuddyViewTile
The third child window is called "BuddyViewTile
Window3.X=0
Window3.Y=0
This sets the child window's position relative to its owner. In this case the owner is the MainWindow.
Window3.ResizeX=100
Window3.ResizeY=100
This tells the "SimpleTile" that it will be assigned 100% of the width and height of its parent.
Window3.IndentLeft=20
Window3.IndentTop=20
Window3.IndentRight=20
Window3.IndentBottom=20
Indentions take place after resizing. This allows the buddy view to be assigned 100% of its parents width and height and still indent itself to allow a border around it.


[SimpleTile] The start of the template definition for SimpleTile.
Class=Menu "Tile" is the most basic class. "Menu" is used when we want the tile to trigger a menu popup,
MinWidth=100
MinHeight=100
Set the minimum width and height to the size of the circle corners added together.
Graphics.ColorGroup=BGColor
Assign a color adjustment to the default Graphics group.
Graphics.topleft=circle_ul.gif
Graphics.topright=circle_ur.gif
Graphics.bottomleft=circle_ll.gif
Graphics.bottomright=circle_lr.gif
Graphics.left=circle_middle.gif
Graphics.top=circle_middle.gif
Graphics.right=circle_middle.gif
Graphics.bottom=circle_middle.gif
Graphics.left=circle_middle.gif
Graphics.middle=circle_middle.gif
This window is resizable in the vertical and horizontal directions. The corner graphics are drawn once in their respective locations. The top, left, right and bottom graphics are tiled to fill in the distance not covered by the corners. The middle graphic is tiled to fill in the middle of the window.
Action.rbtndown=MenuTool Actions will be listed later. "rbtndown" is the trigger for the invocation of the"MenuTool". That will send the message to open the Tools Menu.
Action.lbtndown=AppDragWindow "lbtndown" is the trigger for the invocation of "AppDragWindow". This allows click and dragging the window.


[ResizeBox] The start of the template definition for ResizeBox.
Class=Tile
"Tile" is the simplest of classes.
MinWidth=50
MinHeight=50
Set the minimum width and height to the size one corner of the circle. This is an arbitrary size and is used to exaggerate the resize box.
Cursor=ResizeNWSE When the mouse is over a tile it will set the cursor to the ResizeNWSE standard Windows(tm) icon.
Action.lbtndown=ResizeBR When the left mouse button is pressed it will trigger a resize of the window.


[BuddyViewTile]
This simple looking tile definition is actually the workhorse of the whole program. It displays all the important buddy information.
Class=BuddyListView
BuddyListView is a special class that will create an embedded window in the skin that contains a multicolumn listbox with your buddy information. (if no ad is specified then it also will contain an ad area automatically.)
WindowFocus=true This is a tricky line. This means when the window is focused this tile will attempt to grab the keyboard focus from the outer skin window. This only works for class types of (StatusEdit, BuddyListView, InfoView, ChatArea, ChatEdit)

This example is the first tutorial with a fully functioning (although very plain) implementation of Xfire through skinning.