TRI - Gustavo - Leal - Overview 4 Semana

TRI: Technical Services – Gustavo de Freitas Tosta Leal - Semana 4
Oracle Integration Cloud (OIC) - Visual Builder (Telas - Oracle ERP Cloud)
Semana 4
Gustavo de Freitas Tosta Leal
26 de setembro a 30 de setembro de 2022
Segunda – Feira
1. Introdução ao Visual Builder

2. Experiência de Desenvolvimento Visual
3. Fácil acesso aos dados
4. Plataforma de Desenvolvimento e Hospedagem
5. Acesse o Oracle Visual Builder
Sobre o Oracle Visual Builder

O Oracle Visual Builder é um ambiente de nuvem visual e declarativo para
desenvolver e hospedar aplicativos móveis e da Web envolventes.
Experiência de Desenvolvimento Visual
Ele fornece ferramentas de desenvolvimento visual simples, mas poderosas,

para criar aplicativos móveis e da Web responsivos, tudo sem a necessidade de
instalar nenhum software adicional. Esse rico conjunto de ferramentas visuais
ajuda você a projetar rapidamente seu aplicativo arrastando e soltando
componentes de interface do usuário e personalizando seus atributos para
definir o comportamento. Embora essas ferramentas se prestem a
desenvolvedores de pouco código, desenvolvedores experientes podem acessar
facilmente o código-fonte subjacente e até estendê-lo usando técnicas padrão
de HTML5, JavaScript e CSS para necessidades complexas.
Fácil acesso aos dados
O Visual Builder facilita o acesso aos dados do seu aplicativo por meio de
serviços baseados em REST. Assim, você pode criar objetos de negócios
reutilizáveis para implementar a lógica de negócios do seu aplicativo e
armazenar seus dados, que podem ser gerenciados por meio de pontos de
extremidade REST que o Visual Builder gera para você. Ou você pode escolher
objetos de dados expostos por aplicativos Oracle SaaS ou Oracle Integration em
um catálogo integrado de serviços REST. Você também pode acessar dados de
qualquer serviço REST externo com apenas alguns cliques.
Plataforma de Desenvolvimento e Hospedagem
O Visual Builder é uma ferramenta de desenvolvimento completa, bem como

uma plataforma de hospedagem, o que significa que você pode gerenciar o ciclo
de vida do seu aplicativo desde o desenvolvimento até o teste e a publicação
final. O gerenciamento de versões e a migração de dados são integrados ao ciclo
de vida de um aplicativo, facilitando o preparo e a publicação do aplicativo e o
gerenciamento dos dados em todas as fases.
Além disso, o Visual Builder é um serviço gerenciado. Isso significa que, depois
de provisionar uma instância do Visual Builder , você precisa fazer muito pouco
além de desenvolver e publicar seu aplicativo. Tudo o que o aplicativo precisa
para ser executado com sucesso (incluindo um servidor web para hospedar seu
aplicativo e proteger o acesso aos dados) é resolvido. Assim, como equipe de
desenvolvimento, você pode levar seu aplicativo do desenvolvimento ao estágio
e publicá-lo em muito pouco tempo. Aqui está um passo a passo de alto nível de
como você desenvolveria um aplicativo usando o Visual Builder :
Sua instância do Visual Builder (representada pelo quadrado no meio da

imagem) fornece recursos para seu aplicativo visual tanto como uma ferramenta
de desenvolvimento visual (na parte superior) quanto como uma plataforma de
hospedagem de aplicativos com um servidor Web integrado (indicado por
componentes do lado do servidor na parte inferior):
• Como uma ferramenta de desenvolvimento visual, o Visual Builder
fornece acesso a componentes de interface do usuário e interfaces
WYSIWYG que aproveitam o Oracle JavaScript Extension Toolkit (JET)
de código aberto. Esse ambiente visual, conhecido como Designer,
apresenta vários editores visuais que uma equipe de desenvolvimento
pode usar para criar UIs ricas de forma colaborativa que abrangem vários
dispositivos. Ele também suporta Redwood, o padrão Oracle para
experiência do usuário, que permite desenvolver aplicativos que oferecem
a mesma aparência dos aplicativos fornecidos pela Oracle.
Nesse ambiente, você pode desenvolver aplicativos móveis e da Web
responsivos baseados em navegador. Você pode criar aplicativos da Web
progressivos, que combinam a experiência móvel no dispositivo com a
facilidade de distribuição de um aplicativo da Web, eliminando a
necessidade de baixar atualizações das lojas de aplicativos.
• Como uma plataforma de hospedagem de aplicativos, o Visual Builder

