Sunday, January 10, 2010

Basic UI building

Here we show how to layout basics controls such as panels and buttons in a window.

Download screencast (800x600): .mpeg, 23.8 MB, .mov, 46.2 MB

Load the source code:
Gofer new
     squeaksource: 'Pharocasts';
     package: 'BasicUIBuilding';

Code sample:
|aWindow aPanel buttonPanel|

aWindow := SystemWindow labelled: 'My first window'.

aPanel := PluggablePanelMorph new.
aWindow addMorph: aPanel fullFrame: (
        fractions: (0@0 corner: 1@1)
        offsets: (0@0 corner: 0@50 negated)).
aPanel color: (Color blue).

buttonPanel := PluggablePanelMorph new.
aWindow addMorph: buttonPanel fullFrame: ( 
        fractions: (0@0.99 corner: 1@1)
        offsets: (0@50 negated corner: 0@0)).
buttonPanel  color: (Color green).

#(one two three) do: [:label| |aButton| 
   aButton := PluggableButtonMorph new label: label; yourself.
   buttonPanel addMorph: aButton fullFrame: nil.

aWindow openInWorld.


  1. Thanks for these screencasts.

    Is there sound to them?
    I would be nice with some explanations as your are doing things...

  2. No sound :(

    You're right. I will try to speak when recording but I need to buy a (good) microphone and train my english accent !

    If you know how to mix sound with videos maybe you can try to add your own voice ?

  3. Yes, I could mix it, but I don't know what to say, =)

    I understand from the way you write the code that you want to say something, but it is not clear enough from wathing only the video.

    The bottom line is, without sound, a lot of what you want to show is lost.

    Youtube has the possibility to add subtitles to videos, in several languages. If you don't want to talk, you could add at least subtitles. Then someone else could add the voice, or even translate the subtitles.

  4. Subtitles may be a good idea. Do you know how can I add it to the original screencast (I work on Linux) ?

  5. I don't know if Viemo suports subtitles. Otherwise, migrate to Youtube that has good free tools for it.

  6. @Alex the problem with YouTube (I've tried it first) is that the video duration is limited to 10mn.
    I've also tried DailyMotion but the quality of encoding wasn't good enough to see the code.

  7. Nice window building intro. Keep up the excellent videos!

  8. Great job! Than you! :)

    I made this script for adding subtitles to videos, maybe it can help. Subtitles can be in any of the formats that mplayer and mencoder understands.


    if [ ! $# -eq 3 ]
    echo -e '\nUsage: adsub INPUT SUBTITLE OUTPUT\n'
    mencoder -oac copy -ovc lavc -sub "${SUBTITLE}" -o "${OUTPUT}" "${INPUT}" \
    -subfont-text-scale 3 -subfont /usr/share/fonts/truetype/ttf-dejavu/DejaVuSans.ttf

  9. Thank you Victor for the script... I suppose the hard part is to write subtitles ;)

  10. Actually that's also quite easy if you use: or :)

    If you have a written text I would be glad to create subtitles and encode them in the videos you create. I'm still quite new to Pharo and Smalltalk to write the text, yet... :)

  11. @Victor can you contact me by email ?

  12. Hello again Laurent!

    Do you remember we talked about subtitles to your videos?
    Check this site:



Note: Only a member of this blog may post a comment.