Painéis de Frame no Jitterbit App Builder

Visão geral

Um painel Frame é um tipo de painel que permite que páginas sejam carregadas em uma área fixa da tela, em vez de substituir a tela inteira. Diferentemente de outros tipos de painel, um painel Frame não possui conteúdo próprio: ele existe apenas para receber a página que um link em outro lugar da tela envia para ele. Isso é mais comumente usado para criar um menu de navegação lateral persistente, onde o menu em si permanece na tela enquanto o painel Frame carrega a página que o leitor selecionou.

Um painel Frame precisa ser emparelhado com outro painel que direcione conteúdo para ele, já que não possui controles de navegação próprios. Por exemplo, a página a seguir emparelha um painel Frame à direita com um menu de navegação lateral à esquerda, construído a partir de um painel Form com campos de ícone configurados como links de navegação: clicar em um ícone carrega a página correspondente no painel Frame.

Esta página aborda:

• Criar e posicionar um painel Frame
  Como adicionar um painel Frame a uma página e controlar onde ele aparece.

• Navegar dentro e fora de um painel Frame
  Como controlar o comportamento de links dentro e fora de um painel Frame, incluindo sair de um inteiramente, usar a opção Replace Page In History dentro de um, e criar um link para um com uma URL personalizada.

• Páginas dentro de um painel Frame
  Como o App Builder decide qual página é carregada em um painel Frame por padrão, como uma página carregada pode fazer referência ao painel Frame em que está sendo executada, e como um painel Frame recarrega os dados da página de seu contêiner.

No final da página, há também um exemplo prático demonstrando vários desses recursos.

Criar e posicionar um painel Frame

Como qualquer outro tipo de painel, você adiciona um painel Frame a uma página usando o assistente Create a panel, selecionando Frame como o tipo de painel. A posição e o tamanho de um painel Frame são governados pelo mesmo Panel layout service de qualquer outro painel, portanto, ele pode ser posicionado em qualquer lugar onde um painel normalmente iria na página.

Navegar dentro e fora de um painel Frame

Esta seção descreve como controlar o comportamento de links dentro e fora de um painel Frame, incluindo como sair de um painel Frame inteiramente, como Replace Page In History se comporta dentro de um, e como criar um link direto para um painel Frame usando uma URL personalizada.

Sair do painel Frame

Definir o Link Target de um painel como Exit Frame Panel permite que um link dentro de um painel Frame navegue a tela inteira em vez de carregar seu destino no painel Frame. Você também pode sair de um painel Frame usando Link To Page (na aba Update Methods) ou um Popup, se não for o efeito que deseja substituir a tela inteira. Consulte Configure how linked pages open para obter o conjunto completo de opções de Link Target e Link To Page.

Usar a opção Replace Page In History em um painel Frame

A configuração Link To Page de um controle também pode usar Replace Page In History quando esse controle está dentro de um painel Frame, a mesma configuração descrita em Configure how linked pages open. Isso é especialmente útil para um menu de navegação lateral construído com um painel Frame: sem Replace Page In History, clicar em vários links de menu em sequência adiciona uma nova parada ao histórico da página para cada clique, portanto, pressionar < Back apenas recuaria pelo próprio histórico do menu, um link de cada vez, antes de chegar à página que o leitor tinha aberta antes de começar a usar o menu. Com Replace Page In History ativado nos links do menu, clicar em links adicionais substitui o conteúdo do painel Frame no local em vez de adicionar novas paradas, portanto, pressionar < Back retorna imediatamente à página que estava aberta antes do leitor começar a usar o menu.

Link para um painel Frame com uma URL personalizada

Quando você vincula pela primeira vez a uma página de fora de qualquer contexto de painel Frame (uma página denominada ContainerPage, por exemplo), a URL parece uma URL de página normal: /app/MyApplication/ContainerPage. Assim que o App Builder carrega uma página em um painel Frame nessa página, ele atualiza imediatamente a barra de endereços do navegador para refletir ambas as páginas: /app/MyApplication/ContainerPage/**PageInFrame**.

Você também pode vincular diretamente a uma página específica dentro de um painel Frame construindo uma URL de entrada no mesmo formato. Para filtrar qual página é carregada em um painel Frame por um valor de coluna, adicione &Framed.{{ColumnName}}={{ColumnValue}} após os nomes do app e página na primeira parte da URL, por exemplo: app/MyApplication/OuterPage/MyApplication/InnerPage?OuterPageCriteria=123&Framed.InnerPageCriteria=456.

Páginas dentro de um painel Frame

Esta seção descreve como as páginas carregadas dentro de um painel Frame se comportam, incluindo como o App Builder decide qual página é carregada por padrão, como uma página carregada pode referenciar o painel Frame em que está sendo executada a partir do mvSQL e como um painel Frame recarrega os dados da página do container.

Página padrão

O App Builder usa a configuração Link To Page do próprio painel Frame para decidir qual página renderizar dentro dele por padrão, antes de o leitor clicar em algo. Apenas a configuração Link To Page de um painel orientado a dados oferece suporte a critérios de seleção para esse fim. Deixe a configuração Link To Page de um painel Frame em branco se preferir aguardar um painel vinculado, como um botão de painel Form, para fornecer a página padrão do painel Frame.

A função Page()

O App Builder fornece uma função mvSQL chamada Page() que os objetos de dados de uma página podem chamar para determinar qual página está carregada atualmente, inclusive quando essa página é carregada dentro de um painel Frame. Chamada sem um parâmetro, Page() retorna o UUID da página aberta no nível mais superior. Quando uma página é renderizada dentro de um painel Frame, isso permite que os objetos de dados da própria página fiquem cientes do contexto em que estão sendo executados, por exemplo, para destacar o link de navegação ativo no momento ou para ingressar na regra App_Page para consultar o nome dessa página em um rótulo de página personalizado. Chamada com o parâmetro de string 'frame', Page() retorna o UUID de qualquer página carregada atualmente no painel Frame.

Recarregamento de dados

Quando o App Builder processa um link dentro de um painel Frame, ele acionará um recarregamento global na página do container à qual o painel Frame pertence. Isso é útil quando essa página do container também tem um painel de linha única usado como menu de navegação, já que o recarregamento permite que o objeto de dados do próprio painel se atualize, por exemplo, para carregar o título ou ícone da página dentro do frame ou para aplicar formatação condicional que destaca o link do menu ativo no momento (usando a função Page() descrita acima).

Exemplo: navegação lateral usando um painel Frame

A página a seguir combina um painel Frame na parte superior com um painel Form abaixo dele. O campo Categories do painel Form é o primeiro valor PageLinks definido, e seus dois campos de ícone vinculam às páginas Products e Categories, carregando cada uma em um painel Frame acima. Este exemplo usa as seguintes técnicas:

• Abas, com um tamanho mínimo de painel de 1, de modo que o painel Frame e o painel Form sempre sejam mostrados juntos.
• Um painel Form minúsculo.
• Formatação condicional que destaca o ícone da página mostrado atualmente no painel Frame.
• Um tema personalizado que estiliza os links de ícone lado a lado horizontalmente e com espaçamento uniforme.