Mostrar u ocultar contenido en la aplicación web de Oracle JET

Introducción

El componente oj-module de Oracle JET y las clases de utilidad con capacidad de respuesta de JavaScript pueden cargar distintas vistas en función del tamaño de pantalla. Puede utilizar el componente oj-module para sustituir el contenido de una región de una página enlazando una vista y el viewModel correspondiente a un elemento.

Objetivos

Al finalizar este tutorial, habrá personalizado una aplicación web de Oracle JET para enlazar una vista y la viewModel correspondiente mediante un componente oj-module de Oracle JET y un código TypeScript ajustable.

Requisitos

Entorno de desarrollo configurado para crear aplicaciones de Oracle JET con el tiempo de ejecución de JavaScript, Node.js y la última interfaz de línea de comandos de Oracle JET instalada
Acceso a Oracle JET Developer Cookbook
Finalización del tutorial anterior en esta ruta de aprendizaje para que haya creado la carpeta JET_Web_Application
La aplicación finalizada jet_web_application_responsea_design_final.zip se ha descargado de manera opcional

Tarea 1: Adición del componente de módulo a la vista

Defina la vista y la viewModel correspondiente en el componente oj-module de Oracle JET mediante el objeto de configuración.

Navegue al directorio JET_Web_Application/src/ts/views y abra el archivo dashboard.html en un editor.
Busque el elemento div con id="activityItemsContainer". En div vacío, agregue un contenedor div que incluya un elemento HTML personalizado oj-module con el atributo config que define la región de navegación.
```
<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <div id="container">
    <oj-module config="[[moduleConfig]]"></oj-module>
  </div>
</div>
```
Guarde el archivo dashboard.html.

El código debe ser similar a final-dashboard-html.txt.

Tarea 2: Actualización de la lista de módulos importados en ViewModel

En la parte superior del archivo dashboard.ts, importe los módulos que admiten los componentes de Oracle JET.

Navegue al directorio JET_Web_Application/src/ts/viewModels y abra el archivo dashboard.ts en un editor.

Después del módulo ojlistview, agregue los tres módulos de utilidades HTML con capacidad de respuesta JET y el módulo ojmodule-element.

import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";
import * as storeData from "text!../store_data.json";
import "ojs/ojlistview";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import * as HtmlUtils from "ojs/ojhtmlutils";
import "ojs/ojmodule-element";

Guarde el archivo dashboard.ts.

El bloque de importación debe ser similar a import-block-ts.txt.

Tarea 3: agregar el código para la carga ajustable en ViewModel

Desea cargar contenido diferente para diferentes tamaños de pantalla en un diseño ajustable. Puede utilizar oj-module para cargar distintas vistas mediante un observable, una consulta de medios o una consulta de medios personalizada observable.

Abra Oracle JET Cookbook y vaya a la página inicial de Cookbook. Haga clic en Marco en la barra de menús, haga clic en Comportamientos de respuesta y, a continuación, haga clic en Carga ajustable.
Puede acceder a la documentación de API para el espacio de nombres ResponsiveUtils. A continuación, desplácese a la sección Methods y lea sobre el método getFrameworkQuery.

En el archivo dashboard.ts, debajo de la declaración chartDataProvider, agregue un bloque de código de plantilla en línea para pasar al elemento HTML personalizado oj-module.

this.chartDataProvider = new MutableArrayDataProvider(this.chartData, {
      keyAttributes: "id",
});

// Define the oj-module inline template for Activity Items list
const lg_xl_view =
      '<h3 id="activityItemsHeader">Activity Items</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityItemsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>Air-Lift Tire Pump</p>" +
      "<p>Intact Bike Helmet</p>" +
      "<p>Nimbus Bike Tire</p>" +
      "<p>Refill Water Bottle</p>" +
      "<p>Swift Boys 21 Speed</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>";

El nodo de datos en línea para pantallas grandes y extragrandes se pasa a través de la variable lg_xl_view.

Debajo de la definición de la variable lg_xl_view, defina el código para transferir el nodo de datos en línea para pantallas pequeñas y medianas a través de la variable sm_md_view.

