• All Tutorials

• GUI Programming Using JControl/Wombat

• I. WombatDemo
• II. Basic Structure
1. Frames
2. Container
3. Components
4. Outlines and Contents
5. The components of JControl/Wombat
• III. Standard Components
• IV. Event Handling

Outlines and Contents

In most cases complex graphical applications for tiny systems, such as JControl-based devices, follow a certain design pattern for user interface functionality. This is due to the fact that e.g. window-based application concepts known from PCs are less pratical because of smaller display sizes and lower performance. Thus, different application parts are implemented on different screen pages instead. Using a global menu, for instance, it is possible to switch between pages. This concept is commonly known from user interfaces used in cell phones.
JControl/Wombat supports a concept for simply switching between screen pages in an application, while an outline containing menus and decorative elements, always remains on screen.

A Frame, the root of all applications, consists of two main elements. The Content is any custom Container that represents the current screen page. Thus, components cannot be added to the frame directly but to the content. A content can be replaced by another one any time at run time. This functionality can easily be used to implement a page switch.
The second main element of a frame is the Outline. This can be any type of component that is optionally attached to the frame. The outline is always shown in parallel to the current content, that means, even after changing the content the same outline is still visible. This is helpful for elements representing a global part of the application that must always be active, e.g. a global tool bar, a logo in a screen corner, a clock or date display etc. If the outline is implemented using a container it is even possible to group different components to one outline structure.

The JControl/IDE comes with a demo application to illustrate this feature, the PageDemo. It is located in the directory "demos/cobra5329/WombatTutorial/PageDemo" in your JControl/IDE installation directory (e.g. "C:\Program Files\JControl\demos\cobra5329\WombatDemo\PageDemo" on Windows). The program illustrates how an outline can be used to implement a global menu bar that switches two screen pages. The outline is represented by a custom class extending Container. It contains two buttons that should perform the page switch using action events. This is done via the method showPage in the main class PageDemo. Here, according to the passed parameter, a new content is set to the frame. Both contents in this example are implemented using custom classes. Performing a content change this application simply creates a new instance of the correspoding class. It would also be possible to reuse the objects for each content over and over again.