Sophie

Sophie

distrib > Mageia > 7 > i586 > media > core-release > by-pkgid > a2116f36018873d572acbcadddb8e994 > files > 29

clanlib0.8-docs-0.8.1-22.mga7.i586.rpm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Creating a custom GUI style - ClanLib Game SDK</title>
<link rel="stylesheet" type="text/css" href="../../default.css">
</head>
<body style="background-color: #a4daea; color: black; margin: 1em 3em 1em 3em;">
<div style="border-style: solid; border-width:thin; border-color: black;">
<div style="background-color: white; color: black; padding: .3em 1em .3em 1em; border-bottom-style: dotted; border-bottom-width: 2px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center">
<h1>
<a href="http://www.clanlib.org"><img style="border-style: none; padding-right: 130px;" src="../../gfx/clanlib.png" alt="ClanLib"></a>
</h1>
</td>
</tr>
</table>
<!--<div class="menu">
  <a href="index.html">News</a>
  <a href="intro.html">About</a>
  <a href="download.html">Download</a>
  <a href="cvs.html">CVS</a>
  <a class="active" href="docs.html">Docs</a>
  <a href="games.html">Games</a>
  <a href="contact.html">Contact</a>
  <a href="links.html">Links</a>
</div>-->
</div>
<div style="background-color: white; padding: 1em 3em 1em 3em;">
<!-- clanlib header end -->

<div style="border-bottom-style: dotted;  border-bottom-width: 1px; margin-bottom: 1em;"><h2>Creating a custom GUI style</h2></div>



<p>ClanGUI contains a powerful mechanism to code custom themes, or styles as
we call them in ClanGUI. Styles are very flexible, yet very easy to implement.
This document will guide you through creation of a custom style.</p>

<div style="border-bottom-style: dotted;  border-bottom-width: 1px;"><h3>Styles overview</h3></div>

<p>Each component in ClanGUI is clearly separated into logic and presentation.
When creating a new style for a component (for example CL_Button), you create
a new class which does the drawing of a component - the logic is still the same
between different styles.</p>

<p>A CL_StyleManager is used to attach styles to each component available. So
in order to create a new style you need two parts - a stylemanager, and then
the style-classes for each component you want a new look for.</p>

<div style="border-bottom-style: dotted;  border-bottom-width: 1px;"><h3>When do I need to create my own GUI style?</h3></div>

<p>The standard GUI style in ClanGUI very much resembles any desktop-gui used
in applications. This doesn't always fit with games.</p>

<p>Some of the components in the default GUI style supports surfaces, like CL_Button.
So, if you only wants some nice-looking buttons in your game which use predrawed
pictures, you can still use the default style. But if you want a custom-looking
inputbox or scrollbar, you need to create a custom style.</p>

<div style="border-bottom-style: dotted;  border-bottom-width: 1px;"><h3>Creating a stylemanager</h3></div>

<p>Create a new file called <b>stylemanager_coolstyle.h</b>, and insert the following
code into it:</p>

<ul><pre><font face="Arial,Courier New,Courier">#ifndef header_stylemanager_coolstyle
#define header_stylemanager_coolstyle

#include &lt;ClanLib/gui.h&gt;
#include &lt;ClanLib/guistyleboring.h&gt;

class CL_StyleManager_CoolTheme : public CL_StyleManager_Boring
{
public:
	CL_StyleManager_CoolTheme(CL_ResourceManager *resources);

	// Connect component styles to component.
	// The 'type' parameter indicates what type the component is.
	virtual void connect_styles(const std::string &type, CL_Component *owner);
};

#endif
</font></pre></ul>

<p>The new stylemanager (CoolTheme) inherits the CL_StyleManager_Boring. This
means it will use the default style for any components you don't define a new style
for. Note that it is not neccessary to inherit from CL_StyleManager_Boring - you 
could also inherit from CL_StyleManager, but if you then try to use a component for
which you haven't created a style for, nothing will be drawn for the component.
You could also use the CL_StyleManager_Silver for a slightly fancier default style.</p>

