[[PageOutline(1-2)]]

= Smalltalk Koans =

Our Koans Text

= How to Install =
{{{
#!div class="wiki_infotable" style="float:right;"
||'''Environment'''|| ||
|| [[Image(media/icons/custom:squeak_16.png, title="Recommended Squeak Version", nolink, right)]] || 4.2 and later ||
|| [[Image(media/icons/silk:application_home.png, title="Recommended Squeak VM Version", nolink, right)]] || 4.1.1 (win) ||
|| [[Image(media/icons/silk:cog.png, title="Recommended Cog VM Version", nolink, right)]] || r2316 ||
||'''Sources'''|| ||
|| [[Image(media/icons/silk:script_gear.png, title="Metacello Configuration", nolink, right)]] || [http://www.hpi.uni-potsdam.de/hirschfeld/squeaksource/MetacelloRepository/ ConfigurationOfDesigner] ||
|| [[Image(media/icons/silk:database.png, title="Repository", nolink, right)]] || [http://www.hpi.uni-potsdam.de/hirschfeld/squeaksource/SwaUtilities/ SwaUtilities] ||
|| [[Image(media/icons/silk:package.png, title="Needed Packages from the Repository", nolink, right)]] || Designer ||
|| [[Image(media/icons/silk:bullet_go.png, title="Dependents", nolink, right)]] || [wiki:signals Signals] ||
|| [[Image(media/icons/silk:bullet_go.png, title="Dependents", nolink, right)]] || [wiki:animations Animations] ||
|| [[Image(media/icons/silk:bullet_go.png, title="Dependents", nolink, right)]] || [wiki:widgets Widgets] ||
||'''Misc'''|| ||
|| [[Image(media/icons/silk:world.png, title="Website", nolink, right)]] || [http://www.hpi.uni-potsdam.de/hirschfeld/squeaksource/SwaUtilities.html SwaUtilities@SqueakSource] ||
|| [[Image(media/icons/silk:world.png, title="SqueakMap", nolink, right)]] || [http://map.squeak.org/package/59290d87-9679-42a9-8436-95a379ebbfdf Morphic Designer @ SqueakMap] ||
}}}

Using Metacello, just run the following code in your workspace:
{{{
(Installer mc http: 'http://www.squeaksource.org/')
  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[[br]]
{{{Designer-Support}}} ... internally used classes[[br]]
{{{Designer-Templates}}} ... UI classes that can be used as templates for new UI classes[[br]]


'''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:

[[Image(startup.png, title="Morphic Designer 1.1 startup screen", nolink)]]

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

[[Image(dragdrop.png, title="Main screen performing a drag & drop operation", nolink)]]

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'':

[[Image(buttongroup.PNG, title="Halos work too.", nolink)]]

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 [wiki:widgets 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:

{{{
MyDialog>>ui
  ^ ui ifNil: [ui := MyDialogUi new]
}}}

[[Image(media/icons/silk:error.png, nolink)]] 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:

{{{
MyDialog>>initialize
   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`:

{{{
MyDialog>>open
   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


= Acknowledgments =

The Morphic Designer was inspired by the !QtDesigner in the [http://qt.nokia.com Nokia Qt Framework].

[[Image(media/icons/silk:user.png, title="Contributors", nolink)]] To date the following people contributed to this project: 
 * Marcel Taeumel