Skin assets

This topic provides a description of the Flash assets that are included with this SDK. All assets are defined in the qnx.ui.skins.SkinAssets class.

The following components are described in detail:

Lists

Dark color theme

The CellRendererSkinBlack skin uses the following assets:

Description State Asset Image
The background skin for a cell in up state, in the dark color theme. Up SkinAssets.CellRendererUpBlack
The background skin for a cell in the up state, in the dark color theme, using alternating row colors. Up (alternating row colors) SkinAssets.CellRendererUpOddBlack
The background skin for a cell in the selected state, in the dark color theme. Selected SkinAssets.CellRendererSelected
The background skin for a cell in the down state, in the dark color theme. Down SkinAssets.CellRendererSelected
The background skin for a cell in the disabled state, in the dark color theme. Disabled SkinAssets.CellRendererDisabledBlack

Light color theme

The CellRendererSkinWhite skin uses the following assets:

Description State Asset Image
The background skin for a cell in the up state in the light color theme. Up SkinAssets.CellRendererUpWhite
The background skin for a cell in the up state, in the light color theme, using alternating row colors. Up (alternating row colors) SkinAssets.CellRendererUpOddWhite
The background skin for a cell in the selected state, in the light color theme. Selected SkinAssets.CellRendererSelected
The background skin for a cell in the down state, in the light color theme. Down SkinAssets.CellRendererSelected
The background skin for a cell in the disabled state, in the light color theme. Disabled SkinAssets.CellRendererDisabledWhite

Text input

The TextInputSkin class uses the following assets:

Description Asset Image
The background skin for a text input field with focus in the light theme. SkinAssets.TextInputUpWhite
The background skin for a text input field in the key up state in the light theme. SkinAssets.TextInputUpWhite
The background skin for a text input field in the key down state in the light theme. SkinAssets.TextInputPressedWhite
The background skin for a text input field with focus in the dark theme. SkinAssets.TextInputUpBlack
The background skin for a text input field in the key up state in the dark theme. SkinAssets.TextInputUpBlack
The background skin for a text input field in the key down state in the dark theme. SkinAssets.TextInputPressedBlack

Rounded button

Dark color theme

The RoundedButtonSkinBlack class uses the following assets:

Description State Asset Image
The background skin for a rounded button in the up state, in the dark color theme. Up SkinAssets.RoundedButtonUpBlack
The background skin for a rounded button in the selected state, in the dark color theme. Selected SkinAssets.RoundedButtonSelectedBlack
The background skin for a rounded button in the down state, in the dark color theme. Down SkinAssets.RoundedButtonSelected
The background skin for a rounded button in the disabled state, in the dark color theme. Disabled SkinAssets.RoundedButtonDisabledBlack

Light color theme

The RoundedButtonSkinWhite class uses the following assets:

Description State Asset Image
The background skin for a rounded button in the up state, in the light color theme. Up SkinAssets.RoundedButtonUpWhite
The background skin for a rounded button in the selected state, in the light color theme. Selected SkinAssets.RoundedButtonSelected
The background skin for a rounded button, in the disabled state, in the light color theme. Disabled SkinAssets.RoundedButtonDisabledWhite
The background skin for a rounded button, in the down state, in the light color theme. Down SkinAssets.RoundedButtonSelected

Check box

Dark color theme

The CheckBoxSkinBlack skin uses the following assets:

Description State Asset Image
The background skin for a check box in the up state, in the dark color theme. Up SkinAssets.CheckBoxRoundedSkinBlack
The background skin for a check box, in the selected state, in the dark color theme. Selected SkinAssets.CheckBoxRoundedSkinPressedWhite
The background skin for a check box, in the down state, in the dark color theme. Down SkinAssets.CheckBoxDownSelected
The background skin for a check box, in the disabled state, for the dark color theme. Disabled SkinAssets.CheckBoxDisabledBlack
The background skin for a disabled check box, in the selected state, in the dark color theme. Disabled and Selected SkinAssets.CheckBoxRoundedSkinDisabledBlack

Light color theme

The CheckBoxSkinWhite skin uses the following assets:

Description State Asset Image
The background skin for a check box, in the up state, in the light color theme. Up SkinAssets.CheckBoxRoundedSkinWhite
The background skin for a check box, in the selected state, in the light color theme. Selected SkinAssets.CheckBoxRoundedSkinPressedWhite
The background skin for a check box, in the down state, in the light color theme. Down SkinAssets.CheckBoxRoundedSkinPressedWhite
The background skin for a check box, in the disabled state, in the light color theme. Disabled SkinAssets.CheckBoxRoundedSkinDisabledWhite
The background skin for a check box in the disabled, selected state, in the light color theme. Disabled and Selected SkinAssets.CheckBoxRoundedSkinDisabledWhite

Radio Button

