Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

BB10: CSS available

Does anyone know where we can obtain all the style/css properties for the UI elements?

 

For example, to change the color of a label button in its different states.

Please use plain text.
BlackBerry Employee
plemarquand
Posts: 1
Registered: ‎07-19-2012
My Device: Playbook, Blackberry 10 Dev Alpha
My Carrier: Rogers

Re: BB10: CSS available

[ Edited ]

Hi,

 

The quick answer is all primitive, public properties in qnx.fuse.ui.text.TextFormat class can be styled with CSS. All states in qnx.fuse.ui.skins .SkinStates can be used as state selectors to style components in specific states.

 

Here is an exerpt from some soon to be published documentation on the subject that goes in to more detail. 

 

What Can I Style With CSS?

All public properties that are String, Boolean or numeric types on components in the fuse package can be styled with CSS. In addition to these public properties of qnx.fuse.ui.text.TextFormat can be styled for component's that contain text. When styling TextFormat properties, take the public property on the TextFormat instance and prepent "text-". For instance, to style the color of a Label, use the following rule:

Label { text-color:#ff0000; }

When creating a custom component based off of the fuse UIComponent class, public properties exposed on the component can automatically be styled through CSS.

 

State (pseudo) Selectors

Many components change visual appearance depending on their state. Fuse makes use of pseudo selector syntax to denote states of a component, similar to how "a:hover" denotes styles to apply to links in their hovered state. State selectors can be used to style components when they transition into a new state. State selectors are made up of a component selector, followed by a ":" character and the name of the state. The styles of the immediate parent component selector cascade down to the styles of the state selector. Skin states are listed as string constants in qnx.fuse.ui.skins.SkinStates. For instance, the following selector selects a LabelButton's font color when it enters its 'down' state.

LabelButton:down { text-color:#ff0000; }

Styling of states is tied into the component invalidation framework, so after setting the state of a component it's important to note that the change may not appear until the next frame has rendered.

 

Here is a complete list of avaliable states. Note that not all components use all states.

 

  • up
  • up_odd
  • down
  • down_selected
  • selected
  • disabled
  • disabled_selected
  • up
  • up_odd
  • down
  • down_selected
  • selected
  • disabled
  • disabled_selected
  • focus
  • play
  • stop
  • buffering
  • focus
  • play
  • stop
  • buffering
  • error

 

Limitations

Currently only components that subclasses UIComponent can be styled with CSS. Because of this layouts of Containers, such as GridLayout, cannot be styled.

 

 

I hope this helps. Let me know if you have any questions or encounter any issues.

 

Paul

Please use plain text.