Suggestion about form layouts

[Maurizio]

Would be fine to have a chapter about laying out forms, better if with some example. I find the topic a little difficult.

I'd like to build forms having a similar layout :

Code Select Expand


    Please enter your information:

   first name: XXXXXXXXXXXXXXX
    last name: XXXXXXXXXXXXXXX
          age: XXX
       
          OK   CANCEL  

Please note he following:

The labels should be right aligned, while the input fields left aligned.

The two buttons OK and Cancel should have equal size.

Resizing the form should mantain the alignment of the labels/fields

and they should be orizontally centered in the form.

The space betweeen the labels and the input field should grow as the form is enlarged, but it should have a minimun size.

The form should have a fixed empty vertical space both at the top and at the bottom, and a minimun space should exist between the last row and the buttons.

The other rows should be vertically proportionally spaced.

Any suggestion ?

Regards

Maurizio

[Lutz]

The way to do layouts, is nesting them:

Code Select Expand

#!/usr/bin/newlisp
;;
;; FromDemo.lsp

;;;; initialization
(if (= ostype "Win32")
    (load (string (env "PROGRAMFILES") "/newlisp/guiserver.lsp"))
    (load "/usr/share/newlisp/guiserver.lsp")
)    

(gs:init)

(gs:frame 'FormDemo 100 100 300 250 "Form Demo")
;(gs:set-resizable 'FormDemo nil)
(gs:set-border-layout 'FormDemo 20 20)
(gs:label 'InfoLabel "Please enter your information:" "center" 250 30)
(gs:add-to 'FormDemo 'InfoLabel "north")

(gs:panel 'FormPanel)
(gs:set-grid-layout 'FormPanel 1 2 10 10)

(gs:panel 'LabelPanel)
(gs:set-flow-layout 'LabelPanel "right")
(gs:label 'FirstNameLabel "Fist Name:" "right" 100 22)
(gs:label 'LastNameLabel "Last Name:" "right" 100 22)
(gs:label 'AgeLabel "Age:" "right" 100 22)
(gs:add-to 'LabelPanel 'FirstNameLabel 'LastNameLabel 'AgeLabel)

(gs:panel 'TextFieldPanel)
(gs:set-flow-layout 'TextFieldPanel "left")
(gs:text-field 'FirstNameField 'firstname-action 16)
(gs:text-field 'LastNameField 'lastname-action 16)
(gs:text-field 'AgeField 'agefield-action 2)
(gs:add-to 'TextFieldPanel 'FirstNameField 'LastNameField 'AgeField)

(gs:add-to 'FormPanel 'LabelPanel 'TextFieldPanel)

(gs:add-to 'FormDemo 'FormPanel "center")

(gs:panel 'ButtonPanel)
(gs:set-flow-layout 'ButtonPanel "center")
(gs:button 'OkButton 'okbutton-action "Ok")
(gs:button 'CancelButton 'cancelbutton-action "Cancel")
(gs:add-to  'ButtonPanel 'OkButton 'CancelButton)

(gs:panel 'FillerLeft 10 200)
(gs:panel 'FillerRight 10 200)
(gs:add-to 'FormDemo 'ButtonPanel "south" 'FillerLeft "west" 'FillerRight "east" )

(gs:set-visible 'FormDemo true)

(gs:listen)




The main layout is a border layout with title north, the entry form in the center and the buttons south.



The center contains a 1 b y 2 grid for labels on the left and thge text dfields on the right.



http://newlisp.org/code/FormDemo.png">



The labels should have the same height as the text entry fields, so they line up horizontally. The above values work on Mac OS X and may have to be adjusted on Win32. You could make it easier by putting 3x1 grid layouts into the label and text field panels, but then the text fields extend to the maximum size allowed in the grid, and you would have to constrain the age field using another nested panel and flow layout.



Lutz



ps: edited to simplify more

[Maurizio]

Thank you very much.

Maurizio