Version 2 (modified by patrick.rein, 11 years ago) ( diff )


Smalltalk Koans

Our Koans Text

How to Install

Using Metacello, just run the following code in your workspace:

(Installer mc http: '')
  project: 'koans';
  install: 'ConfigurationOfSmalltalkKoans'.
ConfigurationOfSmalltalkKoans load.

If you later want to get the latest development version, run this:

ConfigurationOfDesigner loadDevelopment.

Configuration groups

default ... just the Morphic Designer

System categories

Designer-Core ... UI code generator, designer app itself
Designer-Support ... internally used classes
Designer-Templates ... UI classes that can be used as templates for new UI classes

Version 1.0

  • initial release

How to Use

Initial Steps to start Koans :)

First Steps

Open your workspace and execute: UiDesigner open. Then choose a recently edited design, a template or an empty design:

No image "startup.png" attached to smalltalk_koans

Then begin to drag the widget you want and drop it into the center area which is your user interface:

No image "dragdrop.png" attached to smalltalk_koans

The right part offers a property table that enables you to change all necessary properties of the currently selected morph. The selection is indicated by halos. The halos work as expected: move, copy, clone, resize, delete:

No image "buttongroup.PNG" attached to smalltalk_koans

While in the Designer, every morph that is dropped into a widget container will behave differently on mouse input as the surrounding container will get all clicks and handle the UI editing.

Save & Load

A user interface will be saved as subclass of UserInterface which comes from the Widgets project. That class is just a small common code base for all UIs that understands #setupUi:.

Using a User Interface

If you created a UI class named MyDialogUi, follow these steps to use it in a SystemWindow.

Create a class:

Morph subclass: #MyDialog
	instanceVariableNames: 'ui'
	classVariableNames: ''
	poolDictionaries: ''
	category: 'MyProject-Dialogs'

Add an accessor for lazy UI creation:

  ^ ui ifNil: [ui := MyDialogUi new]

At the moment of version 1.0, you need to recompile this accessor whenever you save a changed UI class.

The initialization of the dialog must use the ui instance to configure itself:

   super initialize.
   self ui setupUi: self.

Now all UI elements can be accessed as named in the designer:

self ui myButton
   checkable: true;
   checked: true.

Finally, you can implement a message to open a SystemWindow with this Morph:

   self openInSystemWindowNamed: 'My Dialog'.

The window will get the same size as the UI in the designer as well as background color.

How to Extend

  • code generation
  • property table, caching


The Morphic Designer was inspired by the QtDesigner in the Nokia Qt Framework.

To date the following people contributed to this project:

  • Marcel Taeumel

Attachments (1)

Download all attachments as: .zip

Note: See TracWiki for help on using the wiki.