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:

  Browser Minimun Version Release Date
Desktop Google Chrome 44+ July,21, 2015
  Mozilla Firefox 34+ Dec, 1, 2014
  Apple Safari 11.1+(High Sierra) Feb, 22 2018
  Microsoft Edge 15+  
  Microsoft IE 11+  
Mobile iOS SafariMobile 11.0+ Sep, 19, 2017
  Android 5.0 2014
  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 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).


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.

Type Name Description Available SDK State
Containers Application The root container of a Jewel Application. 0.9.4 Complete
  ApplicationMainContent Container for ISelectableContent. 0.9.4 Complete
  BarRow A container to organize content in a row. 0.9.4 Complete
  BarSection A container to separate content and present to the user in a row. 0.9.4 Complete
  Card Content (text, images,…) container with optional title and actions zones. 0.9.4 Complete
  Container Container that surrounds other components. 0.9.4 Complete
  DataContainer A Container that creates child elements dynamically based on a data provider. 0.9.4 Complete
  Drawer A container used for main navigation that can optionaly be hidden to the side of screen. 0.9.4 Complete
  FooterBar The bottom container for main application navigation actions. 0.9.4 Complete
  Form A container to present forms to the user. 0.9.4 Complete
  Grid Container for responsive layout of childrens. 0.9.4 Complete
  GridCell A cell used in Grid container. 0.9.4 Complete
  Group The most simple container that groups other components. 0.9.4 Complete
  HContainer Container that layout other components horizontaly. 0.9.7 Complete
  HGroup Group that layout other components horizontaly. 0.9.7 Complete
  Module A loadable part of an Application. 0.9.6 Complete
  ModuleLoader A loader for a Module. 0.9.6 Complete
  ResponsiveView The main view for a responsive Application. 0.9.4 Complete
  SectionContent A container to separate content and present to the user. 0.9.4 Complete
  ScrollableSectionContent A scrollable container to separate content and present to the user. 0.9.4 Complete
  TabBarContent A container to use with TabBar and capable of presenting organized content. 0.9.4 Complete
  TopAppBar The top container for main application title, navigation actions. 0.9.4 Complete
  VContainer Container that layout other components verticaly. 0.9.7 Complete
  View The main view in the Application. 0.9.4 Complete
  VGroup Group that layout other components verticaly. 0.9.7 Complete
  Wizard A container that navigates from one content to the next. 0.9.4 Complete
Components Alert Displays a message and one or more buttons in a view that pops up over all other controls and views. 0.9.4 Complete
  BinaryImage   0.9.7 Complete
  Button A commonly-used rectangular button with a text label. Users can click or tap it to take an action. 0.9.4 Complete
  ButtonBar A component that displays a set of buttons 0.9.7 Complete
  IconButtonBar A component that displays a set of buttons with icons 0.9.7 Complete
  CheckBox Consists of a box that can contain a check mark and an optional label. 0.9.4 Complete
  ComboBox   0.9.4 Complete
  DataGrid   0.9.7  
  DateChooser   0.9.4 Complete
  DateField   0.9.4 Complete
  Divider   0.9.4 Complete
  DropDownList   0.9.4 Complete
  FormHeading   0.9.4 Complete
  FormItem   0.9.4 Complete
  HSlider   0.9.4 Complete
  Icon   0.9.4 Complete
  IconButton A button that can have an icon. 0.9.4 Complete
  Image   0.9.4 Complete
  Label Used for single or multi lined text labels 0.9.4 Complete
  List A data container that support selection of items. 0.9.4 Complete
  Navigation a List used for navigate other organized application’s content 0.9.4 Complete
  NumericStepper   0.9.4  
  PopUp   0.9.4 Complete
  RadioButton Lets the user make a single choice within a set of mutually exclusive choices. 0.9.4 Complete
  VSlider   0.9.6 Complete
  SnackBar   0.9.4 Complete
  SimpleTable A basic HTML table that can be declared in MXML 0.9.4 Complete
  SimpleLoader   0.9.7 Complete
  Table A complex HTML table element filled from a data source. Cells are ItemRenderers. 0.9.4  
  TabBar   0.9.4 Complete
  TextArea A control for multi-line text field. 0.9.4 Complete
  TextInput A control for single-line text field. 0.9.4 Complete
  ToggleButton A button with selected state. 0.9.4 Complete
  ToggleButtonBar A component that displays a set of buttons that can have a selected state. 0.9.7 Complete
  VirtualList A data container that support virtual items with selection 0.9.7  
  VirtualComboBox   0.9.7  

Jewel Themes

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