83.3K+Télécharger
Logiciels d’entreprise · Nouvelle ressource

Oracle Redwood Système de conception.

Découvrez la palette réelle d’Oracle JET 19 Redwood, ses rôles sémantiques et ses limites d’espacement et de densité grâce à une fiche de travail originale et complète pour l’analyse des stocks, entièrement modifiable.

Télécharger OpenDesign Télécharger DESIGN.md
Guide OpenDesign8 chapitres45 entrées de référenceGuide de l’application d’origine
01

Aperçu de l’interface du système de conception Oracle Redwood

Modifiez les quantités, vérifiez la validation, triez et filtrez tout en conservant le brouillon valide.

Examiner un brouillon local de fournituresOuvrir l’exemple complet
Implémentation originale dans le navigateur, utilisant les véritables variables de thème public Redwood de JET 19 ; aucun moteur d’exécution natif de JET JavaScript. · Référence de mise en œuvre
02

Référence de conception du système de design Oracle Redwood

Déclarations publiques de base extraites de la feuille de style Redwood de JET 19.0.0, dont la version est verrouillée. Le comportement et la mise en page d’origine de la feuille de travail sont décrits séparément ; les variables privées et les surcharges inversées ultérieures sont exclues de cette référence de base.

Rôles sémantiques de base de Redwood

Source
Nom / règleValeur / configurationUtilisation
--oj-core-text-color-primaryrgb(var(--oj-palette-neutral-rgb-190))Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur.
--oj-core-text-color-secondaryrgba(var(--oj-palette-neutral-rgb-190), .70)Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur.
--oj-core-text-color-disabledrgba(var(--oj-palette-neutral-rgb-190), .4)Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur.
--oj-core-bg-color-contentrgb(var(--oj-palette-neutral-rgb-0))Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur.
--oj-body-bg-colorrgb(var(--oj-palette-neutral-rgb-10))Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur.
--oj-core-divider-colorrgba(var(--oj-palette-neutral-rgb-190),.12)Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur.
--oj-core-focus-border-colorrgb(var(--oj-palette-neutral-rgb-190))Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur.

Valeurs de palette utilisées par la feuille de travail

Source
Nom / règleValeur / configurationUtilisation
--oj-palette-neutral-rgb-0255, 255, 255Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes.
--oj-palette-neutral-rgb-10251, 249, 248Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes.
--oj-palette-neutral-rgb-20245, 244, 242Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes.
--oj-palette-neutral-rgb-19022, 21, 19Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes.
--oj-palette-brand-rgb-1200, 104, 140Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes.
--oj-palette-info-rgb-20237, 246, 249Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes.
--oj-palette-danger-rgb-120179, 49, 31Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes.
--oj-palette-success-rgb-20235, 248, 222Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes.
--oj-palette-success-rgb-14053, 86, 23Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes.

Espacement et formes

Source
Nom / règleValeur / configurationUtilisation
--oj-core-spacing-1x.25remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-2x.5remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-3x.75remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-4x1remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-5x1.25remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-6x1.5remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-7x1.75remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-8x2remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-9x2.25remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-10x2.5remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-11x2.75remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-spacing-12x3remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-border-radius-sm2pxÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-border-radius-md.25remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-border-radius-lg.375remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.
--oj-core-border-radius-xl.5remÉchelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET.

Typographie du corps de texte et dimensions des contrôles

Source
Nom / règleValeur / configurationUtilisation
--oj-typography-body-xs-font-size0.75remDéclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application.
--oj-typography-body-sm-font-size0.859remDéclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application.
--oj-typography-body-md-font-size1remDéclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application.
--oj-typography-body-lg-font-size1.125remDéclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application.
--oj-typography-body-xl-font-size1.25remDéclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application.
--oj-typography-body-md-line-height1.25Déclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application.
--oj-button-height2.75remDéclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application.
--oj-button-border-radiusvar(--oj-core-border-radius-md)Déclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application.

Limites du style public

Source
Nom / règleValeur / configurationUtilisation
Global theme overrides:root declarations after JET CSSUne surcharge à la racine affecte tous les éléments qui utilisent cette variable publique.
Instance stylingA class scoped to the target componentLimitez la portée d’une variable publique si la modification ne concerne qu’un seul composant natif.
Redwood baseTracks Oracle visual changesChoisissez cette option si l’objectif est de respecter l’apparence d’Oracle ; les mises à niveau peuvent modifier les valeurs héritées.
Stable baseAlternative for a distinct custom themeNe le présentez pas comme identique à Redwood et ne supposez pas que toutes les capacités d’inversion ou de mise à l’échelle sont équivalentes.
Private variables--oj-private-* excludedL’exemple ne fonde pas sa référence publique sur des mécanismes internes d’implémentation.
03

Guide complet du système de design Oracle Redwood

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

