fsmendoza has asked for the wisdom of the Perl Monks concerning the following question:

Dear Perlmonk experts,

I'm designing my simple GUI and i could not find a way to get rid of the spaces between the label and entry box in my output GUI and align them. Please advice on what will be the best way to do this.

Thank you. 

use strict;                    # module to must always declare variabl
+es before you use them
use warnings;                # module to show where is the error 
use Tk;                        # module for the Windows GUI


my $mainwindow = MainWindow->new();
$mainwindow->geometry("600x150");
$mainwindow->title("Window");

# Disable the window Resize
$mainwindow->resizable(0,0);

# Menu display option
my $main_menu = $mainwindow->Menu();
$mainwindow->configure(-menu => $main_menu);

#File
my $file_menu = $main_menu->cascade(-label=>"File", -underline => 0, -
+tearoff=>0);
   $file_menu->command(-label=>"New", -underline=>0, -command=>sub{exi
+t}, -state => 'disabled');
   $file_menu->command(-label=>"Exit", -underline=>0, -command=>sub{ex
+it});
   
# About
$main_menu->command(-label=>"About", -command=>sub{$mainwindow->messag
+eBox(-title=> "About", -message=>"Version 3.0.0", -type => "ok")});

# text variable
my $label_firstname;
my $entry_firstname;
my $label_lastname;
my $entry_lastname;
my $label_loginid;
my $entry_loginid;
my $button_add;

# -anchor =>  'e' | 'w' | 'n' | 's' | 'ne' | 'nw' | 'se' | 'sw' | 'cen
+ter'

#            top
################################
# nw        n         ne #
#                   #
# w        center          e  #
#                   #
# sw        s         se #
################################
#        bottom

$label_firstname = $mainwindow->Label(-text => 'Firstname:')->pack (-a
+nchor => 'nw');
$entry_firstname = $mainwindow->Entry(-width => 35,-text => 'Firstname
+')->pack (-anchor => 'n' );

$label_lastname = $mainwindow->Label(-text => 'Lastname:')->pack (-anc
+hor => 'nw');
$entry_lastname = $mainwindow->Entry(-width => 35,-text => 'Lastname')
+->pack (-anchor => 'n');

$label_loginid = $mainwindow->Label(-text => 'Login ID:')->pack( -anch
+or => 'nw');
$entry_loginid = $mainwindow->Entry(-width => 35,-text => 'loginID')->
+pack (-anchor => 'n');

$button_add = $mainwindow->Button(-text => 'Add New User', -command=>s
+ub{exit})->pack(-anchor => 'se');

MainLoop();

[download]

Replies are listed 'Best First'.
Re: how to align the label and entry text box in my tk GUI
by kcott (Archbishop) on Mar 20, 2017 at 07:46 UTC

    G'day fsmendoza,

    I've always found that Tk::grid, rather than Tk::pack, is the better geometry manager for this task.

    I would, however, advise that you lay out your GUI with frames (Tk::Frame, or even Tk::LabFrame) using pack. Then, within whichever frame(s) you want for your label and entry widgets, use grid.

    You should also aim to avoid a monolithic script with all variables having file-scope: not doing so leads to all the same problems experienced with global variables. You're already using lexical variables, which is good; limit their scope within subroutines, anonymous blocks, or similar constructs.

    — Ken

[reply]
[d/l]
[select]
Re: how to align the label and entry text box in my tk GUI
by huck (Prior) on Mar 20, 2017 at 08:25 UTC

    I Tkx rather than Tk but the ideas are the same.

    As kcott taked about i use grid on the frame parts, and pack the frame into mainwindow 

    use strict;        
use warnings;        
use Tkx;        


my $mainwindow = Tkx::widget->new(".");
$mainwindow->g_wm_geometry("600x150");
$mainwindow->g_wm_title("Window");

# Disable the window Resize
$mainwindow->g_wm_resizable(0,0);

# text variable
my $label_firstname;
my $entry_firstname;
my $label_lastname;
my $entry_lastname;
my $label_loginid;
my $entry_loginid;
my $button_add;


# make a frame and pack it into mainwindow 
my $w_frm = $mainwindow->new_ttk__frame();
$w_frm->g_pack(qw '-fill both -expand true');

# make parts and grid them into frame 
$label_firstname = $w_frm->new_label(-text => 'Firstname:')
                         ->g_grid(-column => 0, -row => 0, -sticky => 
+"we");
$entry_firstname = $w_frm->new_entry(-width => 35,-text => 'Firstname'
+,-justify=>'left')
                         ->g_grid(-column => 1, -row => 0, -sticky => 
+"we");

$label_lastname = $w_frm->new_label(-text => 'Lastname:')
                         ->g_grid(-column => 0, -row => 1, -sticky => 
+"we");
$entry_lastname = $w_frm->new_entry(-width => 35,-text => 'Lastname')
                         ->g_grid(-column => 1, -row => 1, -sticky => 
+"we");

$label_loginid = $w_frm->new_label(-text => 'Login ID:')
                         ->g_grid(-column => 0, -row => 2, -sticky => 
+"we");
$entry_loginid = $w_frm->new_entry(-width => 35,-text => 'loginID')
                         ->g_grid(-column => 1, -row => 2, -sticky => 
+"we");

  Tkx::MainLoop;

    [download]
    you should be able to translate into Tk

[reply]
[d/l]
Re: how to align the label and entry text box in my tk GUI
by zentara (Cardinal) on Mar 20, 2017 at 19:21 UTC
    Hi, this is a good time for grid use, but I like using frames because they resize better. So here is your script rewritten using multiple frames. I used -anchor => 'w' on the first frame so you can see the difference between it and the other frames which are centered. Read Tk::pack for all the options. Notice I also added 2 spaces to your login label to make things line up. There is a Tk::LabEntry module on cpan which makes this all easier. This is doing it manually, but you learn more. :-) 
    #!/usr/bin/perl
