83.3K+Scarica
Software aziendale · Nuova risorsa

Sistema di progettazione Oracle Redwood.

Esamina la palette effettiva, i ruoli semantici, le spaziature e i limiti di densità di Oracle JET 19 Redwood attraverso un foglio di lavoro originale, completo e modificabile per la revisione delle scorte.

Scarica OpenDesign Scarica DESIGN.md
Guida OpenDesign8 capitoli45 voci di riferimentoGuida applicativa originale
01

Anteprima dell’interfaccia del sistema di progettazione sistema di design Oracle Redwood

Modifica le quantità, controlla la convalida, ordina e filtra senza perdere la bozza valida.

Esamina una bozza locale delle fornitureApri l’esempio completo
Implementazione originale nel browser basata sulle variabili pubbliche effettive del tema Redwood di JET 19; nessun runtime nativo JavaScript di JET. · Riferimento per l’implementazione
02

Riferimento di progettazione del sistema sistema di design Oracle Redwood

Dichiarazioni pubbliche di base del foglio di stile Redwood di JET 19.0.0 fissato alla versione specifica. Il comportamento e il layout originali del foglio di lavoro sono indicati separatamente; le variabili private e le sovrascritture invertite successive sono escluse dal riferimento di base.

Ruoli semantici di base di Redwood

Fonte
Nome / regolaValore / configurazioneUtilizzo
--oj-core-text-color-primaryrgb(var(--oj-palette-neutral-rgb-190))Prime dichiarazioni/di base di JET 19 Redwood. I selettori invertiti e di densità possono sovrascrivere i valori; non appiattire tutte le dichiarazioni in un elenco dell’ultimo valore.
--oj-core-text-color-secondaryrgba(var(--oj-palette-neutral-rgb-190), .70)Prime dichiarazioni/di base di JET 19 Redwood. I selettori invertiti e di densità possono sovrascrivere i valori; non appiattire tutte le dichiarazioni in un elenco dell’ultimo valore.
--oj-core-text-color-disabledrgba(var(--oj-palette-neutral-rgb-190), .4)Prime dichiarazioni/di base di JET 19 Redwood. I selettori invertiti e di densità possono sovrascrivere i valori; non appiattire tutte le dichiarazioni in un elenco dell’ultimo valore.
--oj-core-bg-color-contentrgb(var(--oj-palette-neutral-rgb-0))Prime dichiarazioni/di base di JET 19 Redwood. I selettori invertiti e di densità possono sovrascrivere i valori; non appiattire tutte le dichiarazioni in un elenco dell’ultimo valore.
--oj-body-bg-colorrgb(var(--oj-palette-neutral-rgb-10))Prime dichiarazioni/di base di JET 19 Redwood. I selettori invertiti e di densità possono sovrascrivere i valori; non appiattire tutte le dichiarazioni in un elenco dell’ultimo valore.
--oj-core-divider-colorrgba(var(--oj-palette-neutral-rgb-190),.12)Prime dichiarazioni/di base di JET 19 Redwood. I selettori invertiti e di densità possono sovrascrivere i valori; non appiattire tutte le dichiarazioni in un elenco dell’ultimo valore.
--oj-core-focus-border-colorrgb(var(--oj-palette-neutral-rgb-190))Prime dichiarazioni/di base di JET 19 Redwood. I selettori invertiti e di densità possono sovrascrivere i valori; non appiattire tutte le dichiarazioni in un elenco dell’ultimo valore.

Valori della tavolozza usati nel foglio di lavoro

Fonte
Nome / regolaValore / configurazioneUtilizzo
--oj-palette-neutral-rgb-0255, 255, 255I valori grezzi dei canali RGB vengono usati all’interno di rgb() o rgba(). Da soli non costituiscono valori di colore CSS completi.
--oj-palette-neutral-rgb-10251, 249, 248I valori grezzi dei canali RGB vengono usati all’interno di rgb() o rgba(). Da soli non costituiscono valori di colore CSS completi.
--oj-palette-neutral-rgb-20245, 244, 242I valori grezzi dei canali RGB vengono usati all’interno di rgb() o rgba(). Da soli non costituiscono valori di colore CSS completi.
--oj-palette-neutral-rgb-19022, 21, 19I valori grezzi dei canali RGB vengono usati all’interno di rgb() o rgba(). Da soli non costituiscono valori di colore CSS completi.
--oj-palette-brand-rgb-1200, 104, 140I valori grezzi dei canali RGB vengono usati all’interno di rgb() o rgba(). Da soli non costituiscono valori di colore CSS completi.
--oj-palette-info-rgb-20237, 246, 249I valori grezzi dei canali RGB vengono usati all’interno di rgb() o rgba(). Da soli non costituiscono valori di colore CSS completi.
--oj-palette-danger-rgb-120179, 49, 31I valori grezzi dei canali RGB vengono usati all’interno di rgb() o rgba(). Da soli non costituiscono valori di colore CSS completi.
--oj-palette-success-rgb-20235, 248, 222I valori grezzi dei canali RGB vengono usati all’interno di rgb() o rgba(). Da soli non costituiscono valori di colore CSS completi.
--oj-palette-success-rgb-14053, 86, 23I valori grezzi dei canali RGB vengono usati all’interno di rgb() o rgba(). Da soli non costituiscono valori di colore CSS completi.

