83.3K+Descargar
Software empresarial · Nuevo recurso

Sistema de diseño Oracle Redwood.

Estudia la paleta real, los roles semánticos, el espaciado y los límites de densidad de Oracle JET 19 Redwood con una hoja de revisión de existencias editable y original.

Descargar OpenDesign Descargar DESIGN.md
Guía de OpenDesign8 capítulos45 entradas de referenciaGuía de aplicación original
01

Vista previa de la interfaz del sistema de diseño Oracle Redwood

Edite las cantidades, revise la validación, ordene y filtre sin perder el borrador válido.

Revise un borrador local de suministrosAbrir ejemplo completo
Implementación original para navegador que usa variables públicas reales del tema Redwood de JET 19; no utiliza el entorno de ejecución nativo de JET JavaScript. · Referencia de implementación
02

Referencia de diseño del sistema de diseño Oracle Redwood

Declaraciones públicas base de la hoja de estilos Redwood de JET 19.0.0 fijada. El comportamiento original de la hoja de trabajo y su diseño se identifican por separado; se excluyen las variables privadas y las anulaciones invertidas posteriores.

Funciones semánticas base de Redwood

Fuente
Nombre / ReglaValor / ConfiguraciónUso
--oj-core-text-color-primaryrgb(var(--oj-palette-neutral-rgb-190))Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor.
--oj-core-text-color-secondaryrgba(var(--oj-palette-neutral-rgb-190), .70)Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor.
--oj-core-text-color-disabledrgba(var(--oj-palette-neutral-rgb-190), .4)Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor.
--oj-core-bg-color-contentrgb(var(--oj-palette-neutral-rgb-0))Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor.
--oj-body-bg-colorrgb(var(--oj-palette-neutral-rgb-10))Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor.
--oj-core-divider-colorrgba(var(--oj-palette-neutral-rgb-190),.12)Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor.
--oj-core-focus-border-colorrgb(var(--oj-palette-neutral-rgb-190))Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor.

Valores de la paleta usados en la hoja de trabajo

Fuente
Nombre / ReglaValor / ConfiguraciónUso
--oj-palette-neutral-rgb-0255, 255, 255Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos.
--oj-palette-neutral-rgb-10251, 249, 248Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos.
--oj-palette-neutral-rgb-20245, 244, 242Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos.
--oj-palette-neutral-rgb-19022, 21, 19Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos.
--oj-palette-brand-rgb-1200, 104, 140Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos.
--oj-palette-info-rgb-20237, 246, 249Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos.
--oj-palette-danger-rgb-120179, 49, 31Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos.
--oj-palette-success-rgb-20235, 248, 222Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos.
--oj-palette-success-rgb-14053, 86, 23Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos.

Espaciado y formas

Fuente
Nombre / ReglaValor / ConfiguraciónUso
--oj-core-spacing-1x.25remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-2x.5remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-3x.75remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-4x1remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-5x1.25remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-6x1.5remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-7x1.75remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-8x2remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-9x2.25remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-10x2.5remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-11x2.75remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-spacing-12x3remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-border-radius-sm2pxEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-border-radius-md.25remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-border-radius-lg.375remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.
--oj-core-border-radius-xl.5remEscala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET.

Tipografía del cuerpo y dimensiones de los controles

Fuente
Nombre / ReglaValor / ConfiguraciónUso
--oj-typography-body-xs-font-size0.75remDeclaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación.
--oj-typography-body-sm-font-size0.859remDeclaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación.
--oj-typography-body-md-font-size1remDeclaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación.
--oj-typography-body-lg-font-size1.125remDeclaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación.
--oj-typography-body-xl-font-size1.25remDeclaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación.
--oj-typography-body-md-line-height1.25Declaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación.
--oj-button-height2.75remDeclaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación.
--oj-button-border-radiusvar(--oj-core-border-radius-md)Declaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación.

Límites de los estilos públicos

Fuente
Nombre / ReglaValor / ConfiguraciónUso
Global theme overrides:root declarations after JET CSSUna anulación en la raíz afecta a todos los elementos que usan esa variable pública.
Instance stylingA class scoped to the target componentLimite el alcance de una variable pública si solo necesita cambiar un componente nativo.
Redwood baseTracks Oracle visual changesElija esta opción si su objetivo es reproducir el aspecto de Oracle; las actualizaciones pueden cambiar los valores heredados.
Stable baseAlternative for a distinct custom themeNo lo presente como idéntico a Redwood ni dé por sentado que todas las capacidades de inversión y escalado coinciden.
Private variables--oj-private-* excludedEl ejemplo no basa su referencia pública en mecanismos internos privados.
03

Guía completa del sistema de diseño Oracle Redwood

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

DESIGN-oracle-redwood.md

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

