Difference between revisions of "Layout Containers"

From CEGUI Wiki - Crazy Eddie's GUI System (Open Source)
Jump to: navigation, search
(Grid Layout Container)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
{{VersionBadge|0.8}} {{VersionAtLeast|0.8.0}}
+
{{VersionBadge|0.8}}
  
 
This introduces the concept of widgets that automatically layout their child widgets. Without these layout containers, doing dynamic complex UI was really hard and you had to do a lot of custom code.
 
This introduces the concept of widgets that automatically layout their child widgets. Without these layout containers, doing dynamic complex UI was really hard and you had to do a lot of custom code.
Line 31: Line 31:
 
Basic Example:
 
Basic Example:
 
<source lang="cpp">
 
<source lang="cpp">
CEGUI::GridLayoutContainer *glc =( CEGUI::GridLayoutContainer *)CEGUI::WindowManager::getSingletonPtr()->createWindow(
+
// includes: <sstream>, loaded schemes: TaharezLook.scheme
"GridLayoutContainer", "GLC" );
+
  
guiSheet_root->addChild( glc );
+
CEGUI::GridLayoutContainer *glc = static_cast<CEGUI::GridLayoutContainer*>(CEGUI::WindowManager::getSingletonPtr()->createWindow("GridLayoutContainer", "GLC"));
  
glc->setGridDimensions( 33, 33 );
+
d_root->addChild( glc );
  
CEGUI::Window* window = CEGUI::WindowManager::getSingletonPtr()->createWindow(  
+
glc->setGridDimensions( 2, 3 );
"OgreTray/FrameWindow", "DemoWindow" );
+
  
window->setSize( CEGUI::USize( cegui_reldim( 0.4f ), cegui_reldim( 0.4f )));
+
for(int i = 0; i < 6; ++i)
window->setMaxSize( CEGUI::USize( cegui_reldim( 0.6f ), cegui_reldim( 0.6f )));
+
{
window->setMinSize( CEGUI::USize( cegui_reldim( 0.1f ), cegui_reldim( 0.1f )));
+
    std::stringstream stringStream;
 +
    stringStream << "Window #" << i;
  
glc->addChild( window );
+
    CEGUI::Window* window = CEGUI::WindowManager::getSingletonPtr()->createWindow(
 +
            "TaharezLook/StaticText");
 +
 
 +
    window->setSize( CEGUI::USize( cegui_reldim( 0.1f ), cegui_reldim( 0.1f )));
 +
    window->setText(stringStream.str());
 +
 
 +
    glc->addChild( window );
 +
}
 
</source>
 
</source>
  
 
[[Category:Manuals]]
 
[[Category:Manuals]]

Latest revision as of 11:08, 11 January 2015

Written for CEGUI 0.8


Works with versions 0.8.x (stable)

Works with latest CEGUI stable!

This introduces the concept of widgets that automatically layout their child widgets. Without these layout containers, doing dynamic complex UI was really hard and you had to do a lot of custom code.

Basic concepts

Layout containers are simply widgets that have no visuals to them, they don't render anything, they also usually don't react to any input (this isn't really required but the 3 existing stock layout containers don't react to input themselves). They simply just set their child windows positions in a certain way (depending on the container). When child windows are resized, added or removed, the layout containers relayouts them to match the arrangement.

Inbuilt layout containers

Vertical Layout Container

Arranges child windows one after each other vertically.

Code sample:

CEGUI::VerticalLayoutContainer* layout = static_cast<CEGUI::VerticalLayoutContainer*>(CEGUI::WindowManager::getSingleton().createWindow("VerticalLayoutContainer"));
 
// add windows to the layout
layout->addChild(wnd1);
layout->addChild(wnd2);
 
parentWindow->addChild(layout);

Horizontal Layout Container

Arranges child windows one after each other horizontally.

Horizontal layout container is used exactly the same as vertical layout container.

Grid Layout Container

Arranges child windows into a grid. You have to set grid dimensions before you add any windows to the container.

Basic Example:

// includes: <sstream>, loaded schemes: TaharezLook.scheme
 
CEGUI::GridLayoutContainer *glc = static_cast<CEGUI::GridLayoutContainer*>(CEGUI::WindowManager::getSingletonPtr()->createWindow("GridLayoutContainer", "GLC"));
 
d_root->addChild( glc );
 
glc->setGridDimensions( 2, 3 );
 
for(int i = 0; i < 6; ++i)
{
    std::stringstream stringStream;
    stringStream << "Window #" << i;
 
    CEGUI::Window* window = CEGUI::WindowManager::getSingletonPtr()->createWindow( 
            "TaharezLook/StaticText");
 
    window->setSize( CEGUI::USize( cegui_reldim( 0.1f ), cegui_reldim( 0.1f )));
    window->setText(stringStream.str());
 
    glc->addChild( window );
}