Criar um formulário para criar registros de dados em um aplicativo DOM virtual do Oracle JET

Introdução

Este tutorial mostra como usar o aplicativo DOM virtual do Oracle JavaScript Extension Toolkit (Oracle JET) para criar um registro de dados e enviá-lo para um serviço REST.

Objetivos

Neste tutorial, você aprenderá a gravar dados em um serviço REST.

Pré-requisitos

Um ambiente de desenvolvimento configurado para criar aplicativos DOM virtuais do Oracle JET que incluem uma instalação de Node.js
Conclusão do tutorial anterior nesta programação de estudo, Fetch Data from a REST API in an Oracle JET Virtual DOM App

Tarefa 1: Criar Componentes para Gerenciar Informações do Formulário

Crie novos componentes que exibirão um botão usado para chamar a funcionalidade para criar um novo registro. Um componente ItemActionsContainer contém o botão que permite que os usuários do aplicativo DOM virtual chamem o componente CreateNewItemDialog que contém a funcionalidade para criar um novo registro.

Navegue até o diretório JET-Virtual-DOM-app/src/components/ActivityItem, crie um novo arquivo CreateNewItemDialog.tsx e abra-o em um editor.

Adicione as entradas de placeholder que definem um nome de função (CreateNewItemDialog) para o novo componente.

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;

No mesmo diretório, crie um arquivo ItemActionsContainer.tsx e abra-o em um editor.

Adicione as entradas de placeholder que definem um nome de função (ItemActionsContainer) para o novo componente.

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;

Tarefa 2: Tratar de abrir a caixa de diálogo

Importe os módulos do Oracle JET e declare as funções que permitirão que seu aplicativo Oracle JET DOM virtual abra uma caixa de diálogo com sucesso.

Na parte superior do arquivo ItemActionsContainer.tsx aberto, importe o módulo Oracle JET para o componente Botão.
```
import { h } from 'preact';
import 'ojs/ojbutton';
```
Defina uma propriedade create no alias do tipo Props para gerenciar a abertura de uma caixa de diálogo de criação.
```
import { h } from 'preact';
import 'ojs/ojbutton';

type Props = {
  create: () => void;
};
```
Na instrução return, substitua o elemento div existente por um novo elemento div que renderize um elemento oj-button por um atributo onojAction que faça referência à propriedade create.
```
const ItemActionsContainer = (props: Props) => {
   return (
      <div>
         <oj-button id="createButton" onojAction={props.create}>
         Create
         </oj-button>
      </div>
```
Salve o arquivo ItemActionsContainer.tsx. Seu código deve ser semelhante a ItemActionsContainer.tsx.txt

Na parte superior do arquivo CreateNewItemDialog.tsx aberto, importe os módulos do Oracle JET para o componente Diálogo e o gancho MutableRef.

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

Defina as propriedades isOpened e closeDialog no alias do tipo Props.

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

Na instrução return, substitua o elemento div existente por um elemento span que envolve o elemento personalizado 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>
   );

Na parte superior do arquivo CreateNewItemDialog.tsx, importe os ganchos useRef e useEffect Preact.

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

Antes da instrução return, declare as variáveis createDialogRef e closeDialog que conterão a referência que o gancho Preact useRef recupera.