Descargar la guía

Límites entre el sistema de diseño Oracle Redwood y las versiones de JET

Identifique con precisión la capa de implementación

Redwood abarca más que una biblioteca de componentes descargable. Esta guía usa los fundamentos públicos de CSS incluidos con Oracle JET 19.0.0, una referencia concreta que se puede inspeccionar. La vista previa es una hoja de revisión de existencias original de HTML/CSS que usa esos valores; no crea instancias de oj-table, oj-input-number ni de ningún otro elemento personalizado nativo de JET. La declaración sobre el entorno de ejecución es explícita para que nadie confunda los fundamentos visuales con un SDK completo para aplicaciones de Oracle.

De esta guía de OpenDesign
  • Fuente de referencia: CSS de Oracle JET 19 Redwood.
  • Entorno de ejecución de la vista previa: HTML/CSS/JavaScript original en navegador nativo.
  • Datos y reglas de validación: ejemplo local original.

Mantenga por separado la adopción de aplicaciones de Oracle

Adoptar Redwood en un producto Oracle SaaS, configurar una aplicación JET y tomar como referencia un tema público son actividades distintas. El ejemplo no modifica ningún tenant, no se conecta a registros de inventario ni realiza una migración del producto. El documento local completo es útil para estudiar las reglas visuales y el modelo de estado, mientras que una aplicación JET real debe seguir la configuración de la versión del framework y la documentación de sus componentes nativos.

Roles semánticos y valores de paleta del sistema de diseño Oracle Redwood

Resuelve correctamente las declaraciones base

La referencia toma la primera declaración, o declaración base, de cada variable pública de la hoja de estilos fijada. Los ámbitos invertidos o de densidad que aparecen más adelante pueden redefinir el mismo nombre. Por eso, una extracción ingenua que tome la última coincidencia podría etiquetar un color de texto invertido como el color de texto claro predeterminado. La guía mantiene explícito el ámbito base y excluye los hooks --oj-private-* de la referencia publicada.

Distingue los canales sin procesar de los valores de color

Las variables de paleta, como --oj-palette-brand-rgb-120, contienen tres canales RGB, mientras que los roles semánticos los envuelven con rgb() o rgba(). La acción original usa los canales de marca mediante rgb(), el texto usa core-text-color-primary y la superficie de la tarjeta usa core-bg-color-content. Copiar la cadena de canales sin procesar directamente en background-color produciría un valor no válido CSS, aunque los números parezcan plausibles.

Espaciado, tipografía y densidad del sistema de diseño Oracle Redwood

Usa la escala de fundamentos concreta

La secuencia pública core-spacing avanza en pasos de 4px, desde 1x hasta 12x. Los roles de borde pequeño, mediano, grande y extragrande son distintos, y la altura del botón es una variable de componente independiente. La hoja de trabajo usa estos valores reales cuando corresponde e identifica el encabezado de 32px, la transformación adaptable de la tabla y la medida exterior de 1120px como decisiones originales de composición.

No mezcles valores específicos de cada densidad

En esta hoja de estilos fijada, el tamaño base de body-md es 1rem, con una altura de línea de 1.25; los selectores posteriores pueden exponer valores escalados en píxeles. La guía registra el valor base sin dar a entender que todos los contextos de Redwood deban usar un único tamaño calculado. El ejemplo del navegador usa Arial como fuente de reserva, sin afirmar que Oracle Sans esté cargada. Una aplicación JET nativa debe probar en conjunto la densidad, el tema y la plataforma que haya seleccionado.

Estructura de hoja de trabajo inspirada en el sistema de diseño Oracle Redwood

Haz comprensibles los datos y las acciones

Cada fila original nombra un material de estudio, describe su unidad, compara las existencias actuales con un mínimo y ofrece un campo para introducir una cantidad. Una etiqueta de estado de revisión indica si ese artículo se incluye en el borrador local. El resumen cuenta las unidades de todo el borrador, incluidas las filas ocultas por el filtro. Son registros ficticios de ejemplo, no pruebas de inventario ni recomendaciones de compra.

Mantén estable la identidad de las filas al ordenar

Validación de cantidades inspirada en el sistema de diseño Oracle Redwood

Rechaza los valores que incumplan la regla local indicada

El campo original para introducir cantidades acepta números enteros de 0 a 99. Los valores vacíos, negativos, fraccionarios o fuera de ese intervalo muestran un error en línea y desactivan la acción de revisión. El modelo del borrador conserva la última cantidad válida hasta que se sustituye por una edición válida. El error visible deja clara esa diferencia, y ningún valor no válido se incluye en el total revisado.

Explica cuándo se descarta una edición no válida

