En esta publicación, estoy compartiendo cómo podemos usar Oracle JET Cookbook para comprender los componentes básicos de la interfaz de usuario y cómo podemos copiar y usar el código del libro de recetas. Aquí estoy usando JDeveloper 12.1.3 para crear la aplicación de demostración de componentes de Oracle JET.

En la publicación anterior, expliqué cómo  crear una aplicación JET usando JDeveloper . Aquí estoy usando la misma aplicación para mostrar la demostración de los componentes de JET. El libro de cocina de Oracle JET tiene muchas recetas que podemos probar en nuestra aplicación para aprender más sobre el patrón de codificación y la estructura del kit de herramientas.

Aquí puede acceder al  libro de recetas de Oracle JET

Ahora abra su aplicación NavDrawer JET en JDeveloper, ejecútela y podrá ver la página del panel abierta en el navegador

Libro de recetas de Oracle JET

Puede ver que esta página le dice la ruta del archivo a editar en caso de que desee actualizar su contenido

En JDeveloper, seleccione Proyecto, navegue hasta  Contenido web -> js  y expanda las  vistas  y la  carpeta viewModels  . Aquí puede ver varios archivos HTML y sus correspondientes archivos javascript. En esta publicación, estoy usando el módulo del tablero para mostrar la demostración de componentes JET.

Libro de recetas de Oracle JET

Ahora abra el   archivo dashboard.html  y  dashboard.js en el editor. Trabajaremos en estos dos archivos para aprender sobre varios componentes de JET

Componente oj-input-text (texto de entrada)

Vaya a Oracle JET Cookbook y navegue hasta  la página de demostración de texto de entrada

Copie este código de  demo.html

Libro de recetas de Oracle JET

y péguelo en  dashboard.html , puede ver que este fragmento de código contiene una etiqueta HTML para mostrar una etiqueta, un texto de entrada y su valor en el elemento span

1
2
3
4
5
6
7
<oj-label for="text-input">oj-input-text component</oj-label>
<oj-input-text id="text-input" value="{{value}}"></oj-input-text>
         
          <br/><br/>
         
<span class="oj-label">Current component value is: </span>
<span data-bind="text: value"></span>

Ahora necesitamos establecer el  valor  de este componente de texto de entrada en el archivo dashboard.js, así que copie esta línea

Libro de recetas de Oracle JET

y péguelo en el archivo dashboard.js en  var self = this;  línea y no olvide agregar la declaración de texto de entrada (ojs / ojinputtext) en definir bloque, de lo contrario no aparecerá en la página

