| 59 | | == First Steps == |
| 60 | | |
| 61 | | Open your workspace and execute: `UiDesigner open`. Then choose a recently edited design, a template or an empty design: |
| 62 | | |
| 63 | | [[Image(startup.png, title="Morphic Designer 1.1 startup screen", nolink)]] |
| 64 | | |
| 65 | | Then begin to drag the widget you want and drop it into the center area which is your user interface: |
| 66 | | |
| 67 | | [[Image(dragdrop.png, title="Main screen performing a drag & drop operation", nolink)]] |
| 68 | | |
| 69 | | 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'': |
| 70 | | |
| 71 | | [[Image(buttongroup.PNG, title="Halos work too.", nolink)]] |
| 72 | | |
| 73 | | 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. |
| 74 | | |
| 75 | | == Save & Load == |
| 76 | | |
| 77 | | 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:`. |
| 78 | | |
| 79 | | |
| 80 | | == Using a User Interface == |
| 81 | | |
| 82 | | If you created a UI class named `MyDialogUi`, follow these steps to use it in a `SystemWindow`. |
| 83 | | |
| 84 | | Create a class: |
| 85 | | |
| 86 | | {{{ |
| 87 | | Morph subclass: #MyDialog |
| 88 | | instanceVariableNames: 'ui' |
| 89 | | classVariableNames: '' |
| 90 | | poolDictionaries: '' |
| 91 | | category: 'MyProject-Dialogs' |
| 92 | | }}} |
| 93 | | |
| 94 | | Add an accessor for lazy UI creation: |
| 95 | | |
| 96 | | {{{ |
| 97 | | MyDialog>>ui |
| 98 | | ^ ui ifNil: [ui := MyDialogUi new] |
| 99 | | }}} |
| 100 | | |
| 101 | | [[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. |
| 102 | | |
| 103 | | The initialization of the dialog must use the ui instance to configure itself: |
| 104 | | |
| 105 | | {{{ |
| 106 | | MyDialog>>initialize |
| 107 | | super initialize. |
| 108 | | self ui setupUi: self. |
| 109 | | }}} |
| 110 | | |
| 111 | | Now all UI elements can be accessed as named in the designer: |
| 112 | | |
| 113 | | {{{ |
| 114 | | self ui myButton |
| 115 | | checkable: true; |
| 116 | | checked: true. |
| 117 | | }}} |
| 118 | | |
| 119 | | Finally, you can implement a message to open a `SystemWindow` with this `Morph`: |
| 120 | | |
| 121 | | {{{ |
| 122 | | MyDialog>>open |
| 123 | | self openInSystemWindowNamed: 'My Dialog'. |
| 124 | | }}} |
| 125 | | |
| 126 | | The window will get the same size as the UI in the designer as well as background color. |
| 127 | | |
| 128 | | = How to Extend = |
| 129 | | |
| 130 | | * code generation |
| 131 | | * property table, caching |
| 132 | | |
| 133 | | |