fornece vários recursos para publicar e executar seu aplicativo na nuvem,
incluindo um banco de dados incorporado que armazena os objetos de
negócios do seu aplicativo — essencialmente tabelas Oracle com lógica
de negócios exposta por meio de APIs REST — e seus dados.
Ele também inclui um serviço de proxy REST para gerenciar o acesso a
terminais REST externos. Quando os dados do seu aplicativo vêm de APIs
REST em catálogos Oracle, como Oracle SaaS ou Oracle Integration, o
serviço de proxy usa a integração do lado do servidor com o Oracle
Identity Cloud Service (IDCS) para gerenciar autenticação e autorização
(por padrão) por meio de propagação de identidade. Quando os dados do
seu aplicativo vêm de outros endpoints REST, mecanismos REST
autenticados são usados para gerenciar credenciais.
Juntos, esses componentes fornecem os recursos necessários para hospedar

seu aplicativo visual e gerenciar seus dados.
Quando seus aplicativos são publicados, eles ficam disponíveis para seus
usuários na nuvem, a partir de qualquer desktop ou dispositivo móvel, com
comunicação com os componentes JET subjacentes do aplicativo protegidos por
HTTPS e REST.
Acesse o Oracle Visual Builder
Para desenvolver aplicativos usando o Oracle Visual Builder , você acessa o

serviço por meio de um console da web.
Para acessar o Oracle Visual Builder :

Faça login em sua conta do Oracle Cloud usando seu nome de usuário e senha.
Consulte Entrando pela Primeira Vez na Documentação do Oracle Cloud
Infrastructure
Para obter mais informações sobre as opções de entrada, consulte Noções
básicas sobre as opções de entrada .
Insira seu domínio de identidade e credenciais de usuário. Clique em Entrar.
Terça – Feira
1. Anatomia de Aplicações Visuais

2. Compreender as variáveis
3. Variáveis e passagem de parâmetros
4. Expressões
5. Variáveis e ciclos de vida
6. Variáveis e eventos
7. Compreender Ações e Cadeias de Ação
8. Contexto e Contrato da Cadeia de Ação
9. Ações incorporadas
10. Tratamento de eventos para cadeias de ação
11. Entenda os fluxos de página e ciclos de vida
12. Navegação da página
13. Compreender os componentes da interface do usuário
14. O Contrato de Componente
15. Propriedades
Anatomia de Aplicações Visuais

Para desenvolver aplicativos com o Oracle Visual Builder, você precisa entender
alguns conceitos básicos.
Os componentes básicos de um aplicativo visual são aplicativos móveis,
aplicativos da Web, conexões de serviço, objetos de negócios e processos. Os
blocos de construção básicos de um aplicativo móvel ou da Web são
componentes de interface do usuário (UI), variáveis, cadeias de ação, fluxos de
página e navegação de página e acesso a dados por meio de terminais REST.
Os blocos de construção e suas interações podem ser resumidos da seguinte

forma.
• As variáveis são o mecanismo usado para armazenar e gerenciar o

estado do cliente. Cada variável tem um tipo e um escopo.
• Uma cadeia de ação é composta por um conjunto de uma ou mais ações
individuais. A cadeia de ação é acionada por um evento. (Por exemplo,
um clique de botão pode acionar a navegação para uma página.) Cada
ação representa uma única unidade de trabalho assíncrona. Uma cadeia
de ação pode definir parâmetros de entrada e variáveis locais que estão
disponíveis apenas no contexto dessa cadeia de ação e também pode
acessar parâmetros e variáveis de entrada com escopo de aplicativo.
• Os fluxos de página e a navegação de página controlam a transmissão de
informações de uma página para outra. Cada página individual tem um
ciclo de vida, assim como um aplicativo. Cada evento de ciclo de vida
(entrada ou saída de uma página, por exemplo) pode fornecer um gatilho
para uma cadeia de ação.
• Um componente de interface do usuário encapsula uma unidade de
interface do usuário por meio de um contrato definido – especificamente,
o contrato de componentes Oracle JavaScript Extension Toolkit (JET).
Atributos de componentes são vinculados a variáveis, e eventos de
componentes e alterações de variáveis acionam cadeias de ação.
• Todos os dados que entram em um aplicativo móvel ou web são baseados
em REST. Esses dados podem vir de objetos de negócios e conexões de
serviço. Ações e variáveis controlam como os dados são enviados de e
para um endpoint REST em um aplicativo móvel ou web. Um
desenvolvedor pode criar um tipo que corresponda à carga útil REST e
passar os dados usando uma variável desse tipo.
A figura a seguir mostra as interações entre esses blocos de construção.
Compreender as variáveis
Uma variável é o bloco de construção básico para gerenciar o estado do cliente.
É de um tipo específico e existe em um escopo específico.
As variáveis armazenam o estado intermediário no cliente entre a interface do