Spaziatura e forma

Fonte
Nome / regolaValore / configurazioneUtilizzo
--oj-core-spacing-1x.25remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-2x.5remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-3x.75remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-4x1remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-5x1.25remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-6x1.5remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-7x1.75remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-8x2remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-9x2.25remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-10x2.5remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-11x2.75remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-spacing-12x3remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-border-radius-sm2pxScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-border-radius-md.25remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-border-radius-lg.375remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.
--oj-core-border-radius-xl.5remScala di base pubblicata. I controlli nativi HTML del foglio di lavoro usano alcuni valori selezionati senza attribuirsi il comportamento dei componenti JET.

Tipografia del testo e dimensioni dei controlli

Fonte
Nome / regolaValore / configurazioneUtilizzo
--oj-typography-body-xs-font-size0.75remDichiarazioni del tema di base. L’esempio originale usa Arial come carattere di fallback; il layout della tabella e dei contenuti è codice applicativo.
--oj-typography-body-sm-font-size0.859remDichiarazioni del tema di base. L’esempio originale usa Arial come carattere di fallback; il layout della tabella e dei contenuti è codice applicativo.
--oj-typography-body-md-font-size1remDichiarazioni del tema di base. L’esempio originale usa Arial come carattere di fallback; il layout della tabella e dei contenuti è codice applicativo.
--oj-typography-body-lg-font-size1.125remDichiarazioni del tema di base. L’esempio originale usa Arial come carattere di fallback; il layout della tabella e dei contenuti è codice applicativo.
--oj-typography-body-xl-font-size1.25remDichiarazioni del tema di base. L’esempio originale usa Arial come carattere di fallback; il layout della tabella e dei contenuti è codice applicativo.
--oj-typography-body-md-line-height1.25Dichiarazioni del tema di base. L’esempio originale usa Arial come carattere di fallback; il layout della tabella e dei contenuti è codice applicativo.
--oj-button-height2.75remDichiarazioni del tema di base. L’esempio originale usa Arial come carattere di fallback; il layout della tabella e dei contenuti è codice applicativo.
--oj-button-border-radiusvar(--oj-core-border-radius-md)Dichiarazioni del tema di base. L’esempio originale usa Arial come carattere di fallback; il layout della tabella e dei contenuti è codice applicativo.

Confini pubblici degli stili

Fonte
Nome / regolaValore / configurazioneUtilizzo
Global theme overrides:root declarations after JET CSSUna ridefinizione a livello di root ha effetto su tutti i consumer di quella variabile pubblica.
Instance stylingA class scoped to the target componentLimita l’ambito di una variabile pubblica quando la modifica riguarda un solo componente nativo.
Redwood baseTracks Oracle visual changesSceglila quando l’obiettivo è riprodurre l’aspetto di Oracle; gli aggiornamenti possono cambiare i valori ereditati.
Stable baseAlternative for a distinct custom themeNon presentarla come identica a Redwood né presumere che tutte le funzionalità di inversione o ridimensionamento siano uguali.
Private variables--oj-private-* excludedL’esempio non basa il proprio riferimento pubblico su hook di implementazione privati.
03

Guida completa al sistema di progettazione sistema di design Oracle Redwood

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

DESIGN-oracle-redwood.md

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

Scarica la guida

Sistema di progettazione sistema di design Oracle Redwood e limiti delle versioni di JET

Indica con precisione il livello di implementazione

Redwood comprende più di una singola libreria di componenti scaricabile. Questa guida usa le basi pubbliche CSS incluse in Oracle JET 19.0.0, un riferimento concreto e consultabile. L’anteprima è un foglio di lavoro originale per la revisione delle scorte, realizzato con HTML/CSS e basato su quei valori; non istanzia oj-table, oj-input-number né altri elementi personalizzati nativi di JET. La descrizione esplicita dell’ambiente di esecuzione evita che si confondano le basi visive con un SDK completo per applicazioni Oracle.

