Ques 1. What is Oracle JET (OJET)?

Oracle JET is targeted at JavaScript developers working on client-side applications. It's a collection of open source JavaScript libraries (Preact or Knockout based architectures) along with a set of Oracle contributed JavaScript libraries that make it as simple and efficient as possible to build applications that consume and interact with Oracle products and services, especially Oracle Cloud services.

Ques 2. What are the architectures Oracle JET(OJET) supports?

As of March, 2023, there are two architecture OJET supports:

• Virtual DOM Architecture
• MVVM Architecture

Ques 3. What is Virtual DOM Architecture in OJET?

It is Preact and TypeScript based architecture. It builds app using the latest React/Preact concepts.

Ques 4. What is MVVM architecture?

It is knockout based architecture. In this architecutre, the code is using JavaScript or TypeScript.

Ques 5. What are the different collections OJET has?

List of different collections under OJET:

• Data Grid
• Indexer
• List Item Layout
• List View
• Paging Control
• Refresher (Touch)
• Row Expander
• Selector
• Stream List
• Swipe Actions (Touch)
• Table
• Tree View
• Use Cases
• Waterfall Layout

Ques 6. What are the different controls are available under OJET?

List of the different controls are available under OJET:

• Avatar
• Badge
• Buttons
• Conveyor Belt
• File Picker
• Film Strip
• Image
• Menus
• Messages
• Progress
• Tags
• Toolbar
• Train

Ques 7. What are the different forms are available under OJET?

List of the different forms are available under OJET:

• Checkboxset
• Color Palette
• Color Spectrum
• Form Layout
• Input DateTime
• Input Number
• Input Password
• Input Search
• Input Text
• Label
• Label Value
• Radioset
• Select & Combobox
• Slider
• Switch
• Text Area
• User Assistance
• Validation

Ques 8. What are the different Frameworks are available under OJET?

List of the different Frameworks are available under OJET:

• Animation
• Binding and Control Flow
• Busy Context
• CSS Utilities
• CSS Variables
• Common Model
• Core Router
• Data Provider
• Deferred Rendering
• Module
• Responsive Behaviors
• Switcher
• Web Components

Ques 9. What are the different Layout and Navigations are available under OJET?

List of the different Layout and Navigations are available under OJET:

Accordion

Action Card

Dialog

Drawer

Flex Layout

Grid

Masonry Layout

Navigation List

Panel

Popup

Tab Bar

Collapsible

Ques 10. What are the different Root Hiddens are available under OJET?

List of the different Root Hiddens are available under OJET:

• App Shell: Hybrid Mobile
• App Shell: Web
• Data Grid
• Form Controls in Collections
• Hidden Data Grid
• Icon Circle
• List
• Messages
• Offcanvas
• Paging Control (Anti Patterns)
• Panel
• Progress
• Responsive Layout
• Select One Spectra

Ques 11. What are the different Visualization components are available under OJET?

List of the different Visualization components are available under OJET:

• Chart
• Diagram
• Gantt
• Gauge
• Legend
• NBox
• PictoChart
• Sunburst
• Tag Cloud
• Thematic Map
• Timeline
• Treemap
• Use Cases

Ques 12. What are the needs OJET fulfills?

Oracle JET is designed to meet the following app needs:

• Add interactivity to an existing page.

• Create a new end-to-end client-side web app using JavaScript, HTML5, CSS, and best practices for responsive design.

Ques 13. What do you need to know to learn OJET?

To begin using Oracle JET, you do not need more than the basics of JavaScript, HTML, and CSS. Many developers learn about these related technologies in the process of learning Oracle JET.

Ques 14. What are the Oracle JET (OJET) features?

Oracle JET features include:

• Messaging and event services for both Model and View layers

• Validation framework that provides UI element and component validation and data converters

• Caching services at the Model layer for performance optimization of pagination and virtual scrolling

• Filtering and sorting services provided at the Model layer

• Connection to data sources through Web services, such as Representational State Transfer (REST) or WebSocket

• Management of URL and browser history using Oracle JET CoreRouter and oj-module components

• Integrated authorization through OAuth 2.0 for data models retrieved from REST Services

• Resource management provided by RequireJS