Description State Asset Image
The background skin for a round radio button, in the unselected state, in the dark color theme. Up SkinAssets.RadioButtonSkinBlack
The background skin for a round radio button, in the unselected state, in the white color theme. Up SkinAssets.RadioButtonSkinWhite
The background skin for a round radio button, in the selected state, in the dark color theme. Down SkinAssets.RadioButtonPressedBlack
The background skin for a round radio button, in the selected state, in the white color theme. Down SkinAssets.RadioButtonSkinPressedWhite
The background skin for a round radio button, in the disabled state, in the dark color theme. Disabled SkinAssets.RadioButtonSkinDisabledBlack
The background skin for a round radio button, in the disabled state, in the white color theme. Disabled SkinAssets.RadioButtonSkinDisabledWhite

Toggle

A toggleswitch has three skinnable elements: the track, fill and thumb( button ) elements. Currently, there is no dark color theme for the toggle switch component.

ToggleSliderTrack

The ToggleSwitchTrackSkinWhite class uses the following assets:

Description Asset Image
The skin for the toggleswitch track in the light color theme in the off and enabled position. SkinAssets.ToggleSwitchTrackOffWhite
The skin for the toggleswitch track in the light color theme in the off and disabled position. SkinAssets.ToggleSwitchTrackOffDisabledWhite
The skin for the toggleswitch track in the light color theme in the on position. SkinAssets.ToggleSwitchTrackOnWhite
The skin for the toggleswitch track in the dark color theme in the off and enabled position. SkinAssets.ToggleSwitchTrackOffBlack
The skin for the toggleswitch track in the dark color theme in the off and disabled position. SkinAssets.ToggleSwitchTrackOffDisabledBlack
The skin for the toggleswitch track in the dark color theme in the on position. SkinAssets.ToggleSwitchTrackOnBlack
The skin for the toggleswitch track in the light color theme in the on and disabled position. SkinAssets.ToggleSwitchTrackOnDisabledWhite

ToggleSliderFill

The ToggleSwitchFillSkin class uses the following assets:

Description Asset Image
The skin for the toggleswitch fill in the light color theme in the on state. SkinAssets.ToggleSwitchTrackOnWhite
The skin for the toggleswitch fill in the light color theme in the disabled state. SkinAssets.ToggleSwitchTrackOnDisabledWhite
The skin for the toggleswitch fill in the dark color theme in the on state. SkinAssets.ToggleSwitchTrackOnBlack
The skin for the toggleswitch fill in the dark color theme in the disabled state. SkinAssets.ToggleSwitchTrackOnDisabledBlack

ToggleSliderThumb

Dark color theme

The ToggleSwitchThumbSkinBlack class uses the following assets:

Description State Asset Image
The background skin for a rounded button, in the up state for the on position, in the dark color theme. Up On SkinAssets.ToggleSwitchButtonOnUpBlack
The background skin for a rounded button, in the down state for the on position, in the dark color theme. Down On SkinAssets.ToggleSwitchButtonOnPressedBlack
The background skin for a rounded button, in the disabled state for the on position, in the dark color theme. Disabled On SkinAssets.ToggleSwitchButtonOnDisabledBlack
The background skin for a rounded button, in the up state for the off position, in the dark color theme. Up Off SkinAssets.ToggleSwitchButtonOffUpBlack
The background skin for a toggle button, in the down state for the off position, in the dark color theme. Down Off SkinAssets.ToggleSwitchButtonOffPressedBlack
The background skin for a toggle button, in the disabled state for the off position, in the dark color theme. Disabled Off SkinAssets.ToggleSwitchButtonOffDisabledBlack

Light color theme

The ToggleSwitchThumbSkinWhite class uses the following assets:

Description State Asset Image
The background skin for a rounded button, in the up state for the on position, in the dark color theme. Up On SkinAssets.ToggleSwitchButtonOnUpWhite
The background skin for a rounded button, in the down state for the on position, in the dark color theme. Down On SkinAssets.ToggleSwitchButtonOnPressedWhite
The background skin for a rounded button, in the disabled state for the on position, in the dark color theme. Disabled On SkinAssets.ToggleSwitchButtonOnDisabledWhite
The background skin for a rounded button, in the up state for the off position, in the dark color theme. Up Off SkinAssets.ToggleSwitchButtonOffUpWhite
The background skin for a toggle button, in the down state for the off position, in the dark color theme. Down Off SkinAssets.ToggleSwitchButtonOffPressedWhite
The background skin for a toggle button, in the disabled state for the off position, in the dark color theme. Disabled Off SkinAssets.ToggleSwitchButtonOffDisabledBlack

Drop Down

The dropdown is comprised of three skinnable elements - the drop down button, the dropdown list background and the cell renderer skin for the drop down list item.

Dark color theme

The DropDownButtonSkinBlack class uses the following assets:

Description State Asset Image
The button skin for the drop down, in the up state, in the dark color theme. Up SkinAssets.DropDownButtonUpBlack
The button skin for the drop down, in the down state, in the dark color theme. Down SkinAssets.DropDownButtonDownBlack
The button skin for the drop down, in the selected state, in the dark color theme. Selected SkinAssets.DropDownButtonPressedBlack
The button skin for the drop down, in the disabled state, in the dark color theme. Disabled SkinAssets.DropDownButtonDisabledBlack

