| 13 | | || [[Image(media/icons/custom:squeak_16.png, title="Recommended Squeak Version", nolink, right)]] || 4.1, 4.2 Trunk || |
| 14 | | || [[Image(media/icons/silk:application_home.png, title="Recommended Squeak VM Version", nolink, right)]] || 4.0.2 (win) || |
| 15 | | || [[Image(media/icons/silk:cog.png, title="Recommended Cog VM Version", nolink, right)]] || r2316 || |
| | 13 | || [[Image(media/icons/custom:squeak_16.png, title="Recommended Squeak Version", nolink, right)]] || 4.3 || |
| | 14 | || [[Image(media/icons/silk:application_home.png, title="Recommended Squeak VM Version", nolink, right)]] || 4.1.1 (win) || |
| | 15 | || [[Image(media/icons/silk:cog.png, title="Recommended Cog VM Version", nolink, right)]] || r2559 or newer || |
| 50 | | {{{Widgets-Core}}} ... various widgets (e.g., buttons, lists, line inputs)[[br]] |
| 51 | | {{{Widgets-Support}}} ... internally used helper classes[[br]] |
| 52 | | {{{Widgets-Views}}} ... model-based item views (list, table, tree with columns)[[br]] |
| 53 | | {{{Widgets-Views-Models}}} ... example models also used in default dialogs[[br]] |
| 54 | | {{{Widgets-Views-Support}}} ... internally used helper classes for item views[[br]] |
| 55 | | {{{Widgets-Dialogs}}} ... default dialogs, ui files created with [wiki:designer Morphic Designer][[br]] |
| 56 | | |
| 57 | | '''Version 1.1 (in development)''' |
| 58 | | |
| 59 | | * dependency from SwaUtil removed |
| 60 | | * improved item-based and model-based views |
| 61 | | * to be used in [wiki:designer Morphic Designer 1.1] |
| 62 | | * new property for buttons: `enabled` |
| 63 | | * `UiTextEdit` works |
| 64 | | |
| 65 | | '''Version 1.0''' |
| 66 | | |
| 67 | | * first release to be used in [wiki:designer Morphic Designer 1.0] |
| 68 | | * still dependent from [wiki:swautil] due to text formatting functions |
| 69 | | * will be removed soon as lots of other stuff comes with that package |
| 70 | | * some example dialogs need the ''Icons'' package |
| | 60 | * useful basic controls (buttons, check boxes, lists, ...) |
| | 61 | * powerful item-view framework |
| | 62 | * extensible paint engine |
| | 63 | * 167 tests |
| 78 | | [wiki:widgets/views Item Views] |
| 79 | | |
| 80 | | == Buttons == |
| 81 | | |
| 82 | | '''Common Properties''' |
| 83 | | || '''Selector''' || '''Type''' || '''Description''' || |
| 84 | | || `autoExclusive` || Boolean || only one of these in the owner is checked at a time || |
| 85 | | || `checkable` || Boolean || determines whether it can be `checked` or not || |
| 86 | | || `checked` || Boolean || button remains in a visual down state if true || |
| 87 | | || `enabled` || Boolean || controls (mouse) input in general || |
| 88 | | || `icon` || Form || appearance depends on the button type || |
| 89 | | || `text` || String or Text || text written on the button || |
| 90 | | |
| 91 | | '''Push Button''' |
| 92 | | |
| 93 | | [[Image(pushbutton.png, nolink, title="A simple push button with an icon.")]] |
| 94 | | |
| 95 | | A push button is the most known and used button type. It is often used for ''OK'' and ''Cancel'' operations in a dialog. |
| 96 | | |
| 97 | | '''Tool Button''' |
| 98 | | |
| 99 | | [[Image(toolbutton.png, nolink, title="Three tool buttons in a row. The middle one is checked.")]] |
| 100 | | |
| 101 | | || '''Selector''' || '''Type''' || '''Description''' || |
| 102 | | || `autoRaise` || Boolean || raises only on mouse hover if true || |
| 103 | | || `buttonStyle` || Symbol || determines the layout and usage of `icon` and `text`[[br]]`#iconOnly`, `#textOnly`, `#textBesidesIcon`, `#textUnderIcon` || |
| 104 | | |
| 105 | | A tool button can be found in tool bars or other places that want to offer functionality in the GUI without having a too much present push button there as the tool button is smaller in general. |
| 106 | | |
| 107 | | '''Check Box ''' |
| 108 | | |
| 109 | | [[Image(checkbox.png, nolink, title="Two check boxes. One is checked.")]] |
| 110 | | |
| 111 | | A check box is a checkable button by default with a slightly different appearance as a small button-like square is in front of the text/icon. |
| 112 | | |
| 113 | | == Containers & Spacers == |
| 114 | | |
| 115 | | '''Common Properties''' |
| 116 | | || '''Selector''' || '''Type''' || '''Description''' || |
| 117 | | || `color` || Color || background color || |
| 118 | | || `borderWidth` || Integer || the width of the border if not transparent |
| 119 | | || `borderStyle2` || Symbol || `#simple` (uses `borderColor`), `#inset`, `#raised` || |
| 120 | | || `borderColor` || Color || border color || |
| 121 | | |
| 122 | | '''Button Group''' |
| 123 | | |
| 124 | | [[Image(buttongroup2.png, nolink, title="Three autoexclusive check-boxes in a container.")]] |
| 125 | | |
| 126 | | This container is for ''buttons only''. For every new button, it automatically enables `autoExclusive` and `checkable`, so |
| 127 | | that only one button can be checked at a time. |
| 128 | | |
| 129 | | '''Spacer''' |
| 130 | | || '''Selector''' || '''Type''' || '''Description''' || |
| 131 | | || `orientation` || Symbol || `#horizontal`, `#vertical` || |
| 132 | | |
| 133 | | [[Image(spacer.png, nolink, title="A spacer widget is only visible in the designer.")]] |
| 134 | | |
| 135 | | A spacer is used to manually separate widgets from each other. The designer draws a thin blue line according to the orientation. |
| 136 | | |
| 137 | | '''Widget Container''' |
| 138 | | |
| 139 | | [[Image(container.png, nolink, title="Four composed widget containers with different border styles.")]] |
| 140 | | |
| 141 | | A widget container is the main layout element for UI designs. If no color is set, it will be transparent in general and get a light gray background for the designer. |
| 142 | | |
| 143 | | Widget container can have ''Table Layouts'' and ''Proportional Layouts''. By choosing one of these modes, all child widgets get new options like `#disableTableLayout` or the offset and frames that specify the proportions. |
| 144 | | |
| 145 | | == Input Widgets == |
| 146 | | |
| 147 | | '''Combo Box''' |
| 148 | | || '''Selector''' || '''Type''' || '''Description''' || |
| 149 | | || `readOnly` || Boolean || Specifies whether only list items can be selected or any text is allowed as input. || |
| 150 | | |
| 151 | | [[Image(combobox.png, nolink, title="(left) A read-only combobox expanded. (right) A writeable combobox expanded.")]] |
| 152 | | |
| 153 | | A combo box allows you to make a single list choose but hide the list for the rest of the time. UI space is saved. |
| 154 | | |
| 155 | | '''Text Edit''' |
| 156 | | || '''Selector''' || '''Type''' || '''Description''' || |
| 157 | | || `theText` || String or Text || the contents of this editable widget || |
| 158 | | || `readOnly` || Boolean || editable or not; selections work always || |
| 159 | | || `outerBorderWidth` || Integer || width of the additional rounded outer border || |
| 160 | | || `autoConvert` || Boolean || convert the contents as you type specified by a ''validation block'' || |
| 161 | | || `autoAccept` || Boolean || always signals the changed contents as you type - no focus switch or return keypress needed || |
| 162 | | || `validator` || Block || specifiy the validator; block accepts one parameter (the contents/text) and needs to return a String or Text || |
| 163 | | |
| 164 | | [[Image(textedit.png, nolink, title="Text edit with contents larger than the widgets -> vertical scrollbar appreas.")]] |
| 165 | | |
| 166 | | This widget improves the classic `PluggableTextMorph` as it supports a read-only mode, input validation, and [wiki:signals]. |
| 167 | | |
| 168 | | '''Line Edit''' ''(specialized Text Edit)'' |
| 169 | | || '''Selector''' || '''Type''' || '''Description''' || |
| 170 | | || `helpText` || String || non-selectable text that appear if no regular text is set || |
| 171 | | |
| 172 | | [[Image(lineedit.png, nolink, title="A line edit with no contents but the help text visible.")]] |
| 173 | | |
| 174 | | This widget supports only one line of editable text that scrolls automatically on the horizontal axis. |
| 175 | | |
| 176 | | |
| 177 | | == Display Widgets == |
| 178 | | |
| 179 | | == Item Widgets (Item-Based) == |
| 180 | | |
| 181 | | == Item Widgets (Model-Based) == |
| | 73 | Explore all examples in the `WidgetTools` package to learn more about the item-view framework and how to connect widgets to user input. Try to design your graphical front-ends with the [wiki:designer Morphic Designer] to avoid writing verbose user interface code. |
