Today we will learn how can we create a custom Button Control (like on the screen) for REAlbasic application using Canvas Control. Hope you will find this tutorial useful. Watch it, learn it, enjoy it!
Before we start coding add to Window1 Class a Canvas Control and set in Width property to 61 and Height to 19. These values will give the button the best Mac like look. Now in it Sub Paint () event enter the code below
1 2 3 4 5 6 7 8 9 | g.ForeColor = RGB(105,100,107) //set the color g.DrawRoundRect (0,0,me.Width,me.Height,17,17) //draw the round rectangle g.ForeColor = &c1E1E1E //set the color g.FillRoundRect (1,1,me.Width-2,me.Height-2,17,17) //fill the rectangle g.ForeColor = &cFFFFFF //set the color g.TextSize = 10 //set text size g.DrawString ("Backup", 13, 13) //drawn the string "Backup" on X, Y position in Canvas Control |
This will draw our button when the application will start.
It would be nice if the Button could visually change it color so the user will know that it was clicked (like the first button on the tutorial screen). There are few ways to doing that, and I will show you one of the easiest. Add this code to Canvas1 Function MouseDown ().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | //creating clicked style button Canvas1.Graphics.ForeColor = RGB(105,100,107) //set the color Canvas1.Graphics.DrawRoundRect (0,0,Canvas1.Width,Canvas1.Height,17,17) Canvas1.Graphics.ForeColor = RGB(79,75,80) Canvas1.Graphics.FillRoundRect (1,1,Canvas1.Width-2,Canvas1.Height-2,17,17) Canvas1.Graphics.ForeColor = &cFFFFFF //set the color Canvas1.Graphics.TextSize = 10 Canvas1.Graphics.DrawString ("Backup", 13, 13) App.DoEvents(180) //pause for 180 ms so the user can see the click //showing the default style of our custom button control Canvas1.Graphics.ForeColor = RGB(105,100,107) //set the color Canvas1.Graphics.DrawRoundRect (0,0,Canvas1.Width,Canvas1.Height,17,17) Canvas1.Graphics.ForeColor = &c1E1E1E Canvas1.Graphics.FillRoundRect (1,1,Canvas1.Width-2,Canvas1.Height-2,17,17) Canvas1.Graphics.ForeColor = &cFFFFFF //set the color Canvas1.Graphics.TextSize = 10 Canvas1.Graphics.DrawString ("Backup", 13, 13) |
I also used in this tutorial a transparent window effect from my other tutorial Transparent Window in REALbasic. If you like you can use it too… but change the percent of visibility to .90.
If you see this message you probably want access special material for Premium Members (Source Files, Bonus Tutorials, free Classes and More). You can do this by subscribing REALbasic City site for 10 USD (access for 3 months). There is also a option to buy access only to this material. Login or register to get option to buy and support REALbasic City.
Log in
REALbasic City is a part of TUTSPOLIS where you can find tutorials about creating cross-platform software for Mac, Windows and Linux using REALbasic 2009. Learn a object-oriented dialect of the BASIC programming language and create your own games and software such as browsers, periodic tables, catalogs for your
personal book library, e-mail clients, weather clients, instant messengers, unarchivers etc.
Thanks Jakub for another cool tutorial. You have made it very easy to do something that has been confusing to me in the past. Is it just as easy to use say custom buttons from a png file or something like that. There are a lot of cool buttons built into OSX that RB does not have access to. You know like the + and – buttons, or itunes style buttons or even small metal like buttons. I guess some of these buttons are custom.
Thanks!
AG
Thank you Andrew
There will be more tutorials showing how to do custom buttons and controls in REALbasic, also some that you have mention.
Regards
Jakub
Cool! Thanks Jakub.