DESIGN-oracle-redwood.md

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

Télécharger le guide

Limites des versions du système de design Oracle Redwood et de JET

Précisez la couche d’implémentation

Redwood ne se limite pas à une bibliothèque de composants téléchargeable. Ce guide s’appuie sur les fondations publiques CSS fournies avec Oracle JET 19.0.0, qui constituent une référence concrète et vérifiable. L’aperçu est une feuille de travail originale d’examen des stocks HTML/CSS qui utilise ces valeurs ; il ne crée aucune instance de oj-table, oj-input-number ni d’aucun autre élément personnalisé natif de JET. La déclaration concernant l’environnement d’exécution est explicite afin que le lecteur ne confonde pas les fondations visuelles avec un SDK complet pour les applications Oracle.

Extrait de ce guide OpenDesign
  • Source de référence : CSS Redwood d’Oracle JET 19.
  • Environnement d’exécution de l’aperçu : HTML/CSS/JavaScript original exécuté dans le navigateur.
  • Données et règles de validation : exemple local original.

Distinguez l’adoption des applications Oracle

Adopter Redwood dans un produit SaaS Oracle, configurer une application JET et reprendre une référence de thème publique sont trois démarches distinctes. L’exemple ne modifie aucun environnement client, ne se connecte pas à des données de stock et n’effectue aucune migration de produit. Son document local complet permet d’étudier les règles visuelles et le modèle d’état, tandis qu’une véritable application JET doit suivre les procédures de configuration du framework correspondant à sa version ainsi que la documentation des composants natifs.

Rôles sémantiques et valeurs de palette du système de design Oracle Redwood

Interprétez correctement les déclarations de base

La référence reprend la première déclaration, c’est-à-dire celle de base, de chaque variable publique dans la feuille de style dont la version est verrouillée. Les portées inversées ou de densité définies plus loin peuvent redéfinir le même nom. Une extraction naïve de la dernière correspondance pourrait donc étiqueter une couleur de premier plan inversée comme couleur de texte par défaut du thème clair. Le guide indique explicitement la portée de base et exclut les mécanismes --oj-private-* de la référence publiée.

Distinguez les canaux bruts des valeurs de couleur

Les variables de palette telles que --oj-palette-brand-rgb-120 contiennent trois canaux RVB, tandis que les rôles sémantiques les enveloppent dans rgb() ou rgba(). L’action d’origine utilise les canaux de la marque avec rgb(), le texte utilise core-text-color-primary et la surface de la carte utilise core-bg-color-content. Copier directement la chaîne de canaux bruts dans background-color produirait du CSS invalide, même si les nombres semblent plausibles.

Espacement, typographie et densité du système de design Oracle Redwood

Utilisez l’échelle de fondation concrète

La séquence publique core-spacing progresse par paliers de 4px, de 1x à 12x. Les rôles de bordure small, medium, large et extra-large sont distincts, tout comme la variable de hauteur du bouton. La feuille de travail utilise ces valeurs réelles lorsque cela convient et précise que son titre de 32px, la transformation adaptative du tableau et sa largeur extérieure de 1120px sont des choix de composition originaux.

Ne mélangez pas les valeurs propres à la densité

Dans cette feuille de style verrouillée, la taille de base body-md est de 1rem et son interligne de 1.25 ; des sélecteurs ultérieurs peuvent exposer des valeurs en pixels mises à l’échelle. Le guide consigne la valeur de base sans laisser entendre que chaque contexte Redwood doit utiliser une seule taille calculée. L’exemple dans le navigateur utilise Arial comme police de remplacement et ne prétend pas charger Oracle Sans. Une application JET native doit tester ensemble la densité, le thème et la plateforme sélectionnés.

Structure d’une feuille de travail inspirée du système de design Oracle Redwood

Rendez les données et les actions compréhensibles

Chaque ligne d’origine désigne une fourniture de studio, précise son unité, compare le stock actuel au minimum et propose un champ de saisie de quantité. Un libellé d’état de validation indique également si l’article est inclus dans le brouillon local. Le récapitulatif compte les unités de l’ensemble du brouillon, y compris celles des lignes masquées par le filtre. Il s’agit d’exemples fictifs, et non de données de stock avérées ni de recommandations d’achat.

Préservez l’identité des lignes lors du tri

Validation des quantités dans une feuille de travail inspirée du système de design Oracle Redwood

Rejetez les valeurs qui ne respectent pas la règle locale indiquée

Le champ de quantité d’origine accepte des nombres entiers compris entre zéro et 99. Une valeur vide, négative, fractionnaire ou hors limites affiche une erreur en ligne et désactive l’action de validation. Le modèle de brouillon conserve la dernière quantité valide jusqu’à ce qu’une modification valide la remplace. L’erreur visible rend cette distinction claire, et aucune valeur invalide n’est incluse dans le total validé.

