Windows Containers Overlays

GUI

The RenJava GUI consists of three main components; Windows, Containers, Overlays.

• Window - The window is just that- the window. This is the box which contains all of the visuals. Windows can contain multiple containers.
• Containers - Containers map and house all of the overlays. Containers can also contain sub-containers which is a container inside of a container.
• Overlays - Overlays are the visual elements like buttons or text. Overlays need to be added to a container for them to be rendered.

Note, in order to properly render a container you must render the window.

public void example(Window window, Container container) {
  // Clear the current window
  window.clearContainers();

  // Re-add the container
  window.addContainer(container);

  // Render to the screen
  window.render();
}

Windows

Windows are the main box which contain the application. You can set different styles for the window but it is recommended to keep it at decorated. Decorated will keep the close, minimize, and maximize buttons. Undecorated will remove everything and only show the actual visual elements for the application. You can also create multiple windows and display them simultaneously. Each window has its own containers and they are separated from each other.

public void createWindow() {
  Window window = new Window("Window title", StageStyle.UNDECORATED, new ImageLoader("gui/icon.png"), 1920, 1080);
  // Note the last 2 numbers are the maximum size for the window. Containers can go past that size but they will be displayed improperly.

  // To display a window
  window.render();

  // To close a window. Note this will exit the window.
  window.close();

  // To clear a windows current containers and overlays
  window.clearContainers();

  // Updating/Refreshing the screen.
  window.render();
}

Containers

Containers simply just contain overlays and layouts in an organized way. You can make your own container if you have special needs for how you want it to operate. By default you can use the EmptyContainer and most of the engine uses it.

public void createContainer() {
  // There are multiple constructors for the container class. This will be the most simple one.
  Container container = new EmptyContainer(1920, 1080); // Width, height
  // Now add the overlays to the container
  container.addOverlays(overlay1, overlay2, overlay3);
  
  // Follow the steps above to render
  myWindow.clearContainers();
  myWindow.addContainer(container);
  myWindow.render();
}

Layouts

You can also add layouts to a container. Layouts will handle positioning of various elements inside of a container. For example, the horizontal layout will position overlays horizontally.

public void createContainer() {
  ...
  HorizontalLayout layout = new HorizontalLayout(1500, 400);
  layout.setX(500);
  layout.setY(900);
  layout.setSpacing(20);
  
  // Add the overlays
  layout.addOverlays(overlay1, overlay2, overlay3);
  
  // Add layout to the container
  container.addLayout(layout);
}

Overlays

Overlays are the visual elements. In this page the focus will be on the rendering process not the API. There will be a different wiki page which will focus on the overlays in depth.

When rendering an overlay you will have to consider the order position of the overlay. Will it be in the back or the front of the screen? Overlays in the back are rendered first while the front is rendered last. Think of stacking multiple pictures on top of each other, which one will you see the most of?

public void showBackGroundImage() {
  // A background image will always be in the back. You do not want it overlapping on top of other elements or containers. 
  ImageOverlay imageOverlay = new ImageOverlay("gui/main_menu.png");
  imageOverlay.setOrder(DisplayOrder.LOW); // A low order will be rendered first. A high order will be rendered last. We want this to be in the back so it must be rendered first.

  container.addOverlay(imageOverlay);
  window.addContainer(container);
  window.render();
}