Créer un formulaire pour créer des enregistrements de données dans une application DOM virtuelle Oracle JET

Présentation

Ce tutoriel explique comment utiliser l'application DOM virtuelle Oracle JavaScript Extension Toolkit (Oracle JET) pour créer un enregistrement de données et le soumettre à un service REST.

Objectifs

Dans ce tutoriel, vous apprendrez à écrire des données dans un service REST.

Conditions requises

Environnement de développement configuré pour créer des applications DOM virtuelles Oracle JET incluant une installation de Node.js
Achèvement du tutoriel précédent dans ce cheminement d'apprentissage, extraction de données à partir d'une API REST dans une application Oracle JET Virtual DOM

Tâche 1 : Créer des composants pour gérer les informations de formulaire

Créer de nouveaux composants qui afficheront un bouton utilisé pour appeler la fonctionnalité de création d'un nouvel enregistrement. Un composant ItemActionsContainer contient le bouton qui permet aux utilisateurs de l'application DOM virtuelle d'appeler le composant CreateNewItemDialog qui contient la fonctionnalité permettant de créer un nouvel enregistrement.

Naviguez jusqu'au répertoire JET-Virtual-DOM-app/src/components/ActivityItem, créez un nouveau fichier CreateNewItemDialog.tsx et ouvrez-le dans un éditeur.

Ajoutez les entrées de paramètre fictif qui définissent un nom de fonction (CreateNewItemDialog) pour le nouveau composant.

import { h } from 'preact';

type Props = {
  message?: string;
};

const CreateNewItemDialog = (props: Props) => {
  return (
    <div class="oj-web-applayout-max-width oj-web-applayout-content">
      <p>content</p>
    </div>
  );
};

export default CreateNewItemDialog;

Dans le même répertoire, créez un fichier ItemActionsContainer.tsx et ouvrez-le dans un éditeur.

Ajoutez les entrées de paramètre fictif qui définissent un nom de fonction (ItemActionsContainer) pour le nouveau composant.

import { h } from 'preact';

type Props = {
  message?: string;
};

const ItemActionsContainer = (props: Props) => {
  return (
    <div class="oj-web-applayout-max-width oj-web-applayout-content">
      <p>content</p>
    </div>
  );
};

export default ItemActionsContainer;

Tâche 2 : Gérer l'ouverture de la boîte de dialogue

Importez les modules Oracle JET et déclarez les fonctions qui permettront à votre application DOM virtuelle Oracle JET d'ouvrir une boîte de dialogue.

En haut du fichier ItemActionsContainer.tsx ouvert, importez le module Oracle JET pour le composant Button.
```
import { h } from 'preact';
import 'ojs/ojbutton';
```
Définissez une propriété create dans l'alias de type Props pour gérer l'ouverture d'une boîte de dialogue de création.
```
import { h } from 'preact';
import 'ojs/ojbutton';

type Props = {
  create: () => void;
};
```
Dans l'énoncé return, remplacez l'élément div existant par un nouvel élément div qui affiche un élément oj-button par un attribut onojAction qui référence la propriété create.
```
const ItemActionsContainer = (props: Props) => {
   return (
      <div>
         <oj-button id="createButton" onojAction={props.create}>
         Create
         </oj-button>
      </div>
```
Enregistrez le fichier ItemActionsContainer.tsx. Votre code doit être similaire à ItemActionsContainer.tsx.txt

En haut du fichier CreateNewItemDialog.tsx ouvert, importez les modules Oracle JET pour le composant Dialog et le crochet MutableRef.

import { h } from 'preact';
import 'ojs/ojdialog';
import { ojDialog } from 'ojs/ojdialog';
import { MutableRef } from 'preact/hooks';

Définissez les propriétés isOpened et closeDialog dans l'alias de type Props.

type Props = {
  isOpened: boolean;
  closeDialog: (ref: MutableRef<ojDialog>, type: string) => void;
};

Dans l'énoncé return, remplacez l'élément div existant par un élément span qui encapsule l'élément personnalisé oj-dialog.

   return (
   <span>
      <oj-dialog id="createDialog" ref={createDialogRef} dialogTitle="Create New Item" onojClose={closeDialog} cancelBehavior="icon">
         <div slot="body">
         <p>dialog open</p>
         </div>
      </oj-dialog>
   </span>
   );

En haut du fichier CreateNewItemDialog.tsx, importez les crochets useRef et useEffect Preact.

import { h } from 'preact';
import { useRef, useEffect } from 'preact/hooks';
import 'ojs/ojdialog';
import { ojDialog } from 'ojs/ojdialog';

Avant l'énoncé return, déclarez les variables createDialogRef et closeDialog qui contiendront la référence extraite par le crochet Preact useRef.

