Class Widget

java.lang.Object
com.avrix.ui.widgets.Widget
Direct Known Subclasses:
BoxLayoutWidget, CheckboxWidget, ColorPickerWidget, LabelWidget, ModalWidget, PanelWidget, RadioButtonWidget, SliderWidget

public abstract class Widget extends Object
Abstract base class for all UI Widget's. This class provides the basic interface and functionality for UI elements that can be rendered and interacted with.
  • Field Summary

    Fields
    Modifier and Type
    Field
    Description
    boolean
    Indicates whether the Widget is currently hovered by the mouse cursor.
  • Constructor Summary

    Constructors
    Constructor
    Description
    Widget(int x, int y, int width, int height)
    Constructs a new Widget with the specified position and size.
  • Method Summary

    Modifier and Type
    Method
    Description
    void
    addChild(Widget widget)
    Adds a child widget to this widget's list of children.
    void
    Adds this Widget to the screen by registering it with the WidgetManager.
    void
    Moves this Widget to the front of the rendering order, ensuring it is drawn above other widgets.
    void
    drawArc(int x, int y, float radius, float thickness, float startAngle, float endAngle, NanoColor color)
    Draws an arc segment with the specified center, radius, start angle, end angle, and thickness.
    void
    drawArc(int x, int y, float radius, float startAngle, float endAngle, NanoColor color)
    Draws an arc segment with the specified center, radius, start angle, and end angle.
    void
    drawCircle(int x, int y, float radius, NanoColor color)
    Draws a circle at the specified position with the given radius and color.
    void
    drawEllipse(int x, int y, int width, int height, NanoColor color)
    Draws an ellipse at the specified position with the given size and color.
    void
    drawImage(int imageId, int x, int y, int width, int height, float opacity)
    Draws an image at the specified position with the given size.
    void
    drawLine(int x1, int y1, int x2, int y2, float width, NanoColor color)
    Draws a line from (x1, y1) to (x2, y2) with the specified color and thickness.
    void
    drawRect(int x, int y, int width, int height, NanoColor color)
    Draws a filled rectangle with the specified position, size, and color.
    void
    drawRectOutline(int x, int y, int width, int height, float lineWidth, NanoColor color)
    Draws a rectangle with a stroke and no fill
    void
    drawRoundedRect(int x, int y, int width, int height, float radius, NanoColor color)
    Draws a filled rectangle with rounded corners with the specified position, size, radius, and color.
    void
    drawRoundedRectOutline(int x, int y, int width, int height, int radius, float lineWidth, NanoColor color)
    Draws a rectangle with rounded corners and a stroke without fill.
    void
    drawText(String text, String fontName, int x, int y, int fontSize, NanoColor color)
    Draws text on the screen using NanoVG.
    Returns the absolute (root) parent of this Widget.
    Gets an unmodifiable view of the list of child widgets.
    int
    Returns the height of the Widget.
    int
    Gets the maximum horizontal scroll offset of the widget.
    int
    Gets the maximum vertical scroll offset of the widget.
    Returns the parent Widget of this Widget.
    int
    Gets the speed at which the widget scrolls in response to mouse wheel movements.
    int
    Gets the current horizontal scroll offset of the widget.
    int
    Gets the current vertical scroll offset of the widget.
    int
    Returns the width of the Widget.
    int
    Returns the relative x-coordinate of the top-left corner of the Widget.
    int
    Returns the absolute x-coordinate of the top-left corner of the Widget.
    int
    Returns the relative y-coordinate of the top-left corner of the Widget.
    int
    Returns the absolute y-coordinate of the top-left corner of the Widget.
    void
    intersectScissor(int x, int y, int width, int height)
    Intersects current scissor rectangle with the specified rectangle.
    boolean
    Checks if the window is set to always be on top of other windows.
    boolean
    Checks if the mouse pointer is currently over this Widget.
    boolean
    isPointOver(int x, int y)
    Checks if a point with coordinates (x, y) is within the bounds of the Widget.
    boolean
    Returns whether the Widget is scrollable.
    boolean
    Checks if scrolling is currently locked for this Widget.
    boolean
    Returns the current visibility of the Widget.
    boolean
    Checks if this Widget is at least partially visible within the boundaries of its absolute parent Widget.
    boolean
    Checks if the Widget is at least partially within the visible bounds of the window.
    void
    Initializes the Widget
    void
    onKeyPress(int key)
    Called when a key is pressed while the Widget has focus.
    void
    onKeyRelease(int key)
    Called when a key is released while the Widget has focus.
    void
    onKeyRepeat(int key)
    Called when a key is held down and repeatedly pressed while the Widget has focus.
    void
    onLeftMouseDown(int x, int y)
    Called when the left mouse button is pressed down over the Widget.
    void
    onLeftMouseDownOutside(int x, int y)
    Handles the left mouse button down event outside any visible widget
    void
    onLeftMouseUp(int x, int y)
    Called when the left mouse button is released over the Widget.
    void
    onLeftMouseUpOutside(int x, int y)
    Handles the left mouse button up event outside any visible widget
    void
    onMouseEnter(int x, int y)
    Called when the mouse cursor enters the bounds of this Widget.
    void
    onMouseExit(int x, int y)
    Called when the mouse cursor exits the bounds of this Widget.
    void
    onMouseMove(int x, int y)
    Called when the mouse is moved over the Widget.
    void
    onMouseMoveOutside(int x, int y)
    Handles the mouse move event outside any visible widget
    void
    onMouseWheel(int x, int y, int delta)
    Called when the mouse wheel is scrolled over the Widget.
    void
    onRightMouseDown(int x, int y)
    Called when the right mouse button is pressed down over the Widget.
    void
    onRightMouseDownOutside(int x, int y)
    Handles the right mouse button down event outside any visible widget
    void
    onRightMouseUp(int x, int y)
    Called when the right mouse button is released over the Widget.
    void
    onRightMouseUpOutside(int x, int y)
    Handles the right mouse button up event outside any visible widget
    void
    Final rendering, after the main render and rendering of child elements
    void
    Widget pre-rendering (before main rendering and updating)
    void
    Removes a child widget from this widget's list of children.
    void
    Removes this Widget from the screen by unregistering it from the WidgetManager.
    abstract void
    Renders the Widget
    void
    Updates and renders all child widgets of this Widget.
    void
    setAlwaysOnTop(boolean alwaysOnTop)
    Sets whether the window should always be on top of other windows.
    void
    setHeight(int height)
    Sets the height of the Widget.
    void
    setMaxScrollX(int maxScrollX)
    Sets the maximum horizontal scroll offset of the widget.
    void
    setMaxScrollY(int maxScrollY)
    Sets the maximum vertical scroll offset of the widget.
    void
    setScrollable(boolean scrollable)
    Sets the scrollable property of the Widget.
    void
    setScrollLock(boolean scrollLock)
    Sets the scrolling lock state for this Widget.
    void
    setScrollSpeed(int scrollSpeed)
    Sets the speed at which the widget scrolls in response to mouse wheel movements.
    void
    setScrollX(int scrollX)
    Sets the current horizontal scroll offset of the widget.
    void
    setScrollY(int scrollY)
    Sets the current vertical scroll offset of the widget.
    void
    setVisible(boolean visible)
    Sets the visibility of the Widget.
    void
    setWidth(int width)
    Sets the width of the Widget.
    void
    setX(int x)
    Sets the relative x-coordinate of the top-left corner of the Widget.
    void
    setXA(int x)
    Sets the absolute x-coordinate of the top-left corner of the Widget.
    void
    setY(int y)
    Sets the relative y-coordinate of the top-left corner of the Widget.
    void
    setYA(int y)
    Sets the absolute y-coordinate of the top-left corner of the Widget.
    void
    Updates the Widget

    Methods inherited from class java.lang.Object

    equals, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait
  • Field Details

    • hovered

      public boolean hovered
      Indicates whether the Widget is currently hovered by the mouse cursor.
  • Constructor Details

    • Widget

      public Widget(int x, int y, int width, int height)
      Constructs a new Widget with the specified position and size.
      Parameters:
      x - the x-coordinate of the Widget's position
      y - the y-coordinate of the Widget's position
      width - the width of the Widget
      height - the height of the Widget
  • Method Details

    • isScrollable

      public boolean isScrollable()
      Returns whether the Widget is scrollable.
      Returns:
      true if the Widget is scrollable, false otherwise.
    • setScrollable

      public void setScrollable(boolean scrollable)
      Sets the scrollable property of the Widget.
      Parameters:
      scrollable - the new scrollable value to set
    • isScrollLock

      public boolean isScrollLock()
      Checks if scrolling is currently locked for this Widget.
      Returns:
      true if scrolling is locked, false otherwise.
    • setScrollLock

      public void setScrollLock(boolean scrollLock)
      Sets the scrolling lock state for this Widget.
      Parameters:
      scrollLock - true to lock scrolling, false to unlock it.
    • getParent

      public Widget getParent()
      Returns the parent Widget of this Widget.
      Returns:
      the parent Widget, or null if this Widget does not have a parent
    • getAbsoluteParent

      public Widget getAbsoluteParent()
      Returns the absolute (root) parent of this Widget. If the Widget has no parent, it returns null or itself, depending on the desired behavior.
      Returns:
      the absolute parent of this Widget, or null if the Widget has no parent.
    • getScrollX

      public int getScrollX()
      Gets the current horizontal scroll offset of the widget.
      Returns:
      the current horizontal scroll offset
    • setScrollX

      public void setScrollX(int scrollX)
      Sets the current horizontal scroll offset of the widget.
      Parameters:
      scrollX - the new horizontal scroll offset
    • getMaxScrollX

      public int getMaxScrollX()
      Gets the maximum horizontal scroll offset of the widget. This value represents the farthest point that the content can be scrolled horizontally.
      Returns:
      the maximum horizontal scroll offset
    • setMaxScrollX

      public void setMaxScrollX(int maxScrollX)
      Sets the maximum horizontal scroll offset of the widget. This value determines the limit for horizontal scrolling based on the content width.
      Parameters:
      maxScrollX - the new maximum horizontal scroll offset
    • getScrollY

      public int getScrollY()
      Gets the current vertical scroll offset of the widget.
      Returns:
      the current vertical scroll offset
    • setScrollY

      public void setScrollY(int scrollY)
      Sets the current vertical scroll offset of the widget.
      Parameters:
      scrollY - the new vertical scroll offset
    • getMaxScrollY

      public int getMaxScrollY()
      Gets the maximum vertical scroll offset of the widget. This value represents the farthest point that the content can be scrolled vertically.
      Returns:
      the maximum vertical scroll offset
    • setMaxScrollY

      public void setMaxScrollY(int maxScrollY)
      Sets the maximum vertical scroll offset of the widget. This value determines the limit for vertical scrolling based on the content height.
      Parameters:
      maxScrollY - the new maximum vertical scroll offset
    • getScrollSpeed

      public int getScrollSpeed()
      Gets the speed at which the widget scrolls in response to mouse wheel movements. This value determines how many pixels the scroll offset changes per wheel tick.
      Returns:
      the scroll speed
    • setScrollSpeed

      public void setScrollSpeed(int scrollSpeed)
      Sets the speed at which the widget scrolls in response to mouse wheel movements. This value determines how many pixels the scroll offset changes per wheel tick.
      Parameters:
      scrollSpeed - the new scroll speed
    • renderChildren

      public void renderChildren()
      Updates and renders all child widgets of this Widget. This method recursively calls the update and render methods on each child widget, ensuring that the rendering order respects the hierarchy of widgets.
    • addChild

      public void addChild(Widget widget)
      Adds a child widget to this widget's list of children.
      Parameters:
      widget - the widget to add as a child
    • removeChild

      public void removeChild(Widget widget)
      Removes a child widget from this widget's list of children.
      Parameters:
      widget - the widget to remove from the list of children
    • getChildren

      public List<Widget> getChildren()
      Gets an unmodifiable view of the list of child widgets.
      Returns:
      an unmodifiable list of child widgets
    • onInitialize

      public void onInitialize()
      Initializes the Widget
    • onMouseMove

      public void onMouseMove(int x, int y)
      Called when the mouse is moved over the Widget.
      Parameters:
      x - relative x-coordinate of mouse position
      y - relative y-coordinate of the mouse position
    • onLeftMouseDown

      public void onLeftMouseDown(int x, int y)
      Called when the left mouse button is pressed down over the Widget.
      Parameters:
      x - relative x-coordinate of the mouse position
      y - relative y-coordinate of the mouse position
    • onLeftMouseUp

      public void onLeftMouseUp(int x, int y)
      Called when the left mouse button is released over the Widget.
      Parameters:
      x - relative x-coordinate of the mouse position
      y - relative y-coordinate of the mouse position
    • onRightMouseDown

      public void onRightMouseDown(int x, int y)
      Called when the right mouse button is pressed down over the Widget.
      Parameters:
      x - relative x-coordinate of the mouse position
      y - relative y-coordinate of the mouse position
    • onRightMouseUp

      public void onRightMouseUp(int x, int y)
      Called when the right mouse button is released over the Widget.
      Parameters:
      x - relative x-coordinate of the mouse position
      y - relative y-coordinate of the mouse position
    • onMouseWheel

      public void onMouseWheel(int x, int y, int delta)
      Called when the mouse wheel is scrolled over the Widget.
      Parameters:
      x - relative x-coordinate of the mouse position
      y - relative y-coordinate of the mouse position
      delta - direction of mouse wheel movement - (1 - up, -1 - down)
    • onMouseEnter

      public void onMouseEnter(int x, int y)
      Called when the mouse cursor enters the bounds of this Widget.
      Parameters:
      x - absolute x-coordinate of the mouse position
      y - absolute y-coordinate of the mouse position
    • onMouseExit

      public void onMouseExit(int x, int y)
      Called when the mouse cursor exits the bounds of this Widget.
      Parameters:
      x - absolute x-coordinate of the mouse position
      y - absolute y-coordinate of the mouse position
    • onMouseMoveOutside

      public void onMouseMoveOutside(int x, int y)
      Handles the mouse move event outside any visible widget
      Parameters:
      x - absolute x-coordinate of the mouse position
      y - absolute y-coordinate of the mouse position
    • onLeftMouseDownOutside

      public void onLeftMouseDownOutside(int x, int y)
      Handles the left mouse button down event outside any visible widget
      Parameters:
      x - absolute x-coordinate of the mouse position
      y - absolute y-coordinate of the mouse position
    • onLeftMouseUpOutside

      public void onLeftMouseUpOutside(int x, int y)
      Handles the left mouse button up event outside any visible widget
      Parameters:
      x - absolute x-coordinate of the mouse position
      y - absolute y-coordinate of the mouse position
    • onRightMouseDownOutside

      public void onRightMouseDownOutside(int x, int y)
      Handles the right mouse button down event outside any visible widget
      Parameters:
      x - absolute x-coordinate of the mouse position
      y - absolute y-coordinate of the mouse position
    • onRightMouseUpOutside

      public void onRightMouseUpOutside(int x, int y)
      Handles the right mouse button up event outside any visible widget
      Parameters:
      x - absolute x-coordinate of the mouse position
      y - absolute y-coordinate of the mouse position
    • onKeyPress

      public void onKeyPress(int key)
      Called when a key is pressed while the Widget has focus.
      Parameters:
      key - the code of the key that was pressed
    • onKeyRelease

      public void onKeyRelease(int key)
      Called when a key is released while the Widget has focus.
      Parameters:
      key - the code of the key that was released
    • onKeyRepeat

      public void onKeyRepeat(int key)
      Called when a key is held down and repeatedly pressed while the Widget has focus.
      Parameters:
      key - the code of the key that is being repeatedly pressed
    • setAlwaysOnTop

      public void setAlwaysOnTop(boolean alwaysOnTop)
      Sets whether the window should always be on top of other windows.
      Parameters:
      alwaysOnTop - true if the window should always be on top; otherwise false
    • isAlwaysOnTop

      public boolean isAlwaysOnTop()
      Checks if the window is set to always be on top of other windows.
      Returns:
      true if the window is always on top; otherwise false
    • bringToTop

      public void bringToTop()
      Moves this Widget to the front of the rendering order, ensuring it is drawn above other widgets.
    • isPointOver

      public boolean isPointOver(int x, int y)
      Checks if a point with coordinates (x, y) is within the bounds of the Widget.
      Parameters:
      x - the x-coordinate of the point to check
      y - the y-coordinate of the point to check
      Returns:
      true if the point is within the bounds of the Widget, otherwise false
    • isHovered

      public boolean isHovered()
      Checks if the mouse pointer is currently over this Widget.
      Returns:
      true if the mouse pointer is over the widget, otherwise false
    • setVisible

      public void setVisible(boolean visible)
      Sets the visibility of the Widget.
      Parameters:
      visible - true if the element should be visible, otherwise false
    • isVisible

      public boolean isVisible()
      Returns the current visibility of the Widget.
      Returns:
      true if the element is visible, otherwise false
    • isVisibleWithinParent

      public boolean isVisibleWithinParent()
      Checks if this Widget is at least partially visible within the boundaries of its absolute parent Widget. If the Widget has no absolute parent (i.e., it is the root widget), it is considered fully visible by default.
      Returns:
      true if any part of the widget is within the visible bounds of its absolute parent, false otherwise.
    • isVisibleWithinWindow

      public boolean isVisibleWithinWindow()
      Checks if the Widget is at least partially within the visible bounds of the window.
      Returns:
      true if any part of the Widget is within the window bounds, false otherwise.
    • getX

      public int getX()
      Returns the relative x-coordinate of the top-left corner of the Widget.
      Returns:
      the relative x-coordinate of the top-left corner of the Widget (if not a child, coincides with absolute coordinates)
    • getY

      public int getY()
      Returns the relative y-coordinate of the top-left corner of the Widget.
      Returns:
      the relative y-coordinate of the top-left corner of the Widget (if not a child, coincides with absolute coordinates)
    • getXA

      public int getXA()
      Returns the absolute x-coordinate of the top-left corner of the Widget.
      Returns:
      the absolute x-coordinate of the top-left corner of the Widget
    • getYA

      public int getYA()
      Returns the absolute y-coordinate of the top-left corner of the Widget.
      Returns:
      the absolute y-coordinate of the top-left corner of the Widget
    • getWidth

      public int getWidth()
      Returns the width of the Widget.
      Returns:
      the width of the Widget
    • getHeight

      public int getHeight()
      Returns the height of the Widget.
      Returns:
      the height of the Widget
    • setX

      public void setX(int x)
      Sets the relative x-coordinate of the top-left corner of the Widget.
      Parameters:
      x - the new relative x-coordinate of the top-left corner of the Widget
    • setY

      public void setY(int y)
      Sets the relative y-coordinate of the top-left corner of the Widget.
      Parameters:
      y - the new relative y-coordinate of the top-left corner of the Widget
    • setXA

      public void setXA(int x)
      Sets the absolute x-coordinate of the top-left corner of the Widget.
      Parameters:
      x - the new absolute x-coordinate of the top-left corner of the Widget
    • setYA

      public void setYA(int y)
      Sets the absolute y-coordinate of the top-left corner of the Widget.
      Parameters:
      y - the new absolute y-coordinate of the top-left corner of the Widget
    • setWidth

      public void setWidth(int width)
      Sets the width of the Widget.
      Parameters:
      width - the new width of the Widget
    • setHeight

      public void setHeight(int height)
      Sets the height of the Widget.
      Parameters:
      height - the new height of the Widget
    • addToScreen

      public void addToScreen()
      Adds this Widget to the screen by registering it with the WidgetManager. The Widget will be managed and rendered as part of the UI.
    • removeFromScreen

      public void removeFromScreen()
      Removes this Widget from the screen by unregistering it from the WidgetManager. The Widget will no longer be managed or rendered as part of the UI.
    • drawRectOutline

      public void drawRectOutline(int x, int y, int width, int height, float lineWidth, NanoColor color)
      Draws a rectangle with a stroke and no fill
      Parameters:
      x - relative X coordinate of the top left corner of the rectangle
      y - relative Y coordinate of the top left corner of the rectangle
      width - the width of the rectangle
      height - height of the rectangle
      lineWidth - the width of the stroke line in pixels
      color - the color of the outline
    • drawRoundedRectOutline

      public void drawRoundedRectOutline(int x, int y, int width, int height, int radius, float lineWidth, NanoColor color)
      Draws a rectangle with rounded corners and a stroke without fill.
      Parameters:
      x - relative X coordinate of the top left corner of the rectangle
      y - relative Y coordinate of the top left corner of the rectangle
      width - the width of the rectangle
      height - height of the rectangle
      radius - corner radius
      lineWidth - the width of the stroke line in pixels
      color - the color of the outline
    • drawRect

      public void drawRect(int x, int y, int width, int height, NanoColor color)
      Draws a filled rectangle with the specified position, size, and color.
      Parameters:
      x - relative x-coordinate of the top-left corner of the rectangle
      y - relative y-coordinate of the top-left corner of the rectangle
      width - the width of the rectangle
      height - the height of the rectangle
      color - the color to fill the rectangle with
    • drawText

      public void drawText(String text, String fontName, int x, int y, int fontSize, NanoColor color)
      Draws text on the screen using NanoVG.
      Parameters:
      text - the text to be drawn
      fontName - the name of the font to be used
      x - relative x-coordinate of the text's position
      y - relative y-coordinate of the text's position
      fontSize - the size of the font
      color - the color of the text
    • drawRoundedRect

      public void drawRoundedRect(int x, int y, int width, int height, float radius, NanoColor color)
      Draws a filled rectangle with rounded corners with the specified position, size, radius, and color.
      Parameters:
      x - relative x-coordinate of the top-left corner of the rectangle
      y - relative y-coordinate of the top-left corner of the rectangle
      width - the width of the rectangle
      height - the height of the rectangle
      radius - the radius of the corners
      color - the color to fill the rectangle with
    • drawEllipse

      public void drawEllipse(int x, int y, int width, int height, NanoColor color)
      Draws an ellipse at the specified position with the given size and color.
      Parameters:
      x - relative x-coordinate of the ellipse's center
      y - relative y-coordinate of the ellipse's center
      width - the width of the ellipse
      height - the height of the ellipse
      color - the color of the ellipse
    • drawLine

      public void drawLine(int x1, int y1, int x2, int y2, float width, NanoColor color)
      Draws a line from (x1, y1) to (x2, y2) with the specified color and thickness.
      Parameters:
      x1 - relative x-coordinate of the start point of the line
      y1 - relative y-coordinate of the start point of the line
      x2 - relative x-coordinate of the end point of the line
      y2 - relative y-coordinate of the end point of the line
      width - the thickness of the line
      color - the color of the line
    • drawCircle

      public void drawCircle(int x, int y, float radius, NanoColor color)
      Draws a circle at the specified position with the given radius and color.
      Parameters:
      x - relative x-coordinate of the circle's center
      y - relative y-coordinate of the circle's center
      radius - the radius of the circle
      color - the color of the circle
    • drawArc

      public void drawArc(int x, int y, float radius, float startAngle, float endAngle, NanoColor color)
      Draws an arc segment with the specified center, radius, start angle, and end angle.
      Parameters:
      x - relative x-coordinate of the center of the arc
      y - relative y-coordinate of the center of the arc
      radius - the radius of the arc
      startAngle - the starting angle of the arc (in radians)
      endAngle - the ending angle of the arc (in radians)
      color - the color of the arc segment
    • drawArc

      public void drawArc(int x, int y, float radius, float thickness, float startAngle, float endAngle, NanoColor color)
      Draws an arc segment with the specified center, radius, start angle, end angle, and thickness.
      Parameters:
      x - relative x-coordinate of the center of the arc
      y - relative y-coordinate of the center of the arc
      radius - the radius of the arc
      startAngle - the starting angle of the arc (in radians)
      endAngle - the ending angle of the arc (in radians)
      thickness - the thickness of the arc segment
      color - the color of the arc segment
    • drawImage

      public void drawImage(int imageId, int x, int y, int width, int height, float opacity)
      Draws an image at the specified position with the given size.
      Parameters:
      imageId - the identifier of the image to draw
      x - relative x-coordinate of the image's position
      y - relative y-coordinate of the image's position
      width - the width of the image
      height - the height of the image
      opacity - image opacity (from 0 to 1)
    • intersectScissor

      public void intersectScissor(int x, int y, int width, int height)
      Intersects current scissor rectangle with the specified rectangle. The scissor rectangle is transformed by the current transform.

      Saves the current render state before starting.

      Parameters:
      x - relative x-coordinate of the intersecting scissor region.
      y - relative y-coordinate of the intersecting scissor region.
      width - the width of the intersecting scissor region.
      height - the height of the intersecting scissor region.
    • preRender

      public void preRender()
      Widget pre-rendering (before main rendering and updating)
    • update

      public void update()
      Updates the Widget
    • render

      public abstract void render()
      Renders the Widget
    • postRender

      public void postRender()
      Final rendering, after the main render and rendering of child elements