• API compatibility with Backbone.js Model, Collection, and Events classes, except for Backbone.js Underscore methods.

• JavaScript logging

• Popup UI handling

Ques 15. How to start a Web App in Oracle JET (OJET)?

Use the Oracle JET command-line interface (CLI) to scaffold an app that contains a blank template or one pre-configured Starter Template with a basic layout, navigation bar, or navigation drawer. Each Starter Template is optimized for responsive web apps. Additionally, Starter Templates support TypeScript development should you wish to create your app in TypeScript. After scaffolding, you can modify the app as needed.

1) At a command prompt, enter ojet create with optional arguments to create the Oracle JET app and scaffolding.

ojet create [directory]
            [--template={template-name:[web]|template-url|template-file}] 
            [--typescript]
            [--use-global-tooling]
            [--help]

For example, the following command creates a web app in the my-web-app directory using the web version of the navbar template:

ojet create my-web-app --template=navbar

To scaffold the web app using the same Starter Template but with support for TypeScript version 4.8.4 development, add the --typescript argument to the command:

ojet create my-web-app --template=navbar --typescript

To scaffold the web app that will use the globally-installed @oracle/oraclejet-tooling rather than install it locally in the app directory, enter the following command:

ojet create my-web-app --use-global-tooling 

2) Wait for confirmation.

Ques 16. How to serve a Web App in Oracle JET (OJET)?

Use ojet serve to run your web app in a local web server for testing and debugging. By default, the Oracle JET live reload option is enabled which lets you make changes to your app code that are immediately reflected in the browser.

At a terminal prompt, change to the app’s root directory and use the ojet serve command with optional arguments to launch the app.

ojet serve [--server-port=server-port-number --livereload-port=live-reload-port-number
            --livereload
            --sass
            --build
            --cssvars=enabled|disabled
            --theme=themename --themes=theme1,theme2,...
            --server-only
           ]

Ques 17. What are the different Oracle JET (OJET) commands?

• ojet build (component|pack)
• ojet (build|serve) --theme=<themeName>
• ojet package (component|pack)
• ojet publish (component|pack)
• ojet add (theming|platform|plugins|sass|pwa)
• ojet create theme <themeName> --basetheme=(stable|redwood)

Ques 18. What are the charts in Oracle JET(OJET)?

Charts show relationships among data and display values as lines, bars, and points within areas defined by one or more axes.

Ques 19. What is Line chart in Oracle JET (OJET)?

The Line chart displays series of data whose values are represented by lines.

Use to compare items over the same time.

Charts require data for at least two points for each member in a group. For example, a line chart over months requires at least two months. Typically a line of a specific color is associated with each group of data such as the Americas, Europe, and Asia.

Lines should not be stacked which can obscure data. To display stacked data, use area or line with area charts.

Ques 20. What is Oracle JET Model-View-ViewModel (MVVM) Architecture?

Oracle JET supports the Model-View-ViewModel (MVVM) architectural design pattern.

In MVVM, the Model represents the app data, and the View is the presentation of the data. The ViewModel exposes data from the Model to the view and maintains the app's state.

Ques 21. What are the Third Party Libraries Used by Oracle JET?

To begin using Oracle JET, you do not need to understand more than the basics of JavaScript, HTML, and CSS or the third party libraries and technologies that Oracle JET uses. In fact, many developers learn about these related technologies in the process of learning Oracle JET.

Ques 22. Provide an understanding the Web App Workflow in Oracle JET (OJET).

Oracle JET supports creating web apps from a command-line interface:

• Before you can create your first Oracle JET web app using the CLI, you must install the prerequisite packages if you haven’t already done so. For details, see Install Oracle JET Tooling.

• Then, use the Oracle JET command-line interface package (ojet-cli) to scaffold a web app containing either a blank template or a complete pre-configured app that you can modify as needed.

• After you have scaffolded the app, use the ojet-cli to build the app, serve it in a local web browser, and create a package ready for deployment.

Ques 23. What are the different folders and configurations available under Oracle JET(OJET) project structure?

The app folders contain the app and configuration files that you will modify as needed for your own app.

Ques 24. How RequireJS is linked with Oracle JET (OJET)?