usuário do Visual Builder e os serviços REST. Os componentes são
principalmente vinculados a essas variáveis, e o comportamento das variáveis é
governado por ações.
O tipo de uma variável pode ser um tipo primitivo, um tipo estruturado (que pode
consistir em outros tipos), um tipo dinâmico ou um tipo interno.
Um escopo define o ciclo de vida de uma variável e a estrutura cria e destrói

automaticamente as variáveis dependendo da semântica do escopo. Os
seguintes escopos são suportados:
• Escopo da página: o estado é acessível apenas no contexto da página

especificada. Todo o estado é inicializado com valores padrão quando a
página é inserida e destruído quando a página é encerrada.
• Escopo do aplicativo: O estado é acessível em todas as partes do

aplicativo e em todas as páginas.
• Escopo do fluxo: O estado é acessível em todas as páginas contidas no

fluxo atual.
• Escopo da cadeia de ação: O estado é acessível na cadeia de ação atual.
O valor inicial de uma variável é determinado usando a defaultValuepropriedade

definida na variável, juntamente com seu tipo.
Constantes são um tipo de variável do Constantsnamespace e são usadas para

armazenar valores que não precisam ser alterados ao longo do tempo, como o
nome da empresa ou valores de conversão de medidas. Constantes são
digitadas como outras variáveis e são suportadas nos mesmos escopos. Mas
eles diferem de outras variáveis, pois você não pode alterar seus valores após
serem inicializados. Para obter mais informações, consulte Constantes no Oracle
Visual Builder Page Model Reference .
Um valor de variável que ainda não foi instanciado é indefinido. É garantido que
uma variável seja instanciada e seu valor inicial definido imediatamente antes do
vbEnterevento ser gerado (consulte O ciclo de vida de uma página ).
Quando seu valor muda, uma variável emite um evento. Este evento pode
desencadear uma cadeia de ação. Você pode definir variáveis como parâmetros
de entrada, com seu valor determinado pelas entradas da página ou módulo.
Essas entradas podem ser parâmetros de URL para marcação, por exemplo.
Para obter mais informações, consulte Variáveis na Referência do Modelo de

Página do Oracle Visual Builder.
Variáveis e passagem de parâmetros
Você pode usar uma variável para passar um parâmetro entre as páginas. Você
pode marcar uma variável de página como uma entrada, especificando como ela
se torna parte do contrato para navegar até essa página. Você pode então
marcá-lo como necessário, o que implica que ele deve ser definido para navegar
até essa página.
A tabela a seguir lista as propriedades disponíveis para variáveis.
Propriedade Requeridos? Descrição
type Sim Um tipo primitivo específico (string, boolean, number e assim

por diante); um tipo estruturado, como um array ou objeto,
para o qual cada campo pode ser um primitivo ou uma
estrutura; um tipo dinâmico ( any); ou um tipo interno,
como ServiceDataProviderou ArrayDataProvider.
input Não; aplicável Como a variável se torna parte do contrato de página para
somente se a navegação de entrada. O valor é none (o
propriedade padrão), fromCaller(indicando que será passado
estiver dentro internamente) ou fromURL(indicando que será passado via
do escopo da URL).
página
required Não Se a variável deve ou não ser definida
defaultValue Não O valor padrão para a variável a ser inicializada. Se nenhum

valor padrão for fornecido, o valor será "não definido" ou
indefinido. O defaultValuepode ser vinculado a uma
expressão ou pode ser uma estrutura que usa expressões
que fazem referência a outras variáveis.
persisted Não Use variáveis persistentes quando quiser que a vida útil da
variável seja maior que a página. Por exemplo, um token de
autorização pode ser mantido durante uma sessão. Isso
garante que, mesmo que a página seja atualizada, o token
ainda estará disponível durante a sessão. Para armazenar
uma variável entre sessões, use "device"em vez
de "session". A própria variável ainda existe apenas em seu
escopo definido. Pode ser definido para os seguintes
valores:
• session: Esta propriedade será aplicada ao entrar na
página, mas apenas durante a sessão atual do
navegador.
• history: O valor da variável é armazenado no histórico
do navegador. Ao navegar de volta para uma página
no histórico do navegador usando o botão Voltar do
navegador, o valor da variável é restaurado para seu
valor no momento em que o aplicativo navegou para
fora desta página.
• local: A variável é armazenada no armazenamento
local do navegador, de modo que persiste no
dispositivo em que o aplicativo está sendo executado,
mesmo que o navegador seja fechado.
Expressões
Uma expressão pode se referir a outras variáveis, incluindo constantes,

propriedades do sistema, estática e similares. Por exemplo:
$variables.total = $variables.sum * (1 + $variables.taxRate)
A interface de usuário do Visual Builder executa a análise de dependência das

expressões para ordenar corretamente a avaliação da expressão e detectar
ciclos.
Se o valor de qualquer variável referenciada em uma expressão mudar, a

