User Tools

Site Tools


bindings_box

Box property syntax

Description

Attributes

The box property is a string made of one or more components, separated by “;”. Each component is a box attribute to change (margin, padding, border size, border color, content color). A component is itself a string made of a name and value separated by “:”. You may have a look at samples for a quick introduction before to come back to the reference below.

Available component names are:

  • c : background color
  • m : margin size
  • p : padding size
  • bc : border color
  • bs : border size

Margin, padding, border color and border size can be suffixed with side codes:

  • l : left side
  • t : top side
  • r : right side
  • b : bottom side

These side codes can be combined (for instance lt means left and top, lrb means left, right and bottom). No side code at all means all sides. Order doesn't matter.

Border color and background color can also be suffixed with state codes:

  • n : normal state (unpressed)
  • s : selected state
  • f : focused state

These codes can be combined too, and no code at all means all states. Order doesn't matter.

Attributes are evaluated from left to right. If an attribute is specified several times, all instances are evaluated from the first to the last.

Using dynamic values

When using dynamic values (variables or JavaScript expressions), the final box property must be a string. As a consequence the expression need to be the concatenation of several strings, for instance:

"bsl:"+$bat_level

set the left border size to the value given by the battery level.

Color codes

Colors can be expressed using these notations

  • 0xaarrggbb : 4 bytes ARGB hexadecimal value prefixed with 0x
  • #aarrggbb : 4 bytes ARGB hexadecimal value prefixed with #
  • 12345678 : 4 bytes decimal integer
  • Color.argb(a, r, g, b) or Color.rgb(r, g, b) : using the Android Color class, where a, r, g, b are color components between 0 and 255. More Color tools are documented here http://developer.android.com/reference/android/graphics/Color.html

Samples

Box code Description
c:0xffff0000Set the background color to red for all states
cn:0xffff0000Set the background color to red for the normal state only
cs:0xffff0000Set the background color to red for the selected state only
cns:0xffff0000Set the background color to red for the normal and selected states
cnsf:0xffff0000Set the background color to red for the normal, selected and focused states. this is the same as c:0xffff0000
m:10;p:15;bs:20Set margin to 10 pixel, padding to 15 pixels and border size to 20 pixels
mlr:10;ptb:15;bs:20Set margin left and right to 10 pixel, padding top and bottom to 15 pixels and all border sizes to 20 pixels
mlr:10;ptb:15;bs:20;bc:0xff00ff00Set margin left and right to 10 pixel, padding top and bottom to 15 pixels, all border sizes to 20 pixels and all border colors to green
mlr:10;ptb:15;bs:20;bcn:0xff00ff00Set margin left and right to 10 pixel, padding top and bottom to 15 pixels, all border sizes to 20 pixels and all border colors for the normal state to green
bc:0xffff0000Set all borders to red
bclr:0xffff0000Set left and right borders to red
bcrl:0xffff0000Set left and right borders to red (order of suffixes doesn't matter)
bclrn:0xffff0000Set left and right borders to red only for the normal state
bclrtbnsf:0xffff0000Same as bc:0xffff0000
“bslr:”+($ll_second%10)+“;bc:0xffff0000”Set the left and right border size to the modulo 10 of the current second (value increase by 1 each second from 0 up to 9), and set the border color to red
“bslr:”+($ll_second%10)+“;bc:”+Color.rgb(50*($ll_second%5), 0, 0)Set the left and right border size to the modulo 10 of the current second (value increase by 1 each second from 0 up to 9), and set the border color to a value varying between black and red
“bslr:”+($ll_second%10)+“;bc:”+Color.rgb(50*(animate('$ll_second')%5), 0, 0)Set the left and right border size to the modulo 10 of the current second (value increase by 1 each second from 0 up to 9), and smoothly change the border color to a value varying between black and red
bindings_box.txt · Last modified: 2015/06/04 09:54 by pierrox