About the Oracle JET User Interface

The Oracle JET framework includes many components, patterns, and utilities that are ready for you to use in your application. Each Oracle JET UI component, pattern, and utility includes an API specification (if applicable) and a code example in the Oracle JET Cookbook. The Oracle JET Cookbook includes HTML markup and JavaScript that you can copy and paste into your own application.

Topics:

• Oracle JET and jQuery UI

• Identifying Oracle JET UI Components, Patterns, and Utilities

• Common Functionality in Oracle JET Components

• Oracle JET Reserved Namespaces and Prefixes

Oracle JET and jQuery UI

Oracle JET components encapsulate jQuery UI widgets, which are stateful plugins with a full life cycle that you can add to your page. jQuery UI widgets include methods and events which are described in jQuery UI API documentation at http://api.jqueryui.com.

By encapsulating jQuery UI widgets, Oracle JET components can take advantage of Knockout.js two-way data binding. Knockout is not required, however, and you can also work with Oracle JET components using standard jQuery calls.

Note:

The jQuery UI libraries included with Oracle JET contain the UI Core module and only those modules needed by the Oracle JET framework. For information about what is included in jQuery UI Core, see http://jqueryui.com/download. For information about downloading jQuery UI components or effects not included in the Oracle JET distribution, see Adding jQuery UI Components or Effects to Your Oracle JET Application.

Identifying Oracle JET UI Components, Patterns, and Utilities

The table below shows the list of Oracle JET UI components with links to an overview, the API documentation, and the code sample in the Oracle JET Cookbook.

Component	Overview	API Specification	Cookbook Example
Accordion	Working with Layout and Navigation	ojAccordion	Accordions
Button	Working with Buttons	ojButton	Buttons
Button set	Working with Button Sets	Button Sets	Button Sets
Chart	Working with Data Visualizations	ojChart	Charts
Checkbox Set	Working with Checkbox and Radio Sets	ojCheckboxset	Checkbox Sets
Collapsible	Working with Collapsibles	ojCollapsible	Collapsibles
Combobox	Working with Comboboxes	ojCombobox	Comboboxes
Conveyor Belt	Working with Conveyor Belts	ojConveyorBelt	Conveyor Belts
Data Grid	Working with Data Grids	ojDataGrid	Data Grids
Date and Time Picker	Working with Text Input Components	ojInputDateTime	Date and Time Pickers
Date Picker	Working with Text Input Components	ojInputDate	Date Pickers
Diagram	Working with Data Visualizations	ojDiagram	Diagrams
Dial Gauge	Working with Data Visualizations	ojDialGauge	Dial Gauges
Dialog	Working with Dialogs	ojDialog	Dialogs
Drawer Utilities	Working with offCanvasUtils	oj.OffcanvasUtils	Drawer Utilities
Film Strip	Working with Film Strips	ojFilmstrip	Film Strips
Input Number	Working with Text Input Components	ojInputNumber	Input Number
Input Password	Working with Text Input Components	ojInputPassword	Input Password
LED Gauge	Working with Data Visualizations	ojLedGauge	LED Gauges
Legend	Working with Data Visualizations	ojLegend	Legends
List View	Working with List Views	ojListView	List Views
Masonry Layout	Working with Masonry Layouts	ojMasonryLayout	Masonry Layouts
Menu	Working with Menus	ojMenu	Menus
Nav List	Working with Nav Lists	ojNavigationList	Nav Lists
NBox	Working with Data Visualizations	ojNBox	NBoxes
Pagination	Working with Pagination	ojPagingControl	Pagination
Popup	Working with Popups	ojPopup	Popups
Progress Indicator	Working with Progress Indicators	ojProgressbar	Progress Indicators
Radioset	Working with Checkbox and Radio Sets	ojRadioset	Radio Sets
Rating Gauge	Working with Data Visualizations	ojRatingGauge	Rating Gauges
Row Expander (Tree Table)	Working with Row Expanders	ojRowExpander	Row Expanders
Select	Working with Select	ojSelect	Select
Slider	Working with Sliders	ojSlider	Sliders
Spark Chart	Working with Data Visualizations	ojSparkChart	Spark Charts
Status Meter Gauge	Working with Data Visualizations	ojStatusMeterGauge	Status Meter Gauges
Sunburst	Working with Data Visualizations	ojSunburst	Sunbursts
Switch	Working with Switches	ojSwitch	Switches
Table	Working with Data Collections	ojTable	Tables
Tabs	Working with Tabs	ojTabs	Tabs
Tag Cloud	Working with Data Visualizations	ojTagCloud	Tag Clouds
Text Area	Working with Text Input Components	ojTextArea	Text Areas
Textbox	Working with Text Input Components	ojInputText	Textboxes
Thematic Map	Working with Data Visualizations	ojThematicMap	Thematic Maps
Time Picker	Working with Text Input Components	ojInputTime	Time Pickers
Timeline	Working with Data Visualizations	ojTimeLine	Timelines
Toolbar	Working with Toolbars	ojToolbar	Toolbars
Train	Working with Trains	ojTrain	Trains
Tree	Working with Trees	ojTree	Trees
Treemap	Working with Data Visualizations	ojTreemap	Treemaps