use strict;                    # module to must always declare variabl
+es before you use them
use warnings;                # module to show where is the error 
use Tk;                        # module for the Windows GUI


my $mainwindow = MainWindow->new();
$mainwindow->geometry("600x150");
$mainwindow->title("Window");

# Disable the window Resize
$mainwindow->resizable(0,0);

# Menu display option
my $main_menu = $mainwindow->Menu();
$mainwindow->configure(-menu => $main_menu);

#File
my $file_menu = $main_menu->cascade(-label=>"File", -underline => 0, -
+tearoff=>0);
   $file_menu->command(-label=>"New", -underline=>0, -command=>sub{exi
+t}, -state => 'disabled');
   $file_menu->command(-label=>"Exit", -underline=>0, -command=>sub{ex
+it});
   
# About
$main_menu->command(-label=>"About", -command=>sub{$mainwindow->messag
+eBox(-title=> "About", -message=>"Version 3.0.0", -type => "ok")});

# text variable
my $label_firstname;
my $entry_firstname;
my $label_lastname;
my $entry_lastname;
my $label_loginid;
my $entry_loginid;
my $button_add;

# -anchor =>  'e' | 'w' | 'n' | 's' | 'ne' | 'nw' | 'se' | 'sw' | 'cen
+ter'

#            top
################################
# nw        n         ne #
#                   #
# w        center          e  #
#                   #
# sw        s         se #
################################
#        bottom

my $firstframe = $mainwindow->Frame()->pack(-expand=>1, -anchor => 'w'
+ );

