how to align racket GUI text fields and buttons - user-interface

Question

I am creating a GUI for a racket program where a user inputs a title and a blog and then submits it. This is my code for those fields so far:
(define blogPost%
(class horizontal-panel%
(super-new)
(define titleoutput (new text-field% (label " title")
(min-height 20)
(min-width 200)
(vert-margin 20)
(horiz-margin 10)
(parent this)))
(define output (new text-field% (label "blog")
(style '(multiple))
(min-height 20)
(vert-margin 20)
(min-width 400)
(parent this)))
(define (callback button event)
(define title-new-value (send titleoutput get-value))
(define new-value (send output get-value))
(save title-new-value new-value)
(send output set-value "")
(send titleoutput set-value "")
(send howisit show #t))
(define button (new button% (label "Submit")
(vert-margin 0)
(horiz-margin 10)
(parent this)
(callback callback)))
))
It is currently aligned like this:
But I would like the title text box to be above the blog field and the submit button to be centered at the bottom.

Answer 1

I'm assuming that you're running this code in the same way as for your previous question. In that, you used your class like this:
(define f (new frame% [label "blog post GUI"] [min-width 400] [min-height 500]))
(define tib (new blogPost%
[parent f]))
(send f show #t)
Now since you defined blogPost% as a subclass of horizontal-panel%, it also inherits all of the initialization arguments of horizontal-panel%, including the alignment argument. So you can pass the [alignment '(left top)] initialization argument to your blogPost% class:
(define f (new frame% [label "blog post GUI"] [min-width 400] [min-height 500]))
(define tib (new blogPost%
[parent f]
[alignment '(left top)]))
(send f show #t)
If you want to build this default into your blogPost% class, you could add it to the (super-new) form instead:
(define blogPost%
(class horizontal-panel%
(super-new [alignment '(left top)])
...))
However, if you happen to have a (new blogPost% ... [alignment '(left top)] ...) around somewhere else, I believe this will break that code.
So to avoid that, it would probably be best to make the blogPost% class it's own class, so that instead of being a horizontal-panel%, it would have a horizontal-panel%, in the same way that it already has two text-fields and a button.
This is better for the long term because after this change, code that uses blogPost% won't break if you change which initialization arguments you passed to horizontal-panel% (which was implicit in the super-new previously).
(define blogPost%
(class object% ; object% instead of horizontal-panel%
; This argument is explicit now.
; If other code relies on other arguments, specify them here.
(init parent)
(super-new)
(define panel
(new horizontal-panel% ; this new call is explicit now
[parent parent] ; you can later add more arguments
[alignment '(left top)])) ; and it won't break things
(define titleoutput
(new text-field%
[label " title"]
[min-height 20]
[min-width 200]
[vert-margin 20]
[horiz-margin 10]
[parent panel])) ; panel instead of this
(define output
(new text-field%
[label "blog"]
[style '(multiple)]
[min-height 20]
[vert-margin 20]
[min-width 400]
[parent panel])) ; panel instead of this
(define (callback button event)
(define title-new-value (send titleoutput get-value))
(define new-value (send output get-value))
(save title-new-value new-value)
(send output set-value "")
(send titleoutput set-value "")
(send howisit show #t))
(define button
(new button%
[label "Submit"]
[vert-margin 0]
[horiz-margin 10]
[parent panel] ; panel instead of this
[callback callback]))
))
(define f (new frame% [label "blog post GUI"] [min-width 400] [min-height 500]))
(define tib (new blogPost%
[parent f]))
(send f show #t)
Of course, with this method, you won't be able to use the methods defined for horizontal-panel% on instances of your blogPost% class, but in the long run that's a good thing as well. If you ever, in the future, wanted to change the implementation to use something other than a horizontal-panel%, you could.