Common Functionality in Oracle JET Components

All Oracle JET components extend HTML elements, and you add the components to the HTML tags on your page.

Some Oracle JET components extend a single HTML element. For example, the ojTable component extends the HTML table element, and the ojInputText component extends input.

Other Oracle JET components can extend multiple HTML elements. For example, the ojButton component can extend button, input, and div. In some cases, the behavior of the component changes depending on which HTML element you are extending. The inputDateTime component displays a calendar inline if you use it to extend the div element, but it will display an input field with a calendar popup if you use it to extend the input element.

The Oracle JET Cookbook and JavaScript API Reference for Oracle® JavaScript Extension Toolkit (JET) provide examples that illustrate which HTML element to extend if you use the component. In addition, the Cookbook provides editing capability that allows you to modify the sample code directly and view the results without having to download the sample.

Oracle JET components also have the following functionality in common:

• getNodebySubId() and getSubIdByNode() methods

  The getNodeBySubId() and getSubIdByNode() methods provide safe access to an Oracle JET component's internal parts to check values and test components. Most Oracle JET components will consist of one or more internal parts. For example, an Oracle JET table component has table cells that you can access with the getNodeBySubId() method. For additional information, see Testing Oracle JET Applications.

• getContextByNode() method

  The getContextByNode() method is available on most DVT components and provides access to the component’s internal child DOM nodes. The method returns an object containing the context for the given node, including the child node’s subid and optional component-specific information. For additional information about the method and context objects, see the API documentation for the given component.

• rootAttributes option

  Most Oracle JET components provide the rootAttributes option which enables you to set attributes on the component's root DOM element at create time. Supported attributes include id, which overwrites any existing value, and class and style, which are appended to the current class and style, if any.

• Keyboard navigation and other accessibility features

  Oracle JET components that support keyboard navigation list the end user information in their API documentation. For additional information about Oracle JET components and accessibility, see Developing Accessible Applications.

• Setting component state

  In Oracle JET applications, when setting component state after create time, the correct approach depends on whether the component has a JavaScript (JS) API for that state.

  State with a JS API, such as a button's disabled state, checked state, and label, should be set after creation through that API (option(), for example) and not by directly manipulating the DOM after creation. This can be done by calling that JS API directly or by binding a component option such as disabled to a Knockout observable using the ojComponent binding. In the latter case, the application should make any updates to the component option through the observable because any updates to the observable made by the application automatically update the component option. Likewise, options like value that can change because of user interaction automatically update the observable.

  State with no JS API should be set by manipulating the DOM directly in an allowable way, and then calling refresh() on the affected components. For example, call refresh() if the reading direction is changed by setting the dir attribute on the html node.

  When using a built-in Knockout binding instead of the ojComponent binding, keep in mind that those bindings do not execute the necessary refresh() call after updating the DOM. Updates that flow from the component to the observable, because of user interaction, are not problematic. But updates in the other direction, that programmatically update the DOM because the observable changed, will not be picked up until the next refresh().

Oracle JET Reserved Namespaces and Prefixes

Oracle JET reserves the oj namespace and prefixes. This includes, but is not limited to component names, namespaces, pseudo-selectors, public event prefixes, CSS styles, Knockout binding keys, and so on.