Atualizar 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 atualizar um registro de dados existente e enviá-lo para um serviço REST.

Objetivos

Ao concluir este tutorial, você aprenderá a atualizar um registro de dados existente e enviá-lo para 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 a 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.

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

2. Localize o elemento oj-button id="createButton" e adicione um segundo elemento oj-button abaixo dele. Defina o atributo on-oj-action como "[[showEditDialog]]" e o atributo disabled como "[[!itemSelected()]]".

   . . .
   <h3 id="itemsListHeader">Activity Items</h3>
    <oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
   <!-- If itemSelected is set to false, disabled is true, and vice versa. -->
   <oj-button id="updateButton" disabled="[[!itemSelected()]]" on-oj-action="[[showEditDialog]]">Update
     </oj-button>
   <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]"
   . . . 
   

3. Localize a tag oj-bind-if test="[[itemSelected()]]" e adicione um elemento oj-dialog dentro dela. Defina o atributo id como "editDialog" e o atributo class como no-display.

   . . . 
   <oj-bind-if test="[[itemSelected()]]">
      <oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
         </oj-dialog>
   <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
      <h3>Item Details</h3>
   . . .
   

4. Dentro do elemento oj-dialog criado, adicione duas tags div com os atributos slot="body" e slot="footer".

   <oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
   <div slot="body">
     </div>
   <div slot="footer">
     </div>
   </oj-dialog>
   

5. Adicione um elemento oj-button dentro do elemento div slot="footer" criado e defina o atributo on-oj-action="[[updateItemSubmit]]".

   <div slot="footer">
              <oj-button id="submitBtn" on-oj-action="[[updateItemSubmit]]">Submit
              </oj-button>
            </div>
   

6. Dentro da tag div slot="body" criada, adicione oj-label-value, um elemento oj-label e um elemento oj-input-text para o valor inputItemID.

   <div slot="body">
     <oj-label-value label-edge="inside">
      <oj-label for="chatWindow" slot="label">Item ID</oj-label>
      <div slot="value" class="slot-line">
        <oj-bind-text id="chatWindow" value="[[inputItemID]]" class="text-width"></oj-bind-text>
      </div>
    </oj-label-value>
   </div>
   

7. Abaixo do elemento oj-label-value, adicione elementos oj-input-text para os valores Name, Price e Description.

      
   <div slot="body">
      . . .
      </oj-label-value>
      <oj-label class="oj-label oj-label-value" for="createNewName">Name</oj-label>
      <oj-input-text id="createNewName" value='{{inputItemName}}'></oj-input-text>
      <oj-label class="oj-label oj-label-value" for="createNewPrice">Price</oj-label>
      <oj-input-text id="createNewPrice" value="{{inputPrice}}"></oj-input-text>
      <oj-label class="oj-label oj-label-value" for="createNewDesc">Description</oj-label>
      <oj-input-text id="createNewDesc" value="{{inputShortDesc}}"></oj-input-text>
   </div>
      
   

   Observe que você vincula o valor inputItemID usando colchetes, que indica associação unidirecional, porque o usuário não deve editar o valor do ID. Você vincula o inputItemName e outros valores usando chaves, o que indica a vinculação bidirecional e permite que o usuário substitua o valor.

8. Verifique se o componente Exibição de Lista com id="itemsList" especifica selectedItemChanged como um valor para o atributo on-first-selected-item-changed.

9. Salve o arquivo dashboard.html.

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

10. Navegue até o diretório JET_Web_Application/src/css e abra o arquivo app.css. Adicione as definições de estilo a seguir ao final do arquivo.

    . . .
    .no-display {
       display: none;
    }
    
    .slot-line {
       line-height: 2.4em;
    }
    
    .text-width {
       width: 100%;
       min-width: 100%;
    }
    

    Seu código deve ser semelhante a este arquivo final-css.txt.

Tarefa 2: Abertura do Diálogo no ViewModel

Declare os novos observáveis e métodos referenciados na view para que seu aplicativo Web Oracle JET seja inicializado com sucesso quando você o atender.

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

2. Na parte superior do arquivo dashboard.ts, verifique se os módulos do Oracle JET para o componente Caixa de Diálogo e o componente Texto de Entrada foram importados.

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

3. Na classe DashboardViewModel, abaixo do código anterior para criar um novo Item de Atividade, crie um método chamado showEditDialog para abrir a caixa de diálogo e recuperar os valores dos campos que você deseja atualizar.

   . . .
   public createItem = async (event: ojButtonEventMap["ojAction"]) => {
   . . .
    } // end createItem
   
   public showEditDialog = (event: ojButtonEventMap["ojAction"]) => {
   
         this.inputItemName(this.itemData().name);
         this.inputPrice(this.itemData().price);
         this.inputShortDesc(this.itemData().short_desc);
   
      (document.getElementById("editDialog") as ojDialog).open();
    }     
   