expressão será imediatamente reavaliada.
Uma expressão pode ser usada no valor padrão de uma variável ou constante.
Você pode usar os seguintes objetos implícitos em expressões. Todos são

prefixados por um cifrão ($).
Nome Onde disponível Descrição
$application Em toda parte O objeto do aplicativo
$page Na página atual A instância da página atual
$flow No fluxo atual A instância de fluxo atual
$variables Todo escopo que tem Um atalho para no escopo atual.

uma variablespropriedade
Nome Onde disponível Descrição
Em uma página, é um atalho para

$most_specific_scope.variables$variables$page.variables
$chains Todo escopo que tem Um atalho para$most_specific_scope.chains

uma chainspropriedade
$chain Ações em execução em A cadeia na qual a ação está sendo executada

uma cadeia de ação
$parameters No beforeEnterevento Os parâmetros de entrada para a página. Este objeto é

necessário porque as variáveis de página ainda não existem
no vbBeforeEnterevento.
$listeners Em um fluxo ou página Os ouvintes de eventos de um fluxo ou página
$event onValueChangeOuvintes Para um ouvinte de eventos em um

de eventos e ouvintes de componente, $eventcontém o Eventobjeto JavaScript que o
variáveis componente passa para o ouvinte. Para um ouvinte de
eventos em um evento personalizado, $eventcontém a
carga útil desse evento. Para um onValueChangeouvinte
em uma variável, $eventé uma estrutura com as
propriedades name, oldValue, valuee diff(ela mesma uma
estrutura).
Variáveis e ciclos de vida

As variáveis do aplicativo e da página são construídas automaticamente em um
estágio específico do ciclo de vida do aplicativo ou da página.
Os parâmetros de entrada que são passados por meio de regras de navegação,
ou variáveis marcadas que são fornecidas na URL, são atribuídas
automaticamente às suas variáveis correspondentes. Quando você modifica o
valor de uma variável favorita, a URL é ajustada automaticamente para
corresponder a esse novo valor (ou seja, um novo estado de histórico é enviado).
Dessa forma, a página sempre pode ser marcada e não requer nenhuma ação
específica do usuário para ser marcada.
Variáveis e eventos
Uma variável aciona um evento onValueChanged quando é modificada. Este

evento é acionado apenas quando o valor é realmente alterado; definir um valor
de variável para o mesmo valor não aciona um evento. A variável deve ser
alterada explicitamente para enviar o evento. Por exemplo, se uma variável for
um tipo complexo, modificar uma propriedade interna não acionará esse evento;
a variável inteira deve ser definida por meio de uma chamada de API. Nesse
caso, a estrutura pode adicionar à carga útil as partes da estrutura que foram
alteradas. Por exemplo, se você alterou a propriedade name de um Employee e,
em seguida, redefiniu o Employee, a estrutura enviaria um evento que o
Employee alterou e, como parte da carga útil, indicaria que o nome foi alterado.
Um onValueChangedevento pode acionar uma cadeia de ação definida pelo

usuário. O gatilho tem a carga útil dos valores antigos e novos da variável.
Compreender Ações e Cadeias de Ação
Uma cadeia de ação é composta por uma ou mais ações individuais, cada uma
das quais representa uma única unidade de trabalho assíncrona. As cadeias de
ação são acionadas por eventos.
Uma cadeia de ação, como uma variável, tem um escopo: pode ser definida no
nível do aplicativo ou no nível da página. Você pode chamar uma cadeia de ação
no escopo do aplicativo de qualquer página. Você pode chamar uma cadeia de
ação com escopo de página somente a partir da página na qual ela está definida.
Para criar uma cadeia de ação, você pode definir suas próprias ações e pode
usar ações predefinidas. As ações dentro de uma determinada cadeia são
executadas em série e várias cadeias de ação podem ser executadas
simultaneamente. As cadeias de ação simplificam a coordenação de atividades
assíncronas.
Um único evento pode desencadear simultaneamente várias cadeias de ação.

Por exemplo, o evento de entrada de página pode acionar várias cadeias de
ações de busca de dados simultaneamente.
Uma ação é uma função específica que executa uma tarefa. Em termos de
JavaScript, uma ação é uma fábrica de promessas. Uma ação pode existir
apenas dentro de uma cadeia de ação, não independentemente.
Contexto e Contrato da Cadeia de Ação
As cadeias de ação têm um contexto e contrato bem definidos: uma cadeia de

