Observação:

Usar o APEX para criar um aplicativo usando uma planilha

Introdução

O Oracle Application Express (APEX) é uma plataforma de desenvolvimento de baixo código que permite aos clientes criar facilmente aplicativos seguros, escaláveis e deslumbrantes com recursos de classe mundial, que podem ser implantados em qualquer ambiente. Também está incluído gratuitamente em todas as versões atuais dos serviços Oracle Database, incluindo o Oracle Autonomous Data Warehouse e o Oracle Autonomous Transaction Processing.

Este laboratório mostrará como criar um aplicativo robusto do APEX com dados importados de uma planilha de negócios comum. Muitos clientes estão desperdiçando enormes quantidades de tempo e energia, mantendo seus fluxos de trabalho de negócios e dados críticos em planilhas não gerenciáveis. É um fato comum, as planilhas não são dimensionadas. E se seu cliente pudesse criar um aplicativo seguro, escalável e multiusuário com base nessa planilha que economizasse tempo e dinheiro? É isso que você vai aprender neste laboratório!

Introdução ao Laboratório APEX

Objetivos

Público-Alvo

Pré-requisitos

Criar uma Instância do Oracle Autonomous Database

O APEX é um recurso do Oracle Database, que inclui os serviços do Oracle Autonomous Data Warehouse e do Oracle Autonomous Transaction Processing. Usaremos uma instância do Oracle Autonomous Transaction Processing no OCI (Oracle Cloud Infrastructure) para hospedar e um espaço de trabalho do APEX.

Vídeo da Visão Geral

APEX Etapa 1

Fato divertido! O que é um espaço de trabalho do APEX?

Um espaço de trabalho do APEX é um domínio lógico no qual você define aplicativos do APEX. Cada espaço de trabalho é associado a um ou mais esquemas de banco de dados (usuários do banco de dados), que são usados para armazenar os objetos de banco de dados, como tabelas, views, pacotes e muito mais. Em geral, esses objetos de banco de dados são o que os aplicativos do APEX estão incorporados.

  1. Na Console do OCI, abra o menu de recursos, navegue até o Oracle Database e selecione Autonomous Transaction Processing.

  2. Na seção Escopo da Lista, escolha o compartimento Luna que foi designado à sua instância. Expanda os sinais de menos até encontrar o compartimento efêmero e selecione-o.

  3. Clique em Criar Autonomous Database.

  4. A única coisa que você precisa adicionar na página de configuração do Autonomous Database é uma senha para o usuário Admin. Role o formulário para baixo até a seção Criar credenciais de administrador e informe uma senha de 12 a 30 dígitos. Certifique-se de que seja alguém que você possa lembrar, porque você o usará posteriormente. Procure o formulário e aceite todos os padrões.

    Campo Informações Recomendadas
    Compartimento Verifique se o compartimento Luna foi selecionado
    Nome para exibição Aceitar o padrão
    Nome do banco de dados Aceitar o padrão
    Escolha um tipo de carga de trabalho Processamento de Transações
    Escolha um tipo de implantação Infraestrutura Compartilhada
    Versão do Banco de Dados 19c
    Contagem de OCPUs 1
    Armazenamento (TB) 1
    Nome do Usuário ADMIN (Não pode ser editado)
    Senha Criar uma senha de 12 a 30 caracteres
    Escolha o acesso à rede Permitir acesso seguro de todos os lugares
    Escolha um tipo de licença BYOL (Bring Your Own License)

  5. Clique em Criar Autonomous Database.

    O processo de criação do banco de dados levará alguns instantes. Como está sendo provisionado, o ícone ATP será exibido em laranja.

Uma vez concluído, o ícone ATP será exibido em verde e estará disponível. Certifique-se de ter uma pequena celebração como você levou apenas alguns momentos para lançar e configurar o banco de dados mais poderoso no mundo!

Configurar o Espaço de Trabalho do APEX

