Skip to content

Latest commit

 

History

History
62 lines (38 loc) · 4.07 KB

decoration.md

File metadata and controls

62 lines (38 loc) · 4.07 KB

Aurora theming - decoration painters

Menu bars, tool bars, status bars - these are common examples of special containers found in application windows. These containers create functional grouping of application controls and bring order to complex screens. Aurora skinning layer provides a flexible and powerful set of APIs to define the visual appearance of these control groups - called decoration areas. At the same time, Aurora decoration painters enforce visual consistency and connections across the components in related areas and states. In addition, Aurora provides a set of published APIs for applications that wish to skin custom composables and preserve visual consistency with the core Aurora composables.

Decoration areas

The DecorationAreaType class contains the available core decoration area types. As a picture is worth a thousand words, the following screenshots illustrate the different decoration area types.

The following screenshot is the main Aurora test application under the Gemini skin (click to see full size version):

The next screenshot shows the title decoration area, which in this example includes the title pane of the main window:

The next screenshot shows the header decoration area, which in this example includes the menu bar of the main window:

The next screenshot shows the toolbar decoration area, which in this example includes the tool bar of the main window:

The next screenshot shows the footer decoration area, which in this example includes the status bar component:

The next screenshot shows the control pane decoration area, which in this example includes the task pane container component:

Let's go back to the original screenshot:

It illustrates that the specific skin assigns different color schemes to different decoration areas. The controls in those areas get the background and foreground colors based on their assigned color scheme (without any custom application code), thus creating visual distinction between different application areas.

Application-facing APIs

To use the matching decoration painter in custom painting routines of your application, call the following published Aurora APIs:

  • AuroraSkin.painters to retrieve the painters associated with the current skin.
  • AuroraPainters.decorationPainter to retrieve the decoration painter of the current skin.
  • AuroraSkin.decorationAreaType to retrieve the decoration area type of the composable.
  • AuroraDecorationPainter.paintDecorationArea() to paint the decoration background on the specific draw scope.

The base class for Aurora decoration painters is AuroraDecorationPainter. It has the following method:

fun paintDecorationArea(
    drawScope: DrawScope,
    decorationAreaType: DecorationAreaType,
    componentSize: Size,
    outline: Outline,
    rootSize: Size,
    offsetFromRoot: Offset,
    colorScheme: AuroraColorScheme
)

The outline parameter specifies the outline to paint, the colorScheme specifies the Aurora color scheme to be used to compute the colors, while decorationAreaType indicates the decoration area type.