Panel & Layout Manager Tutorial

The use of panels is not imediatly obvious. A panel is a virtual component, that means that is does not display any control on the screen. Its use is that it can automatically position components, this keeps us from making guesses like we did in the Edit Tutorial. The down side is that there is some processing overhead involved. Also there are only three predefined ways to layout components.

Here is our program:

#include <MNGuiLib.h>
BOOL OnButton( MNComponent*, UINT, WPARAM, LPARAM );
int clicked = 0;
LAYOUT_INFO linfo;
MNPanel *p;
int WINAPI WinMain (HINSTANCE hInstance, HINSTANCE hPrevInstance,
                    PSTR szCmdLine, int iCmdShow)
{
  MNWindow win( hInstance, iCmdShow, "Test Edit" );
  MNButton button( &win, "View Text", 0, 120 );
  MNStatic s1( &win, "Type some text:", AUTOPOS, AUTOPOS );
  MNStatic s2( &win, "Type some more text:", AUTOPOS, AUTOPOS );
  MNEdit edit1( &win, AUTOPOS, AUTOPOS, 10 );
  MNEdit edit2( &win, AUTOPOS, AUTOPOS, 15 );
  //Set the information about the layout
  linfo.hgap = 5;
  linfo.vgap = 5;
  linfo.client.top = 0;
  linfo.client.left = 0;
  linfo.client.right = win.GetWidth();
  linfo.client.bottom = win.GetHeight();
  //Create the panel
  p = new MNPanel( &win, linfo, FormLayout );
   
  //Add the components to the panel, order matters
  p->Add( &s1 );
  p->Add( &edit1 );
  p->Add( &s2 );
  p->Add( &edit2 );
  p->Layout();
  win.Show();
 
  button.AddCallBack( OnButton );
  WPARAM param = win.BeginMessageLoop();
  //Delete the edit component
  delete p;
  return param;
}
BOOL OnButton( MNComponent *com, UINT message, WPARAM wParam, LPARAM lParam )
{
  switch ( message )
  {
    case BN_CLICKED:
      //Change the layout
      switch ( clicked )
      {
        case 0:
          p->SetLayout( FlowLayoutL );
          ++clicked;
          break;
        case 1:
          p->SetLayout( FlowLayoutR );
          break;
      }
      p->Layout();
      return TRUE;
  }
  return FALSE;
}

When using a panel it is important to use AUTOPOS for the x, y parameters if you want the layout manager to layout your components (FormLayout disregards a components x, y preference). The FormLayout positions your components so that the odd numbered ones are on the left and the even ones are on the right. Also the right-hand column is left aligned acording to the size of the largest left-handed component. This layout is basically the layout of allmost every form or dialog box. FlowLayoutL lines all your components up in a left aligned horizontal line. If a components x, or y is set to something other than AUTOPOS then it positions it in its prefered location. FlowLayoutR does the same thing as FlowLayoutL except the components are right aligned. There is one layout that is not mentioned here and that is NoLayout this function does nothing and is used for panels that do not want to use a layout manager.