// Display this content for small and medium screen sizes
const sm_md_view =
      '<div id="sm_md" style="background-color:lightcyan; padding: 10px; font-size: 10px">' +
      '<h3 id="activityDetailsHeader">Activity Details</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityDetailsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>" +
      "</div>";

Debajo de la definición de la variable sm_md_view, defina el código para cargar la vista para diferentes tamaños de pantalla mediante una consulta de medios this.large observable.
```
// Identify the screen size and display the content for that screen size
const lgQuery = ResponsiveUtils.getFrameworkQuery(
   ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP
);

this.large = ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
this.moduleConfig = ko.pureComputed(() => {
   let viewNodes = HtmlUtils.stringToNodeArray(
   this.large() ? lg_xl_view : sm_md_view
   );
   return { view: viewNodes };
});

/**
 * End of oj-module code
 */
```
Mediante la función de la utilidad HTML, puede obtener la cadena de consulta de medios de marco en la variable this.large. El código HTML de la variable lg_xl_view se carga si el valor de la cadena de consulta de medios en this.large() es igual a LG_UP, grande o superior. El código HTML de la variable sm_md_view se carga si el valor de la cadena de consulta de medios en this.large() no es igual a LG_UP.

Agregue declaraciones de tipo para large y moduleConfig a la clase.

class DashboardViewModel {
   chartTypes: Array<Object>;
   chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
   chartData: Array<Object>;
   chartDataProvider: MutableArrayDataProvider<string, {}>;
   activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
   val: ko.Observable<string>;
   large: ko.Observable<boolean>;
   moduleConfig: ko.PureComputed<any>;

Guarde el archivo dashboard.ts.

El archivo debe ser similar a final-dashboard-ts.txt.

Tarea 4: Ejecución de la aplicación web

En la ventana de terminal, cambie al directorio JET_Web_Application y ejecute la aplicación.
```
$ ojet serve
```
Las herramientas de Oracle JET ejecutan la aplicación web en un explorador web local donde puede ver el contenido del panel de control.

Descripción de la ilustración final-app.png

Para mostrar el contenido de la variable sm_md_view, ajuste la pantalla a un tamaño pequeño o medio. Observe la lista acortada de elementos en la cabecera Activity Details, que aparece resaltada como cian ligero.

Descripción de la ilustración Small-screen.png

Para mostrar el contenido en la variable lg_xl_view, cambie el tamaño de la pantalla a grande o extra grande.

Descripción de la ilustración Large-screen.png
En la ventana de terminal, pulse Ctrl+C y, si se le solicita, introduzca y para salir del trabajo por lotes de herramientas de Oracle JET.
Cierre la ventana o el separador del explorador.
La aplicación finalizada con funcionalidad de diseño ajustable debe ser similar a jet_web_application_response_design_final.zip.

Tarea 5: (Opcional) Ejecutar una aplicación web desde una aplicación restaurada

Si desea ejecutar la aplicación web de Oracle JET completa desde el código proporcionado, puede restaurar la aplicación desde el archivo de almacenamiento descargado. Para trabajar con una aplicación Oracle JET stripped and zipped, debe restaurar las dependencias del proyecto, incluidas las herramientas de Oracle JET y las bibliotecas y los módulos necesarios, en la aplicación extraída.

Descargue el archivo jet_web_application_responsive_design_final.zip y extraiga el contenido de la aplicación finalizada en la carpeta jet_web_application_responsive_design_final.
En la ventana de terminal, navegue hasta la carpeta jet_web_application_responsive_design_final y restaure la aplicación web Oracle JET.
```
$ ojet restore
```
Espere la confirmación.
```
$ Restore complete
```
La aplicación está lista para ejecutarse.
Ejecute la aplicación web y realice la prueba en el explorador.
```
$ ojet serve
```
Cierre la ventana o separador del explorador que muestra la aplicación web en ejecución.
En la ventana de terminal, pulse Ctrl+C y, si se le solicita, introduzca y para salir del trabajo por lotes de herramientas de Oracle JET.

Más recursos de aprendizaje

Explore otras prácticas en docs.oracle.com/learn o acceda a contenido de aprendizaje más gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en un explorador de formación de Oracle.

Para obtener documentación sobre los productos, visite Oracle Help Center.

Título e Información de Copyright

Show or hide content in the Oracle JET web application

F53136-01

February 2022