Como você acabou de criar uma nova instância do Oracle Autonomous Database, será necessário configurar o APEX para uso inicial. Nas próximas etapas, você fará log-in como administrador para inicializar um espaço de trabalho e criar um usuário chamado demo. Em seguida, você fará logout e login novamente como o novo usuário (demo) para começar a criar seu primeiro aplicativo incrível.

Vídeo da Visão Geral

APEX Etapa 2

  1. Clique na guia Tools para acessar a seção de ferramentas do banco de dados na qual você encontrará um link para o aplicativo APEX.

  2. Clique em Abrir APEX para começar.

  3. Informe a senha Admin que você usou para criar o Oracle Autonomous Database na primeira etapa e clique em Acessar a Administração.

  4. Clique em Criar Espaço de Trabalho.

  5. Na caixa de diálogo Criar Espaço de Trabalho, você criará um novo usuário junto com um novo espaço de trabalho para armazenar o aplicativo. Especifique as seguintes informações e clique em Criar Espaço de Trabalho:

    Propriedade Valor
    Usuário do Banco de Dados DEMONSTRAÇÃO
    Senha use a mesma senha usada anteriormente ou outra de sua escolha
    Nome do Espaço de Trabalho DEMONSTRAÇÃO


    Você criou com sucesso um novo espaço de trabalho chamado DEMO com um novo usuário chamado DEMO.

    Agora você precisará fazer logout do espaço de trabalho Admin e fazer log-in no espaço de trabalho DEMO. A maneira mais simples de fazer isso é clicar em DEMO na mensagem Espaço de Trabalho criado que provavelmente está na parte superior da tela.

  6. Isso fará logout do espaço de trabalho de administração e permitirá que você faça logon no novo espaço de trabalho DEMO. Preencha a senha e clique em Efetuar Sign-in.

Criar um Aplicativo Usando uma Planilha

Nesta seção, você aprenderá a criar um aplicativo do APEX usando dados importados de uma planilha. Para simplificar a demonstração, você usará dados de amostra incorporados no APEX. No entanto, as etapas seriam as mesmas se você estivesse fazendo upload de seus próprios dados ou de um cliente.

Agora que você está conectado ao seu espaço de trabalho, poderá começar a criar aplicativos do APEX. Você criará um aplicativo simples com base em uma planilha. Lembre-se de que o APEX é ótimo para vários aplicativos, desde aplicativos simples como esse até aplicativos grandes e sofisticados com base em objetos de banco de dados local, objetos SQL ativados para REST e até APIs REST.

Embora os desenvolvedores do APEX passem a maior parte do tempo no App Builder, você também deve investigar o SQL Workshop, onde poderá criar e manter objetos de banco de dados, o Team Development, onde poderá rastrear grandes projetos de desenvolvimento do APEX e a App Gallery, que contém inúmeros aplicativos e produtividade que podem ser instalados em questão de minutos.

Vídeo da Visão Geral

APEX Etapa 3

