Printable Version of Topic

Posted by: bfarber Nov 29 2004, 05:12 PM

Good. You've made it this far so that means you probably have a near-completed login. The only section we haven't touched yet is the UIFILE and you know what? Most of the logins I create I do not even have to edit anything in the UIFILE. However, if you want a totally unique login unlike anyone else's, there is a lot you can do to customize your work. I am going to try to explain as much as I can about the UIFILE on this page, but keep in mind many of the functions I have not been able to track down a meaning for. Let's look at what we do know though. And just for your information, all of this information was obtained from this site. A guy by the name of Paul Andrews did an outstanding job of putting together this resource but I figured I would go ahead and include this information on my page and then link to his so that way you wouldn't have to leave my site if you didn't want to. I'll warn you in advance, you may find his page a little easier to follow (but then again, you may find this page easier to understand). It's up to you which you want to use as a reference. The only advantage I would say this page has over Mr. Andrews is that I have included a UIFILE you can look at to follow along. The link to it is in the next paragraph.

First off, check out this sample UIFILE (the one from Talisman/Dream-Catcher):  uifile.txt ( 13.24k ) : 1274


Look at everything in it. If you study it a lot, and learn the things on this page, you will be able to do anything you want to your login.

The top 4/5 of the UIFILE is dedicated to declaring the styles (called the style section) and the bottom 1/5 is the xml coding (called the element section) that controls the login file. I warn you, be very careful editing the UIFILE and make sure you are backed up before you do edit it. That way if something goes wrong you can use your backup to pick up where you left off rather than start over.

Styles

You will see in the styles section that Frames is usually the first style declared. In it you will see a reference to rcbmp (100.....). Remember that rcbmp 100 was our main bitmap file. This means that bitmap 100 is in the main frame (which makes sense right?).

There are also top and bottom frames declared, even if you don't see them in the final login. They must be declared (I believe) but are usually just deleted from the element section of the file so they don't appear on your screen.

All in all, the main styles declared are as follows (and this may be different depending upon the login):

Framess (the main content area)
Toppanels (the top frame)
Bottompanels (the bottom frame)
Leftpanels (the left panel)
Rightpanels (the right panel)
Hotaccountlists (account list when it is active {i.e. the mouse pointer is over it})
Accoutnlists (account list when it is not active)
Passwordpaness (password panels and bitmaps)
Scroller (scrollbar-although the default logonui.exe does not utilize this and it is inactive)


--Just a quick note: You may see different styles declared as well, or these may not be used, but in the original logonui.exe all of these separate frames are utilized so they still appear in the file

Within each style you can define several elements using the id attribute. You can also define several characteristics of each element. Using styles in this manner allows you to define several characteristics about a graphic (such as animation and alpha blending) that you cannot define using element attributes.

You can define any number of style sections you wish, but some of the existing ones must be kept as they are. In other words, if it's there and it's not hurting your login, leave it there. There is almost no advantage to removing a style section if you do not have to (i.e. it does not seem to affect the speed of the login, etc.).

Resources

Bitmaps, integers and the strings in the string tables make up the resources referenced to in the UIFILE. A reference to a resource will always begin with "rc" so:

rcbmp==resource bitmap
rcint==integer used as a resource
rcstr==resource string


These are really the only external references in the UIFILE, meaning that these are the only things you will have to find outside of the UIFILE. Everything else you look at will be within the UIFILE and you will not have to go look for anything.

RCINT's

RCINT merely references a number and is usually used in defining a font. It looks like this:

fontsize: rcint(46) pt;

Obviously the 46 is the integer and pt stands for points (a size indicator). Just so you know, this was retrieved from a line defining fontsize.

RCSTR's

RCSTR's call those strings we defined in the string table. They look like:

fontface: rcstr(3);

This is the fontface in the accountlists being defined by referencing to a string. If you look at this screenshot you will see that string 3 is defined as Tahoma.

