Layout Guide

IUP - Portable User Interface

Layout Guide

Native Sizes (Window and Client)

Because of the dynamic nature of the abstract layout IUP elements have implicit many types of size. But the native elements have only two types of size: Window and Client. The Window size reflects the bounding rectangle of the element. The Client size reflects the inner size of the window that excludes the decorations and margins. For many elements these two sizes are equal, but for many container they are quite different. See some examples bellow.

The native Client size is used only internally to reposition the elements in the abstract layout, but it is available using the CLIENTSIZE attribute.

IUP Sizes

Natural Size

IUP does not require that the application specifies the size of any element. The sizes are automatically calculated so the contents of each element is fully displayed. This size is called Natural size. The Natural size is calculated only when the element is mapped to the native system.

The Natural size of a dialog is the size that allows all the elements inside the dialog to be fully displayed, and so on for all the containers inside the dialog.

So consider the following code and its result. Each button size is large enough to display their respective text. If the dialog size is increased or reduced by the size handlers in the dialog borders the buttons do not move or change their sizes.

dlg = iup.dialog
{
  iup.vbox
  {
    iup.button{title="Button Very Long Text"},
    iup.button{title="short"},
    iup.button{title="Mid Button"}
  }
  ;title="IupDialog", font="HELVETICA_BOLD_14" 
}
dlg:show()

Current Size and User Size (SIZE or RASTERSIZE)

In IUP the returned value for SIZE or RASTERSIZE reflects always the native Window size of the element. The returned size is called the Current size in IUP. But the Current size is available only after the element has been mapped to the native system. Before mapping, the returned value is the defined SIZE or RASTERSIZE attributes if any, otherwise they are NULL.

When the attributes SIZE or RASTERSIZE are defined by the application they work as a replacement for the Natural size if not a container, if a container then it work as the minimum size for the container. When defined they are called the User size in IUP.

Defining the SIZE attribute of the buttons in the example we can make all have the same size. (In the following example the dialog size was changed after it was displayed on screen)

dlg = iup.dialog
{
  iup.vbox
  {
    iup.button{title="Button Very Long Text", size="50x"},
    iup.button{title="short", size="50x"},
    iup.button{title="Mid Button", size="50x"}
  }
  ;title="IupDialog", font="HELVETICA_BOLD_14" 
}
dlg:show()

So for elements that are not containers the Natural size is ignored and the User size is used instead. For elements that are containers if the Natural size is smaller than the User size, then the User size will be used instead.

EXPAND

Another way to increase the size of elements is to use the EXPAND attribute. When there is room in the container to expand an element the container layout will expand the elements that have the EXPAND attribute set to YES, HORIZONTAL or VERTICAL accordingly, even if they have the User size defined.

dlg = iup.dialog
{
  iup.vbox
  {
    iup.button{title="Button Very Long Text"},
    iup.button{title="short", expand="HORIZONTAL"},
    iup.button{title="Mid Button", expand="HORIZONTAL"}
  }
  ;title="IupDialog", font="HELVETICA_BOLD_14" 
}
dlg:show()