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

Introduction

Ce tutoriel vous explique comment utiliser votre 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.

Prérequis

Environnement de développement configuré pour créer des applications Oracle JET Virtual DOM incluant une installation de Node.js
Achèvement du tutoriel précédent dans ce parcours de formation, Extraire des 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éez de nouveaux composants qui afficheront un bouton utilisé pour appeler la fonctionnalité permettant de créer un 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 enregistrement.

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

Ajoutez les entrées d'espace réservé 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 d'espace réservé 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 du dialogue

Importez les modules Oracle JET et déclarez les fonctions qui permettront à votre application Oracle JET Virtual DOM 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'instruction return, remplacez l'élément div existant par un nouvel élément div qui affiche un élément oj-button avec 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 hook 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'instruction 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 points d'accrochage Preact useRef et useEffect.

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

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

const CreateNewItemDialog = (props: Props) => {

   const createDialogRef = useRef<ojDialog>(null);

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

 return (
	

Avant l'instruction return, utilisez également le point d'accrochage (hook) 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

Accédez 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, ainsi que les modules des composants de présentation de formulaire et de texte d'entrée 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 fonction ActivityItemContainer, créez des variables qui utilisent le hook 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'instruction 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'instruction 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 boîte de dialogue

Accédez 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 hook 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'instruction 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 élément. Incluez également un élément <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'instruction return, utilisez le point d'accrochage 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

Accédez au répertoire JET-Virtual-DOM-app/src/components/ActivityItem et ouvrez le fichier ActivityItemContainer.tsx.
Dans l'instruction 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'instruction return, incluez une fonction createItem qui crée un élément et l'envoie au service REST back-end.

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 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 dans 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 élément s'ouvre.
Renseignez les détails d'un nouveau produit.
- Nom : SureFire Ball (Set of 4)
- Price : 20.5
- Description : Canvas balls for practice
- Quantité : En stock : 35
- Quantité : Expédiée : 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 (Ensemble de 4) dans la liste et affichez 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 le traitement batch des outils Oracle JET.

Etape suivante

Passez au tutoriel suivant de 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 Oracle JET Virtual DOM
Mettre à jour les enregistrements de données dans une application Oracle JET Virtual DOM
Supprimer des enregistrements de données dans une application Oracle JET Virtual DOM

Vous pouvez revenir à la page principale du parcours de formation DOM virtuel pour accéder à tous les modules sur la création d'applications DOM virtuelles.

Ressources de formation supplémentaires

Explorez d'autres ateliers sur le site docs.oracle.com/learn ou accédez à d'autres contenus d'apprentissage gratuits sur le canal Oracle Learning YouTube. En outre, visitez le site education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

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

Informations relatives au titre et au copyright

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

F70645-02

Oracle et/ou ses affiliés.