Saturday Jun 09

Links

Books

Key Concepts

User Menu

AddThis

AddThis Social Bookmark Button

MigLayout Tutorial

PDFPrintE-mail
Tuesday, 19 July 2011 12:09
AddThis Social Bookmark Button

For Java developers writing GUI layouts by hand that wants simplicity, power and automatic per platform fidelity, that are dissatisfied with the current layout managers in Swing, JavaFX and SWT, MigLayout solves those layout problems. User interfaces created with MigLayout are easy to maintain, you will understand how the layout will look like just by looking at the source code.

This article will give some basic example to increase your learning curve or learn new attributes

Difference between grow and push using MigLayout

In the following example we are creating a container (parent container) with three children called component 1,component 2 and component 3. The size of them is defined using the form "min:preferred:max" but we are defining only the preferred size (100px). 

MigLayout push and grow example

MigLayout sample java code

     JPanel parentContainer = new JPanel(new MigLayout("fillx,insets 1"));
     JPanel component1 = new JPanel();
     component1.setBackground(Color.GRAY);
     parentContainer.add(component1, "width :100:");
     
     JPanel component2 = new JPanel();
     component2.setBackground(Color.GRAY);
     parentContainer.add(component2, "width :100:");
     
     JPanel component3 = new JPanel();
     component3.setBackground(Color.GRAY);
     parentContainer.add(component3, "width :100:");
     return parentContainer;

With the current parameter if we resize the parent container the size of the components is still 100 px and all components are aligned on the left in their respective "column".

MigLayout parent container resized

Push Attribute

In the next example we will introduce the push attribute  

MigLayout push attribute example

MigLayout push example java source code

parentContainer.add(component1, "width :100:,push");

When we resize the parent container we noticed that the component 1 is pushing the component 2 and 3 but keep his preferred size 

MigLayout push attribute example

Grow attribute

Let's take a look at the grow attribute 

MigLayout grow

MigLayout grow example java source code

parentContainer.add(component1, "width :100:,grow");

In the next mockup we noticed that the component1 is taking all the space available but has not effect on the component 2 and 3

MigLayout grow resized example

Grow and push attribute

In this example we will combine both grow and push attributes 

MigLayout grow and push

MigLayout grow and push example java source code

parentContainer.add(component1, "width :100:,grow,push");

We noticed that the component 1 is reducing the space available for component 2 and 3 and take all the space available
MigLayout push and grow resized example

Split attribute

In the following example we will use the split attribute to align on the right border our two ok and cancel button located in the Button Panel.

To do it we will use the split attribute to split the cell in two and align the first button on the right to obtain the requested layout.

MigLayout split attribute sample

MigLayout example split attribute

        JPanel buttonPanel = new JPanel(new MigLayout("fillx,insets 0"));
        
        //Ok button
        JButton okButton = new JButton("Ok");
        okButton.setMnemonic('O');
        buttonPanel.add(okButton, "split,right,width 100!");
        
        //Cancel button
        JButton cancelButton = new JButton("Cancel");
        cancelButton.setMnemonic('C');
        buttonPanel.add(cancelButton, "width 100!");
        
        return buttonPanel;

If you enjoyed this tutorial and want to promote it don't hesitate to click on 

Tags: component, push, attribute, grow, jpanel, width, button