Carregar Dados do Projeto e das Tarefas

  1. Na home page do espaço de trabalho do APEX, clique em App Builder.

  2. Clique em Criar um Novo Aplicativo.

  3. Clique em De um Arquivo.

    Ao criar um aplicativo com base em um arquivo, o APEX permite que você faça upload de arquivos CSV, XLSX, XML ou JSON e, em seguida, crie aplicativos com base nos dados contidos nesses arquivos. Você também pode copiar e colar dados CSV ou carregar dados de amostra. Para esta demonstração, você carregará dados de amostra fornecidos com o aplicativo.

  4. No assistente Carregar Dados, clique na opção Copiar e Colar na parte superior.

  5. Selecione Projeto e Tarefas na lista de conjuntos de dados de amostra e clique em Próximo.

  6. Revise os dados analisados para o aplicativo de demonstração e clique em Próximo.

  7. Selecione Nova Tabela para carregar dados. Verifique se o Proprietário da Tabela está definido como Demonstração. Defina o Nome da Tabela como PROJECT_TASKS e clique em Carregar Dados.

    Depois de clicar em Carregar Dados, você verá um spinner até que o assistente conclua o carregamento dos dados.

    Observação: O assistente de Carga de Dados criou uma nova tabela e preencheu essa tabela com os registros dos dados de amostra. Agora você criará o aplicativo com base nos dados da nova tabela.

  8. Na caixa de diálogo Carregar Dados, verifique se 73 linhas foram carregadas na tabela PROJECT_TASKS e clique em Exibir Tabela.

  9. Agora você está no Object Browser, revise a estrutura da tabela e outras informações que serão criadas. Na barra de ferramentas Tabela, clique no botão Criar Aplicativo.

  10. Na página Criar Aplicativo, clique em Criar Aplicativo.

    Na página Criar Aplicativo, revise as páginas listadas, elas formarão a base do novo aplicativo. Você pode clicar no botão Editar de cada página para adicionar personalizações na frente se já souber o que deseja. Clique para revisar cada um, se tiver tempo.

  11. Em Recursos, clique no link Verificar Tudo para incluir todos os recursos disponíveis no seu aplicativo. Clique em Criar Aplicativo.

  12. Aguarde alguns instantes para que o aplicativo seja criado. Quando o assistente terminar, você será redirecionado para a home page do aplicativo no App Builder.

  13. Clique em Executar Aplicativo. Isso abrirá o aplicativo de runtime em uma nova guia do browser, permitindo que você veja como os usuários finais exibirão o aplicativo.

  14. Informe suas credenciais de usuário e clique em Entrar.

    Observação: Use o mesmo Nome de Usuário e Senha usados para acessar o APEX Workspace. (DEMONSTRAÇÃO)

  15. Explore o aplicativo e familiarize-se com a aparência geral.

  16. Clique em Painel de Controle (no menu inicial ou no menu de navegação) para exibir os gráficos padrão que foram criados automaticamente.

  17. Clique em Pesquisa de Tarefas de Projeto, no menu de navegação e experimente a pesquisa facetada. Tome uma nota mental sobre como as pesquisas funcionam, aqui você estará mostrando o cliente onde ele pode fazer melhorias no aplicativo e tornar os dados mais úteis.

  18. Clique em Relatório de Tarefas do Projeto para exibir um relatório interativo e, em seguida, clique no ícone de edição de um registro para exibir os detalhes em uma página de "formulário" editável.

  19. Em seguida, navegue até a página Calendário e revise os dados exibidos. Observe que o comportamento padrão permite que informações sejam exibidas ao passar o mouse sobre um evento e clicar em um evento não faz nada diferente.

    Observação: talvez você precise rolar vários meses para ver os dados.

  20. Por fim, verifique as opções disponíveis em Administração.

    Observação: Como bônus, na tela Administração, veja se você pode descobrir como alterar o Tema da Vita padrão para o tema Redwood Light.

Nesta seção, você obterá experiência em primeira mão com a personalização do aplicativo para casos de uso específicos. Você começará alterando a página de pesquisa facetada para ajudar a esclarecer os dados e torná-los mais utilizáveis para a situação específica. A pesquisa facetada permite que os usuários restrinjam os resultados da pesquisa usando filtros com base na classificação do item. A página de pesquisa inclui facetas à esquerda que podem ser facilmente usadas para limitar os dados mostrados no relatório à direita.

Vídeo da Visão Geral

APEX Etapa 4

Ao revisar a página Pesquisa de Tarefas do Projeto no aplicativo, você pode verificar e desmarcar várias facetas para criar diferentes exibições dos dados. Na exibição padrão, quando você verificar uma faceta, as contagens em todas as facetas restantes serão atualizadas para mostrar o número de registros que atendem aos novos critérios. Nós personalizaremos algumas das facetas nas etapas a seguir.