4. Abaixo do método showEditDialog, crie um método chamado updateItemSubmit para submeter os dados da caixa de diálogo e adicione um comando close.

   public showEditDialog = (event: ojButtonEventMap["ojAction"]) => {
   
         this.inputItemName(this.itemData().name);
         this.inputPrice(this.itemData().price);
         this.inputShortDesc(this.itemData().short_desc);
   
      (document.getElementById("editDialog") as ojDialog).open();
    }     
   
   public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
      (document.getElementById("editDialog") as ojDialog).close();
   }  
   

5. Salve o arquivo dashboard.ts. Seu código deve ser semelhante a este arquivo update-dashboard-ts.txt.

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

Crie objetos para armazenar os dados que você extrai da caixa de diálogo em sua view e envie-os ao serviço REST usando a API de Extração e o método HTTP PUT. Por fim, use o método mutate do RESTDataProvider na sua instância RESTDataProvider.

1. No arquivo dashboard.ts aberto, na classe DashboardViewModel, declare tipos para e inicialize as variáveis a seguir que você usará no método que envia dados.

   class DashboardViewModel {
      . . .
      // Fields in update dialog
      inputItemID: ko.Observable<number>;
      inputItemName: ko.Observable<string>;
      inputPrice: ko.Observable<number>;
      inputShortDesc: ko.Observable<string>; 
   
      //  Fields for delete button and update dialog, among others
      selectedRow = ko.observable<number>();
      . . .
   
      constructor() {
      . . .
         // Initialize fields in update dialog
         this.inputItemID = ko.observable();
         this.inputItemName = ko.observable();
         this.inputPrice = ko.observable();
         this.inputShortDesc = ko.observable();
   
      } // End constructor
   

2. No método updateItemSubmit acima da chamada close(), declare uma variável, row, para manter os valores de entrada na caixa de diálogo Atualizar Detalhes do Item. Inclua também uma instrução if para verificar se os dados foram selecionados.

   public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
       const currentRow = this.selectedRow; 
            if (currentRow != null) {
               const row = {
                  itemId: this.itemData().id,
                  name: this.inputItemName(),
                  price: this.inputPrice(),
                  short_desc: this.inputShortDesc()
               };
      }; // End if statement
    (document.getElementById("editDialog") as ojDialog).close();
   }  
   

3. Acima da chamada close(), crie uma solicitação para enviar os dados ao serviço REST.

   public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
   
    const currentRow = this.selectedRow;
   
    if (currentRow != null) {
   
      const row = {
      	. . .
         short_desc: this.inputShortDesc()
      };
   
   // Create and send request to update row on rest service
      const request = new Request(
   
        `${this.restServerURLItems}${this.itemData().id}`,
        {
          headers: new Headers({
            "Content-type": "application/json; charset=UTF-8",
          }),
          body: JSON.stringify(row),
          method: "PUT",
        }
      );
      const response = await fetch(request);
      const updatedRow = await response.json();  
    } // End if statement
    (document.getElementById("editDialog") as ojDialog).close();
   
   }  // update-item-end
   

4. Abaixo da solicitação para enviar dados ao serviço REST, crie um mutate update e chame o método mutate para notificar sua instância RESTDataProvider de que os dados foram atualizados. Chame também o método refresh() para atualizar os dados exibidos no browser.

   public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
   
   const currentRow = this.selectedRow; 
   
      if (currentRow != null) {
         . . .
   
      };
   
      const request = new Request(
   
      `${this.restServerURLItems}${this.itemData().id}`,
         {
            . . .
         }
         );
   
   . . . 
      const updatedRow = await response.json();
      // Create update mutate event and call mutate method
      // to notify dataprovider consumers that a row has been
      // updated
      const updatedRowKey = this.itemData().id;
      const updatedRowMetaData = { key: updatedRowKey };
      this.itemsDataProvider.mutate({
      update: {
         data: [updatedRow.items[0]],
         keys: new Set([updatedRowKey]),
         metadata: [updatedRowMetaData],
      },
      });
      this.itemsDataProvider.refresh();
   
      } // End if statement
      (document.getElementById("editDialog") as ojDialog).close();
   }  // update-item-end
   

5. Salve o arquivo dashboard.ts.

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

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

1. No browser, exiba as alterações dinâmicas em seu aplicativo Web.

2. No aplicativo Web, clique na atividade Baseball e, em seguida, clique no item SureFire Ball (Conjunto de 4).

3. Clique no botão Atualizar.

   A caixa de diálogo Atualizar Detalhes do Item é exibida.

4. Altere o preço de 20.5 para 21 e clique em Enviar.

   A seção é atualizada e o preço do item foi atualizado.

   

   Descrição da ilustração update_record.png

5. Feche a janela ou guia do browser que exibe seu aplicativo Web em execução.

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

Update data records in an Oracle JET web app

F49651-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.