Skip to main content

MIG LAYOUT TUTORIAL


In this entry I would like to introduce some basic usage of mig layout.

This is image I take in eclipse, we can use window builder plug-in for drag-draw UI.



Code
Detail
Description
Contructor of MigLayout:
new MigLayout("insets 50 50 0 50", "[74.00]20[165.00][grow]", "[][][]")
-    "insets 50 50 0 50"
-    Decribe margin.
insets top left bottom right
-    "[74.00]20[165.00][grow]"
-    Number of columns
+ [74.00]: size of column 1 is 74px.
+ [74.00]20[165.00]: gap between 1st colum and 2nd is 20px.
[grow]: 3rd column is grow
-    "[][][]"
-    Number of rows.
JLabel lblNewLabel = new JLabel("Label 1");
            panel.add(lblNewLabel, "cell 0 0,alignx leading");
-    "cell 0 0,alignx leading"
-    “Label 1” is put to column 0 and row 0. It’saligned from left to right
JLabel lblNewLabel_2 = new JLabel("Label 3");
            panel.add(lblNewLabel_2,"cell 0 2,alignx trailing");
-    "cell 0 2,alignx trailing"
-    “Label 1” is aligned from right to left.
textField = newJTextField();
            panel.add(textField, "cell 1 0");
-    "cell 1 0"
-    textField is put to 1st column and row 0.
textField_1 = newJTextField();
            panel.add(textField_1, "cell   1 1,growx");
-    "cell 1 1,growx"
-    textField_1 is put to 1st column and 1 row.
-    Growx: witdh of this text field is always equal with width of column.
textField_2 = newJTextField();
            panel.add(textField_2, "cell   1 2,growx,span");
-    "cell 1 2,growx,span"
-    Span: this text field is put to columns, 1st column is 1 (cell 1 2) and others are rest of columns in layout.
-    “span colums rows”
Labels:

Comments

Post a Comment

Popular posts from this blog

How to Install SQL Server on MacOS with docker

 I'm writing a small tut for who need to install SQL Server on macOS using docker Step 1: Download the SQL Server Image sudo docker pull mcr.microsoft.com/mssql/server:2019-latest Step 2: Launch the SQL Server Image in Docker docker run -d --name example_sql_server -e 'ACCEPT_EULA=Y' -e 'SA_PASSWORD=Pass.word-123' -p 1433:1433 mcr.microsoft.com/mssql/server:2019-latest Step 3: Check the SQL Server Docker Container docker ps -a Step 4: Install SQL Server Command-Line Tool sudo npm install -g sql-cli Step 5: Connect to SQL Server  5.1 Using Command mssql -u sa -p Pass.word-123 5.2: Using VSCode to connect to sql server Using the extension SQL Server (mssql)
Post a Comment
Read more

Create Grid using React native

After fist post about react native I feel I'm getting familiar with react native, this framework quite easy to use, today I continue with another tutorial about create a simple grid card in react native. Let see the our final result first:                             Let's start... Analytics Assump our data has below structure: We have an array of rows and each row has an array of columns, then I decided to use FlatList to display object in cloumns array in horizontal direction, you can imaging like below image. Gridcard design Card Item each card has a logo and a text. I'm using the Icon from lib react-native-vector-icons To have a flatlist in horizontal we use  horizontal = {true} property, and to make sure the width of flatlist is same as screen with we use  contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }} Grid Now the implementation quite easy now, just need to...
Post a Comment
Read more