Ao observar as facetas, você observará que a seção Status está abaixo da página e pode usar caixas de seleção para escolher vários valores, um ou muitos.

  1. No aplicativo de runtime, vá para a página de pesquisa clicando em Pesquisa de Tarefas do Projeto. Como você executou esse aplicativo no APEX App Builder, uma barra de ferramentas do Developer é exibida na parte inferior da tela.

    Observação: Os usuários finais que fazem log-in diretamente no aplicativo não verão essa barra de ferramentas.

  2. Na barra de ferramentas Desenvolvedor, clique em Editar Página 3.

  3. Se preferir, você também poderá navegar de volta para a guia APEX App Builder no seu browser manualmente, selecionando a guia ou a janela apropriadas do browser. Quando estiver no App Builder, clique em 3 - Pesquisa de Tarefas do Projeto.

    Agora você deve estar no Designer de Páginas. Page Designer é onde você gastará a maioria de seu tempo melhorando seu aplicativo. Há três painéis no Designer de Página. O painel esquerdo inicialmente exibe a Árvore de Renderização, com uma lista de componentes de página. O painel do meio exibe o Layout, uma representação da página e a Galeria, a partir do qual é possível arrastar e soltar novos componentes no Layout. O painel direito é o Editor de Propriedades, onde você pode alterar os atributos do componente selecionado.

    O status é um critério de pesquisa muito comum, portanto, para tornar o aplicativo mais útil, você desejará reordenar as facetas para que o Status esteja entre Projeto e Atribuído a, tornando-o visível para uma melhor facilidade de uso.

  4. Na Árvore de Renderização (painel esquerdo), em Pesquisar, em Facetas, clique e segure P3_STATUS e arraste-o para cima até ficar em P3_PROJECT e solte o mouse.

    Atualmente, a faceta Status é uma série de caixas de seleção. No entanto, é improvável que os usuários desejem selecionar mais de uma de cada vez, portanto, você irá convertê-lo em um grupo de rádio.

  5. Continuando com P3_STATUS selecionado, no Editor de Propriedades (painel direito), localize Identificação e Tipo. Altere o tipo de Grupo de Caixa de Seleção para Grupo de Opção.

  6. Role o painel de propriedades mais para baixo e localize Entradas da Lista e, em seguida, Entradas de Contagem Zero e altere esse campo de Ocultar para Mostrar Último.

  7. No canto superior direito da página, clique em Salvar e Executar Página para salvar as alterações feitas nas facetas e revisar o aplicativo.

  8. No ambiente de runtime, clique em um dos status. Verifique como as contagens nas outras facetas são atualizadas com base em sua seleção. Além disso, observe como você ainda pode selecionar um dos outros status para classificar os dados rapidamente ou clique em Limpar para redefinir as opções.

    Você deve ter percebido que as facetas saem da parte inferior da página. Seria preferível recolher as últimas três facetas para facilitar a visualização de todas as opções disponíveis. Vamos cuidar disso nas próximas etapas.

  9. Navegue de volta para o ambiente de desenvolvimento (APEX App Builder) usando o link de edição na barra de ferramentas do Desenvolvedor ou navegando manualmente para a guia apropriada do browser.

  10. Na Árvore de Renderização (painel esquerdo), em Pesquisar, em Facetas, clique em P3_ASSIGNED_TO, mantenha pressionada a tecla Shift e clique em P3_COST para que três facetas sejam selecionadas. No Editor de Propriedades (painel direito), dentro do filtro na parte superior, informe collap, para que apenas dois atributos sejam exibidos. Em Avançado e Recolhido Inicialmente, altere a chave para selecionada.

    Observação: em vez de informar um filtro, você também pode rolar para baixo as propriedades até encontrar o atributo correto a ser atualizado.

  11. Clique em Salvar e Executar Página para ver a página de pesquisa aprimorada.

Bom trabalho! Agora, você já usou o aplicativo básico de planilha dos clientes e adicionou alguma funcionalidade que ajuda a melhorar sua usabilidade. Na próxima seção, você adicionará alguns aprimoramentos à seção de relatório.

Melhorar o Relatório e o Formulário

