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:
Browser | Minimum 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+ | ||
Opera | |||
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).
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.
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.