Introduction
I was developing a point of sales application and realized a graphical display of
stock available was a good idea so i tried to develop a control for that. There
was the need to also have some colour variations in relation to the level so a user
could tell outrightly when stock is ok, just low or critically low. Some animation
("flow") when getting to the value given it wasn't a bad idea :), so i added it.The
Message box became useful after i had completely skinned my application and realized
the "hard" looking microsoft message box was like "a fish out of water" in my software.
But because we can't do without message boxes, i had to make one to match my skin,
so i did that. I must say because these were made for my application, even though
they're flexible, more feature will be added to make them even more flexible. That
will be soon in version 2.0..
Using the code
It's pretty simple to use the controls. All you need to do is to reference the project
(if using the source code in your solution) or reference the .dll. In Visual Studio
2005 the controls will appear in the Toolbox under "JemControls V1.0 Components".
Drug any of the two onto the form and the use it as a normal control. For the message
box, remember to set it visibility property to FALSE even though not doing so doesn't
hurt. Now let's go through the details.
Namespace: JemControls (Both reside in this namespace)
Classes: JemLevelGuage (for Level Gauge) and JemMessageBox (for messagebox)
Enumerations: myMessageButtons, myMessageResult, myMessageType (All these
enumerations are used with JemMessageBox)
Public Properties:
JemMessageBox:
TitleImage Type: Image
Sets and Gets
ButtonImage Type: Image
Sets and Gets
ButtonRollImage Type: Image
Sets and Gets
JemLevelGauge:
LevelHeight Type:
double Gets
MaxValue Type: double
Sets and Gets
MinValue Type: double
Sets and Gets
LowValue Type: double
Sets and Gets
CriticalValue Type:
double Sets and Gets
Public Methods:
JemMessageBox:
public void setBackImages(Image
TitleImage, Image ButtonImage, Image ButtonRollImage)
public void setBackImages(Image
TitleImage, Image ButtonImage)
public void setBackImages(Image
TitleImage)
public myMessageResult Message(string
theInformation, string theTitle, myMessageType theType, myMessageButtons theButton)
public myMessageResult Message(string
theInformation, string theTitle, myMessageType theType)
JemLevelGauge:
public void setNewValue(string
val)
public void setNewValue(double
val)
Descrption
JemMessageBox:
All the properties are images and their names suggest where they'll be going. The
images will be eventually stretched on the controls so add that to the design. There
is one for the Title picture box. No writing is done on the title picture box but
a step below it, it's just for beautification. The button background images, buttonImage
and buttonRollImage, are for the button's background and the background when the
mouse enters respectively. If no images are set, it won't come out very nicely because
i didn't give any default images. I will set then in version 2.0.
There two main public functions for setting the properties and getting results from
the messagebox. "setBackImages" is overloaded for setting the various images. To
pass to any image parameter or property from file, you can use "System.Drawing.Image.Fromfile(string
path)" to load it. The overloaded "setBackImages" with two parameters uses the same
buttonImage for rollover, hence there is no rollover effect and the image remains.
You may ignore the "setBackImages" methods and pass in the images using the properties.
The "Message" method is used to display a message and return a result which is of
type myMessageResult, an enum in the "JemControls" namespace.
JemLevelGauge:
All the properties here are doubles. The level height just gives the height of the
guage at anytime. I will modify it to give percentage instead of version 2.0. The
"maxValue" is for the maximum value(double) that the level can ever get (it's 100%
value), the default is 100. Say you want to put a guage on the number of days in
July. The "maxValue" will be 31 and "minValue" will be 1. The "lowValue" value indicates
where the level's colour will turn yellow. "criticalValue" indicates where the the
level's colour will turn Red. The colours are actually images saved as resources
to give it a roundish effect. Because of this there are only three colours. If you
don't want to see any colour, set its related value to 0. Red is critical low,
yellow is low, green can't be done without. Hope to make things more flexible in
version 2.0.
There is only one public method which is overloaded, "setNewValue", which takes
a double or a string. This value will move the gauge to a relative location with
reference to the maximum value and minimum value you set.
Points of Interest
There is a funny behaviour with the level gauge when it is droped in a groupbox.
Its becomes big and i haven't looked at the problem yet. It could be some settings
of the groupbox or the control, i'll look at that later. However if you want it
to "appear" within a groupbox, then drop it on the form and use the direction keys
on the keyboard to move it "into" the groupbox, using the mouse will make it really
enter.
I also realized code put in the form load method of the control is executed when
the code is dropped on a form. This might be pretty obvious but it wasn't to me
when i was doing it and gave me some confusing results earlier.
A boolean variable, "firstrun", was used by the "setNewValue" methods to pick initial
height and botton values of the level picture box. This was done because i realized
the real values of that particular instance of the JemLevelGauge could be elusive,
maybe i wasn't picking from the right event handler. Even form load gave creation
time values, not the values of the dropped level gauge-that can change due to resizing.
So i picked the real values when you first asign a guage value to it, and then never
picked again by setting "firstrun" to false.
History
This is the first version. Hope to have more details in version 2. The code is also very simple to follow. Enjoy using it.