Flexible box model in mgwt

Before you start reading this, you should know what the flexible box model is and what it is used for. In case you need a refresher, there are many good articles about it on the web - for example at CSS tricks.

FlexPanel

A FlexPanel is just a div with the property display:flex to enable the flexible box model. That means that from now on all children can be layouted using the flexible box model. The FlexPanel also sets the default orientation to vertical, since this is what is mostly needed on mobile devices.

RootFlexPanel

The RootFlexPanel behaves like a FlexPanel except that the RootFlexPanel has the size of its parent by default.

FlexSpacer

A FlexSpacer is a div with flex=1. This means that the div expands to the available size.

FixedSpacer

A FixedSpacer is a div with a fix width of 60px. The FixedSpacer has the same size like a button so that it can be used as a placeholder and help to center other elements.

Usecase

A typical usecase for FlexSpacer and FixedSpacer: A HeaderPanel has a backbutton on the left and a title which should be centered. To achieve this FlexSpacer and FixedSpacer can be used the following way:

<mgwt:header.HeaderPanel>
  <mgwt:button.image.PreviousitemImageButton>Back</mgwt:button.image.PreviousitemImageButton>
  <mgwt:panel.flex.FlexSpacer/>
  <mgwt:header.HeaderTitle>Title</mgwt:header.HeaderTitle>
  <mgwt:panel.flex.FlexSpacer/>
  <mgwt:panel.flex.FixedSpacer/>
</mgwt:header.HeaderPanel>