Nesta seção, você obterá informações sobre as habilidades dos Relatórios Interativos e aprenderá a aprimorar uma página de formulário do ponto de vista dos usuários finais. A página Relatório de Tarefas do Projeto utiliza um Relatório Interativo para exibir os registros. Os Relatórios Interativos são excessivamente poderosos, pois permitem que os usuários finais modifiquem quais dados são exibidos e alterem as características de exibição. Para este relatório, você adicionará uma quebra de coluna, uma coluna computacional, um agregado e um gráfico. Depois, você solicitará os dados e salvará o relatório para que todos vejam.

Vídeo da Visão Geral

APEX Etapa 5

Observação: Todas as etapas abaixo, exceto para salvar Relatórios Alternativos, podem ser executadas pelos usuários finais. Existem muitos recursos adicionais disponíveis para os usuários finais que não são abordados abaixo.

  1. No ambiente de tempo de execução, clique em Relatório de Tarefas do Projeto.

  2. Clique no cabeçalho da coluna Projeto e selecione Quebra de Controle, que é o ícone à direita sob o cabeçalho do projeto.

    Aqui você adicionará uma coluna computacional que comparará o orçamento com o custo do projeto. O APEX permite que os usuários finais definam novas colunas com base em colunas existentes em um relatório e na capacidade de adicionar cálculos. As colunas são selecionadas no cálculo usando uma letra associada a cada coluna.

  3. Na parte superior do relatório, clique em Ações, selecione Dados e, em seguida, selecione Computação.

  4. Na caixa de diálogo Cálculo recém-aberta, informe o nome da nova coluna como Custo do Orçamento V. Em seguida, use a lista suspensa em Máscara de Formato para escolher a máscara de R$ 5240,10, que será exibida como FML999G999G999G999G990D00. do que nós, o seletor de colunas para escolher as colunas que você deseja iniciar com I. Digite um espaço e um traço, em seguida, selecione a coluna H. Portanto, sua expressão será semelhante à do exemplo de imagem. Clique em Aplicar.

    Propriedade Valor
    Label de Coluna Orçamento V - Custo
    Máscara de Formato US$ 5234,10
    Expressão de Cálculo I - H


    Isso adiciona uma nova coluna Custo do Orçamento V ao relatório interativo.

  5. Para adicionar o Orçamento versus Custo para cada projeto, clique em Ações, selecione Dados e, em seguida, selecione Agregar.

  6. Na caixa de diálogo Agregar, selecione a função Soma e escolha sua nova coluna na lista suspensa, Custo do Orçamento V e clique em Aplicar.

    Embora você possa ver o orçamento total versus o custo de cada projeto, seria muito mais fácil visualizar os totais em um gráfico para ter uma visão geral de todos os projetos.

  7. No relatório, clique em Ações, selecione Gráfico. Use a lista suspensa para especificar as informações a seguir usando a seleção de Gráfico de Barras e clique em Aplicar.

    Propriedade Valor
    Nome do campo Projeto
    Valor **Orçamento V Custo
    Função Soma
    Classificar Rótulo-Crescente
    Orientação Horizontal


  8. Depois que você clicar em Aplicar, o gráfico será exibido. Passe o mouse sobre partes do gráfico interativo para exibir os dados. Alterne entre a exibição de relatório e a exibição de gráfico usando os ícones na parte superior do relatório à esquerda do botão Ações.

  9. Facilite a compilação dos dados. Certifique-se de que todos os registros sejam ordenados por data inicial e, em seguida, por data final em cada projeto. Na parte superior do relatório, clique no ícone Exibir Relatório, clique em Ações, selecione Dados e selecione Classificar.

  10. Na caixa de diálogo de classificação, especifique as informações a seguir e clique em Aplicar.

    Linha Propriedade Valor
    2 Coluna Data de início
    3 Coluna Data Final
    3 Ordenação de Nulos Nulo Sempre Último


    Agora que você fez modificações no Relatório Interativo, é importante salvar o layout do relatório. Os usuários finais têm a capacidade de salvar apenas Relatórios Privados que eles podem exibir ou Relatórios Públicos que outros usuários também podem exibir.

    Observação: Os desenvolvedores podem remover a capacidade de os usuários finais salvarem Relatórios Públicos alterando os atributos de relatório no Designer de Página.

    Os desenvolvedores podem salvar o relatório como o Relatório Principal (padrão) ou um Relatório Alternativo para que diferentes visualizações dos dados possam ser disponibilizadas em diferentes casos de uso. Nas próximas etapas, você salvará o relatório como um Relatório Alternativo.

  11. No relatório, clique em Ações, selecione Relatório e, em seguida, selecione Salvar Relatório.

  12. Em Salvar Relatório, na lista suspensa Salvar (Somente exibido para desenvolvedores), selecione Como Configurações de Relatório Padrão.

    Observação: Os usuários finais podem salvar relatórios Privados e Públicos; no entanto, somente os desenvolvedores (que executaram o aplicativo no App Builder) podem salvar os relatórios Principal e Alternativo.

  13. Em Salvar Relatório Padrão, selecione Alternativo, no campo Nome, informe Revisão de Orçamento e clique em Aplicar.

    Uma nova lista de seleção será exibida na parte superior do relatório, que lista todos os relatórios salvos disponíveis para o usuário.

  14. Retorne à exibição inicial do relatório e selecione 1. Relatório Principal e clique em Redefinir.

    Na próxima seção, melhoraremos as páginas do formulário. As páginas de formulário permitem que os usuários finais atualizem facilmente um único registro de informações. É muito comum que essas páginas sejam páginas modais, nas quais elas são exibidas na parte superior da página original, e a página original está acinzentada e não acessível sem antes fechar a página modal. As vantagens das páginas modais são que a mesma página pode ser chamada de várias outras páginas. Eles incluem todo o processamento, validações e assim por diante, dentro da definição da página, são fáceis de usar e proporcionam uma experiência do usuário muito direta.

    Por padrão, as páginas do formulário geradas pelo Assistente de Criação de Aplicativo são páginas modais. A página modal para manutenção das Tarefas do Projeto ocupa um estado real significativo. Isto poderia ser facilmente melhorado colocando as datas na mesma linha e o custo e o orçamento na mesma linha. Por fim, o status permite que todos os valores sejam informados; portanto, você deve restringir a entrada de dados adicionando uma lista de status permitidos.

  15. No ambiente de Runtime, na página Relatório de Tarefas do Projeto, clique no ícone de edição de qualquer registro.

    A página do formulário modal para o registro selecionado será exibida.

  16. Na barra de ferramentas Desenvolvedor, na parte inferior da tela, clique em Editar Página 5.

    Observação: Se tiver dificuldades ao navegar usando a barra de ferramentas do Desenvolvedor, navegue manualmente até a guia do browser do APEX App Builder. Se você estiver na home page do aplicativo, navegue até a página clicando em 5 - Tarefas do Projeto. Se já estiver em outra página no Designer de Página, use o seletor de página na barra de ferramentas para navegar até a página 5.

    Os itens podem ser movidos arrastando-os e soltando-os dentro do painel Layout. Você também pode arrastar novos componentes, como regiões, itens e botões da Galeria, abaixo do Layout, para o Layout.

  17. No Designer de Página, com a Página 5 carregada, no Layout (painel intermediário), clique em P5_END_DATE e continue mantendo o mouse inativo. Arraste o item para cima e para a direita, até que ele fique logo após P5_START_DATE e uma caixa amarela escura seja exibida. Solte o mouse para colocar o item no novo local.

    Como alternativa ao uso do recurso de arrastar e soltar, você também pode reposicionar itens usando atributos no Painel de Layout.

  18. (Método alternativo) No Designer de Página, no Layout (ou na Árvore de Renderização no painel esquerdo), selecione P5_BUDGET. No Editor de Propriedades (painel direito), em Layout, desmarque Iniciar Nova Linha.

    Observação: Assim que você desmarcar Iniciar Nova Linha, o item será movido para estar na mesma linha do item acima, no Layout.

    Em seguida, você aprimora o relatório para limitar a entrada de dados. Para limitar a entrada de dados de um item, uma das técnicas mais simples é converter um item de texto, que permite a inserção de dados em uma lista de seleção.

  19. No Designer de Página, na Árvore de Renderização (painel esquerdo), selecione P5_STATUS. No Editor de Propriedades (painel direito), especifique as seguintes informações:

    Grupo Atributo Valor
    Banco de Dados Tipo Selecionar Lista
    Lista de Valores Tipo Consulta SQL
      Exibir Valores Extras Desmarcar
      Valor de Exibição Nulo Digite - Selecionar Status -


  20. Em Lista de Valores e no campo Consulta SQL, informe o seguinte código:

    select distinct status d, status r
