Pharocasts

Morphic and physics

2012-01-24T08:04:00.000-08:00

Here's a nice serie of screencasts recorded by HwaJong Oh @daliot that shows how to create physical interaction between Morphic objects.
The series starts with a demo of the final application and then how to build it step by step.

Introduction to MorphoPhysics
Make a ball
A better ball
Add a rubber band
Rubber band with force

Introduction to MorphoPhysics:

Gofer it
  squeaksource: 'DaliotsPlayground';
  package: 'ConfigurationOfDaliotsPlayground';
  load.

(Smalltalk at: #ConfigurationOfDaliotsPlayground) 
    project lastVersion load: 'MorphoPhysics'.

Make a ball:

Codes shown in workspaces:

"Before creating the BallMorph class"
b1 := EllipseMorph new.
b1 openInWorld.
b1 extent: 40@40.
b1 color: Color green.
b1 borderWidth: 0.
b1 center: (158@225).
"..."
b1 delete.

"After creating the BallMorph class"
b1 := BallMorph new.
b1 openInWorld.
b1 reset.
b1 startStepping.
b1 velocity: 1@0.
b1 velocity: 0@1.
b1 velocity: 0@ -1.
b1 velocity: 1@ -1.
b1 velocity: 20@0.
b1 velocity: -20@0.
b1 acceleratedBy: -20@0.
b1 mass: 40.
b1 applyForceBy: -1000@0.

b2 := BallMorph new.
b2 openInWorld.
b2 mass: 80.
b1 applyForceBy: -1000@0.
b2 applyForceBy: -1000@0.

Load final code of this video:

Gofer it
  squeaksource: 'Pharocasts';
  version: 'DemoMorphoPhysics-hjo.1'; 
  load.

A better ball:

Load final code of this video:

Gofer it
 squeaksource: 'Pharocasts';
 version: 'DemoMorphoPhysics-hjo.2';
 load.

Add a rubber band:

Codes shown in workspaces:

"before creating the RubberBandMorph class"
r := PolygonMorph new.
r openInWorld.
r makeOpen.
r beStraightSegments.
r setVertices: {80@180. 180@200}.
r borderColor: Color black.
r setVertices: {b1 center. b2 center}.
r delete.

"after creating the RubberBandMorph class"
r := RubberBandMorph new.
r openInWorld.
r ball1: b1.
r ball1.
r ball2: b2.
r ball2.
r connectTwoBalls.
r length.
r vectorFrom1To2
Transcript open.
r thickness.

Load final code of this video:

Gofer it
 squeaksource: 'Pharocasts';
 version: 'DemoMorphoPhysics-hjo.3';
 load.

Rubber band with force:

Codes shown in workspaces:

r stress.
r applyForceOppositeDirection: 100@0.
r unitVectorFrom1To2.
r applyForceOppositeDirection: (r stress * r unitVectorFrom1To2).
r applyForce.
r delete.

b1 delete.
b2 delete.

"A little more complex example"
b1 := BallMorph new.
b1 openInWorld.
b1 mass: 80.

b2 := BallMorph new.
b2 openInWorld.
b2 mass: 50.

b3 := BallMorph new.
b3 openInWorld.
b3 mass: 200.

r12 := RubberBandMorph new.
r12 ball1: b1.
r12 ball2: b2.
r12 openInWorld

r23 := RubberBandMorph new.
r23 ball1: b2.
r23 ball2: b3.
r23 openInWorld

r31 := RubberBandMorph new.
r31 ball1: b3.
r31 ball2: b1.
r31 openInWorld.

Load final code of this video:

Gofer it
 squeaksource: 'Pharocasts';
 version: 'DemoMorphoPhysics-hjo.4';
 load.

Manipulating objects

2012-01-09T22:54:00.000-08:00

The purpose of this screencast is to learn basic tools of Pharo to manipulate objects in a fun way.

(Pardon my English. Thanks to tell me what's wrong so I can improve).

Load package MorphExamplesAndDemos:

Gofer it
 squeaksource: 'PharoNonCorePackages';
 package: 'MorphExamplesAndDemos';
 load.

Open a new BouncingAtomsMorph in World:

BouncingAtomsMorph new openInWorld.

or in a window:

BouncingAtomsMorph new openInWindow.

Inspect the first BouncingAtomsMorph instance:

BouncingAtomsMorph allInstances first inspect.

Change the first BouncingAtomsMorph color to red:

BouncingAtomsMorph allInstances first color: Color red.

Stop then start BouncingAtomsMorph animation:

BouncingAtomsMorph allInstances first stopStepping.
BouncingAtomsMorph allInstances first startStepping.

Remove all submorphs of last BouncingAtomsMorph instance:

BouncingAtomsMorph allInstances last removeAllMorphs.

Move the first submorph of first BouncingAtomsMorph instance to last one:

BouncingAtomsMorph allInstances last 
  addMorph: BouncingAtomsMorph allInstances first submorphs first .

Delete all BouncingAtomsMorph instances:

BouncingAtomsMorph allInstances do: [:aMorph| aMorph delete].

Run the garbage collector:

Smalltalk garbageCollect.

Learn Smalltalk with ProfStef

2011-05-16T22:56:00.000-07:00

ProfStef is a Smalltalk interactive tutorial included in Pharo.

Update 5/17/2011: James Robertson has merged his ProfStef recordings from the Smalltalk4U serie (Thank you !!).

Download screencast: .mov, .wmv.

You can also watch it on youtube.

I keep the former screencast:

Download screencast (800x600): .mpeg, 25.4 MB, .mov, 58.1 MB

You can load last ProfStef with:


Gofer new
  squeaksource:'MetacelloRepository';
  package:'ConfigurationOfProfStef';
  load.

ConfigurationOfProfStef project latestVersion load.

Then run ProfStef:

ProfStef go.

Test coverage with Hapao

2011-04-19T23:08:00.000-07:00

Vanessa Peña is an undergraduate student in computer science at University of Chile and part of Hapao team.

Alexandre Bergel use Pharo for research in software engineering, quality and understanding at University of Chile. Contribute to Mondrian, Moose, XMLSupport, Spy.

They show us Hapao, an innovative test coverage tool implemented in the Pharo Smalltalk programming language. You will see how they analyse the ProfStef interactive tutorial, increase test coverage and commit their contribution to SqueakSource.

You may want to look at Document with HelpSystem screencast to understand how ProfStef HelpSystem book is built.

The video is part of PharoCasts with Experts serie. It weights 1.2 GB and you can get it from vimeo page.

View mobile version.

Debug Cog VM

2011-04-16T23:49:00.000-07:00

First video of PharoCasts with Experts serie.

Mariano Martinez Peck is a PhD student between Ecole des Mines de Douai and INRIA RMOD team. He is the main developer behind SqueakDBX and GlorpDBX, maintainer of Metacello Configurations of official Pharo images.

Now also Cog VM hacker, Mariano explains in a 1h30 HD video:

what the VM is made of
what are the different VM built by the Pharo project continuous integration server
how to get the platform sources from Gitorious
how to generate the interpreter sources using ConfigurationOfCogVM
build the VM
run and debug it with gdb and XCode
what Slang is and how to change it for debugging purposes

This screencast matches these posts from Mariano's blog: part1, part2.

Eliot Miranda, main developer of Cog VM, has also written nice posts on his blog.

The video weights 2.2 GB. You can get it from vimeo page.

Note: about the print that doesn't work at the end of video, Mariano told me later:The problem was that I evaluated from workspace and evaluating stuff from workspace is hackky becase the Compiler is used. If I do the same from a method, instead of a workspace, it works

View mobile version.

Build a XML browser

2011-03-06T13:29:00.000-08:00

Watch this to learn how to:

get and parse XML
use Polymorph to build a GUI with a tree and text editor
add a button in Pharo IDE to open the XML browser
control when your breakpoints will trigger

Done using Pharo 1.2 (not released yet). You can download last build from the Continuous Integration server.

Update: Tudor Girba created a counter part demo for the browser building part using Glamour (browsing engine that ships with Moose).

Download screencast (1280x800): .mov 77 MB

View mobile version.

More Polymorph in Pharo GUI with Polymorph and Picasa screencast.

Get the code:

Gofer it
 squeaksource: 'Pharocasts';
 package: 'XML-Browser';
 load.
 
(Smalltalk at:#XMLBrowser)
  browseAtUrl:'http://www.pharocasts.com/feeds/posts/default'.

StringCalculator Kata

2011-02-05T00:10:00.000-08:00

This is the first Kata proposed by the 12meses12katas (12 months 12 katas) initiative.

You will learn: Test-Driven Development, the Pharo way.

Recorded and edited by Rafael Luque (big thank you!).

Download screencast (1280x720): .mov 167.6 MB

View mobile version. Credits for music on vimeo page.

Get the code:

Gofer it
 squeaksource: 'StringCalculatorKata';
 package: 'ConfigurationOfStringCalculatorKata';
 load.

(Smalltalk at:#ConfigurationOfStringCalculatorKata) project latestVersion load.

Kata instructions

Before you start:
 
- Try not to read ahead.
- Do one task at a time. The trick is to learn to work incrementally.
- Make sure you only test for correct inputs. there is no need to test for invalid inputs for this kata
 
String Calculator:

1) Create a simple String calculator with a method int Add(string numbers)
    1. The method can take 0, 1 or 2 numbers, and will return their sum (for an empty string it will return 0) for example “” or “1” or “1,2”
    2. Start with the simplest test case of an empty string and move to 1 and two numbers
    3. Remember to solve things as simply as possible so that you force yourself to write tests you did not think about
    4. Remember to refactor after each passing test
2) Allow the Add method to handle an unknown amount of numbers
3) Allow the Add method to handle new lines between numbers (instead of commas).
    1. the following input is ok:  “1\n2,3”  (will equal 6)
    2. the following input is NOT ok:  “1,\n” (not need to prove it - just clarifying)
4) Support different delimiters
    1. to change a delimiter, the beginning of the string will contain a separate line that looks like this:   “//[delimiter]\n[numbers…]” for example “//;\n1;2” should return three where the default delimiter is ‘;’ .
    2. the first line is optional. all existing scenarios should still be supported