<p>The connect_styles() is the function which attaches the styles to the various
components. Make sure you inherit this function.</p>

<p>Next, create a new file called <b>stylemanager_coolstyle.cpp</b>, and insert the
following code into it:</p>

<ul><pre><font face="Arial,Courier New,Courier">#include "stylemanager_coolstyle.h"
#include "button_coolstyle.h"

CL_StyleManager_CoolTheme::CL_StyleManager_CoolTheme(CL_ResourceManager *resources)
: CL_StyleManager_Boring(resources)
{
}

void CL_StyleManager_CoolTheme::connect_styles(const std::string &type, CL_Component *component)
{
	if (type == "button")
	{
		CL_Button *button = (CL_Button *)component;
		button-&gt;set_style(new CL_Button_CoolTheme(button, this));
	}
	else
	{
		CL_StyleManager_Boring::connect_styles(type, component);
	}
}
</font></pre></ul>

<p>A file called <b>button_coolstyle.h</b> is included here; we'll get back to that in the next
section.</p>

<p>The connect_styles() function has two parameters - <b>type</b> and <b>component</b>.</p>

<p>The <b>type</b> parameter contains the name of the component to be styled - examples are
label, button, frame, inputbox, scrollbar, radiobutton, listbox, window, etc. For each
component you want to put a style on, make a new test for the type, and attach the style
using the set_style() function in the component. Notice how its done through creating
a new style class called CL_Button_CoolTheme.</p>

<p>Any components we don't attach, we just pass on to the default stylemanager. You can skip
doing this if you have styled all the component you want to use, or don't want to use the
default stylemanager at all.</p>

<div style="border-bottom-style: dotted;  border-bottom-width: 1px;"><h3>Creating a styled component</h3></div>

<p>Create a new file called <b>button_coolstyle.h</b>, and insert the following
code into it:</p>

<ul><pre><font face="Arial,Courier New,Courier">#ifndef header_button_coolstyle
#define header_button_coolstyle

#include &lt;ClanLib/gui.h&gt;
#include "stylemanager_coolstyle.h"

class CL_Button_CoolTheme : public CL_ComponentStyle
{
public:
	CL_Button_CoolTheme(CL_Button *button, CL_StyleManager_CoolTheme *style);

private:
	CL_Slot slot_paint;
	void on_paint();

	CL_Button *button;
};

#endif
</font></pre></ul>

<p>Each component-style inherits from the class CL_ComponentStyle. The CL_Button
object you get in the constructor is the logic class for the button. You can 
query it for states (is_down()) and size etc.</p>

<p>In this simple style, we only prepare to hook into the sig_paint signal - 
therefore the slot_paint and on_paint() code. Read on for more specifics on this.</p>

<p>Create a new file called <b>button_coolstyle.cpp</b>, and insert the following
code into it:</p>

<ul><pre><font face="Arial,Courier New,Courier">#include &lt;ClanLib/display.h&gt;
#include "button_coolstyle.h"

CL_Button_CoolTheme::CL_Button_CoolTheme(CL_Button *button, CL_StyleManager_CoolTheme *style)
: CL_ComponentStyle(button)
{
	this-&gt;button = button;

	slot_paint = button-&gt;sig_paint().connect(this, &CL_Button_CoolTheme::on_paint);
}

void CL_Button_CoolTheme::on_paint()
{
	int button_width = button-&gt;get_width();
	int button_height = button-&gt;get_height();

	CL_Display::fill_rect(CL_Rect(1, 1, button_width - 1, button_height - 1), CL_Color(70, 120, 255));

	if(button-&gt;is_down())
		CL_Display::draw_rect(CL_Rect(0, 0, button_width, button_height), CL_Color::white);
	else
		CL_Display::draw_rect(CL_Rect(0, 0, button_width, button_height), CL_Color::black);
}
</font></pre></ul>

