< Jewel Components list

Jewel Card

Reference

Available since version 0.9.4.

^{Note: This component is currently only available for JavaScript.}

Overview

The Jewel Card class is a Container for content like text or images that supports optional parts like title and action (mostly buttons) zones.

Card is a vertical container with a default “panel” styling that extends the features already provided by VContainer.

It can be used alone or with other complementary components listed below:

Example of use

In MXML declare a Card like this:

Simple Card

This is the most basic Jewel card that can be declared. Elements are laid out vertically and with a default gap predefined in Jewel Theme.

<j:Card>
    <j:CardTitle text="Jewel Simple Card"/>

    <j:Label text="This is the content"/>

    <j:Button text="Action" emphasis="primary"/>
</j:Card>

Card with optional components

For advanced card layouts the next example shows how to use optional Card components.

First, we add a CardHeader with two BarSection components to separate the header content. In the left section we add the CardTitleand in the right one we add an IconButton (that provides an action. In the example we describe the action as “Assign new data”).

Next, we have a CardPrimaryContent with the main content; in this case, some text description and a ComboBox component. Those elements are laid out vertically with some gap between them.

Finally a CardActions with two BarSections (similar to card header). In the left we have a Label and in the right a NumericStepper.

<j:Card>
	<j:CardHeader>
		<j:BarSection>
			<j:CardTitle text="Object Collection" className="secondary-normal"/>
		</j:BarSection>
		<j:BarSection itemsHorizontalAlign="itemsRight">
			<j:IconButton unboxed="true" click="assignNewData(avengersComboBox)">
				<j:icon>
					<js:MaterialIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}" />
				</j:icon>
				<j:beads>
					<j:ToolTip toolTip="Assign new data"/>
				</j:beads>
			</j:IconButton>
		</j:BarSection>
	</j:CardHeader>
	<j:CardPrimaryContent>
		<j:Label multiline="true">
			<j:html><![CDATA[<p>This <b>ComboBox</b> is using an object collection as <i>dataProvider</i>. Use <i>labelField</i> to indicate the object property to use as label. A <b>ComboBoxTextPrompt</b> bead is used to show a prompt message.</p>]]></j:html>
		</j:Label>
		<j:ComboBox localId="avengersComboBox" labelField="label" dataProvider="{listModel.avengers}">
			<j:beads>
				<j:ComboBoxTextPrompt prompt="Avengers Team..."/>
			</j:beads>
		</j:ComboBox>
	</j:CardPrimaryContent>
	<j:CardActions itemsVerticalAlign="itemsCenter">
		<j:BarSection>
			<j:Label localId="avengersComboBoxResult" html="{describeItem(avengersComboBox.selectedItem)}"/>
		</j:BarSection>
		<j:BarSection gap="3" itemsHorizontalAlign="itemsRight">
			<j:Label text="Select Index: "/>
			<j:NumericStepper valueChange="avengersComboBox.selectedIndex = event.target.value" minimum="0" maximum="8"/>
		</j:BarSection>
	</j:CardActions>
</j:Card>

In ActionScript we can do the same in the following way. In this case we declare just the Card and a Label inside the card to keep it simple:

var card:Card = new Card();
// add a label to the Card
var label:Label = new Label();
label.text = "Some text";
card.addElement(label);
// add the Container to the parent
parent.addElement(card);

where parent is the container where the control will be added.

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.Card for a more detailed list of properties and methods.

Properties

Methods

Relevant Events

The most important event is initComplete, which indicates that initialization of the card is complete.

It is needed when some action coded in a callback function needs to be triggered when the card is ready to use after initialization.

You can attach callback listeners to the initComplete event in MXML as follows:

<j:Card initComplete="initCompleteHandler(event)"/>

the initComplete event will use the initCompleteHandler callback function you provide in ActionScript:

<fx:Script>
    <![CDATA[      
        private function initCompleteHandler(event:Event):void {
            trace("Card is ready!");
        }
    ]]>
</fx:Script>

When the container is initialized the message “Card is ready!” appears in the console log.

In ActionScript we can add an event handler this way:

var c:Card = new Card();
c.addEventListener('initComplete', initCompleteHandler);
parent.addElement(c);

Relevant Beads

Optional Beads

Common Beads

Jewel Card can use any of the layout beads available in the Jewel library. Also you can check Related controls section to see some preconfigured containers with specific layouts.

More examples

• Using Jewel TileHorizontalLayout
• Using View States to show or hide content
• Customization through the Royale API

Related controls

Other useful Jewel containers components are:

• Container
• HContainer
• VContainer
• Group
• HGroup
• VGroup