About the Oracle JET User Interface

The Oracle JET framework includes components, patterns, and utilities to use in your application. The framework also includes an API specification (if applicable) and one or more code examples in the Oracle JET Cookbook.

Topics:

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 Oracle JET Cookbook lists all the components, design patterns, and utilities available for your use. By default, the cookbook is organized into functional sections, but you can also click Sort to arrange the contents alphabetically.

The Cookbook contains samples that you can edit online and see the effects of your changes immediately. You’ll also find links to the API documentation, if applicable.

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.

    For example, to change the maximum width of an ojInputSearch instance, you could add the following highlighted code to your ojComponent binding:

    <form id="form1">
      <label for="inputSearch">Search</label>
      <input id="inputSearch" placeholder="Search..."
            data-bind="ojComponent: {
              component: 'ojInputSearch',
              value: keyword,
              options: tags,
              rootAttributes: {style:'max-width: 20em'}}">
      </form>
    

    You can also use the rootAttributes option to reference your own style classes. For example, to override the default border color of the ojInputSearch instance, you could create the following class in your application-specific CSS file:

    .my-special-search .oj-inputsearch-choice {
      border-color: red;
    }
    

    To reference the new class, change the rootAttributes option to:

    rootAttributes: {class: 'my-special-search'} 
    
  • 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.

  • Drag and Drop

    The Oracle JET framework includes support for standard HTML5 drag and drop and provides the dnd-polyfill library to extend HTML5 drag and drop behavior to supported mobile and desktop browsers. In addition, some Oracle JET components such as ojTable support drag and drop behavior through the dnd component option. For specific details, see the component’s API documentation and cookbook examples. To learn more about HTML5 drag and drop, see http://www.w3schools.com/html/html5_draganddrop.asp.

  • 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.