Zugg Software :: View topic - There's more than one way to skin an app...

Magician Joined: 09 Oct 2003 Posts: 459 Location: USA

Topic moved out of the Outlook thread to keep them seperated.

Posted: Tue Mar 16, 2004 2:48 am

I got thinking on this, and what if a theme/skin was made to be customized even within itself?

Example:

I have a skin I really like, but I hate the icons that come with it, so I can change the icon portion to a different set, while keeping the original skin look.

This would definately help make the client more personalized, and skin makers wouldn't have to make an entire set for everything. Sort of a "mix and match" type approach, but it'd definately give a level of customization that I havn't seen before in an email client.

Wizard Joined: 10 Oct 2000 Posts: 1551 Location: Australia

Further to that idea -- let's add a 'customize skin' page which lets skin developers populate a list of globals (eg background colour, foreground colour, icons, pictures/textures, etc).

The synax could follow similar to mxp style:

<!element clientbackground '<COLOR &userproperty_clientbackground;>'>

or maybe

<!property clientbackground type="color">

which in turn generates the appropriate <!element> statement when it's executed

... someone will probably come up with a better syntax but you get the idea

Posted: Tue Mar 16, 2004 3:06 am

That could work, though there would also need to be an internal file structure to handle those who wish to use graphical elements to skin (assuming this is supported). Many toolbars in Firefox & Thunderbird are skined in the background with png's, and it'd make good sense to allow for that same thing to happen in Zuggmail, as another level of customizeability. So you'd need to allow things like:

<!property clientbackground type="color" value="#008000">

and:

<!property clientbackground type="image" value="myTheme/Images/bkgd.png">

That way you can have not only a solid colour as a background, you could support a graphical image.

Posted: Tue Mar 16, 2004 4:56 am

There are a couple of ways "skinning" will be handled:

1) In the XML Layout file you can change any available property of each Interface Object. For example, one of the Interface Objects is the toolbar itself. And the toolbar has a "color" property, and also a "background-bitmap" property. In fact, most every Interface Object will have a "color", "font", etc property. So, you can already do a lot of "skinning" just by editing the XML layout file.

2) The second part of skinning involves replacing the stuff like scrollbars, buttons, edit boxes, window captions, etc. This involves replacing various bitmaps used in the program. This is the part of skinning that will depend upon a 3rd party component set. I haven't decided which way to go yet...either a) I'll use normal Delphi components and then use a "skin" component that lets you customize how standard Delphi components look, or b) I'll have a 3rd party component library that completely replaces the normal Delphi components with it's own skinnable components. I'm leaning towards method (a) but still have to evaluate some 3rd party components.

For those of you that have programmed in Delphi or C++ Builder (or even Visual Basic and Visual Studio), imagine the normal set of properties that you can edit for forms, buttons, toolbars, etc. Those are the kind of properties that you will be able to dynamically change using the layout file. So, they are *not* "complex" properties like IceChild mentioned. They are simpler properties where instead of having "clientbackground" with the "type" subfield, you'd just have the "background-color" and "background-bitmap" properties themselves.

This is probably one of the first demo applications I'll be releasing, hopefully sometime in April. I'm really interested in seeing what the possibilities are with dynamic layout files.

Posted: Tue Mar 16, 2004 5:06 am

Sounds good, and I definately can't wait to check this out. I'm sure once I see it in action, I'll be able ot better understand it (and the developer analogy helped a bunch, thank you), so I've got no worries on this one.

Question though, as I mentioned, PNG support is something I'm very familiar with using, is there a chance of having a loading function for using that graphics format? Or will we be stuck with JPEG, GIF, and BMP? My main reason for asking for PNG support is that it's a lossless compressed format, so images stay nice and crisp, while allowing for smaller file sizes as compared to bitmaps, and transparency (including alpha-blended transparency).

Posted: Tue Mar 16, 2004 5:20 am

Here is the Demo application that comes with the 3rd party component (VCLSkin) that allows you to skin any normal Delphi component. Feel free to download it and see if it has any problem on your particular system. Remember, I didn't write this...it's the demo app that comes with VCLSkin:

VCLSkin Demo application (SkinDemo.exe)

Regarding graphics format, I can't promise anything. Most of Windows is stuck with BMP format because that's what's used in the actual Windows API. Delphi supports JPEG, and I've got a GIF component for it also, which is why you see GIF and JPEG support in zMUD. If I can find a good Delphi component for PNG, then I might be able to use it.

However, even if I can use it in my own components, doing stuff like setting the background-image of a toolbar depends entirely on the support for that specific component. If it's just a wrapper around the Microsoft CoolBar component, for example, then it's only going to support BMP and there won't be much I can do about it.

