Tutorial 25 : OpenGl components

Tutorial Advanced Download Section

Components are usefull things. They can be used to creates menu, credits, interactive interface ...
I've used them for my first little game SokobanGl.

I've currently implemented these following components :
   Label
   PictureBox
   List
   CheckBox
   TextField
There are not fully implemented like Java's components, but I think that you can do a lot of thing with them. Components support events (mouse, key ...), states (enable, visible ...) and other particular properties.
I've passed long time to optimize components and fix bugs. I think that they are now usable.


If I forgot some thing, tell me. This tutorial needs feedback from yourself.
I wait your remarks and suggestions.
 

This tutorial is a little different than previous. I will not explain you how I've create it, just how to use it !

The reason of this is that you already have all necessary OpenGl knowledge. The new here is the use of "AWT" code. I don't want to write a tutorial about how to create components. I think that you can find many resources on the web for that (The Java Tutorials).
But, if you have any problem understanding something in the code, I'm here for all your questions.
 

Here are all classes related to the OpenGl Component :


Classes related to components

The first package store common classes for Gl4java and Jogl. This is the basic implementation of all components. Is is independant of the OpenGl API choosen.
The two others packages finish the implementation of the components for each OpenGl APIs (ie Gl4java and Jogl).
 

This component can be compared to a 'classic' Label.

It display a 2D text in an OpenGl scene. Font used to draw the text can be defined with a FontPrinter or any object that implement GlPrintable. Take a look on Tutorial 20 to know more about this.

You can attach key, mouse and mouse motion events like you do with awt & swing components.
The color of the text can be customized depending on the mouse state (over, down) and on the component state (enable).


GlLabel

This component can be compared to a 'classic' TextField.
It is used to read an input text from the user.


The implementation of this component is not finished ...

 

This component display a picture.
The picture displayed come from a texture. Alpha layer is supported for translucent textures.

You can attach key, mouse, mouse motion and action events like you do with awt & swing components.
The picture displayed can be customized depending on the mouse state (over, down) and on the component state (enable).



GlPictureBox

This is similar to GlPictureBox.
In addition to all GlPictureBox properties, this component have a select state (to know if the user have selected it or not). This allow to specify a particular picture to display when the component is selected ...
 

This component display a list of choice. Each choice is display as a 2D text.
You can attach key, mouse, mouse motion and change events.


GlListSelection

This component can be compared to a 'classic' CheckBox.

By default, it display a GlSelectButton for the box to check/uncheck (state component) and a GlLabel for the information (data component).
You can use 5 differents styles for the check box. The first style (STYLE_1) is created with some picture taken from a demo from the Sun's jdk (SwingSet2). The others are created by me.


Default GlCheckBox (STYLE_3)

But, you can customize it by using a particular component for the state and/or the data components.


Custom GlCheclBox with a GlPictureBox

- What is the state and the data component of a GlCheckBox ?
A GlCheckBox is container. It use two components called state and data component.
Here is a representation of these two components that compose the check box :


State and Data components

It is a container of GlComponent.

This is usefull in case of use of multiple components. You only have to add them into the container, then call glPaint for the container and dispatch events to the container like this :

Linking drawing and events

//Initialization
container = new GlContainer();
container.addComponent(getLabel());
container.addComponent(getListSelection());
container.addComponent(getPictureBox());
...


//Draw all components
container.glPaint(glDrawable);


//Linking events

 

Then, all components will be drawn and will receive all events.
 

Here is an exemple that add a label and a picture box to a container, draw the components and add events :
 

Exemple

public void drawGlScene(GLDrawable glDrawable)
{
    ...

    //Draw all components of the container
    getContainer().glPaint(glDrawable);

    ...
}

/**
 * Initialise the container
 */
private GlContainer getContainer()
{
    if(container == null)
    {
        container = new GlContainer();
        container.addComponent(getLabel());
        container.addComponent(getPictureBox());
    }
    return container;
}
/*
 * Label
 * Basic component that draws text. We can set colors, font printer and add events.
 */
private GlLabel getLabel()
{
    if(label == null)
    {
        label = new GlLabel("Exemple of a Label");
        label.setName("Label1");
        label.setTextCentered(true);
        label.setCenter(360, 120);
        label.setColor(new float[]{0.0f, 0.0f, 1.0f});

        //Color depending on the mouse state, set null (or don't call the method) to disable these features
        label.setOverColor(new float[]{0.0f, 1.0f, 0.0f});
        label.setDownColor(new float[]{1.0f, 0.0f, 0.0f});
        label.setBackColor(backColor);

        //Add Events
        label.addMouseListener(new MouseAdapter() {
            public void mouseEntered(MouseEvent e) {
                label.setText("Mouse entered");
            }
            public void mouseExited(MouseEvent e) {
                label.setText("Exemple of a Label");
            }
            public void mousePressed(MouseEvent e) {
                label.setText("Mouse pressed");
            }
            public void mouseReleased(MouseEvent e) {
                label.setText("Mouse released");
            }
        });
        label.addKeyListener(new KeyListener(){
            public void keyReleased(KeyEvent e)
            {
                label.setText("Key released");
            }
            public void keyPressed(KeyEvent e)
            {
                label.setText("Key pressed");
            }
            public void keyTyped(KeyEvent e)
            {
                label.setText("Key Typed");
            }
        });
    }
    return label;
}
/*
 * Picture box
 */
private GlPictureBox getPictureBox()
{
    if(pictureBox == null)
    {
        pictureBox = new GlPictureBox(textures[0]);
        pictureBox.setName("PictureBox1");
        pictureBox.setOverTexture(textures[1]);
        pictureBox.setLocation(50, 110);
        pictureBox.setSize(200, 46);
        pictureBox.setDrawRegion(true);
    }
    return pictureBox;
}

            /*Key events*/

public void keyPressed(KeyEvent ke)
{
    super.keyPressed(ke);

    //Link event
    if(container != null)
        container.keyPressed(ke);
}
...

            /*Mouse events*/

/**
 * Here we call the events of each components
 */
public void mouseClicked(MouseEvent me)
{
    super.mouseClicked(me);

    //Link event
    if(container != null)
        container.mouseClicked(me);
}
...

 

Remember to download the GraphicEngine-1.1.2 to run this tutorial !


If you've got any remarks on this tutorial, please let me know to improve it.
Thanks for your feedback.
 

Previous Tutorial

Back

Next turorial

Copyright © 2004-2012 Jérôme Jouvie - All rights reserved. http://jerome.jouvie.free.fr/