Criar um formulário para criar registros de dados em um aplicativo Web Oracle JET

Introdução

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

Objetivos

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

Pré-requisitos

Um ambiente de desenvolvimento configurado para criar aplicativos Oracle JET, com o runtime JavaScript, Node.js e a interface de linha de comando mais recente do Oracle JET instalada
Conclusão do tutorial anterior nesta programação de estudo, para que você tenha criado o aplicativo Web Oracle JET na pasta JET_Web_Application com um provedor de dados REST para extrair dados

Tarefa 1: Criar uma Caixa de Diálogo na View

Use o elemento HTML personalizado oj-dialog para coletar informações do formulário que você passa para um observável.

Navegue até o diretório JET_Web_Application/src/ts/views e abra o arquivo dashboard.html em um editor.
Localize o elemento h3 em que id="itemsListHeader". Abaixo dele, adicione um elemento oj-button e defina o atributo on-oj-action como "[[showCreateDialog]]".
```
<h3 id="itemsListHeader">Activity Items</h3>
 <oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
```

Localize o elemento oj-bind-if test="[[itemSelected()]]" e, acima dele, adicione um elemento oj-dialog. Defina o atributo id como "createDialog" e o estilo como "display:none".

. . .
   </oj-list-view>
</div>
<oj-dialog id="createDialog" style="display: none" dialog-title="Create New Item" cancel-behavior="icon">
   </oj-dialog>
<oj-bind-if test="[[itemSelected()]]">
   <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
. . .

Dentro do elemento oj-dialog criado, adicione dois elementos div filhos com os atributos slot="body" e slot="footer".

<oj-dialog id="createDialog" style="display: none" dialog-title="Create New Item" cancel-behavior="icon">
   <div slot="body">
      </div>
   <div slot="footer">
      </div>
</oj-dialog>

Adicione um elemento oj-button dentro do elemento div slot="footer" criado e defina o atributo on-oj-action="[[createItem]]".
```
<div slot="footer">
   <oj-button id="submitBtn" on-oj-action="[[createItem]]">Submit</oj-button>
</div>
```
Dentro do elemento div slot="body" criado, adicione um elemento oj-label e um elemento oj-input-text cada para os valores Activity ID e Name.
```
   
<div slot="body">
   <oj-label class="oj-label oj-label-value" for="createActivityId">Activity ID</oj-label>
   <oj-input-text id="createActivityId" readonly value="[[activityKey]]"></oj-input-text>
   <oj-label class="oj-label" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value="{{itemName}}"></oj-input-text>
</div>
   
```
Observe que você vincula o valor activityKey usando colchetes, que indica associação unidirecional, porque o usuário não deve editar o valor do ID da atividade. Você vincula o valor itemName usando chaves, o que indica a vinculação bidirecional e permite que o usuário substitua o valor.

Da mesma forma, abaixo do elemento HTML personalizado oj-input-text id="createNewName" criado, adicione elementos oj-input-text para os valores Price, Description, Quantity: In-Stock e Quantity: Shipped.

   
<div slot="body">
   <oj-label class="oj-label oj-label-value" for="createActivityId">Activity ID</oj-label>
   <oj-input-text id="createActivityId" readonly value="[[activityKey]]"></oj-input-text>
   <oj-label class="oj-label" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value="{{itemName}}"></oj-input-text>
   <oj-label class="oj-label" for="createNewPrice">Price</oj-label>
   <oj-input-text id="createNewPrice" value="{{price}}"></oj-input-text>
   <oj-label class="oj-label" for="createNewDesc">Description</oj-label>
   <oj-input-text id="createNewDesc" value="{{short_desc}}"></oj-input-text>
   <oj-label class="oj-label" for="createNewInStock">Quantity: In-Stock</oj-label>
   <oj-input-text id="createNewInStock" value="{{quantity_instock}}"></oj-input-text>
   <oj-label class="oj-label" for="createNewShipped">Quantity: Shipped</oj-label>
   <oj-input-text id="createNewShipped" value="{{quantity_shipped}}"></oj-input-text>

</div>
   

Salve o arquivo dashboard.html.

Seu código deve ser semelhante a este arquivo final-create-dashboard-html.txt.

Tarefa 2: Abertura do Diálogo no ViewModel

Declare os novos observáveis e funções referenciados na view para que seu aplicativo Web Oracle JET seja inicializado com sucesso quando você o atender.

Navegue até o diretório JET_Web_Application/src/ts/viewModels e abra o arquivo dashboard.ts em um editor.

Na parte superior do arquivo dashboard.ts, importe os módulos Oracle JET para os componentes Botão, Caixa de Diálogo e Texto de Entrada.

import * as AccUtils from "../accUtils";
. . .
import { ojDialog } from "ojs/ojdialog";
import "ojs/ojdialog";
import "ojs/ojinputtext";
import { ojButtonEventMap } from "ojs/ojbutton";
. . . 

