This class is the basis for the inline style functionality:

• Component.setInlineAllStyles(java.lang.String)
• Component.getInlineAllStyles()
• Component.setInlineSelectedStyles(java.lang.String)
• Component.getInlineSelectedStyles()
• etc..

Style strings are strings which describe a style, and are in a particular format that StyleParser knows how to parse. The general format of a style string is key1:value1; key2:value2; ... keyn:valuen;. I.e. a set of key-value pairs with pairs separated by semi-colons, and keys and values separated by a colon. This is very similar to CSS, but it is NOT CSS. Style string keys and values are closely related to the properties of the Style class and their associated values.

Supported Keys

The following keys are supported:

• fgColor - The foreground color as a hex string. E.g. ff0000.
• bgColor - The background color as a hex string. E.g. ff0000.
• transparency - The background transparency as an integer. 0-255.
• textDecoration - The text decoration. One of underline, overline, 3d, 3d_lowered, 3d_shadow_north, strikethru, or none.
• opacity - The opacity as an integer. 0-255
• padding - The padding as a sequence of 1, 2, 3, or 4 values. See "Padding and Margin Strings" below for details on the format.
• margin - The margin as a sequence of 1, 2, 3, or 4, values. See "Padding and Margin Strings" below for details on the format.
• font - The font. See "Font Strings" below for details on the format.
• border - The border. See "Border Strings" below for details on the format.
• bgType - The background type. See "Background Type Values" below for details on the available options.

Padding and Margin Strings

The padding and margin keys can take values the same format as is used for CSS margin and padding directives. That is the value can be expressed as a space-separated sequence of scalar values (i.e. float values with a unit suffix). Some examples:

• padding:0px - Sets all padding to zero pixels.
• padding:2mm 1px - Sets vertical padding to 2 millimetres, and horizontal padding to 1 pixel.
• padding:2mm 1px inherit - Sets top padding to 1 millimetres, horizontal padding to 1 pixel, and bottom padding to inherit the parent style's bottom padding.
• padding:1mm 2px inherit 4mm - Top padding=1 millimetre. Right padding=2 pixels. Bottom padding inherits parent style's bottom padding. Left padding=4 millimetres.

All of the examples above use padding, but the same format is used for margin. They demonstrate the use of 1, 2, 3, and 4 value sequences, and their meaning. In general terms these formats can be described as:

• <value> - Sets padding on all sites to <value>
• <vertical> <horizontal> - Top and bottom padding set to <vertical>. Left and right padding set to <horizontal>
• <top> <horizontal> <bottom> - Top=<top>. Left and right = <horizontal>. Bottom = bottom.
• <top> <right> <bottom> <left> - Top=<top>. Right=right. Bottom=bottom. Left=left. In other words, values applied clock-wise, starting on top side.

Font Strings

Fonts strings can take any of the following formats:

• <size> <fontName> <fontFile> - E.g. 3mm Arial.ttf /Arial.ttf or 12px native:MainRegular native:MainRegular
• <size> <fontName> - E.g. 3mm Arial.ttf or 3mm native:ItalicBlack.
• <size> - E.g. 3mm or 12px. When only specifying the size, the font family will be dictated by the parent style.
• <fontName> <fontFile> - E.g. Arial.ttf /Arial.ttf or native:MainBold native:MainBold. When omitting font size (as this format does), the size is dictated by the parent style.
• <fontName>|<fontFile> - E.g. Arial.ttf or /Arial.ttf, or native:MainRegular Strings starting with a / are assumed to be files. The corresponding font name is then derived by removing the slash and the trailing .ttf. When omitting font size (as this format does), the size is dictated by the parent style.

Border Strings

The border property accepts several different formats for its value. This is due to the many different kinds of borders that can be created. The following are some of the formats.

Line Border

<thickness> solid <color> - E.g. 1mm solid ff0000. <thickness> should be expressed as a scalar value with unit. E.g. 1mm, or 2px. <color> should be an RGB hex string. E.g ff0000 for red.

Dashed Border

<thickness> dashed <color> - E.g. 1mm dashed ff0000. <thickness> should be expressed as a scalar value with unit. E.g. 1mm, or 2px. <color> should be an RGB hex string. E.g ff0000 for red.

Dotted Border

<thickness> dotted <color> - E.g. 1mm dotted ff0000. <thickness> should be expressed as a scalar value with unit. E.g. 1mm, or 2px. <color> should be an RGB hex string. E.g ff0000 for red.

Underline Border

<thickness> underline <color> - E.g. 1mm underline ff0000. <thickness> should be expressed as a scalar value with unit. E.g. 1mm, or 2px. <color> should be an RGB hex string. E.g ff0000 for red.

Image Border

image <image1> <image2> ... <image9> - A 9-piece image border. The <image1> .. <image9> values are strings which refer to images either on the classpath, or in the theme resource file. If the image string starts with /, then it is assumed to be on the classpath. The order of the images corresponds to the parameters of Border.createImageBorder(com.codename1.ui.Image, com.codename1.ui.Image, com.codename1.ui.Image, com.codename1.ui.Image, com.codename1.ui.Image, com.codename1.ui.Image, com.codename1.ui.Image, com.codename1.ui.Image, com.codename1.ui.Image).

image <image1> <image2> <image3> - A 9-piece image border, but with the images corresponding to the parameters of Border.createImageBorder(com.codename1.ui.Image, com.codename1.ui.Image, com.codename1.ui.Image).

horizontalImage <leftImage> <rightImage> <centerImage> - A 3-piece horizontal image border. Image parameters correspond with Border.createHorizonalImageBorder(com.codename1.ui.Image, com.codename1.ui.Image, com.codename1.ui.Image) parameters.

verticalImage <topImage> <bottomImage> <centerImage> - A 3-piece horizontal image border. Image parameters correspond with Border.createVerticalImageBorder(com.codename1.ui.Image, com.codename1.ui.Image, com.codename1.ui.Image) parameters.

splicedImage <image> <topInset> <rightInset> <bottomInset> <leftInset> - A 9-piece image border that is generated from a single image, but with inset values specifying where the image should be sliced to create the 9 sub-images.
Parameters:

• <image> The image to use. If this begins with /, then the image will be found on the classpath. Otherwise it will be found in the theme resource file.
• <topInset>, <rightInset>, <bottomInset>, <leftInset> - The insets along which <image> is sliced to generate the 9-subimages. These values are expressed as a floating point number between 0.0 and 1.0, where 1.0 is the full width or height of the image depending on the orientation (horizontal or vertical) or the inset. If image is 100 pixels by 100 pixels, then a top inset of 0.4 would cause a slice to occur at 40 pixels from the top of the image (i.e. the top-left, top, and top-right slices would each be 40 pixels high.