That means that the Tahoma font will be used for the fontface in the accountlists. Obviously armed with this knowledge, you can change it to whatever you want (but be careful about using non-standard fonts if you plan on sharing your login because if someone who uses your login doesn't have that font installed, their text may appear really weird.)

RCBMP's

The general layout goes like this:
rcbmp (a, b, c, d, e, f, g)
----where:


a==bitmap # (i.e. bitmap 100)
b==stretching indicator (1=normal, 3=tile, 6=stretch, 7=32 bit bitmap)
c==transparent color (#RRGGBB-defines color for transparency)
d==Width (you can define the width explicitely here)
e==Height (you can define exact height here)
f==Size flag (1=use bitmap dimensions, 0=use explicit dimensions you just defined)
g==Mirror (0=normal, 1=mirror)


Here is an example defining the userpane background:


rcbmp(112,6,#FF00FF,0,0,1,0);

All of the bitmaps you see referenced in the UIFILE will look like this, with the exception of the width and height properties. Some bitmaps will use sysmetrics rather than specifying width and height.

Sysmetrics

Sysmetrics are used to return information about the GUI to the program. The two most commonly used are:


0==screen width
1==screen height


All available information suggests that the following list is accurate. This is a list of the sysmetric function used in FoxPro, but with 1 subtracted from each entry. You may try them at your own risk and you can see this list by clicking here.


0==screen width
1==screen height
2==Width of sizable window frame
3==Height of sizable window frame
4==Width of scroll arrows on vertical scroll bar
5==Height of scroll arrows on vertical scroll bar
6==Width of scroll arrows on horizontal scroll bar
7==Height of scroll arrows on horizontal scroll bar
8==Height of window title
9==Width of non-sizable window frame
10==Height of non-sizable window frame
11==Width of DOUBLE or PANEL window frame
12==Height of DOUBLE or PANEL window frame
13==Scroll box width on horizontal scroll bar in text editing windows
14==Scroll box height on vertical scroll bar in text editing windows
15==Minimized window icon width
16==Minimized window icon height
17==Maximum insertion point width
18==Maximum insertion point height
19==Single-line menu bar height
20==Maximized window width
21==Maximized window height
22==Kanji window height
23==Minimum sizable window width
24==Minimum sizable window height
25==Minimum window width
26==Minimum window height
27==Window controls width
28==Window controls height
29==1 if mouse hardware present; otherwise 0
30==1 for Microsoft Windows debugging version; otherwise 0
31==1 if mouse buttons swapped; otherwise 0
32==Width of a button in a half-caption window's caption or title bar
33==Height of half-caption window caption area


On the page I retrieved these values from, Microsoft says this about sysmetrics:

Colors

rgb (red, green, blue)--(0-255, 0-255, 0-255)
argb (alpha, red, green, blue)--(0-255, 0-255, 0-255, 0-255)


Alpha stands for transparency. The alpha channel in an argb entry will define what color the transparency appears to be.

Alpha Color and Animation
The following portion of a UIFILE and explanation was taken directly from Paul Andrew's reference on Logon Secrets. You can find the link in the first paragraph on this page.

The following snippet controls the appearance of the account list whilst the mouse pointer is inside it. The settings will cause the account with the cursor over it to be displayed in maximum intensity and with a solid background. The others will be alpha-blended down to an intensity of 96, i.e. they will be both dimmer and transparent.





The following controls the appearance of the account list when the mouse pointer is outside it. This will set the background to transparent and the list to full intensity. The transparent background is achieved by using argb as opposed to rgb. Argb means Alpha, Red, Green, Blue, so the first number is the alpha blending used for that color. In this case an alpha of 0 means we will have a transparent background.

Note there is no animation specified for this. For some reason that seems to mess up the drawing of the account list for the duration of the transition.






Gradients

A gradient is the shading of one color to another.
The general outline for a gradient looks like this:

background: gradient(argb(0,100,150,200), argb(0,100,150,200), 0)

------where:


argb(#,#,#,#) specifies the first number and
argb(#,#,#,#) specifies the second number and
0==vertical gradient or
1==horizontal gradient


Basically you have first color-->fades to-->second color-->horizontally or vertically?

32 Bit Bitmaps

The information available suggests that you need to have ResBuilder to edit 32 bit bitmaps. I do not do this so all I can tell you about doing this is what I have read or heard. This was taken from Paul Andrew site almost directly:

AFAIK, ResEdit from TGTSoft is the only way of creating 32 bit bitmaps, which it does from 32 bit PNGs. You can only use it to edit existing 32 bit bitmaps in a logonui, so to change a 24 bit bitmap to 32 bits you have to first find a 32 bit bitmap with ResHack. Export it. Replace the bitmap you want to edit with the one you just exported, then edit it with ResBuilder.

So. Lets say you want to create a 32 bit bitmap for bitmap 107 (power off):

1) Open it with ResHacker and find an existing 32 bit bitmap (113, the picture frame is 32 bits in the original)
2) Export it.
3) Replace 107 with the image you just exported.
4) Save the UI.
5) Open it with ResBuilder and edit 113. It will open it as a 32 bit PNG in the editor you specified (e.g. PS or FireWorks).
6) Edit it and save it
7) Save the UI.

Scrollbars

Please see this tutorial by dmmason for complete information on how to get the scrollbars to display correctly and how to alter/edit your scrollbar appearance. He's even got information on how to force horizontal scrollbars to appear!

Logon Box Borders

If you've messed with the animation in the UIFILE and end up seeing an ugly black border around your login box, there is a way to get rid of this.

There will be two sections you will need to edit. What you must do is set the borderthickness to 0 and add the difference (what you deleted) to it's associated padding. Here is an example:





Now change it to this:





Now on to the second part. Find the accountlistss style and remove the argb value so that this:




Becomes this:




This should get rid of that ugly black border resulting from the alpha animation.

Elements

The element section is the information all the way at the bottom of the UIFILE. Basically, this is the section that puts all of the styles together by defining which frame we are working in, and then calling the style underneath that portion of the screen.

These are the general attributes of elements in a login file:


layout==type of layout used to arrange the child elements layoutpos==for border layouts, the location in the parent layout the child should occupy
width==desired width of element (not always accurate)
height==desired height of element (not always accurate)
content==graphic used to fill background of an element if id is not defined
id==name of an atom defined in a previous style section; used to fill the background
sheet==calls a style sheet previously declared


Let's look at the layout and layoutpos to see how we control them.

Layout

There are three main layout types and they are:


flowlayout
verticalflowlayout and
borderlayout


For flowlayout and verticalflowlayout, the numbers following the declaration in parenthesis indicate the following:


verticalflowlayout (a,b,c,d)

---------where:

• a==seems to make no difference
• b==(0=column, 1=fit, 2=fit?)
• c==(0=left, 1=right, 2=center)
• d==(0=top, 1=bottom, 2=middle)

Layoutpos

If borderlayout is declared as the layout, then layoutpos will be declared too. Layoutpos can be one of:


left
right
top
bottom
client (main area)


Moving the account list

This seems to be what everyone wants to know how to do. For an in-depth look at moving account lists around, please see this tutorial.


And that is the UIFILE in a nut shell. Much of it remains cryptic and Microsoft doesn't seem to have documented what most of the things are for, so this is what we have. Play around with the different attributes (remembering to backup your login before you do!), and when your login is finished and looks the way you want it to look, go ahead and move on to the next (and final) page.


NEXT PAGE >>