Licensed to the Apache Software Foundation (ASF) under one or more

contributor license agreements. See the NOTICE file distributed with

this work for additional information regarding copyright ownership.

The ASF licenses this file to You under the Apache License, Version 2.0

(the “License”); you may not use this file except in compliance with

the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an “AS IS” BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

layout: docpage title: Jewel description: A set of modern UI components permalink: /component-sets/jewel

Jewel

A set of modern UI components

Jewel is a themeable and responsive set of user interface components for Apache Royale to help you quickly build the front end of your applications with ActionScript & MXML.

It's based by design on Basic components. But while Basic is very strict with concepts like PAYG, in Jewel, while PAYG is important, when necessary we prioritize other things like responsiveness, themes and look and feel.

Browser Support

Jewel works on the following browser and device versions:

BrowserMinimun VersionRelease Date
DesktopGoogle Chrome44+July,21, 2015
Mozilla Firefox34+Dec, 1, 2014
Apple Safari11.1+(High Sierra)Feb, 22 2018
Microsoft Edge15+
Microsoft IE11+
Opera
MobileiOS SafariMobile11.0+Sep, 19, 2017
Android5.02014
Windows Mobile

(*) This list can change depending on evolution and completion of the different components, but normally it should remain in this state.

Thanks to Browserstack{:target=‘_blank’} we created the list of minimum browser versions (*) where Apache Royale Jewel works consistently

Generated Javascript Output

For the browsers, Apache Royale generates ECMAScript version 5 (ES5) standard JavaScript to ensure applications are compatible with a wide range of available browsers, including Microssoft Internet Explorer 11 (IE11).

Components

If the component name is a link, you can click it to see more information about the component. We will update this list as we add information.

TypeNameDescriptionAvailable SDKState
ContainersApplicationThe root container of a Jewel Application.0.9.4Complete
ApplicationMainContentContainer for ISelectableContent.0.9.4Complete
BarRowA container to organize content in a row.0.9.4Complete
BarSectionA container to separate content and present to the user in a row.0.9.4Complete
CardContent (text, images,...) container with optional title and actions zones.0.9.4Complete
ContainerContainer that surrounds other components.0.9.4Complete
DataContainerA Container that creates child elements dynamically based on a data provider.0.9.4Complete
DrawerA container used for main navigation that can optionaly be hidden to the side of screen.0.9.4Complete
FooterBarThe bottom container for main application navigation actions.0.9.4Complete
FormA container to present forms to the user.0.9.4Complete
GridContainer for responsive layout of childrens.0.9.4Complete
GridCellA cell used in Grid container.0.9.4Complete
GroupThe most simple container that groups other components.0.9.4Complete
HContainerContainer that layout other components horizontaly.0.9.7Complete
HGroupGroup that layout other components horizontaly.0.9.7Complete
ModuleA loadable part of an Application.0.9.6Complete
ModuleLoaderA loader for a Module.0.9.6Complete
ResponsiveViewThe main view for a responsive Application.0.9.4Complete
SectionContentA container to separate content and present to the user.0.9.4Complete
ScrollableSectionContentA scrollable container to separate content and present to the user.0.9.4Complete
TabBarContentA container to use with TabBar and capable of presenting organized content.0.9.4Complete
TopAppBarThe top container for main application title, navigation actions.0.9.4Complete
VContainerContainer that layout other components verticaly.0.9.7Complete
ViewThe main view in the Application.0.9.4Complete
VGroupGroup that layout other components verticaly.0.9.7Complete
WizardA container that navigates from one content to the next.0.9.4Complete
ComponentsAlertDisplays a message and one or more buttons in a view that pops up over all other controls and views.0.9.4Complete
BinaryImage0.9.7Complete
ButtonA commonly-used rectangular button with a text label. Users can click or tap it to take an action.0.9.4Complete
ButtonBarA component that displays a set of buttons0.9.7Complete
IconButtonBarA component that displays a set of buttons with icons0.9.7Complete
CheckBoxConsists of a box that can contain a check mark and an optional label.0.9.4Complete
ComboBox0.9.4Complete
DataGrid0.9.7
DateChooser0.9.4Complete
DateField0.9.4Complete
Divider0.9.4Complete
DropDownList0.9.4Complete
FormHeading0.9.4Complete
FormItem0.9.4Complete
HSlider0.9.4Complete
Icon0.9.4Complete
IconButtonA button that can have an icon.0.9.4Complete
Image0.9.4Complete
LabelUsed for single or multi lined text labels0.9.4Complete
ListA data container that support selection of items.0.9.4Complete
Navigationa List used for navigate other organized application's content0.9.4Complete
NumericStepper0.9.4
PopUp0.9.4Complete
RadioButtonLets the user make a single choice within a set of mutually exclusive choices.0.9.4Complete
VSlider0.9.6Complete
SnackBar0.9.4Complete
SimpleTableA basic HTML table that can be declared in MXML0.9.4Complete
SimpleLoader0.9.7Complete
TableA complex HTML table element filled from a data source. Cells are ItemRenderers.0.9.4
TabBar0.9.4Complete
TextAreaA control for multi-line text field.0.9.4Complete
TextInputA control for single-line text field.0.9.4Complete
ToggleButtonA button with selected state.0.9.4Complete
ToggleButtonBarA component that displays a set of buttons that can have a selected state.0.9.7Complete
VirtualListA data container that support virtual items with selection0.9.7
VirtualComboBox0.9.7

Jewel Themes

The look and feel of the jewel component set are managed by Jewel Themes.