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

Objetivos

Neste 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 DOM virtuais do Oracle JET que incluem uma instalação de Node.js
• Conclusão do tutorial anterior nesta programação de estudo, Criar um Formulário para Criar Registros de Dados em um Aplicativo Oracle JET Virtual DOM

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

Crie um novo componente que exibirá uma caixa de diálogo para chamar a funcionalidade para atualizar um registro.

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

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

   import { h } from "preact";
   
   type Props = {
     message?: string;
   };
   
   const EditItemDialog = (props: Props) => {
     return (
       <div class="oj-web-applayout-max-width oj-web-applayout-content">
         <p>content</p>
       </div>
     );
   };
   
   export default EditItemDialog;
   

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

Declare o tipo e a função no componente ItemActionsContainer para chamar o componente EditItemDialog que contém a funcionalidade para atualizar um registro.

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

2. Na parte superior do arquivo, importe os ganchos useState e useEffect Preact, defina as propriedades adicionais em um alias do tipo Props que você precisa para usar o componente EditItemDialog e defina um alias do tipo Item.

    import { h } from "preact";
    import "ojs/ojbutton";
    import { useState, useEffect } from "preact/hooks";
   
    type Props = {
        create: () => void;
        edit: () => void;
        itemSelected: Partial<Item>;
    };
   
    type Item = {
        id: number;
        name: string;
        short_desc?: string;
        price?: number;
        quantity?: number;
        quantity_shipped?: number;
        quantity_instock?: number;
        activity_id?: number;
        image?: string;
    };
   