$label_firstname = $firstframe->Label(-text => 'Firstname:')->pack (-s
+ide => 'left');
$entry_firstname = $firstframe->Entry(-width => 35,-text => 'Firstname
+')->pack (-side => 'left' );

my $lnframe = $mainwindow->Frame()->pack(-expand=>1 );

$label_lastname = $lnframe->Label(-text => 'Lastname:')->pack (-side =
+> 'left');
$entry_lastname = $lnframe->Entry(-width => 35,-text => 'Lastname')->p
+ack (-side => 'left');

my $loginframe = $mainwindow->Frame()->pack(-expand=>1 );

$label_loginid = $loginframe->Label(-text => 'Login ID:  ')->pack(-sid
+e => 'left');
$entry_loginid = $loginframe->Entry(-width => 35,-text => 'loginID')->
+pack (-side => 'left');

my $buttonframe = $mainwindow->Frame()->pack(-expand=>1 );

$button_add = $buttonframe->Button(-text => 'Add New User', -command=>
+sub{exit})->pack();

MainLoop();

    [download]
    I'm not really a human, but I play one on earth.
    Old Perl Programmer Haiku ................... flash japh
[reply]
[d/l]
Re: how to align the label and entry text box in my tk GUI
by beech (Parson) on Mar 20, 2017 at 08:33 UTC

    Hi,

    You can use Tk::grid instead of Tk::pack, this example from the widget demo program that comes with Tk 

    {
## Tk/demos/widget_lib/form.pl
    my $f = $mainwindow->Frame->pack(-fill => 'both');
    my $row = 0;
    foreach ('Name:', 'Address:', '', '', 'Phone:') {
        warn $row;
        my $e = $f->Entry(qw/-relief sunken -width 40/);
        my $l = $f->Label(-text => $_, -anchor => 'e', -justify => 'ri
+ght');
        $l->grid(-row => $row, -column => 0, -sticky => 'e');
        $e->grid(-row => $row++, -column => 1,-sticky => 'ew');
        $f->gridRowconfigure(1,-weight => 1);
        $e->focus if $_ eq 'Name:';
    }

}

    [download]
[reply]
[d/l]
Re: how to align the label and entry text box in my tk GUI
by Marshall (Canon) on Mar 20, 2017 at 08:23 UTC
    I have previously advised you to use TK::Frame. pack() is a fine geometry manager vs grid(), but you should think about Frames.
[reply]
Re: how to align the label and entry text box in my tk GUI
by tybalt89 (Monsignor) on Mar 20, 2017 at 17:27 UTC 
    #!/usr/bin/perl

# http://perlmonks.org/?node_id=1185225

use strict;       # module to must always declare variables before you
+ use them
use warnings;     # module to show where is the error 
use Tk;           # module for the Windows GUI

my $mainwindow = MainWindow->new();
$mainwindow->geometry("600x150");
$mainwindow->title("Window");

# Disable the window Resize
$mainwindow->resizable(0,0);

# Menu display option
my $main_menu = $mainwindow->Menu();
$mainwindow->configure(-menu => $main_menu);

#File
my $file_menu = $main_menu->cascade(-label=>"File", -underline => 0, -
+tearoff=>0);
   $file_menu->command(-label=>"New", -underline=>0,
    -command=>sub{exit}, -state => 'disabled');
   $file_menu->command(-label=>"Exit", -underline=>0, -command=>sub{ex
+it});
   
# About
$main_menu->command(-label=>"About",
  -command=>sub{$mainwindow->messageBox(-title=> "About",
  -message=>"Version 3.0.0", -type => "ok")});

# text variable
my $label_firstname;
my $entry_firstname;
my $label_lastname;
my $entry_lastname;
my $label_loginid;
my $entry_loginid;
my $button_add;

# -anchor =>  'e' | 'w' | 'n' | 's' | 'ne' | 'nw' | 'se' | 'sw' | 'cen
+ter'

#            top
################################
# nw        n         ne #
#                   #
# w        center          e  #
#                   #
# sw        s         se #
################################
#        bottom

my $f1 = $mainwindow->Frame->pack;
$label_firstname = $f1->Label(-text => 'Firstname:', -width => 10, -an
+chor => 'e',
  )->pack (-side => 'left');
$entry_firstname = $f1->Entry(-width => 35,-text => 'Firstname',
  )->pack (-side => 'left');

my $f2 = $mainwindow->Frame->pack;
$label_lastname = $f2->Label(-text => 'Lastname:', -width => 10, -anch
+or => 'e',
  )->pack (-side => 'left');
$entry_lastname = $f2->Entry(-width => 35,-text => 'Lastname',
  )->pack (-side => 'left');

my $f3 = $mainwindow->Frame->pack;
$label_loginid = $f3->Label(-text => 'Login ID:', -width => 10, -ancho
+r => 'e',
  )->pack( -side => 'left');
$entry_loginid = $f3->Entry(-width => 35,-text => 'loginID',
  )->pack (-side => 'left');

$button_add = $mainwindow->Button(-text => 'Add New User',
  -command=>sub{exit})->pack(-anchor => 'se');

MainLoop();

    [download]

    Though I agree with the monks that suggest using ->grid

[reply]
[d/l]
Re: how to align the label and entry text box in my tk GUI
by tybalt89 (Monsignor) on Mar 20, 2017 at 20:14 UTC

    And here's a version with ->grid using -sticky => 'e' to right justify the labels.
    Note no -anchor needed. 

    #!/usr/bin/perl

# http://perlmonks.org/?node_id=1185225

use strict;       # module to must always declare variables before you
+ use them
use warnings;     # module to show where is the error 
use Tk;           # module for the Windows GUI

my $mainwindow = MainWindow->new();
$mainwindow->geometry("600x150");
$mainwindow->title("Window");

# Disable the window Resize
$mainwindow->resizable(0,0);

# Menu display option
my $main_menu = $mainwindow->Menu();
$mainwindow->configure(-menu => $main_menu);

#File
my $file_menu = $main_menu->cascade(-label=>"File", -underline => 0, -
+tearoff=>0);
   $file_menu->command(-label=>"New", -underline=>0,
    -command=>sub{exit}, -state => 'disabled');
   $file_menu->command(-label=>"Exit", -underline=>0, -command=>sub{ex
+it});
   
# About
$main_menu->command(-label=>"About",
  -command=>sub{$mainwindow->messageBox(-title=> "About",
  -message=>"Version 3.0.0", -type => "ok")});

# text variable
my $label_firstname;
my $entry_firstname;
my $label_lastname;
my $entry_lastname;
my $label_loginid;
my $entry_loginid;
my $button_add;

# -anchor =>  'e' | 'w' | 'n' | 's' | 'ne' | 'nw' | 'se' | 'sw' | 'cen
+ter'

#            top
################################
# nw        n         ne #
#                   #
# w        center          e  #
#                   #
# sw        s         se #
################################
#        bottom

my $f1 = $mainwindow->Frame->pack; # Frame that will hold the grid

$label_firstname = $f1->Label(-text => 'Firstname:',
  )->grid(-row => 0, -column => 0, -sticky => 'e');
$entry_firstname = $f1->Entry(-width => 35,-text => 'Firstname',
  )->grid(-row => 0, -column => 1);

$label_lastname = $f1->Label(-text => 'Lastname:',
  )->grid(-row => 1, -column => 0, -sticky => 'e');
$entry_lastname = $f1->Entry(-width => 35,-text => 'Lastname',
  )->grid(-row => 1, -column => 1);

$label_loginid = $f1->Label(-text => 'Login ID:',
  )->grid(-row => 2, -column => 0, -sticky => 'e');
$entry_loginid = $f1->Entry(-width => 35,-text => 'loginID',
  )->grid(-row => 2, -column => 1);

$button_add = $mainwindow->Button(-text => 'Add New User',
  -command=>sub{exit})->pack(-anchor => 'se');

MainLoop();

    [download]
[reply]
[d/l]
Re: how to align the label and entry text box in my tk GUI
by fsmendoza (Novice) on Mar 21, 2017 at 04:29 UTC

    Dear Perlmonk Expers - @kcott, @beech, @Marshall, @huck, @tybalt89, @zentara, @RonW,

    Thank you all for your support after trying all the codes I think I will go to the frame as Zentara shared. 

    #!/usr/bin/perl
# http://www.perlmonks.org/?node_id=1185225
use strict;                    # module to must always declare variabl
++es before you use them
use warnings;                # module to show where is the error 
use Tk;                        # module for the Windows GUI


my $mainwindow = MainWindow->new();
$mainwindow->geometry("600x150");
$mainwindow->title("Window");

# Disable the window Resize
$mainwindow->resizable(0,0);

# Menu display option
my $main_menu = $mainwindow->Menu();
$mainwindow->configure(-menu => $main_menu);

#File
my $file_menu = $main_menu->cascade(-label=>"File", -underline => 0, -
+tearoff=>0);
   $file_menu->command(-label=>"New", -underline=>0, -command=>sub{exi
+t}, -state => 'disabled');
   $file_menu->command(-label=>"Exit", -underline=>0, -command=>sub{ex
+it});
   
# About
$main_menu->command(-label=>"About", -command=>sub{$mainwindow->messag
+eBox(-title=> "About", -message=>"Version 3.0.0", -type => "ok")});

# text variable
my $label_firstname;
my $entry_firstname;
my $label_lastname;
my $entry_lastname;
my $label_loginid;
my $entry_loginid;
my $button_add;

# -anchor =>  'e' | 'w' | 'n' | 's' | 'ne' | 'nw' | 'se' | 'sw' | 'cen
+ter'

#            top
################################
# nw        n         ne #
#                   #
# w        center          e  #
#                   #
# sw        s         se #
################################
#        bottom

my $firstframe = $mainwindow->Frame()->pack(-expand=>1, -anchor => 'w'
+ );

$label_firstname = $firstframe->Label(-text => 'Firstname:')->pack (-s
+ide => 'left');
$entry_firstname = $firstframe->Entry(-width => 35,-text => 'Firstname
+')->pack (-side => 'left' );

my $lnframe = $mainwindow->Frame()->pack(-expand=>1, -anchor => 'w'  )
+;

$label_lastname = $lnframe->Label(-text => 'Lastname:')->pack (-side =
+> 'left');
$entry_lastname = $lnframe->Entry(-width => 35,-text => 'Lastname')->p
+ack (-side => 'left');

my $loginframe = $mainwindow->Frame()->pack(-expand=>1, -anchor => 'w'
+  );

$label_loginid = $loginframe->Label(-text => 'Login ID:  ')->pack(-sid
+e => 'left');
$entry_loginid = $loginframe->Entry(-width => 35,-text => 'loginID')->
+pack (-side => 'left');

my $buttonframe = $mainwindow->Frame()->pack(-expand=>1, -anchor => 'w
+'  );

$button_add = $buttonframe->Button(-text => 'Add New User', -command=>
+sub{exit})->pack();

MainLoop();

    [download]
[reply]
[d/l]
Re: how to align the label and entry text box in my tk GUI
by RonW (Parson) on Mar 20, 2017 at 22:58 UTC

    You could try a LabEntry widget, which is a "short cut" for label and and an entry pre-packed together (in a frame) to behave like a single widget.

    However, I usually prefer more control over layout, so use the separate widgets. The apparent spacing of widgets can be adjusted by specifying the widget spacing.

[reply]
[d/l]

Back to Seekers of Perl Wisdom