CSS-like styling system. More...

Detailed Description

CSS-like styling system.

AUI uses CSS-like stylesheet domain specific language, ASS (stands for Aui Style Sheets). Like CSS, ASS is a list of rules. A rule consists of a selector and a list of properties. Selector is a basic matcher that determines whether apply a rule to the specific view or not. Selector is the first statement in a rule and further statements are style properties. Property controls the specific aspect of view's style (i.e. FontSize { 18_pt } equals "call setFontSize(18_pt) for every matched view").

CSS	AUI ASS	Meaning
AButton { background: red; color: white; }	{ t<AButton>(), BackgroundColor { AColor::RED }, TextColor { AColor::WHITE }, },	Set all buttons' background to red and text color to white
ATextField::hover { border: 1px solid #00f; }	{ t<ATextField>::hover(), Border { 1_dp, 0x0000ff_rgb }, },	Set all text fields' border to #00f (blue) on hover

Using global style

Global stylesheet is applied to the whole program.

Somewhere in your entry point, you may write:

AStylesheet::global().addRules({
  {
    t<ALabel>(),
    BackgroundSolid { AColor::RED },
    TextAlign::CENTER,
  },
  {
    t<AButton>(),
    BackgroundSolid { 0x000000_rgb },
    TextAlign::CENTER,
  },
});

Using container stylesheet

Container stylesheet is applied only to children (both direct and indirect) of the container.

container->setExtraStylesheet({
  {
    t<ALabel>(),
    BackgroundSolid { AColor::RED },
    TextAlign::CENTER,
  },
  {
    t<AButton>(),
    BackgroundSolid { 0x000000_rgb },
    TextAlign::CENTER,
  },
});

Using with_style

The code below draws "Hello" label with red background and centered alignment, and "World" label with blue background, using with_style:

using namespace ass;
setContents(Centered{
  Label { "Hello" } with_style {
    BackgroundSolid { AColor::RED },
    TextAlign::CENTER,
  },
  Label { "World" } with_style {
    BackgroundSolid { 0x0000ff_rgb },
  },
})

Using setCustomStyle

In case with_style is not applicable, you may use setCustomStyle instead.

using namespace ass;
 
auto l = _new<ALabel>("Hello world");
l->setCustomStyle({
  BackgroundSolid { AColor::RED },
  TextAlign::CENTER,
}),
setContents(Centered{ l });

Selectors

As said earlier, first statement in a rule is selector. Here's some examples.

Select all ALabel's

using namespace ass;
AStylesheet::global().addRules({
  {
    t<ALabel>(),
    BackgroundSolid { AColor::RED },
    TextAlign::CENTER,
  },
});

Select all ASS name

using namespace ass;
AStylesheet::global().addRules({
  {
    c(".highlight"),
    BackgroundSolid { AColor::RED },
    TextAlign::CENTER,
  },
});
// ...
auto v = _new<AView>();
v->addAssName(".highlight");
setContents(Centered { v });
// or
setContents(Centered {
    _new<AView>() << ".highlight",
});

Select all ALabel's or AButton's

using namespace ass;
AStylesheet::global().addRules({
  {
    {t<ALabel>(), t<AButton>()},
    BackgroundSolid { AColor::RED },
    TextAlign::CENTER,
  },
});

Select all labels with ASS name

using namespace ass;
AStylesheet::global().addRules({
  {
    t<ALabel>() && c(".highlight"),
    BackgroundSolid { AColor::RED },
  },
});
// ...
setContents(Centered {
    Label { "Highlighted" } << ".highlight",
    Label { "Not highlighted" },
    Button { "Not highlighted either" },
});

Select indirect child

using namespace ass;
AStylesheet::global().addRules({
  {
    c(".highlight_container") >> t<ALabel>(),
    BackgroundSolid { AColor::RED },
    TextAlign::CENTER,
  },
});
// ...
setContents(Centered {
    Vertical {
        Label { "Highlighted" },
        Centered { Label { "Highlighted" } },
    } << ".highlight_container",
    Vertical {
        Label { "Not highlighted" },
    },
});

Select direct child

Works faster than selecting indirect child

using namespace ass;
AStylesheet::global().addRules({
  {
    c(".highlight_container") > t<ALabel>(),
    BackgroundSolid { AColor::RED },
    TextAlign::CENTER,
  },
});
// ...
setContents(Centered {
    Vertical {
        Label { "Highlighted" },
        Centered { Label { "Not highlighted" } },
    } << ".highlight_container",
    Vertical {
        Label { "Not highlighted" },
    },
} << ".highlight_container");

Sub selectors

Sub selector is kind of a selector that depends on view's state (i.e, pressed or focused). Sub selectors, as well as other selectors don't replace previous rules entirely. Instead, they extend existing rules. However, same properties are replaced.

Hover sub selector

Hovered view is a view below mouse cursor.

using namespace ass;
AStylesheet::global().addRules({
  {
    t<ALabel>::hover(),
    BackgroundSolid { AColor::RED },
    TextAlign::CENTER,
  },
});

Active sub selector

Active view is a pressed view.

using namespace ass;
AStylesheet::global().addRules({
  {
    t<ALabel>::hover(),
    BackgroundSolid { AColor::RED },
  },
});

Focus sub selector

Focused view is a view that was clicked and currently receiving keyboard input.

using namespace ass;
AStylesheet::global().addRules({
  {
    t<ALabel>::focus(),
    Border { 1_px, AColor::RED },
    TextColor { AColor::RED },
  },
});

Disabled sub selector

Disabled view is a view with AView::setEnabled(false) thus not able to change it's state.

using namespace ass;
AStylesheet::global().addRules({
  {
    t<ALabel>::disabled(),
    Border { 1_px, AColor::RED },
    TextColor { AColor::RED },
  },
});

See below for declarations and selectors.

Classes
struct	ass::Backdrop
	Represents backdrop filter effect which applied to the pixels behind the view (i.e., blur, grayscale, etc.) More...

struct	ass::BackgroundCropping
	Controls background texture cropping by exact UV coordinates. Useful for texture atlases. More...

struct	ass::BackgroundEffect
	Represents custom-rendered background effect. More...

struct	ass::BackgroundGradient
	Represents gradient background. More...

struct	ass::BackgroundImage
	Represents textured (image) background. More...

struct	ass::BackgroundSolid
	Represents solid (single color) background. More...

struct	ass::Border
	Represents border. More...

struct	ass::BorderBottom
	Represents bottom border. More...

struct	ass::BorderLeft
	Represents left border. More...

struct	ass::BorderRadius
	Controls border radius. More...

struct	ass::BorderRight
	Represents right border. More...

struct	ass::BorderTop
	Represents top border. More...

struct	ass::BoxShadow
	Represents box shadow. More...

struct	ass::BoxShadowInner
	Represents box shadow. More...

struct	ass::Expanding
	Controls the expanding of AView. More...

struct	ass::FixedSize
	Controls the fixed size of AView. More...

struct	ass::Font
	Controls the font of AView. More...

struct	ass::FontFamily
	Controls the font family of AView. More...

struct	ass::FontSize
	Controls the font size of AView. More...

struct	ass::LayoutSpacing
	Controls the gap between elements of the container. Basically acts like a margin, but the gaps appear between views only, not around them. More...

struct	ass::LineHeight
	Controls line height multiplier of the font of the AView. More...

struct	ass::Margin
	Controls view's margins. More...

struct	ass::MaxSize
	Controls the max size of AView. More...

struct	ass::MinSize
	Controls the min size of AView. More...

struct	ass::Opacity
	Controls the opacity of AView. More...

struct	ass::Padding
	Controls the padding of AView. More...

struct	ass::ScrollbarAppearance
	Controls how do scrollbars and content appear in AScrollArea. This rule is applicable to AScrollArea only. More...

struct	ass::TextBorder
	Controls the text border of AView. More...

struct	ass::TextColor
	Controls the text color of AView. More...

struct	ass::TextShadow
	Controls the text shadow of AView. More...

struct	ass::TransformOffset
	Controls the rendering offset transform of AView. More...

struct	ass::TransformRotate
	Controls the rendering offset transform of AView. More...

struct	ass::TransformScale
	Controls the rendering scale transform of AView. More...

class	ACursor
	Represents cursor type. More...

Enumerations
enum class	ass::Sizing { Sizing::NONE , Sizing::FIT , Sizing::CENTER , Sizing::TILE , Sizing::FIT_PADDING , Sizing::COVER , Sizing::CONTAIN , Sizing::CONTAIN_PADDING , Sizing::SPLIT_2X2 , Sizing::CROPPED }
	Determines sizing rules of a background texture (BackgroundImage). More...

enum class	AScreenOrientation { UNDEFINED = 0 , PORTRAIT = 1 , LANDSCAPE = 2 }
	Controls screen orientation.

enum class	ATextAlign { LEFT , CENTER , RIGHT , JUSTIFY }
	Controls the text alignment inside AView.

enum class	VerticalAlign { DEFAULT , MIDDLE }
	Controls the text vertical alignment of AView.

Enumeration Type Documentation

◆ Sizing

enum class ass::Sizing

strong

Determines sizing rules of a background texture (BackgroundImage).

Enumerator
NONE	Image is kept in it's original size.
FIT	Resize image to view's area without keeping aspect ratio.
CENTER	Center the image.
TILE	Tile texture. Use with Repeat::X_y.
FIT_PADDING	Resize image to view's content area without keeping aspect ratio.
COVER	Resize image to view's area keeping aspect ratio and cutting of excess parts. Matches CSS background-size: cover.
CONTAIN	Resize image to view's area keeping aspect ratio and keeping space not covered by the image. Matches CSS background-size: contain.
CONTAIN_PADDING	Resize image to view's content area keeping aspect ratio and keeping space not covered by the image. Partially matches CSS background-size: contain.
SPLIT_2X2	Texture divided by 4 parts of the same size, keeping their original size. Useful for textured buttons and inputs in games. When the view is larger than the texture, the free space is covered by stretching the central row (for vertical) and the central column (for horizontal).
CROPPED	Texture is cropped by BackgroundCropping rule.

Collaboration diagram for Aui Style Sheets: