Developing the GUI
Fig – 1 : A Simple GUI
For any object visible on the screen for a GUI, we’ll have the following properties –
-
The coordinate location (x,y) of the object on screen.
-
The area occupied by the object.
The most important property for the object will be its on screen location, which can be checked by the mouse function after the user clicks on a particular point on the screen.
Similarly, there will be specific properties of the object, which will be defined as the functions which will be called when the user clicks on that particular object.
So, the class definition for the above GUI will be as follows –
Class Object
{
protected:
int location[4];
public:
int isThere()
{
int retval=0;
checkMousePos(); // Function defined to check the mouse location
if(x>location[MINX] && x<location[MAXX]) // x & y are global vari-
if(y>location[MINY] && y<location[MAXY]) // ables for location of
retval = 1; // the mouse pointer.
return(retval);
}
};
Class Icon :: public Object
{
public:
Icon(int x1, int y1, int x2, int y2)
{
location[MINX] = x1; // MINX, MINY, MAXX, MAXY are
location[MINY] = y1; // globally defined macros with values
location[MAXX] = x2; // 0,1,2 & 3 respectively, to get the
location[MAXY] = y2; // (x,y) location from the array
}
void Act()
{
// Code specific to Icon objects
// E.g. – Change the icon to a "Pressed" form.
}
};
Class closeButton :: public Object
{
public:
closeButton(int x1, int y1, int x2, int y2)
{
location[MINX] = x1; // MINX, MINY, MAXX, MAXY are
location[MINY] = y1; // globally defined macros with values
location[MAXX] = x2; // 0,1,2 & 3 respectively, to get the
location[MAXY] = y2; // (x,y) location from the array
}
void Act()
{
// Specific actions – clear the screen, shut down system etc.
}
};
As seen in the above code, classes can be defined for every object on the screen. Now, each object can be an instance of these classes. For example, we had three different icons in our GUI (refer Fig-2). For each icon, we’ll just have a declaration like this
Icon ArrowIcon(100,100,150,150), StarIcon(200,100,250,150), TextIcon(300,100,350,150);
With this declaration, we also specify the coordinate position of the icons on the screen.
Similarly, for the close button, we’ll have a declaration like –
closeButton CB(400,25,425,50);
Now, our program will just work like this –
if(mouseClicked()) // Function defined to check for mouse clicking
{
if(ArrowIcon.isThere()) // The mouse pointer is over the Arrow icon
{
ArrowIcon.Act();
// Some other functions specific to ArrowIcon object
}
if(StarIcon.isThere())
{
StarIcon.Act();
// Some other functions specific to StarIcon object
}
if(TextIcon.isThere())
{
TextIcon.Act();
// Some other functions specific to TextIcon object
}
if(CB.isThere()) // Mouse pointer is on the close button
{
CB.Act();
// Some other functions specific to this CloseButton object
}
}
So, we’ve successfully developed a simple GUI interface, using only a few lines of code. The major factor which works here is the entire class structure is re-usable, and can be applied to build a lot of other different User Interfaces too. The reader can try out his own GUI applications using this model and code structure to get a real-world picture of the OPB model.
The GUI as shown in Fig-1 has been developed using C++ code, and is included as a part of this distribution (simpGUI.zip). You a look at the coding practice(s) used there, and of course, first you should compile and run the code to have a feel of the GUI !
For any queries, you can contact me at – sumanthewhiz@yahoo.com