<p>In the constructor we hook into the sig_paint signal of the CL_Button. This allows
us to do custom drawing of the button.</p>

<p>The on_paint() function fetches the size of the button, and draws some simple rects,
based on the button state - if its pressed down or not.</p>

<div style="border-bottom-style: dotted;  border-bottom-width: 1px;"><h3>Testing the new style</h3></div>

<p>We have now created a very simple style, using only one themed component - a CL_Button.
Lets try to test it, and see if it behaves as we expect it to do.</p>

<ul><pre><font face="Arial,Courier New,Courier">#include &lt;ClanLib/core.h&gt;
#include &lt;ClanLib/gui.h&gt;
#include &lt;ClanLib/gl.h&gt;
#include &lt;ClanLib/application.h&gt;
#include &lt;ClanLib/display.h&gt;

#include "stylemanager_coolstyle.h"

class StyleTest : public CL_ClanApplication
{
public:
	int main(int argc, char** argv)
	{
		try
		{
			CL_SetupCore setup_core;
			CL_SetupGUI setup_gui;
			CL_SetupDisplay setup_display;
			CL_SetupGL setup_gl;

			CL_DisplayWindow window("StyleTest", 640, 480);

			CL_ResourceManager resources("gui.xml");
			CL_StyleManager_CoolTheme style(&resources);
			CL_GUIManager gui(&style);
			
			CL_Button button(CL_Rect(10, 10, 100, 40), "", &gui);

			while (!CL_Keyboard::get_keycode(CL_KEY_ESCAPE))
			{
				CL_Display::clear(CL_Color::grey);
				gui.show();
				CL_Display::flip();
				CL_System::keep_alive(10);
			}
		}
		catch (CL_Error e)
		{
			std::cout &lt;&lt; e.message.c_str() &lt;&lt; std::endl;
		}

		return 0;
	}
} app;
</font></pre></ul>

<p>Remember to copy the Resources/GUIStyleBoring files into your project,
so it has some fonts and resources to use. These can be replaced later with your own
resources.</p>

<div style="border-bottom-style: dotted;  border-bottom-width: 1px;"><h3>Some example GUI styles</h3></div>

<table border="0" cellpadding="10">
	<tr>
		<td align="center"><p><a href="Images/silver.jpg"><img src="Images/silver.jpg" alt=Silver height="80" border="1"></a></p>
			<p> ClanGUIs default theme Silver</p>
		</td>
		<td align="center"><p><a href="Images/boring.jpg"><img src="Images/boring.jpg" alt=Boring height="80" border="1"></a></p>
			<p>ClanGUIs default theme Boring</p>
		</td>
		<td align="center"><p><a href="Images/supaplex.jpg"><img src="Images/supaplex.jpg" alt=SupaPlex height="80" border="1"></a></p>
			<p>The game Supaplex</p>
		</td>
	</tr>
	<tr>
		<td align="center"><p><a href="Images/race.jpg"><img src="Images/race.jpg" alt=Race height="80" border="1"></a></p>
			<p>The game Race</p>
		</td>
		<td align="center"><p><a href="Images/raceeditor.jpg"><img src="Images/raceeditor.jpg" alt="Race Editor" height="80" border="1"></a></p>
			<p>The gameeditor in Race</p>
		</td>
		<td align="center"><p><a href="Images/apoc.jpg"><img src="Images/apoc.jpg" alt=APOC height="80" border="1"></a></p>
			<p>The game APOC</p>
		</td>
	</tr>
</table>

<!-- clanlib footer begin -->
<div style="margin-top: 0em; text-align: center; color: #a0a0a0; border-top-style: dotted; border-top-width: 1px;">
              Questions or comments, write to the <a href="http://clanlib.org/contact.html">ClanLib mailing list</a>.
            </div>
</div>
</div>
</body>
</html>