How to use the EAN8Barcode component

The EAN8Barcode class displays an International Article Number 8 (EAN-8) of a smaller variety than EAN-13 that represents exactly 8 numeric digits.

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

The Basics

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

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

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

barcode.code = "95050003";

Warning! If the string value passed to the code property setter is not formatted correctly, an ArgumentError may be thrown. The code must have a length of exactly eight (8) numeric digits (0-9).

Styles

A number of styles may be customized on a EAN8Barcode 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;