Al cambiar el filtro o el orden, se reconstruyen las filas visibles a partir de los últimos valores válidos del borrador, por lo que se descarta cualquier edición no válida que no se haya terminado. Este es un límite deliberado del ejemplo local, no una garantía de validación nativa de JET. Una tabla editable de producción podría conservar los borradores no válidos en todas las vistas o impedir la navegación; ese comportamiento debe diseñarse y probarse con su propio modelo de estado.

Revisión y restablecimiento inspirados en el sistema de diseño Oracle Redwood

Describe una revisión local sin dar a entender que se envió

La acción «Revisar este borrador» muestra un recuento legible de unidades y artículos incluidos. Indica explícitamente que no se envió ningún pedido. La acción acepta un borrador válido con cero unidades porque el ejemplo no inventa una regla que exija una compra. Al editar una cantidad, se borra el mensaje de revisión anterior para que el borrador modificado no conserve una confirmación obsoleta.

Ofrece una recuperación predecible

La acción «Restablecer cantidades» restaura las cantidades sugeridas originales y borra el mensaje de revisión. Conserva el filtro y el orden actuales y vuelve a dibujar esas filas a partir del modelo restablecido. Así, la recuperación es visible y no hace falta recargar la página. El ejemplo no tiene almacenamiento ni backend, por lo que al recargar también se restablecen los datos locales iniciales.

Tabla adaptable inspirada en el sistema de diseño Oracle Redwood

Conserva la jerarquía de la información en pantallas estrechas

En el diseño ancho, los datos se muestran en una tabla con encabezados de columna y nombres de artículos como encabezados de fila. Por debajo de 650px, las filas se convierten en bloques legibles y cada celda de datos muestra su etiqueta antes del valor. Los campos de entrada se mantienen dentro del ancho disponible y la descripción del artículo permanece junto a su nombre. La adaptación corresponde a la aplicación original CSS y no pretende describir el comportamiento adaptable de oj-table.

Prueba los estados editados y filtrados

La comprobación en el navegador introduce una cantidad no válida, la corrige, ordena los artículos, filtra los que están por debajo del mínimo y revisa el total resultante antes de medir el diseño. Se comprobaron cuatro anchos, desde 1440px hasta 280px. Esto permite probar cambios reales de contenido y estado, no solo comprobar que exista un contenedor de tabla vacío.

Implementación de referencia completa del sistema de diseño Oracle Redwood

Ejecuta el documento completo proporcionado

El ejemplo HTML contiene las declaraciones de tokens públicos requeridas, los estilos originales, los registros de muestra y todos los controladores de eventos. Guárdalo como index.html y sirve el directorio; no faltan importaciones ni llamadas externas en tiempo de ejecución. Los valores de referencia están fijados en JET 19.0.0, aunque la implementación local no necesita el paquete JET JavaScript para ejecutarse.

  1. Guarda el documento completo proporcionado como index.html.
  2. Sirve su carpeta mediante HTTP local.
  3. Prueba cantidades no válidas y su corrección.
  4. Ordena y filtra; después, revisa y restablece el mismo borrador.

Usa componentes nativos de JET mediante su propia configuración

Ejemplos de componentes del sistema de diseño Oracle Redwood

index.html — hoja de trabajo original completa

Subconjunto completo de tokens públicos, HTML adaptable, validación, estado estable de las filas y comportamiento local de revisión y restablecimiento.

HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio supplies worksheet</title><style>:root{--oj-palette-danger-rgb-10:255, 248, 247;--oj-palette-danger-rgb-20:255, 241, 239;--oj-palette-danger-rgb-30:255, 235, 232;--oj-palette-danger-rgb-40:255, 217, 211;--oj-palette-danger-rgb-50:255, 193, 184;--oj-palette-danger-rgb-60:255, 157, 144;--oj-palette-danger-rgb-70:255, 134, 117;--oj-palette-danger-rgb-80:254, 104, 84;--oj-palette-danger-rgb-90:236, 79, 58;--oj-palette-danger-rgb-100:214, 59, 37;--oj-palette-danger-rgb-110:195, 53, 34;--oj-palette-danger-rgb-120:179, 49, 31;--oj-palette-danger-rgb-130:170, 34, 34;--oj-palette-danger-rgb-140:143, 39, 25;--oj-palette-danger-rgb-150:124, 34, 22;--oj-palette-danger-rgb-160:102, 28, 18;--oj-palette-danger-rgb-170:86, 24, 15;--oj-palette-warning-rgb-10:254, 249, 242;--oj-palette-warning-rgb-20:253, 242, 229;--oj-palette-warning-rgb-30:252, 237, 220;--oj-palette-warning-rgb-40:249, 221, 188;--oj-palette-warning-rgb-50:246, 199, 146;--oj-palette-warning-rgb-60:240, 169, 87;--oj-palette-warning-rgb-70:235, 150, 50;--oj-palette-warning-rgb-80:225, 128, 18;--oj-palette-warning-rgb-90:198, 113, 14;--oj-palette-warning-rgb-100:172, 99, 12;--oj-palette-warning-rgb-110:156, 89, 11;--oj-palette-warning-rgb-120:143, 82, 10;--oj-palette-warning-rgb-130:129, 73, 9;--oj-palette-warning-rgb-140:114, 65, 8;--oj-palette-warning-rgb-150:99, 56, 7;--oj-palette-warning-rgb-160:81, 47, 6;--oj-palette-warning-rgb-170:69, 39, 5;--oj-palette-success-rgb-10:244, 252, 235;--oj-palette-success-rgb-20:235, 248, 222;--oj-palette-success-rgb-30:228, 245, 211;--oj-palette-success-rgb-40:207, 235, 179;--oj-palette-success-rgb-50:177, 221, 136;--oj-palette-success-rgb-60:138, 201, 79;--oj-palette-success-rgb-70:125, 186, 69;--oj-palette-success-rgb-80:111, 169, 57;--oj-palette-success-rgb-90:94, 148, 43;--oj-palette-success-rgb-100:80, 130, 35;--oj-palette-success-rgb-110:73, 118, 32;--oj-palette-success-rgb-120:67, 107, 29;--oj-palette-success-rgb-130:60, 96, 26;--oj-palette-success-rgb-140:53, 86, 23;--oj-palette-success-rgb-150:46, 73, 20;--oj-palette-success-rgb-160:38, 61, 16;--oj-palette-success-rgb-170:31, 51, 14;--oj-palette-info-rgb-10:246, 250, 252;--oj-palette-info-rgb-20:237, 246, 249;--oj-palette-info-rgb-30:228, 241, 247;--oj-palette-info-rgb-40:208, 229, 238;--oj-palette-info-rgb-50:180, 213, 225;--oj-palette-info-rgb-60:143, 191, 208;--oj-palette-info-rgb-70:121, 177, 198;--oj-palette-info-rgb-80:95, 162, 186;--oj-palette-info-rgb-90:65, 144, 172;--oj-palette-info-rgb-100:34, 126, 158;--oj-palette-info-rgb-110:14, 114, 151;--oj-palette-info-rgb-120:0, 104, 140;--oj-palette-info-rgb-130:2, 94, 126;--oj-palette-info-rgb-140:4, 83, 111;--oj-palette-info-rgb-150:6, 72, 95;--oj-palette-info-rgb-160:6, 60, 78;--oj-palette-info-rgb-170:5, 50, 66;--oj-palette-brand-rgb-10:246, 250, 252;--oj-palette-brand-rgb-20:237, 246, 249;--oj-palette-brand-rgb-30:228, 241, 247;--oj-palette-brand-rgb-40:208, 229, 238;--oj-palette-brand-rgb-50:180, 213, 225;--oj-palette-brand-rgb-60:143, 191, 208;--oj-palette-brand-rgb-70:121, 177, 198;--oj-palette-brand-rgb-80:95, 162, 186;--oj-palette-brand-rgb-90:65, 144, 172;--oj-palette-brand-rgb-100:34, 126, 158;--oj-palette-brand-rgb-110:14, 114, 151;--oj-palette-brand-rgb-120:0, 104, 140;--oj-palette-brand-rgb-130:2, 94, 126;--oj-palette-brand-rgb-140:4, 83, 111;--oj-palette-brand-rgb-150:6, 72, 95;--oj-palette-brand-rgb-160:6, 60, 78;--oj-palette-brand-rgb-170:5, 50, 66;--oj-palette-neutral-rgb-0:255, 255, 255;--oj-palette-neutral-rgb-10:251, 249, 248;--oj-palette-neutral-rgb-20:245, 244, 242;--oj-palette-neutral-rgb-30:241, 239, 237;--oj-palette-neutral-rgb-40:228, 225, 221;--oj-palette-neutral-rgb-50:212, 207, 202;--oj-palette-neutral-rgb-60:188, 182, 177;--oj-palette-neutral-rgb-70:174, 168, 162;--oj-palette-neutral-rgb-80:158, 152, 146;--oj-palette-neutral-rgb-90:139, 133, 128;--oj-palette-neutral-rgb-100:123, 117, 112;--oj-palette-neutral-rgb-110:111, 105, 100;--oj-palette-neutral-rgb-120:101, 95, 91;--oj-palette-neutral-rgb-130:92, 86, 81;--oj-palette-neutral-rgb-140:81, 76, 71;--oj-palette-neutral-rgb-150:71, 66, 62;--oj-palette-neutral-rgb-160:58, 54, 50;--oj-palette-neutral-rgb-170:49, 45, 42;--oj-palette-neutral-rgb-180:32, 30, 28;--oj-palette-neutral-rgb-190:22, 21, 19;--oj-palette-neutral-rgb-200:00, 00, 00;--oj-palette-dvt-rgb-1:36, 93, 99;--oj-palette-dvt-rgb-2:215, 121, 15;--oj-palette-dvt-rgb-3:49, 160, 156;--oj-palette-dvt-rgb-4:78, 65, 55;--oj-palette-dvt-rgb-5:105, 158, 97;--oj-palette-dvt-rgb-6:180, 114, 130;--oj-palette-dvt-rgb-7:131, 64, 30;--oj-palette-dvt-rgb-8:158, 127, 204;--oj-palette-dvt-rgb-9:168, 142, 0;--oj-palette-dvt-rgb-10:88, 49, 110;--oj-palette-dvt-rgb-11:89, 153, 181;--oj-palette-dvt-rgb-12:49, 122, 69;--oj-core-text-color-primary:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-text-color-secondary:rgba(var(--oj-palette-neutral-rgb-190), .70);--oj-core-text-color-disabled:rgba(var(--oj-palette-neutral-rgb-190), .4);--oj-core-text-color-brand:rgb(var(--oj-palette-brand-rgb-110));--oj-core-text-color-danger:rgb(var(--oj-palette-danger-rgb-120));--oj-core-text-color-warning:rgb(var(--oj-palette-warning-rgb-120));--oj-core-text-color-success:rgb(var(--oj-palette-success-rgb-120));--oj-core-bg-color-content:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-bg-color-hover:rgba(var(--oj-palette-neutral-rgb-190), .08);--oj-core-bg-color-active:rgba(var(--oj-palette-neutral-rgb-190), .16);--oj-core-bg-color-selected:rgb(var(--oj-palette-brand-rgb-30));--oj-core-border-color-selected:rgb(var(--oj-palette-brand-rgb-100));--oj-core-border-color-enabled:rgba(var(--oj-palette-neutral-rgb-190), 0.5);--oj-core-color-disabled-1:rgba(var(--oj-palette-neutral-rgb-190), 0.04);--oj-core-color-disabled-2:rgba(var(--oj-palette-neutral-rgb-190),.20);--oj-core-icon-size-lg:1.5rem;--oj-core-icon-size-sm:1rem;--oj-core-divider-color:rgba(var(--oj-palette-neutral-rgb-190),.12);--oj-core-divider-margin:0.5rem;--oj-core-neutral-1:rgb(var(--oj-palette-neutral-rgb-100));--oj-core-neutral-2:rgb(var(--oj-palette-neutral-rgb-110));--oj-core-neutral-3:rgb(var(--oj-palette-neutral-rgb-120));--oj-core-neutral-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-neutral-secondary-1:rgba(var(--oj-palette-neutral-rgb-190), 0.08);--oj-core-neutral-secondary-2:rgb(var(--oj-palette-neutral-rgb-20));--oj-core-neutral-secondary-3:rgb(var(--oj-palette-neutral-rgb-10));--oj-core-neutral-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-brand-1:rgb(var(--oj-palette-brand-rgb-100));--oj-core-brand-2:rgb(var(--oj-palette-brand-rgb-110));--oj-core-brand-3:rgb(var(--oj-palette-brand-rgb-120));--oj-core-brand-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-danger-1:rgb(var(--oj-palette-danger-rgb-120));--oj-core-danger-2:rgb(var(--oj-palette-danger-rgb-110));--oj-core-danger-3:rgb(var(--oj-palette-danger-rgb-120));--oj-core-danger-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-danger-secondary-1:rgba(var(--oj-palette-danger-rgb-60), 0.4);--oj-core-danger-secondary-2:rgb(var(--oj-palette-danger-rgb-20));--oj-core-danger-secondary-3:rgb(var(--oj-palette-danger-rgb-10));--oj-core-danger-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-warning-1:rgb(var(--oj-palette-warning-rgb-120));--oj-core-warning-2:rgb(var(--oj-palette-warning-rgb-110));--oj-core-warning-3:rgb(var(--oj-palette-warning-rgb-120));--oj-core-warning-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-warning-secondary-1:rgba(var(--oj-palette-warning-rgb-60), 0.4);--oj-core-warning-secondary-2:rgb(var(--oj-palette-warning-rgb-20));--oj-core-warning-secondary-3:rgb(var(--oj-palette-warning-rgb-10));--oj-core-warning-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-success-1:rgb(var(--oj-palette-success-rgb-120));--oj-core-success-2:rgb(var(--oj-palette-success-rgb-110));--oj-core-success-3:rgb(var(--oj-palette-success-rgb-120));--oj-core-success-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-success-secondary-1:rgba(var(--oj-palette-success-rgb-60), 0.4);--oj-core-success-secondary-2:rgb(var(--oj-palette-success-rgb-20));--oj-core-success-secondary-3:rgb(var(--oj-palette-success-rgb-10));--oj-core-success-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-info-1:rgb(var(--oj-palette-info-rgb-120));--oj-core-info-2:rgb(var(--oj-palette-info-rgb-110));--oj-core-info-3:rgb(var(--oj-palette-info-rgb-120));--oj-core-info-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-info-secondary-1:rgba(var(--oj-palette-info-rgb-60), 0.4);--oj-core-info-secondary-2:rgb(var(--oj-palette-info-rgb-20));--oj-core-info-secondary-3:rgb(var(--oj-palette-info-rgb-10));--oj-core-info-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-focus-border-color:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-cursor-clickable:pointer;--oj-core-drag-drop-color-1:rgb(var(--oj-palette-brand-rgb-40));--oj-core-drag-drop-color-2:rgb(var(--oj-palette-brand-rgb-100));--oj-core-drag-drop-line-color:rgb(var(--oj-palette-brand-rgb-100));--oj-core-touch-target-min-size:2.25rem;--oj-core-box-shadow-rgb:var(--oj-palette-neutral-rgb-200);--oj-core-box-shadow-xs:0px 1px 4px 0px rgba(var(--oj-core-box-shadow-rgb),.12);--oj-core-box-shadow-sm:0px 4px 8px 0px rgba(var(--oj-core-box-shadow-rgb),.16);--oj-core-box-shadow-md:0px 6px 12px 0px rgba(var(--oj-core-box-shadow-rgb),.2);--oj-core-box-shadow-lg:0px 8px 16px 0px rgba(var(--oj-core-box-shadow-rgb),0.24);--oj-core-box-shadow-xl:0px 12px 20px 0px rgba(var(--oj-core-box-shadow-rgb),0.28);--oj-core-dropdown-box-shadow:var(--oj-core-box-shadow-sm);--oj-core-scrim-color:rgba(var(--oj-palette-neutral-rgb-190), .4);--oj-core-spacing-1x:.25rem;--oj-core-spacing-2x:.5rem;--oj-core-spacing-3x:.75rem;--oj-core-spacing-4x:1rem;--oj-core-spacing-5x:1.25rem;--oj-core-spacing-6x:1.5rem;--oj-core-spacing-7x:1.75rem;--oj-core-spacing-8x:2rem;--oj-core-spacing-9x:2.25rem;--oj-core-spacing-10x:2.5rem;--oj-core-spacing-11x:2.75rem;--oj-core-spacing-12x:3rem;--oj-core-border-radius-sm:2px;--oj-core-border-radius-md:.25rem;--oj-core-border-radius-lg:.375rem;--oj-core-border-radius-xl:.5rem;--oj-core-z-index-popup:1000;--oj-core-z-index-dialog:1050;--oj-core-z-index-messages:2000;--oj-typography-heading-2xl-font-size:2.5rem;--oj-typography-heading-2xl-font-weight:800;--oj-typography-heading-2xl-line-height:1.3;--oj-typography-heading-xl-font-size:2.25rem;--oj-typography-heading-xl-font-weight:800;--oj-typography-heading-xl-line-height:1.222;--oj-typography-heading-lg-font-size:2rem;--oj-typography-heading-lg-font-weight:800;--oj-typography-heading-lg-line-height:1.25;--oj-typography-heading-md-font-size:1.75rem;--oj-typography-heading-md-font-weight:800;--oj-typography-heading-md-line-height:1.2857;--oj-typography-heading-sm-font-size:1.5rem;--oj-typography-heading-sm-font-weight:800;--oj-typography-heading-sm-line-height:1.3333;--oj-typography-heading-xs-font-size:1.25rem;--oj-typography-heading-xs-font-weight:800;--oj-typography-heading-xs-line-height:1.4;--oj-typography-subheading-2xl-font-size:2.25rem;--oj-typography-subheading-2xl-font-weight:bold;--oj-typography-subheading-2xl-line-height:1.2222;--oj-typography-subheading-xl-font-size:2rem;--oj-typography-subheading-xl-font-weight:bold;--oj-typography-subheading-xl-line-height:1.25;--oj-typography-subheading-lg-font-size:1.75rem;--oj-typography-subheading-lg-font-weight:bold;--oj-typography-subheading-lg-line-height:1.2857;--oj-typography-subheading-md-font-size:1.5rem;--oj-typography-subheading-md-font-weight:bold;--oj-typography-subheading-md-line-height:1.3333;--oj-typography-subheading-sm-font-size:1.25rem;--oj-typography-subheading-sm-font-weight:bold;--oj-typography-subheading-sm-line-height:1.4;--oj-typography-subheading-xs-font-size:1rem;--oj-typography-subheading-xs-font-weight:bold;--oj-typography-subheading-xs-line-height:1.5;--oj-typography-body-xl-font-size:1.25rem;--oj-typography-body-xl-line-height:1.4;--oj-typography-body-lg-font-size:1.125rem;--oj-typography-body-lg-line-height:1.3333;--oj-typography-body-md-font-size:1rem;--oj-typography-body-md-line-height:1.25;--oj-typography-body-sm-font-size:0.859rem;--oj-typography-body-sm-line-height:1.2;--oj-typography-body-xs-font-size:0.75rem;--oj-typography-body-xs-line-height:1.3333;--oj-typography-body-2xs-font-size:0.625rem;--oj-typography-body-2xs-line-height:1.2;--oj-body-bg-color:rgb(var(--oj-palette-neutral-rgb-10));--oj-button-height:2.75rem;--oj-button-border-radius:var(--oj-core-border-radius-md);}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;font-size:16px;color:var(--oj-core-text-color-primary);background:var(--oj-body-bg-color)}main{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap}h1{font-size:32px;line-height:1.2;margin:12px 0 24px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}.scope{font-size:14px;line-height:1.6;max-width:78ch;color:var(--oj-core-text-color-secondary)}.count{padding:16px 24px;border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-core-border-radius-lg);background:var(--oj-core-bg-color-content);min-width:140px}.count strong{display:block;font-size:32px}.toolbar{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0}button,select,input{font:inherit}button{min-height:var(--oj-button-height);padding:8px 16px;border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-button-border-radius);background:var(--oj-core-bg-color-content);color:var(--oj-core-text-color-primary);cursor:pointer}button.primary{background:rgb(var(--oj-palette-brand-rgb-120));color:white;border-color:transparent}button:disabled{opacity:.5;cursor:default}select{min-height:44px;border:1px solid var(--oj-core-divider-color);border-radius:4px;padding:8px;background:white;max-width:100%}.table-wrap{overflow:auto;background:var(--oj-core-bg-color-content);border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-core-border-radius-lg)}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{text-align:left;padding:20px 24px;vertical-align:top;border-bottom:1px solid var(--oj-core-divider-color)}thead th{font-size:13px;background:rgb(var(--oj-palette-neutral-rgb-20))}th:first-child{width:36%}tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}td p,th p{font-size:13px;color:var(--oj-core-text-color-secondary);font-weight:400;margin:8px 0;line-height:1.5}input{width:88px;max-width:100%;padding:8px;border:1px solid var(--oj-core-divider-color);border-radius:4px;background:white;min-height:44px}.note{margin:24px 0;padding:24px;background:rgb(var(--oj-palette-info-rgb-20));border-left:4px solid rgb(var(--oj-palette-brand-rgb-120));line-height:1.6}.actions{display:flex;gap:16px;flex-wrap:wrap}.error{color:rgb(var(--oj-palette-danger-rgb-120));font-size:13px;line-height:1.5}.status{font-size:13px;padding:4px 8px;border-radius:4px;background:rgb(var(--oj-palette-neutral-rgb-20));display:inline-block}.status.ready{background:rgb(var(--oj-palette-success-rgb-20));color:rgb(var(--oj-palette-success-rgb-140))}:focus-visible{outline:2px solid var(--oj-core-focus-border-color);outline-offset:3px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}table,tbody,tr,td,th{display:block}table{table-layout:auto}thead{display:none}th:first-child{width:auto}tbody tr{padding:16px;border-bottom:1px solid var(--oj-core-divider-color)}tbody tr:last-child{border-bottom:0}td,th{padding:8px;border:0!important}td:before{content:attr(data-label);display:block;font-size:12px;font-weight:700;margin-bottom:8px}.toolbar label{display:flex;flex-wrap:wrap;gap:8px}}
</style></head><body><main><header><div><p class="eyebrow">REDWOOD FOUNDATIONS / ORIGINAL WORKSHEET</p><h1>Prepare the studio supplies</h1><p class="scope">An original stock-review worksheet using public Oracle JET 19 Redwood variables. This is plain HTML/CSS and JavaScript, not a native JET component runtime or an Oracle inventory service. Arial is an explicit font fallback.</p></div><div class="count"><strong id="total">0</strong>units in the local draft</div></header><div class="toolbar"><label for="filter">Show <select id="filter"><option value="all">All sample items</option><option value="low">Below minimum stock</option></select></label><button id="sort">Sort by item name</button></div><div class="table-wrap"><table><thead><tr><th scope="col">Item</th><th scope="col">On hand / minimum</th><th scope="col">Add to draft</th><th scope="col">Review state</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No items match this view. <button id="show-all">Show all items</button></p><p class="note">Change a quantity to build a local replenishment draft. A draft may contain zero units. Nothing is ordered, approved or sent from this example.</p><div class="actions"><button class="primary" id="keep">Review this draft</button><button id="reset">Reset quantities</button></div><p id="message" role="status"></p></main><script>const initial=[{id:'paper',name:'Sketch paper',detail:'A4 recycled sheets',stock:18,min:30},{id:'markers',name:'Fine-tip markers',detail:'Black ink / single pens',stock:12,min:10},{id:'clips',name:'Binder clips',detail:'Medium / single clips',stock:6,min:20}];let amounts={paper:12,markers:0,clips:14},ascending=false;const tbody=document.querySelector('#rows');function visible(){let a=initial.filter(x=>document.querySelector('#filter').value!=='low'||x.stock<x.min);return ascending?[...a].sort((a,b)=>a.name.localeCompare(b.name)):a;}function count(){let inputs=[...document.querySelectorAll('input')];let bad=inputs.some(x=>!x.checkValidity()||x.value==='');document.querySelector('#keep').disabled=bad;document.querySelector('#total').textContent=Object.values(amounts).reduce((a,b)=>a+b,0);return bad;}function render(){tbody.innerHTML=visible().map(x=>`<tr><th scope="row">${x.name}<p>${x.detail}</p></th><td data-label="On hand / minimum">${x.stock} / ${x.min}<p>${x.stock<x.min?'Below minimum':'Above minimum'}</p></td><td data-label="Add to draft"><input id="qty-${x.id}" aria-label="Quantity for ${x.name}" type="number" min="0" max="99" step="1" value="${amounts[x.id]}" data-id="${x.id}"><p class="error" hidden>Use a whole number from 0 to 99.</p></td><td data-label="Review state"><span class="status ${amounts[x.id]?'ready':''}">${amounts[x.id]?'In draft':'No addition'}</span></td></tr>`).join('');tbody.querySelectorAll('input').forEach(input=>input.addEventListener('input',()=>{let valid=input.checkValidity()&&input.value!=='';input.setAttribute('aria-invalid',String(!valid));input.nextElementSibling.hidden=valid;document.querySelector('#message').textContent='';if(valid){amounts[input.dataset.id]=Number(input.value);const status=input.closest('tr').querySelector('.status');status.textContent=Number(input.value)?'In draft':'No addition';status.classList.toggle('ready',Number(input.value)>0)}count()}));document.querySelector('#empty').hidden=visible().length>0;count()}document.querySelector('#filter').addEventListener('change',render);document.querySelector('#sort').addEventListener('click',e=>{ascending=!ascending;e.currentTarget.textContent=ascending?'Use original order':'Sort by item name';render()});document.querySelector('#show-all').addEventListener('click',()=>{document.querySelector('#filter').value='all';render()});document.querySelector('#keep').addEventListener('click',()=>{if(!count())document.querySelector('#message').textContent='Reviewed '+Object.values(amounts).reduce((a,b)=>a+b,0)+' units across '+Object.values(amounts).filter(x=>x>0).length+' items in this local draft. No order was sent.'});document.querySelector('#reset').addEventListener('click',()=>{amounts={paper:12,markers:0,clips:14};document.querySelector('#message').textContent='';render()});render();</script></body></html>

