Changeset 25758 in project


Ignore:
Timestamp:
01/04/12 13:52:55 (9 years ago)
Author:
juergen
Message:

iup-tutor: layout-dialog and element-properties-dialog used

File:
1 edited

Legend:

Unmodified
Added
Removed

  • wiki/iup-tutor

    r25757 r25758  
    200200which looks nicer).
    201201
    202 Note also, that attribute values can be numbers or symbols as well. The Iup convention is to use "Yes" and "No" as boolean values. In Scheme you can use symbols as well.
    203 And last, but not least, note the tips: attribute, which defines
    204 tooltips, and the ampersand in the button's title, which defines a
    205 shortcut, Alt+underlined-character, to execute the callback.
     202Note also, that attribute values can be numbers or symbols as well. The
     203Iup convention is to use "Yes" and "No" as boolean values. In Scheme you
     204can use symbols as well.  And last, but not least, note the tips:
     205attribute, which defines tooltips, and the ampersand in the button's
     206title, which defines a shortcut, Alt+underlined-character, to execute
     207the callback.
    206208
    207209==== hello12.scm
    … …  
    300302EXPAND attribute from btn and set it for label, ...
    301303
     304=== Visualize your design
     305
     306Iup has two dialogs which you can use to visualize your design,
     307layout-dialog and element-properties-dialog. They can be used to inspect
     308what you have already done and what's still available. For example, if
     309you replace the line (show dlg) by (show (layout-dialog dlg)) you can
     310see the tree structure of your design and inspect the properties of each
     311widget by right-clicking on it and choosing the appropriate menu-item of
     312the popped-up context-menu.
     313
     314The layout-dialog menu has an export item as well, whith which you can
     315export your design to C, Lua or LED. Of course, for Chicken only the
     316LED export is of any value. But be warned, the dialog is not stable and
     317exporting will crash the program very often, in particular, if the
     318target LED file doesn't already exist. But if the export makes the
     319program crash while overwriting  an existing LED file, your work is
     320lost.  So, you better won't use layout-dialog to create your design, but
     321only to inspect it. That's not that bad, because visual design doesn't
     322help much in a language like Scheme, where the syntax-tree of a program
     323is already visible in its source code, and a good text editor is much
     324faster than a visual editor ....
     325
     326The other dialog, element-properties-dialog, can conveniently be used
     327for documentation purposes, by applying it to each existing widget with
     328attributes set to the most primitive values. This is done in the
     329following example.
     330
     331==== inspector.scm
     332
     333When writing an Iup application, you have always the problem, that you
     334don't know in advance, what are the available widgets and what are the
     335registered attributes and callbacks of each widget. To help with
     336problems like this you can, of course, study the original documentation,
     337and as a method of last resort you have to do that. But for a quick
     338overview you can start the program "inspector" below. It's rather ugly.
     339But that's not important here.
     340
     341<enscript highlight="scheme">
     342(use srfi-4 iup iup-web iup-pplot iup-glcanvas)
     343
     344(define (popup dlg . args)
     345  (apply show dlg #:modal? 'yes args)
     346  (destroy! dlg))
     347
     348(define (properties ih)
     349  (popup (element-properties-dialog ih))
     350  'default)
     351
     352(define dlg
     353  (dialog
     354    (vbox
     355      (hbox ; headline
     356        (fill)
     357        (frame (label " Inspect control and dialog classes "
     358                      fontsize: 15))
     359        (fill)
     360        margin: '0x0)
     361
     362      (label "")
     363      (label "Dialogs" fontsize: 12)
     364      (hbox
     365        (button "dialog"
     366                action: (lambda (self) (properties (dialog (vbox)))))
     367        (button "color-dialog"
     368                action: (lambda (self) (properties (color-dialog))))
     369        (button "file-dialog"
     370                action: (lambda (self) (properties (file-dialog))))
     371        (button "font-dialog"
     372                action: (lambda (self) (properties (font-dialog))))
     373        (button "message-dialog"
     374                action: (lambda (self) (properties (message-dialog))))
     375        (fill)
     376        margin: '0x0)
     377      (hbox
     378        (button "layout-dialog"
     379                action: (lambda (self) (properties (layout-dialog))))
     380        (button "element-properties-dialog"
     381                action: (lambda (self)
     382                          (properties
     383                            (element-properties-dialog (create 'user)))))
     384        (fill)
     385        margin: '0x0)
     386
     387      (label "")
     388      (label "Composition widgets" fontsize: 12)
     389      (hbox
     390        (button "fill"
     391                action: (lambda (self) (properties (fill))))
     392        (button "hbox"
     393                action: (lambda (self) (properties (hbox))))
     394        (button "vbox"
     395                action: (lambda (self) (properties (vbox))))
     396        (button "zbox"
     397                action: (lambda (self) (properties (zbox))))
     398        (button "radio"
     399                action: (lambda (self) (properties (radio (vbox)))))
     400        (button "normalizer"
     401                action: (lambda (self) (properties (normalizer))))
     402        (button "cbox"
     403                action: (lambda (self) (properties (cbox))))
     404        (button "sbox"
     405                action: (lambda (self) (properties (sbox (vbox)))))
     406        (button "split"
     407                action: (lambda (self) (properties (split (vbox) (vbox)))))
     408        (fill)
     409        margin: '0x0)
     410
     411      (label "")
     412      (label "Standard widgets" fontsize: 12)
     413      (hbox
     414        (button "button"
     415                action: (lambda (self) (properties (button))))
     416        (button "canvas"
     417                action: (lambda (self) (properties (canvas))))
     418        (button "frame"
     419                action: (lambda (self) (properties (frame))))
     420        (button "label"
     421                action: (lambda (self) (properties (label))))
     422        (button "listbox"
     423                action: (lambda (self) (properties (listbox))))
     424        (button "progress-bar"
     425                action: (lambda (self) (properties (progress-bar))))
     426        (button "spin"
     427                action: (lambda (self) (properties (spin))))
     428        (fill)
     429        margin: '0x0)
     430      (hbox
     431        (button "tabs"
     432                action: (lambda (self) (properties (tabs))))
     433        (button "textbox"
     434                action: (lambda (self) (properties (textbox))))
     435        (button "toggle"
     436                action: (lambda (self) (properties (toggle))))
     437        (button "treebox"
     438                action: (lambda (self) (properties (treebox))))
     439        (button "valuator"
     440                action: (lambda (self) (properties (valuator ""))))
     441        (fill)
     442        margin: '0x0)
     443
     444      (label "")
     445      (label "Additional widgets" fontsize: 12)
     446      (hbox
     447        (button "cells"
     448                action: (lambda (self) (properties (cells))))
     449        (button "color-bar"
     450                action: (lambda (self) (properties (color-bar))))
     451        (button "color-browser"
     452                action: (lambda (self) (properties (color-browser))))
     453        (button "dial"
     454                action: (lambda (self) (properties (dial ""))))
     455        (button "matrix"
     456                action: (lambda (self) (properties (matrix))))
     457        (fill)
     458        margin: '0x0)
     459      (hbox
     460        (button "pplot"
     461                action: (lambda (self) (properties (pplot))))
     462        (button "glcanvas"
     463                action: (lambda (self) (properties (glcanvas))))
     464        (button "web-browser"
     465                action: (lambda (self) (properties (web-browser))))
     466        (fill)
     467        margin: '0x0)
     468
     469      (label "")
     470      (label "Menu widgets" fontsize: 12)
     471      (hbox
     472        (button "menu"
     473                action: (lambda (self) (properties (menu))))
     474        (button "menu-item"
     475                action: (lambda (self) (properties (menu-item))))
     476        (button "menu-separator"
     477                action: (lambda (self) (properties (menu-separator))))
     478        (fill)
     479        margin: '0x0)
     480
     481      (label "")
     482      (label "Images" fontsize: 12)
     483      (hbox
     484        (button "image/palette"
     485                action: (lambda (self)
     486                          (properties
     487                            (image/palette 1 1 (u8vector->blob (u8vector 0))))))
     488        (button "image/rgb"
     489                action: (lambda (self)
     490                          (properties
     491                            (image/rgb 1 1 (u8vector->blob (u8vector 0))))))
     492        (button "image/rgba"
     493                action: (lambda (self)
     494                          (properties
     495                            (image/rgba 1 1 (u8vector->blob (u8vector 0))))))
     496        (button "image/file"
     497                action: (lambda (self)
     498                          (properties
     499                            ;; same attributes as image/palette
     500                            (image/palette 1 1 (u8vector->blob (u8vector 0))))))
     501                            ;; needs a file in current directory
     502                            ;(image/file "chicken.ico")))) ; ok
     503                            ;(image/file "chicken.png")))) ; doesn't work
     504        (fill)
     505        margin: '0x0)
     506
     507      (label "")
     508      (label "Other widgets" fontsize: 12)
     509      (hbox
     510        (button "clipboard"
     511                action: (lambda (self) (properties (clipboard))))
     512        (button "timer"
     513                action: (lambda (self) (properties (timer))))
     514        (button "spinbox"
     515                action: (lambda (self) (properties (spinbox (vbox)))))
     516        (fill)
     517        margin: '0x0)
     518
     519      (fill)
     520      (button "E&xit"
     521              expand: 'horizontal
     522              action: (lambda (self) 'close))
     523      )
     524    margin: '15x15
     525    title: "Iup inspector"))
     526
     527(show dlg)
     528(main-loop)
     529(exit 0)
     530</enscript>
     531
     532When you compile this program and use it, you will note, that some
     533attributes can be inherited. That means, that all children of an object
     534inherit those attributes. To override this, you must set those
     535attributes in the children anew (look at the margin: attribute above).
     536Moreover, you'll notice that there are tabs not only on attributes and
     537callbacks, but on a hash-table as well.  This is how Iup handles class
     538extension. If you want a widget to have an attribute "foo", you can
     539simply use (attribute-set! widget "foo" "value").  Those hash-table
     540attributes are inherited as well. By the way, you are not obliged, to
     541use strings only in their definition.
     542 
    302543=== Porting some examples from the Iup Distribution
    303544
    … …  
    8951136</enscript>
    8961137
    897 === Some other examples
    898 
    899 The following examples are a bit more involved. The first implements a
    900 primitive but fully functional web browser, the other a quick and dirty
    901 class inspector.
    902 
    9031138==== webbrowser.scm
    9041139
    … …  
    10841319</enscript>
    10851320
    1086 ==== inspector.scm
    1087 
    1088 The last example is an utility to help with development. When writing an
    1089 Iup application, you have always the problem, that you don't know in
    1090 advance, what are the available widgets and what are the registered
    1091 attributes and callbacks of each widget. To help with problems like this
    1092 you can, of course, study the original documentation, and as a method of
    1093 last resort you have to do that. But for a quick overview you can start
    1094 the program "inspector" below. It's rather ugly. But that's not important
    1095 here.
    1096 
    1097 <enscript highlight="scheme">
    1098 (use srfi-4 iup iup-web iup-pplot iup-glcanvas)
    1099 
    1100 (define (popup dlg . args)
    1101   (apply show dlg #:modal? 'yes args)
    1102   (destroy! dlg))
    1103 
    1104 (define (properties ih)
    1105   (popup (element-properties-dialog ih))
    1106   'default)
    1107 
    1108 (define dlg
    1109   (dialog
    1110     (vbox
    1111       (hbox ; headline
    1112         (fill)
    1113         (frame (label " Inspect control and dialog classes "
    1114                       fontsize: 15))
    1115         (fill)
    1116         margin: '0x0)
    1117 
    1118       (label "")
    1119       (label "Dialogs" fontsize: 12)
    1120       (hbox
    1121         (button "dialog"
    1122                 action: (lambda (self) (properties (dialog (vbox)))))
    1123         (button "color-dialog"
    1124                 action: (lambda (self) (properties (color-dialog))))
    1125         (button "file-dialog"
    1126                 action: (lambda (self) (properties (file-dialog))))
    1127         (button "font-dialog"
    1128                 action: (lambda (self) (properties (font-dialog))))
    1129         (button "message-dialog"
    1130                 action: (lambda (self) (properties (message-dialog))))
    1131         (fill)
    1132         margin: '0x0)
    1133       (hbox
    1134         (button "layout-dialog"
    1135                 action: (lambda (self) (properties (layout-dialog))))
    1136         (button "element-properties-dialog"
    1137                 action: (lambda (self)
    1138                           (properties
    1139                             (element-properties-dialog (create 'user)))))
    1140         (fill)
    1141         margin: '0x0)
    1142 
    1143       (label "")
    1144       (label "Composition widgets" fontsize: 12)
    1145       (hbox
    1146         (button "fill"
    1147                 action: (lambda (self) (properties (fill))))
    1148         (button "hbox"
    1149                 action: (lambda (self) (properties (hbox))))
    1150         (button "vbox"
    1151                 action: (lambda (self) (properties (vbox))))
    1152         (button "zbox"
    1153                 action: (lambda (self) (properties (zbox))))
    1154         (button "radio"
    1155                 action: (lambda (self) (properties (radio (vbox)))))
    1156         (button "normalizer"
    1157                 action: (lambda (self) (properties (normalizer))))
    1158         (button "cbox"
    1159                 action: (lambda (self) (properties (cbox))))
    1160         (button "sbox"
    1161                 action: (lambda (self) (properties (sbox (vbox)))))
    1162         (button "split"
    1163                 action: (lambda (self) (properties (split (vbox) (vbox)))))
    1164         (fill)
    1165         margin: '0x0)
    1166 
    1167       (label "")
    1168       (label "Standard widgets" fontsize: 12)
    1169       (hbox
    1170         (button "button"
    1171                 action: (lambda (self) (properties (button))))
    1172         (button "canvas"
    1173                 action: (lambda (self) (properties (canvas))))
    1174         (button "frame"
    1175                 action: (lambda (self) (properties (frame))))
    1176         (button "label"
    1177                 action: (lambda (self) (properties (label))))
    1178         (button "listbox"
    1179                 action: (lambda (self) (properties (listbox))))
    1180         (button "progress-bar"
    1181                 action: (lambda (self) (properties (progress-bar))))
    1182         (button "spin"
    1183                 action: (lambda (self) (properties (spin))))
    1184         (fill)
    1185         margin: '0x0)
    1186       (hbox
    1187         (button "tabs"
    1188                 action: (lambda (self) (properties (tabs))))
    1189         (button "textbox"
    1190                 action: (lambda (self) (properties (textbox))))
    1191         (button "toggle"
    1192                 action: (lambda (self) (properties (toggle))))
    1193         (button "treebox"
    1194                 action: (lambda (self) (properties (treebox))))
    1195         (button "valuator"
    1196                 action: (lambda (self) (properties (valuator ""))))
    1197         (fill)
    1198         margin: '0x0)
    1199 
    1200       (label "")
    1201       (label "Additional widgets" fontsize: 12)
    1202       (hbox
    1203         (button "cells"
    1204                 action: (lambda (self) (properties (cells))))
    1205         (button "color-bar"
    1206                 action: (lambda (self) (properties (color-bar))))
    1207         (button "color-browser"
    1208                 action: (lambda (self) (properties (color-browser))))
    1209         (button "dial"
    1210                 action: (lambda (self) (properties (dial ""))))
    1211         (button "matrix"
    1212                 action: (lambda (self) (properties (matrix))))
    1213         (fill)
    1214         margin: '0x0)
    1215       (hbox
    1216         (button "pplot"
    1217                 action: (lambda (self) (properties (pplot))))
    1218         (button "glcanvas"
    1219                 action: (lambda (self) (properties (glcanvas))))
    1220         (button "web-browser"
    1221                 action: (lambda (self) (properties (web-browser))))
    1222         (fill)
    1223         margin: '0x0)
    1224 
    1225       (label "")
    1226       (label "Menu widgets" fontsize: 12)
    1227       (hbox
    1228         (button "menu"
    1229                 action: (lambda (self) (properties (menu))))
    1230         (button "menu-item"
    1231                 action: (lambda (self) (properties (menu-item))))
    1232         (button "menu-separator"
    1233                 action: (lambda (self) (properties (menu-separator))))
    1234         (fill)
    1235         margin: '0x0)
    1236 
    1237       (label "")
    1238       (label "Images" fontsize: 12)
    1239       (hbox
    1240         (button "image/palette"
    1241                 action: (lambda (self)
    1242                           (properties
    1243                             (image/palette 1 1 (u8vector->blob (u8vector 0))))))
    1244         (button "image/rgb"
    1245                 action: (lambda (self)
    1246                           (properties
    1247                             (image/rgb 1 1 (u8vector->blob (u8vector 0))))))
    1248         (button "image/rgba"
    1249                 action: (lambda (self)
    1250                           (properties
    1251                             (image/rgba 1 1 (u8vector->blob (u8vector 0))))))
    1252         (button "image/file"
    1253                 action: (lambda (self)
    1254                           (properties
    1255                             ;; same attributes as image/palette
    1256                             (image/palette 1 1 (u8vector->blob (u8vector 0))))))
    1257                             ;; needs a file in current directory
    1258                             ;(image/file "chicken.ico")))) ; ok
    1259                             ;(image/file "chicken.png")))) ; doesn't work
    1260         (fill)
    1261         margin: '0x0)
    1262 
    1263       (label "")
    1264       (label "Other widgets" fontsize: 12)
    1265       (hbox
    1266         (button "clipboard"
    1267                 action: (lambda (self) (properties (clipboard))))
    1268         (button "timer"
    1269                 action: (lambda (self) (properties (timer))))
    1270         (button "spinbox"
    1271                 action: (lambda (self) (properties (spinbox (vbox)))))
    1272         (fill)
    1273         margin: '0x0)
    1274 
    1275       (fill)
    1276       (button "E&xit"
    1277               expand: 'horizontal
    1278               action: (lambda (self) 'close))
    1279       )
    1280     margin: '15x15
    1281     title: "Iup inspector"))
    1282 
    1283 (show dlg)
    1284 (main-loop)
    1285 (exit 0)
    1286 </enscript>
    1287 
    1288 When you compile this program and use it, you will note, that some
    1289 attributes can be inherited. That means, that all children of an object
    1290 inherit those attributes. To override this, you must set those
    1291 attributes in the children anew (look at the margin: attribute above).
    1292 Moreover, you'll notice that there are tabs not only on attributes and
    1293 callbacks, but on a hash-table as well.  This is how Iup handles class
    1294 extension. If you want a widget to have an attribute "foo", you can
    1295 simply use (attribute-set! widget "foo" "value").  Those hash-table
    1296 attributes are inherited as well. By the way, you are not obliged, to
    1297 use strings only in their definition.
    1298  
    12991321=== Concluding remark
    13001322
Note: See TracChangeset for help on using the changeset viewer.