Indiquez quand une modification invalide est abandonnée

Modifier le filtre ou le tri reconstruit les lignes visibles à partir des dernières valeurs provisoires valides ; toute modification invalide et inachevée est donc abandonnée. Il s’agit d’une limite délibérée de cet exemple local, et non d’une garantie de validation native de JET. Dans un tableau modifiable de production, il pourrait être préférable de conserver les valeurs provisoires invalides dans toutes les vues ou d’empêcher la navigation ; ce comportement doit être conçu et testé dans son propre modèle d’état.

Révision et réinitialisation inspirées du système de design Oracle Redwood Oracle Redwood

Décrire une révision locale sans prétendre envoyer quoi que ce soit

L’action Réviser ce brouillon affiche le nombre d’unités et d’articles concernés. Elle précise explicitement qu’aucune commande n’a été envoyée. L’action accepte un brouillon valide de zéro unité, car l’exemple n’invente aucune obligation d’achat. Modifier une quantité efface le message de révision précédent afin qu’un brouillon modifié ne conserve pas une confirmation obsolète.

Permettre une reprise prévisible

Réinitialiser les quantités rétablit les ajouts suggérés d’origine et efface le message de révision. Le filtre et le tri en cours sont conservés, puis les lignes sont redessinées à partir du modèle réinitialisé. La reprise est ainsi visible sans recharger la page. L’exemple n’utilise ni stockage ni serveur ; un rechargement rétablit donc également les données locales initiales.

Tableau responsive inspiré du système de design Oracle Redwood Oracle Redwood

Conserver la hiérarchie de l’information sur les écrans étroits

Sur grand écran, la disposition prend la forme d’un tableau avec des en-têtes de colonnes et des noms d’articles servant d’en-têtes de ligne. En dessous de 650px, les lignes deviennent des blocs lisibles et chaque cellule de données affiche son libellé avant sa valeur. Les champs restent dans l’espace disponible et la description demeure associée au nom de l’article. Cette adaptation relève de l’application d’origine CSS ; elle ne prétend pas décrire le comportement responsive de oj-table.

Tester les états modifiés et filtrés

Le test dans le navigateur saisit une quantité invalide, la corrige, trie les articles, filtre ceux dont le stock est inférieur au minimum et révise le total obtenu avant de mesurer la mise en page. Quatre largeurs, de 1440px à 280px, ont été vérifiées. Le test porte sur le contenu réel et les changements d’état, pas simplement sur la présence d’un conteneur de tableau vide.

Implémentation de référence complète du système de design Oracle Redwood

Exécuter le document complet fourni

L’exemple HTML comprend les déclarations de jetons publics requises, les styles d’origine, les enregistrements d’exemple et tous les gestionnaires d’événements. Enregistrez-le sous le nom index.html et servez le répertoire ; aucun import manquant ni appel externe à l’exécution n’est nécessaire. Les valeurs de référence sont celles de JET 19.0.0, même si l’implémentation locale ne nécessite aucun package JET JavaScript pour fonctionner.

  1. Enregistrez le document complet fourni sous le nom index.html.
  2. Servez son dossier en HTTP local.
  3. Testez les quantités invalides et leur correction.
  4. Triez et filtrez, puis révisez et réinitialisez le même brouillon.

Utiliser les composants natifs de JET avec leur propre configuration

Exemples de composants du système de design Oracle Redwood

index.html — fiche de travail complète d’origine

Sous-ensemble complet de jetons publics, HTML responsive, validation, état stable des lignes et comportement local de révision et de réinitialisation.

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>

Référence du code

  • Il ne s’agit volontairement ni de oj-table ni de oj-input-number.
  • Aucune application Oracle, aucun service de stock et aucun point de terminaison de commande ne sont connectés.
04

Configuration de l’agent du système de design Oracle Redwood

Point de départ de l’implémentation

Exécute l’interprétation autonome d’origine. L’adoption de JET natif nécessite une configuration distincte du framework, décrite dans la documentation officielle liée.

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

Un prompt pour votre projet

Prompt pour l’agent IA
Implémentez la fiche de travail fournie pour la révision des stocks, inspirée de Redwood et créée à l’origine, à l’aide de variables de base publiques de JET 19 vérifiées. Préservez la syntaxe des canaux RVB, l’état des quantités valides indexé par identifiant d’article, les limites de validation, la conservation du tri et du filtre, la révision exclusivement locale et la réinitialisation. Ne présentez pas cette implémentation dans le navigateur comme JET natif ou comme un service Oracle.
05

Sources et périmètre du système de design Oracle Redwood

Une interprétation OpenDesign qui utilise les variables publiques Redwood d’Oracle JET 19. L’aperçu est en HTML/CSS/JavaScript simple, sans composants JET natifs ni service de stock Oracle. Arial est explicitement indiqué comme police de remplacement.