Oracle JET(OJET) Interview Questions and Answers
Experienced / Expert level questions & answers
Ques 1. What are the internal architecture of OJET?
To support the MVVM design, Oracle JET is built upon a modular framework that includes a collection of third-party libraries and Oracle-provided files, scripts, and libraries.
The Oracle JET Common Model and Collection Application Programming Interface (API) implements the model layer. The API includes the following JavaScript objects:
Model: Represents a single record data from a data service such as a RESTful web service
Collection: Represents a set of data records and is a list of Model objects of the same type
Events: Provides methods for event handling
KnockoutUtils: Provides methods for mapping the attributes in an Model or Collection object to Knockout observables for use with component view models.
To implement the View layer, Oracle JET provides a collection of UI components implemented as HTML5 custom elements, ranging from basic buttons to advanced data visualization components such as charts and data grids.
Knockout.js implements the ViewModel and provides two-way data binding between the view and model layers.
Ques 2. What are the Oracle JET Visual Component Features?
Oracle JET visual components include the following features and standards compliance:
Compliance with Oracle National Language Support (NLS) standards (i18n) for numeric, currency, and date/time formatting
Built-in theming supporting the Oracle Redwood theme style specifications and implementing the Oracle Redwood Design System
Support for Oracle software localization standards, l10n, including:
Lazy loading of localized resource strings at run time
Oracle translation services formats
Bidirectional locales (left-to-right, right-to-left)
Web Content Accessibility Guidelines (WCAG) 2.1. In addition, components provide support for high contrast and keyboard-only input environments.
Gesture functionality by touch, mouse, and pointer events where appropriate
Support for Oracle test automation tooling
Responsive layout framework
Ques 3. What's Included in Oracle JET (OJET)?
The Oracle JET zip distribution includes Oracle JET libraries and all third party libraries that the toolkit uses.
Specifically, Oracle JET includes the following files and libraries:
CSS and CSS files for the Redwood theme
Minified and debug versions of the Oracle JET libraries
Data Visualization Tools (DVT) CSS and JavaScript
Knockout and Knockout Mapping libraries
jQuery libraries
RequireJS, RequireJS text plugin, and RequireJS CSS plugin
js-signals
es6-promise polyfill
Hammer.js
Oracle JET components use Hammer.js internally for gesture support. Do not add to Oracle JET components or their associated DOM nodes.
Oracle JET dnd-polyfill HTML5 drag and drop polyfill
proj4js library
webcomponentsjs polyfill
Ques 4. What about OJET build Command Options for Web Apps?
Use the ojet build command with optional arguments to build a development version of your web app before serving it to a browser.
The following table describes the available options and provides examples for their use.
| Option | Description |
|---|---|
--theme | Theme to use for the app. The theme defaults to redwood. You can also enter a different themename for a custom theme as described in About CSS Variables and Custom Themes in Oracle JET. |
--themes | Themes to include in the app, separated by commas. If you don’t specify the --theme flag as described above, Oracle JET will use the first element that you specify in --themes as the default theme. |
--cssvars | Injects a Redwood theme CSS file that supports working with CSS custom properties when you want to override CSS variables to customize the Redwood theme, as described in About CSS Variables and Custom Themes in Oracle JET. |
--sass | Manages Sass compilation. If you add Sass and specify the --theme or --themes option, Sass compilation occurs by default and you can use --sass=false or --no-sass to turn it off. If you add Sass and do not specify a theme option, Sass compilation will not occur by default, and you must specify --sass=true or --sass to turn it on. |
Ques 5. What about Oracle JET (OJET) serve Command Options and Express Middleware Functions?
Use ojet serve to run your web app in a local web server for testing and debugging.
The following table describes the available ojet serve options and provides examples for their use.
Oracle JET tooling uses Express, a Node.js web app framework, to set up and host the web app when you run ojet serve. If the ready-to-use ojet serve options do not meet your requirements, you can add Express configuration options or write Express middleware functions in Oracle JET’s before_serve.js hook point. For an example that demonstrates how to add Express configuration options, see Serve a Web App to a HTTPS Server Using a Self-signed Certificate, and, for an example that uses an Express middleware function, see Serve a Web App Using Path-based Routing.
The before_serve hook point provides options to determine whether to replace the existing middleware or instead prepend and append a middleware function to the existing middleware. Typically, you’ll prepend a middleware function (preMiddleware) that you write if you want live reload to continue to work after you serve your web app. Live reload is the first middleware that Oracle JET tooling uses. You must use the next function as an argument to any middleware function that you write if you want subsequent middleware functions, such as live reload, to be invoked by the Express instance. In summary, use one of the following arguments to determine when your Express middleware function executes:
- preMiddleware: Execute before the default Oracle JET tooling middleware. The default Oracle JET tooling middleware consists of connect-livereload, serve-static, and serve-index, and executes in that order.
- postMiddleware: Execute after the default Oracle JET tooling middleware.
- middleware: Replaces the default Oracle JET tooling middleware. Use if you need strict control of the order in which middleware runs. Note that you will need to redefine all the default middleware that was previously added by Oracle JET tooling.
| Option | Description |
|---|---|
server-port | Server port number. If not specified, defaults to 8000. |
livereload-port | Live reload port number. If not specified, defaults to 35729. |
livereload | Enable the live reload feature. Live reload is enabled by default (--livereload=true). Use --livereload=false or --no-livereload to disable the live reload feature. Disabling live reload can be helpful if you’re working in an IDE and want to use that IDE’s mechanism for loading updated apps. You can also configure the interval at which the live reload feature polls the Oracle JET project for updates by configuring a value for the watchInterval property in the oraclejetconfig.json file. The default value is 1000 milliseconds. |
build | Build the app before you serve it. By default, an app is built before you serve it (--build=true). Use --build=false or --no-build to suppress the build if you’ve already built the app and just want to serve it. |
theme | Theme to use for the app. The theme defaults to redwood. You can also enter a different themename for a custom theme as described in About CSS Variables and Custom Themes in Oracle JET. |
themes | Themes to use for the app, separated by commas. If you don’t specify the --theme flag as described above, Oracle JET will use the first element that you specify in --themes as the default theme. Otherwise Oracle JET will serve the app with the theme specified in --theme. |
--cssvars | Injects a Redwood theme CSS file that supports working with CSS custom properties when you want to override CSS variables to customize the Redwood theme. For details about theming with CSS variables, see About CSS Variables and Custom Themes in Oracle JET. |
sass | Manages Sass compilation. If you add Sass and specify the --theme or --themes option, Sass compilation occurs by default and you can use --sass=false or --no-sass to turn it off. If you add Sass and do not specify a theme option, Sass compilation will not occur by default, and you must specify --sass=true or --sass to turn it on. |
server-only | Serves the app, as if to a browser, but does not launch a browser. Use this option in cloud-based development environments so that you can attach your browser to the app served by the development machine. |
Ques 6. What about the Script Hook Points for Web Apps in Oracle JET (OJET)?
The Oracle JET hooks system defines various script trigger points, also called hook points, that allow you to customize the create, build, serve, package and restore workflow across the various command-line interface processes. Customization relies on script files and the script code that you want to trigger for a particular hook point.
The following table identifies the hook points and the workflow customizations they support in the Oracle JET tooling create, build, serve, and restore processes. Unless noted, hook points for the build and serve processes support both debug and release mode.
| Hook Point | Supported Tooling Process | Description |
|---|---|---|
after_app_create | create | This hook point triggers the script with the default name after_app_create.js immediately after the tooling concludes the create app process. |
after_app_restore | restore | This hook point triggers the script with the default name after_app_restore.js immediately after the tooling concludes the restore app process. |
before_build | build | This hook point triggers the script with the default name before_build.js immediately before the tooling initiates the build process. |
before_release_build | build (release mode only) | This hook point triggers the script with the default name before_release_build.js before the minification step and the requirejs bundling step occur. |
before_app_typescript | build / serve | This hook point triggers the script with the default name before_app_typescript.js after the build process or serve process steps occur. Use the hook to update, add or remove TypeScript compiler options defined by your app's tsconfig.json compiler configuration file. The hook system passes your reference to the modified tsconfig object to the TypeScript compiler. A script for this hook point can only be used with a TypeScript app. |
after_app_typescript | build / serve | This hook point triggers the script with the default name after_app_typescript.js after the build process or serve process steps occur and immediately after the before_app_typescript hook point executes. This hook provides an entry point for apps that require further processing, such as compiling generated .jsx output using babel. A script for this hook point can only be used with a TypeScript app. |
before_component_typescript | build / serve | This hook point triggers the script with the default name before_component_typescript.js after the build process or serve process steps occur. Use the hook to update, add or remove TypeScript compiler options defined by your app's tsconfig.json compiler configuration file. The hook system passes your reference to the modified tsconfig object to the TypeScript compiler. A script for this hook point can only be used with a TypeScript app. |
after_component_typescript | build / serve | This hook point triggers the script with the default name after_component_typescript.js after the build process or serve process steps occur and immediately after the before_component_typescript hook point executes. This hook provides an entry point for apps that require further processing, such as compiling generated .jsx output using babel. A script for this hook point can only be used with a TypeScript app. |
before_optimize | build / serve (release mode only) | This hook point triggers the script with the default name before_optimize.js before the release mode build/serve process minifies the content. |
before_component_optimize | build / serve | This hook point triggers the script with the default name before_component_optimize.js before the build/serve process minifies the content. A script for this hook point can be used to modify the build process specifically for a project that defines a Web Component. |
after_build | build | This hook point triggers the script with the default name after_build.js immediately after the tooling concludes the build process. |
after_component_create | build | This hook point triggers the script with the default name after_component_create.js immediately after the tooling concludes the create Web Component process. A script for this hook point can be used to modify the build process specifically for a project that defines a Web Component. |
after_component_build | build (debug mode only) | This hook point triggers the script with the default name after_component_build.js immediately after the tooling concludes the Web Component build process. A script for this hook point can be used to modify the build process specifically for a project that defines a Web Component. |
before_serve | serve | This hook point triggers the script with the default name before_serve.js before the web serve process connects to and watches the app. |
after_serve | serve | This hook point triggers the script with the default name after_serve.js after all build process steps complete and the tooling serves the app. |
before_watch | serve | This hook point triggers the script with the default name before_watch.js after the tooling serves the app and before the tooling starts watching for app changes. |
after_watch | serve | This hook point triggers the script with the default name after_watch.js after the tooling starts the watch and after the tooling detects a change to the app. |
| after_component_package | package | This hook point triggers the script with the default name after_component_package.js immediately after the tooling concludes the component package process. |
| before_component_package | package | This hook point triggers the script with the default name before_component_package.js immediately before the tooling initiates the component package process. |
Ques 7. How to work with responsive design in Oracle JET (OJET) using media queries?
CSS3 media queries use the @media at-rule, media type, and expressions that evaluate to true or false to define the cases for which the corresponding style rules will be applied. Media queries form the basis for Oracle JET’s responsive classes.
<style>@media media_types (expression){ /* media-specific rules */}</style>
For example:
@media (max-width: 767px){ .facet_sidebar { display: none; }}
Ques 8. What are the defined screen size for OJET responsive design?
Oracle JET defines CSS3 media queries and style class custom properties to define screen widths for the themes included with Oracle JET.
| Width and Custom Property Name | Redwood Theme: Default Range in Pixels | Device Examples |
|---|---|---|
small $screenSmallRange | 0-599 | phones |
medium $screenMediumRange | 600-1023 | tablet portrait |
large $screenLargeRange | 1024-1439 | tablet landscape, desktop |
extra large $screenXlargeRange | 1440 and up | large desktop |
Ques 9. How to make responsive design using Oracle JET Flex, Grid, Form, and Responsive Helper Class Naming Convention?
The Oracle JET flex, form, grid, and responsive style classes use the same naming convention which can help you identify the style size, function, and number of columns the class represents.
Each class follows the same format as shown below:
oj-size-function-[1-12]columns
Size can be one of sm, md, lg, xl, and print and are based on the media queries described in Media Queries. Oracle JET will apply the style to the size specified and any larger sizes unless function is defined as only. For example:
oj-lg-hide hides content on large and extra-large screens.
oj-md-only-hide hides content on medium screens. The style has no effect on other screen sizes.
Ques 10. What is Polar chart?
The polar chart displays series of data on a polar coordinate system. The polar coordinate system can be used for bar, line, area, combination, scatter, and bubble charts. Polygonal grid shape (commonly known as radar) is supported for polar line and area charts.
Use to display data with a cyclical x-axis, such as weather patterns over months of the year, or for data where the categories in the x-axis have no natural ordering, such as performance appraisal categories.
Ques 11. What is Pyramid chart?
The pyramid chart displays values as slices in a pyramid. The area of each slice represents its value as a percentage of the total value of all slices.
Use to display hierarchical, proportional and foundation-based relationships, process steps, organizational layers, or topics interconnections.
Ques 12. What is Range chart?
The range chart displays a series of data whose values are represented either as an area or bar proportional to the data values.
Use to display a range of temperatures for each day of a month for a city.
Ques 13. What is Scatter chart?
The Scatter chart displays two measures using data markers plotted on a two-dimensional plane.
Use to show correlation between two different kinds of data values, such as sales and costs for top products. Scatter charts are especially useful when you want to see general relationships among a number of items.
Ques 14. What is Spark chart?
The Spark charts display trends or variations as a line, bar, floating bar, or area. Spark charts are simple and condensed.
Use to provide additional context to a data-dense display. Sparkcharts are often displayed in a table, dashboard, or inline with text.
Ques 15. What is Stock chart?
The Stock charts display stock prices and, optionally, the volume of trading for one or more stocks. When any stock or candlestick chart includes the volume of trading, the volume appears as bars in the lower part of the chart.
Ques 16. What are Guages?
Gauges focus on a single value, displayed in relation to minimum, maximum, or threshold values.
The Gauge types are:
- LED
- Rating
- Status Meter
Ques 17. What is LED Gauge?
Graphically depicts a measurement, such as a key performance indicator (KPI). Several styles of shapes are available, including round or rectangular shapes that use color to indicate status, and triangles or arrows that point up, left, right, or down in addition to the color indicator.
Use to highlight a specific metric value in relation to its threshold.
Ques 18. What is Rating Gauge?
Displays and optionally accepts input for a metric value.
Use to show ratings for products or services, such as the star rating for a movie.
Ques 19. What is Status Meter Gauge?
Displays a metric value on a horizontal, vertical, or circular axis. An inner rectangle shows the current level of a measurement against the ranges marked on an outer rectangle. Optionally, status meters can display colors to indicate where the metric value falls within predefined thresholds.
Most helpful rated by users:
- What are the architectures Oracle JET(OJET) supports?
- How to work with Layout and Navigation in Oracle JET (OJET)?
- What are the Oracle JET (OJET) features?
- What is Virtual DOM Architecture in OJET?
- What is Oracle JET (OJET)?