ação orquestra suas ações subjacentes, coordenando o fluxo de estado e o
caminho de execução. A cadeia de ação pode definir parâmetros de entrada e
variáveis locais que estão disponíveis apenas nesse contexto. Um exemplo de
uma cadeia de ação é aquela que faz uma chamada REST (primeira ação), então
pega o resultado disso e armazena isso em uma variável (segunda ação).
Uma cadeia de ação mantém seu próprio contexto, que é acessível por meio de
um objeto implícito chamado $chain. As ações podem exportar um novo estado
para esse contexto, mas ele está disponível apenas para ações futuras ao longo
dessa mesma cadeia de ação. Uma cadeia de ação pode ser criada no contexto
de uma página ou do aplicativo e existe no escopo da página ou do aplicativo.
Possui interface e contrato definidos e pode ser chamado por triggers de eventos
usando seu ID.
O contrato da cadeia de ação tem três partes
Parte da Cadeia de
Ação Descrição
EU IRIA Identificador de string para a cadeia de ação
Parâmetros de Zero ou mais variáveis que podem ser passadas para a cadeia de ação e
entrada adicionadas ao contexto da cadeia de ação
Variáveis Zero ou mais variáveis internas à cadeia de ação e utilizáveis internamente

por ações
Ações incorporadas
O Visual Builder vem com um conjunto de ações integradas (ou predefinidas)

para uma cadeia de ação, usadas por exemplo, navegação ou atribuição de
valores de variáveis. Uma ação tem as seguintes partes que o desenvolvedor
pode definir:
Parte de
Ação Descrição
EU IRIA Identificador de string para esta instância de ação. Esta parte da ação é opcional, pois o
ID é necessário apenas se você desejar consultar os resultados da ação posteriormente
na cadeia de ação.
Configuração Quaisquer propriedades da ação que o usuário pode configurar. Por exemplo, para a
ação navegar, a página para a qual navegar e quaisquer parâmetros necessários para
essa navegação.
Resultados e Uma ação pode ter vários resultados potenciais (como sucesso ou fracasso, ou uma
resultados ramificação). Ele também pode retornar resultados.
Estado Uma ação pode exportar o estado que está disponível para ações futuras dentro do
exportado contexto da mesma cadeia de ação.
As ações predefinidas incluem condicionais e outras instruções de

processamento. Por exemplo, você pode usar ações ife switchque usam
uma expressão e oferecem várias continuações de cadeia diferentes,
dependendo do resultado.
Tratamento de eventos para cadeias de ação
As cadeias de ação são definidas no nível do aplicativo ou da página e

acionadas por um evento específico, como onValueChange(para uma
variável) ou vbEnter. Um evento pode incluir uma carga útil, que pode ser
usada na cadeia de ação. Uma carga útil pode ser passada para uma
cadeia de ação por meio dos parâmetros de entrada. A interface de
usuário do Visual Builder pode ajudá-lo a criar cadeias de ação
automaticamente (com parâmetros de entrada apropriados) com base em
um evento específico.
Entenda os fluxos de página e ciclos de vida
O fluxo de página controla como as informações são transferidas entre as

páginas. O ciclo de vida da página controla o estado de uma página individual.
Uma página tem um ciclo de vida definido que permite ouvir determinados
eventos que são acionados como parte do ciclo de vida. Exemplos de eventos
de ciclo de vida de página são entere beforeExit.
Uma ou mais páginas formam um fluxo de página. Dentro de um fluxo, você pode
configurar a navegação de página para página.
As ações de navegação podem ser internas ou externas. Uma ação de

navegação interna é composta pelo ID da página para a qual navegar junto com
quaisquer parâmetros especificados para essa página. Uma ação de navegação
externa é definida por uma URL externa. Essas ações são definidas no modelo
de página.
Um aplicativo também tem um ciclo de vida e um fluxo. Um aplicativo pode conter

vários fluxos de página.
O ciclo de vida de uma página
Uma página individual definiu estados de ciclo de vida ao entrar e sair, e cada
estado tem um gatilho. Para alguns estados, você pode fornecer cadeias de ação
em resposta aos gatilhos. Outros estados são internos, mas ajudam a ilustrar o
que acontece e quando no sistema.
Navegação da página
Cada página do aplicativo tem um nome, que você pode especificar e alterar.
Você usa o nome da página para navegar de uma página para outra em um fluxo
de página.
Para configurar uma ação navegar, especifique os seguintes parâmetros:
• A página para a qual navegar ou uma expressão que resolva para

esse valor
• Valores para parâmetros de entrada obrigatórios e para quaisquer

parâmetros de entrada opcionais que você usa. (Você só pode
definir o valor dos parâmetros de entrada de página.)
Há dois resultados possíveis:
• A navegação foi bem-sucedida
• A navegação foi cancelada na página para a qual estamos

navegando
Compreender os componentes da interface do usuário
Os componentes da interface do usuário (UI) encapsulam uma unidade de

interação da interface do usuário por meio de um contrato definido.
O contrato do Web Component expõe a funcionalidade de um componente por

