CEGUI In Practice - Creating widgets - Revision history

Ident: /* The Widget in Practice */

2014-04-10T23:13:52Z

‎The Widget in Practice

Ident: /* The Widget in Practice */

2014-04-10T23:12:56Z

‎The Widget in Practice

Superpws at 08:16, 30 March 2014

2014-03-30T08:16:57Z

Superpws at 08:15, 30 March 2014

2014-03-30T08:15:01Z

Superpws at 07:40, 30 March 2014

2014-03-30T07:40:24Z

Superpws: /* The Unified Dimension System */

2014-03-29T14:03:42Z

‎The Unified Dimension System

Ident at 02:16, 1 October 2013

2013-10-01T02:16:45Z

Ident at 02:15, 1 October 2013

2013-10-01T02:15:29Z

Kulik: /* The Widget in Practice */

2011-06-20T08:39:08Z

‎The Widget in Practice

Chrisvj at 13:14, 11 June 2011

2011-06-11T13:14:47Z

@@ Line 128: / Line 128: @@
 </tabber>
-The first agument is what Property we want to set, and the second argument is what value to set. The second argument is a string broken into two pieces in this example. We need to know what ImageSet we are looking in, which is referenced following the 'set:' portion. And then the image via the 'image:' portion. In this case we want it to show the full_image.
+The first agument is what Property we want to set, and the second argument is what value to set. The second argument is a string with first the Imageset name, a dash, and then the Image name: "YourImagesetName/ImageName".
 A Listing of properties for TaharezLook is available here [http://cegui.org.uk/wiki/Property_reference_for_TaharezLook]

@@ Line 119: / Line 119: @@
 C++=
 <source lang="cpp">
-myImageWindow->setProperty("Image","set:TaharezLook image:full_image");
+myImageWindow->setProperty("Image","TaharezLook/full_image");
 </source>
 |-|
 Python=
 <source lang="python">
-myImageWindow.setProperty("Image","set:TaharezLook image:full_image")
+myImageWindow.setProperty("Image","TaharezLook/full_image")
 </source>
 </tabber>

← Older revision		Revision as of 08:16, 30 March 2014
Line 112:		Line 112:
	In this case we specified the Udim using 0 for scales, and the actual pixel size in the absolute argument. The Absolute argument is additive to the scale, and in this case we didn't want to have the size be affected by the scale argument. If we were creating a splash screen that took up the entire window, we would likely want the size to be USize(UDim(1,0),UDim(1,0) with the position being at USize(Udim(0,0), UDim(0,0).		In this case we specified the Udim using 0 for scales, and the actual pixel size in the absolute argument. The Absolute argument is additive to the scale, and in this case we didn't want to have the size be affected by the scale argument. If we were creating a splash screen that took up the entire window, we would likely want the size to be USize(UDim(1,0),UDim(1,0) with the position being at USize(Udim(0,0), UDim(0,0).

		+	[TODO: Add a proper description of USize which replaced UVector2 for setting size in CEGUI 0.8.3]

	Now that we have created the window to the size we want. We need to tell it what image to display! That we will do by using the PropertySet as follows.		Now that we have created the window to the size we want. We need to tell it what image to display! That we will do by using the PropertySet as follows.

@@ Line 55: / Line 55: @@
 C++=
 <source lang="cpp">
-CEGUI::UVector2(UDim x,UDim y);
+CEGUI::UVector2(CEGUI::UDim x, CEGUI::UDim y);
 </source>
 |-|
 Python=
 <source lang="python">
-PyCEGUI.UVector2(UDim x, UDim y)
+PyCEGUI.UVector2(PyCEGUI.UDim x, PyCEGUI.UDim y)
 </source>
 </tabber>
@@ Line 101: / Line 101: @@
 C++=
 <source lang="cpp">
-myImageWindow->setSize(UVector2(UDim(0,150),UDim(0,100)));
+myImageWindow->setSize(USize(UDim(0,150),UDim(0,100)));
 </source>
 |-|
 Python=
 <source lang="python">
-myImageWindow.setSize(UVector2(UDim(0,150),UDim(0,100)));
+myImageWindow.setSize(USize(UDim(0,150),UDim(0,100)));
 </source>
 </tabber>
-In this case we specified the Udim using 0 for scales, and the actual pixel size in the absolute argument. The Absolute argument is additive to the scale, and in this case we didn't want to have the size be affected by the scale argument. If we were creating a splash screen that took up the entire window, we would likely want the size to be UVector2(UDim(1,0),UDim(1,0) with the position being at UVector2(Udim(0,0), UDim(0,0).
+In this case we specified the Udim using 0 for scales, and the actual pixel size in the absolute argument. The Absolute argument is additive to the scale, and in this case we didn't want to have the size be affected by the scale argument. If we were creating a splash screen that took up the entire window, we would likely want the size to be USize(UDim(1,0),UDim(1,0) with the position being at USize(Udim(0,0), UDim(0,0).

@@ Line 1: / Line 1: @@
-{{VersionBadge|0.7}}
+{{VersionBadge|0.8}}
 {{Series|CEGUI In Practice|2}}
@@ Line 26: / Line 26: @@
 [Note: As a point to note, there is no strict requirement on naming of windows, except to avoid repeat names.  Some users tend to prefer a naming convention using ParentName/ChildName.  ie.  "ConsoleWindow/SendButton" or "_MasterRoot/HealthBar"]
-Once we have created the window, myImageWindow will be a pointer to a CEGUI::{{DoxygenClass|DefaultWindow|0.7}} which is derived from CEGUI::{{DoxygenClass|Window|0.7}}. If you look in the .scheme file you can see can see what a Widget is derived from via the TargetType= tag.
+Once we have created the window, myImageWindow will be a pointer to a CEGUI::{{DoxygenClass|DefaultWindow|0.8}} which is derived from CEGUI::{{DoxygenClass|Window|0.8}}. If you look in the .scheme file you can see can see what a Widget is derived from via the TargetType= tag.
 Next we need to set some properties for this window. There are two ways of doing this. The first is via the propertyset, or the second way by calling the function. The latter way can be more annoying at times, as you may have to cast the window to the correct type to get access to the member functions, but may be more intuitive depending on how you think.
@@ Line 129: / Line 129: @@
 The first agument is what Property we want to set, and the second argument is what value to set. The second argument is a string broken into two pieces in this example. We need to know what ImageSet we are looking in, which is referenced following the 'set:' portion. And then the image via the 'image:' portion. In this case we want it to show the full_image.
-A Listing of properties for TaharezLook is available here [http://cegui.org.uk/static/TaharezLookProperties.html]
+A Listing of properties for TaharezLook is available here [http://cegui.org.uk/wiki/Property_reference_for_TaharezLook]
 Now that we have created the window. We need to attach it to the current root window.
@@ Line 136: / Line 136: @@
 C++=
 <source lang="cpp">
-CEGUI::System::getSingleton().getGUISheet()->addChildWindow(myImageWindow);
+CEGUI::System::getSingleton().getDefaultGUIContext().getRootWindow()->addChild(myImageWindow);
 </source>
 |-|
 Python=
 <source lang="python">
-PyCEGUI.System.getSingleton().getGUISheet().addChildWindow(myImageWindow)
+PyCEGUI.System.getSingleton().getDefaultGUIContext().getRootWindow().addChild(myImageWindow)
 </source>
 </tabber>

@@ Line 36: / Line 36: @@
 Before we jump in too far, we need to understand how CEGUI Handles positions. CEGUI Uses a Unified Dimension system.
-<tabs>
+<tabber>
-<tab title="C++">
+C++=
 <source lang="cpp">
 CEGUI::UDim(scale,offset);
 </source>
-</tab>
+|-|
-<tab title="Python">
+Python=
 <source lang="python">
 PyCEGUI.UDim(scale,offset)
 </source>
-</tab>
+</tabber>
-</tabs>
 The first number is the relative point on the screen between (0,1). So if we were looking at the X axis (left to right on the screen) a UDim(0.5,0) would be Halfway across the screen with zero pixels offset. Udim(0.0,50) would be starting at the left side of the screen +50 pixels. You can combine them too Udim(0.75,10) would be 3/4 of the way across the screen, with an additional 10 pixels.
@@ Line 53: / Line 52: @@
 A point on the screen (or a UVector2) is made up of two UDims:
-<tabs>
+<tabber>
-<tab title="C++">
+C++=
 <source lang="cpp">
 CEGUI::UVector2(UDim x,UDim y);
 </source>
-</tab>
+|-|
-<tab title="Python">
+Python=
 <source lang="python">
 PyCEGUI.UVector2(UDim x, UDim y)
 </source>
-</tab>
+</tabber>
-</tabs>
 As such, a CEGUI::Rect is as you would imagine, 4 UDims
-<tabs>
+<tabber>
-<tab title="C++">
+C++=
 <source lang="cpp">
 CEGUI::URect(CEGUI::Udim left,CEGUI::Udim top,CEGUI::Udim right,CEGUI::Udim bottom);
 </source>
-</tab>
+|-|
-<tab title="Python">
+Python=
 <source lang="python">
 PyCEGUI.URect(PyCEGUI.Udim left, PyCEGUI.Udim top, PyCEGUI.Udim right, PyCEGUI.Udim bottom)
 </source>
-</tab>
+</tabber>
-</tabs>
 So now that we know how positions are done, lets move our created window to the middle of the screen:
 ==== The Widget in Practice ====
-<tabs>
+<tabber>
-<tab title="C++">
+C++=
 <source lang="cpp">
 myImageWindow->setPosition(CEGUI::UVector2(CEGUI::UDim(0.5,0),CEGUI::UDim(0.5,0)));
 </source>
-</tab>
+|-|
-<tab title="Python">
+Python=
 <source lang="python">
 myImageWindow.setPosition(PyCEGUI.UVector2(PyCEGUI.UDim(0.5,0), PyCEGUI.UDim(0.5,0)))
 </source>
-</tab>
+</tabber>
-</tabs>
 That may look a little ugly but break it down. setPosition takes a UVector2, and each UVector2 is made up of an X and Y Udim, which is made up of a Scale and Absolute float.
@@ Line 102: / Line 98: @@
-<tabs>
+<tabber>
-<tab title="C++">
+C++=
 <source lang="cpp">
 myImageWindow->setSize(UVector2(UDim(0,150),UDim(0,100)));
 </source>
-</tab>
+|-|
-<tab title="Python">
+Python=
 <source lang="python">
 myImageWindow.setSize(UVector2(UDim(0,150),UDim(0,100)));
 </source>
-</tab>
+</tabber>
-</tabs>
 In this case we specified the Udim using 0 for scales, and the actual pixel size in the absolute argument. The Absolute argument is additive to the scale, and in this case we didn't want to have the size be affected by the scale argument. If we were creating a splash screen that took up the entire window, we would likely want the size to be UVector2(UDim(1,0),UDim(1,0) with the position being at UVector2(Udim(0,0), UDim(0,0).
@@ Line 120: / Line 115: @@
 Now that we have created the window to the size we want. We need to tell it what image to display! That we will do by using the PropertySet as follows.
-<tabs>
+<tabber>
-<tab title="C++">
+C++=
 <source lang="cpp">
 myImageWindow->setProperty("Image","set:TaharezLook image:full_image");
 </source>
-</tab>
+|-|
-<tab title="Python">
+Python=
 <source lang="python">
 myImageWindow.setProperty("Image","set:TaharezLook image:full_image")
 </source>
-</tab>
+</tabber>
-</tabs>
 The first agument is what Property we want to set, and the second argument is what value to set. The second argument is a string broken into two pieces in this example. We need to know what ImageSet we are looking in, which is referenced following the 'set:' portion. And then the image via the 'image:' portion. In this case we want it to show the full_image.
@@ Line 139: / Line 133: @@
 Now that we have created the window. We need to attach it to the current root window.
-<tabs>
+<tabber>
-<tab title="C++">
+C++=
 <source lang="cpp">
 CEGUI::System::getSingleton().getGUISheet()->addChildWindow(myImageWindow);
 </source>
-</tab>
+|-|
-<tab title="Python">
+Python=
 <source lang="python">
 PyCEGUI.System.getSingleton().getGUISheet().addChildWindow(myImageWindow)
 </source>
-</tab>
+</tabber>
-</tabs>
 This will allow the Window to be displayed.

@@ Line 11: / Line 11: @@
 <tabber>
-tab1=C++
+C++=
 <source lang="cpp">
 CEGUI::Window *myImageWindow = CEGUI::WindowManager::getSingleton().createWindow("TaharezLook/StaticImage","PrettyWindow" );
 </source>
 |-|
-tab2=Python
+Python=
 <source lang="python">
 myImageWindow = PyCEGUI.WindowManager.getSingleton().createWindow("TaharezLook/StaticImage","PrettyWindow" )