from project_tasks
order by 1

  21. É importante salvar as alterações antes do teste. No Designer de Página, na barra de ferramentas (na parte superior), clique em Salvar.

    Observação: Se você pressionar Salvar e Executar na barra de ferramentas, uma mensagem será exibida, em vez da página que está sendo executada. Esse é o comportamento esperado, pois as páginas modais não podem ser executadas diretamente no Designer de Página.

  22. Navegue de volta ao ambiente de tempo de execução e atualize o browser ou clique em Cancelar na página modal para retornar à página Relatório de Tarefas do Projeto.

  23. Na página Relatório de Tarefas do Projeto, clique no ícone de edição de qualquer registro. Revise o layout aprimorado e clique em Status para ver a lista de status disponíveis.

    Bem feito! Você aprendeu a personalizar a funcionalidade básica para geração de relatórios em seu aplicativo simples do APEX. Você mostrou como criar relacionamentos de dados simples e exibi-los na forma de gráfico. Você também demonstrou que mesmo os usuários finais poderão usar a funcionalidade avançada do APEX se isso for do interesse dos clientes. Na próxima seção, você irá mergulhar na aplicação do calendário.

Melhorar o calendário (opcional)

Nesta etapa, você aprenderá a aprimorar o calendário para um caso de uso do cliente. Você vinculará uma página de calendário existente a uma página de formulário modal. A página padrão Calendário exibe o projeto, em vez do nome da tarefa, e só mostra a data inicial, em que o cliente pode querer ver eventos baseados na duração. Alteraremos esses itens para ilustrar as personalizações básicas e começar a usar o calendário.