meio da interface do usuário, permitindo que o componente interaja com outras
partes do aplicativo. Construtor visualsuporta o contrato de componentes Oracle
JavaScript Extension Toolkit (JET), que adiciona vinculação de dados,
metadados de componentes e dependências sobre o contrato de Web
Component. O contrato de componentes Oracle JET expõe um elemento HTML
personalizado do Document Object Model (DOM) com propriedades, eventos e
métodos personalizados. A associação de propriedade adicionada pelo Oracle
JET oferece suporte à associação unidirecional (somente leitura) e bidirecional
(leitura/gravação). Em geral, as propriedades do componente são vinculadas a
variáveis e os eventos do componente acionam cadeias de ação.
Um componente pode ter zero ou mais slots que podem conter um ou mais filhos
desse componente. Por exemplo, uma barra de ferramentas pode conter vários
botões.
Você pode adicionar componentes a um aplicativo da Paleta de componentes.
Você também pode usar componentes JET personalizados, incluindo os
fornecidos pelo Component Exchange. Consulte Trabalhar com o Component
Exchange para obter detalhes.
Para casos de uso simples, você pode usar um componente HTML simples e a
implementação do modelo de exibição correspondente.
O Contrato de Componente
Um componente de interface do usuário, seja enviado pelo Visual Builder,

fornecido por um parceiro ou criado por você, deve seguir o mesmo contrato de
componente. Este contrato permite que o Visual Builder exponha a
funcionalidade de um componente de forma declarativa por meio da interface de
usuário do Visual Builder . Se você precisar adicionar funcionalidade a um
componente, poderá expandir os recursos desse componente e a nova
funcionalidade será então expressa na interface desse componente.
O contrato de componente tem quatro aspectos: propriedades, eventos, slots

filhos e métodos.
Propriedades
Um componente tem propriedades que você pode vincular a variáveis ou

expressões por meio da interface de usuário do Visual Builder . Essas
propriedades podem afetar o estado de um componente (por exemplo, o valor
de um campo de texto de entrada) ou afetar sua renderização (por exemplo,
ativado ou desativado). Uma propriedade de componente possui um tipo
específico, que corresponde aos tipos disponíveis para uma variável, podendo
ela mesma ser estruturada ou uma coleção. Uma propriedade também pode ser
necessária como parte da interface do componente.
Além de um tipo, uma propriedade de componente também pode ter metadados

adicionais (conforme definido nos metadados de tempo de design do JET para
propriedades), como um nome de exibição ou uma descrição
Existem dois tipos de propriedades, unidirecionais e bidirecionais.
• Unidirecional (somente leitura) - O componente lê o valor dessa

propriedade. Se a expressão de que a propriedade está vinculada
for alterada, o componente será notificado dessa alteração. Pode
ser vinculado: Expressões (que podem conter variáveis)
• Bidirecional (leitura/gravação) - O componente pode ler o valor

desta propriedade e pode escrever de volta nessa propriedade. Se
a variável for modificada externamente, o componente será
notificado dessa alteração. Pode ser vinculado: Variáveis
Quarta – Feira
1. Eventos
2. Slots filho
3. Métodos
4. IDs e estilos de componente
5. Entenda o acesso a dados por meio do REST
6. Ligação de dados
7. Mapeamento para REST
Eventos
Um componente pode disparar zero ou mais eventos (por exemplo, um evento
onClick para um botão). Cada evento tem uma carga útil. A interface de usuário
do Visual Builder permite que o desenvolvedor escute qualquer um desses
eventos e exponha a carga útil do evento. Uma cadeia de ação pode então
processar o evento.
Slots filho
Um slot é um espaço reservado dentro de um componente da Web que você
pode preencher com sua própria marcação. Um componente pode ter zero ou
mais slots que podem conter um ou mais filhos. Quaisquer filhos não atribuídos
a um slot específico são atribuídos ao slot padrão.
Métodos
Um componente pode ter zero ou mais métodos que podem ser chamados no
componente para executar uma ação (por exemplo, virar um cartão). Esses
métodos podem ter parâmetros definidos como parte da interface do
componente. A interface de usuário do Visual Builder fornece uma ação dentro
de uma cadeia de ações que permite ao usuário chamar um método de
componente e preencher os parâmetros usando expressões.
IDs e estilos de componentes
Um componente pode ter um ID configurável para permitir que ele seja

referenciado a partir de uma ação. Além disso, você pode vincular classes de
estilo de componente a uma expressão.
Entenda o acesso a dados por meio do REST
Todo o acesso a dados de e para um aplicativo cliente ocorre por meio de
chamadas REpresentational State Transfer (REST).
A interface de usuário do Visual Builder fornece acesso a dois tipos básicos de

dados:
• Objetos de negócios no Visual Builder , que você mesmo pode criar e usar
em aplicativos
• Conexões de serviço, que podem ser serviços Oracle ou serviços REST
externos
Ao criar um objeto de negócios, uma API REST é criada automaticamente para

