How do I center a button?

[Thør]

Hi!

Could someone please tell me if there's an easy way to center a button? The only way I can think of is to get the width of the face, subtract the width of the button, divide by two and use AT. However, this presents another problem as I don't know how to get the coordinates of the button.

Thank you.

[rosie]

Hello Thor,

I'm not sure how you want to centre the button, but I'm showing an example of several buttons that are centred.

REBOL [Title: "Pages" File: %pages.r]

pg1: layout [box 150x150 sky "Page 1"]
pg2: layout [box 150x150 beige "Page 2"]
pg3: layout [box 150x150 wheat "Page 3"]

main: layout [
size 190x350
backcolor white
h4 "Pagination" 150x24 center return
at 0x36
page3: box pg3/size
return at 0x36
page2: box pg2/size
return at 0x36
page1: box pg1/size
return across
tog 150x24 "Toggle to Page 2" "Toggle to Page 1" [either value
[show page2 hide page1] [hide page2 show page1]]
return
btn sky 45x24 "Page 1" [hide page2 hide page3 show page1]
btn beige 45x24 "Page 2" [hide page1 hide page3 show page2]
btn wheat 45x24 "Page 3" [hide page1 hide page2 show page3]
return
btn "Quit" 150x24 [quit]
]

page1/pane: pg1/pane
page2/pane: pg2/pane
page3/pane: pg3/pane

view/new center-face main
do-events

No doubts there are other ways to do this, but if you post your script, I'll try to help.

Cheers, Rosie

[Thør]

I'm attempting to recreate the standard login dialog and I have the following code:

Code:

REBOL[]

log: layout [
  style vt vtext 100 right
  across
  vt "Login:" login: field return
  vt "Password:" password: field return
  b1: button "OK" [unview]
]

My problem is how to center the OK button.

On a side note, I'd also like to know how do I make a field display "*" instead of what the user is typing. I can't seem to locate any reference to do this with the docs I have.

Thank you very much.

[Gabriele]

You can use:

Code:

    field hide

to show "*" instead of the text you enter. To move your button to the right, just add some padding:

Code:

    pad 100 b1: button "OK" [unview]

If you know the width of the window is easy to get the right amount to use for pad.

[Thør]

Thank you very much, Gabriele. I guess my next question would be how do I hide a button (or any other screen element)?

Considering that there's no direct "centering" function/refinement, I'm thinking of getting the width of a hidden button, compute the padding necessary to center it, and then "display" the button. Something similar to the "hidden" property of a button in VB or any other Windows based PL.

Thanks again.

[Graham]

to hide a button, use "hide", and to show it again, use "show"

[Gabriele]

Thor, you can also first create the layout, then center the button, then show the window. I.e.:

Code:

win: layout [...]
center-the-button-in win
view win

However, since most of the times the size of the layout is fixed (like in your case, your labels and fields have a fixed width), this is not really necessary.

[Thør]

Rosie, Gabriele, and Graham, a very very big thank you. Looks like I'll need to further detach myself from my non-REBOL way of thinking.

Cheers!


(After a break of about 2 hours and working on it for about 30 mins...)

PS
How do I modify the location of a button in a layout that has already been defined? I've seen examples of changing the color and text, but not for buttons.

Thanks!

[rebolek]

How do I modify the location of a button in a layout that has already been defined? I've seen examples of changing the color and text, but not for buttons.

Thanks!

view layout/size [b: btn "click me!" [b/offset: random 100x100 show b]] 150x120

[Thør]

Thanks to Rosie, Gabriele, Graham, and Rebolek. Here's what I came up with:

Code:

REBOL[
  Title:    "Sample login screen"
  Date:     June 30, 2006
  File:     %login.r
  Author:   "Thor Remoblas" 
  Purpose:  "A script to build a login dialog"
  Comment:  {
    Tested on: View 1.3.2 on WinXP
   
    I would like to thank Rosie, Gabriele, Graham, and Rebolek who were instrumental in helping me
    construct this script. Their pointers, patience, and kindness for answering my newbie questions
    made it all possible.

    Cheers and more power to you guys! :D
  }
]

log: layout/size [
  style vt text 100 right
  across
  vt "Server: " server: field 120 return
  vt "User name:" login: field 120 return
  vt "Password:" password: field 120 hide return
  return
  pad 0x10
  buttons: panel [
    across
    o: btn "OK" 120x22 [unview]
    c: btn "Cancel" 120x22 [unview]
  ]
] 300x155

padding: divide (first :log/size - first :buttons/size) 2
buttons/offset: to-pair reduce [padding second buttons/offset]

view center-face log

[Anton]

Th0r, it's a good question, how to center items.
It is currently not as simple and straightforward to specify centering as everyone would like.
Anyway, here are two small optimizations to your centering code:
1) no need to use get-words, evaluation is automatic. (DO is already evaluating your whole script for you, isn't it?
2) You can use /x and /y instead of FIRST and SECOND on pairs.

Code:

padding: divide (log/size/x - buttons/size/x) 2
buttons/offset: to-pair reduce [padding buttons/offset/y]

[Thør]

Anton,

Thanks for the tip. Yey! Another mystery has been solved - the counterpart to Windows' programming width & height.

Cheers!

[Anton]

I would further optimize the buttons/offset calculation, using AS-PAIR, and getting rid of the PADDING variable:

buttons/offset: as-pair (log/size/x - buttons/size/x) / 2 buttons/offset/y

Hmm.. and now it is obvious that we are only modifying /x, so let's do that:

buttons/offset/x: (log/size/x - buttons/size/x) / 2