Da questa guida su OpenDesign
  • Fonte di riferimento: CSS di Oracle JET 19 Redwood.
  • Ambiente di esecuzione dell’anteprima: HTML/CSS/JavaScript originali eseguiti nel browser nativo.
  • Dati e regole di convalida: esempio locale originale.

Tieni distinta l’adozione di applicazioni Oracle

Adottare Redwood in un prodotto Oracle SaaS, configurare un’applicazione JET e usare un tema pubblico come riferimento sono attività diverse. L’esempio non modifica un tenant, non si collega ai dati di magazzino e non esegue una migrazione del prodotto. Il documento locale completo è utile per studiare le regole visive e il modello degli stati; un’applicazione JET reale dovrebbe invece seguire la configurazione del framework specifica per la versione e la documentazione dei componenti nativi.

Ruoli semantici e valori della palette del sistema di progettazione sistema di design Oracle Redwood

Risolvi correttamente le dichiarazioni di base

Il riferimento recupera dal foglio di stile fissato la prima dichiarazione, quella di base, per ogni variabile pubblica. Gli ambiti invertiti o di densità definiti in seguito possono ridefinire lo stesso nome. Un’estrazione ingenua che seleziona l’ultima corrispondenza potrebbe quindi identificare un colore di primo piano invertito come colore predefinito del testo chiaro. La guida specifica l’ambito di base ed esclude gli hook --oj-private-* dal riferimento pubblicato.

Distingui i canali grezzi dai valori colore

Le variabili della palette come --oj-palette-brand-rgb-120 contengono tre canali RGB, mentre i ruoli semantici li racchiudono in rgb() o rgba(). L’azione originale usa i canali del brand tramite rgb(), il testo usa core-text-color-primary e la superficie della scheda usa core-bg-color-content. Copiare direttamente la stringa dei canali grezzi in background-color produce un valore CSS non valido, anche se i numeri sembrano plausibili.

Spaziatura, tipografia e densità del sistema di progettazione sistema di design Oracle Redwood

Usa la scala concreta delle basi

La sequenza pubblica core-spacing procede a incrementi di 4px, da 1x a 12x. I ruoli per bordi piccoli, medi, grandi ed extra-large sono distinti; l’altezza del pulsante è definita da una variabile separata del componente. Il foglio di lavoro usa questi valori effettivi dove opportuno e indica come scelte compositive originali il titolo da 32px, la trasformazione reattiva della tabella e la larghezza esterna di 1120px.

Non mescolare valori specifici della densità

In questo foglio di stile fissato, la dimensione base body-md è 1rem, con un’interlinea di 1.25; selettori successivi possono esporre valori scalati in pixel. La guida riporta il valore di base, senza suggerire che ogni contesto Redwood debba usare la stessa dimensione calcolata. L’esempio nel browser usa Arial come carattere di fallback, senza affermare che Oracle Sans sia caricato. Un’applicazione JET nativa dovrebbe verificare insieme la densità, il tema e la piattaforma scelti.

Struttura del foglio di lavoro ispirata al sistema di progettazione sistema di design Oracle Redwood

Rendi comprensibili dati e azioni

Ogni riga originale indica un materiale per lo studio, ne descrive l’unità di misura, confronta le scorte attuali con una soglia minima e propone un campo per inserire la quantità. Un’etichetta dello stato di revisione indica se l’articolo contribuisce alla bozza locale. Il riepilogo conta le unità dell’intera bozza, comprese le righe nascoste dal filtro. Sono dati di esempio fittizi, non prove sulle scorte né raccomandazioni d’acquisto.

Mantieni stabile l’identità delle righe durante l’ordinamento

Convalida delle quantità ispirata al sistema di progettazione sistema di design Oracle Redwood

Rifiuta i valori che non rispettano la regola locale dichiarata

Il campo quantità originale accetta numeri interi da zero a 99. I valori vuoti, negativi, frazionari o fuori intervallo mostrano un errore in linea e disabilitano l’azione di revisione. Il modello della bozza conserva l’ultima quantità valida finché non viene sostituita da una modifica valida. L’errore visibile chiarisce la differenza e i valori non validi non vengono inclusi nel totale sottoposto a revisione.

Spiega quando una modifica non valida viene scartata

Quando si modifica il filtro o l’ordinamento, le righe visibili vengono ricostruite a partire dagli ultimi valori validi della bozza; una modifica non valida e incompleta viene quindi scartata. È un limite intenzionale di questo esempio locale, non una garanzia di convalida nativa di JET. Una tabella modificabile in produzione potrebbe invece conservare le bozze non valide in ogni vista o impedire la navigazione; questo comportamento va progettato e verificato nel relativo modello degli stati.