Na lista de observáveis, declare e inicialize observáveis para os campos na caixa de diálogo de criação.

class DashboardViewModel {
   . . .

   //  Fields in Create dialog
   itemName: ko.Observable<string>;
   price: ko.Observable<number>;
   short_desc: ko.Observable<string>;
   quantity_instock: ko.Observable<number>;
   quantity_shipped: ko.Observable<number>;
   quantity: number;
   inputImageFile: string = 'css/images/product_images/jet_logo_256.png'
   . . .

   constructor() {
      . . . 
      // Initialize fields in create dialog
      this.itemName = ko.observable<string>();
      this.price = ko.observable<number>();
      this.short_desc = ko.observable<string>();
      this.quantity_instock = ko.observable<number>();
      this.quantity_shipped = ko.observable<number>();
      this.quantity = 0;
      // inputImageFile has already been initialized.
   } // Closing bracket for constructor method

Abaixo do método constructor(), adicione um método chamado showCreateDialog para abrir a caixa de diálogo.

. . .
constructor() {
. . . 
  } // Closing bracket for constructor method

// Open dialog
public showCreateDialog(event: ojButtonEventMap["ojAction"]) {
   (document.getElementById("createDialog") as ojDialog).open();
}

Abaixo do método showCreateDialog criado, adicione um método chamado createItem para submeter os dados da caixa de diálogo e adicione um comando de fechamento.

// Create item and close dialog
public createItem = async (event: ojButtonEventMap["ojAction"]) => {
 (document.getElementById("createDialog") as ojDialog).close();
} 

Salve o arquivo dashboard.ts.

Seu código deve ser semelhante a este arquivo create-dashboard-ts.txt.
Na janela do terminal, execute e teste seu aplicativo Web.
```
$ ojet serve
```
O painel Itens de Atividade agora contém um botão Criar. Quando você clica nele, uma caixa de diálogo é aberta.

Descrição da ilustração create_dialog.png
Deixe a janela do terminal e a janela do browser que exibe seu aplicativo Web aberto.

Tarefa 3: Tratar de Submeter a Entrada da Caixa de Diálogo no ViewModel

Recupere os dados da caixa de diálogo em ViewModel, envie-os ao serviço REST usando a API de Extração e o método HTTP POST e, finalmente, use o método mutate da RESTDataProvider para atualizar sua instância RESTDataProvider.

No arquivo dashboard.ts aberto, no método createItem acima da chamada close(), declare variáveis para armazenar os valores de entrada na caixa de diálogo Criar Novo Item. Além disso, calcule o valor de quantity com base nos valores de entrada para quantity_instock e quantity_shipped.

// Create item and close dialog
public createItem = async (event: ojButtonEventMap["ojAction"]) => {

   this.quantity = (Number(this.quantity_instock()) + Number(this.quantity_shipped()));

   const row = {
      name: this.itemName(),
      short_desc: this.short_desc(),
      price: this.price(),
      quantity_instock: this.quantity_instock(),
      quantity_shipped: this.quantity_shipped(),
      quantity: this.quantity,
      activity_id: this.activityKey,
      image: this.inputImageFile,
      };

  (document.getElementById("createDialog") as ojDialog).close();
} 

Abaixo da declaração da variável row, crie uma solicitação para enviar os dados para o serviço REST.

. . .
 const row = {
. . .
   image: this.inputImageFile,
 };
// Create and send request to REST service to add row
 const request = new Request(this.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();
 . . .

Abaixo da variável addedRow, crie um evento muta add e chame o método RESTDataProvider mutate para notificar sua instância RESTDataProvider de que uma nova linha foi adicionada. Você também chama o método RESTDataProvider refresh() para atualizar a exibição.

   . . .
   const addedRow = await response.json();
   // Create add mutate event and call mutate method
   // to notify dataprovider that a row has been
   // added
   const addedRowKey = addedRow[this.keyAttributes];
   const addedRowMetaData = { key: addedRowKey };
   this.itemsDataProvider.mutate({
   add: {
      data: [addedRow],
      keys: new Set([addedRowKey]),
      metadata: [addedRowMetaData],
   },
   });
   this.itemsDataProvider.refresh();
   // Close dialog      
   (document.getElementById("createDialog") as ojDialog).close();

} 

Salve o arquivo dashboard.ts.

Seu código deve ser semelhante a este arquivo final-create-dashboard-ts.txt.

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

No browser, exiba as alterações dinâmicas em seu aplicativo Web.
No aplicativo Web, 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 de Baseball.
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 Web em execução.
Na janela do terminal, pressione Ctrl+C e, se solicitado, digite y para sair do job em batch de ferramentas do Oracle JET.

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 web app

F49675-01

February 2022