Building a twitter-like character limited input using rctk

I’ve blogged before about RCTK, my python UI toolkit. As a test, I’m writing a Twitter client, and of course I need a way to restrict the input to 140 characters. I was amazed at how easy this was using RCTK.

To give you an impression, the relevant UI is defined in XML (but you can of course also just do it declaratively in Python):

<object class="Panel">
    <width>465</width>
    <object class="GridLayout">
        <columns>2</columns>
        <rows>3</rows>
        <object class="StaticText">
            <text>What are you doing?</text>
            <flags>
              <row>0</row>
              <column>0</column>
                <sticky>WEST</sticky>
            </flags>
        </object>
        <object class="StaticText" name="charsleft">
            <text>140 characters left</text>
            <flags>
                <sticky>EAST</sticky>
              <row>0</row>
              <column>1</column>
            </flags>
        </object>
        <object class="Text" name="input">
            <width>465</width>
            <rows>2</rows>
            <flags>
                <sticky>EAST|WEST</sticky>
                <row>1</row>
                <column>0</column>
                <colspan>2</colspan>
            </flags>
        </object>
        <object class="Button" name="update">
            <text>Update</text>
            <flags>
                <sticky>EAST</sticky>
                <row>2</row>
                <column>0</column>
                <colspan>2</colspan>
            </flags>
        </object>
    </object>
    <flags>
        <sticky>EAST|WEST</sticky>
    </flags>
</object>

Declaratively, in Python, it would look like this (untested):

p = Panel(tk)
p.setLayout(GridLayout(rows=3, columns=2))
l1 = StaticText(tk, "What are you doing?")
self.storage.charsleft = StaticText(tk, "140 characters left")
self.storage.input = Text(tk, rows=2)
self.storage.update = Button(tk, "Update")
p.append(l1, GridLayout.WEST, row=0, column=0)
p.append(l2, GridLayout.EAST, row=0, column=1)
p.append(self.storage.input, GridLayout.EAST|GridLayout.WEST, colspan=2, row=1, column=0)
p.append(self.storage.update, GridLayout.EAST, row=2, column=1)

This defines a 2 column, 3 row layout. The first row contains the “What are you doing” and “.. characters left” messages. The second row contains the textarea to type text into, the last one the update button.

The accompanying code to implement the character limiting behaviour:

    ... 
        self.storage.input.keypress = self.handle_keypress
    ...
    def handle_keypress(self, event):
        chars_typed = len(self.storage.input.value)
        chars_left = 140 - chars_typed
        if chars_left == 1:
            self.storage.charsleft.text = "1 character left"
        else:
            self.storage.charsleft.text = "%d characters left" % chars_left
        if chars_left < 0:
            self.storage.update.enabled = False
            self.storage.charsleft.foreground = "red"
        else:
            self.storage.update.enabled = True
            self.storage.charsleft.foreground = "black"

That’s all! As soon as you’ve typed more than 140 characters, the update button will be disabled, and the “.. characters left” message will turn red.

In case you’re thinking “What’s so special about this? Gtk+/tkInter/wx can do this just as easy!”, realize that RCTK produces what most people would call a web application, i.e. one that you access using a web browser over the network!

Consider what it would be like to implement the above as a Plone Archetypes widget or in a Django form. You’d probably be coding a lot of html/javascript!

Last updated April 18, 2013, 4:35 p.m.
comments powered by Disqus