A criação de qualquer website ou aplicação web é quase impensável sem navegação. Os utilizadores devem navegar entre páginas, abrir diferentes secções do sítio, e receber várias informações.

Dados da página

Mas antes de olhar para a navegação propriamente dita, vale a pena compreender que informação se pode obter sobre uma página em geral e em que pode consistir um URL. Para o fazer, pode utilizar o Get Current Page bloquear e ver que dados produz.

  • URL - o endereço da página na sua forma habitual. Por exemplo - https://vdjyien-app.apms.io/admin/someurl/
  • Page - o identificador interno da página, que é utilizado em AppMaster processos empresariais. É composto por 22 caracteres, um conjunto aleatório de letras, e números.
  • Title - título da página. O seu nome sob a forma legível por humanos.
  • URL Params. Uma página pode ser criada de modo a que o seu endereço não seja estritamente fixo, mas também inclua valores variáveis. Por exemplo, uma página pode exibir uma lista de artigos numa secção específica, e o identificador desta secção é apenas indicado no URL como um parâmetro.
  • Query Params. Os parâmetros de consulta adicionais são escritos no final do URL após o sinal "?". Por exemplo, para uma página com uma lista de artigos, os parâmetros "?_limit=12&lang=en" podem indicar que apenas 12 artigos em inglês são necessários.

Por exemplo, imagine uma página que exibe uma lista de artigos de blogues. O seu URL é dado como "/blog/:tema/:autor". O símbolo ":" indica que o valor especificado depois dele é um parâmetro. Como parâmetros, são necessários identificadores do tema (tema) do artigo e do seu autor (autor).

Para navegar para esta página, é necessário utilizar o bloco Navigate bloqueio no processo comercial.

Os parâmetros correspondem aos que foram analisados anteriormente no bloco de Get Current Page bloco. Neste caso, o título real da página não importa para a navegação, uma vez que a própria página é especificada como um identificador interno (pode seleccioná-la a partir da lista de páginas).

Se a página não tiver quaisquer parâmetros, a navegação pode ser extremamente simples; basta seleccionar a página desejada a partir da lista fornecida. Mas neste exemplo, há parâmetros que devem ser passados para a Navigate bloco.

Criação de uma página de origem para navegação

Considerar a utilização de parâmetros num exemplo específico. Para o fazer, criaremos uma página separada de onde precisaremos de ir para a página alvo no futuro. Vamos acrescentar dois Select elementos para esta página (um para seleccionar da lista de tópicos, o segundo para a lista de autores) e preenchê-los com valores de teste.

Depois disso, é necessário estabelecer um fluxo de trabalho para a Navigate clicando em qual a navegação para a página de aterragem deve funcionar. Este processo começa com a obtenção dos valores seleccionados a partir do botão Select blocos.

O passo seguinte é povoar os Key-Value modelos virtuais. A sua matriz é utilizada para passar os parâmetros necessários para a Navigate bloco. O modelo em si é constituído por uma chave (Key), que é o nome do parâmetro (neste exemplo, tema, e autor), bem como o seu valor (Valueo nome directo do tópico seleccionado, ou o nome do autor).

É favor notar que muitos caracteres não podem ser utilizados no URL, incluindo o carácter de espaço. Por conseguinte, um nome escrito como "Frank Paulsen" no URL será automaticamente convertido para "Frank%20Paulsen". URL Encode e ". URL Decode blocos podem ser utilizados para codificar e descodificar para normas URL. Neste exemplo, para uma maior clareza e beleza do URL, utilizamos o Replace string bloquear e substituir independentemente o espaço pelo sinal "-", apresentando o nome como "Frank-Paulsen".

O passo final é fundir os pares de valores chave gerados numa única matriz para passar como parâmetro para o Navigate bloco.

Agora, quando clicar no botão, irá para a página https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/

Pode verificar que o seu URL consiste tanto de uma parte constante (https://vdjyien-app.apms.io/admin/blog/) como de uma variável (No-code/Frank-Paulsen/) que foi formada a partir de valores seleccionados na página anterior.

Utilização de parâmetros URL para gerir o conteúdo

A tarefa seguinte é utilizar os parâmetros URL recebidos para alterar o conteúdo da página. Estes parâmetros podem ser utilizados, por exemplo, para formar um GET pedido para a base de dados, mas no nosso exemplo, iremos simplesmente mostrar o seu valor na página. Para tal, vamos adicionar dois recipientes à página com o correspondente Label.

Vamos criar um processo comercial baseado no onShow gatilho num dos Label. A sua tarefa será analisar a URL, obter os seus parâmetros e exibi-la na página. Para o fazer, utilizamos o Get Current Page bloquear e obter o valor de cada parâmetro num laço.

A seguir, através do Switch bloco, obtemos o valor do parâmetro e exibimo-lo no bloco correspondente Label. Ao mesmo tempo, para o parâmetro Author, iremos substituir "-" por um espaço.

Agora, ao navegar para uma determinada página, não só será utilizado o seu endereço estático, mas também os parâmetros URL que afectam a exibição real do conteúdo na página.

Utilização de parâmetros de consulta

Quase do mesmo modo, é possível acrescentar parâmetros de consulta (Query Params). A sua principal diferença em relação aos parâmetros URL é que são opcionais. Neste exemplo, o URL inclui necessariamente uma indicação de que informação deve ser exibida na página (que secção temática e que autor), e parâmetros adicionais fazem os esclarecimentos necessários. Por exemplo, pode utilizar os parâmetros limit e offset para organizar a paginação e definir exactamente quantos registos a consultar a partir da base de dados e a partir de que registo iniciar a saída.

Vamos adicionar dois novos campos à página inicial - Input (Integer). Iremos escrever os parâmetros limit e offset neles.

Vamos fazer os aditamentos necessários ao processo comercial do botão de navegação. Vamos formar um conjunto de Query Params com os valores limit e offset.

O último passo é adicionar elementos com informações dos parâmetros de pedido, bem como completar o processo comercial para a página alvo.

O resultado deve ser um URL como este:

https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12

A aplicação implementa a navegação com parâmetros URL e parâmetros de consulta e determina dinamicamente o conteúdo da página alvo, dependendo destes parâmetros.

Was this article helpful?

AppMaster.io 101 Curso de Crash

10 Módulos
2 Semanas

Não sabe por onde começar? Avance com o nosso curso intensivo para principiantes e explore o AppMaster de A a Z.

Iniciar curso
Development it’s so easy with AppMaster!

Precisa de mais ajuda?

Resolva qualquer problema com a ajuda de nossos especialistas. Economize tempo e concentre-se na criação de seus aplicativos.

headphones

Entre em contato com o suporte

Conte-nos sobre o seu problema, e nós encontraremos uma solução para você.

message

Bate-papo da comunidade

Discuta perguntas com outros usuários em nosso chat.

Junte-se à comunidade