Posted: Tue Mar 16, 2004 5:29 am

Not to shabby, and the only thing I noticed was a flicker on the scrollbar in the text boxes, but I'm sure that's just an optimization issue (demos rarely have much optimization from what i've noticed)

That'd definately be interesting to play with in a full-blow application, and it looks suitably powerful, very nice.

As for the BMP thing, yeah, that's a major suck, but I figured askin for it would atleast get the idea out there, PNG's are beautiful if handled properly. Problem being, most applications don't ;)

Posted: Tue Mar 16, 2004 7:55 am

I don't want to take this thread off topic, but I should mention that yes, I to *love* PNG files. In fact, all of the new 256 color icons started life as PNG files created using Macromedia Fireworks. Then they were converted to the needed size and color depth BMP files.

I *did* find a open source PNG component for Delphi called TPngImage out at SourceForge. So, some kind of PNG support is possible in the future.

Back to the topic. The only thing bad about VCLSkin is that it uses Windows Hooks to intercept the drawing of components. This probably explains the flicker. I tend to worry about using Windows Hooks...they are notoriously buggy.

I found a product called ThemeEngine that brings full Windows XP Theme Engine support into an application, allowing you to load ANY Windows XP theme for your specific application (different from the theme used on your overall system), and also works on ALL versions of Windows. It's one of the kinds that includes it's own components, and as I said, I'm nervous about replacing all of the standard Delphi components with components from a 3rd party. It's asking for trouble with support, upgrades to new compilers, bugs in components, etc. It *does* come with source code, so I could fix any bugs myself if I found them. It's also a Russian development which also makes me a bit nervous.

Still looking for the ideal package. If the Windows Hook used in VCLSkin doesn't cause any problems, I'll probably go with that to start with.

Wizard Joined: 10 Oct 2000 Posts: 1551 Location: Australia

Just back to my original post about properties... I was trying to suggest that the properties (eg 'background-color') should be configurable by the user as well as the skin writer.

For example, say I write a skin which defines a cool new layout that IceChild likes, but he doesn't like my colour scheme or my send-recieve icon. He should be able to open the 'customize skin properties' window and using a colour picker, choose new colours/fonts/icons/pictures/textures for every property my skin uses. So he keeps my funky-scrollbar texture but changes my blue background into a black background, and my yellow text into white text.

He then clicks 'apply' (or preview, or revert to skin defaults) and it changes the appearance of the skin, essentially customizing it a bit.

That kinda stuff. Maybe it's too complex, but that's one thing which cheeses me about most skins... you download a skin and it's almost perfect except for one or two things, so you have to copy/paste/edit/fiddle with all the unfriendly files in the skin in order to make it right.

Without providing an easy way to tweak a skin from within the user interface, skinning is almost a worthless feature for me.

Posted: Wed Mar 17, 2004 12:22 am

There is a Skin Builder for the VCLSkin product that I uploaded the Demo for. It seems very nice and easy to use. It's trivial to take an existing skin, load it into the Builder and change a color. I have no plans to build this into ZuggMail itself...you'll have to run the Skin Builder that is provided.

The hard part of all of this is that in ZuggMail, various customizations live in different places. With the VCLSkin Demo you can see the kinds of stuff that are changed by the Skin Engine. Then, in addition to that you'll have the XML Layout file for each screen in ZuggMail. I will probably eventually have an editor application that edits these XML files to make it easier to use, but in the beginning you'll need to edit the XML Layout files by hand to change the properties of various objects on the screen.

Then, the 3rd thing that you'll be able to change is the icon resource file. This will change the icons assigned to various buttons. I haven't decided upon a format for this file yet, but I'm considering making it the same format as the zMapper Library files and then providing a simple free application that lets you load the library file and edit an icon, import/replace icons, etc.

As a specific example, let's consider a toolbar with some buttons on it. The XML Layout might look something like this:

Posted: Wed Mar 17, 2004 12:24 am

It looks like the VCLSkin Builder application can be freely distributed, so here is a link to it for people who want to play with it and see how easy/hard it is to create/modify a skin.

VCL Skin Builder application

Posted: Thu Apr 22, 2004 2:39 am

Well, I've done more research on this and have made some decisions.

I have decided *NOT* to use the VCLSkin component that has been mentioned already in this forum. I decided that it was not powerful enough nor easy to use for what I wanted.

Instead, I have gone with something called "ThemeManager" for Delphi. This is a set of custom components with Theme/Skin support. They have lots of hooks for adding support to other 3rd party components, and it comes with support already for the Toolbar2000 components that I use for the menu and toolbar system (used in zMapper/zExplorer, not in zMUD).

What I *really* like about this set of components is that it implements the WindowsXP Theme API on ALL versions of Windows. In other words, you point it to a WindowsXP theme file and the application then uses that theme file for itself.

So, instead of changing the theme of *all* windows and applications, you are just changing the theme of a single application, but using the same standard theme API and formats as WindowsXP. There are thousands of Windows XP themes already built that will instantly work with ZuggMail. You can *totally* change the look/feel of the application with this system, including the Window caption and buttons, and all of the components used by the application.

This component set also lets you change the "Hue" and "Brightness" of a given theme interactively. So, you don't have to create the "Blue theme" and the "Red theme" and the "Green theme". You just create a single theme and then use the Hue control to change the overall color.

In addition to the existing theme builder tools, they also provide their own Theme builder that looks pretty good. It lets you change the colors and bitmaps of every little detail in the components and window. It's a bit hard to use though, so hopefully there are better and more intuitive theme builder kits out there.

It also allows you to change various colors used in the theme, so I might be able to have a quick/easy way to change colors without changing the bitmaps being used for various shapes without having to use the theme builders.

My demo Layout Editor will use these components, so that will be the best demo for it. But I'm really excited about the capabilities that this component set provides.

In addition to working on all versions of Windows, it also does not depend upon any Microsoft DLL libraries, such as the COMCTRL32 library that we've all had trouble with in the past. It comes with source code so if there are any problems, I should be able to fix them. Also, the author (who is in Russia it looks like) is very active in producing new versions and fixing bugs. The latest version is April 2004 with about one release per month. But it's already very stable. I've found a couple of minor bugs already, but by the time ZuggMail is released to the public there should be plenty of time to clean up the rough edges.

Keep in mind that this ONLY applies to the skinning/theme part of ZuggMail. You'll still be able to customize the user interface layout, customize the menu and toolbar, and customize the icon set as described before.

Newbie Joined: 11 May 2004 Posts: 1 Location: Belgium

Could you give me some informations about the "ThemeManager" you decide to use ?
Thanks.

quote:
Originally posted by Zugg

Well, I've done more research on this and have made some decisions.

I have decided *NOT* to use the VCLSkin component that has been mentioned already in this forum. I decided that it was not powerful enough nor easy to use for what I wanted.

Instead, I have gone with something called "ThemeManager" for Delphi. This is a set of custom components with Theme/Skin support. They have lots of hooks for adding support to other 3rd party components, and it comes with support already for the Toolbar2000 components that I use for the menu and toolbar system (used in zMapper/zExplorer, not in zMUD).

What I *really* like about this set of components is that it implements the WindowsXP Theme API on ALL versions of Windows. In other words, you point it to a WindowsXP theme file and the application then uses that theme file for itself.

So, instead of changing the theme of *all* windows and applications, you are just changing the theme of a single application, but using the same standard theme API and formats as WindowsXP. There are thousands of Windows XP themes already built that will instantly work with ZuggMail. You can *totally* change the look/feel of the application with this system, including the Window caption and buttons, and all of the components used by the application.

This component set also lets you change the "Hue" and "Brightness" of a given theme interactively. So, you don't have to create the "Blue theme" and the "Red theme" and the "Green theme". You just create a single theme and then use the Hue control to change the overall color.

In addition to the existing theme builder tools, they also provide their own Theme builder that looks pretty good. It lets you change the colors and bitmaps of every little detail in the components and window. It's a bit hard to use though, so hopefully there are better and more intuitive theme builder kits out there.

It also allows you to change various colors used in the theme, so I might be able to have a quick/easy way to change colors without changing the bitmaps being used for various shapes without having to use the theme builders.

My demo Layout Editor will use these components, so that will be the best demo for it. But I'm really excited about the capabilities that this component set provides.

In addition to working on all versions of Windows, it also does not depend upon any Microsoft DLL libraries, such as the COMCTRL32 library that we've all had trouble with in the past. It comes with source code so if there are any problems, I should be able to fix them. Also, the author (who is in Russia it looks like) is very active in producing new versions and fixing bugs. The latest version is April 2004 with about one release per month. But it's already very stable. I've found a couple of minor bugs already, but by the time ZuggMail is released to the public there should be plenty of time to clean up the rough edges.

Keep in mind that this ONLY applies to the skinning/theme part of ZuggMail. You'll still be able to customize the user interface layout, customize the menu and toolbar, and customize the icon set as described before.

Posted: Wed May 12, 2004 7:54 am

What other information do you want? The URL for ThemeManager is: http://www.ksdev.com/themeengine/

Also, no need to quote the entire post. The forums display the original post so quoting the entire thing again just wastes more space.