const CreateNewItemDialog = (props: Props) => {

   const createDialogRef = useRef<ojDialog>(null);

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

 return (
	

Também antes da instrução return, use o gancho useEffect para gravar uma expressão que defina um valor para a propriedade 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 (

Salve o arquivo CreateNewItemDialog.tsx. Seu código deve ser semelhante a CreateNewItemDialog-1.tsx.txt

Navegue até o diretório JET-Virtual-DOM-app/src/components/ActivityItem e abra o arquivo ActivityItemContainer.tsx.

Na parte superior de ActivityItemContainer.tsx, importe os componentes ItemActionsContainer e CreateNewItemDialog que você acabou de criar e também importe os módulos para os componentes Layout do Formulário do Oracle JET e Texto de Entrada.

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

Após a declaração da função ActivityItemContainer, crie variáveis que usem o gancho useState do Preact e uma função (openCreateDialog) para abrir a caixa de diálogo.

Também incluímos uma entrada que gerencia o estado aberto de uma caixa de diálogo Editar que criamos em um tutorial posterior.

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

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

Antes da instrução return, inclua também uma função que feche uma caixa de diálogo aberta.

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

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

Na instrução return, inclua os componentes ItemActionsContainer e CreateNewItemDialog recém-criados.

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

Salve o arquivo ActivityItemContainer.tsx. Seu código deve ser semelhante a ActivityItemContainer-1.tsx.txt

Tarefa 3: Tratar o Envio da Entrada da Caixa de Diálogo

Navegue até o diretório JET-Virtual-DOM-app/src/components/ActivityItem e abra o arquivo CreateNewItemDialog.tsx.

Na parte superior do arquivo CreateNewItemDialog.tsx aberto, importe o gancho useState do Preact.

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

No alias do tipo Props, defina uma propriedade createNewItem.

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

Defina um alias do tipo Item que inclua campos para os dados que você envia ao serviço REST.

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

Localize o elemento personalizado oj-dialog na instrução return e substitua o conteúdo de <div slot="body"> por um elemento oj-form-layout e elementos oj-input-text para os campos de entrada a fim de criar um novo item. Inclua também um <div slot="footer"> com um elemento 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>

Antes da instrução return, use o gancho useState e inclua as funções onChangeHander e createItem às quais os elementos do Oracle JET fazem referência.

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>. . .

Salve o arquivo CreateNewItemDialog.tsx. Seu código deve ser semelhante a CreateNewItemDialog-2.tsx.txt

Navegue até o diretório JET-Virtual-DOM-app/src/components/ActivityItem e abra o arquivo ActivityItemContainer.tsx.
Na instrução return, atualize a classe CreateNewItemDialog para incluir o método createNewItem que você definiu no componente CreateNewItemDialog.
```
<CreateNewItemDialog isOpened={isCreateOpened} createNewItem={createItem} closeDialog={handleDialogClose} />
```

Antes da instrução return, inclua uma nova função createItem que crie um novo item e o envie para o serviço REST de backend.

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();
   }
 };

Após a declaração da função ActivityItemContainer, defina uma variável que faça referência ao URL a ser usado para enviar o item ao serviço REST.

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

Salve o arquivo ActivityItemContainer.tsx. Seu código deve ser semelhante a ActivityItemContainer-2.tsx.txt

Tarefa 4: Testar o Código e Criar um Registro

Na janela do terminal, altere para o diretório JET-Virtual-DOM-app e execute o aplicativo DOM virtual.
```
npx ojet serve
```
No navegador, exiba as alterações dinâmicas no seu aplicativo DOM virtual.
No aplicativo DOM virtual, clique na atividade Baseball.
Clique em Criar.

A caixa de diálogo Criar Novo Item é aberta.
Preencha os detalhes de um novo item.
- Nome: SureFire Ball (Set of 4)
- Preço: 20.5
- Descrição: Canvas balls for practice
- Quantidade: Em Estoque: 35
- Quantidade: Enviada: 61
Clique em Submeter.

A seção é atualizada e o item faz parte da lista de itens de atividade de beisebol.
Clique no item SureFire Ball (Conjunto de 4) na lista e exiba seus detalhes.
Feche a janela ou guia do navegador que exibe seu aplicativo DOM virtual em execução.
Na janela do terminal, pressione Ctrl+C e, se solicitado, digite y para sair da tarefa em batch de ferramentas do Oracle JET.

Próxima Etapa

Prossiga para o próximo tutorial neste módulo.

Este tutorial faz parte do módulo Operações CRUD Usando um Serviço REST.

Extrair Dados da API REST no Oracle JET
Criar um Formulário para Criar Registros de Dados em um Aplicativo Oracle JET Virtual DOM
Atualizar Registros de Dados em um Aplicativo Oracle JET Virtual DOM
Excluir Registros de Dados em um Aplicativo Oracle JET Virtual DOM

Você pode retornar à página principal da programação de estudo do DOM virtual para acessar todos os módulos na criação de aplicativos DOM virtuais.

Mais Recursos de Aprendizado

Explore outros laboratórios em docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal do Oracle Learning YouTube. Além disso, acesse education.oracle.com/learning-explorer para se tornar um Oracle Learning Explorer.

Para obter a documentação do produto, visite o Oracle Help Center.

Título e Informações de Copyright

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

F70653-02

Oracle e/ou suas empresas afiliadas.