01
02
03
04
05
06
07
08
09
10
/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojinputtext'], function (oj, ko, $) {
    function DashboardViewModel() {
        var self = this;
        this.value = ko.observable("Green");
.
.
.

Aquí puede ver que el objeto ko de Knockout js   está configurando el valor del componente de texto de entrada JET, ahora ejecute y verifique la aplicación

Libro de recetas de Oracle JET

Componente oj-select-one (Seleccione una opción)

Vaya al libro de recetas de Oracle JET y navegue para  seleccionar una página de demostración de elección

Copie el código de  demo.html  y péguelo en  dashboard.html.  Aquí va el código de  dashboard.html

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
<div class="oj-hybrid-padding">
    <h1>Dashboard Content Area</h1>
    <div>
        <oj-label for="basicSelect">Select One</oj-label>
          
        <oj-select-one id="basicSelect" value="{{val}}" style="max-width:20em">
            <oj-option value="IE">Internet Explorer</oj-option>
            <oj-option value="FF">Firefox</oj-option>
            <oj-option value="CH">Chrome</oj-option>
            <oj-option value="OP">Opera</oj-option>
            <oj-option value="SA">Safari</oj-option>
        </oj-select-one>
          
        <br/>
          
        <oj-label for="curr-value">Current selected value is</oj-label>
          
        <span id="curr-value">
            <oj-bind-text value="[[val]]"></oj-bind-text></span>
    </div>
</div>

Puede comprender por el código anterior que una opción seleccionada y sus elementos se definen utilizando etiquetas HTML JET.Ahora establezca el valor inicial de este componente en  el  archivo dashboard.js y no olvide agregar una declaración de selección de una opción  (ojs / ojselectcombobox)  en definir bloque

1
2
3
4
5
6
7
8
9
/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojselectcombobox'], function (oj, ko, $) {
    function DashboardViewModel() {
        var self = this;
        this.val = ko.observable("CH");
.
.

Ejecutar y verificar la aplicación, puede ver una opción seleccionada en la página y su valor se establece mediante la   variable val

Libro de recetas de Oracle JET

Componente oj-radioset (grupo de botones de opción)

Vaya a Oracle JET Cookbook y navegue a  la página de demostración del equipo de radio

Copie el formulario completo de  demo.html  y péguelo en la   página dashboard.html , este formulario contiene un radio set y un botón adicional que cambia el valor del radio set. Aquí también aprenderá sobre la acción de los botones.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="oj-hybrid-padding">
    <h1>Dashboard Content Area</h1>
    <div id="formId" class="oj-form">
        <oj-label id="mainlabelid">Colors</oj-label>
          
        <!-- You need to set the labelled-by attribute
               to make this accessible.
               role="radiogroup" is set for you by oj-radioset. -->
          
        <oj-radioset id="radiosetBasicDemoId" labelled-by="mainlabelid" value="{{currentColor}}">
            <!-- This is an example of how to use oj-bind-for-each, along with oj-bind-text to
                   iterate over an array of objects-->
            <oj-bind-for-each data="[[colorOptions]]">
                <template>
                    <oj-option id="[[$current.data.id]]" value="[[$current.data.value]]">
                        <oj-bind-text value="[[$current.data.color]]"></oj-bind-text>
                    </oj-option>
                </template>
            </oj-bind-for-each>
        </oj-radioset>
          
        <br/>
          
        <span>Current component value is: </span>
          
        <span id="curr-value" data-bind="text: currentColor"></span>
          
        <br/>
          
        <br/>
        <div id='buttons-container'>
            <oj-button id='inputButton4' on-oj-action='[[setModelCurrentColorToBlue]]'>Set model currentColor to blue</oj-button>
        </div>
    </div>
</div>

Ahora use este código en el archivo dashboard.js, que completa el conjunto de radio de una matriz observable y un método que se llama al hacer clic en el botón. Céntrese en los nombres de las variables y comprenderá cómo se hace referencia a ellos desde los componentes de la interfaz de usuario.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojradioset', 'ojs/ojbutton', 'ojs/ojlabel'], function (oj, ko, $) {
    function DashboardViewModel() {
        var self = this;
        // this variable keeps track of the currentColor.
        // It's a Knockout observable which
        // means it is a two-way binding.
        self.currentColor = ko.observable("red");
         
        //Array that populates Radio Set
        self.colorOptions = ko.observableArray([
        {id : "blueopt", value : "blue", color : "Blue"},
        {id : "greenopt", value : "green", color : "Green"},
        {id : "redopt", value : "red", color : "Red"},
        {id : "limeopt", value : "lime", color : "Lime"},
        {id : "aquaopt", value : "aqua", color : "Aqua"},]);
         
        //Method that is called on button click
        self.setModelCurrentColorToBlue = function () {
            alert("Set model currentColor to blue.");
            self.currentColor("blue");
            return true;
        }
.
.
.

Ahora ejecute la aplicación y verifique la funcionalidad del botón.

Libro de recetas de Oracle JET

Componente oj-table (tabla JET)

Vaya a Oracle JET Cookbook y navegue a la  página de demostración de la tabla JET

Lea la receta atentamente e intente comprender el código. Aquí, la tabla JET se completa con ArrayDataProvider. Aquí va el código de  dashboard.html

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
<oj-table id='table' aria-label='Departments Table'
                                        data='[[dataprovider]]'
                                        selection-mode='{"row": "multiple", "column": "multiple"}'
                                        dnd='{"reorder": {"columns": "enabled"}}'
                                        scroll-policy='loadMoreOnScroll'
                                        scroll-policy-options='{"fetchSize": 10}'
                                        columns='[{"headerText": "Department Id",
                                                   "field": "DepartmentId",
                                                   "headerClassName": "oj-sm-only-hide",
                                                   "className": "oj-sm-only-hide",
                                                   "resizable": "enabled"},
                                                  {"headerText": "Department Name",
                                                   "field": "DepartmentName",
                                                   "resizable": "enabled"},
                                                  {"headerText": "Location Id",
                                                   "field": "LocationId",
                                                   "headerClassName": "oj-sm-only-hide",
                                                   "className": "oj-sm-only-hide",
                                                   "resizable": "enabled"},
                                                  {"headerText": "Manager Id",
                                                   "field": "ManagerId",
                                                   "resizable": "enabled"}]'
                                        style='width: 100%; height: 300px;'>
</oj-table>

y  dashboard.js  código es la siguiente, Aquí  deptArray  se pasa en  ArrayDataProvider  a los datos de la tabla pueblan JET.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29<