Skip to content

Aui Style Sheets#

CSS-like styling system

Detailed Description#

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 ass_selectors and a list of ass_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 AUI_OVERRIDE_STYLE#

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

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

Using setCustomStyle#

In case AUI_OVERRIDE_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 ALabels#

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 { Label { "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 },
  },
});

Box Model (Padding, Margin)#

See AUI Box Model.

ASS Refenence#

See below for declarations and selectors.