Saturday, May 9, 2009

Adding a wxPerl GUI to the twitter script: part 3 - Polishing up the UI

Last time I wrote about the WxPerl twitter GUI, I made a nice little drawing about what I wanted to achieve.
The first try wasn't too far off but a few functionalities are still missing. One of them is the real-time updating of the remaining text characters (from a limit of 140). Obviously, what I need is an event on a key stroke to update the number of characters.

WxEvents documentation
Command events can be handled by macros listed in the WxWidget/WxPerl's manual under the wxCommandEvent page.
Of interest to the twitter GUI script are:

EVT_TEXT(id, func) Process a wxEVT_COMMAND_TEXT_UPDATED command, which is generated by a wxTextCtrl control.
EVT_TEXT_MAXLEN(id, func) Process a wxEVT_COMMAND_TEXT_MAXLEN command, which is generated by a wxTextCtrl control when the user tries to enter more characters into it than the limit previously set with SetMaxLength.

The first macro (EVT_TEXT) can be linked to the TextControl box where the message is being typed. Whenever a character is added or removed to the update message, the event handler will compute and display the remaining characters left before hitting the 140 limit.
The EVT_TEXT_MAXLEN macro will link the update message's TextControl to a subroutine that will be called when 140 characters have been inputted.

Code
When using WxPerl constants, the first thing to remember is to declare them at the beginning of the package.

use Wx::Event qw(EVT_BUTTON EVT_CLOSE EVT_TEXT EVT_TEXT_MAXLEN);

To find out the complete list of symbols, you can check the Wx source code in the lib/Wx/Wx_Exp.pm file located in your Perl directory. In this file, you will also be able to see all existing tags created to group related constants. For example, 'statictext' is defined as:

$EXPORT_TAGS{'statictext'} = [ qw(wxALIGN_LEFT
wxALIGN_CENTRE
wxALIGN_CENTER
wxALIGN_RIGHT
wxST_NO_AUTORESIZE
wxST_ELLIPSIZE_START
wxST_ELLIPSIZE_MIDDLE
wxST_ELLIPSIZE_END
wxST_MARKUP) ];

Writing the following line in your program:

use Wx qw(:statictext);

will import all nine constants listed above.

Coming back to our problem at hand, if we create a TextControl and StaticText objects like this

#
# Text control to enter message to twit
#
$this->{update_text} = Wx::TextCtrl->new(
$this, # parent window
-1, # control identifier
"Type your message here", # default text value
[20, $ylines[3]], # text control position [x, y]
[435, 35], # text control size [width, height]
wxTE_MULTILINE # style: wxTE_MULTILINE=The text control allows multiple lines
);

# A EVT_TEXT_MAXLEN event is generated when the number of characters in the update_text control
# reaches the maximum passed value.
$this->{update_text}->SetMaxLength(MAX_POST_LENGTH);

#
# Static text placed at the top-right position of the text control
#
Wx::StaticText->new(
$this, # parent
-1, # id
'characters left', # label
[$form_width - 95, $ylines[2]] # position [x, y]
);

#
# Static text displaying number of characters left before reaching the max amount
#
$this->{static_text}{'CharsLeft'} = Wx::StaticText->new(
$this, # parent
-1, # id
MAX_POST_LENGTH - $this->{update_text}->GetLastPosition, # label
[$form_width - 115, $ylines[2]], # position [x, y]
wxDefaultSize, # size
Wx::wxALIGN_RIGHT # style. Not implemented yet?
);

then calling the following event handlers

# Events associated to the update_text Control
# EVT_TEXT_MAXLEN is generated when the length of the Text control
# becomes larger than the value set by SetMaxLength
EVT_TEXT_MAXLEN($this, $this->{update_text}, \&MaxTextReached);

# EVT_TEXT is generated when a character is typed inside the Text control
# We use it to update the display of characters left for message
EVT_TEXT($this, $this->{update_text}, \&CountCharsLeft);

with the subroutines definition being:

sub CountCharsLeft {
my($this, $event) = @_;

# Update number of remaining characters = MAX - current text size
my $chars_left = MAX_POST_LENGTH - $this->{update_text}->GetLastPosition;
$this->{static_text}{'CharsLeft'}->SetLabel($chars_left);
}

sub MaxTextReached {
my($this, $event) = @_;

Wx::MessageBox(
"You have reached the maximum number of characters", # text
"Update too big", # title bar
wxOK, # buttons to display on form
$this # parent
);
}
then every time that {update_text} is edited, CountCharsLeft() will be called and will reset the label for {static_text}{'CharsLeft'} with the new value computed from {update_text}->GetLastPosition.
I couldn't achieve right-aligning the number of characters. From reading the Wx::Perl::Dialog source, I do not think that the style argument is supported yet.

The result?

Now one step further to accomplish my goal of being able to understand Padre's code once I put my nose in it...


4 comments :

  1. Hmm. You do realize all the big Padre contributors had no idea about Wx before they started? Just jump right in! Due to the diversity of time zones, there's almost always somebody around who's willing to help you!

    Maybe you could also use the opportunity of the Padre plugin contest.

    ReplyDelete
  2. @smueller
    I wish I could look into the plugins but I can't get the latest version of Padre (0.35) to work on Vista :(

    ReplyDelete
  3. I stumbled on this blog seeing the title of your blog.
    "Damien Learns Perl". Damien, I thought, Damien Conway?
    But, alas, I was mistaken.

    I'm now happy that I went through your blog. Nice work, Nice theme and Nice language. ;)

    Cool

    ReplyDelete
  4. @em.techie, thanks for the kind words. Damian Conway is actually spelled with a "a". That should have ticked you off ;)

    ReplyDelete