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';
     load


Code sample:
|aWindow aPanel buttonPanel|

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

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

buttonPanel := PluggablePanelMorph new.
aWindow addMorph: buttonPanel fullFrame: ( 
    LayoutFrame
        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.

12 comments:

  1. Thanks for these screencasts.

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

    ReplyDelete
  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 ?

    ReplyDelete
  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.

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

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

    http://www.google.com/support/youtube/bin/answer.py?hl=en&answer=100079

    ReplyDelete
  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.

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

    ReplyDelete
  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.

    #!/bin/bash

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

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

    ReplyDelete
  10. Actually that's also quite easy if you use: http://gnome-subtitles.sourceforge.net or http://home.gna.org/subtitleeditor :)

    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... :)

    ReplyDelete
  11. @Victor can you contact me by email ? laurent.laffont@gmail.com

    ReplyDelete
  12. Hello again Laurent!

    Do you remember we talked about subtitles to your videos?
    Check this site: http://dotsub.com/

    Thanks!

    ReplyDelete

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