 |
 |
 |
||||
 3D 3D Photo Gallery (Part 1) 3D Photo Gallery (Part 2) Audio Poor Man's MIDI Make A Metronome iPod Tricks (Part 1) iPod Tricks (Part 2) iPod Tricks (Part 3) Laugh Track Machine Audio Player with Reverb Shepard Melody RB Phone Home Build a Drum Machine Custom Controls and Windows Double Click Listbox Draggable Metal Window Double Click Canvas Custom Buttons Custom Buttons Part II iTunes-style Listboxes Custom Controls General RB Scrolling Windows Using Mesage Dialogs Case-Sensitive Word Finder Introduction to Stacks Wiggle Window JPEG in PDF Listbox Checkboxes Background Applications Listbox Auto-Find Virtual Volumes Time Tracker Software Distribution (Part 1) Software Distribution (Part 2) Software Distribution (Part 3) Software Distribution (Part 4) Exceptions Tips and Tricks Text Clippings Made Easy Graphics Drawing a Simple Gradient The SpriteSurface: Space Game Image Spinner Cropping Graphics (Part 1) Cropping Graphics (Part 2) Cropping Graphics (Part 3) Cropping Graphics (Part 4) Shimmer Graphics Lissajous Figures Simple Screen Capture Vector Graphics Kaleidoscope Images Stegonography Spirals! Image Table RB Magnifying Lens Screen Capture Color Picker Tutorial Hacks Ghost Grab Speedy Mouse Extension iTunes Plugins iTunes Skinner Mac OS X Global Hot Key Event (Carbon Events) Login Welcomer (Carbon Events) Add/Remove Buttons Resizable Sheets Mac OS X Preferences Window Using Sheets in REALbasic Build a Bundle (Part 1) Build a Bundle (Part 2) Dock Your Passwords Mac OS X Debugging REALbasic Mac OS X Icon Tutorial Animate Your Dock RB and the Command Line Menus Window Menu Templates Menu Listbox Menu Novelty Guessing Game Calendar Trivia Tile Mixer Zip Code Finder Happy Valentine's Day Merlin Simulator (Part 1) Merlin Simulator (Part 2) Merlin Simulator (Part 3) Buzzword Machine AppleSoft BASIC Printing Print to PDF Registration Registration Code Validation Network Registration Codes Resources Picture Extractor (Part 1) Picture Extractor (Part 2) Serial Caller ID (Part 1) Caller ID (Part 2) Caller ID (Part 3) Speech Speech Recognition Socket Communication Easy Peer-to-Peer File Sharing MacPAD Version Checking Display Web Image In Canvas HTML IMG Tags Version Tracking Even Smarter Instant Messaging Web Tiler JavaScript and REALbasic Stock Ticker (Part I) Stock Ticker (Part 2) AIM Mate XML Manipulation Simple XML Introduction Video Big Brother Video Capture Note: All articles without a byline were written by Erick Tejkowski. When cleaning the site I removed them because the code differed from page to page, and I have yet to put them back in.
Tell us about a bad link. |
 |