você, com terminais GET, POST, PATCH e DELETE.
Ao criar uma conexão de serviço, você pode obter APIs REST de uma das
seguintes maneiras:
• Selecionar objetos de um catálogo de serviços

• Fornece um documento de especificação de serviço no formato
OpenAPI/Swagger ou Oracle Application Developer Framework (ADF)
descrever
• Especifique um URL de endpoint, um método HTTP e uma dica de ação
Cada um desses mecanismos gera APIs REST para você usar. Você pode
especificar estruturas de carga útil de solicitação e resposta no formato JSON e
pode fornecer um subconjunto de parâmetros de consulta para expor à interface
de usuário do Visual Builder. Os parâmetros podem ter um tipo (mas são
considerados primitivos). Você também pode usar o utilitário auxiliar REST
fornecido para chamar terminais REST.
Ligação de dados
Você pode criar variáveis e cadeias de ação para chamar endpoints REST de
seus aplicativos, recuperando e enviando dados de e para os endpoints.
Normalmente, o tipo da variável corresponde à estrutura da carga útil REST.
Você tem a opção de definir seu próprio tipo que corresponda melhor ao seu
caso de uso e, em seguida, mapear da carga útil REST para uma instância de
variável que usa esse tipo. Por exemplo, para casos avançados, você pode
definir um tipo de variável que corresponda ao seu próprio design de página e,
em seguida, mapear uma ou mais cargas REST para esse tipo. Para enviar
esses dados de volta para um serviço ou serviços, você mapearia novamente os
dados dessa variável para as cargas úteis REST.
Os componentes são vinculados a variáveis. Essas variáveis não têm nenhum

conhecimento intrínseco de onde seus dados são derivados ou para que seus
dados são usados. Para preencher uma variável de uma chamada REST, você
monta uma cadeia de ação de uma ação que faz essa chamada REST e uma
ação que atribui o resultado a essa variável. No caso comum, o Visual
Builderuser interface automatiza a criação dessa variável para corresponder à
carga útil da chamada REST, permitindo que você vincule rapidamente a carga
útil da chamada REST nas páginas do seu aplicativo. Para manipular uma ação
POST ou DELETE, você compõe uma cadeia de ação com a ação REST,
passando a variável como a carga útil.
Mapeamento para REST
Em casos mais avançados, você pode desejar definir um modelo (através do uso
de uma variável) que corresponda mais de perto à sua aplicação específica. Em
outros casos, o GET e POST (ou métodos equivalentes) podem ser assimétricos
ou podem ser de serviços totalmente diferentes. Nesses casos, você pode
mapear a carga útil REST de e para essa variável.
Quinta – Feira
1. Criação de aplicativo.
2. Estilos de navegação.
3. Page Designer.
Para criar o aplicativo basta ir em NEW.
Será solicitado um nome para a aplicação e o ID do aplicativo. É possível

também inserir uma descrição ao aplicativo.
Utilizei o modelo de aplicativo vazio.
Logo após a inserção dessas informações basta clicar em terminar.
Somos redirecionados a página de seleção de recursos, serviços e conexões

para o aplicativo.
Optei incialmente em realizar a aplicação web.
Como este será o primeiro projeto o sistema informa que não possuímos uma
aplicação definida, porém, nos fornece a opção > + Web Application onde sou
redirecionado para a criação do aplicativo Web.
Basta definir o nome da aplicação e o estilo de navegação.
• Nenhum para criar um aplicativo Web sem nenhum componente de
navegação, se desejar projetar a navegação do aplicativo por conta
própria posteriormente.
• Navigation Drawer para criar um aplicativo Web com uma Navigation

Drawer, que mostra o menu de navegação principal do aplicativo em um
painel separado (os usuários acessariam esse menu de navegação
clicando Ícone da gaveta de navegaçãono cabeçalho do aplicativo).
• Guias Inferiores para criar um aplicativo Web com uma barra de guias na
parte inferior que permite a navegação entre os itens.
Page Designer (Página inicial do seu aplicativo).
Ao chegar página inicial é possível ver um ambiente já desenvolvido com suas

áreas extensíveis indicadas em azul.
Temos algumas opções para começar a editar, clicando no componente que
gostaria de personalizar ou em componentes dinâmicos.
Podemos determinar dois objetivos principais para personalização do
componente.
Configurar os campos da maneira que deseja em um layout.
Definir a lógica que determina qual layout será aplicado em tempo de execução,
com base nas circunstâncias atuais do visualizador.
Sexta – Feira
1. Prática.
2. Criando aplicação.
Vá em New.
Nomeie a aplicação.
Utilizei um template vazio.

Selecionei +WebAplication
Defini a área de criação do aplicativo.
Importei uma base que contia os nomes dos funcionários juntamente a sua faixa
salarial.
Apliquei as configurações da base no VB.
Base aplicada ao banco de dados da Oracle.
Adicionei os dados da base na aplicação e configurei seus campos

