Crie um form 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 a 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 Oracle JET que incluem uma instalação de Node.js
Conclusão do tutorial anterior nesta programação de estudo, Obter Dados de uma API REST em um Aplicativo Oracle JET Virtual DOM

Tarefa 1: Criar Componentes para Gerenciar Informações do Form

Crie novos componentes que exibirão um botão usado para chamar a funcionalidade para criar um novo registro. Um componente ItemActionsContainer manté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 o 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 renderiza um elemento oj-button por um atributo onojAction que faz 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 Oracle JET para o componente Caixa de Diálogo.
```
import { h } from "preact";
import "ojs/ojdialog";
import { ojDialog } from "ojs/ojdialog";
```

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

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

Na instrução return, substitua o elemento div existente por um elemento span que incorpora 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 Preact useRef e useEffect.

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,'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,'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 de Formulário e Texto de Entrada do Oracle JET.
```
import ItemActionsContainer from "./ItemActionsContainer";
import CreateNewItemDialog from "./CreateNewItemDialog";
import "ojs/ojformlayout";
import "ojs/ojinputtext";
```

Após a declaração da função ActivityItemContainer, crie variáveis que usam 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>();
 const [isEditOpened, setIsEditOpened] = useState<boolean>();

  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, type) => {
   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 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 { useRef, useEffect, useState } from "preact/hooks";

No alias do tipo Props, defina uma propriedade createNewItem.

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

Defina um alias do tipo Item que inclua campos para os dados enviados 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 os elementos oj-input-text dos campos de entrada para 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" 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, inclua as funções onChangeHander e createItem que os elementos do Oracle JET fazem referência.

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

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

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

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 definido 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: any) => {
  //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 @oracle/ojet-cli serve
```
No browser, 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 será 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 do Beisebol.
Clique no item SureFire Ball (Conjunto de 4) na lista e exiba seus detalhes.

Descrição da ilustração create_record.png
Feche a janela ou guia do browser que exibe seu aplicativo DOM virtual em execução.
Na janela do terminal, pressione Ctrl+C e, se solicitado, informe y para sair do job em batch do conjunto de ferramentas do Oracle JET.

Próxima Etapa

Para passar para o próximo tutorial nesta programação de estudo, clique aqui.

Mais Recursos de Aprendizagem

Explore outros laboratórios em docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal YouTube do Oracle Learning. Além disso, visite 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

F70628-01

December 2022