Light color theme

The DropDownButtonSkinWhite class uses the following assets:

Description State Asset Image
The button skin for the drop down, in the up state, in the light color theme. Up SkinAssets.DropDownButtonUpWhite
The button skin for the drop down, in the down state, in the light color theme. Down SkinAssets.DropDownButtonDownWhite
The button skin for the drop down, in the selected state, in the light color theme. Selected SkinAssets.DropDownButtonPressedWhite
The button skin for the drop down, in the disabled state, in the light color theme. Disabled SkinAssets.DropDownButtonDisabledWhite

Drop Down Background

Dark color theme

The DropDownBackgroundSkinBlack class uses the following assets:

Description State Image
The image used for the background of the drop down list, in the dark color theme. SkinAssets.DropDownBgrBlack

Light color theme

The DropDownBackgroundSkinWhite class uses the following assets:

Description Asset Image
The image used for the background of the drop down list, in the light color theme. SkinAssets.DropDownBgrWhite

Drop Down Cell Renderer

Dark color theme

The CellRendererSkinBlack class uses the following assets:

Description State Asset Image
The background skin for a cell, in the up state, in the dark color theme. Up SkinAssets.CellRendererUpBlack
The background skin for a cell, in the up state, in the dark color theme, with alternating row colors. Up (alternating row colors) SkinAssets.CellRendererUpOddBlack
The background skin for a cell, in the selected state, in the dark color theme. Selected SkinAssets.CellRendererSelected
The background skin for a cell, in the down state, in the dark color theme. Down SkinAssets.CellRendererSelected
The background skin for a cell, in the disabled state, in the dark color theme. Disabled SkinAssets.CellRendererDisabledBlack

Light color theme

The CellRendererSkinWhite class uses the following assets:

Description State Asset Image
The background skin for a cell, in the up state, in the light color theme. Up SkinAssets.CellRendererUpWhite
The background skin for a cell, in the up state, in the light color theme, with alternating row colors. Up (alternating row colors) SkinAssets.CellRendererUpOddWhite
The background skin for a cell, in the selected state, in the light color theme. Selected SkinAssets.CellRendererSelected
The background skin for a cell, in the down state, in the light color theme. Down SkinAssets.CellRendererSelected
The background skin for a cell, in the disabled state, in the light color theme. Disabled SkinAssets.CellRendererDisabledWhite

Slider

A slider is comprised of three skins, each with their own assets: track, fill and thumb. The track, fill, and thumb components look the same for both color schemes.

Slider track background

The SliderTrackSkin class uses the following assets:

Description Asset Image
The background skin for the slider track in the light theme. SkinAssets.SliderTrackWhite
The background skin for the slider track in the dark theme. SkinAssets.SliderTrackBlack

Slider fill skin

The SliderTrackSkin class uses the following assets:

Description Asset Image
The background skin for the slider track filler (disabled state) in the light theme. SkinAssets.SliderTrackFillDisabledWhite
The background skin for the slider track filler (disabled state) in the dark theme. SkinAssets.SliderTrackFillDisabledBlack
The background skin for the slider track filler (up state) in the light theme. SkinAssets.SliderTrackFillUpWhite
The background skin for the slider track filler (up state) in the dark theme. SkinAssets.SliderTrackFillUpBlack

Slider thumb skin

The SliderThumbSkinBlack class uses the following assets:

Description Asset Image
The image used for the slider thumb (disabled) in the light theme. SkinAssets.SliderThumbDisabledWhite
The image used for slider thumb (up state) in the light theme. SkinAssets.SliderThumbUpWhite
The image used for slider thumb (down state) in the light theme. SkinAssets.SliderThumbPressedWhite
The image used for the slider thumb (disabled) in the dark theme. SkinAssets.SliderThumbDisabledBlack
The image used for slider thumb (up state) in the dark theme. SkinAssets.SliderThumbUpBlack
The image used for slider thumb (down state) in the dark theme. SkinAssets.SliderThumbPressedBlack

Picker

The Picker class uses the following assets:

Description Asset Image
The black skin for the picker list background in the light theme. SkinAssets.PickerListBgWhite
The black skin for the picker list background in the dark theme. SkinAssets.PickerListBgBlack
The white skin for the picker selection glow. SkinAssets.PickerSelectionWhite
The black skin for the picker selection glow. SkinAssets.PickerSelectionBlack
The white skin for the picker background button in the up state. SkinAssets.PickerButtonUpWhite
The white skin for the picker background button in the down state. SkinAssets.PickerButtonPressedWhite
The light skin for the picker background button in the disabled state. SkinAssets.PickerButtonDisabledWhite
The dark skin for the picker background button in the up state. SkinAssets.PickerButtonUpBlack
The dark skin for the picker background button in the down state. SkinAssets.PickerButtonPressedBlack
The dark skin for the picker background button in the disabled state. SkinAssets.PickerButtonDisabledBlack