Taking the baton from part 1 of the tutorial, we're going to continue running with learning how to create custom buttons. On Wednesday we learned how to create a standard pushbutton-type button using a custom canvas subclass which we created, CButton. Next we're going to learn to make our CButton class a little more generalized allowing us to use the same class in multiple cases, but our instances are able to take on different appearances and different behaviors. What we're going to do first is create a handful of new CButton properties in the CButton class which will allow us to create a checkbox-like button which we will refer to as the "Toggle" type as well as a "Sticky" button like the BevelButton's "Sticky" ButtonType. First we're going to create a property which will define which type of button we want the CButton instance to be, whether it be like a pushbutton or a checkbox. Create a "mButtonType as string" property in the CButton class. For our different kinds of buttons, we will use mButtonType values as follows:
If you look at a checkbox and play with it in its different states while having different values, you'll notice that it has four appearances. How do we get four? We know that there is the neutral state (which we call "up"), during which the the user is not interacting with the control, and the "down" state which entails the user has clicked on the control and the mouse button is currently held down. We also know that a checkbox has two values, true and false. Relating the two, a checkbox button can either of the two values while in any state. For example, if the user isn't interacting with the checkbox and it is checked, then the state is "up" and value "true". If the user has clicked on the checkbox to check it and the mouse is still held down, the state is "down" and the value still "false" since it will only become true when the mouse button is released. For each of these possibilities we'll an image to represent the state and value, thus we'll create four new image properties in the CButton class:
And actually, when you think about it, our existing properties from the last tutorial aren't necessary any more since the mValueFalseDownImage and mValueFalseUpImage properties are essentially the same thing because a Pushbutton-like button never has a value of true. So go ahead and delete those two properties, mDownImage and mUpImage, and instead we'll use the mValueFalseDownImage and mValueFalseUpImage properties from now on. As we said before, a toggle button, like a checkbox, has two possible values, true and false. To represent these values, we're going to create our last new property, a protected boolean property "mValue as Boolean" . Why protected? If we simply used a property, and you set it to "true" in the instance, what would happen? Would the button change its appearance to be true? Nope! REALbasic doesn't know to redraw your button because you reset some property, you'll have to tell it yourself. The reason we're going to use a protected property is because then we can use a new feature of the REALbasic version 5.0 compiler which allows us to transparently create a property using methods. You'll see what I mean when we do it. If you're not use RB 5.0, I highly recommend you upgrade, but it's not necessary. The code here is a little specialized for 5, but with prior versions, make the property public (aka, not "private" as its called in 4.5 or earlier) and simply call the Refresh method after any time you set the value property in the instance. These are all of the properties we're going to need, but before we go any further, we're going to do a little bit of reorganization. Instead of setting the images for our buttons in the CButton class, we're going to allow (and actually force) the RB developer (ultimately you) to define the images in the instance allowing different CButtons and button types to have different appearances. To do this, create a new "Open" event in the CButton class, and call it from the existing Open event of the CButton class. Sub Open() mState = "up" Open End Sub Next go to the existing CButton instance in Window1 and assign values to our two image properties in the Open event. (Remember we're using the new image properties since the old ones have been deleted.) Next we want to make sure that these properties have default values since it's an extra level of security from little mistakes, because we don't want to have to set each required property to a value when all of them should have that value (like mValue initially being false), and simply because it's good practice. Now to implement our Toggle and Sticky buttons, we're going to explore this neat little 5.0 complier trick which will help up us in keeping track of the value and making sure that the graphical appearance of our button is correct. Have you ever wanted something to happen right after setting a variable, and wanting it to happen every single time? What about getting a variable's value? The solution to this problem is what are called "Setter" and "Getter" methods. With a "Setter" method, when you set a variable you're actually passing a value to a method which then sets the value and also runs some other code which you specify. With a "Getter", it runs some code and then returns the value of the desired variable. This is extremely useful in many cases; in particular, ours. Create a new method named "Value" and let it return a "boolean". Inside the method enter "return mValue". Next create another method named "Value" which has the parameter "theValue as boolean". The code for the second Value method is: Sub Value(Assigns theValue as boolean) mValue = theValue Draw End Sub You've probably noticed that there's an extra word in the parameters. What the "Assigns" keyword allows you to do, is call the method with the syntax of setting a variable, and the value you "set" becomes the value of the rightmost parameter in the method. For example, we could call the method above using: CButton1.Value = false This would fire the method, setting mValue to false and then calling the Draw method. Pretty nifty eh? Our other Value method allows us to retrieve the value of mValue. Nothing fancy here, it's a simple "accessor" method (e.g. it allows you to access the variable, albeit indirectly). Now, the next thing we're going to do is rewrite the Draw method to use our four new image properties. Here's the code for the rewritten Draw method: What the code does is simply check what the current state is and whether the value is true or false, and based on that, we draw the appropriate picture. This one method will work for all three of our ButtonTypes since each button shares and uses the same properties and holds the same meaning for their values but only set the values at different times. The very last step for us is to set the button's value to "true" or "false" when it should be within the MouseUp event of the CButton class. For our "Toggle" button, we'll set the value to the opposite value it is, and for the "Sticky" button, we're *always* going to set it to true since that's the behavior of a sticky button; whenever it is clicked, the value is set to true; only when value is explicitly set to false in code does the value revert to false. In code this looks like this: The reason there is no case statement for the "Button" type is because that if our CButton instance is a Button, then the value will be false to begin with and always be false after. That is every line of code we need to write in our CButton class to support all three button types. Now lets test it! Create two new buttons in the main window. In the Action event of both, place: Next, in the Open events we'll set our images and mButtonType appropriately . If you download the project (link at the bottom of the page) and use the included images, then the code for each button is as follows. Toggle: Sticky: That's it! Run the project and play with it to hearts desire. It works! So now you know how to create custom buttons with different behaviors and have more than just a simple "up" and "down" image. If you're really into the idea of creating custom buttons, try and extend the code in the CButton class to draw a different image when the mouse hovers over the button. Well.... that's all for this time. Have fun. |
|
|||
|
Please support ResExcellence by Visiting our Sponsors. One click makes a difference. |
||||||
 |
 |
 |
 |