Wednesday, June 10, 2009

Adding a menu bar to the twitter GUI: part 5

Updating to the new Net::Twitter::Lite API
Marc Mims updated the API of his twitter's interface module for Perl.
There are two versions:

In order to use the Lite version (largely sufficient for my modest needs), only trivial changes are needed in the twit_GUI.pl script:
  • replace use Net::Twitter by use Net::Twitter::Lite (duh!)
  • replace calls to Net::Twitter->new() by calls to Net::Twitter::Lite->new()
This ensures that I am now using a module that is actively supported.

Adding a menu bar
A menu bar can only be added to a Frame. According to the wxPerl docs,

A frame is a window whose size and position can (usually) be changed by the user. It usually has thick borders and a title bar, and can optionally contain a menu bar, toolbar and status bar. A frame can contain any window that is not a frame or dialog.
So, let's replace the Dialog occurences with Frame in the script.
The MyApp modules becomes:

  1. ##############################################################################  
  2. #  
  3. package MyApp;  
  4. #  
  5. ##############################################################################  
  6. use vars qw(@ISA);  
  7. @ISA=qw(Wx::App);   # this tells Perl to look for unknown methods in the Wx::App module  
  8.   
  9. use Wx qw(wxDefaultSize wxDefaultPosition);  
  10.   
  11. sub OnInit {  
  12.     my($this) = @_;  
  13.     my $frame = MyFrame->new('Twit', wxDefaultPosition);  
  14.     # set it as top window (so the app will automatically close when   
  15.     # the last top window is closed)  
  16.     $this->SetTopWindow($frame);  
  17.     $frame->Show(1);  
  18.     1;  
  19. }  

