How to use the Code11Barcode component

The Code11Barcode class displays a Code 11 barcode, which encodes a string of variable length, supporting numeric digits (0-9) and a dash (-) symbol only.

⚠️ Beta Notice: This component is still quite new. Some APIs may go through minor changes in upcoming releases.

The Basics

Start by creating a Code11Barcode control and add it to the display list.

var barcode = new Code11Barcode();
addChild(barcode);

The data displayed by the barcode may be changed programatically by setting the code property.

barcode.code = "0123452";

Warning! If the string value passed to the code property setter is not formatted correctly, an ArgumentError may be thrown. The code may contain numeric digits (0-9), spaces and the dash (-) special character only.

Styles

A number of styles may be customized on a Code11Barcode component, including the an optional background skin and padding around the edges.

Background skin

Optionally give the barcode a background using the backgroundSkin property. The following example sets it to a RectangleSkin instance.

var skin = new RectangleSkin();
skin.border = SolidColor(1.0, 0x999999);
skin.fill = SolidColor(0xcccccc);
skin.width = 16.0;
skin.height = 16.0;
barcode.backgroundSkin = skin;

The border and fill properties of the RectangleSkin are used to adjust its appearance. They support a variety of values — from solid colors to gradients to bitmaps.

The barcode automatically calculates its preferred size based on the initial dimensions of its background skin (accounting for some other factors too, like the dimensions of the text), so it's important to set a skin's width and height properties to appropriate values to use in this calculation.

See Skinning with common shapes for more details about how to use RectangleSkin with the LineStyle and FillStyle enums that change its border and fill appearance.

The appearance of the barcode's border or fill may be customized to change when the barcode is disabled. In the next example, setting the skin's disabledFill method makes it switch to a different fill when the barcode is disabled.

skin.disabledFill = SolidColor(0xffcccc);

Similarly, use the skin's disabledBorder property to change the border when disabled.

skin.disabledBorder = SolidColor(2.0, 0x999999);

In the examples above, the barcode uses the same RectangleSkin for all states, and that skin listens for changes to the barcode's current state. Alternatively, the barcode's disabledBackgroundSkin method allows the barcode to display a completely different display object when it is disabled.

var defaultSkin = new RectangleSkin();
// ... set border, fill, width, and height
barcode.backgroundSkin = defaultSkin;

var disabledSkin = new RectangleSkin();
// ... set border, fill, width, and height
barcode.disabledBackgroundSkin = disabledSkin;

In the example above, the barcode will have a separate skins when enabled and disabled.

Layout

Padding may be added on each side of the barcode, including top, right, bottom, and left.

barcode.paddingTop = 5.0;
barcode.paddingRight = 8.0;
barcode.paddingBottom = 5.0;
barcode.paddingLeft = 8.0;