Oracle JET includes RequireJS, a third party JavaScript library that you can use in your app to load only the Oracle JET libraries you need. Using RequireJS, you can also implement lazy loading of modules or create JavaScript partitions that contain more than one module.

RequireJS is a JavaScript file and module loader that simplifies managing library references and is designed to improve the speed and quality of your code.

RequireJS implements the Asynchronous Module Definition (AMD) API which provides a mechanism for asynchronously loading a module and its dependencies.

Oracle JET's modular organization enables app developers to load a subset of needed features without having to execute require() calls for each referenced object. Each Oracle JET module represents one functional area of the toolkit, and it typically defines more than one JavaScript object.

Ques 25. How to work with controls in Oracle JET (OJET)?

Oracle JET includes buttons, menus, and container elements to control user actions or display progress against a task. For HTML elements such as simple lists, you can use the standard HTML tags directly on your page, and Oracle JET will apply styling based on the app's chosen theme.

For example, you can use the oj-button element as a standalone element or include in oj-buttonset , oj-menu, and oj-toolbar container elements.

Navigation components such as oj-conveyor-belt, oj-film-strip, and oj-train use visual arrows or dots that the user can select to move backward or forward through data.

To show progress against a task in a horizontal meter, you can use the oj-progress-bar element. To show progress against a task in a circle, you can use the oj-progress-circle element.

Ques 26. How to work with forms in Oracle JET (OJET)?

Oracle JET includes classes to create responsive form layouts and components that you can add to your form to manage labels, form validation and messaging, input, and selection. The input components also include attributes to mark an input as disabled or read-only when appropriate.

Ques 27. How to work with Layout and Navigation in Oracle JET (OJET)?

Use the Oracle JET oj-accordian, oj-collapsible, oj-dialog, oj-drawer-*, oj-flex*, oj-masonry-layout, oj-navigation-list, oj-panel, oj-popup, oj-size*, and oj-tab-bar components and patterns to control the initial data display and allow the user to access additional content by expanding sections, selecting tabs, or displaying dialogs and popups.

Ques 28. What is the Area chart in Oracle JET (OJET)?

Area chart in OJET displays series of data whose values are represented by filled-in areas. Areas can be stacked or unstacked. The axis is often labeled with time periods such as months.

Ques 29. What is the Bar chart in Oracle JET (OJET)?

The Bar chart displays data as a series of rectangular bars whose lengths are proportional to the data values. Bars display vertically or horizontally and can be stacked or unstacked.

Ques 30. What is the Box Plot chart in Oracle JET (OJET)?

The Box Plot chart displays the minimum, quartiles, median, and maximum values of groups of numerical data. Groups display vertically or horizontally. You can also vary the box width to make the width of the box proportional to the size of the group.

Ques 31. What is Bubble chart in Oracle JET (OJET)?

The Bubble chart displays three measures using data markers plotted on a two-dimensional plane. The location of the markers represents the first and second measures, and the size of the data markers represents the proportional values of the third measure.

Ques 32. What is Combination chart in Oracle JET (OJET)?

The combination chart displays series of data whose values are represented by a combination of bars, lines, or filled-in areas.

Ques 33. What is Funnel chart in Oracle JET (OJET)?

The Funnel chart visually represents data related to steps in a process as a three-dimensional chart that represents target and actual values, and levels by color. The steps appear as vertical slices across a horizontal cone-shaped section. As the actual value for a given step or slice approaches the quota for that slice, the slice fills.

Ques 34. What is Line with Area chart?

The Line with Area chart displays series of data whose values are represented as lines with filled-in areas.

Use for visualizing trends in a set of values over time and comparing those values across series.

Ques 35. What is Pie chart?

The Pie chart represents a set of data items as proportions of a total. The data items are displayed as sections of a circle causing the circle to look like a sliced pie.

Use to show relationship of parts to a whole such as how much revenue comes from each product line.

Consider treemaps or sunbursts if you are working with hierarchical data or you want your visual to display two dimensions of data.

Ques 36. 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 37. 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 38. 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 39. What about OJET build Command Options for Web Apps?

Ques 40. 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.

Ques 41. 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.

Ques 42. 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 43. 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.

Ques 44. 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 45. 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 46. 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 47. 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 48. 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 49. 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 50. 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 51. 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 52. 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 53. 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 54. 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.