package MyDialog becomes package MyFrame:
  1. ##############################################################################  
  2. #  
  3. package MyFrame;  
  4. #  
  5. ##############################################################################  
  6. use vars qw(@ISA);  
  7.   
  8. @ISA=qw(Wx::Frame);  
  9.   
  10. use Wx::Event qw(EVT_BUTTON EVT_CLOSE EVT_TEXT EVT_TEXT_MAXLEN);  
  11. use Wx qw(:sizer  
  12.           :statictext  
  13.           wxDefaultPosition  
  14.           wxDefaultSize  
  15.           wxDefaultValidator  
  16.           wxDEFAULT_DIALOG_STYLE  
  17.           wxID_OK  
  18.           wxOK  
  19.           wxRESIZE_BORDER  
  20.           wxTE_MULTILINE  
  21.           );  
  22.   
  23. use constant MAX_POST_LENGTH => 140;  
  24.   
  25. sub new {  
  26.     my $class = shift;  
  27.     my $password_file;  
  28.   
  29.     # Main window  
  30.     my $form_width  = 480;  
  31.     my $form_height = 195;  
  32.     # Array of line numbers used on the dialog window  
  33.     my @ylines = (0, 10, 20, 40, 80, 100);  
  34.   
  35.     my $this = $class->SUPER::new(  
  36.                             undef,  # parent  
  37.                             -1,     # id  
  38.                             $_[0],  # title  
  39.                             $_[1],  # position [x, y]  
  40.                            [$form_width$form_height# size [width, height]  
  41.                            );  
  42.   
  43.     # Display the Wx icon on the application window  
  44.     $this->SetIcon(Wx::GetWxPerlIcon());  
  45.   
  46.     #--------------------------------------------------------------------------  
  47.     # Menu Bar  
  48.     #--------------------------------------------------------------------------       
  49.     my $file_menu = Wx::Menu->new('');  
  50.     my $menu_bar = Wx::MenuBar->new();  
  51.     $menu_bar->Append($file_menu'&File');  
  52.     $this->SetMenuBar($menu_bar);  
  53.     ...  
Increase the form height by 10 pixels (up to 195) to make room for the menu bar.
And... voilà!

First version of twit script using wxperlEr... not too pretty, let's go back to the doc. Oh wait, what is that about panels?
A panel is a window on which controls are placed. It is usually placed within a frame. It contains minimal extra functionality over and above its parent class wxWindow; its main purpose is to be similar in appearance and functionality to a dialog, but with the flexibility of having any window as a parent.
Ah ah! The trick is to place a wxPanel object inside the frame and then relate every existing GUI element to this panel as the parent window. Previously, all the elements (button, text dialog, etc.) had the wxFrame as a parent window, hence the dark grey background. Just add this line before the Menu Bar code:
  1. # Create a panel where to place GUI elements  
  2. my $panel = Wx::Panel->new($this, -1);  
and replace the $this argument by $panel everywhere you need to set the parent ID.

Now we've got a menu bar element. You can fill it by appending menu elements to it as is shown in the code below. Each menu element can be appended in turn with menu options. The wxFrame::SetMenuBar() method displays a given menu bar.
  1. #--------------------------------------------------------------------------  
  2. # Menu Bar  
  3. #--------------------------------------------------------------------------   
  4. my $menu_bar = Wx::MenuBar->new();  
  5.   
  6. my $file_menu = Wx::Menu->new();   
  7. $file_menu->Append(11, 'E&xit');  
  8. $menu_bar->Append($file_menu'&File');  
  9.   
  10. my $help_menu = Wx::Menu->new();  
  11. $help_menu->Append(21, '&About');  
  12. $menu_bar->Append($help_menu'&Help');  
  13.   
  14. # wxFrame method to show a given menu bar  
  15. $this->SetMenuBar($menu_bar);  
The & in the string (eg: 'E&xit') shows what shortcut will be used in combination with the Alt key (eg: Alt + x for 'E&xit').
To link an event with a menu selection, use the EVT_MENU event:
  1. EVT_MENU($this, 11, \&OnQuit);  
  2. EVT_MENU($this, 21, \&OnAbout)  
The callback methods can be implemented as such:
  1. sub OnQuit {  
  2.     my $this = shift;  
  3.     $this->Close( 1 );  
  4. }  
  5.   
  6. sub OnAbout {  
  7.     my $this = shift;  
  8.     use Wx qw(wxOK wxCENTRE);  
  9.     Wx::MessageBox("twit_GUI $VERSION\n$version_date\n(c)DamienLearnsPerl",  # text  
  10.                    "About",                   # title bar  
  11.                    wxOK|wxCENTRE,             # buttons to display on form  
  12.                    $this                      # parent  
  13.                    );            
  14. }  
End result under Vista? Tadaaa!

Improvement layout using panelsNext step:
- Load/save password files

Find the whole new source code here.

Adding a menu bar to the twitter GUI: part 5

Updating to the new Net::Twitter::Lite API
Marc Mims updated the API of his twitter's interface module for Perl.
There are two versions:

In order to use the Lite version (largely sufficient for my modest needs), only trivial changes are needed in the twit_GUI.pl script:
  • replace use Net::Twitter by use Net::Twitter::Lite (duh!)
  • replace calls to Net::Twitter->new() by calls to Net::Twitter::Lite->new()
This ensures that I am now using a module that is actively supported.

Adding a menu bar
A menu bar can only be added to a Frame. According to the wxPerl docs,

A frame is a window whose size and position can (usually) be changed by the user. It usually has thick borders and a title bar, and can optionally contain a menu bar, toolbar and status bar. A frame can contain any window that is not a frame or dialog.
So, let's replace the Dialog occurences with Frame in the script.
The MyApp modules becomes:

  1. ##############################################################################  
  2. #  
  3. package MyApp;  
  4. #  
  5. ##############################################################################  
  6. use vars qw(@ISA);  
  7. @ISA=qw(Wx::App);   # this tells Perl to look for unknown methods in the Wx::App module  
  8.   
  9. use Wx qw(wxDefaultSize wxDefaultPosition);  
  10.   
  11. sub OnInit {  
  12.     my($this) = @_;  
  13.     my $frame = MyFrame->new('Twit', wxDefaultPosition);  
  14.     # set it as top window (so the app will automatically close when   
  15.     # the last top window is closed)  
  16.     $this->SetTopWindow($frame);  
  17.     $frame->Show(1);  
  18.     1;  
  19. }  

package MyDialog becomes package MyFrame:
  1. ##############################################################################  
  2. #  
  3. package MyFrame;  
  4. #  
  5. ##############################################################################  
  6. use vars qw(@ISA);  
  7.   
  8. @ISA=qw(Wx::Frame);  
  9.   
  10. use Wx::Event qw(EVT_BUTTON EVT_CLOSE EVT_TEXT EVT_TEXT_MAXLEN);  
  11. use Wx qw(:sizer  
  12.           :statictext  
  13.           wxDefaultPosition  
  14.           wxDefaultSize  
  15.           wxDefaultValidator  
  16.           wxDEFAULT_DIALOG_STYLE  
  17.           wxID_OK  
  18.           wxOK  
  19.           wxRESIZE_BORDER  
  20.           wxTE_MULTILINE  
  21.           );  
  22.   
  23. use constant MAX_POST_LENGTH => 140;  
  24.   
  25. sub new {  
  26.     my $class = shift;  
  27.     my $password_file;  
  28.   
  29.     # Main window  
  30.     my $form_width  = 480;  
  31.     my $form_height = 195;  
  32.     # Array of line numbers used on the dialog window  
  33.     my @ylines = (0, 10, 20, 40, 80, 100);  
  34.   
  35.     my $this = $class->SUPER::new(  
  36.                             undef,  # parent  
  37.                             -1,     # id  
  38.                             $_[0],  # title  
  39.                             $_[1],  # position [x, y]  
  40.                            [$form_width$form_height# size [width, height]  
  41.                            );  
  42.   
  43.     # Display the Wx icon on the application window  
  44.     $this->SetIcon(Wx::GetWxPerlIcon());  
  45.   
  46.     #--------------------------------------------------------------------------  
  47.     # Menu Bar  
  48.     #--------------------------------------------------------------------------       
  49.     my $file_menu = Wx::Menu->new('');  
  50.     my $menu_bar = Wx::MenuBar->new();  
  51.     $menu_bar->Append($file_menu'&File');  
  52.     $this->SetMenuBar($menu_bar);  
  53.     ...  
Increase the form height by 10 pixels (up to 195) to make room for the menu bar.
And... voilà!

First version of twit script using wxperlEr... not too pretty, let's go back to the doc. Oh wait, what is that about panels?
A panel is a window on which controls are placed. It is usually placed within a frame. It contains minimal extra functionality over and above its parent class wxWindow; its main purpose is to be similar in appearance and functionality to a dialog, but with the flexibility of having any window as a parent.
Ah ah! The trick is to place a wxPanel object inside the frame and then relate every existing GUI element to this panel as the parent window. Previously, all the elements (button, text dialog, etc.) had the wxFrame as a parent window, hence the dark grey background. Just add this line before the Menu Bar code:
  1. # Create a panel where to place GUI elements  
  2. my $panel = Wx::Panel->new($this, -1);  
and replace the $this argument by $panel everywhere you need to set the parent ID.

Now we've got a menu bar element. You can fill it by appending menu elements to it as is shown in the code below. Each menu element can be appended in turn with menu options. The wxFrame::SetMenuBar() method displays a given menu bar.
  1. #--------------------------------------------------------------------------  
  2. # Menu Bar  
  3. #--------------------------------------------------------------------------   
  4. my $menu_bar = Wx::MenuBar->new();  
  5.   
  6. my $file_menu = Wx::Menu->new();   
  7. $file_menu->Append(11, 'E&xit');  
  8. $menu_bar->Append($file_menu'&File');  
  9.   
  10. my $help_menu = Wx::Menu->new();  
  11. $help_menu->Append(21, '&About');  
  12. $menu_bar->Append($help_menu'&Help');  
  13.   
  14. # wxFrame method to show a given menu bar  
  15. $this->SetMenuBar($menu_bar);  
The & in the string (eg: 'E&xit') shows what shortcut will be used in combination with the Alt key (eg: Alt + x for 'E&xit').
To link an event with a menu selection, use the EVT_MENU event:
  1. EVT_MENU($this, 11, \&OnQuit);  
  2. EVT_MENU($this, 21, \&OnAbout)  
The callback methods can be implemented as such:
  1. sub OnQuit {  
  2.     my $this = shift;  
  3.     $this->Close( 1 );  
  4. }  
  5.   
  6. sub OnAbout {  
  7.     my $this = shift;  
  8.     use Wx qw(wxOK wxCENTRE);  
  9.     Wx::MessageBox("twit_GUI $VERSION\n$version_date\n(c)DamienLearnsPerl",  # text  
  10.                    "About",                   # title bar  
  11.                    wxOK|wxCENTRE,             # buttons to display on form  
  12.                    $this                      # parent  
  13.                    );            
  14. }  
End result under Vista? Tadaaa!

Improvement layout using panelsNext step:
- Load/save password files

Find the whole new source code here.

Monday, June 1, 2009

Perl Iron Man

Ok, I've failed in the Perl Iron Man contest: it has been more than 10 days since last post :(
But after the first thrills due to the project's novelty, there are not a lot of incentives coming from the Perl Iron Man organization (unless I've somehow missed it?):
I was expecting leaderboards, post of the month, constructive critiques of blogs by writing professional, cheering pom pom girls, etc.
I'm feeling a little bit let down right now...

Perl Iron Man

Ok, I've failed in the Perl Iron Man contest: it has been more than 10 days since last post :(
But after the first thrills due to the project's novelty, there are not a lot of incentives coming from the Perl Iron Man organization (unless I've somehow missed it?):
I was expecting leaderboards, post of the month, constructive critiques of blogs by writing professional, cheering pom pom girls, etc.
I'm feeling a little bit let down right now...