[[PageOutline(1-2)]] = Morphic Designer = The Morphic Designer is an application for creating Morphic user interfaces with ease. It follows basic ideas of the !QtDesigner from the [http://qt.nokia.com Nokia Qt Framework]. New user interfaces are created via simple drag&drop operations and do not involve writing much source code explicitely. A code generator creates valid Smalltalk code for your design. Designs can be loaded and modified at any time. Even some manual modifications of the generated code are possible, as the load process just executes that code and instantiates the design. Several people already worked with the designer and created reviews, blogposts, and screencasts. '''Blogs''' * [https://codingitwrong.com/2021/04/28/creating-a-smalltalk-app-with-morphic-designer.html Josh Justice] 10 min read, 28.04.2021 '''!YouTube''' * [http://www.youtube.com/watch?v=rmlgU5p4g3o Morphic Designer] 3 min, 03.01.2011 * [http://www.youtube.com/watch?v=rx67fjK39Qg ST 4U 53: Introducing the Morphic Designer] 1 min, 28.02.2011 * [http://www.youtube.com/watch?v=v7PTQcN_8Go ST 4U 54: Squeak UI Builder Example] 3 min, 02.03.2011 * [http://www.youtube.com/watch?v=WTMSFt5vYfo ST 4U 55: Reopen a GUI with the Squeak UI Designer] 1min, 04.03.2011 = 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.3 || || [[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)]] || r2559 and newer || ||'''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 ensureRecentMetacello. (Installer mc http: 'http://www.hpi.uni-potsdam.de/hirschfeld/squeaksource/') project: 'MetacelloRepository'; install: 'ConfigurationOfDesigner'. (Smalltalk at: #ConfigurationOfDesigner) load. }}} If you want to try the latest snapshot (may be unstable), run this: {{{ ConfigurationOfDesigner loadSnapshot. }}} If you later want to get the latest development version, run this: {{{ ConfigurationOfDesigner loadDevelopment. }}} '''Configuration groups''' {{{default}}} ... just the Morphic Designer '''Version 1.1 Highlights''' * uses [wiki:widgets Widgets 1.1] * user interface templates * code generation improved {{{ #!div style="clear:both;" }}} If you want to install this application into a Pharo image, here are some hints to to so: [http://forum.world.st/Installing-Morphic-UI-designer-in-Pharo-1-1-tp3093047p3093047.html Installing Morphic UI Designer in Pharo 1.1]. = How to Use = Watch the screencast showing a small demo user interface: [attachment:screencast_1.mp4 screencast] (MP4, 6:25, 1024x768). == 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] }}} 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