Suggestion about form layouts

Guiserver, GTK-server, OpenGL, PostScript,
HTML 5, MIDI, IDE
Locked
Maurizio
Posts: 52
Joined: Mon Jul 28, 2003 3:06 pm
Location: Italy

Suggestion about form layouts

Post by 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 all

     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
Posts: 5289
Joined: Thu Sep 26, 2002 4:45 pm
Location: Pasadena, California
Contact:

Post by Lutz »

The way to do layouts, is nesting them:

Code: Select all

#!/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.

Image

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
Posts: 52
Joined: Mon Jul 28, 2003 3:06 pm
Location: Italy

Post by Maurizio »

Thank you very much.
Maurizio

Locked