Revisione e ripristino ispirati al sistema di progettazione sistema di design Oracle Redwood

Descrivi una revisione locale senza far credere che i dati vengano inviati

L’azione Rivedi questa bozza mostra un conteggio leggibile delle unità e degli articoli inclusi. Specifica chiaramente che non è stato inviato alcun ordine. L’azione accetta una bozza valida con zero unità, perché l’esempio non inventa una regola d’acquisto obbligatoria. Modificare una quantità cancella il messaggio della revisione precedente, così una bozza modificata non conserva una conferma ormai obsoleta.

Offri un ripristino prevedibile

Ripristina quantità riporta le quantità ai valori aggiuntivi suggeriti in origine e cancella il messaggio della revisione. Mantiene il filtro e l’ordinamento correnti, quindi ridisegna le righe usando il modello ripristinato. In questo modo il ripristino è visibile senza ricaricare la pagina. L’esempio non usa archiviazione né un backend, quindi anche ricaricando la pagina si ripristinano i dati locali iniziali.

Tabella reattiva ispirata al sistema di progettazione sistema di design Oracle Redwood

Mantieni la gerarchia delle informazioni sugli schermi stretti

Nel layout ampio, i dati sono presentati in una tabella con intestazioni di colonna e nomi degli articoli come intestazioni di riga. Sotto i 650px, le righe diventano blocchi leggibili e ogni cella mostra l’etichetta prima del valore. I campi di input restano entro la larghezza disponibile e la descrizione rimane associata al nome dell’articolo. Questa trasformazione è una scelta originale del codice applicativo CSS, non un’affermazione sul comportamento reattivo di oj-table.

Verifica gli stati modificati e filtrati

La verifica nel browser inserisce una quantità non valida, la corregge, ordina gli articoli, filtra quelli sotto la scorta minima e rivede il totale risultante prima di misurare il layout. Sono state verificate quattro larghezze, da 1440px a 280px. La verifica riguarda contenuti e cambiamenti di stato effettivi, non la semplice presenza di un contenitore di tabella vuoto.

Implementazione di riferimento completa del sistema di progettazione sistema di design Oracle Redwood

Esegui il documento completo fornito

L’esempio HTML include le dichiarazioni richieste delle variabili pubbliche, gli stili originali, i dati di esempio e tutti i gestori degli eventi. Salvalo come index.html e servi la directory: non mancano importazioni e non vengono effettuate chiamate esterne in fase di esecuzione. I valori di riferimento sono fissati a JET 19.0.0, anche se per eseguire l’implementazione locale non serve alcun pacchetto JET JavaScript.

  1. Salva il documento completo fornito come index.html.
  2. Servi la cartella tramite HTTP locale.
  3. Verifica quantità non valide e correzione.
  4. Ordina e filtra, quindi rivedi e ripristina la stessa bozza.

Usa i componenti JET nativi seguendo la relativa configurazione

Esempi di componenti del sistema di progettazione sistema di design Oracle Redwood

index.html — foglio di lavoro originale completo

Sottoinsieme completo di token pubblici, HTML reattivo, convalida, stato stabile delle righe e comportamento locale di revisione e ripristino.

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>

Riferimento del codice

  • Non si tratta intenzionalmente di oj-table né di oj-input-number.
  • Non è collegato ad alcuna applicazione Oracle, servizio di magazzino o endpoint per gli ordini.
04

Configurazione dell’agente del sistema di progettazione sistema di design Oracle Redwood

Punto di partenza per l’implementazione

Esegue l’interpretazione originale autonoma. L’adozione di JET nativo richiede una configurazione separata del framework, descritta nella documentazione ufficiale collegata.

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

Un prompt per il tuo progetto

Prompt per l’agente
Implementa il foglio di lavoro originale per la revisione delle scorte, ispirato a Redwood, usando variabili di base pubbliche di JET 19 verificate. Mantieni la sintassi dei canali RGB, lo stato delle quantità valide indicizzato per ID dell’articolo, i limiti di convalida, la conservazione dei dati durante l’ordinamento e il filtro, la revisione esclusivamente locale e il ripristino. Non descrivere questa implementazione per browser come JET nativo o come servizio Oracle.
05

Fonti e ambito del sistema di design Oracle Redwood

Un’interpretazione di OpenDesign basata sulle variabili pubbliche Redwood di Oracle JET 19. L’anteprima usa solo HTML/CSS/JavaScript, non componenti JET nativi né un servizio di inventario Oracle. Il fallback Arial è esplicito.