Implementing Fonts, User Interfaces, and Localization - Marmalade SDK Mobile Game Development Essentials - page 174

Most modern UI implementations will normally start with a base level class from
which all other control types are derived, which for discussion purposes in this
chapter we will call an element . An element will take care of things such as the
positioning of a control and internal naming so that the handling of UI events
can be standardized.
When implementing a class representing an element, we should make use of virtual
methods that can be overridden by child classes to change default behavior. At the
very least this normally means that we should have methods that can be called to
update and render the control.
Another extremely useful concept is that of a frame , which has the ability to group
several elements together so they can be moved, enabled, or hidden at the same time.
When updating or rendering the user interface, the frame is responsible for deciding
whether or not to update or render the child elements it contains.
The positioning and sizing of all elements contained within a frame should also be
calculated relative to the position and size of the frame itself.
Having implemented classes representing both elements and frames, it is possible
to implement most common UI controls very simply. Here are a few examples to
illustrate this:
• A label control simply displays a line of text on screen. It can be derived
from the element class and at its simplest all we need to define are member
variables to store the text to be drawn, and some font and color information.
We can then override the virtual render method to allow the text to be drawn
at the position indicated by the element class.
• A bitmap control is very similar to a label but displays an image instead of
text. We just need to store a pointer to the image we want to draw (perhaps
as a CIwTexture or CIwMaterial pointer) and then implement the render
method to draw it on screen.
• A button control can be derived from a frame. Most UI systems allow an
image or a text string (or both) to be displayed on the button, so we can
implement this just by adding label or bitmap controls to the list of elements
contained within the frame.
• A slider control could also use the frame as a basis and could include
two bitmap controls, one for the backing of the slider and another for the
selection knob. A label could also be included if you want to display the
current position of the slider as a numeric value.
Hopefully this gives you an idea of how, with a little initial planning, implementing
a diverse range of user interface controls actually becomes very easy.