Referencia de código

  • Esto no es oj-table ni oj-input-number.
  • No hay ninguna aplicación de Oracle, servicio de inventario ni endpoint de pedidos conectado.
04

Configuración del agente del sistema de diseño Oracle Redwood

Punto de partida para la implementación

Ejecuta la interpretación original independiente. La adopción nativa de JET requiere una configuración de framework aparte, descrita en la documentación oficial enlazada.

sh
# Save the complete supplied document as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/

Una instrucción para tu proyecto

Instrucción para el agente
Implementa la hoja de trabajo original de revisión de existencias, inspirada en Redwood, proporcionada, usando variables base públicas verificadas de JET 19. Conserva la sintaxis de canales RGB, el estado válido de las cantidades asociado al ID del artículo, los límites de validación, la conservación al ordenar y filtrar, y las funciones locales de revisión y restablecimiento. No describas esta implementación para navegador como JET nativo ni como un servicio de Oracle.
05

Fuentes y alcance del sistema de diseño Oracle Redwood

Una interpretación OpenDesign que utiliza variables públicas Redwood de Oracle JET 19. La vista previa está hecha con HTML/CSS/JavaScript sin procesar; no utiliza componentes nativos de JET ni un servicio de inventario de Oracle. La alternativa Arial se indica explícitamente.