correspondentes.
Tabela criada.
Overview da tela
Referências:
• https://apexapps.oracle.com/pls/apex/r/dbpm/livelabs/run-
workshop?p210_wid=763&p210_wec=&session=113273991944611
• https://www.oracle.com/br/application-development/visual-builder/
• https://docs.oracle.com/en/cloud/paas/integration-cloud/tutorials.html
• https://www.youtube.com/playlist?list=PLKCk3OyNwIztfvQb4OygQ91jFfp
M49djT
• https://apexapps.oracle.com/pls/apex/dbpm/r/livelabs/livelabs-workshop-
cards?session=106791552312613

TRI - Gustavo - Leal - Overview 4 Semana

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

TRI - Gustavo - Leal - Overview 4 Semana

Enviado por

Direitos autorais:

Formatos disponíveis

TRI: Technical Services – Gustavo de Freitas Tosta Leal - Semana 4

Gustavo de Freitas Tosta Leal

26 de setembro a 30 de setembro de 2022

1. Introdução ao Visual Builder

Sobre o Oracle Visual Builder

Experiência de Desenvolvimento Visual

Ele fornece ferramentas de desenvolvimento visual simples, mas poderosas,

Fácil acesso aos dados

O Visual Builder é uma ferramenta de desenvolvimento completa, bem como

Sua instância do Visual Builder (representada pelo quadrado no meio da

• Como uma plataforma de hospedagem de aplicativos, o Visual Builder

Juntos, esses componentes fornecem os recursos necessários para hospedar

Para desenvolver aplicativos usando o Oracle Visual Builder , você acessa o

Para acessar o Oracle Visual Builder :

Insira seu domínio de identidade e credenciais de usuário. Clique em Entrar.

1. Anatomia de Aplicações Visuais

Anatomia de Aplicações Visuais

Os blocos de construção e suas interações podem ser resumidos da seguinte

• As variáveis são o mecanismo usado para armazenar e gerenciar o

A figura a seguir mostra as interações entre esses blocos de construção.

As variáveis armazenam o estado intermediário no cliente entre a interface do

Um escopo define o ciclo de vida de uma variável e a estrutura cria e destrói

• Escopo da página: o estado é acessível apenas no contexto da página

• Escopo do aplicativo: O estado é acessível em todas as partes do

• Escopo do fluxo: O estado é acessível em todas as páginas contidas no

• Escopo da cadeia de ação: O estado é acessível na cadeia de ação atual.

O valor inicial de uma variável é determinado usando a defaultValuepropriedade

Constantes são um tipo de variável do Constantsnamespace e são usadas para

Para obter mais informações, consulte Variáveis na Referência do Modelo de

Variáveis e passagem de parâmetros

Propriedade Requeridos? Descrição

type Sim Um tipo primitivo específico (string, boolean, number e assim

required Não Se a variável deve ou não ser definida

defaultValue Não O valor padrão para a variável a ser inicializada. Se nenhum

Uma expressão pode se referir a outras variáveis, incluindo constantes,

$variables.total = $variables.sum * (1 + $variables.taxRate)

A interface de usuário do Visual Builder executa a análise de dependência das

Se o valor de qualquer variável referenciada em uma expressão mudar, a

Você pode usar os seguintes objetos implícitos em expressões. Todos são

Nome Onde disponível Descrição

$application Em toda parte O objeto do aplicativo

$page Na página atual A instância da página atual

$flow No fluxo atual A instância de fluxo atual

$variables Todo escopo que tem Um atalho para no escopo atual.

Em uma página, é um atalho para

$chains Todo escopo que tem Um atalho para$most_specific_scope.chains

$chain Ações em execução em A cadeia na qual a ação está sendo executada

$parameters No beforeEnterevento Os parâmetros de entrada para a página. Este objeto é

$listeners Em um fluxo ou página Os ouvintes de eventos de um fluxo ou página

$event onValueChangeOuvintes Para um ouvinte de eventos em um

Variáveis e ciclos de vida

Uma variável aciona um evento onValueChanged quando é modificada. Este

Um onValueChangedevento pode acionar uma cadeia de ação definida pelo

Compreender Ações e Cadeias de Ação

Um único evento pode desencadear simultaneamente várias cadeias de ação.

As cadeias de ação têm um contexto e contrato bem definidos: uma cadeia de

O contrato da cadeia de ação tem três partes

EU IRIA Identificador de string para a cadeia de ação

Variáveis Zero ou mais variáveis internas à cadeia de ação e utilizáveis internamente

O Visual Builder vem com um conjunto de ações integradas (ou predefinidas)

As ações predefinidas incluem condicionais e outras instruções de

Tratamento de eventos para cadeias de ação

As cadeias de ação são definidas no nível do aplicativo ou da página e