Visão Geral do Vídeo

APEX Etapa 6

  1. No ambiente de tempo de execução, clique em Calendário.

    Observação: Talvez você tenha que usar as setas na parte superior do calendário para navegar para meses anteriores ou posteriores para ver os dados exibidos.

  2. Na barra de ferramentas Desenvolvedor, clique em Editar Página 6. Como alternativa, navegue de volta até a guia do browser do APEX App Builder e navegue manualmente até a Página 6.

    Alteraremos a coluna que é exibida na exibição de calendário e faremos com base na duração dos eventos atualizando os atributos do calendário.

  3. No Designer de Página, no painel de renderização (painel esquerdo), clique na entrada Calendário e, em seguida, clique na guia Atributos que você encontrará no Editor de Propriedades como a segunda guia ao lado da guia Região.

  4. No Editor de Propriedades (painel direito), em Configurações e em Exibir Coluna, clique na lista suspensa para Exibir Coluna e selecione TASK_NAME e, na lista suspensa Coluna de Data Final, selecione END_DATE.

  5. No Designer de Página, na barra de ferramentas, clique em Salvar e Executar para revisar suas alterações.

    Dê uma olhada no calendário revisado e você pode perceber que talvez a mudança para eventos baseados em duração não será tão legal como você pensou que seria. Então, vamos fazer uma pequena alteração e remover a Coluna de Data Final adicionada acima.

  6. Volte para o APEX App Builder e, no Page Designer, selecione a Página 6. Na Árvore de Renderização (painel esquerdo), clique em Calendário e clique em Atributos novamente na guia da página à extrema direita.

  7. No Editor de Propriedades (painel direito), para Configurações e Coluna de Data Final, selecione - Selecionar - para limpar a entrada END_DATE e tornar seu calendário um pouco mais amigável ao usuário.

  8. No Designer de Página, clique em Salvar e Executar para ver o calendário aprimorado.

    O próximo aprimoramento que faremos é alterar o que clicar em um evento de calendário faz. Atualmente, quando você clica ou passa o mouse sobre uma entrada de calendário, ela mostra os detalhes do evento. O cliente acredita que seria mais útil permitir que os usuários finais se vinculem diretamente ao formulário Tarefa do Projeto para que possam atualizar facilmente os detalhes. Assim, vamos vincular itens no calendário nas próximas etapas.

  9. Navegue até o APEX App Builder e certifique-se de que o Designer de Página seja exibido com a Página 6 selecionada.

    Criaremos um link de exibição/edição da região Calendário para a Página 5, a página do formulário Tarefas do Projeto que você modificou no laboratório anterior.

  10. No Designer de Página, dentro da Árvore de Renderização (painel esquerdo), clique em Calendário e, em seguida, clique na guia Atributos no Editor de Propriedades (painel direito). Na seção Atributos Configurações, localize a entrada Exibir/Editar Link. Clique em onde ele diz Nenhum Link Definido.

  11. Use a lista suspensa e os campos de seleção para especificar as seguintes informações no formulário resultante e clique em OK:

    Propriedade Valor
    Tipo Página deste aplicativo
    Página 5
    Definir Itens > Nome P5_ID
    Definir Itens > Valor &ID.
    Limpar Cache 5
    Ação Redefinir Paginação


    É importante que o calendário seja atualizado sempre que o Nome da Tarefa ou a Data Inicial for alterado usando o novo link. Para garantir que a página seja atualizada adequadamente, é necessário definir uma Ação Dinâmica para atualizar a região do calendário quando a caixa de diálogo (página modal) for fechada. Uma Ação Dinâmica é uma forma declarativa de definir a interatividade do cliente. Os desenvolvedores especificam quando um evento é acionado, quais ações devem ser executadas e quais componentes a ação deve ser executada.

  12. No Designer de Página, na Árvore de Renderização (painel esquerdo), clique com o botão direito do mouse na região Calendário e escolha Criar Ação Dinâmica no menu.

  13. Com a Ação Dinâmica selecionada, no Editor de Propriedades (painel direito), especifique as seguintes informações:

    Grupo Propriedade Valor
    Banco de Dados Nome Atualizar Calendário
    Quando Evento Caixa de Diálogo Fechada
      Tipo de Seleção Região
      Região Calendário


  14. Na Árvore de Renderização (painel esquerdo), na ação Verdadeiro da Ação Dinâmica, selecione Mostrar. No Editor de Propriedades (painel direito), especifique as seguintes informações:

    Grupo Propriedade Valor
    Banco de Dados Ação Atualizar
    Elementos afetados Tipo de Seleção Região
      Região Calendário


  15. No Designer de Página, na barra de ferramentas, clique em Salvar e Executar para revisar o aplicativo concluído.

  16. No ambiente de tempo de execução, no Calendário, selecione um evento para exibir o comportamento aprimorado do calendário. Escolha um item no calendário e faça uma atualização. Na página do form Tarefa do Projeto, atualize o Nome da Tarefa e a Data Inicial. Clique em Aplicar Alterações.

  17. Confirme se o calendário é atualizado para mostrar os detalhes atualizados.

Boa! Você criou um Oracle Autonomous Transaction Database e converteu uma planilha de negócios típica em um aplicativo avançado. Você refinou os dados e ajustou muitos dos padrões para mostrar apenas algumas personalizações que os clientes podem optar por melhorar ainda mais seus aplicativos. Sinta-se à vontade para passar por esta demonstração até que você possa fazê-lo confortavelmente sem as instruções.

Agora você pode mostrar com confiança a um cliente o poder do APEX e do Oracle Autonomous Database!

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.