CSS-like styling system. More...

Topics#
	ASS selectors

	ASS properties

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 }, }, ass::t type_of< T > t Selects views that are of the specified C++ types. Definition type_of.h:71	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 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 { "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.

Classes#
struct	ass::prop::IPropertyBase
	Base class for all properties. More...

struct	ass::Sound
	Produces sound effect when the style applied. More...

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

Topics#