const CreateNewItemDialog = (props: Props) => {

   const createDialogRef = useRef<ojDialog>(null);

   const closeDialog = () => {
      props.closeDialog(createDialogRef as MutableRef<ojDialog>, "create");
    }

 return (
	

Toujours avant l'énoncé return, utilisez le crochet useEffect pour écrire une expression qui définit une valeur pour la propriété isOpened.

 const CreateNewItemDialog = (props: Props) => {
     const createDialogRef = useRef<ojDialog>(null);

     const closeDialog = () => {
     props.closeDialog(createDialogRef as MutableRef<ojDialog>, "create");
     }

     useEffect(() => {
      props.isOpened
         ? createDialogRef.current?.open()
         : createDialogRef.current?.close();
     }, [props.isOpened]);

 return (

Enregistrez le fichier CreateNewItemDialog.tsx. Votre code doit être similaire à CreateNewItemDialog-1.tsx.txt

Naviguez jusqu'au répertoire JET-Virtual-DOM-app/src/components/ActivityItem et ouvrez le fichier ActivityItemContainer.tsx.

En haut de ActivityItemContainer.tsx, importez les composants ItemActionsContainer et CreateNewItemDialog que vous venez de créer et importez également les modules pour les composants Disposition de formulaire et Texte d'entrée d'Oracle JET.

import ItemActionsContainer from "./ItemActionsContainer";
import CreateNewItemDialog from "./CreateNewItemDialog";
import "ojs/ojformlayout";
import "ojs/ojinputtext";
import { ojDialog } from "ojs/ojdialog";
import { MutableRef} from "preact/hooks"

Après la déclaration de la fonction ActivityItemContainer, créez des variables qui utilisent le crochet useState de Preact et une fonction (openCreateDialog) pour ouvrir la boîte de dialogue.

Nous incluons également une entrée qui gère l'état ouvert d'une boîte de dialogue Modifier que nous créons dans un tutoriel ultérieur.

const ActivityItemContainer = (props: Props) => {
 const [isCreateOpened, setIsCreateOpened] = useState<boolean>(false);
 const [isEditOpened, setIsEditOpened] = useState<boolean>(false);

  const openCreateDialog = () => {
     console.log("CreateNewItemDialog called");
     setIsCreateOpened(true);
  };

Avant l'énoncé return, incluez également une fonction qui ferme une boîte de dialogue ouverte.

const handleDialogClose = (ref: MutableRef<ojDialog>, type: string) => {
   type === "create" ? setIsCreateOpened(false) : setIsEditOpened(false);
   ref.current.close();
};

return (
   <div id="activityItemsContainer" class=. . .>

Dans l'énoncé return, incluez les composants ItemActionsContainer et CreateNewItemDialog nouvellement créés.

return (
<div id="activityItemsContainer" . . .>
 <div id="container">
   <h3>Activity Items</h3>
    <ItemActionsContainer create={openCreateDialog} />
    <CreateNewItemDialog isOpened={isCreateOpened} closeDialog={handleDialogClose} />

Enregistrez le fichier ActivityItemContainer.tsx. Votre code doit être similaire à ActivityItemContainer-1.tsx.txt

Tâche 3 : Gérer la soumission de l'entrée de dialogue

Naviguez jusqu'au répertoire JET-Virtual-DOM-app/src/components/ActivityItem et ouvrez le fichier CreateNewItemDialog.tsx.

En haut du fichier CreateNewItemDialog.tsx ouvert, importez le crochet useState de Preact.

import { ojDialog } from 'ojs/ojdialog';
import { MutableRef, useRef, useEffect, useState } from "preact/hooks"

Dans l'alias de type Props, définissez une propriété createNewItem.

type Props = {
     isOpened: boolean;
     closeDialog: (ref: MutableRef<ojDialog>, type: string) => void;
     createNewItem: (data: Partial<Item>, ref: MutableRef<ojDialog>) => void;
 };

Définissez un alias de type Item qui inclut des champs pour les données que vous envoyez au service REST.

type Item = {
  name?: string | undefined;
  short_desc?: string;
  price?: number;
  quantity_shipped?: number;
  quantity_instock?: number;
};

Recherchez l'élément personnalisé oj-dialog dans l'énoncé return et remplacez le contenu de <div slot="body"> par un élément oj-form-layout et des éléments oj-input-text pour les champs d'entrée afin de créer un nouvel élément. Incluez également <div slot="footer"> avec un élément oj-button.

<oj-dialog id="createDialog" ref={createDialogRef} dialogTitle="Create New Item" onojClose={closeDialog} cancelBehavior="icon">
    <div slot="body">
       <oj-form-layout>
       <oj-input-text id="name" labelHint="Name" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="price" labelHint="Price" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="short_desc" labelHint="Description" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="quantity_instock" labelHint="Quantity: In-Stock" onvalueChanged={onChangeHandler}></oj-input-text>
       <oj-input-text id="quantity_shipped" labelHint="Quantity: Shipped" onvalueChanged={onChangeHandler}></oj-input-text>
       </oj-form-layout>
    </div>
    <div slot="footer">
       <oj-button id="submitBtn" onojAction={createItem}>Submit</oj-button>
    </div>
 </oj-dialog>

Avant l'énoncé return, utilisez le crochet useState et incluez les fonctions onChangeHander et createItem référencées par les éléments Oracle JET.

const [formData, setFormData] = useState<Partial<Item>>({});

 const onChangeHandler = (event: any) => {
    setFormData({
       ...formData,
       [event.currentTarget.id]: event.detail.value,
    });
 }

 const createItem = () => {
    console.log("data: " + JSON.stringify(formData));
    props.createNewItem(formData, createDialogRef as MutableRef<ojDialog>);
 };

 return (
   <span>. . .

Enregistrez le fichier CreateNewItemDialog.tsx. Votre code doit être similaire à CreateNewItemDialog-2.tsx.txt

Naviguez jusqu'au répertoire JET-Virtual-DOM-app/src/components/ActivityItem et ouvrez le fichier ActivityItemContainer.tsx.
Dans l'énoncé return, mettez à jour la classe CreateNewItemDialog pour inclure la méthode createNewItem que vous avez définie dans le composant CreateNewItemDialog.
```
<CreateNewItemDialog isOpened={isCreateOpened} createNewItem={createItem} closeDialog={handleDialogClose} />
```

Avant l'énoncé return, incluez une nouvelle fonction createItem qui crée un nouvel élément et l'envoie au service REST dorsal.

const createItem = async (data: Partial<Item>, createDialogRef: MutableRef<ojDialog>) => {
  //process create command and close dialog on success
  if (data?.name) {
     let quantity = Number(data.quantity_instock) + Number(data.quantity_shipped);
     const row = {
       name: data.name,
       short_desc: data.short_desc,
       price: data.price,
       quantity_instock: data.quantity_instock,
       quantity_shipped: data.quantity_shipped,
       quantity: quantity,
       activity_id: props.selectedActivity?.id,
       image: "css/images/product_images/jet_logo_256.png",
     };

     // Create and send request to REST service to add row
     const request = new Request(restServerURLItems, {
       headers: new Headers({
         "Content-type": "application/json; charset=UTF-8",
       }),
       body: JSON.stringify(row),
       method: "POST",
     });

     const response = await fetch(request);
     const addedRow = await response.json();

     activityItemDataProvider?.refresh();
     // Close dialog
     console.log("Created new item");
     createDialogRef.current.close();
   }
 };

Après la déclaration de la fonction ActivityItemContainer, définissez une variable qui référence l'URL à utiliser pour envoyer l'élément au service REST.

const ActivityItemContainer = (props: Props) => {
    const activityItemDataProvider = props.data;
    const restServerURLItems = "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/" + props.selectedActivity?.id + "/items/";

Enregistrez le fichier ActivityItemContainer.tsx. Votre code doit être similaire à ActivityItemContainer-2.tsx.txt

Tâche 4 : Tester le code et créer un enregistrement

Dans la fenêtre de terminal, accédez au répertoire JET-Virtual-DOM-app et exécutez l'application DOM virtuelle.
```
npx ojet serve
```
Dans le navigateur, affichez les modifications dynamiques de votre application DOM virtuelle.
Dans l'application DOM virtuelle, cliquez sur l'activité Baseball.
Cliquez sur Créer.

La boîte de dialogue Créer un nouvel article s'ouvre.
Entrez les détails d'un nouvel article.
- Nom : SureFire Ball (Set of 4)
- Tarif : 20.5
- Description : Canvas balls for practice
- Quantité : En stock : 35
- Quantité : Expédié : 61
Cliquez sur Soumettre.

La section est actualisée et l'élément fait partie de la liste des éléments d'activité Baseball.
Cliquez sur l'élément SureFire Ball (Jeu de 4) dans la liste et consultez ses détails.
Fermez la fenêtre ou l'onglet du navigateur qui affiche votre application DOM virtuelle en cours d'exécution.
Dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter la tâche par lots d'outils Oracle JET.

Étape suivante

Passez au tutoriel suivant dans ce module.

Ce tutoriel fait partie du module Opérations CRUD à l'aide d'un service REST.

Extraire des données à partir de l'API REST dans Oracle JET
Créer un formulaire pour créer des enregistrements de données dans une application DOM virtuelle Oracle JET
Mettre à jour les enregistrements de données dans une application DOM virtuelle Oracle JET
Supprimer des enregistrements de données dans une application DOM virtuelle Oracle JET

Vous pouvez retourner à la page principale du cheminement d'apprentissage DOM virtuel pour accéder à tous les modules de la création d'applications DOM virtuelles.

Ressources d'apprentissage supplémentaires

Explorez d'autres laboratoires sur le site docs.oracle.com/learn ou accédez à plus de contenu d'apprentissage gratuit sur le canal Oracle Learning YouTube. De plus, visitez education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

Pour obtenir la documentation sur le produit, visitez Oracle Help Center.

Titre et informations sur les droits d'auteur

Create a form to create data records in an Oracle JET virtual DOM app

G40644-01

Oracle et/ou ses sociétés affiliées.