Oracle JET(OJET) Interview Questions and Answers
Ques 26. 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 27. 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 28. 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 29. 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 30. 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.
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?