http://cegui.org/wiki/api.php?action=feedcontributions&feedformat=atom&user=LeviaCEGUI Wiki - Crazy Eddie's GUI System (Open Source) - User contributions [en]2026-05-10T17:07:45ZUser contributionsMediaWiki 1.24.1http://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2645Create a CheckListboxItem2007-05-09T14:53:21Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. We need to do a few things to call this one finished. First, we need to create the CheckListboxItem class. Then we are going to add the window factory to the system. Last but not least is adding the Falagard mapping. We'll start with the CheckListboxItem class.<br />
<br />
====CheckListItem.h====<br />
#ifndef _CHECKLISTITEM_<br />
#define _CHECKLISTITEM_<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include <CEGUI.h><br />
<br><br />
namespace CEGUI<br />
{<br />
class CheckListboxItem : public ItemEntry<br />
{<br />
protected:<br />
public:<br />
CheckListboxItem(const String &type, const String &name);<br />
virtual ~CheckListboxItem();<br />
static const String WidgetTypeName;<br />
};<br />
CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)<br />
}<br />
#endif<br />
<br />
As you can see, this class inherits ItemEntry. This is necessary as its THE thing that makes this item working properly. Pay special attention to <b>CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)</b>. This tells CEGUI that we are declarating the window.<br />
<br />
====CheckListItem.cpp====<br />
#include "CheckListItem.h"<br />
<br><br />
namespace CEGUI<br />
{<br />
CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem)<br />
const String CheckListboxItem::WidgetTypeName("CEGUI/CheckListboxItem");<br />
CheckListboxItem::CheckListboxItem(const String &type, const String &name) :<br />
ItemEntry(type, name)<br />
{<br />
}<br />
CheckListboxItem::~CheckListboxItem()<br />
{<br />
}<br />
}<br />
<br />
<b>CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem)</b> is quite important here. It tells CEGUI where we are placing the code that comes with the window. As you can see this class is quite empty, you are, of course, free to add anything you like to this class - these are just the mere basics.<br />
<br />
Now, there is one more important thing to do. Register this window properly in CEGUI.<br />
<br />
namespace CEGUI<br />
{<br />
void bindCEGUI()<br />
{<br />
CEGUI::WindowFactoryManager& wfMgr = CEGUI::WindowFactoryManager::getSingleton();<br />
wfMgr.addFactory(&CEGUI_WINDOW_FACTORY(CheckListboxItem));<br />
wfMgr.addFalagardWindowMapping("WindowsLook/CheckListboxItem", "CEGUI/ItemEntry", "WindowsLook/CheckListboxItem", "Falagard/ItemEntry");<br />
}<br />
}<br />
<br />
addFalagardWindowMappings parameters are as follows: Name, Type, LooknFeel, WindowRenderer. Just put this code somewhere in your main file or on another place that you are sure is executed before using our new item. Also note, in order to use <b>CEGUI_WINDOW_FACTORY()</b> you need to be in the CEGUI namespace.<br />
<br />
'''Example'''<br />
<br />
====main.cpp====<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include "SDLLoader.h"<br />
#include "CheckListItem.h"<br />
void doStuff();<br />
<br><br />
namespace CEGUI<br />
{<br />
void bindCEGUI()<br />
{<br />
CEGUI::WindowFactoryManager& wfMgr = CEGUI::WindowFactoryManager::getSingleton();<br />
wfMgr.addFactory(&CEGUI_WINDOW_FACTORY(CheckListboxItem));<br />
wfMgr.addFalagardWindowMapping("WindowsLook/CheckListboxItem", "CEGUI/ItemEntry", "WindowsLook/CheckListboxItem", "Falagard/ItemEntry");<br />
}<br />
}<br />
int main (int argc, char **argv) <br />
{<br />
SDLLoader sdl;<br />
sdl.init();<br />
CEGUI::bindCEGUI();<br />
doStuff();<br />
sdl.main_loop();<br />
return 0;<br />
}<br />
<br><br />
void doStuff()<br />
{<br />
CEGUI::System * m_System = CEGUI::System::getSingletonPtr();<br />
CEGUI::Logger::getSingletonPtr()->setLoggingLevel(CEGUI::Insane);<br />
CEGUI::WindowManager * m_WndMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::Window * m_Root = m_System->getGUISheet();<br />
<br><br />
CEGUI::ItemListbox * lb = (CEGUI::ItemListbox*)m_WndMgr->createWindow("WindowsLook/ItemListbox", "Lol");<br />
lb->setSize(CEGUI::UVector2(CEGUI::UDim(0.3f, 0.0f), CEGUI::UDim(0.3f, 0.0f)));<br />
lb->setPosition(CEGUI::UVector2(CEGUI::UDim(0.1f, 0.0f), CEGUI::UDim(0.1f, 0.0f)));<br />
m_Root->addChildWindow(lb);<br />
<br><br />
CEGUI::CheckListboxItem * check = (CEGUI::CheckListboxItem*)m_WndMgr->createWindow("WindowsLook/CheckListboxItem", "Test");<br />
check->setText("Test");<br />
lb->addChildWindow(check);<br />
}<br />
<br />
As you can see in the main function, the function that registers the window is called before actually creating it. Dont pay any attention to the sdl initiation - it's just my personal test environment.<br />
<br />
Congratulations! You have just created a CheckListboxItem. This was a very good practice because you also learned the technique required to write a completely new widget.<br />
<br />
Please contact me if you have any question, comments, feedback - anything, email me at [mailto:levia@openfrag.org levia at openfrag dot com].<br />
<br />
<br />
<br />
<br />
<br />
--[[User:Levia|Levia]] 21:10, 5 April 2007 (GMT+1)</div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2643Most important events2007-05-08T11:59:49Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code><br />
<br />
====Checkbox====<br />
<br />
A checkable item useful for boolean(true or false) 'questions'.<br />
<br />
* EventCheckStateChanged - Fired when the checkbox got checked or un-checked.<br />
* EventMouseEnters - Fired when the mouse hovers over the checkbox. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse moves out of the checkbox. Inherited from Window.<br />
<br />
<code><cpp/><br />
Checkbox * checkBox = static_cast<Checkbox*>(winMgr.createWindow("TaharezLook/Checkbox", "Checkbox1"));<br />
sheet->addChildWindow(checkBox);<br />
checkBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
checkBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
<br />
// A question where people can only answer yes or no (true or false)<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
<br />
checkBox->subscribeEvent(Checkbox::EventCheckStateChanged, Event::Subscriber(&EventGalore::onCheckStateChanged, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onCheckStateChanged(const CEGUI::EventArgs &e)<br />
{<br />
// Our item has been checked or unchecked, update our item accordingly.<br />
updateCheckbox();<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// The mouse has entered, update the checkbox accordingly.<br />
updateCheckbox(); <br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
// Reset<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
return true;<br />
}<br />
<br />
void updateCheckbox()<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
<br />
if (checkBox->isSelected())<br />
{<br />
// Our checkbox is selected, so someone has previously said 'yes'.<br />
checkBox->setText("Click to choose no!");<br />
}<br />
else<br />
{<br />
// Our item is not selected, so someone hasn't done anything yet, or it has been previously<br />
// unchecked.<br />
checkBox->setText("Click to choose yes!");<br />
}<br />
}<br />
</code><br />
This might confuse at first sight. Let me go through this here, in steps.<br />
* First, our checkbox is created and our mouse remains still.<br />
* Second, the mouse enters the checkbox, updateCheckbox is called. In this case, our checkbox isn't selected by default, so the text becomes 'Click to choose yes!'.<br />
* Third, we click. The onCheckStateChanged function is called, and that function calls updateCheckbox again to instantly change the text again. We have clicked the checkbox, while it wasn't previously checked, this means its checked now. Text becomes 'Click to choose no!'.<br />
* Fourth, we move our mouse away from the checkbox. The onMouseLeaves function is called, where we reset the text to our question.<br />
<br />
====RadioButton====<br />
<br />
Similar to Checkbox, only it can be grouped, and once selected, it cannot be unselected (except when another button has been selected). Note, in this case, both functions are called when you click the unselected radiobutton. This is because one is unselected and one is selected.<br />
<br />
* EventSelectStateChanged - Fired when the radiobutton has been selected.<br />
<br />
<code><cpp/><br />
RadioButton * radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton1"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("Yes");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton1SelectChanged, this));<br />
// To make sure the event is fired.<br />
radioButton->setSelected(true);<br />
<br />
<br />
radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton2"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.2f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("No");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton2SelectChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onButton1SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::RadioButton * radioButton1 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton1"));<br />
<br />
if (radioButton1->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton1->setText("Ok then. Yes it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton1->setText("Yes");<br />
}<br />
return true;<br />
}<br />
<br />
bool onButton2SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
// We have chosen no.<br />
CEGUI::RadioButton * radioButton2 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton2"));<br />
<br />
if (radioButton2->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton2->setText("Ok then. No it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton2->setText("No");<br />
}<br />
return true;<br />
}<br />
</code><br />
<br />
====Editbox====<br />
<br />
A simple editable box where text can be entered.<br />
<br />
* EventTextAccepted - Fired when someone has pressed TAB or RETURN, or when someone has clicked another window.<br />
<br />
<code><cpp/><br />
Editbox * editBox = static_cast<Editbox*>(winMgr.createWindow("TaharezLook/Editbox", "Editbox1"));<br />
sheet->addChildWindow(editBox);<br />
<br />
editBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
editBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
editBox->setText("Edit me!");<br />
<br />
editBox->subscribeEvent(Editbox::EventTextAccepted, Event::Subscriber(&EventGalore::onTextAccepted, this));<br />
</code><br />
<code><cpp/><br />
bool onTextAccepted(const CEGUI::EventArgs &e)<br />
{<br />
// Our text has been accepted by either deactivating it or pressing tab or enter.<br />
CEGUI::Editbox * editBox = static_cast<CEGUI::Editbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Editbox1"));<br />
// So we got the text here, do something with it. Lets just..put the text back in reverse order.<br />
CEGUI::String currentText = editBox->getText();<br />
<br />
std::string finalString;<br />
<br />
CEGUI::String::reverse_iterator ppkNode = currentText.rbegin();<br />
CEGUI::String::reverse_iterator ppkEnd = currentText.rend();<br />
<br />
for (; ppkNode != ppkEnd; ++ppkNode)<br />
{<br />
finalString.push_back((*ppkNode));<br />
}<br />
editBox->setText(finalString);<br />
return true;<br />
}<br />
</code><br />
<br />
====MultiLineEditbox====<br />
<br />
This widget is pretty much the same as editbox, but allows more lines.<br />
<br />
* EventTextChanged - Fired when text has been changed. Inherited from window.<br />
<br />
This widget doesn't have the event TextAccepted, so you'll need to 'apply' the input by a button for example.<br />
<br />
<code><cpp/><br />
MultiLineEditbox * multiLineEditbox = static_cast<MultiLineEditbox*>(winMgr.createWindow("TaharezLook/MultiLineEditbox", "MultiEditbox1"));<br />
sheet->addChildWindow(multiLineEditbox);<br />
multiLineEditbox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
multiLineEditbox->setSize(UVector2(cegui_reldim(0.3f), cegui_reldim(0.3f)));<br />
multiLineEditbox->setText("Now edit me!");<br />
<br />
multiLineEditbox->subscribeEvent(MultiLineEditbox::EventTextChanged, Event::Subscriber(&EventGalore::onTextChanged, this));<br />
<br />
// This text is going to show the result.<br />
Window * textWindow = winMgr.createWindow("TaharezLook/StaticText", "StaticText1");<br />
sheet->addChildWindow(textWindow);<br />
textWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.5f)));<br />
textWindow->setSize(UVector2(cegui_reldim(0.6f), cegui_reldim(0.1f)));<br />
textWindow->setText("Now edit me!");<br />
</code><br />
<code><cpp/><br />
bool onTextChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::WindowManager * winMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::MultiLineEditbox * multiLineEditbox = static_cast<CEGUI::MultiLineEditbox*>(winMgr->getWindow("MultiEditbox1"));<br />
CEGUI::Window * textWindow = winMgr->getWindow("StaticText1");<br />
<br />
textWindow->setText(multiLineEditbox->getText());<br />
return true;<br />
}<br />
</code><br />
Notice what happens when you enter text on another line though :)<br />
<br />
====FrameWindow====<br />
<br />
This is a window where you usually put your widgets on.<br />
<br />
* EventCloseClicked - Fired when the 'X' in the upper right corner is clicked (of the Framewindow).<br />
* EventRollupToggled - Fired when the window gets rolled up, or rolled down.<br />
<br />
<code><cpp/><br />
FrameWindow * frameWindow = static_cast<FrameWindow*>(winMgr.createWindow("TaharezLook/FrameWindow", "FrameWindow1"));<br />
sheet->addChildWindow(frameWindow)<br />
frameWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
frameWindow->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
frameWindow->setText("Our window");<br />
<br />
frameWindow->subscribeEvent(FrameWindow::EventCloseClicked, Event::Subscriber(&EventGalore::onCloseClicked, this));<br />
frameWindow->subscribeEvent(FrameWindow::EventRollupToggled, Event::Subscriber(&EventGalore::onRollupToggled, this));<br />
</code><br />
<code><cpp/><br />
bool onCloseClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Someone has clicked the upper right 'X'.<br />
<br />
// We don't HAVE to cast to FrameWindow, as the method we are going to use to close the window<br />
// is available in Window, but for the sake of clarity...<br />
CEGUI::FrameWindow * frameWindow = static_cast<CEGUI::FrameWindow*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("FrameWindow1"));<br />
frameWindow->destroy();<br />
// Note: Dont try to delete the pointer.<br />
return true;<br />
}<br />
<br />
bool onRollupToggled(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::FrameWindow * frameWindow = static_cast<CEGUI::FrameWindow*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("FrameWindow1"));<br />
<br />
if (frameWindow->isRolledup())<br />
{<br />
frameWindow->setText("Rolled up");<br />
}<br />
else<br />
{<br />
frameWindow->setText("Our window");<br />
}<br />
return true;<br />
}<br />
</code><br />
<br />
====ProgressBar====<br />
<br />
A progress widget.<br />
<br />
* EventProgressDone - Fired when the progress bar reaches 100%(1.0f).<br />
* EventProgressChanged - Fired when the progress changes.<br />
* EventMouseClick - Fired when someone clicked on the window. Inherited from Window.<br />
<br />
<code><cpp/><br />
ProgressBar * progressBar = static_cast<ProgressBar*>(winMgr.createWindow("TaharezLook/ProgressBar", "ProgressBar1"));<br />
sheet->addChildWindow(progressBar);<br />
progressBar->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
progressBar->setSize(UVector2(cegui_reldim(0.5f), cegui_reldim(0.04f)));<br />
<br />
progressBar->subscribeEvent(ProgressBar::EventProgressDone, Event::Subscriber(&EventGalore::onProgressDone, this));<br />
progressBar->subscribeEvent(ProgressBar::EventProgressChanged, Event::Subscriber(&EventGalore::onProgressChanged, this));<br />
progressBar->subscribeEvent(ProgressBar::EventMouseClick, Event::Subscriber(&EventGalore::onMouseClick, this));<br />
<br />
Window * resultWindow = winMgr.createWindow("TaharezLook/StaticText", "StaticText1");<br />
sheet->addChildWindow(resultWindow);<br />
resultWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.05f)));<br />
resultWindow->setSize(UVector2(cegui_reldim(0.5f), cegui_reldim(0.06f)));<br />
resultWindow->setText("Lets start progressing!");<br />
resultWindow->setProperty("FrameEnabled", "false");<br />
resultWindow->setProperty("BackgroundEnabled", "false");<br />
</code><br />
<code><cpp/><br />
bool onProgressDone(const CEGUI::EventArgs &e)<br />
{<br />
// The progress bar is full.<br />
CEGUI::Window * resultWindow = CEGUI::WindowManager::getSingletonPtr()->getWindow("StaticText1");<br />
<br />
resultWindow->setText("We are done!");<br />
return true;<br />
}<br />
<br />
bool onProgressChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The progress changed.<br />
CEGUI::WindowManager * winMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::ProgressBar * progressBar = static_cast<CEGUI::ProgressBar*>(winMgr->getWindow("ProgressBar1"));<br />
CEGUI::Window * resultWindow = winMgr->getWindow("StaticText1");<br />
<br />
float progress = progressBar->getProgress();<br />
int finalProgress = static_cast<int>(progress*100);<br />
std::stringstream resultStr;<br />
resultStr << "Progress: " << finalProgress << "%";<br />
<br />
resultWindow->setText(resultStr.str());<br />
return true;<br />
}<br />
<br />
bool onMouseClick(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::ProgressBar * progressBar = static_cast<CEGUI::ProgressBar*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("ProgressBar1"));<br />
progressBar->setProgress(progressBar->getProgress() + 0.05f);<br />
return true;<br />
}<br />
</code><br />
<br />
====Slider====<br />
<br />
====Spinner====<br />
<br />
====MultiColumnList====</div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2640Most important events2007-05-07T17:22:06Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code><br />
<br />
====Checkbox====<br />
<br />
A checkable item useful for boolean(true or false) 'questions'.<br />
<br />
* EventCheckStateChanged - Fired when the checkbox got checked or un-checked.<br />
* EventMouseEnters - Fired when the mouse hovers over the checkbox. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse moves out of the checkbox. Inherited from Window.<br />
<br />
<code><cpp/><br />
Checkbox * checkBox = static_cast<Checkbox*>(winMgr.createWindow("TaharezLook/Checkbox", "Checkbox1"));<br />
sheet->addChildWindow(checkBox);<br />
checkBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
checkBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
<br />
// A question where people can only answer yes or no (true or false)<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
<br />
checkBox->subscribeEvent(Checkbox::EventCheckStateChanged, Event::Subscriber(&EventGalore::onCheckStateChanged, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onCheckStateChanged(const CEGUI::EventArgs &e)<br />
{<br />
// Our item has been checked or unchecked, update our item accordingly.<br />
updateCheckbox();<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// The mouse has entered, update the checkbox accordingly.<br />
updateCheckbox(); <br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
// Reset<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
return true;<br />
}<br />
<br />
void updateCheckbox()<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
<br />
if (checkBox->isSelected())<br />
{<br />
// Our checkbox is selected, so someone has previously said 'yes'.<br />
checkBox->setText("Click to choose no!");<br />
}<br />
else<br />
{<br />
// Our item is not selected, so someone hasn't done anything yet, or it has been previously<br />
// unchecked.<br />
checkBox->setText("Click to choose yes!");<br />
}<br />
}<br />
</code><br />
This might confuse at first sight. Let me go through this here, in steps.<br />
* First, our checkbox is created and our mouse remains still.<br />
* Second, the mouse enters the checkbox, updateCheckbox is called. In this case, our checkbox isn't selected by default, so the text becomes 'Click to choose yes!'.<br />
* Third, we click. The onCheckStateChanged function is called, and that function calls updateCheckbox again to instantly change the text again. We have clicked the checkbox, while it wasn't previously checked, this means its checked now. Text becomes 'Click to choose no!'.<br />
* Fourth, we move our mouse away from the checkbox. The onMouseLeaves function is called, where we reset the text to our question.<br />
<br />
====RadioButton====<br />
<br />
Similar to Checkbox, only it can be grouped, and once selected, it cannot be unselected (except when another button has been selected). Note, in this case, both functions are called when you click the unselected radiobutton. This is because one is unselected and one is selected.<br />
<br />
* EventSelectStateChanged - Fired when the radiobutton has been selected.<br />
<br />
<code><cpp/><br />
RadioButton * radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton1"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("Yes");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton1SelectChanged, this));<br />
// To make sure the event is fired.<br />
radioButton->setSelected(true);<br />
<br />
<br />
radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton2"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.2f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("No");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton2SelectChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onButton1SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::RadioButton * radioButton1 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton1"));<br />
<br />
if (radioButton1->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton1->setText("Ok then. Yes it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton1->setText("Yes");<br />
}<br />
return true;<br />
}<br />
<br />
bool onButton2SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
// We have chosen no.<br />
CEGUI::RadioButton * radioButton2 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton2"));<br />
<br />
if (radioButton2->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton2->setText("Ok then. No it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton2->setText("No");<br />
}<br />
return true;<br />
}<br />
</code><br />
<br />
====Editbox====<br />
<br />
A simple editable box where text can be entered.<br />
<br />
* EventTextAccepted - Fired when someone has pressed TAB or RETURN, or when someone has clicked another window.<br />
<br />
<code><cpp/><br />
Editbox * editBox = static_cast<Editbox*>(winMgr.createWindow("TaharezLook/Editbox", "Editbox1"));<br />
sheet->addChildWindow(editBox);<br />
<br />
editBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
editBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
editBox->setText("Edit me!");<br />
<br />
editBox->subscribeEvent(Editbox::EventTextAccepted, Event::Subscriber(&EventGalore::onTextAccepted, this));<br />
</code><br />
<code><cpp/><br />
bool onTextAccepted(const CEGUI::EventArgs &e)<br />
{<br />
// Our text has been accepted by either deactivating it or pressing tab or enter.<br />
CEGUI::Editbox * editBox = static_cast<CEGUI::Editbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Editbox1"));<br />
// So we got the text here, do something with it. Lets just..put the text back in reverse order.<br />
CEGUI::String currentText = editBox->getText();<br />
<br />
std::string finalString;<br />
<br />
CEGUI::String::reverse_iterator ppkNode = currentText.rbegin();<br />
CEGUI::String::reverse_iterator ppkEnd = currentText.rend();<br />
<br />
for (; ppkNode != ppkEnd; ++ppkNode)<br />
{<br />
finalString.push_back((*ppkNode));<br />
}<br />
editBox->setText(finalString);<br />
return true;<br />
}<br />
</code><br />
<br />
====MultiLineEditbox====<br />
<br />
This widget is pretty much the same as editbox, but allows more lines.<br />
<br />
* EventTextChanged - Fired when text has been changed. Inherited from window.<br />
<br />
This widget doesn't have the event TextAccepted, so you'll need to 'apply' the input by a button for example.<br />
<br />
<code><cpp/><br />
MultiLineEditbox * multiLineEditbox = static_cast<MultiLineEditbox*>(winMgr.createWindow("TaharezLook/MultiLineEditbox", "MultiEditbox1"));<br />
sheet->addChildWindow(multiLineEditbox);<br />
multiLineEditbox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
multiLineEditbox->setSize(UVector2(cegui_reldim(0.3f), cegui_reldim(0.3f)));<br />
multiLineEditbox->setText("Now edit me!");<br />
<br />
multiLineEditbox->subscribeEvent(MultiLineEditbox::EventTextChanged, Event::Subscriber(&EventGalore::onTextChanged, this));<br />
<br />
// This text is going to show the result.<br />
Window * textWindow = winMgr.createWindow("TaharezLook/StaticText", "StaticText1");<br />
sheet->addChildWindow(textWindow);<br />
textWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.5f)));<br />
textWindow->setSize(UVector2(cegui_reldim(0.6f), cegui_reldim(0.1f)));<br />
textWindow->setText("Now edit me!");<br />
</code><br />
<code><cpp/><br />
bool onTextChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::WindowManager * winMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::MultiLineEditbox * multiLineEditbox = static_cast<CEGUI::MultiLineEditbox*>(winMgr->getWindow("MultiEditbox1"));<br />
CEGUI::Window * textWindow = winMgr->getWindow("StaticText1");<br />
<br />
textWindow->setText(multiLineEditbox->getText());<br />
return true;<br />
}<br />
</code><br />
Notice what happens when you enter text on another line though :)<br />
<br />
====FrameWindow====<br />
<br />
This is a window where you usually put your widgets on.<br />
<br />
* EventCloseClicked - Fired when the 'X' in the upper right corner is clicked (of the Framewindow).<br />
* EventRollupToggled - Fired when the window gets rolled up, or rolled down.<br />
<br />
<code><cpp/><br />
FrameWindow * frameWindow = static_cast<FrameWindow*>(winMgr.createWindow("TaharezLook/FrameWindow", "FrameWindow1"));<br />
sheet->addChildWindow(frameWindow)<br />
frameWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
frameWindow->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
frameWindow->setText("Our window");<br />
<br />
frameWindow->subscribeEvent(FrameWindow::EventCloseClicked, Event::Subscriber(&EventGalore::onCloseClicked, this));<br />
frameWindow->subscribeEvent(FrameWindow::EventRollupToggled, Event::Subscriber(&EventGalore::onRollupToggled, this));<br />
</code><br />
<code><cpp/><br />
bool onCloseClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Someone has clicked the upper right 'X'.<br />
<br />
// We don't HAVE to cast to FrameWindow, as the method we are going to use to close the window<br />
// is available in Window, but for the sake of clarity...<br />
CEGUI::FrameWindow * frameWindow = static_cast<CEGUI::FrameWindow*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("FrameWindow1"));<br />
frameWindow->destroy();<br />
// Note: Dont try to delete the pointer.<br />
return true;<br />
}<br />
<br />
bool onRollupToggled(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::FrameWindow * frameWindow = static_cast<CEGUI::FrameWindow*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("FrameWindow1"));<br />
<br />
if (frameWindow->isRolledup())<br />
{<br />
frameWindow->setText("Rolled up");<br />
}<br />
else<br />
{<br />
frameWindow->setText("Our window");<br />
}<br />
return true;<br />
}<br />
</code><br />
<br />
====ProgressBar====<br />
<br />
A progress widget.<br />
<br />
* EventProgressDone - Fired when the progress bar reaches 100%(1.0f).<br />
* EventProgressChanged - Fired when the progress changes.<br />
* EventMouseClick - Fired when someone clicked on the window. Inherited from Window.<br />
<br />
<code><cpp/><br />
ProgressBar * progressBar = static_cast<ProgressBar*>(winMgr.createWindow("TaharezLook/ProgressBar", "ProgressBar1"));<br />
sheet->addChildWindow(progressBar);<br />
progressBar->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
progressBar->setSize(UVector2(cegui_reldim(0.5f), cegui_reldim(0.04f)));<br />
<br />
progressBar->subscribeEvent(ProgressBar::EventProgressDone, Event::Subscriber(&EventGalore::onProgressDone, this));<br />
progressBar->subscribeEvent(ProgressBar::EventProgressChanged, Event::Subscriber(&EventGalore::onProgressChanged, this));<br />
progressBar->subscribeEvent(ProgressBar::EventMouseClick, Event::Subscriber(&EventGalore::onMouseClick, this));<br />
<br />
Window * resultWindow = winMgr.createWindow("TaharezLook/StaticText", "StaticText1");<br />
sheet->addChildWindow(resultWindow);<br />
resultWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.05f)));<br />
resultWindow->setSize(UVector2(cegui_reldim(0.5f), cegui_reldim(0.06f)));<br />
resultWindow->setText("Lets start progressing!");<br />
resultWindow->setProperty("FrameEnabled", "false");<br />
resultWindow->setProperty("BackgroundEnabled", "false");<br />
</code><br />
<code><cpp/><br />
bool onProgressDone(const CEGUI::EventArgs &e)<br />
{<br />
// The progress bar is full.<br />
CEGUI::Window * resultWindow = CEGUI::WindowManager::getSingletonPtr()->getWindow("StaticText1");<br />
<br />
resultWindow->setText("We are done!");<br />
return true;<br />
}<br />
<br />
bool onProgressChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The progress changed.<br />
CEGUI::WindowManager * winMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::ProgressBar * progressBar = static_cast<CEGUI::ProgressBar*>(winMgr->getWindow("ProgressBar1"));<br />
CEGUI::Window * resultWindow = winMgr->getWindow("StaticText1");<br />
<br />
float progress = progressBar->getProgress();<br />
int finalProgress = static_cast<int>(progress*100);<br />
std::stringstream resultStr;<br />
resultStr << "Progress: " << finalProgress << "%";<br />
<br />
resultWindow->setText(resultStr.str());<br />
return true;<br />
}<br />
<br />
bool onMouseClick(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::ProgressBar * progressBar = static_cast<CEGUI::ProgressBar*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("ProgressBar1"));<br />
progressBar->setProgress(progressBar->getProgress() + 0.05f);<br />
return true;<br />
}<br />
</code></div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2639Most important events2007-05-07T17:21:58Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code><br />
<br />
====Checkbox====<br />
<br />
A checkable item useful for boolean(true or false) 'questions'.<br />
<br />
* EventCheckStateChanged - Fired when the checkbox got checked or un-checked.<br />
* EventMouseEnters - Fired when the mouse hovers over the checkbox. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse moves out of the checkbox. Inherited from Window.<br />
<br />
<code><cpp/><br />
Checkbox * checkBox = static_cast<Checkbox*>(winMgr.createWindow("TaharezLook/Checkbox", "Checkbox1"));<br />
sheet->addChildWindow(checkBox);<br />
checkBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
checkBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
<br />
// A question where people can only answer yes or no (true or false)<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
<br />
checkBox->subscribeEvent(Checkbox::EventCheckStateChanged, Event::Subscriber(&EventGalore::onCheckStateChanged, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onCheckStateChanged(const CEGUI::EventArgs &e)<br />
{<br />
// Our item has been checked or unchecked, update our item accordingly.<br />
updateCheckbox();<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// The mouse has entered, update the checkbox accordingly.<br />
updateCheckbox(); <br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
// Reset<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
return true;<br />
}<br />
<br />
void updateCheckbox()<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
<br />
if (checkBox->isSelected())<br />
{<br />
// Our checkbox is selected, so someone has previously said 'yes'.<br />
checkBox->setText("Click to choose no!");<br />
}<br />
else<br />
{<br />
// Our item is not selected, so someone hasn't done anything yet, or it has been previously<br />
// unchecked.<br />
checkBox->setText("Click to choose yes!");<br />
}<br />
}<br />
</code><br />
This might confuse at first sight. Let me go through this here, in steps.<br />
* First, our checkbox is created and our mouse remains still.<br />
* Second, the mouse enters the checkbox, updateCheckbox is called. In this case, our checkbox isn't selected by default, so the text becomes 'Click to choose yes!'.<br />
* Third, we click. The onCheckStateChanged function is called, and that function calls updateCheckbox again to instantly change the text again. We have clicked the checkbox, while it wasn't previously checked, this means its checked now. Text becomes 'Click to choose no!'.<br />
* Fourth, we move our mouse away from the checkbox. The onMouseLeaves function is called, where we reset the text to our question.<br />
<br />
====RadioButton====<br />
<br />
Similar to Checkbox, only it can be grouped, and once selected, it cannot be unselected (except when another button has been selected). Note, in this case, both functions are called when you click the unselected radiobutton. This is because one is unselected and one is selected.<br />
<br />
* EventSelectStateChanged - Fired when the radiobutton has been selected.<br />
<br />
<code><cpp/><br />
RadioButton * radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton1"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("Yes");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton1SelectChanged, this));<br />
// To make sure the event is fired.<br />
radioButton->setSelected(true);<br />
<br />
<br />
radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton2"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.2f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("No");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton2SelectChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onButton1SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::RadioButton * radioButton1 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton1"));<br />
<br />
if (radioButton1->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton1->setText("Ok then. Yes it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton1->setText("Yes");<br />
}<br />
return true;<br />
}<br />
<br />
bool onButton2SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
// We have chosen no.<br />
CEGUI::RadioButton * radioButton2 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton2"));<br />
<br />
if (radioButton2->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton2->setText("Ok then. No it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton2->setText("No");<br />
}<br />
return true;<br />
}<br />
</code><br />
<br />
====Editbox====<br />
<br />
A simple editable box where text can be entered.<br />
<br />
* EventTextAccepted - Fired when someone has pressed TAB or RETURN, or when someone has clicked another window.<br />
<br />
<code><cpp/><br />
Editbox * editBox = static_cast<Editbox*>(winMgr.createWindow("TaharezLook/Editbox", "Editbox1"));<br />
sheet->addChildWindow(editBox);<br />
<br />
editBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
editBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
editBox->setText("Edit me!");<br />
<br />
editBox->subscribeEvent(Editbox::EventTextAccepted, Event::Subscriber(&EventGalore::onTextAccepted, this));<br />
</code><br />
<code><cpp/><br />
bool onTextAccepted(const CEGUI::EventArgs &e)<br />
{<br />
// Our text has been accepted by either deactivating it or pressing tab or enter.<br />
CEGUI::Editbox * editBox = static_cast<CEGUI::Editbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Editbox1"));<br />
// So we got the text here, do something with it. Lets just..put the text back in reverse order.<br />
CEGUI::String currentText = editBox->getText();<br />
<br />
std::string finalString;<br />
<br />
CEGUI::String::reverse_iterator ppkNode = currentText.rbegin();<br />
CEGUI::String::reverse_iterator ppkEnd = currentText.rend();<br />
<br />
for (; ppkNode != ppkEnd; ++ppkNode)<br />
{<br />
finalString.push_back((*ppkNode));<br />
}<br />
editBox->setText(finalString);<br />
return true;<br />
}<br />
</code><br />
<br />
====MultiLineEditbox====<br />
<br />
This widget is pretty much the same as editbox, but allows more lines.<br />
<br />
* EventTextChanged - Fired when text has been changed. Inherited from window.<br />
<br />
This widget doesn't have the event TextAccepted, so you'll need to 'apply' the input by a button for example.<br />
<br />
<code><cpp/><br />
MultiLineEditbox * multiLineEditbox = static_cast<MultiLineEditbox*>(winMgr.createWindow("TaharezLook/MultiLineEditbox", "MultiEditbox1"));<br />
sheet->addChildWindow(multiLineEditbox);<br />
multiLineEditbox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
multiLineEditbox->setSize(UVector2(cegui_reldim(0.3f), cegui_reldim(0.3f)));<br />
multiLineEditbox->setText("Now edit me!");<br />
<br />
multiLineEditbox->subscribeEvent(MultiLineEditbox::EventTextChanged, Event::Subscriber(&EventGalore::onTextChanged, this));<br />
<br />
// This text is going to show the result.<br />
Window * textWindow = winMgr.createWindow("TaharezLook/StaticText", "StaticText1");<br />
sheet->addChildWindow(textWindow);<br />
textWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.5f)));<br />
textWindow->setSize(UVector2(cegui_reldim(0.6f), cegui_reldim(0.1f)));<br />
textWindow->setText("Now edit me!");<br />
</code><br />
<code><cpp/><br />
bool onTextChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::WindowManager * winMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::MultiLineEditbox * multiLineEditbox = static_cast<CEGUI::MultiLineEditbox*>(winMgr->getWindow("MultiEditbox1"));<br />
CEGUI::Window * textWindow = winMgr->getWindow("StaticText1");<br />
<br />
textWindow->setText(multiLineEditbox->getText());<br />
return true;<br />
}<br />
</code><br />
Notice what happens when you enter text on another line though :)<br />
<br />
====FrameWindow====<br />
<br />
This is a window where you usually put your widgets on.<br />
<br />
* EventCloseClicked - Fired when the 'X' in the upper right corner is clicked (of the Framewindow).<br />
* EventRollupToggled - Fired when the window gets rolled up, or rolled down.<br />
<br />
<code><cpp/><br />
FrameWindow * frameWindow = static_cast<FrameWindow*>(winMgr.createWindow("TaharezLook/FrameWindow", "FrameWindow1"));<br />
sheet->addChildWindow(frameWindow)<br />
frameWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
frameWindow->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
frameWindow->setText("Our window");<br />
<br />
frameWindow->subscribeEvent(FrameWindow::EventCloseClicked, Event::Subscriber(&EventGalore::onCloseClicked, this));<br />
frameWindow->subscribeEvent(FrameWindow::EventRollupToggled, Event::Subscriber(&EventGalore::onRollupToggled, this));<br />
</code><br />
<code><cpp/><br />
bool onCloseClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Someone has clicked the upper right 'X'.<br />
<br />
// We don't HAVE to cast to FrameWindow, as the method we are going to use to close the window<br />
// is available in Window, but for the sake of clarity...<br />
CEGUI::FrameWindow * frameWindow = static_cast<CEGUI::FrameWindow*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("FrameWindow1"));<br />
frameWindow->destroy();<br />
// Note: Dont try to delete the pointer.<br />
return true;<br />
}<br />
<br />
bool onRollupToggled(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::FrameWindow * frameWindow = static_cast<CEGUI::FrameWindow*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("FrameWindow1"));<br />
<br />
if (frameWindow->isRolledup())<br />
{<br />
frameWindow->setText("Rolled up");<br />
}<br />
else<br />
{<br />
frameWindow->setText("Our window");<br />
}<br />
return true;<br />
}<br />
</code><br />
<br />
====ProgressBar====<br />
<br />
A progress widget.<br />
<br />
* EventProgressDone - Fired when the progress bar reaches 100%(1.0f).<br />
* EventProgressChanged - Fired when the progress changes.<br />
* EventMouseClick - Fired when someone clicked on the window. Inherited from Window.<br />
<br />
<code><cpp/><br />
ProgressBar * progressBar = static_cast<ProgressBar*>(winMgr.createWindow("TaharezLook/ProgressBar", "ProgressBar1"));<br />
sheet->addChildWindow(progressBar);<br />
progressBar->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
progressBar->setSize(UVector2(cegui_reldim(0.5f), cegui_reldim(0.04f)));<br />
<br />
progressBar->subscribeEvent(ProgressBar::EventProgressDone, Event::Subscriber(&EventGalore::onProgressDone, this));<br />
progressBar->subscribeEvent(ProgressBar::EventProgressChanged, Event::Subscriber(&EventGalore::onProgressChanged, this));<br />
progressBar->subscribeEvent(ProgressBar::EventMouseClick, Event::Subscriber(&EventGalore::onMouseClick, this));<br />
<br />
Window * resultWindow = winMgr.createWindow("TaharezLook/StaticText", "StaticText1");<br />
sheet->addChildWindow(resultWindow);<br />
resultWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.05f)));<br />
resultWindow->setSize(UVector2(cegui_reldim(0.5f), cegui_reldim(0.06f)));<br />
resultWindow->setText("Lets start progressing!");<br />
resultWindow->setProperty("FrameEnabled", "false");<br />
resultWindow->setProperty("BackgroundEnabled", "false");<br />
</code><br />
<code><cpp/><br />
bool onProgressDone(const CEGUI::EventArgs &e)<br />
{<br />
// The progress bar is full.<br />
CEGUI::Window * resultWindow = CEGUI::WindowManager::getSingletonPtr()->getWindow("StaticText1");<br />
<br />
resultWindow->setText("We are done!");<br />
return true;<br />
}<br />
<br />
bool onProgressChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The progress changed.<br />
CEGUI::WindowManager * winMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::ProgressBar * progressBar = static_cast<CEGUI::ProgressBar*>(winMgr->getWindow("ProgressBar1"));<br />
CEGUI::Window * resultWindow = winMgr->getWindow("StaticText1");<br />
<br />
float progress = progressBar->getProgress();<br />
int finalProgress = static_cast<int>(progress*100);<br />
std::stringstream resultStr;<br />
resultStr << "Progress: " << finalProgress << "%";<br />
<br />
resultWindow->setText(resultStr.str());<br />
return true;<br />
}<br />
<br />
bool onMouseClick(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::ProgressBar * progressBar = static_cast<CEGUI::ProgressBar*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("ProgressBar1"));<br />
progressBar->setProgress(progressBar->getProgress() + 0.05f);<br />
return true;<br />
}<br />
<code></code></div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2638Most important events2007-05-07T16:44:00Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code><br />
<br />
====Checkbox====<br />
<br />
A checkable item useful for boolean(true or false) 'questions'.<br />
<br />
* EventCheckStateChanged - Fired when the checkbox got checked or un-checked.<br />
* EventMouseEnters - Fired when the mouse hovers over the checkbox. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse moves out of the checkbox. Inherited from Window.<br />
<br />
<code><cpp/><br />
Checkbox * checkBox = static_cast<Checkbox*>(winMgr.createWindow("TaharezLook/Checkbox", "Checkbox1"));<br />
sheet->addChildWindow(checkBox);<br />
checkBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
checkBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
<br />
// A question where people can only answer yes or no (true or false)<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
<br />
checkBox->subscribeEvent(Checkbox::EventCheckStateChanged, Event::Subscriber(&EventGalore::onCheckStateChanged, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onCheckStateChanged(const CEGUI::EventArgs &e)<br />
{<br />
// Our item has been checked or unchecked, update our item accordingly.<br />
updateCheckbox();<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// The mouse has entered, update the checkbox accordingly.<br />
updateCheckbox(); <br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
// Reset<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
return true;<br />
}<br />
<br />
void updateCheckbox()<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
<br />
if (checkBox->isSelected())<br />
{<br />
// Our checkbox is selected, so someone has previously said 'yes'.<br />
checkBox->setText("Click to choose no!");<br />
}<br />
else<br />
{<br />
// Our item is not selected, so someone hasn't done anything yet, or it has been previously<br />
// unchecked.<br />
checkBox->setText("Click to choose yes!");<br />
}<br />
}<br />
</code><br />
This might confuse at first sight. Let me go through this here, in steps.<br />
* First, our checkbox is created and our mouse remains still.<br />
* Second, the mouse enters the checkbox, updateCheckbox is called. In this case, our checkbox isn't selected by default, so the text becomes 'Click to choose yes!'.<br />
* Third, we click. The onCheckStateChanged function is called, and that function calls updateCheckbox again to instantly change the text again. We have clicked the checkbox, while it wasn't previously checked, this means its checked now. Text becomes 'Click to choose no!'.<br />
* Fourth, we move our mouse away from the checkbox. The onMouseLeaves function is called, where we reset the text to our question.<br />
<br />
====RadioButton====<br />
<br />
Similar to Checkbox, only it can be grouped, and once selected, it cannot be unselected (except when another button has been selected). Note, in this case, both functions are called when you click the unselected radiobutton. This is because one is unselected and one is selected.<br />
<br />
* EventSelectStateChanged - Fired when the radiobutton has been selected.<br />
<br />
<code><cpp/><br />
RadioButton * radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton1"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("Yes");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton1SelectChanged, this));<br />
// To make sure the event is fired.<br />
radioButton->setSelected(true);<br />
<br />
<br />
radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton2"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.2f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("No");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton2SelectChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onButton1SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::RadioButton * radioButton1 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton1"));<br />
<br />
if (radioButton1->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton1->setText("Ok then. Yes it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton1->setText("Yes");<br />
}<br />
return true;<br />
}<br />
<br />
bool onButton2SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
// We have chosen no.<br />
CEGUI::RadioButton * radioButton2 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton2"));<br />
<br />
if (radioButton2->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton2->setText("Ok then. No it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton2->setText("No");<br />
}<br />
return true;<br />
}<br />
</code><br />
<br />
====Editbox====<br />
<br />
A simple editable box where text can be entered.<br />
<br />
* EventTextAccepted - Fired when someone has pressed TAB or RETURN, or when someone has clicked another window.<br />
<br />
<code><cpp/><br />
Editbox * editBox = static_cast<Editbox*>(winMgr.createWindow("TaharezLook/Editbox", "Editbox1"));<br />
sheet->addChildWindow(editBox);<br />
<br />
editBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
editBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
editBox->setText("Edit me!");<br />
<br />
editBox->subscribeEvent(Editbox::EventTextAccepted, Event::Subscriber(&EventGalore::onTextAccepted, this));<br />
</code><br />
<code><cpp/><br />
bool onTextAccepted(const CEGUI::EventArgs &e)<br />
{<br />
// Our text has been accepted by either deactivating it or pressing tab or enter.<br />
CEGUI::Editbox * editBox = static_cast<CEGUI::Editbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Editbox1"));<br />
// So we got the text here, do something with it. Lets just..put the text back in reverse order.<br />
CEGUI::String currentText = editBox->getText();<br />
<br />
std::string finalString;<br />
<br />
CEGUI::String::reverse_iterator ppkNode = currentText.rbegin();<br />
CEGUI::String::reverse_iterator ppkEnd = currentText.rend();<br />
<br />
for (; ppkNode != ppkEnd; ++ppkNode)<br />
{<br />
finalString.push_back((*ppkNode));<br />
}<br />
editBox->setText(finalString);<br />
return true;<br />
}<br />
</code><br />
<br />
====MultiLineEditbox====<br />
<br />
This widget is pretty much the same as editbox, but allows more lines.<br />
<br />
* EventTextChanged - Fired when text has been changed. Inherited from window.<br />
<br />
This widget doesn't have the event TextAccepted, so you'll need to 'apply' the input by a button for example.<br />
<br />
<code><cpp/><br />
MultiLineEditbox * multiLineEditbox = static_cast<MultiLineEditbox*>(winMgr.createWindow("TaharezLook/MultiLineEditbox", "MultiEditbox1"));<br />
sheet->addChildWindow(multiLineEditbox);<br />
multiLineEditbox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
multiLineEditbox->setSize(UVector2(cegui_reldim(0.3f), cegui_reldim(0.3f)));<br />
multiLineEditbox->setText("Now edit me!");<br />
<br />
multiLineEditbox->subscribeEvent(MultiLineEditbox::EventTextChanged, Event::Subscriber(&EventGalore::onTextChanged, this));<br />
<br />
// This text is going to show the result.<br />
Window * textWindow = winMgr.createWindow("TaharezLook/StaticText", "StaticText1");<br />
sheet->addChildWindow(textWindow);<br />
textWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.5f)));<br />
textWindow->setSize(UVector2(cegui_reldim(0.6f), cegui_reldim(0.1f)));<br />
textWindow->setText("Now edit me!");<br />
</code><br />
<code><cpp/><br />
bool onTextChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::WindowManager * winMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::MultiLineEditbox * multiLineEditbox = static_cast<CEGUI::MultiLineEditbox*>(winMgr->getWindow("MultiEditbox1"));<br />
CEGUI::Window * textWindow = winMgr->getWindow("StaticText1");<br />
<br />
textWindow->setText(multiLineEditbox->getText());<br />
return true;<br />
}<br />
</code><br />
Notice what happens when you enter text on another line though :)<br />
<br />
====FrameWindow====<br />
<br />
This is a window where you usually put your widgets on.<br />
<br />
* EventCloseClicked - Fired when the 'X' in the upper right corner is clicked (of the Framewindow).<br />
* EventRollupToggled - Fired when the window gets rolled up, or rolled down.<br />
<br />
<code><cpp/><br />
FrameWindow * frameWindow = static_cast<FrameWindow*>(winMgr.createWindow("TaharezLook/FrameWindow", "FrameWindow1"));<br />
sheet->addChildWindow(frameWindow)<br />
frameWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
frameWindow->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
frameWindow->setText("Our window");<br />
<br />
frameWindow->subscribeEvent(FrameWindow::EventCloseClicked, Event::Subscriber(&EventGalore::onCloseClicked, this));<br />
frameWindow->subscribeEvent(FrameWindow::EventRollupToggled, Event::Subscriber(&EventGalore::onRollupToggled, this));<br />
</code><br />
<code><cpp/><br />
bool onCloseClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Someone has clicked the upper right 'X'.<br />
<br />
// We don't HAVE to cast to FrameWindow, as the method we are going to use to close the window<br />
// is available in Window, but for the sake of clarity...<br />
CEGUI::FrameWindow * frameWindow = static_cast<CEGUI::FrameWindow*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("FrameWindow1"));<br />
frameWindow->destroy();<br />
// Note: Dont try to delete the pointer.<br />
return true;<br />
}<br />
<br />
bool onRollupToggled(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::FrameWindow * frameWindow = static_cast<CEGUI::FrameWindow*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("FrameWindow1"));<br />
<br />
if (frameWindow->isRolledup())<br />
{<br />
frameWindow->setText("Rolled up");<br />
}<br />
else<br />
{<br />
frameWindow->setText("Our window");<br />
}<br />
return true;<br />
}<br />
</code></div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2637Most important events2007-05-07T12:47:30Z<p>Levia: /* MultiLineEditbox */</p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code><br />
<br />
====Checkbox====<br />
<br />
A checkable item useful for boolean(true or false) 'questions'.<br />
<br />
* EventCheckStateChanged - Fired when the checkbox got checked or un-checked.<br />
* EventMouseEnters - Fired when the mouse hovers over the checkbox. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse moves out of the checkbox. Inherited from Window.<br />
<br />
<code><cpp/><br />
Checkbox * checkBox = static_cast<Checkbox*>(winMgr.createWindow("TaharezLook/Checkbox", "Checkbox1"));<br />
sheet->addChildWindow(checkBox);<br />
checkBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
checkBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
<br />
// A question where people can only answer yes or no (true or false)<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
<br />
checkBox->subscribeEvent(Checkbox::EventCheckStateChanged, Event::Subscriber(&EventGalore::onCheckStateChanged, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onCheckStateChanged(const CEGUI::EventArgs &e)<br />
{<br />
// Our item has been checked or unchecked, update our item accordingly.<br />
updateCheckbox();<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// The mouse has entered, update the checkbox accordingly.<br />
updateCheckbox(); <br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
// Reset<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
return true;<br />
}<br />
<br />
void updateCheckbox()<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
<br />
if (checkBox->isSelected())<br />
{<br />
// Our checkbox is selected, so someone has previously said 'yes'.<br />
checkBox->setText("Click to choose no!");<br />
}<br />
else<br />
{<br />
// Our item is not selected, so someone hasn't done anything yet, or it has been previously<br />
// unchecked.<br />
checkBox->setText("Click to choose yes!");<br />
}<br />
}<br />
</code><br />
This might confuse at first sight. Let me go through this here, in steps.<br />
* First, our checkbox is created and our mouse remains still.<br />
* Second, the mouse enters the checkbox, updateCheckbox is called. In this case, our checkbox isn't selected by default, so the text becomes 'Click to choose yes!'.<br />
* Third, we click. The onCheckStateChanged function is called, and that function calls updateCheckbox again to instantly change the text again. We have clicked the checkbox, while it wasn't previously checked, this means its checked now. Text becomes 'Click to choose no!'.<br />
* Fourth, we move our mouse away from the checkbox. The onMouseLeaves function is called, where we reset the text to our question.<br />
<br />
====RadioButton====<br />
<br />
Similar to Checkbox, only it can be grouped, and once selected, it cannot be unselected (except when another button has been selected). Note, in this case, both functions are called when you click the unselected radiobutton. This is because one is unselected and one is selected.<br />
<br />
* EventSelectStateChanged - Fired when the radiobutton has been selected.<br />
<br />
<code><cpp/><br />
RadioButton * radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton1"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("Yes");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton1SelectChanged, this));<br />
// To make sure the event is fired.<br />
radioButton->setSelected(true);<br />
<br />
<br />
radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton2"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.2f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("No");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton2SelectChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onButton1SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::RadioButton * radioButton1 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton1"));<br />
<br />
if (radioButton1->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton1->setText("Ok then. Yes it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton1->setText("Yes");<br />
}<br />
return true;<br />
}<br />
<br />
bool onButton2SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
// We have chosen no.<br />
CEGUI::RadioButton * radioButton2 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton2"));<br />
<br />
if (radioButton2->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton2->setText("Ok then. No it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton2->setText("No");<br />
}<br />
return true;<br />
}<br />
</code><br />
<br />
====Editbox====<br />
<br />
A simple editable box where text can be entered.<br />
<br />
* EventTextAccepted - Fired when someone has pressed TAB or RETURN, or when someone has clicked another window.<br />
<br />
<code><cpp/><br />
Editbox * editBox = static_cast<Editbox*>(winMgr.createWindow("TaharezLook/Editbox", "Editbox1"));<br />
sheet->addChildWindow(editBox);<br />
<br />
editBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
editBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
editBox->setText("Edit me!");<br />
<br />
editBox->subscribeEvent(Editbox::EventTextAccepted, Event::Subscriber(&EventGalore::onTextAccepted, this));<br />
</code><br />
<code><cpp/><br />
bool onTextAccepted(const CEGUI::EventArgs &e)<br />
{<br />
// Our text has been accepted by either deactivating it or pressing tab or enter.<br />
CEGUI::Editbox * editBox = static_cast<CEGUI::Editbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Editbox1"));<br />
// So we got the text here, do something with it. Lets just..put the text back in reverse order.<br />
CEGUI::String currentText = editBox->getText();<br />
<br />
std::string finalString;<br />
<br />
CEGUI::String::reverse_iterator ppkNode = currentText.rbegin();<br />
CEGUI::String::reverse_iterator ppkEnd = currentText.rend();<br />
<br />
for (; ppkNode != ppkEnd; ++ppkNode)<br />
{<br />
finalString.push_back((*ppkNode));<br />
}<br />
editBox->setText(finalString);<br />
return true;<br />
}<br />
</code><br />
<br />
====MultiLineEditbox====<br />
<br />
This widget is pretty much the same as editbox, but allows more lines.<br />
<br />
* EventTextChanged - Fired when text has been changed. Inherited from window.<br />
<br />
This widget doesn't have the event TextAccepted, so you'll need to 'apply' the input by a button for example.<br />
<br />
<code><cpp/><br />
MultiLineEditbox * multiLineEditbox = static_cast<MultiLineEditbox*>(winMgr.createWindow("TaharezLook/MultiLineEditbox", "MultiEditbox1"));<br />
sheet->addChildWindow(multiLineEditbox);<br />
multiLineEditbox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
multiLineEditbox->setSize(UVector2(cegui_reldim(0.3f), cegui_reldim(0.3f)));<br />
multiLineEditbox->setText("Now edit me!");<br />
<br />
multiLineEditbox->subscribeEvent(MultiLineEditbox::EventTextChanged, Event::Subscriber(&EventGalore::onTextChanged, this));<br />
<br />
// This text is going to show the result.<br />
Window * textWindow = winMgr.createWindow("TaharezLook/StaticText", "StaticText1");<br />
sheet->addChildWindow(textWindow);<br />
textWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.5f)));<br />
textWindow->setSize(UVector2(cegui_reldim(0.6f), cegui_reldim(0.1f)));<br />
textWindow->setText("Now edit me!");<br />
</code><br />
<code><cpp/><br />
bool onTextChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::WindowManager * winMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::MultiLineEditbox * multiLineEditbox = static_cast<CEGUI::MultiLineEditbox*>(winMgr->getWindow("MultiEditbox1"));<br />
CEGUI::Window * textWindow = winMgr->getWindow("StaticText1");<br />
<br />
textWindow->setText(multiLineEditbox->getText());<br />
return true;<br />
}<br />
</code><br />
Notice what happens when you enter text on another line though :)</div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2636Most important events2007-05-07T12:45:59Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code><br />
<br />
====Checkbox====<br />
<br />
A checkable item useful for boolean(true or false) 'questions'.<br />
<br />
* EventCheckStateChanged - Fired when the checkbox got checked or un-checked.<br />
* EventMouseEnters - Fired when the mouse hovers over the checkbox. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse moves out of the checkbox. Inherited from Window.<br />
<br />
<code><cpp/><br />
Checkbox * checkBox = static_cast<Checkbox*>(winMgr.createWindow("TaharezLook/Checkbox", "Checkbox1"));<br />
sheet->addChildWindow(checkBox);<br />
checkBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
checkBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
<br />
// A question where people can only answer yes or no (true or false)<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
<br />
checkBox->subscribeEvent(Checkbox::EventCheckStateChanged, Event::Subscriber(&EventGalore::onCheckStateChanged, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onCheckStateChanged(const CEGUI::EventArgs &e)<br />
{<br />
// Our item has been checked or unchecked, update our item accordingly.<br />
updateCheckbox();<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// The mouse has entered, update the checkbox accordingly.<br />
updateCheckbox(); <br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
// Reset<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
return true;<br />
}<br />
<br />
void updateCheckbox()<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
<br />
if (checkBox->isSelected())<br />
{<br />
// Our checkbox is selected, so someone has previously said 'yes'.<br />
checkBox->setText("Click to choose no!");<br />
}<br />
else<br />
{<br />
// Our item is not selected, so someone hasn't done anything yet, or it has been previously<br />
// unchecked.<br />
checkBox->setText("Click to choose yes!");<br />
}<br />
}<br />
</code><br />
This might confuse at first sight. Let me go through this here, in steps.<br />
* First, our checkbox is created and our mouse remains still.<br />
* Second, the mouse enters the checkbox, updateCheckbox is called. In this case, our checkbox isn't selected by default, so the text becomes 'Click to choose yes!'.<br />
* Third, we click. The onCheckStateChanged function is called, and that function calls updateCheckbox again to instantly change the text again. We have clicked the checkbox, while it wasn't previously checked, this means its checked now. Text becomes 'Click to choose no!'.<br />
* Fourth, we move our mouse away from the checkbox. The onMouseLeaves function is called, where we reset the text to our question.<br />
<br />
====RadioButton====<br />
<br />
Similar to Checkbox, only it can be grouped, and once selected, it cannot be unselected (except when another button has been selected). Note, in this case, both functions are called when you click the unselected radiobutton. This is because one is unselected and one is selected.<br />
<br />
* EventSelectStateChanged - Fired when the radiobutton has been selected.<br />
<br />
<code><cpp/><br />
RadioButton * radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton1"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("Yes");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton1SelectChanged, this));<br />
// To make sure the event is fired.<br />
radioButton->setSelected(true);<br />
<br />
<br />
radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton2"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.2f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("No");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton2SelectChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onButton1SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::RadioButton * radioButton1 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton1"));<br />
<br />
if (radioButton1->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton1->setText("Ok then. Yes it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton1->setText("Yes");<br />
}<br />
return true;<br />
}<br />
<br />
bool onButton2SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
// We have chosen no.<br />
CEGUI::RadioButton * radioButton2 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton2"));<br />
<br />
if (radioButton2->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton2->setText("Ok then. No it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton2->setText("No");<br />
}<br />
return true;<br />
}<br />
</code><br />
<br />
====Editbox====<br />
<br />
A simple editable box where text can be entered.<br />
<br />
* EventTextAccepted - Fired when someone has pressed TAB or RETURN, or when someone has clicked another window.<br />
<br />
<code><cpp/><br />
Editbox * editBox = static_cast<Editbox*>(winMgr.createWindow("TaharezLook/Editbox", "Editbox1"));<br />
sheet->addChildWindow(editBox);<br />
<br />
editBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
editBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
editBox->setText("Edit me!");<br />
<br />
editBox->subscribeEvent(Editbox::EventTextAccepted, Event::Subscriber(&EventGalore::onTextAccepted, this));<br />
</code><br />
<code><cpp/><br />
bool onTextAccepted(const CEGUI::EventArgs &e)<br />
{<br />
// Our text has been accepted by either deactivating it or pressing tab or enter.<br />
CEGUI::Editbox * editBox = static_cast<CEGUI::Editbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Editbox1"));<br />
// So we got the text here, do something with it. Lets just..put the text back in reverse order.<br />
CEGUI::String currentText = editBox->getText();<br />
<br />
std::string finalString;<br />
<br />
CEGUI::String::reverse_iterator ppkNode = currentText.rbegin();<br />
CEGUI::String::reverse_iterator ppkEnd = currentText.rend();<br />
<br />
for (; ppkNode != ppkEnd; ++ppkNode)<br />
{<br />
finalString.push_back((*ppkNode));<br />
}<br />
editBox->setText(finalString);<br />
return true;<br />
}<br />
</code><br />
<br />
====MultiLineEditbox====<br />
<br />
This widget is pretty much the same as editbox, but allows more lines.<br />
<br />
* EventTextChanged - Fired when text has been changed. Inherited from window.<br />
<br />
This widget doesn't have the even TextAccepted, so you'll need to 'apply' the input by a button for example.<br />
<br />
<code><cpp/><br />
MultiLineEditbox * multiLineEditbox = static_cast<MultiLineEditbox*>(winMgr.createWindow("TaharezLook/MultiLineEditbox", "MultiEditbox1"));<br />
sheet->addChildWindow(multiLineEditbox);<br />
multiLineEditbox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
multiLineEditbox->setSize(UVector2(cegui_reldim(0.3f), cegui_reldim(0.3f)));<br />
multiLineEditbox->setText("Now edit me!");<br />
<br />
multiLineEditbox->subscribeEvent(MultiLineEditbox::EventTextChanged, Event::Subscriber(&EventGalore::onTextChanged, this));<br />
<br />
// This text is going to show the result.<br />
Window * textWindow = winMgr.createWindow("TaharezLook/StaticText", "StaticText1");<br />
sheet->addChildWindow(textWindow);<br />
textWindow->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.5f)));<br />
textWindow->setSize(UVector2(cegui_reldim(0.6f), cegui_reldim(0.1f)));<br />
textWindow->setText("Now edit me!");<br />
</code><br />
<code><cpp/><br />
bool onTextChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::WindowManager * winMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::MultiLineEditbox * multiLineEditbox = static_cast<CEGUI::MultiLineEditbox*>(winMgr->getWindow("MultiEditbox1"));<br />
CEGUI::Window * textWindow = winMgr->getWindow("StaticText1");<br />
<br />
textWindow->setText(multiLineEditbox->getText());<br />
return true;<br />
}<br />
</code><br />
Notice what happens when you enter text on another line though :)</div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2632Most important events2007-05-06T11:11:08Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code><br />
<br />
====Checkbox====<br />
<br />
A checkable item useful for boolean(true or false) 'questions'.<br />
<br />
* EventCheckStateChanged - Fired when the checkbox got checked or un-checked.<br />
* EventMouseEnters - Fired when the mouse hovers over the checkbox. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse moves out of the checkbox. Inherited from Window.<br />
<br />
<code><cpp/><br />
Checkbox * checkBox = static_cast<Checkbox*>(winMgr.createWindow("TaharezLook/Checkbox", "Checkbox1"));<br />
sheet->addChildWindow(checkBox);<br />
checkBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
checkBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
<br />
// A question where people can only answer yes or no (true or false)<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
<br />
checkBox->subscribeEvent(Checkbox::EventCheckStateChanged, Event::Subscriber(&EventGalore::onCheckStateChanged, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onCheckStateChanged(const CEGUI::EventArgs &e)<br />
{<br />
// Our item has been checked or unchecked, update our item accordingly.<br />
updateCheckbox();<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// The mouse has entered, update the checkbox accordingly.<br />
updateCheckbox(); <br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
// Reset<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
return true;<br />
}<br />
<br />
void updateCheckbox()<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
<br />
if (checkBox->isSelected())<br />
{<br />
// Our checkbox is selected, so someone has previously said 'yes'.<br />
checkBox->setText("Click to choose no!");<br />
}<br />
else<br />
{<br />
// Our item is not selected, so someone hasn't done anything yet, or it has been previously<br />
// unchecked.<br />
checkBox->setText("Click to choose yes!");<br />
}<br />
}<br />
</code><br />
This might confuse at first sight. Let me go through this here, in steps.<br />
* First, our checkbox is created and our mouse remains still.<br />
* Second, the mouse enters the checkbox, updateCheckbox is called. In this case, our checkbox isn't selected by default, so the text becomes 'Click to choose yes!'.<br />
* Third, we click. The onCheckStateChanged function is called, and that function calls updateCheckbox again to instantly change the text again. We have clicked the checkbox, while it wasn't previously checked, this means its checked now. Text becomes 'Click to choose no!'.<br />
* Fourth, we move our mouse away from the checkbox. The onMouseLeaves function is called, where we reset the text to our question.<br />
<br />
====RadioButton====<br />
<br />
Similar to Checkbox, only it can be grouped, and once selected, it cannot be unselected (except when another button has been selected). Note, in this case, both functions are called when you click the unselected radiobutton. This is because one is unselected and one is selected.<br />
<br />
* EventSelectStateChanged - Fired when the radiobutton has been selected.<br />
<br />
<code><cpp/><br />
RadioButton * radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton1"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("Yes");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton1SelectChanged, this));<br />
// To make sure the event is fired.<br />
radioButton->setSelected(true);<br />
<br />
<br />
radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton2"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.2f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("No");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton2SelectChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onButton1SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::RadioButton * radioButton1 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton1"));<br />
<br />
if (radioButton1->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton1->setText("Ok then. Yes it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton1->setText("Yes");<br />
}<br />
return true;<br />
}<br />
<br />
bool onButton2SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
// We have chosen no.<br />
CEGUI::RadioButton * radioButton2 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton2"));<br />
<br />
if (radioButton2->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton2->setText("Ok then. No it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton2->setText("No");<br />
}<br />
return true;<br />
}<br />
</code><br />
<br />
====Editbox====<br />
<br />
A simple editable box where text can be entered.<br />
<br />
* EventTextAccepted - Fired when someone has pressed TAB or RETURN, or when someone has clicked another window.<br />
<br />
<code><cpp/><br />
Editbox * editBox = static_cast<Editbox*>(winMgr.createWindow("TaharezLook/Editbox", "Editbox1"));<br />
sheet->addChildWindow(editBox);<br />
<br />
editBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
editBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
editBox->setText("Edit me!");<br />
<br />
editBox->subscribeEvent(Editbox::EventTextAccepted, Event::Subscriber(&EventGalore::onTextAccepted, this));<br />
</code><br />
<code><cpp/><br />
bool onTextAccepted(const CEGUI::EventArgs &e)<br />
{<br />
// Our text has been accepted by either deactivating it or pressing tab or enter.<br />
CEGUI::Editbox * editBox = static_cast<CEGUI::Editbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Editbox1"));<br />
// So we got the text here, do something with it. Lets just..put the text back in reverse order.<br />
CEGUI::String currentText = editBox->getText();<br />
<br />
std::string finalString;<br />
<br />
CEGUI::String::reverse_iterator ppkNode = currentText.rbegin();<br />
CEGUI::String::reverse_iterator ppkEnd = currentText.rend();<br />
<br />
for (; ppkNode != ppkEnd; ++ppkNode)<br />
{<br />
finalString.push_back((*ppkNode));<br />
}<br />
editBox->setText(finalString);<br />
return true;<br />
}<br />
</code></div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2631Most important events2007-05-05T20:57:57Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code><br />
<br />
====Checkbox====<br />
<br />
A checkable item useful for boolean(true or false) 'questions'.<br />
<br />
* EventCheckStateChanged - Fired when the checkbox got checked or un-checked.<br />
* EventMouseEnters - Fired when the mouse hovers over the checkbox. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse moves out of the checkbox. Inherited from Window.<br />
<br />
<code><cpp/><br />
Checkbox * checkBox = static_cast<Checkbox*>(winMgr.createWindow("TaharezLook/Checkbox", "Checkbox1"));<br />
sheet->addChildWindow(checkBox);<br />
checkBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
checkBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
<br />
// A question where people can only answer yes or no (true or false)<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
<br />
checkBox->subscribeEvent(Checkbox::EventCheckStateChanged, Event::Subscriber(&EventGalore::onCheckStateChanged, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onCheckStateChanged(const CEGUI::EventArgs &e)<br />
{<br />
// Our item has been checked or unchecked, update our item accordingly.<br />
updateCheckbox();<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// The mouse has entered, update the checkbox accordingly.<br />
updateCheckbox(); <br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
// Reset<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
return true;<br />
}<br />
<br />
void updateCheckbox()<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
<br />
if (checkBox->isSelected())<br />
{<br />
// Our checkbox is selected, so someone has previously said 'yes'.<br />
checkBox->setText("Click to choose no!");<br />
}<br />
else<br />
{<br />
// Our item is not selected, so someone hasn't done anything yet, or it has been previously<br />
// unchecked.<br />
checkBox->setText("Click to choose yes!");<br />
}<br />
}<br />
</code><br />
This might confuse at first sight. Let me go through this here, in steps.<br />
* First, our checkbox is created and our mouse remains still.<br />
* Second, the mouse enters the checkbox, updateCheckbox is called. In this case, our checkbox isn't selected by default, so the text becomes 'Click to choose yes!'.<br />
* Third, we click. The onCheckStateChanged function is called, and that function calls updateCheckbox again to instantly change the text again. We have clicked the checkbox, while it wasn't previously checked, this means its checked now. Text becomes 'Click to choose no!'.<br />
* Fourth, we move our mouse away from the checkbox. The onMouseLeaves function is called, where we reset the text to our question.<br />
<br />
====RadioButton====<br />
<br />
Similar to Checkbox, only it can be grouped, and once selected, it cannot be unselected (except when another button has been selected). Note, in this case, both functions are called when you click the unselected radiobutton. This is because one is unselected and one is selected.<br />
<br />
* EventSelectStateChanged - Fired when the radiobutton has been selected.<br />
<br />
<code><cpp/><br />
RadioButton * radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton1"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("Yes");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton1SelectChanged, this));<br />
// To make sure the event is fired.<br />
radioButton->setSelected(true);<br />
<br />
<br />
radioButton = static_cast<RadioButton*>(winMgr.createWindow("TaharezLook/RadioButton", "RadioButton2"));<br />
sheet->addChildWindow(radioButton);<br />
<br />
radioButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.2f)));<br />
radioButton->setSize(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
radioButton->setText("No");<br />
radioButton->setGroupID(0);<br />
<br />
radioButton->subscribeEvent(RadioButton::EventSelectStateChanged, Event::Subscriber(&EventGalore::onButton2SelectChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onButton1SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::RadioButton * radioButton1 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton1"));<br />
<br />
if (radioButton1->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton1->setText("Ok then. Yes it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton1->setText("Yes");<br />
}<br />
return true;<br />
}<br />
<br />
bool onButton2SelectChanged(const CEGUI::EventArgs &e)<br />
{<br />
// We have chosen no.<br />
CEGUI::RadioButton * radioButton2 = static_cast<CEGUI::RadioButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("RadioButton2"));<br />
<br />
if (radioButton2->isSelected())<br />
{<br />
// This one just got selected.<br />
radioButton2->setText("Ok then. No it is.");<br />
}<br />
else<br />
{<br />
// This one got unselected. Reset it.<br />
radioButton2->setText("No");<br />
}<br />
return true;<br />
}<br />
</code></div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2630Most important events2007-05-05T16:08:33Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code><br />
<br />
====Checkbox====<br />
<br />
A checkable item useful for boolean(true or false) 'questions'.<br />
<br />
* EventCheckStateChanged - Fired when the checkbox got checked or un-checked.<br />
* EventMouseEnters - Fired when the mouse hovers over the checkbox. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse moves out of the checkbox. Inherited from Window.<br />
<br />
<code><cpp/><br />
Checkbox * checkBox = static_cast<Checkbox*>(winMgr.createWindow("TaharezLook/Checkbox", "Checkbox1"));<br />
sheet->addChildWindow(checkBox);<br />
checkBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
checkBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.1f)));<br />
<br />
// A question where people can only answer yes or no (true or false)<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
<br />
checkBox->subscribeEvent(Checkbox::EventCheckStateChanged, Event::Subscriber(&EventGalore::onCheckStateChanged, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
checkBox->subscribeEvent(Checkbox::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onCheckStateChanged(const CEGUI::EventArgs &e)<br />
{<br />
// Our item has been checked or unchecked, update our item accordingly.<br />
updateCheckbox();<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// The mouse has entered, update the checkbox accordingly.<br />
updateCheckbox(); <br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
// Reset<br />
checkBox->setText("Hey! Do you want to be rich?");<br />
return true;<br />
}<br />
<br />
void updateCheckbox()<br />
{<br />
CEGUI::Checkbox * checkBox = static_cast<CEGUI::Checkbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Checkbox1"));<br />
<br />
if (checkBox->isSelected())<br />
{<br />
// Our checkbox is selected, so someone has previously said 'yes'.<br />
checkBox->setText("Click to choose no!");<br />
}<br />
else<br />
{<br />
// Our item is not selected, so someone hasn't done anything yet, or it has been previously<br />
// unchecked.<br />
checkBox->setText("Click to choose yes!");<br />
}<br />
}<br />
</code><br />
This might confuse at first sight. Let me go through this here, in steps.<br />
* First, our checkbox is created and our mouse remains still.<br />
* Second, the mouse enters the checkbox, updateCheckbox is called. In this case, our checkbox isn't selected by default, so the text becomes 'Click to choose yes!'.<br />
* Third, we click. The onCheckStateChanged function is called, and that function calls updateCheckbox again to instantly change the text again. We have clicked the checkbox, while it wasn't previously checked, this means its checked now. Text becomes 'Click to choose no!'.<br />
* Fourth, we move our mouse away from the checkbox. The onMouseLeaves function is called, where we reset the text to our question.</div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2629Most important events2007-05-05T15:48:48Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
</code><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code></div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2628Most important events2007-05-05T15:48:21Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, where a few are introduced by other widgets, and where many are unimportant. If a event is taken from this Window class, it is mentioned.<br />
<br />
* EventDragDropItemEnters - Fired when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Fired when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Fired when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Fired when the button has been clicked.<br />
* EventMouseEnters - Fired when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Fired when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pushButton = static_cast<PushButton*>(winMgr.createWindow("TaharezLook/Button", "Button1"));<br />
sheet->addChildWindow(pb);<br />
pushButton->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pushButton->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pushButton->setText("Hey! Come here!");<br />
<br />
pushButton->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pushButton->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
pushButton->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pushButton = static_cast<CEGUI::PushButton*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1"));<br />
// Back to its original state!<br />
pushButton->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code><br />
<br />
====Listbox====<br />
<br />
The listbox is a very usefull listing widget. Only has one important event.<br />
<br />
* EventSelectionChanged - Fired when a or another item has been selected.<br />
<br />
<code><cpp/><br />
Listbox * listBox = static_cast<Listbox*>(winMgr.createWindow("TaharezLook/Listbox", "Listbox1"));<br />
sheet->addChildWindow(listBox);<br />
<br />
listBox->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
listBox->setSize(UVector2(cegui_reldim(0.4f), cegui_reldim(0.4f)));<br />
<br />
ListboxTextItem * listBoxItem = new ListboxTextItem("Our very first item.", 1);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBoxItem = new ListboxTextItem("Our second item.", 2);<br />
listBoxItem->setSelectionBrushImage("TaharezLook", "MultiListSelectionBrush");<br />
listBox->addItem(listBoxItem);<br />
<br />
listBox->subscribeEvent(Listbox::EventSelectionChanged, Event::Subscriber(&EventGalore::onSelectionChanged, this));<br />
<code><cpp/><br />
<code><cpp/><br />
bool onSelectionChanged(const CEGUI::EventArgs &e)<br />
{<br />
// The selection has changed.<br />
CEGUI::Listbox * listBox = static_cast<CEGUI::Listbox*>(CEGUI::WindowManager::getSingletonPtr()->getWindow("Listbox1"));<br />
// Get the item we selected<br />
CEGUI::ListboxItem * selectedItem = listBox->getFirstSelectedItem();<br />
selectedItem->setText("Oh we got selected!");<br />
<br />
return true;<br />
}<br />
</code></div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2627Most important events2007-05-05T11:59:11Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
try<br />
{<br />
using namespace CEGUI;<br />
<br />
WindowManager& winMgr = WindowManager::getSingleton();<br />
<br />
// Load the TaharezLook scheme and set up the default mouse cursor and font<br />
SchemeManager::getSingleton().loadScheme("TaharezLook.scheme");<br />
System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");<br />
FontManager::getSingleton().createFont("Commonwealth-10.font");<br />
<br />
// Set the GUI Sheet<br />
Window* sheet = winMgr.createWindow("DefaultWindow", "root_wnd");<br />
System::getSingleton().setGUISheet(sheet);<br />
<br />
// Place here the code from the widgets, place functions below this function.<br />
<br />
}<br />
catch(CEGUI::Exception &e)<br />
{<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
MessageBox(NULL, e.getMessage().c_str(), "Error initializing the demo", MB_OK | MB_ICONERROR | MB_TASKMODAL);<br />
#else<br />
std::cerr << "Error initializing the demo:" << e.getMessage().c_str() << "\n";<br />
#endif<br />
}<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, but we are only going to handle a few.<br />
<br />
* EventDragDropItemEnters - Called when a drag and drop item floats over the window.<br />
* EventDragDropItemLeaves - Called when a drag and drop item floats out of the window.<br />
* EventDragDropItemDropped - Called when the item has been dropped on the window.<br />
<br />
====PushButton====<br />
<br />
The button is a simple, expected widget. It contains only one important event, but we are going to add a few more.<br />
<br />
* EventClicked - Called when the button has been clicked.<br />
* EventMouseEnters - Called when the mouse enters the widget. Inherited from Window.<br />
* EventMouseLeaves - Called when the mouse leaves the widget. Inherited from Window.<br />
<br />
<code><cpp/><br />
PushButton * pb = (PushButton*)winMgr.createWindow("TaharezLook/Button", "Button1");<br />
sheet->addChildWindow(pb);<br />
pb->setPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.1f)));<br />
pb->setSize(UVector2(cegui_reldim(0.2f), cegui_reldim(0.08f)));<br />
pb->setText("Hey! Come here!");<br />
<br />
pb->subscribeEvent(PushButton::EventClicked, Event::Subscriber(&EventGalore::onPushButtonClicked, this));<br />
pb->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&EventGalore::onMouseEnters, this));<br />
pb->subscribeEvent(PushButton::EventMouseLeaves, Event::Subscriber(&EventGalore::onMouseLeaves, this));<br />
</code><br />
<code><cpp/><br />
bool onPushButtonClicked(const CEGUI::EventArgs &e)<br />
{<br />
// Our button has been clicked!<br />
CEGUI::PushButton * pb = (CEGUI::PushButton*)CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1");<br />
pb->setText("We got clicked!");<br />
return true;<br />
}<br />
<br />
bool onMouseEnters(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has entered the button. (Hover)<br />
CEGUI::PushButton * pb = (CEGUI::PushButton*)CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1");<br />
pb->setText("Now click!");<br />
return true;<br />
}<br />
<br />
bool onMouseLeaves(const CEGUI::EventArgs &e)<br />
{<br />
// Mouse has left the button.<br />
CEGUI::PushButton * pb = (CEGUI::PushButton*)CEGUI::WindowManager::getSingletonPtr()->getWindow("Button1");<br />
// Back to its original state!<br />
pb->setText("Hey! Come here!");<br />
return true;<br />
}<br />
</code></div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2626Most important events2007-05-05T11:24:38Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
using namespace CEGUI;<br />
<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, but we are only going to handle a few.<br />
<br />
* EventTextChanged Called whenever the text of the window has changed.<br />
*</div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2625Most important events2007-05-05T11:24:22Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
using namespace CEGUI;<br />
<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====<br />
<br />
The Window widget is a important baseclass, all widgets inherit this class. It has lots 'n lots of events, but we are only going to handle a few.<br />
<br />
- EventTextChanged Called whenever the text of the window has changed.<br />
-</div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2623Most important events2007-05-05T11:07:27Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
using namespace CEGUI;<br />
<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code><br />
<br />
===Widgets===<br />
<br />
====Window====</div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2622Most important events2007-05-05T11:06:18Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
I'm only going to change the initialiseSample function for each widget + adding some others.<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
using namespace CEGUI;<br />
<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code></div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2621Most important events2007-05-05T10:57:31Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
<br />
====EventGalore.h====<br />
<code><cpp/><br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
using namespace CEGUI;<br />
<br />
return true;<br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _EventGalore_h_<br />
</code><br />
<br />
====main.cpp====<br />
<code><cpp/><br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
#define WIN32_LEAN_AND_MEAN<br />
#define NOMINMAX<br />
#include "windows.h"<br />
#endif<br />
<br />
#include "EventGalore.h"<br />
<br />
<br />
#if defined( __WIN32__ ) || defined( _WIN32 )<br />
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine,int nCmdShow)<br />
#else<br />
int main(int argc, char *argv[])<br />
#endif<br />
{<br />
EventGalore app;<br />
return app.run();<br />
}<br />
</code></div>Leviahttp://cegui.org/wiki/index.php?title=Most_important_events&diff=2620Most important events2007-05-05T10:52:43Z<p>Levia: </p>
<hr />
<div>This article is going to show you the most important and usefull events of each widget.<br />
<br />
===Getting started===<br />
<br />
==EventGalore.h==<br />
#ifndef _EventGalore_h_<br />
#define _EventGalore_h_<br />
<br><br />
#include "CEGuiSample.h"<br />
#include "CEGUI.h"<br />
<br><br />
class EventGalore : public CEGuiSample<br />
{<br />
public:<br />
bool initialiseSample()<br />
{<br />
<b> using namespace CEGUI;<br />
<br><br />
return true;</b><br />
}<br />
void cleanupSample(void)<br />
{<br />
}<br />
};<br />
#endif // _WidgetGalore_h_</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2566Create a CheckListboxItem2007-04-10T11:07:50Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. We need to do a few things to call this one finished. First, we need to create the CheckListboxItem class. Then we are going to add the window factory to the system. Last but not least is adding the Falagard mapping. We'll start with the CheckListboxItem class.<br />
<br />
#ifndef _CHECKLISTITEM_<br />
#define _CHECKLISTITEM_<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include <CEGUI.h><br />
<br><br />
namespace CEGUI<br />
{<br />
class CheckListboxItem : public ItemEntry<br />
{<br />
protected:<br />
public:<br />
CheckListboxItem(const String &type, const String &name, const String& text = "test");<br />
virtual ~CheckListboxItem();<br />
static const String WidgetTypeName;<br />
};<br />
CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)<br />
}<br />
#endif<br />
<br />
As you can see, this class inherits ItemEntry. This is necessary as its THE thing that makes this item working properly. Pay special attention to <b>CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)</b>. This tells CEGUI that we are declarating the window.<br />
<br />
#include "CheckListItem.h"<br />
<br><br />
namespace CEGUI<br />
{<br />
CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem)<br />
const String CheckListboxItem::WidgetTypeName("CEGUI/CheckListboxItem");<br />
CheckListboxItem::CheckListboxItem(const String &type, const String &name, const String& text) :<br />
ItemEntry(type, name),<br />
d_itemText(text)<br />
{<br />
}<br />
CheckListboxItem::~CheckListboxItem()<br />
{<br />
}<br />
}<br />
<br />
<b>CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem)</b> is quite important here. It tells CEGUI where we are placing the code that comes with the window. As you can see this class is quite empty, you are, of course, free to add anything you like to this class - these are just the mere basics.<br />
<br />
Now, there is one more important thing to do. Register this window properly in CEGUI.<br />
<br />
namespace CEGUI<br />
{<br />
void bindCEGUI()<br />
{<br />
CEGUI::WindowFactoryManager& wfMgr = CEGUI::WindowFactoryManager::getSingleton();<br />
wfMgr.addFactory(&CEGUI_WINDOW_FACTORY(CheckListboxItem));<br />
wfMgr.addFalagardWindowMapping("WindowsLook/CheckListboxItem", "CEGUI/ItemEntry", "WindowsLook/CheckListboxItem", "Falagard/ItemEntry");<br />
}<br />
}<br />
<br />
addFalagardWindowMappings parameters are as follows: Name, Type, LooknFeel, WindowRenderer. Just put this code somewhere in your main file or on another place that you are sure is executed before using our new item. Also note, in order to use <b>CEGUI_WINDOW_FACTORY()</b> you need to be in the CEGUI namespace.<br />
<br />
'''Example'''<br />
<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include "SDLLoader.h"<br />
#include "CheckListItem.h"<br />
void doStuff();<br />
<br><br />
namespace CEGUI<br />
{<br />
void bindCEGUI()<br />
{<br />
CEGUI::WindowFactoryManager& wfMgr = CEGUI::WindowFactoryManager::getSingleton();<br />
wfMgr.addFactory(&CEGUI_WINDOW_FACTORY(CheckListboxItem));<br />
wfMgr.addFalagardWindowMapping("WindowsLook/CheckListboxItem", "CEGUI/ItemEntry", "WindowsLook/CheckListboxItem", "Falagard/ItemEntry");<br />
}<br />
}<br />
int main (int argc, char **argv) <br />
{<br />
SDLLoader sdl;<br />
sdl.init();<br />
CEGUI::bindCEGUI();<br />
doStuff();<br />
sdl.main_loop();<br />
return 0;<br />
}<br />
<br><br />
void doStuff()<br />
{<br />
CEGUI::System * m_System = CEGUI::System::getSingletonPtr();<br />
CEGUI::Logger::getSingletonPtr()->setLoggingLevel(CEGUI::Insane);<br />
CEGUI::WindowManager * m_WndMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::Window * m_Root = m_System->getGUISheet();<br />
<br><br />
CEGUI::ItemListbox * lb = (CEGUI::ItemListbox*)m_WndMgr->createWindow("WindowsLook/ItemListbox", "Lol");<br />
lb->setSize(CEGUI::UVector2(CEGUI::UDim(0.3f, 0.0f), CEGUI::UDim(0.3f, 0.0f)));<br />
lb->setPosition(CEGUI::UVector2(CEGUI::UDim(0.1f, 0.0f), CEGUI::UDim(0.1f, 0.0f)));<br />
m_Root->addChildWindow(lb);<br />
<br><br />
CEGUI::CheckListboxItem * check = (CEGUI::CheckListboxItem*)m_WndMgr->createWindow("WindowsLook/CheckListboxItem", "Test");<br />
check->setText("Test");<br />
lb->addChildWindow(check);<br />
}<br />
<br />
As you can see in the main function, the function that registers the window is called before actually creating it. Dont pay any attention to the sdl initiation - it's just my personal test environment.<br />
<br />
Congratulations! You have just created a CheckListboxItem. This was a very good practice because you also learned the technique required to write a completely new widget.<br />
<br />
Please contact me if you have any question, comments, feedback - anything, email me at [mailto:levia@openfrag.org levia at openfrag dot com].<br />
<br />
<br />
<br />
<br />
<br />
--[[User:Levia|Levia]] 21:10, 5 April 2007 (GMT+1)</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2565Create a CheckListboxItem2007-04-10T11:00:26Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. We need to do a few things to call this one finished. First, we need to create the CheckListboxItem class. Then we are going to add the window factory to the system. Last but not least is adding the Falagard mapping. We'll start with the CheckListboxItem class.<br />
<br />
#ifndef _CHECKLISTITEM_<br />
#define _CHECKLISTITEM_<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include <CEGUI.h><br />
<br><br />
namespace CEGUI<br />
{<br />
class CheckListboxItem : public ItemEntry<br />
{<br />
protected:<br />
public:<br />
CheckListboxItem(const String &type, const String &name, const String& text = "test");<br />
virtual ~CheckListboxItem();<br />
static const String WidgetTypeName;<br />
};<br />
CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)<br />
}<br />
#endif<br />
<br />
As you can see, this class inherits ItemEntry. This is necessary as its THE thing that makes this item working properly. Pay special attention to <b>CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)</b>. This tells CEGUI that we are declarating the window.<br />
<br />
#include "CheckListItem.h"<br />
<br><br />
namespace CEGUI<br />
{<br />
CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem)<br />
const String CheckListboxItem::WidgetTypeName("CEGUI/CheckListboxItem");<br />
CheckListboxItem::CheckListboxItem(const String &type, const String &name, const String& text) :<br />
ItemEntry(type, name),<br />
d_itemText(text)<br />
{<br />
}<br />
CheckListboxItem::~CheckListboxItem()<br />
{<br />
}<br />
}<br />
<br />
CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem) is quite important here. It tells CEGUI where we are placing the code that comes with the window. As you can see this class is quite empty, you are, of course, free to add anything you like to this class - these are just the mere basics.<br />
<br />
Now, there is one more important thing to do. Register this window properly in CEGUI.<br />
<br />
namespace CEGUI<br />
{<br />
void bindCEGUI()<br />
{<br />
CEGUI::WindowFactoryManager& wfMgr = CEGUI::WindowFactoryManager::getSingleton();<br />
wfMgr.addFactory(&CEGUI_WINDOW_FACTORY(CheckListboxItem));<br />
wfMgr.addFalagardWindowMapping("WindowsLook/CheckListboxItem", "CEGUI/ItemEntry", "WindowsLook/CheckListboxItem", "Falagard/ItemEntry");<br />
}<br />
}<br />
<br />
addFalagardWindowMappings parameters are as follows: Name, Type, LooknFeel, WindowRenderer. Just put this code somewhere in your main file or on another place that you are sure is executed before using our new item.<br />
<br />
'''Example'''<br />
<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include "SDLLoader.h"<br />
#include "CheckListItem.h"<br />
void doStuff();<br />
<br><br />
namespace CEGUI<br />
{<br />
void bindCEGUI()<br />
{<br />
CEGUI::WindowFactoryManager& wfMgr = CEGUI::WindowFactoryManager::getSingleton();<br />
wfMgr.addFactory(&CEGUI_WINDOW_FACTORY(CheckListboxItem));<br />
wfMgr.addFalagardWindowMapping("WindowsLook/CheckListboxItem", "CEGUI/ItemEntry", "WindowsLook/CheckListboxItem", "Falagard/ItemEntry");<br />
}<br />
}<br />
int main (int argc, char **argv) <br />
{<br />
SDLLoader sdl;<br />
sdl.init();<br />
CEGUI::bindCEGUI();<br />
doStuff();<br />
sdl.main_loop();<br />
return 0;<br />
}<br />
<br><br />
void doStuff()<br />
{<br />
CEGUI::System * m_System = CEGUI::System::getSingletonPtr();<br />
CEGUI::Logger::getSingletonPtr()->setLoggingLevel(CEGUI::Insane);<br />
CEGUI::WindowManager * m_WndMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::Window * m_Root = m_System->getGUISheet();<br />
<br><br />
CEGUI::ItemListbox * lb = (CEGUI::ItemListbox*)m_WndMgr->createWindow("WindowsLook/ItemListbox", "Lol");<br />
lb->setSize(CEGUI::UVector2(CEGUI::UDim(0.3f, 0.0f), CEGUI::UDim(0.3f, 0.0f)));<br />
lb->setPosition(CEGUI::UVector2(CEGUI::UDim(0.1f, 0.0f), CEGUI::UDim(0.1f, 0.0f)));<br />
m_Root->addChildWindow(lb);<br />
CEGUI::CheckListboxItem * check = (CEGUI::CheckListboxItem*)m_WndMgr->createWindow("WindowsLook/CheckListboxItem", "Test");<br />
check->setText("Test");<br />
lb->addChildWindow(check);<br />
}<br />
<br />
<br />
<br />
<br />
<br />
--[[User:Levia|Levia]] 21:10, 5 April 2007 (GMT+1)</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2564Create a CheckListboxItem2007-04-10T10:59:27Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. We need to do a few things to call this one finished. First, we need to create the CheckListboxItem class. Then we are going to add the window factory to the system. Last but not least is adding the Falagard mapping. We'll start with the CheckListboxItem class.<br />
<br />
#ifndef _CHECKLISTITEM_<br />
#define _CHECKLISTITEM_<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include <CEGUI.h><br />
<br />
namespace CEGUI<br />
{<br />
class CheckListboxItem : public ItemEntry<br />
{<br />
protected:<br />
public:<br />
CheckListboxItem(const String &type, const String &name, const String& text = "test");<br />
virtual ~CheckListboxItem();<br />
static const String WidgetTypeName;<br />
};<br />
CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)<br />
}<br />
#endif<br />
<br />
As you can see, this class inherits ItemEntry. This is necessary as its THE thing that makes this item working properly. Pay special attention to <b>CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)</b>. This tells CEGUI that we are declarating the window.<br />
<br />
#include "CheckListItem.h"<br />
<br />
namespace CEGUI<br />
{<br />
CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem)<br />
const String CheckListboxItem::WidgetTypeName("CEGUI/CheckListboxItem");<br />
CheckListboxItem::CheckListboxItem(const String &type, const String &name, const String& text) :<br />
ItemEntry(type, name),<br />
d_itemText(text)<br />
{<br />
}<br />
CheckListboxItem::~CheckListboxItem()<br />
{<br />
}<br />
}<br />
<br />
CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem) is quite important here. It tells CEGUI where we are placing the code that comes with the window. As you can see this class is quite empty, you are, of course, free to add anything you like to this class - these are just the mere basics.<br />
<br />
Now, there is one more important thing to do. Register this window properly in CEGUI.<br />
<br />
namespace CEGUI<br />
{<br />
void bindCEGUI()<br />
{<br />
CEGUI::WindowFactoryManager& wfMgr = CEGUI::WindowFactoryManager::getSingleton();<br />
wfMgr.addFactory(&CEGUI_WINDOW_FACTORY(CheckListboxItem));<br />
wfMgr.addFalagardWindowMapping("WindowsLook/CheckListboxItem", "CEGUI/ItemEntry", "WindowsLook/CheckListboxItem", "Falagard/ItemEntry");<br />
}<br />
}<br />
<br />
addFalagardWindowMappings parameters are as follows: Name, Type, LooknFeel, WindowRenderer. Just put this code somewhere in your main file or on another place that you are sure is executed before using our new item.<br />
<br />
'''Example'''<br />
<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include "SDLLoader.h"<br />
#include "CheckListItem.h"<br />
void doStuff();<br />
<br />
namespace CEGUI<br />
{<br />
void bindCEGUI()<br />
{<br />
CEGUI::WindowFactoryManager& wfMgr = CEGUI::WindowFactoryManager::getSingleton();<br />
wfMgr.addFactory(&CEGUI_WINDOW_FACTORY(CheckListboxItem));<br />
wfMgr.addFalagardWindowMapping("WindowsLook/CheckListboxItem", "CEGUI/ItemEntry", "WindowsLook/CheckListboxItem", "Falagard/ItemEntry");<br />
}<br />
}<br />
int main (int argc, char **argv) <br />
{<br />
SDLLoader sdl;<br />
sdl.init();<br />
CEGUI::bindCEGUI();<br />
doStuff();<br />
sdl.main_loop();<br />
return 0;<br />
}<br />
<br />
void doStuff()<br />
{<br />
CEGUI::System * m_System = CEGUI::System::getSingletonPtr();<br />
CEGUI::Logger::getSingletonPtr()->setLoggingLevel(CEGUI::Insane);<br />
CEGUI::WindowManager * m_WndMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::Window * m_Root = m_System->getGUISheet();<br />
<br><br />
CEGUI::ItemListbox * lb = (CEGUI::ItemListbox*)m_WndMgr->createWindow("WindowsLook/ItemListbox", "Lol");<br />
lb->setSize(CEGUI::UVector2(CEGUI::UDim(0.3f, 0.0f), CEGUI::UDim(0.3f, 0.0f)));<br />
lb->setPosition(CEGUI::UVector2(CEGUI::UDim(0.1f, 0.0f), CEGUI::UDim(0.1f, 0.0f)));<br />
m_Root->addChildWindow(lb);<br />
CEGUI::CheckListboxItem * check = (CEGUI::CheckListboxItem*)m_WndMgr->createWindow("WindowsLook/CheckListboxItem", "Test");<br />
check->setText("Test");<br />
lb->addChildWindow(check);<br />
}<br />
<br />
<br />
<br />
<br />
<br />
--[[User:Levia|Levia]] 21:10, 5 April 2007 (GMT+1)</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2563Create a CheckListboxItem2007-04-10T10:58:27Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. We need to do a few things to call this one finished. First, we need to create the CheckListboxItem class. Then we are going to add the window factory to the system. Last but not least is adding the Falagard mapping. We'll start with the CheckListboxItem class.<br />
<br />
#ifndef _CHECKLISTITEM_<br />
#define _CHECKLISTITEM_<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include <CEGUI.h><br />
<br />
namespace CEGUI<br />
{<br />
class CheckListboxItem : public ItemEntry<br />
{<br />
protected:<br />
public:<br />
CheckListboxItem(const String &type, const String &name, const String& text = "test");<br />
virtual ~CheckListboxItem();<br />
static const String WidgetTypeName;<br />
};<br />
CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)<br />
}<br />
#endif<br />
<br />
As you can see, this class inherits ItemEntry. This is necessary as its THE thing that makes this item working properly. Pay special attention to <b>CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)</b>. This tells CEGUI that we are declarating the window.<br />
<br />
#include "CheckListItem.h"<br />
<br />
namespace CEGUI<br />
{<br />
CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem)<br />
const String CheckListboxItem::WidgetTypeName("CEGUI/CheckListboxItem");<br />
CheckListboxItem::CheckListboxItem(const String &type, const String &name, const String& text) :<br />
ItemEntry(type, name),<br />
d_itemText(text)<br />
{<br />
}<br />
CheckListboxItem::~CheckListboxItem()<br />
{<br />
}<br />
}<br />
<br />
CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem) is quite important here. It tells CEGUI where we are placing the code that comes with the window. As you can see this class is quite empty, you are, of course, free to add anything you like to this class - these are just the mere basics.<br />
<br />
Now, there is one more important thing to do. Register this window properly in CEGUI.<br />
<br />
namespace CEGUI<br />
{<br />
void bindCEGUI()<br />
{<br />
CEGUI::WindowFactoryManager& wfMgr = CEGUI::WindowFactoryManager::getSingleton();<br />
wfMgr.addFactory(&CEGUI_WINDOW_FACTORY(CheckListboxItem));<br />
wfMgr.addFalagardWindowMapping("WindowsLook/CheckListboxItem", "CEGUI/ItemEntry", "WindowsLook/CheckListboxItem", "Falagard/ItemEntry");<br />
}<br />
}<br />
<br />
addFalagardWindowMappings parameters are as follows: Name, Type, LooknFeel, WindowRenderer. Just put this code somewhere in your main file or on another place that you are sure is executed before using our new item.<br />
<br />
'''Example'''<br />
<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include "SDLLoader.h"<br />
#include "CheckListItem.h"<br />
void doStuff();<br />
<br />
namespace CEGUI<br />
{<br />
void bindCEGUI()<br />
{<br />
CEGUI::WindowFactoryManager& wfMgr = CEGUI::WindowFactoryManager::getSingleton();<br />
wfMgr.addFactory(&CEGUI_WINDOW_FACTORY(CheckListboxItem));<br />
<br />
wfMgr.addFalagardWindowMapping("WindowsLook/CheckListboxItem", "CEGUI/ItemEntry", "WindowsLook/CheckListboxItem", "Falagard/ItemEntry");<br />
}<br />
}<br />
int main (int argc, char **argv) <br />
{<br />
SDLLoader sdl;<br />
sdl.init();<br />
CEGUI::bindCEGUI();<br />
doStuff();<br />
sdl.main_loop();<br />
return 0;<br />
}<br />
<br />
void doStuff()<br />
{<br />
CEGUI::System * m_System = CEGUI::System::getSingletonPtr();<br />
CEGUI::Logger::getSingletonPtr()->setLoggingLevel(CEGUI::Insane);<br />
CEGUI::WindowManager * m_WndMgr = CEGUI::WindowManager::getSingletonPtr();<br />
CEGUI::Window * m_Root = m_System->getGUISheet();<br />
<br />
CEGUI::ItemListbox * lb = (CEGUI::ItemListbox*)m_WndMgr->createWindow("WindowsLook/ItemListbox", "Lol");<br />
lb->setSize(CEGUI::UVector2(CEGUI::UDim(0.3f, 0.0f), CEGUI::UDim(0.3f, 0.0f)));<br />
lb->setPosition(CEGUI::UVector2(CEGUI::UDim(0.1f, 0.0f), CEGUI::UDim(0.1f, 0.0f)));<br />
m_Root->addChildWindow(lb);<br />
CEGUI::CheckListboxItem * check = (CEGUI::CheckListboxItem*)m_WndMgr->createWindow("WindowsLook/CheckListboxItem", "Test");<br />
check->setText("Test");<br />
lb->addChildWindow(check);<br />
}<br />
<br />
<br />
<br />
<br />
<br />
--[[User:Levia|Levia]] 21:10, 5 April 2007 (GMT+1)</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2562Create a CheckListboxItem2007-04-10T10:51:28Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. We need to do a few things to call this one finished. First, we need to create the CheckListboxItem class. Then we are going to add the window factory to the system. Last but not least is adding the Falagard mapping. We'll start with the CheckListboxItem class.<br />
<br />
'''Definition'''<br />
<br />
#ifndef _CHECKLISTITEM_<br />
#define _CHECKLISTITEM_<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include <CEGUI.h><br />
<br />
namespace CEGUI<br />
{<br />
class CheckListboxItem : public ItemEntry<br />
{<br />
protected:<br />
public:<br />
CheckListboxItem(const String &type, const String &name, const String& text = "test");<br />
virtual ~CheckListboxItem();<br />
static const String WidgetTypeName;<br />
};<br />
CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)<br />
}<br />
#endif<br />
<br />
As you can see, this class inherits ItemEntry. This is necessary as its THE thing that makes this item working properly. Pay special attention to <b>CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)</b>. This tells CEGUI that we are declarating the window.<br />
<br />
#include "CheckListItem.h"<br />
<br />
namespace CEGUI<br />
{<br />
CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem)<br />
const String CheckListboxItem::WidgetTypeName("CEGUI/CheckListboxItem");<br />
CheckListboxItem::CheckListboxItem(const String &type, const String &name, const String& text) :<br />
ItemEntry(type, name),<br />
d_itemText(text)<br />
{<br />
}<br />
CheckListboxItem::~CheckListboxItem()<br />
{<br />
}<br />
}<br />
<br />
--[[User:Levia|Levia]] 21:10, 5 April 2007 (GMT+1)</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2561Create a CheckListboxItem2007-04-10T10:50:42Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. We need to do a few things to call this one finished. First, we need to create the CheckListboxItem class. Then we are going to add the window factory to the system. Last but not least is adding the Falagard mapping. We'll start with the CheckListboxItem class.<br />
<br />
'''Definition'''<br />
<br />
#ifndef _CHECKLISTITEM_<br />
#define _CHECKLISTITEM_<br />
#include <stdio.h><br />
#include <stdlib.h><br />
#include <CEGUI.h><br />
<br />
namespace CEGUI<br />
{<br />
class CheckListboxItem : public ItemEntry<br />
{<br />
protected:<br />
public:<br />
CheckListboxItem(const String &type, const String &name, const String& text = "test");<br />
virtual ~CheckListboxItem();<br />
static const String WidgetTypeName;<br />
};<br />
CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)<br />
}<br />
#endif<br />
<br />
As you can see, this class inherits ItemEntry. This is necessary as its THE thing that makes this item working properly. Pay special attention to <b>CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)</b>. This tells CEGUI that we are declarating the window.<br />
<br />
#include "CheckListItem.h"<br />
<br />
namespace CEGUI<br />
{<br />
CEGUI_DEFINE_WINDOW_FACTORY(CheckListboxItem)<br />
const String CheckListboxItem::WidgetTypeName("CEGUI/CheckListboxItem");<br />
CheckListboxItem::CheckListboxItem(const String &type, const String &name, const String& text) :<br />
ItemEntry(type, name),<br />
d_itemText(text)<br />
{<br />
}<br />
CheckListboxItem::~CheckListboxItem()<br />
{<br />
}<br />
}<br />
<br />
--[[User:Levia|Levia]] 21:10, 5 April 2007 (GMT+1)</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2560Create a CheckListboxItem2007-04-10T10:44:21Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. We need to do a few things to call this one finished. First, we need to create the CheckListboxItem class. Then we are going to add the window factory to the system. Last but not least is adding the Falagard mapping. We'll start with the CheckListboxItem class.<br />
<br />
#ifndef _CHECKLISTITEM_<br />
#define _CHECKLISTITEM_<br />
<br />
#include <stdio.h><br />
#include <stdlib.h><br />
<br />
#include <CEGUI.h><br />
<br />
namespace CEGUI<br />
{<br />
<br />
class CheckListboxItem : public ItemEntry<br />
{<br />
protected:<br />
public:<br />
<br />
CheckListboxItem(const String &type, const String &name, const String& text = "test");<br />
virtual ~CheckListboxItem();<br />
<br />
static const String WidgetTypeName;<br />
<br />
};<br />
<br />
CEGUI_DECLARE_WINDOW_FACTORY(CheckListboxItem)<br />
}<br />
<br />
<br />
#endif<br />
<br />
--[[User:Levia|Levia]] 21:10, 5 April 2007 (GMT+1)</div>Leviahttp://cegui.org/wiki/index.php?title=Build_from_source_for_Linux&diff=2549Build from source for Linux2007-04-05T21:06:50Z<p>Levia: </p>
<hr />
<div>I happened to notice that this article needed to be written and I was about to install CEGUI from source right now, so I thought I'd document the steps I used, in hopes that they may be useful to somebody.<br />
<br />
I'm on ubuntu 6.06 (Dapper)<br><br />
<br />
You need:<br><br />
- A C++ compiler (g++ in my case)<br><br />
- Linux Makefile<br><br />
<br />
First you need to download the latest source tarball. I think it's a good idea to keep all the libraries you install from source in a directory, so you can re-compile later with different options if you wish. /home/user/Installs in my case.<br />
Move the downloaded tar to your "installs directory" and extract it with:<br><br />
tar xzf CEGUI-0.5.0b.tar.gz<br><br />
<br />
Enter the CEGUI file:<br><br />
cd CEGUI-0.5.0/<br><br />
and type <br><br />
./configure --help<br><br />
Scroll up a bit and take a look at the available compile options. Pay special attention to the optional ones, so you can make sure that you get all the features you need.<br />
then type<br><br />
./configure<br><br />
If everything worked you should get a summary of the build you are going to make. If you don't get the summary, it's probably because you don't have the libraries CEGUI needs to compile. Make sure you have the _DEVELOPMENT_ libraries installed. If you are not happy with the summary, run configure again and use the options from the help section to tweak it.<br><br />
Here is what I got.<br><br />
<br />
----<br />
<br />
************************************************<br />
* Crazy Eddie's GUI System - Configuration Results Summary<br />
************************************************<br />
<br />
* Library Release Version: 0.5.0<br />
*<br />
* Code options:<br />
* Building CEGUI in debug mode: no<br />
*<br />
* Renderer Modules:<br />
* Building OpenGL Renderer: yes<br />
* Building Irrlict Renderer: no<br />
*<br />
* Image Loading Codec Modules (currently for OpenGL Renderer only):<br />
* Building Corona Image Codec: no<br />
* Building DevIL Image Codec: no<br />
* Building FreeImage Image Codec: no<br />
* Building SILLY Image Codec: no<br />
* Building TGA Image Codec: yes<br />
*<br />
* Default Image Codec will be: TGAImageCodec<br />
*<br />
* XML Parser Modules:<br />
* Building TinyXMLParser: yes<br />
* Building ExpatParser: no<br />
* Building LibXMLParser: no<br />
* Building XercesParser: no<br />
*<br />
* Default XML Parser is: TinyXMLParser<br />
*<br />
* Scripting:<br />
* Building Lua scripting module: no<br />
* Building tolua++cegui generator: no<br />
*<br />
* Samples Framework:<br />
* Building Samples: yes<br />
* GTK2 based dialog for renderer selection: no<br />
* OpenGL Renderer available in samples: yes<br />
* Irrlict Renderer available in samples: no<br />
* Ogre3D Renderer available in samples: no<br />
************************************************<br />
<br />
<br />
----<br />
the next part is easy, just type 'make' then 'make install'.<br><br />
In practice you'll need root privileges to install the files, so with ubuntu:<br><br />
sudo make install<br><br />
or in gentoo for example:<br><br />
su<br><br />
make install<br><br />
Hope this helps.</div>Leviahttp://cegui.org/wiki/index.php?title=Build_from_source_for_Linux&diff=2548Build from source for Linux2007-04-05T21:05:35Z<p>Levia: </p>
<hr />
<div>I happened to notice that this article needed to be written and I was about to install CEGUI from source right now, so I thought I'd document the steps I used, in hopes that they may be useful to somebody.<br />
<br />
I'm on ubuntu 6.06 (Dapper)<br><br />
<br />
You need:<br><br />
- A C++ compiler (g++ in my case)<br><br />
- Linux Makefile<br><br />
<br />
First you need to download the latest source tarball. I think it's a good idea to keep all the libraries you install from source in a directory, so you can re-compile later with different options if you wish. /home/user/Installs in my case.<br />
Move the downloaded tar to your "installs directory" and extract it with:<br><br />
tar xzf CEGUI-0.5.0b.tar.gz<br><br />
<br />
Enter the CEGUI file:<br><br />
cd CEGUI-0.5.0/<br><br />
and type <br><br />
./configure --help<br><br />
Scroll up a bit and take a look at the available compile options. Pay special attention to the optional ones, so you can make sure that you get all the features you need.<br />
then type<br><br />
./configure<br><br />
If everything worked you should get a summary of the build you are going to make. If you don't get the summary, it's probably because you don't have the libraries CEGUI needs to compile. Make sure you have the _DEVELOPMENT_ libraries installed. If you are not happy with the summary, run configure again and use the options from the help section to tweak it.<br><br />
Here is what I got.<br><br />
<br />
----<br />
<br />
************************<br />
* Crazy Eddie's GUI System - Configuration Results Summary<br />
************************<br />
<br />
* Library Release Version: 0.5.0<br />
*<br />
* Code options:<br />
* Building CEGUI in debug mode: no<br />
*<br />
* Renderer Modules:<br />
* Building OpenGL Renderer: yes<br />
* Building Irrlict Renderer: no<br />
*<br />
* Image Loading Codec Modules (currently for OpenGL Renderer only):<br />
* Building Corona Image Codec: no<br />
* Building DevIL Image Codec: no<br />
* Building FreeImage Image Codec: no<br />
* Building SILLY Image Codec: no<br />
* Building TGA Image Codec: yes<br />
*<br />
* Default Image Codec will be: TGAImageCodec<br />
*<br />
* XML Parser Modules:<br />
* Building TinyXMLParser: yes<br />
* Building ExpatParser: no<br />
* Building LibXMLParser: no<br />
* Building XercesParser: no<br />
*<br />
* Default XML Parser is: TinyXMLParser<br />
*<br />
* Scripting:<br />
* Building Lua scripting module: no<br />
* Building tolua++cegui generator: no<br />
*<br />
* Samples Framework:<br />
* Building Samples: yes<br />
* GTK2 based dialog for renderer selection: no<br />
* OpenGL Renderer available in samples: yes<br />
* Irrlict Renderer available in samples: no<br />
* Ogre3D Renderer available in samples: no<br />
************************<br />
<br />
<br />
----<br />
the next part is easy, just type 'make' then 'make install'.<br><br />
In practice you'll need root privileges to install the files, so with ubuntu:<br><br />
sudo make install<br><br />
or in gentoo for example:<br><br />
su<br><br />
make install<br><br />
Hope this helps.</div>Leviahttp://cegui.org/wiki/index.php?title=Build_from_source_for_Linux&diff=2547Build from source for Linux2007-04-05T21:05:04Z<p>Levia: </p>
<hr />
<div>I happened to notice that this article needed to be written and I was about to install CEGUI from source right now, so I thought I'd document the steps I used, in hopes that they may be useful to somebody.<br />
<br />
I'm on ubuntu 6.06 (Dapper)<br><br />
<br />
You need:<br><br />
- A C++ compiler (g++ in my case)<br><br />
- Linux Makefile<br><br />
<br />
First you need to download the latest source tarball. I think it's a good idea to keep all the libraries you install from source in a directory, so you can re-compile later with different options if you wish. /home/user/Installs in my case.<br />
Move the downloaded tar to your "installs directory" and extract it with:<br><br />
tar xzf CEGUI-0.5.0b.tar.gz<br><br />
<br />
Enter the CEGUI file:<br><br />
cd CEGUI-0.5.0/<br><br />
and type <br><br />
./configure --help<br><br />
Scroll up a bit and take a look at the available compile options. Pay special attention to the optional ones, so you can make sure that you get all the features you need.<br />
then type<br><br />
./configure<br><br />
If everything worked you should get a summary of the build you are going to make. If you don't get the summary, it's probably because you don't have the libraries CEGUI needs to compile. Make sure you have the _DEVELOPMENT_ libraries installed. If you are not happy with the summary, run configure again and use the options from the help section to tweak it.<br><br />
Here is what I got.<br><br />
<br />
----<br />
<br />
************************<br />
* Crazy Eddie's GUI System - Configuration Results Summary<br />
<br />
* Library Release Version: 0.5.0<br />
*<br />
* Code options:<br />
* Building CEGUI in debug mode: no<br />
*<br />
* Renderer Modules:<br />
* Building OpenGL Renderer: yes<br />
* Building Irrlict Renderer: no<br />
*<br />
* Image Loading Codec Modules (currently for OpenGL Renderer only):<br />
* Building Corona Image Codec: no<br />
* Building DevIL Image Codec: no<br />
* Building FreeImage Image Codec: no<br />
* Building SILLY Image Codec: no<br />
* Building TGA Image Codec: yes<br />
*<br />
* Default Image Codec will be: TGAImageCodec<br />
*<br />
* XML Parser Modules:<br />
* Building TinyXMLParser: yes<br />
* Building ExpatParser: no<br />
* Building LibXMLParser: no<br />
* Building XercesParser: no<br />
*<br />
* Default XML Parser is: TinyXMLParser<br />
*<br />
* Scripting:<br />
* Building Lua scripting module: no<br />
* Building tolua++cegui generator: no<br />
*<br />
* Samples Framework:<br />
* Building Samples: yes<br />
* GTK2 based dialog for renderer selection: no<br />
* OpenGL Renderer available in samples: yes<br />
* Irrlict Renderer available in samples: no<br />
* Ogre3D Renderer available in samples: no<br />
************************<br />
<br />
<br />
----<br />
the next part is easy, just type 'make' then 'make install'.<br><br />
In practice you'll need root privileges to install the files, so with ubuntu:<br><br />
sudo make install<br><br />
or in gentoo for example:<br><br />
su<br><br />
make install<br><br />
Hope this helps.</div>Leviahttp://cegui.org/wiki/index.php?title=Build_from_source_for_Linux&diff=2546Build from source for Linux2007-04-05T21:02:29Z<p>Levia: </p>
<hr />
<div>I happened to notice that this article needed to be written and I was about to install CEGUI from source right now, so I thought I'd document the steps I used, in hopes that they may be useful to somebody.<br />
<br />
I'm on ubuntu 6.06 (Dapper)<br><br />
<br />
You need:<br><br />
- A C++ compiler (g++ in my case)<br><br />
- Linux Makefile<br><br />
<br />
First you need to download the latest source tarball. I think it's a good idea to keep all the libraries you install from source in a directory, so you can re-compile later with different options if you wish. /home/user/Installs in my case.<br />
Move the downloaded tar to your "installs directory" and extract it with:<br><br />
tar xzf CEGUI-0.5.0b.tar.gz<br><br />
<br />
Enter the CEGUI file:<br><br />
cd CEGUI-0.5.0/<br><br />
and type <br><br />
./configure --help<br><br />
Scroll up a bit and take a look at the available compile options. Pay special attention to the optional ones, so you can make sure that you get all the features you need.<br />
then type<br><br />
./configure<br><br />
If everything worked you should get a summary of the build you are going to make. If you don't get the summary, it's probably because you don't have the libraries CEGUI needs to compile. Make sure you have the _DEVELOPMENT_ libraries installed. If you are not happy with the summary, run configure again and use the options from the help section to tweak it.<br><br />
Here is what I got.<br><br />
<br />
----<br />
<br />
<br />
* Crazy Eddie's GUI System - Configuration Results Summary<br />
<br />
* Library Release Version: 0.5.0<br />
*<br />
* Code options:<br />
* Building CEGUI in debug mode: no<br />
*<br />
* Renderer Modules:<br />
* Building OpenGL Renderer: yes<br />
* Building Irrlict Renderer: no<br />
*<br />
* Image Loading Codec Modules (currently for OpenGL Renderer only):<br />
* Building Corona Image Codec: no<br />
* Building DevIL Image Codec: no<br />
* Building FreeImage Image Codec: no<br />
* Building SILLY Image Codec: no<br />
* Building TGA Image Codec: yes<br />
*<br />
* Default Image Codec will be: TGAImageCodec<br />
*<br />
* XML Parser Modules:<br />
* Building TinyXMLParser: yes<br />
* Building ExpatParser: no<br />
* Building LibXMLParser: no<br />
* Building XercesParser: no<br />
*<br />
* Default XML Parser is: TinyXMLParser<br />
*<br />
* Scripting:<br />
* Building Lua scripting module: no<br />
* Building tolua++cegui generator: no<br />
*<br />
* Samples Framework:<br />
* Building Samples: yes<br />
* GTK2 based dialog for renderer selection: no<br />
* OpenGL Renderer available in samples: yes<br />
* Irrlict Renderer available in samples: no<br />
* Ogre3D Renderer available in samples: no<br />
********************************************************************************<br />
<br />
<br />
----<br />
the next part is easy, just type 'make' then 'make install'.<br><br />
In practice you'll need root privileges to install the files, so with ubuntu:<br><br />
sudo make install<br><br />
or in gentoo for example:<br><br />
su<br><br />
make install<br><br />
Hope this helps.</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2544Create a CheckListboxItem2007-04-05T20:53:04Z<p>Levia: /* Coding our item */</p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. We need to do a few things to call this one finished. First, we need to create the CheckListboxItem class. Then we are going to add the window factory to the system. Last but not least is adding the Falagard mapping. We'll start with the CheckListboxItem class.<br />
// TODO: More to come, gotta go for now :)<br />
<br />
--[[User:Levia|Levia]] 21:10, 5 April 2007 (GMT+1)</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2543Create a CheckListboxItem2007-04-05T20:49:32Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. <br />
// TODO: More to come, gotta go for now :)<br />
<br />
--[[User:Levia|Levia]] 21:10, 5 April 2007 (GMT+1)</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2541Create a CheckListboxItem2007-04-05T19:24:14Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Pfew am I glad thats done. <br />
<br />
==Coding our item==<br />
<br />
We have come to the part where we actually try out our new item. <br />
// TODO: More to come, gotta go for now :)</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2540Create a CheckListboxItem2007-04-05T19:21:16Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
I am assuming you know what the basics like the Area, Dim and such. Though FontDim is used to change the size of the item depending on a label. The part we just added now defines the size of the item.<br />
Instead of adding the whole code here again, I'm only showing the additions from now on.<br />
<br />
Ok! Now we are going to add the actual Checkbox. This is crucial for our goal, as it allows the item to be checked upon click. We dont have to write the states and all that for the Checkbox, we just use Child! Just place this under our NamedArea and above the first StateImagery.<br />
<br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<br />
This adds a WindowsLook/Checkbox to our item. The suffix is necessary to make the name unique. the rest is pretty straight forward - it adds the checkbox on the left side of the item, starting from 3 pixels to make it look smooth.<br />
<br />
Now we need a label, this part is simple and I will not spend as much time on clarifying it, it basically explains itself.<br />
<br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<br />
The TextComponent simply states this this can contain text. The Dim's are just positioning. Note the LeftEdge, the label starts at 18 pixels from the left. This is because the first ~15 pixels are occupied by the checkbox.<br />
<br />
Now something important! The selection image.<br />
<br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<br />
Note that we give it the name selection, as used in the StateImagery. The Area part is just positioning and fitting again. The Dim's used there simply make sure the whole item is filled. ImageProperty defines the image to use. We have defined SelectionBrush at the top of our WidgetLook. It simply fills the Area with that image now. ColourProperty colors the image, we have also defined SelectionColour at the top of the WidgetLook. VertFormat and HorzFormat are stretched, if its not stretched, it will only draw one pixel of the image, making it near invisible. Stretching it just makes sure the whole area is covered.<br />
<br />
That was it! We wrote our looknfeel entry!!<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea><br />
<Child type ="WindowsLook/Checkbox" nameSuffix="__auto__checkbox"><br />
<Area><br />
<Dim type="LeftEdge"><br />
<UnifiedDim scale="0" type="LeftEdge" /><br />
<AbsoluteDim value="3" /><br />
</Dim><br />
<Dim type="TopEdge"><br />
<UnifiedDim scale="0" type="TopEdge" /><br />
</Dim><br />
<Dim type="Width"><br />
<UnifiedDim scale="1" type="Width" /><br />
</Dim><br />
<Dim type="Height"><br />
<UnifiedDim scale="1" type="Height"/><br />
</Dim><br />
</Area><br />
</Child><br />
<ImagerySection name="label"><br />
<TextComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="18" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" offset="-3" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
</TextComponent><br />
</ImagerySection><br />
<ImagerySection name="selection"><br />
<ImageryComponent><br />
<Area><br />
<Dim type="TopEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="LeftEdge"><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="RightEdge"><br />
<UnifiedDim scale="1" type="RightEdge" /><br />
</Dim><br />
<Dim type="BottomEdge"><br />
<UnifiedDim scale="1" type="BottomEdge" /><br />
</Dim><br />
</Area><br />
<ImageProperty name="SelectionBrush" /><br />
<ColourProperty name="SelectionColour" /><br />
<VertFormat type="Stretched" /><br />
<HorzFormat type="Stretched" /><br />
</ImageryComponent><br />
</ImagerySection><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook></div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2539Create a CheckListboxItem2007-04-05T19:03:50Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.<br />
<br />
==Writing the functional parts==<br />
<br />
We now need to add the parts where the background, text and the selection gets drawn. This seems hard, but isn't actually. We are going to start off with a NamedArea. This is required for a listbox item as the listbox needs to know how big the item is to fit it into the list. <br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<br />
<b><NamedArea name="ContentSize"><br />
<Area><br />
<Dim type="LeftEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="TopEdge" ><br />
<AbsoluteDim value="0" /><br />
</Dim><br />
<Dim type="Width" ><br />
<FontDim type="HorzExtent" padding="6" /><br />
</Dim><br />
<Dim type="Height" ><br />
<FontDim type="LineSpacing" /><br />
</Dim><br />
</Area><br />
</NamedArea></b><br />
<br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook></div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2538Create a CheckListboxItem2007-04-05T18:59:02Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.<br />
<br />
Now we are going to add the definitions of some colors and property's.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionBrush" initialValue="set:WindowsLook image:Background" redrawOnWrite="true" /><br />
<PropertyDefinition name="SelectionColour" initialValue="FF3030FF" redrawOnWrite="true" /><br />
<Property name="Selectable" value="True" /><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
Our first PropertyDefinition just defines a text for a colour used in the StateImagery sections. Same goes for the other PropertyDefinitions except the SelectionBrush. Instead of defining a color, it defines a image. In this case it uses the WindowsLook Background image defined in the imageset. Then we got a Property, which simply implies some sort of setting. In this case, we make it a item by adding the Property 'Selectable' and setting it to true as we want it to act like an item.</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2537Create a CheckListboxItem2007-04-05T18:54:01Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
We define a state via StateImagery. It requires the attribute name which specifies what state its in. Don't worry about Layer for now. Section is always used. This part takes care of actually changing the look. It requires a attribute section, this is actually WHAT to change, in this case the label. TextColour is a simple colour (black), we will define it below. Now as you can see the Enabled state just sets the text colour to black, thats all it does. Same goes for Disabled (remember this is an item, items are not commonly disabled).<br />
<br />
Now we are going to take a look at the other two states.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedEnabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="SelectedDisabled"><br />
<Layer><br />
<Section section="selection" /><br />
<Section section="label"><br />
<ColourProperty name="SelectedTextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook><br />
<br />
These states pretty much speak for themselves altough there are more sections listed. Section not only defines what to change, also defines what needs to be shown. In the Enabled state we dont want it to look like its selected, so there is no selection section. Note that the order of which you put the Sections are also the Z order. In this case we are putting the selection image first, and then text. If we would do it the other way around, we wouldn't see the text.</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2536Create a CheckListboxItem2007-04-05T18:46:26Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
==Writing the requirements==<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining. Now we are going to add the states. These states are necessary for the item to respond to certain events. For example, when the item is disabled, the state Disabled is used.<br />
<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
<StateImagery name="Enabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
<StateImagery name="Disabled"><br />
<Layer><br />
<Section section="label"><br />
<ColourProperty name="TextColour" /><br />
</Section><br />
</Layer><br />
</StateImagery><br />
</WidgetLook></div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2535Create a CheckListboxItem2007-04-05T18:40:50Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
I'm assuming you are just using a standard imageset, with a standard scheme (currently TaharezLook and WindowsLook are supported).<br />
<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.<br />
<br />
Open the appriopiate looknfeel file (WindowsLook.looknfeel or TaharezLook.looknfeel), and place this at the bottom (inside the Falagard tags though!)<br />
<br />
''' Our start '''<br />
<WidgetLook name="WindowsLook/CheckListboxItem"><br />
</WidgetLook><br />
<br />
We first need to define a WidgetLook, this is where all the action happens in. It takes one attribute, name. This is simply the name of the widget you are defining.</div>Leviahttp://cegui.org/wiki/index.php?title=Create_a_CheckListboxItem&diff=2534Create a CheckListboxItem2007-04-05T18:36:30Z<p>Levia: </p>
<hr />
<div>Sometimes you need a list where the items are checkable. The ItemListbox introduced in CEGUI 0.5 accepts all sorts of items, as long as they inherit ItemEntry. I'm going to teach you how to create a CheckListboxItem to put in your list.<br />
<br />
==Getting started!==<br />
We are first going to get started by writing the looknfeel entry. This is the most important part of this tutorial, as its basically 70% of what we need to do to achieve our goal. First of all, this entry has a few states:<br />
<br />
#Enabled: How the item looks when the item is enabled.<br />
#Disabled: How the item looks when the item is disabled.<br />
#SelectedEnabled: How the item looks when the item is selected and is enabled.<br />
#SelectedDisabled: How the item looks when the item is selected and is disabled.</div>Leviahttp://cegui.org/wiki/index.php?title=Tutorials&diff=2533Tutorials2007-04-05T18:33:03Z<p>Levia: /* Miscellaneous HOW-TOs */</p>
<hr />
<div>=== CrazyEddie's Beginner Guides ===<br />
* [[The Beginner Guide to Getting CEGUI Rendering]] - How to initialise CEGUI to render properly.<br />
* [[The Beginner Guide to Loading Data Files and Initialisation]] - How to load some data files and perform basic system initialisation.<br />
* [[The Beginner Guide to Creating a CEGUI Window]] - How to create a simple window and get it on screen.<br />
* [[The Beginner Guide to Injecting Inputs]] - How to inject inputs into CEGUI and get interactive.<br />
<br />
<br />
=== Scripting with CEGUI ===<br />
* [[Getting Started with Lua and CEGUI]] - How to initialise CEGUI with a Lua script module and configuration file.<br />
* [[Handling Events from Lua]] - How to load Lua script files and bind CEGUI events to Lua functions.<br />
* [[Writing CEGUI scripts]] - Code snippets<br />
* [[Adding LuaScriptModule to Sample_FirstWindow]] - Experience adding scripting to an existing sample.<br />
* [http://www.gpwiki.org/index.php/Crazy_Eddies_GUI_System:Tutorials:Creating_a_scriptable_interface_using_CEGUI Creating a scriptable interface using CEGUI]<br />
<br />
<br />
=== Window System Examples ===<br />
* [[Using CEGUI with SDL and OpenGL]] - Guidelines on how to get SDL, OpenGL and CEGUI running together.<br />
* [[Using CEGUI with Producer and OpenGL]] - Guidelines on how to render and inject input to CEGUI from the Producer API.<br />
* [http://artis.imag.fr/Membres/Xavier.Decoret/resources/CEGUI/ Using CEGUI with Qt/QGLViewer]<br />
* [[Using CEGUI with GLUT]] - Some tips on using OpenGL's GLUT with CEGUI.<br />
<br />
=== Extending CEGUI ===<br />
* [[Using Expat XML parser within CEGUI]] - How to add support for another XML parser.<br />
<br />
=== Skins - Tutorial For Artists ===<br />
* [[Creating Skins]] - Extra notes for artists on how to create skins.<br />
* [[The Beginners Guide to Falagard skinning - Part I]] - Learn by doing a Button.<br />
* [[The Beginners Guide to Falagard skinning - Part II]] - More Falagard fun, this time with the Editbox.<br />
<br />
<br />
=== Overviews ===<br />
* [[Overview of GUI files]] - A quick introduction to all the XML files used by CEGUI.<br />
* [[Overview of resource system enhancements in 0.5.0]] - Introduction to enhancements made for the 0.5.0 release.<br />
<br />
<br />
=== Miscellaneous HOW-TOs ===<br />
* [[Create ImageButtons]] - A few different ways to create image buttons.<br />
* [[Create a CheckListboxItem]] - Create a CheckListBoxItem that you can use with ItemListbox.</div>Leviahttp://cegui.org/wiki/index.php?title=Tutorials&diff=2531Tutorials2007-04-05T18:29:57Z<p>Levia: /* Miscellaneous HOW-TOs */</p>
<hr />
<div>=== CrazyEddie's Beginner Guides ===<br />
* [[The Beginner Guide to Getting CEGUI Rendering]] - How to initialise CEGUI to render properly.<br />
* [[The Beginner Guide to Loading Data Files and Initialisation]] - How to load some data files and perform basic system initialisation.<br />
* [[The Beginner Guide to Creating a CEGUI Window]] - How to create a simple window and get it on screen.<br />
* [[The Beginner Guide to Injecting Inputs]] - How to inject inputs into CEGUI and get interactive.<br />
<br />
<br />
=== Scripting with CEGUI ===<br />
* [[Getting Started with Lua and CEGUI]] - How to initialise CEGUI with a Lua script module and configuration file.<br />
* [[Handling Events from Lua]] - How to load Lua script files and bind CEGUI events to Lua functions.<br />
* [[Writing CEGUI scripts]] - Code snippets<br />
* [[Adding LuaScriptModule to Sample_FirstWindow]] - Experience adding scripting to an existing sample.<br />
* [http://www.gpwiki.org/index.php/Crazy_Eddies_GUI_System:Tutorials:Creating_a_scriptable_interface_using_CEGUI Creating a scriptable interface using CEGUI]<br />
<br />
<br />
=== Window System Examples ===<br />
* [[Using CEGUI with SDL and OpenGL]] - Guidelines on how to get SDL, OpenGL and CEGUI running together.<br />
* [[Using CEGUI with Producer and OpenGL]] - Guidelines on how to render and inject input to CEGUI from the Producer API.<br />
* [http://artis.imag.fr/Membres/Xavier.Decoret/resources/CEGUI/ Using CEGUI with Qt/QGLViewer]<br />
* [[Using CEGUI with GLUT]] - Some tips on using OpenGL's GLUT with CEGUI.<br />
<br />
=== Extending CEGUI ===<br />
* [[Using Expat XML parser within CEGUI]] - How to add support for another XML parser.<br />
<br />
=== Skins - Tutorial For Artists ===<br />
* [[Creating Skins]] - Extra notes for artists on how to create skins.<br />
* [[The Beginners Guide to Falagard skinning - Part I]] - Learn by doing a Button.<br />
* [[The Beginners Guide to Falagard skinning - Part II]] - More Falagard fun, this time with the Editbox.<br />
<br />
<br />
=== Overviews ===<br />
* [[Overview of GUI files]] - A quick introduction to all the XML files used by CEGUI.<br />
* [[Overview of resource system enhancements in 0.5.0]] - Introduction to enhancements made for the 0.5.0 release.<br />
<br />
<br />
=== Miscellaneous HOW-TOs ===<br />
* [[Create ImageButtons]] - A few different ways to create image buttons.<br />
* [[Create a CheckListBoxItem]] - Create a CheckListBoxItem that you can use with ItemListbox.</div>Levia