3. Antes da instrução return, use os ganchos Preact que você importou para determinar se um item de atividade está selecionado.

    const ItemActionsContainer = (props: Props) => {
        const [hideActions, setHideActions] = useState<boolean>(true);
   
            if (props.itemSelected?.id) {
        console.log("Selected: " + JSON.stringify(props.itemSelected));
        }
   
        useEffect(() => {
        if (props.itemSelected?.id) {
            setHideActions(false);
        } else {
            setHideActions(true);
        }
        }, [props.itemSelected]);
   
        return (
   
   

4. Na instrução return, adicione um novo elemento oj-button com um atributo onojAction que faça referência à propriedade edit.

   const ItemActionsContainer = (props: Props) => {
    return (
      <div>
        <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
        <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
      </div>
   

   Salve o arquivo ItemActionsContainer.tsx. Seu código deve ser semelhante a ItemActionsContainer.tsx.txt

5. Na parte superior do arquivo EditItemDialog.tsx, importe os módulos para o componente do Oracle JET Dialog, bem como os ganchos useRef, useEffect, MutableRef e useState Preact.

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

6. No alias do tipo Props, crie as propriedades a seguir.

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

7. 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="editDialog" ref={editDialogRef as MutableRef<ojDialog>} 
                    dialogTitle="Update Item Details" onojClose={closeDialog} cancelBehavior="icon">
            <div slot="body">
            <oj-label-value labelEdge="inside">
                <oj-label for="itemid" slot="label">
                Item ID
                </oj-label>
                <div id="itemid" slot="value" class="slot-line">
                {editFormData?.id}
                </div>
            </oj-label-value>
        <oj-form-layout>
            <oj-input-text id="name" labelHint="Name" onvalueChanged={onChangeHandler} value={editFormData?.name}></oj-input-text>
            <oj-input-text id="price" labelHint="Price" onvalueChanged={onChangeHandler} value={editFormData?.price}></oj-input-text>
            <oj-input-text id="short_desc" labelHint="Description" 
                        onvalueChanged={onChangeHandler} value={editFormData?.short_desc}></oj-input-text>
            </oj-form-layout>
            </div>
            <div slot="footer">
            <oj-button id="submitBtn" onojAction={editItem}>
                Submit
            </oj-button>
            </div>
        </oj-dialog>
    </span>
    );
   

8. Antes da instrução return, adicione os métodos que os valores de atributo nos elementos personalizados filhos da referência de elemento personalizado oj-dialog. Por exemplo, o método onChangeHandler é chamado quando um componente oj-input-text detecta uma alteração por meio de seu atributo onvalueChanged.

    const EditItemDialog = (props: Props) => {
        const editDialogRef = useRef<ojDialog>();
        const [editFormData, setEditFormData] = useState<Partial<Item>>({});
   
        const onChangeHandler = (event: any) => {
        if (event.detail.updatedFrom === "internal") {
            setEditFormData({
            ...editFormData,
            [event.currentTarget.id]: event.detail.value,
            });
        }
        };
   
        const closeDialog = () => {
        props.closeDialog(editDialogRef as MutableRef<ojDialog>, "edit");
        };
   
        const editItem = () => {
        console.log("data: " + JSON.stringify(editFormData));
        props.editItem(editFormData, editDialogRef as MutableRef<ojDialog>);
        };
   
        useEffect(() => {
        setEditFormData(props.itemData);
        props.isOpened ? editDialogRef.current?.open() : editDialogRef.current?.close();
        }, [props.isOpened]);
   
        return (
   
   

9. Antes da declaração da função EditItemDialog, defina um alias do tipo Item que inclua campos para os dados que você atualiza e envia ao serviço REST.

   type Item = {
     id: number;
     name: string | undefined;
     short_desc?: string;
     price?: number;
     quantity?: number;
     quantity_shipped?: number;
     quantity_instock?: number;
     activity_id?: number;
     image?: string;
    };
   
    const EditItemDialog = (props: Props) => {
   

   Salve o arquivo EditItemDialog.tsx. Seu código deve ser semelhante a EditItemDialog.tsx.txt

Tarefa 3: Consumir o Componente EditItemDialog

1. Abra o arquivo ActivityItemContainer.tsx e importe o componente EditItemDialog que você criou na última tarefa mais o gancho MutableRef do Preact e o módulo Oracle JET do componente Caixa de Diálogo.

    import { useState, useCallback, MutableRef, useRef } from "preact/hooks";
    import EditItemDialog from "./EditItemDialog";
   

2. No alias do tipo Props, atualize a entrada de data para suportar o tipo any de RESTDataProvider e exclua ou comente o tipo ActivityItem que o componente não usa mais.

    type Props = {
      data?: RESTDataProvider<any, any>;
      selectedActivity: Item | null;
     	  onItemChanged: (item: Item) => void;
    };
   
   // type ActivityItem = {
    //   id: number;
    //   name: string;
    //   items: Array<Item>;
    //   short_desc: string;
    //   image: string;
    // };
   

3. Na instrução return, atualize o elemento ItemActionsContainer com valores de atributo itemSelected e edit. Após o elemento CreateNewItemDialog, adicione um novo elemento para o componente EditItemDialog importado.

    <div id="container">
        <h3>Activity Items</h3>
          <ItemActionsContainer create={openCreateDialog} itemSelected={activityItemValue} edit={openEditDialog} />
          . . . 
   </div>
    <CreateNewItemDialog isOpened={isCreateOpened} createNewItem={createItem} closeDialog={handleDialogClose} />
    <EditItemDialog isOpened={isEditOpened} editItem={editItem} closeDialog={handleDialogClose} itemData={itemData} />
     . . . 
   

4. Antes da instrução return, adicione a função openEditDialog para abrir a caixa de diálogo de edição e a função editItem para enviar o item de atividade atualizado ao serviço REST.

    const openEditDialog = () => {
        console.log("Item: " + JSON.stringify(itemData));
        setIsEditOpened(true);
        console.log("Edit dialog opened");
        };
   
    const editItem = async (newItemData:Partial<Item>, editDialogRef = useRef<ojDialog>()) => {
        if (newItemData != null) {
        const row = {
            itemId: newItemData.id,
            name: newItemData.name,
            price: newItemData.price,
            short_desc: newItemData.short_desc,
        };
   
        // Create and send request to update row on rest service
        const request = new Request(`${restServerURLItems}${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();
   
        // Create update mutate event and call mutate method
        // to notify dataprovider consumers that a row has been
        // updated
        const updatedRowKey = itemData.id;
        const updatedRowMetaData = { key: updatedRowKey };
        props.data?.mutate({
            update: {
            data: [updatedRow],
            keys: new Set([updatedRowKey]),
            metadata: [updatedRowMetaData],
            },
        });
        } // End if statement
        console.log("Edited item");
        editDialogRef.current?.close();
        };
   
   

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

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

1. Na janela do terminal, altere para o diretório JET-Virtual-DOM-app e execute o aplicativo DOM virtual.

    npx ojet serve
   

2. No navegador, exiba as alterações dinâmicas no seu aplicativo DOM virtual.
3. No aplicativo DOM virtual, clique na atividade Baseball e, em seguida, clique no item SureFire Ball (Conjunto de 4).

4. Clique no botão Atualizar.

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

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

   

6. Feche a janela ou guia do navegador que exibe seu aplicativo DOM virtual em execução.
7. 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

Update data records in an Oracle JET virtual DOM app

F70662-02

Copyright ©2024,2025,

Oracle e/ou suas empresas afiliadas.