5) Calling Add with a negative number will throw an exception “negatives not allowed” - and the negative that was passed.if there are multiple negatives, show all of them in the exception message

----------------------------------------------------------------------------------
stop here if you are a beginner. Continue if you can finish the steps so far in less than 30 minutes.
----------------------------------------------------------------------------------

6) Numbers bigger than 1000 should be ignored, so adding 2 + 1001  = 2
7) Delimiters can be of any length with the following format:  “//[delimiter]\n” for example: “//[***]\n1***2***3” should return 6
8) Allow multiple delimiters like this:  “//[delim1][delim2]\n” for example “//[*][%]\n1*2%3” should return 6.
9) make sure you can also handle multiple delimiters with length longer than one char

Pharo GUI with Polymorph

2011-02-03T03:42:00.000-08:00

Develop a contact manager desktop application.

You will learn:

how Pharo helps the "Program by intention" style of programming
how to create basic persistency of created Contact objects
how to compose a GUI, basic widgets, events and layout

Download screencast (1280x768): .mov 75.2 MB

View mobile version.

More Polymorph in Picasa screencast.

Get the code:

Gofer it
 squeaksource: 'Pharocasts';
 package: 'ContactManager';
 load.
 
(Smalltalk at:#ContactListEditor) open.

Start by looking how the contact list is built:

ContactListEditor>>open
  |builder content|
  builder := UITheme builder.
  content := builder newColumn: {   
        builder 
                newListFor: self   
                list: #contacts
                selected: #contactSelectedIndex
                changeSelected: #contactSelectedIndex:
                help: 'contacts'.
        builder newRow: {
                builder newButtonFor: self 
                        action: #addButtonClick 
                        label: 'Add' 
                        help: 'Create a new contact'.
                builder newButtonFor: self 
                        action: #removeButtonClick 
                        getEnabled: #hasSelectedContact 
                        label: 'Remove' 
                        help: 'Remove selected contact'.
                builder newButtonFor: self 
                        action: #editButtonClick 
                        getEnabled: #hasSelectedContact 
                        label: 'Edit' 
                        help: 'Edit selected contact'  }}.
   
  (content openInWindowLabeled: 'Contacts') extent: 400@500.

#newRow: and #newColumn: are an easy way to align elements on the window.

When the Add button is clicked, message #addButtonClick is sent on the ContactListEditor object:

ContactListEditor>>addButtonClick
  |newContact|
  newContact := Contact new.
 
  ContactEditor new
        contact: newContact;
        onOK: [ Contact database add: newContact.  
                selectedContactIndex := Contact database size.
                self 
                        changed: #contacts;
                        changed: #hasSelectedContact];
        openModal.

The closure given to #onOK: adds the new Contact and tells the view to refresh components which depends on #contacts and #hasSelectedContact selectors - that means the contact list and the Remove and Edit buttons.

ContactEditor defines a modal dialog to edit the firstName and lastName of a Contact:

ContactEditor>>openModal
  |builder dialog content firstName|
  
  builder := UITheme builder.
  content := (builder newLabelGroup: {
                'First name' -> (
                       firstName := (builder
                         newTextEntryFor: contact
                         getText: #firstName
                         setText: #firstName: 
                         help: 'Enter the first name of the contact')
                       acceptOnCR: false;
                       minWidth: 200).
                'Last name' -> (
                       (builder
                          newTextEntryFor: contact 
                          getText: #lastName 
                          setText: #lastName: 
                          help: 'Enter the last name of the contact')
                        acceptOnCR: false;
                        minWidth: 200) }).
 
  dialog := builder 
              newPluggableDialogWindow:'Edit contact' 
              for: content.
  dialog rememberKeyboardFocus: firstName.
  builder openModal: dialog.
 
  dialog cancelled ifFalse: [self doOnOK].

From Gary Chambers (and thanks !):

Disabling the acceptOnCR for each text frield allows the default dialog handling for the return key (defaults to OK).

Normally the initial keyboard focus for a dialog is the default button, if specified. Remembering the first name field prior to opening will give that field focus.

Now it should be easier to understand Polymorph examples found in
UITheme class>>exampleBasicControls and friends (in examples protocol).

Access database through ODBC

2010-12-05T13:20:00.000-08:00

See how to setup and access an SQLite database through ODBC on Windows.

Recorded by Torsten Bergmann.

Download screencast (800x600): .mpg 39.4 MB, .mov 11.9 MB

View mobile version.

Load ODBC support:

Gofer new
 squeaksource: 'ODBC';
 package: 'ConfigurationOfODBC'; load.
(Smalltalk at: #ConfigurationOfODBC) load.

Download the ODBC driver for your database - here we use SQLite

Win32Shell new shellOpen: 'http://www.ch-werner.de/sqliteodbc/'

Configure an ODBC connection through Windows ODBC Administrator:

Win32Shell new 
 shellExecute: nil
 lpOperation: nil 
 lpFile: 'rundll32.exe' 
 lpParameters: 'shell32.dll,Control_RunDLL odbccp32.cpl' 
 lpDirectory: nil 
 nShowCmd: 5

Create database and fill some data:

|connection contents|
connection := ODBCConnection dsn: 'MySimpleDB' user: '' password: ''.
connection execute: 'CREATE TABLE user(name varchar(10), age smallint)'.
connection execute: 'INSERT INTO user VALUES(''Old Bob'', 100)'.
contents := (connection query: 'select * from user;') execute: ''.
contents asTable inspect.
connection close.

Reconnect and run the query again:

|connection contents|
connection := ODBCConnection dsn: 'MySimpleDB' user: '' password: ''.
contents := (connection query: 'select * from user;') execute: ''.
contents asTable inspect.
connection close.

LightsOut game

2010-11-02T13:35:00.000-07:00

Follow the Lights Out game exercise from the book Pharo By Example.

Browse the code of LOCell and LOGame classes. (Thanks Christoph for the browser for blogs)

Download screencast (1260x788): .mpg 85.7 MB, .mov 67.4 MB

View mobile version.

Install Pharo on OSX

2010-10-21T13:41:00.000-07:00

You will learn how to select your chosen Pharo image and Squeak Virtual Machine versions.

See also:
Install Pharo on Windows
Start Pharo on GNU/Linux

Download screencast (1680x1050): .mpg 18.4 MB, .mov 25.5 MB

View mobile version.

Getting started with Pier CMS

2010-10-03T13:04:00.002-07:00

Pier is a content management system that is light, flexible and free.

This screencast shows

how to setup Pier for a minimal web site
configure persistency.

Download screencast (892x642): .mpeg 5.5 MB, .mov 17.6 MB

Recorded by Damien Cassou.
Voice by Christoph Budzinski.

View mobile version.

Download the Pier OneClick image.

Document with HelpSystem

2010-09-19T13:26:00.000-07:00

HelpSystem is a documentation framework written by Torsten Bergmann.

You will learn how to:

write an HelpSystem book
use PackageAPIHelpBuilder to generate the API documentation of a package
create your own builder to dynamically create a documentation from the system

Download screencast (800x600): .mpeg 12.2 MB, .mov 79.9 MB

Voice recorded by Christoph Budzinski.

View mobile version.

You can download the updated ProfStef packages to get the source code of this screencast


Gofer new
  squeaksource:'MetacelloRepository';
  package:'ConfigurationOfProfStef';
  load.

ConfigurationOfProfStef project latestVersion load.

Another cool snippet from Torsten to browse IRC logs:

|topic day url sub| 
topic := HelpTopic named: 'Last week on Squeak IRC'. 
0 to: 7 do: [:index | 
  day := (Date today subtractDays: index) printFormat: #(3 2 1 $. 1 2 2). 
  url := 'http://tunes.org/~nef/logs/squeak/' , day. 
  sub := HelpTopic 
    title: day contents: (HTTPLoader default retrieveContentsFor: url) contents. 
    topic addSubtopic: sub. 
]. 
HelpBrowser openOn: topic

Deploy Seaside with Cherokee Web Server

2010-09-03T13:09:00.000-07:00

Learn how to

install Cherokee Web Server on Ubuntu Linux through Launchpad
configure Cherokee to serve static files for a Seaside application
start an headless Seaside image

Download screencast (800x600): .avi 51.1 MB.

View mobile version.

Recorded by Christoph Budzinski.

Note: If you have any suggestions for improvement, Cherokee + Seaside tips and tricks you want to share or saw something that is plain wrong or could be described in more detail to make it easier to understand, feel free to add a comment and we will update the screencast accordingly to improve it.

Install Cherokee on Ubuntu:

sudo add-apt-repository ppa:cherokee-webserver/ppa
sudo apt-get update
sudo apt-get install cherokee

A tip for users of Linode and possibly other VPS providers that provide a stripped down server version of Ubuntu: if the add-apt-repository command doesn't work, you need to install an additional package first with:

sudo apt-get install python-software-properties

Seaside startup script, runseaside:

#!/bin/bash
cd /path/to/folder/with/seaside/image/
/path/to/pharo/virtual/machine/executable -vm-display-null seaside.image

For other Seaside deployment options, see

Deployment chapter of book Dynamic Web development with Seaside.
Tutorial to deploy Pharo and Seaside on Amazon EC2.
Deploy on SeasideHosting screencast

Install Pharo on Windows

2010-08-20T12:20:00.000-07:00

You will learn how to select your chosen Pharo image and Squeak Virtual Machine versions.

See also:
Start Pharo on GNU/Linux
Install Pharo on OSX

Download screencast (800x600): .mpeg 14.5 MB, .mov 21.8 MB

View mobile version.

Recorded by Christoph Budzinski.

Display Picasa photos

2010-08-15T13:55:00.000-07:00

See:

how to get data from an URL
parse XML documents
build a GUI to display photos with Polymorph
how to prototype quickly with debugger and inspector

Download screencast (800x600): .mpeg 16.7 MB, .mov 40.4 MB

Voice recorded by Christoph Budzinski.

View mobile version.

Picasa API documentation

Load XMLSupport:

Gofer new
    squeaksource: 'MetacelloRepository';
    package: 'ConfigurationOfXMLSupport';
    load.

ConfigurationOfXMLSupport load.

Final code:
Update 16/01/2012: the snippet is a little obsolete (see tongadall comment below). Now should be:

...
xmlDoc allElementsNamed: #entry do: 
              [:entry| |title photoUrl|
              title := (entry findElementNamed: #title) contentString.
              photoUrl := (entry findElementNamed: #content) attributeAt: #src.
...

|xmlStream xmlDoc photos builder|
xmlStream := 'http://picasaweb.google.com/data/feed/api/all?q=miles+davis&max-results=10' asUrl retrieveContents contentStream.
xmlDoc := XMLDOMParser parseDocumentFrom: xmlStream.

photos := OrderedCollection new.
xmlDoc tagsNamed: #entry do: 
              [:entry| |title photoUrl|
               title := (entry firstTagNamed: #title) characterData.
               photoUrl := (entry firstTagNamed: #content) attributeAt: #src.
               photos add: (PicasaPhoto new
                                   title: title;
                                   photoUrl: photoUrl)].

builder := UITheme builder.
(builder 
    newRow: (photos collect: 
                     [:aPhoto|  
                      builder newColumn: {
                         builder newImage: aPhoto asForm  size: 128@128.
                         builder newLabel: aPhoto title.}]))
extent: 500@400;
wrapDirection: #topToBottom;
openInWindow.

The Flickr version (Thanks Gary !)

| xmlStream xmlDoc photos builder clickBlock |
xmlStream := 'http://api.flickr.com/services/feeds/photos_public.gne?id=12018791@N06&lang=en-us&format=rss_200' asUrl retrieveContents contentStream.
xmlDoc := XMLDOMParser parseDocumentFrom: xmlStream.

photos := OrderedCollection new.
xmlDoc tagsNamed: #item do:
   [:item| | title thumbUrl photoUrl |
    title := (item firstTagNamed: #title) characterData.
    thumbUrl := ((item firstTagNamed: #media:thumbnail) attributeAt: #url) asUrl.
    photoUrl := ((item firstTagNamed: #media:content) attributeAt: #url) asUrl.
    photos add: title -> (Form fromBinaryStream: thumbUrl retrieveContents contentStream) -> photoUrl].

clickBlock := [:url :title | | scrollPane |
scrollPane := GeneralScrollPane new
 scrollTarget: (builder
 newImage: (Form fromBinaryStream: url retrieveContents contentStream)).
scrollPane openInWindow
 setLabel: title;
 extent: 600@400.
scrollPane color: Color transparent].

builder := UITheme builder.
((builder
  newRow: (photos collect:
                   [:aPhoto|
                    (builder
   newButtonFor: clickBlock
   getState: nil
   action: #value:value:
   arguments: {aPhoto value. aPhoto key key}
   getEnabled: nil
   label: ((builder newColumn: {
     builder newImage: aPhoto key value.
     builder newLabel: aPhoto key key})
     cellPositioning: #center;
     layoutInset: 10)
   help: nil)]))
wrapDirection: #topToBottom;
openInWindow)
 setLabel: (xmlDoc firstTagNamed: #title) characterData;
 extent: 700@680.

Web application testing through Selenium-RC

2010-08-08T12:20:00.000-07:00

WebTester is a framework to test web applications. Designed to support several testing systems, it actually provides an implementation which uses Selenium RC.

You can test any web application with it; but if you are developing Seaside applications you can take a component (any component), and unit test that component.

Download screencast (800x600): .mpeg 15.0 MB, .mov 36.9 MB

View mobile version.

Voice recorded by Christoph Budzinski.

Load WebTester (note that it loads Seaside 3.0-rc):

Gofer new
    squeaksource: 'MetacelloRepository';
    package: 'ConfigurationOfWebTester';
    load.

(ConfigurationOfAutotest project version:'1.1') load.

A WebTester session example:

|tester searchButton searchField|
tester := WtSeleniumWebTester new.
tester
    appRoot: 'http://pharo-project.org';
    browserType: '*firefox';
    start;
    openUrl: '/'.

searchField := tester textFieldById: 'searchfield'.
self assert: searchField isPresent.

searchButton := tester buttonByXPath: '//input[@title=''Search'']'.
self assert: searchButton isPresent.

searchField text: 'screencasts'.
searchButton click.
tester waitForPageToLoad.
self assert: (tester isTextPresent:'pharocasts').

tester stop.

Monticello and Metacello introduction

2010-07-20T14:42:00.000-07:00

Here you will learn how to:

create a SqueakSource repository
create packages and upload them to SqueakSource
create a Metacello configuration to manage dependencies between packages
load packages using Metacello ConfigurationOfXXX and Gofer

A draft chapter on Monticello is available on Pharo By Example web site.
See also the repository section of Pharo CollaborActive book.

You can find a lot of configuration examples in Pharo Metacello Repository.

Download screencast (800x600): .mpeg 52.0 MB, .mov 88.5 MB

Voice recorded by Christoph Budzinski.

Start Pharo on GNU/Linux

2010-07-17T14:30:00.000-07:00

You will learn how to select your chosen Pharo image and Squeak Virtual Machine versions.

See also:
Install Pharo on Windows.
Install Pharo on OSX

Download screencast (800x600): .mpeg 16.2 MB, .mov 20.2 MB

Voice recorded by Christoph Budzinski.

Live testing with Autotest

2010-07-08T13:28:00.000-07:00

Unit tests represents the security belt of software development. But having a security belt doesn't mean it's always fastened. You take a look at a piece code, have fun hacking it, submit the new code without checking all tests are green... it's easy to forgot there's tests here. Autotest automatically runs tests for you.

Test Driven Development ensures test exhaustivity, reasonning on design and so on. You stop and run tests very often to check the health of your code. In your car you don't stop driving, hands off the wheel in order to check the speed. Autotest provides a real time dashboard so you don't stop coding.

Testing is always here. Now you can drive.

Download screencast (800x600): .mpeg 10.7 MB, .mov 38.2 MB

Voice recorded by Christoph Budzinski.

Update 10/04/2011: To get OB integration in Pharo 1.2:


Gofer it 
 squeaksource: 'MetacelloRepository';
 package: 'ConfigurationOfAutotest';
 load.
 
ConfigurationOfAutotest project latestVersion load: #OB.

Load Autotest:


Gofer new
    squeaksource: 'Autotest';
    package: 'ConfigurationOfAutotest';
    load.

(ConfigurationOfAutotest project version:'1.0') load: 'Dev'.

Pharo 1.1 is required. Download the image

Autotest detects a method has been modified/added using Annoucements Framework.

To calculate hit count, Autotest wraps the changed method as described in Prototyping Languages Related Constructs and Tools with Squeak by Alexandre Bergel and Marcus Denker.

How to contribute to Pharo

2010-06-23T01:03:00.000-07:00

Learn how to:

choose an issue to fix from the Pharo issue tracking
create and send a slice with your fix
add entries into the World Menu

Code must be sent as a SLICE named SLICE-Issue-xxxx-description. Patrick Barroca and Stéphane Ducasse have added a +Slice button in Pharo 1.1 to ensure this convention.

For more informations on the contribution process, read How to contribute on Pharo wiki.

Here I show how issue #2582 (Rearrange WorldMenu) has been fixed, based on WorldMenu registration chapter in the Pharo CollaborActive book.

UPDATE: Thousand thanks to Christoph Budzinski who recorded his voice on the screencast.

Download screencast (800x600): .mpeg 9.5 MB, .mov 22.7 MB

I keep the former screencast as it shows RealEstateAgent which controls how windows appear on screen.

Download screencast (800x600): .mpeg 15.8 MB, .mov 18.2 MB

Recorded with Stéphane Ducasse who can eat an ice cream and a big waffle with chocolate at the same time.

Proportional layout

2010-06-06T12:28:00.000-07:00

Here I show the proportional layout mechanisms of SystemWindow. This is based on the Layout section of the Pharo CollaborActive book written with the help of Hilaire Fernandes (more to come).

You will also learn to use Script Manager, an enhanced Workspace written by Joseph Pelrine.

I use Pharo 1.1-11357 beta.

Download screencast (800x600): .mpeg 24.4 MB, .mov 21.1 MB

Voice recorded by Christoph Budzinski.

The final code:


window := SystemWindow labelled: 'Layout'.

redMorph := Morph new.
window 
 addMorph: redMorph
 fullFrame: (LayoutFrame 
  fractions: (0@0 corner: 1@1)
  offsets: (100@0 corner: 0@50 negated)).
redMorph color: Color red.


greenMorph := Morph new.
window 
 addMorph: greenMorph
 fullFrame: (LayoutFrame 
  fractions: (0@0 corner: 0@1)
  offsets: (0@0 corner: 100@50 negated)).
greenMorph color: Color green.

yellowMorph := Morph new.
window 
 addMorph: yellowMorph
 fullFrame: (LayoutFrame 
  fractions: (0@1 corner: 1@1)
  offsets: (0@50 negated corner: 0@0)).
yellowMorph color: Color yellow.

window openInWorld.

Build Squeak VM on Linux

2010-05-09T09:38:00.000-07:00

This screencast is based on dedicated chapters in the Pharo collaboratorActive book

Dynamic finder with #doesNotUnderstand, #perform and Regex

2010-05-03T23:56:00.000-07:00

This is the sequel to SandstoneDb, simple ActiveRecord style persistence screencast.

I show how to:

override Object#doesNotUnderstand in your class to answer to unknown messages
use regular expressions to extract substrings
use #perform: and #perform:with: to send a message dynamically
develop new code in the debugger without stopping current call.

To learn about Regex in Pharo, read the (draft) chapter for Pharo By Example 2.

Download screencast (800x600): .mpeg 23.1 MB, .mov 37.2 MB

Here's the final code of Person#doesNotUnderstand:

doesNotUnderstand: aMessage
  "aMessage arguments  #('Laurent' 10)"
  "aMessage selector #findAllByName:Age:"
 
  | selRegex findSelector searchSelectors searchedValues |
  selRegex := 'find(All|First)By(\w+\:)+' asRegex.
  (selRegex search: aMessage selector)
      ifFalse: [^ super doesNotUnderstand: aMessage].
  
  findSelector := ((selRegex subexpression: 2) = 'All') 
                                       ifTrue: [#findAll:] 
                                       ifFalse: [#find:].
        
  searchSelectors := (selRegex subexpressions: 3) collect: 
                       [:aSymbol|
                        aSymbol asLowercase allButLast asSymbol].
        
  (self allSelectors includesAllOf: searchSelectors) 
                 ifFalse: [^ super doesNotUnderstand: aMessage].
        
  searchedValues := aMessage arguments.
 
  ^ self 
    perform: findSelector 
    with: [:aPerson| |values| 
           values := searchSelectors collect: 
                      [:aSelector| 
                       aPerson perform: aSelector].
           searchedValues = values].

SandstoneDb, simple ActiveRecord style persistence

2010-04-25T11:47:00.000-07:00

Start using SandstoneDb, an object oriented database with ActiveRecord style persistence. Written by Ramon Leon.

You will learn how to

Add persistency to a class instances by subclassing SDActiveRecord
Save and retrieve objects
Prevent saving of an object if invalid
Hook into records life cycle for cascade saving
Use HelpSystem from Torsten Bergmann to browse API documentation

Magma, an object oriented database

2010-02-24T12:19:00.000-08:00

This "Getting started with Magma" screncast shows:

how to create a Magma repository on the filesystem to store objects
run Magma server in one image
connect to the server from two other client images
share objects between the clients

Update: I've written an error at 10:23, see Peter's comment.

Download screencast (800x600): .mpeg 26.3 MB, .mov 47.6 MB

Load the source code:

Gofer new
 squeaksource: 'Pharocasts';
 package: 'GettingStartedWithMagma';
 load.

Load Magma into Pharo:

Gofer new
 squeaksource: 'MetacelloRepository';
 package: 'ConfigurationOfMagma';
 load.
 
(Smalltalk at:#ConfigurationOfMagma) 
 project latestVersion 
  load: 'Server'; 
  load: 'Client'.

See also: Magma Squeak wiki page.

Inspirated by Getting started with Magma wiki page.

REST, XML parsing and photos

2010-02-14T11:22:00.001-08:00

UPDATE 08/16/2010: This screencast is obsolete in Pharo 1.1. See updated screencast Display Picasa photos.

Search and retrieve photos from Picasa using its Data API Feeds.

You will learn how to

execute HTTP requests
parse answered XML documents with SAXHandler from XML-Parser package
download pictures
display pictures in a Morphic GUI

Download screencast (800x600): .mpeg 30.8 MB, .mov 51.6 MB

Load the source code:

Gofer new
   squeaksource: 'XMLSupport';
   package: 'XML-Parser';
   squeaksource: 'Pharocasts';
   package: 'Picasa';
   load.

Search photos and display them in Pharo:

|photos|
photos:=PicasaAPI new
    searchPhotos: 'miles+davis' maxResults: 3. 
PhotoWall new viewPhotos: photos.

Code samples:

Access Picasa REST API:

'http://picasaweb.google.com/data/feed/api/all?q=puppy&max-results=10' 
    asUrl retrieveContents

Download a picture and display it with SketchMorph:

(SketchMorph fromStream:
    ('http://code.google.com/p/pharo/logo'
        asUrl retrieveContents contentStream)) openInWorld

How I record screencasts for Pharocasts

2010-02-10T22:57:00.000-08:00

... on Linux. I use xvidcap for recording and avidemux for video editing. Both are really easy to use and stable.

So now, dear Pharo and Linux user, you know how to contribute to Pharocasts ;). To publish on Pharocasts, contact me.

Download screencast (960x720): .mpeg 19.0 MB, .mov 28.8 MB

Programming with live objects

2010-02-07T13:11:00.001-08:00

Write a moving turtle (you need a bit of imagination) with Morphic and see how to extend and debug a running object !

Download screencast (800x600): .mpeg, 25.4 MB, .mov, 49.4 MB

Load the source code:

Gofer new
 squeaksource: 'Pharocasts';
 package: 'ProgrammingWithLiveObjects';
 load.

Create a new moving turtle:

Turtle new 
        openInWorld; 
        goAt: 300@300

This screencast was inspired by a tutorial from S.Ducasse (in french).

If you need reminders about trigonometry :)

Code history tools

2010-02-03T13:41:00.001-08:00

Browse versions of a method
Recover lost changes
Code versioning with Monticello and a local repository

Download screencast (800x600): .mpeg, 18.4 MB, .mov, 27.8 MB

Deploy on Seaside Hosting

2010-02-01T07:42:00.000-08:00

Tips & Tricks seaside blog is now online. Here is the making-of !

Note: this screencast is the third part of a Seaside 2.8 serie:

Download screencast (800x600): .mpeg, 13.7 MB, .mov, 16.2 MB

Video course on Smalltalk

2010-01-27T13:03:00.001-08:00

Davide Varvello has worked on a video course on Smalltalk. Now the first video is available and all the lessons can be pre-ordered here http://it.thinkcode.tv/catalogo/programmare-in-smalltalk/.

Actually the course is in Italian, but there will be an English version soon.

Here is the preview of the first course.

Download screencast (1280x720): .mov, 20.2 MB

Starting with SUnit and Debugger

2010-01-26T23:02:00.000-08:00

Start using SUnit and the debugger for Test Driven Development in Pharo.

Download screencast (800x600): .mpeg, 30.9 MB, .mov, 45.3 MB

RSS feed with Seaside

2010-01-20T02:24:00.001-08:00

Add a RSS feed to Pharocasts Seaside Blog! Furthermore, you will learn how to search for a package on Squeaksource and load it into your Pharo image using Gofer.

Download screencast (800x600): .mpeg, 12.1 MB, .mov, 25.8 MB

Load the source code:

Gofer new
    squeaksource: 'rsrss';
    package: 'RSRSS2';
    squeaksource: 'Pharocasts';
    package: 'RSSFeedWithSeaside';
    load.

Code samples.

Define your RSS component:

RRComponent subclass: #BlogRSSFeed
 instanceVariableNames: ''
 classVariableNames: ''
 poolDictionaries: ''
 category: 'RSSFeedWithSeaside'

Populate your feed:

renderContentOn: rss
 rss title: 'Tips & Tricks posts'.
 rss description: 'Feed to Tips & Tricks blog, famous blog about Smalltalk'.
 rss url: 'http://localhost:8080/seaside/blog.rss'.
 
 Post database reverse do: [:aPost|
  rss item: [
   rss title: aPost title.
   rss description: aPost body.
   rss publicationDate: aPost publishedAt.
  ]
 ].

Refactoring with Code Critics

2010-01-18T02:46:00.000-08:00

Refactoring tools in Pharo include Code Critics. It's based on SmallLint and checks for over 60 common types of bugs.

Note that Lukas Renggli maintains an extended version of this tool called Slime, targetted at Seaside code. You can find more informations in the book: Dynamic Web Development With Seaside.

Download screencast (800x600): .mpeg, 8.9 MB, .mov, 15.3 MB

Seaside blog

2010-01-12T13:22:00.001-08:00

Follow this screencast and write a basic blog with Seaside 2.8.

use WAFileLibrary to store your CSS style
embed components in your application
write a form to edit a post.

Don't forget to read Dynamic Web Development With Seaside !

Download screencast (800x600): .mpeg, 51.4 MB, .mov, 105.9 MB

Load the source code:

Gofer new
     squeaksource: 'Pharocasts';
     package: 'SeasideBlog';
     load.

Start the server and register Blog as application:

WAKom startOn: 8080.
Blog registerAsApplication: 'blog'

Load Seaside 2.8 in Pharo:

Gofer new
        squeaksource: 'Loader';
        package: 'Loader';
        load.

Loader new
        load: 'Seaside28' version: '2.8.4.2'

You can also download a Pharo with Seaside image here: http://seaside.st/download/pharo

TreeMorph based package browser

2010-01-10T13:10:00.000-08:00

In this tutorial you will learn how to display packages / class / messages tree in a TreeMorph and use the Selected callbalk to display source code of selected item in a TextMorph.

Download screencast (800x600): .mpeg, 22.4 MB, .mov, 41.1 MB

Load the source code:

Gofer new
     squeaksource: 'Pharocasts';
     package: 'TreeMorphBasedPackageBrowser';
     load.

Code samples:

aTreeMorph := PluggableTreeMorph new.
 
items := PackageOrganizer default packages collect: [:aPackageInfo|
   PackageInfoListItemWrapper with: aPackageInfo.
].
aTreeMorph list: items.
aTreeMorph 
   model: self;
   setSelectedSelector: #onItemWrapperClick:.

In PackageInfoListItemWrapper:

contents
   ^ item classes collect: [:aClass | ClassDescriptionListItemWrapper with: aClass].

Basic UI building

2010-01-10T12:55:00.000-08:00

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.