Você está visualizando o conteúdo de ajuda da versão:

Os componentes a seguir devem ser usados ao criar conteúdo autoral em uma página da Web padrão. Eles formam um subconjunto de componentes disponíveis out-of-the-box em uma instalação padrão do AEM.

Alguns estão imediatamente disponíveis através do Sidekick; vários outros também estão disponíveis usando o Modo de design para ativá-los ou desativá-los.

Cuidado:

Esta seção discute somente os componentes que estão disponíveis out-of-the-box em uma instalação padrão do AEM.

Dependendo do seu caso, você pode ter componentes personalizados desenvolvidos explicitamente para as suas necessidades. Eles podem até ter o mesmo nome que alguns dos componentes discutidos aqui.

Os componentes estão disponíveis ao editar uma página, de acordo com a UI a ser utilizada:

  • interface otimizada para toque:
    • a guia Componentes do painel lateral do editor de página
  • Interface clássica:
    • a guia Componentes do Sidekick
    • o seletor Inserir novo componente (ao clicar duas vezes na área Arraste os componentes ou os ativos para cá)

Para ambas as UIs você pode selecionar um componente e arrastá-lo para o local desejado na sua página. Em seguida, você pode editá-lo:

Os componentes são classificados de acordo com as diferentes categorias (grupos de componentes), incluindo (para criação de página):

  • Geral: inclui componentes básicos, como texto, imagens, tabelas, gráficos e assim por diante.
  • Colunas: inclui os componentes necessários para organizar o layout do conteúdo.
  • Formulário: inclui todos os componentes necessários para criar um formulário.

Geral

Os componentes Gerais são os componentes básicos usados ​​na criação de conteúdo.

Item de conta

Você pode definir um link com título e descrição.

Imagem adaptativa

O componente de base da Imagem adaptativa gera imagens que são dimensionadas para caber na janela na qual a página da Web está aberta. Para usar o componente, você fornece um recurso de imagem do sistema de arquivos ou DAM. Quando a página da Web está aberta, o navegador baixa uma cópia da imagem que foi redimensionada para que seja adequada à janela atual. 

As características seguintes podem determinar o tamanho da janela:

  • Tela do dispositivo: os dispositivos móveis geralmente exibem as páginas da Web, para que estendem-se por toda a tela. 
  • Tamanho da janela do navegador da Web: os usuários de laptop e desktop podem redimensionar as janelas do navegador da Web.

Por exemplo, o componente gera uma imagem pequena, quando a página da Web é aberta em um telefone celular e, uma imagem de tamanho médio quando é aberta em um tablet. Em um laptop, o componente cria e oferece uma imagem grande, quando a página é aberta em um navegador da Web maximizado. Quando o navegador da Web é redimensionado para caber em uma parte da tela, o componente se adapta, fornecendo uma imagem menor e, atualiza a visualização.

Formatos de imagem suportados

Você pode usar os arquivos de imagem das seguintes extensões de nome de arquivo com o componente da Imagem adaptativa:

  • .jpg
  • .jpeg
  • .png
  • .gif **

Cuidado:

** Arquivos .gif animados não são suportados no AEM para renderizações adaptativas.

Tamanhos e qualidade de imagens

A tabela a seguir lista a largura da imagem que é gerada para a largura da janela de exibição fornecida. A altura da imagem gerada é calculada para manter uma proporção do aspecto constante e, nenhum espaço em branco ocorre dentro da borda da imagem. O comando Recortar pode ser usado para evitar espaços em branco.

Quando a imagem é uma imagem JPEG, o tamanho do visor também pode influenciar a qualidade de JPEG. As seguintes qualidades de JPEG são possíveis:

  • Baixa (0,42)
  • Média (0,82)
  • Alta (1,00)
Limite de largura do visor (pixels) Largura da imagem (pixels) Qualidade JPEG Tipo de dispositivo de destino
largura <= 319 320 low  
largura = 320 320 médio Telefone celular (retrato)
320 < largura < 481 480 médio Telefone celular (paisagem)
480 < largura < 769 476 alto Tablet (retrato)
768 < largura < 1025 620 alto Tablet (paisagem)
largura <= 1025 completo (tamanho original) alto Área de trabalho

Propriedades

A caixa de diálogo permite editar as propriedades da sua instância do componente de Imagem adaptativa, muitas das quais são comuns com o componente de imagem na qual são baseadas. As propriedades estão disponíveis em duas guias:

  • Imagem
    • Imagem
      Arraste uma imagem do localizador de conteúdo ou clique para abrir uma janela de navegação, onde é possível carregar uma imagem. Depois que a imagem é carregada, você pode recortar a imagem, girá-la ou excluí-la. Para aumentar e diminuir o zoom da imagem, use a barra de rolagem abaixo da imagem (acima dos botões OK e Cancelar)
    • Recortar
      Recorte uma imagem. Arraste a borda para recortar a imagem.
    • Girar
      Clique em Girar repetidamente até que a imagem seja girada como desejado.
    • Apagar
      Remova a imagem atual.
  • Avançado
    • Título
      O componente da Imagem adaptativa não utiliza essa propriedade.
    • Texto alternativo
      O texto alternativo para usar com a imagem.
    • Vincular ao
      O componente da Imagem adaptativa não utiliza essa propriedade.
    • Descrição
      O componente da Imagem adaptativa não utiliza essa propriedade.

Estender o componente adaptável de imagem

Para obter informações sobre como personalizar o componente Imagem adaptativa, consulte Noções sobre o Componente de imagem adaptativa .

Carrossel

O componente Carrossel permite exibir imagens associadas a páginas individuais:

  • uma de cada vez
  • por pouco tempo
  • em uma ordem especificada por você
  • com um atraso de tempo especificado por você

Os controles clicáveis ​​também permitem que o usuário alterne entre as páginas exibidas em tempo real, sob demanda. Clicar na imagem da página visível atualmente leva você para essa página. Em outras palavras, o carrossel atua como um controle de navegação.

Propriedades

Estão disponíveis em duas guias:

  • Carrossel
    Aqui você especifica como o carrossel opera:
    • Velocidade de reprodução
      O tempo em milissegundos antes de o próximo slide ser exibido.
    • Tempo de transição
      Tempo em milissegundos para a transição entre dois slides.
    • Estilo dos controles
      Várias opções estão disponíveis em um menu suspenso; por exemplo, os botões Anterior/Próximo, comutadores topo/direita.
  • Lista
    Aqui você especifica como as páginas são incluídas no Carrossel:
    • Criar lista usando
      Existem várias maneiras de criar uma lista de páginas - Páginas secundárias, Lista fixa, Pesquisa ou Pesquisa Avançada (todas descritos abaixo).
      Observe que não importa qual o método escolhido, cada página que você incluir na sua lista deve ter uma imagem associada à página. É esta imagem que será exibida no carrossel. Caso não haja imagens para uma determinada página na opção Propriedades da página, você deve associar uma imagem à página antes de começar, caso contrário, o carrossel exibirá uma página em branco (ou na maior parte em branco). Consulte Editar as propriedades da página.
      Dependendo do item que você escolher, um novo painel será exibido:
      • Opções de páginas filhas
        • Página principal
          Especifique um caminho manualmente ou usando o seletor. Deixe em branco para usar a página atual como principal.
      • Opções para a lista fixa
        • Páginas
          Selecione uma lista de páginas. Use + para adicionar mais entradas e os botões Para cima/Para baixo para ajustar a ordem.
      • Opções de pesquisa
        • Começa em
          Especifique um caminho manualmente ou usando o seletor.
        • Pesquisar consulta
          Você pode inserir uma consulta de pesquisa de texto simples.
      • Opções de pesquisa avançada
        • Notação do predicativo do Querybuilder
          Você pode inserir uma consulta de pesquisa usando a notação do predicativo do Querybuilder. Por exemplo, é possível inserir "fulltext=Marketing" para ter todas as páginas com "Marketing" em seu conteúdo exibidas no carrossel.
          Consulte a API do QueryBuilder para obter uma discussão completa sobre as expressões de consulta e mais exemplos.
    • Ordenar por
      Selecione jcr:title, jcr:created, cq:lastModifiedou cq:template do menu suspenso.
    • Limite
      O número máximo de itens que você gostaria de usar no carrossel; isto é opcional.

Observação:

Você pode criar um componente de carrossel personalizado para o Adobe Experience Manager que exibe os ativos digitais localizados no DAM AEM. Para obter informações, consulte Criação de componentes personalizados do carrossel para o Adobe Experience Manager.

Gráfico

O componente Gráfico permite que você adicione um gráfico de barras, de linhas o de pizza. O AEM cria um gráfico a partir dos dados fornecidos. Você fornece os dados, digitando diretamente na guia de Dados ou copiando e colando em uma planilha.

  • Dados
    • Dados do gráfico
      Insira os dados do gráfico usando o formato CSV; o formato de Valores separados por vírgulas usa vírgulas (“,”) como separador de campo.
  • Avançado
    • Tipo de gráfico
      Selecione a partir do gráfico de pizza, de linhas e de barras.
    • Texto alternativo
      O texto alternativo é exibido, em vez do gráfico.
    • Largura
      Largura do gráfico em pixels.
    • Altura
      Altura do gráfico em pixels.

O exemplo a seguir mostra um gráfico de dados seguido pelo gráfico de barras resultante:

Observação:

Você pode criar um controle gráfico AEM personalizado que exibe os dados localizados no JCR AEM. Para obter informações, consulte Exibição dos dados do Adobe Experience Manager em um gráfico.

Fragmento do conteúdo

Os Fragmentos de conteúdo são criados e gerenciados como ativos independentes da página. Em seguida, é possível usar estes fragmentos e suas variações ao criar suas páginas de conteúdo.

Importador de design

Isso permite fazer upload de um arquivo zip com um pacote de design.

Download

O componente de download cria um link na página da Web selecionada para baixar um arquivo específico. Você pode arrastar um ativo do Localizador de conteúdo ou fazer o upload de um arquivo.

  • Download
    • Descrição
      Uma breve descrição é exibida com o link de download.
    • Arquivo
      Arquivo disponível para download na página da Web resultante. Arraste um ativo do localizador de conteúdo ou clique na área para fazer o upload do arquivo disponível para download.

O exemplo a seguir mostra o componente de Download no Geometrixx:

Externo

O componente externo de integração do aplicativo (Externo) permite que você incorpore aplicativos externos na página do CQ usando um iframe.

  • Externo
    • Aplicativo de destino
      Especifique a URL do aplicativo da Web a ser integrado; por exemplo:
          http://en.wikipedia.org/wiki/Main_Page
    • Enviar parâmetros
      Marque a caixa com os parâmetros que deseja transmitir ao aplicativo, quando necessário.
    • Largura e altura
      Define o tamanho do iframe

O aplicativo externo é integrado ao sistema de parágrafo da página CQ, por exemplo, ao usar um aplicativo Target de http://en.wikipedia.org/wiki/Main_Page:

Observação:

Dependendo do caso de uso, outras opções estão disponíveis para integração de aplicativos externos, por exemplo, a Integração de portlets.

Flash

O componente Flash permite que você carregue um filme em Flash. Você pode arrastar um ativo em Flash do localizador de conteúdo para o componente ou usar a caixa de diálogo:

  • Flash
    • Filme em flash
      O arquivo de filme em flash. Arraste um ativo do localizador de conteúdo ou clique para abrir uma janela de navegação.
    • Tamanho
      Dimensões em pixels da área de exibição contendo o filme.
  • Imagem alternativa
    Uma imagem alternativa para ser exibida
  • Avançado
    • Menu de contexto
      Indica se o menu de contexto deve ser mostrado ou oculto.
    • Modo de janela
      A forma como a janela aparece, por exemplo opaca, transparente ou como uma janela distinta (sólida).
    • Cor do plano de fundo
      A cor do plano de fundo selecionada a partir do gráfico de cores fornecido.
    • Versão mínima
      A versão mínima do Adobe Flash Player necessária para executar o filme. O padrão é 9.0.0.
    • Atributos
      Quaisquer atributos necessários.

Imagem

O componente de imagem exibe uma imagem e texto respectivo de acordo com os parâmetros especificados.

Você pode fazer upload de uma imagem e, em seguida, editá-la e manipulá-la (por exemplo, cortar, girar, adicionar um link/texto/título). A funcionalidade é basicamente a mesmo em ambas as interfaces do usuário, embora a aparência seja diferente:

  • Interface otimizada para toque

    Você pode arrastar e soltar uma imagem do Navegador de ativos diretamente no componente ou na caixa de diálogo Configurar. Você também pode fazer upload de uma imagem na caixa de diálogo Configurar; esta caixa de diálogo também controla todas as definições e manipulações da imagem:

    Assim que a imagem for carregada (e não antes), você poderá usar a edição local para cortar/girar a imagem conforme necessário:

    Observação:

    O editor local usa o tamanho e a proporção original da imagem durante a edição. Você também pode especificar as propriedades de altura e largura. Qualquer restrição de tamanho e aspecto definida nas propriedades será aplicada ao salvar as alterações de edição.

    Dependendo do seu caso, restrições mínimas e máximas também podem ser impostas pelo design da página ; estas são desenvolvidas durante a implementação do projeto.

    Várias opções adicionais estão disponíveis no modo de edição de tela cheia; por exemplo, mapa e zoom:

  • Interface clássica

    Você pode arrastar e soltar uma imagem do Localizador de conteúdo diretamente no componente ou na caixa de diálogo Editar. Você também pode clicar duas vezes na área central da caixa de diálogo Editar para navegar pelo seu sistema de arquivos local e fazer upload de uma imagem. As duas guias da caixa de diálogo Editar também controla todas as definições e manipulações da imagem:

Observação:

O progresso do upload não pode ser monitorado com o Internet Explorer.

Os usuários do Internet Explorer precisam fazer upload da imagem, clicar em Ok e abrir novamente a imagem para ver o arquivo carregado na visualização e para poder realizar as modificações (isto é, cortar).

Consulte a seção Plataformas certificadas para obter mais informações sobre os recursos de HTML5 usados pelo AEM.

Quando uma imagem é carregada, você pode configurar o seguinte:

  • Mapa
    Para mapear uma imagem, clique em Mapa. É possível selecionar como deseja criar o mapa de imagem (retângulo, polígono e assim por diante) e especificar para onde a área deve apontar.
  • Recortar
    Clique em Recortar para recortar uma imagem. Use o mouse para recortar a imagem.
  • Girar
    Para girar uma imagem, clique em Girar. Clique repetidamente até que a imagem seja girada da maneira que desejar.
  • Apagar
    Remova a imagem atual.
  • Barra de zoom (somente clássica)
    Para aumentar e diminuir o zoom da imagem, use a barra de rolagem abaixo da imagem (acima dos botões OK e Cancelar).
  • Título
    O título da imagem.
  • Texto alternativo
    Um texto alternativo a ser utilizando na criação de conteúdo acessível.
  • Link para
    Crie um link para ativos ou outras páginas dentro do seu site.
  • Descrição
    Uma descrição da imagem.
  • Tamanho
    Define a altura e a largura da imagem.

Observação:

Na Interface otimizada para toque, algumas opções estão disponíveis apenas no editor de tela cheia.

A imagem final (com Título e Descrição) pode ser mostrada como:

Contêiner de layout

Este componente fornece um sistema de parágrafo que usa grades, para que você possa adicionar e posicionar componentes dentro de uma grade responsiva . Isso permite definir diferentes layouts de conteúdo com base na largura dos dispositivos de destino, incluindo uma variedade de telefones, tablets e áreas de trabalho.

Observação:

Este componente foi implementado com Linguagem do modelo HTML (HTL).

Lista

O componente de Lista permite que você configure os critérios de pesquisa para a exibição de uma lista:

  • Lista
    • Criar uso da lista
      Aqui, você especifica em qual lista recuperará o conteúdo. Existem vários métodos:
    • Dependendo do item que você escolher, um novo painel será exibido:
      • Opções de páginas filhas
        • Filhos de (Página principal)
          Especifique um caminho manualmente ou usando o seletor. Deixe em branco para usar a página atual como principal.
      • Opções para a lista fixa
        • Páginas
          Selecione uma lista de páginas. Use + para adicionar mais entradas e os botões Para cima/Para baixo para ajustar a ordem.
      • Opções de pesquisa
        • Começa em
          Especifique um caminho manualmente ou usando o seletor.
        • Pesquisar consulta
          Você pode inserir uma consulta de pesquisa de texto simples.
      • Opções de pesquisa avançada
        • Notação do predicativo do Querybuilder
          Você pode inserir uma consulta de pesquisa usando a notação do predicativo do Querybuilder. Por exemplo, é possível inserir "fulltext=Marketing" para ter todas as páginas com "Marketing" em seu conteúdo exibidas no carrossel.
          Consulte a API do QueryBuilder para obter uma discussão completa sobre as expressões de consulta e mais exemplos.
      • Tags
        Especifique a página principal, tags/palavras-chave e critérios de correspondência.
    • Exibir como
      A forma como deseja que os itens sejam listados; inclui links, teasers e notícias.
    • Ordenar por
      Caso a lista deva ser ordenada, e, se assim for, os critérios a serem usados para a classificação. Você pode inserir um critério ou selecionar um da lista suspensa fornecida.
    • Limite
      Especifique o número máximo de itens que deseja exibir na lista.
    • Ativar feed
      Indica se um feed RSS deve ser ativado na lista.
    • Paginar após
      Aqui, você pode especificar o número de itens da lista para serem exibidos ao mesmo tempo. Uma lista com mais itens do que o especificado usará a paginação para exibir a lista em várias porções.

O exemplo a seguir mostra um componente de Lista da forma que ele poderá exibir uma lista de páginas filhas (o design é controlado pelas definições CSS personalizadas do site).

Logon

Fornece os campos Nome de usuário e Senha.

É possível configurar:

  • Logon
    • Rótulo da seção
      Texto principal para os campos de entrada.
    • Rótulo do nome de usuário
      Texto para rotular o campo de nome de usuário.
    • Rótulo da senha
      Texto para rotular o campo de senha.
    • Rótulo do botão de logon
      Texto para o botão de logon.
    • Redirecionar para
      Você pode especificar a página em seu site que deve ser aberta assim que o usuário fizer logon.
  • Já está conectado.
    • Rótulo do botão continuar
      Texto para indicar que o usuário já está conectado.

Status do pedido

  • Título
    • Título
      Especifique o texto do título que deseja exibir.
    • Link
      Especifique a página (produto) para a qual o status do pedido deve ser exibido.
    • Tipo/Tamanho
      Escolha da seleção fornecida.

Referência

O componente de referência permite referenciar o texto em outra página do site AEM (dentro da ocorrência atual). O conteúdo do parágrafo referenciado aparecerá como se fosse na página atual. O conteúdo será atualizado quando o parágrafo de origem for alterado (pode ser necessário uma atualização de página).

  • Parágrafo de referência
    • Referência
      Especifique o caminho para a página e o parágrafo que você deseja referenciar (inclua o conteúdo).

Para especificar o caminho para um parágrafo, você precisa colocar o caminho (para a página) como um sufixo com:

.../jcr:content/par/<paragraph-ID>

Por exemplo:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par/similar-products

Além de referenciar um número específico, o caminho também pode ser modificado para especificar um sistema de parágrafo completo. Você pode fazer isso usando como sufixo o caminho com:

/jcr:content/par

Por exemplo:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par

Uma vez configurado, o conteúdo será exibido exatamente como na página de origem. O fato de que é uma referência só é visto quando você abre o componente para edição:

Pesquisar

O componente de pesquisa adiciona o recurso de pesquisa à sua página.

É possível configurar:

  • Pesquisar
    • Tipos de nó
      Se a pesquisa for restrita ao tipo de nó específico liste-os aqui; por exemplo, cq:Página.
    • Caminho para pesquisar em
      Especifique a página raiz do ramo que deseja pesquisar.
    • Texto do botão de pesquisa
      O nome exibido no botão de pesquisa atual.
    • Texto de estatística
      O texto exibido acima dos resultados de pesquisa.
    • Nenhum texto de resultados
      Se não houver resultados, o texto inserido aqui será exibido.
    • Verificar a ortografia do texto
      Caso alguém insira um termo semelhante, esse texto será exibido antes do termo.
      Por exemplo, caso digite geometrixxe, o sistema exibirá "Você quer dizer? geometrixx".
    • Texto de páginas semelhantes
      O texto que é exibido ao lado de um resultado para as páginas semelhantes. Clique neste link para visualizar as páginas com conteúdo semelhante.
    • Texto de pesquisa relacionado
      O texto que aparece ao lado das pesquisas para os termos e tópicos relacionados.
    • Pesquisar textos de tendência
      O título acima dos termos de pesquisa inseridos pelos usuários.
    • Rótulo das páginas de resultado
      O texto que aparece na parte inferior da lista, com links para outras páginas de resultados.
    • Rótulo anterior
      O nome que aparece no link para as páginas de pesquisa anteriores.
    • Rótulo próximo
      O nome que aparece no link para as páginas de pesquisa subsequentes.

O exemplo a seguir mostra o componente de Pesquisa depois de pesquisar a palavra geometrixx no diretório raiz de uma instalação padrão. Também ilustra a paginação dos resultados:

O exemplo a seguir mostra um termo de pesquisa escrito incorretamente e não está disponível:

Mapa do site

Uma lista de mapa do site automático, que (com as configurações padrão) lista todas as páginas (como links ativos) no site atual. Por exemplo, uma extração mostra:

 Se necessário, é possível configurar:

  • Mapa do site
    • Caminho raiz
      O caminho onde a lista inicia.

Slideshow

Este componente permite que você carregue uma série de imagens a serem exibidas como um slideshow em sua página. Você pode adicionar ou remover imagens e atribuí-las um título. Em Avançado, também é possível especificar o tamanho da área de exibição.

É possível configurar:

  • Slides
    • Novo slide
      Você pode especificar uma seleção de slides usando o botão Adicionar (e Remover).
    • Título
      Especifique um título se necessário. Isso é sobreposto no slide apropriado.
  • Avançado
    • Tamanho
      Especifique a largura e a altura do gráfico em pixels.

O componente de slideshow exibe repetidamente em cada sequência, durante um curto período de tempo, antes de esmaecer para o próximo slide:

Tabela

Observação:

O componente de Tabela baseia-se no Editor de Rich Text, já que é o componente de Texto.

Recomenda-se usar o componente de Tabela para tabelas, embora também possam ser construídas com o componente de Texto.

O componente de Tabela é pré-configurado para permitir a você construir, preencher e formatar uma tabela. Usando a caixa de diálogo, você pode configurar a sua tabela e criar o conteúdo da seguinte maneira:

  • desde o início
  • copiando e colando uma planilha ou uma tabela a partir de um editor externo (como Excel, OpenOffice, Bloco de notas, etc).

É possível fazer alterações básicas ao conteúdo usando um editor em linha:

No modo de tela cheia, é possível configurar o layout da tabela:

A captura de tela a seguir mostra um exemplo do uso do componente de tabela; o design é determinado pelo CSS específico do site:

Nuvem de tags

Uma nuvem de tags mostra uma seleção apresentada graficamente das tags aplicadas ao conteúdo do seu site:

Ao configurar o componente de Nuvem de tags, você pode especificar:

  • Tags a exibir
    Onde as tags a serem exibidas são coletadas. Selecione de uma página, uma página com todas as páginas filhas ou com todas as tags.
  • Página
    Selecione a página a ser referenciada.
  • Não há links nas tags
    Se as tags exibidas devem agir como links.

Para obter mais informações sobre como aplicar tags, acesse Usando tags .

Texto

Observação:

O componente de Texto baseia-se no Editor de Rich Text, já que é o componente de Tabela.

Recomenda-se usar o componente de Tabela para tabelas, embora também possam ser construídas com o componente de Texto.

O componente de Texto permite que você insira um bloco de texto usando um editor WYSIWYG, com funcionalidade fornecida pelo Editor de Rich Text. Uma seleção de ícones permite que você formate o texto, incluindo características da fonte, alinhamento, links, listas e recuo. A funcionalidade é a mesma em ambas as interfaces do usuário, embora a aparência seja diferente:

  • Interface otimizada para toque (modo de tela cheia)

  • Interface clássica

Quando você abre a caixa de diálogo Configurar (otimizada para toque) ou a guia Estilos da caixa de diálogo Editar (clássico), você também pode definir:

  • Espaçador
  • Estilo de texto

O texto formatado será exibido na página; o design atual dependerá do CSS do site:

Para obter informações mais detalhadas sobre o componente de texto, consulte a página do Editor de Rich Text.

Edição local

Além do texto da caixa de diálogo baseada no modo de edição de Rich Text, o AEM também oferece a edição no local, que permite a edição direta do texto da forma como é exibido no layout da página. Mais uma vez, a aparência depende da interface do usuário que você está usando.

Texto e imagem

O componente de Texto e Imagem adiciona um bloco de texto e uma imagem. Você também pode adicionar e editar texto e imagens separadamente; veja os componentes de Texto e Imagem para obter detalhes.

Assim como ocorre com os componentes de texto e imagem, a aparência varia de acordo com a interface do usuário que você está usando, mas em ambas você pode configurar:

  • Estilos de componentes (Estilos)
    Aqui, você pode alinhar à esquerda ou à direita da imagem. O padrão é alinhamento à Esquerda, com a imagem à esquerda.
  • Propriedades da imagem (Propriedades avançadas de imagem)
    Permite que você especifique o seguinte:
    • Ativo da imagem
      Carrega a imagem desejada.
    • Título
      O título para o bloco; será exibido ao passar o mouse em cima.
    • Texto alternativo
      O texto alternativo a ser exibido, caso a imagem não possa ser exibida. Caso deixado em branco, o título será usado.
    • Link para
      Especifica um caminho para o direcionamento.
    • Descrição
      Uma descrição da imagem.
    • Tamanho
      Define a altura e a largura da imagem.

O exemplo a seguir mostra um componente de Imagem de texto exibindo a imagem alinhada à esquerda:

Título

O componente de título pode:

  • exibir o nome da página atual; isso pode ser feito ao deixar o campo Título em branco
  • exibir um texto que você especificar no campo Título.

É possível configurar:

  • Título
    Caso deseje usar um nome diferente do título da página, insira-o aqui.
  • Link
    A URI, caso o título funcione como um link.
  • Tipo/Tamanho
    Selecione Pequeno ou Grande na lista suspensa. Pequeno é gerado como uma imagem. Grande é gerado como texto.

O exemplo a seguir mostra um componente de Título sendo exibido; o design é determinado pelo CSS específico do site.

Vídeo

O componente de Vídeo permite que você coloque um elemento "out-of-the-box" de vídeo predefinido em uma página. 

Observação:

Para que ocorra a decodificação adequada, você deve instalar o FFmpeg separadamente.

FFmpeg é usado para gerar representações de vídeo quando Dynamic Media não está habilitado, enquanto o decodificador de vídeo é usado para AEM habilitado para Dynamic Media. Consulte a Instalação e configuração do decodificador de vídeo com FFmpeg para obter mais detalhes.

Eles também podem Configurar os perfis de vídeo para uso com elementos de HTML5.

Depois de adicionar uma instância de componente em sua página, você pode configurar:

  • Vídeo
    • Ativo de vídeo
      Faça upload ou solte o seu ativo de vídeo.
    • Tamanho
      O tamanho nativo do vídeo (largura x altura em pixels) será exibido nas caixas ao lado do Tamanho (veja acima). Insira manualmente as dimensões de largura e altura aqui, caso deseje substituir as dimensões nativas do vídeo. Clique em OK para fechar a caixa de diálogo.

Observação:

Os formatos suportados incluem:

  • .mp4
  • Ogg
  • FLV (vídeo em Flash)  

Colunas

As colunas são um mecanismo para controlar o layout de conteúdo no AEM. Em uma instalação padrão, são fornecidos componentes para a criação de duas e/ou três colunas.

O exemplo a seguir mostra o componente de 2 colunas em uso. É possível usar os espaços reservados para os novos componentes:

2 colunas

Um componente de controle de coluna que padroniza 2 colunas iguais.

3 colunas

Um componente de controle de coluna que padroniza 3 colunas iguais.

Controle de coluna

Observação:

O componente de Controle de coluna está disponível somente na interface clássica. Na interface otimizada para toque, os componentes de 2/3 colunas são utilizados.

O componente de Controle de coluna permite que os usuários escolham como dividir o conteúdo no painel principal da página da Web em várias colunas. Os usuários podem escolher o número de colunas necessárias (de uma lista predefinda) e, em seguida, criam, excluem ou movem o conteúdo dentro de cada uma das colunas.

  • Controle de coluna
    • Layout de colunas
      Selecione o número de colunas que deseja apresentar. Depois da criação, cada coluna tem seu próprio link para arrastar componentes ou ativos aqui ao adicionar conteúdo.

Formulário

Os componentes do formulário são usados ​​para criar formulários para os visitantes enviarem informações. Os formulários e os componentes do formulário podem ser usados para coletar informações, incluindo o feedback do usuário (por exemplo, um questionário de satisfação do cliente) e as informações do usuário (por exemplo, o registro do usuário).

Observação:

Consulte Ajuda com os formulários AEM para obter informações sobre os formulários AEM.

Os formulários são criados de vários componentes diferentes:

  • Formulário
    O componente de formulário define o início e o fim de um novo formulário em uma página. Outros componentes podem, então, ser colocados entre esses elementos, tais como tabelas, downloads e assim por diante. 
  • Elementos e campos do formulário
    Os campos e elementos do formulário podem incluir caixas de texto, botões de opção, imagens e assim por diante. O usuário geralmente completa uma ação em um campo de formulário, como digitar um texto. Consulte os elementos de formulário individuais para obter mais informações.
  • Componentes de perfil
    Os componentes de perfil são relacionados aos perfis de visitantes usados para a colaboração social e outras áreas, onde é necessária a personalização do visitante. 

A seguir, há um formulário de exemplo que contém o componente do Formulário (início e fim) com dois campos de texto de formulário usados para inserir, um campo de texto geral usado para o texto principal e um botão Enviar.

Observação:

Informações sobre o desenvolvimento e a personalização de seus formulários está disponível na página de Desenvolvimento de formulários. Isso inclui a adição de ações e restrições, o pré-carregamento de campos e a utilização de scripts para chamar um serviço para tomar uma ação, entre outros.

Configurações comuns a (diversos) componentes de formulários

Embora cada um dos componentes do formulário tenha uma finalidade diferente, muitos são compostos de opções e parâmetros similares.

Ao configurar qualquer um dos componentes do formulário as seguintes guias estarão disponíveis na caixa de diálogo:

  • Título e texto
    Aqui, é necessário especificar informações básicas, como o título do formulário e qualquer texto que o acompanha. Se for o caso, também é possível definir outras informações importantes, como se o campo é de seleção múltipla e se os itens estão disponíveis para seleção.
  • Valores iniciais
    Permite especificar um valor padrão.
  • Restrições
    Aqui, é possível especificar se um campo é obrigatório e se as restrições de local estão no campo (por exemplo, deve ser numérico e assim por diante).
  • Estilo
    Indica o tamanho e estilo dos campos.

Observação:

Os campos variam muito, dependendo do componente individual.

Essas guias fornecem os parâmetros necessários; estes dependem do tipo de componente individual, mas podem incluir:

  • Título e texto
    • Nome do elemento
      Nome do elemento de formulário. Isso indica onde os dados são armazenados no repositório.
      Este é um campo obrigatório e deve conter apenas os seguintes caracteres:
      • caracteres alfanuméricos
      • _ . /: -
    • Título
      O título exibido com o campo. Caso deixado em branco, o título padrão será exibido.
    • Descrição
      Permite fornecer informações adicionais para o usuário, se necessário. No formulário, essas informações são exibidas abaixo do campo, em uma fonte menor do que o título.
    • Mostrar/Ocultar
      Determina quando o campo é visível.
  • Valores iniciais
    • Valor padrão
      O valor exibido no campo quando o formulário é aberto; ou seja, antes que o usuário tenha inserido qualquer informação.
  • Restrições
    • Obrigatório
      Depende do tipo de componente de formulário, mas fornece uma ou mais caixas de clique para indicar que este campo, ou determinadas partes dele, é/são necessários.
    • Mensagem de obrigatório
      Uma mensagem para informar os usuários que este campo é obrigatório; um campo obrigatório também será indicado por um asterisco.
    • Restrição
      As restrições disponíveis para seleção dependem do tipo de componente de formulário.
    • Mensagem de restrição
      Uma mensagem para informar os usuários o que é necessário.
  • Estilo
    • Tamanho
      Em linhas e colunas.
    • Largura
      Em pixels.
    • CSS

Formulário (componente)

São sempre pareados para garantir que o formulário está definido corretamente.

Entre o início e o fim de um formulário, você pode adicionar componentes do formulário que definem os campos de entrada atuais para os usuários.

Início do formulário

Esse componente é necessário para definir o início de um novo formulário em uma página. É possível configurar:

  • Formulário
    • Página de agradecimento
      A página para agradecer aos visitantes por suas informações. Caso deixado em branco, o formulário será exibido novamente após o envio.
    • Fluxo de trabalho de início
      Determina qual fluxo de trabalho é acionado, após o envio do formulário.
  • Avançado
    • Tipo de ação
      Um formulário exige uma ação. A ação define a operação acionada pela execução com os dados enviados pelo usuário (semelhante a action= in HTML). Alguns precisam de uma Configuração de ação correspondente.
      Uma seleção de tipos de ação está incluída em uma instalação padrão do AEM:
      • Solicitação de conta
      • Criar conteúdo
      • Criar cliente em potencial
      • Criar e atualizar a conta
      • Serviço de e-mail: criar assinante e adicionar à lista
      • Serviço de e-mail: enviar e-mail de resposta automática
      • Serviço de e-mail: cancelar a inscrição do usuário da lista
      • Editar comunidade
      • Editar recursos
      • Editar recursos controlados pelo fluxo de trabalho
      • E-mail
      • Detalhes do pedido feito
      • Atualização do perfil
      • Redefinir senha
      • Definir senha
      • Armazenar conteúdo
        É o tipo de ação padrão.
      • Armazenar conteúdo com os uploads
      • Enviar pedido
      • Cancelar assinatura do assinante
      • Atualizar pedido
    • Identificador de formulário
      O identificador de formulário identifica-o. Use o identificador de formulário, caso tenha vários formulários em uma única página; verifique se têm identificadores diferentes.
    • Carregar caminho
      É o caminho para as propriedade do nó, usado para carregar os valores predefinidos para os campos do formulário.
      É um campo opcional que especifica o caminho para um nó no repositório. Quando este nó tem propriedades que correspondem aos nomes do campo, os campos apropriados no formulário são pré-carregados com o valor dessas propriedades. Caso não exista nenhuma correspondência, o campo vai conter o valor padrão.
      Com o uso do Caminho de carga, é possível pré-carregar o formulário com valores nos campos necessários. Consulte Pré-carregar valores do formulário.
    • Validação de cliente
      Indica se a validação do cliente é necessária para este formulário (a validação do servidor sempre ocorre). Isso pode ser obtido em conjunto com o componente Captcha de formulários.
    • Tipo de recurso de validação
      Define o tipo de recurso de validação do formulário, caso deseje validar o formulário inteiro (em vez de campos individuais). Caso esteja validando o formulário completo, inclua também um dos itens a seguir: 
      • Um script para a validação do cliente:
           /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
      • Um script para a validação no lado do servidor:
           /apps/<myApp>/form/<myValidation>/formservervalidation.jsp
    • Configurações de ação
      As opções disponíveis em Configurações de ação dependem do Tipo de ação selecionado:
      • Solicitação de conta
        • Criar página de conta
          A página usada para criar uma nova conta.
      • Criar conteúdo
        • Caminho do conteúdo
          O caminho do conteúdo para qualquer conteúdo que o formulário acumule. Insira um caminho que termine com uma barra /. A barra significa que para cada porta de formulário, um novo nó é criado no local indicado; por exemplo:
              /forms/feedback/
        • Tipo
          Selecione o tipo necessário.
        • Formulário
          Especifique o formulário.
        • Renderizar com
          Selecione a opção desejada da lista.
        • Tipo de recurso
          Se definido, este é adicionado a cada comentário como sling:resourceType
        • Exibir seletor
      • Criar cliente em potencial
        • O cliente potencial será adicionado a esta lista
          Especifique a lista de cliente potencial necessária.
      • Criar e atualizar a conta
        • Grupo inicial
          Grupo para atribuir a um novo usuário.
        • Início
          Página para exibir após o login bem-sucedido.
        • Caminho
          O caminho (relativo) para onde a nova conta é criada e armazenada.
        • Exibir dados...
          Clique nesse botão para acessar as informações sobre os resultados do formulário no editor em massa. Por aqui, você pode exportar as informações para um arquivo .tsv (separado por tabulações) (para ser usado, por exemplo em uma planilha do Excel).
      • E-mail
        • De
          Insira o endereço de e-mail para definir como remetente.
        • Mailto
          Insira os endereços e-mail para os quais enviar o formulário.
        • CC
          Insira os endereços de e-mail CC.
        • CCO
          Insira os endereços de e-mail CCO.
        • Assunto
          Insira um assunto para o e-mail.
      • Redefinir senha
        • Página para alterar senha
          A página usada ao alterar a senha.
      • Armazenar conteúdo
        • Caminho do conteúdo
          O caminho do conteúdo para qualquer conteúdo que o formulário acumule. Insira um caminho que termine com uma barra /. A barra significa que para cada porta de formulário, um novo nó é criado no local indicado; por exemplo:
              /forms/feedback/
        • Exibir dados...
          Clique nesse botão para acessar as informações sobre os resultados do formulário no editor em massa. A partir daqui, você pode exportar as informações para um arquivo .tsv (separado por tabulações) (para uso, por exemplo, em uma planilha do Excel).
      • Armazenar conteúdo com os uploads
        Tem a mesma opção que Armazenar conteúdo.
      • Cancelar assinatura do assinante
        • O cliente potencial será excluído desta lista
          Especifique a lista de cliente potencial necessária.

Final do formulário

Isso marca o fim do formulário. É possível configurar:

  • Fim do formulário
    • Mostrar botão enviar
      Indica se um botão Enviar deve ser exibido ou não.
    • Nome do botão enviar
      Um identificador, caso esteja usando vários botões Enviar em um formulário.
    • Título do botão enviar
      O nome que aparece no botão, como Enviar.
    • Mostrar botão redefinir
      Marque a caixa de seleção para tornar o botão Redefinir visível.
    • Título do botão redefinir
      O nome que aparece no botão Redefinir.
    • Descrição
      As informações que aparecem abaixo do botão.

Nome da conta

Isso permite que você insira um nome de conta:

Endereço

Isso permite que você adicione um campo de endereço internacional, com o seguinte formato:

O componente está configurado para uso imediato, mas é possível alterar a configuração, se necessário. Por exemplo, as restrições podem ser adicionadas para os elementos individuais do endereço. As configurações padrão serão usadas caso haja campos vazios.

Captcha

O componente Captcha exige que o usuário digite uma sequência alfanumérica como exibido na tela. A sequência muda a cada atualização.

Você pode configurar vários parâmetros para este componente, incluindo uma mensagem a ser exibida quando a sequência captcha for inválida.

Grupos de caixa de seleção

Uma caixa de seleção permite que você crie uma lista de uma ou mais caixas de seleção, algumas das quais, podem ser selecionadas ao mesmo tempo.

É possível especificar vários parâmetros, incluindo um título, descrição e nome do elemento. Ao usar os botões + e -, você pode adicionar ou remover itens, em seguida, posicioná-los com as setas para cima e para baixo.

Observação:

Usando Caminho de carga de itens, você pode pré-carregar a lista de grupos de caixas de seleção com valores.

Consulte Pré-carregar campos de formulário com vários valores.

Detalhes do cartão de crédito

Isso permite fornecer os campos necessários para inserir os detalhes do cartão de crédito. Você pode configurá-lo para especificar os tipos de cartão aceitos e as informações necessárias (por exemplo, código de segurança).

Lista suspensa

Uma lista suspensa pode ser configurada para fornecer ao usuário um intervalo de valores para seleção:

É possível especificar um título e os itens que serão exibidos na lista. Ao usar os botões + e -, você pode adicionar ou remover itens de lista, em seguida, posicioná-los com os botões para cima e para baixo. Você pode especificar se os usuários podem selecionar vários itens da lista e quaisquer itens que devem ser selecionados automaticamente na primeira vez que a lista for aberta (valores iniciais).

Observação:

Usando o Caminho de carga de itens você pode pré-carregar a lista suspensa com valores.

Consulte Pré-carregar campos de formulário com vários valores.

Upload de arquivo

O componente de upload de arquivos fornece ao usuário um mecanismo para selecionar e enviar um arquivo.

Observação:

Você pode criar um componente de upload personalizado para fazer o upload de arquivos para um Sling Servlet. Para obter informações, consulte Upload de arquivos no Adobe Experience Manager.

Campo oculto

Esse componente permite a criação de um campo oculto. Estes podem ser utilizados para diversos fins; por exemplo, quando você precisa executar uma ação após enviar o formulário ou quando dados ocultos são necessários no processamento posterior.

Observação:

Você também pode personalizar o seu formulário para mostrar ou ocultar componentes do formulário específicos, de acordo com o valor de outros campos no formulário. Alterar a visibilidade de um campo do formulário é útil, quando o campo é necessário apenas em condições específicas.

Consulte Mostrar e ocultar componentes de formulário.

Botão de imagem

Um botão de imagem permite que você crie um botão com seu próprio texto e imagem:

Botão de imagem

O componente de upload da imagem fornece ao usuário um mecanismo para selecionar e enviar um arquivo de imagem.

O campo do link permite que o usuário especifique uma URL:

Mais usado para o formulário de evento do calendário, onde é usado para o campo URL/link de um evento.

Campo de senha

Isso é usado para permitir ao usuário inserir a senha:

Redefinição de senha

Esse componente fornece ao usuário dois campos para:

  • inserir uma senha
  • inserir repetidamente a senha para confirmar que a mesma está correta.

Com as configurações padrão, o componente será exibido como:

Grupo radial

Um grupo radial fornece uma lista de uma ou mais caixas de seleção radial, onde apenas uma poderá ser selecionada em um determinado momento.

É possível especificar o nome do elemento com um título e descrição. Ao usar os botões + e -, você pode adicionar ou remover itens, posicioná-los com as setas para cima e para baixo e especificar um valor padrão, se necessário.

Observação:

Usando o Caminho de carga do item você pode pré-carregar o grupo de opções com valores.

Consulte Pré-carregar campos de formulário com vários valores.

Botão enviar

Esse componente permite que você crie um botão de envio, com o texto padrão:

Ou o seu próprio texto:

Campo de tags

Esse campo permite que você selecione as tags:

Você pode especificar diversos parâmetros, incluindo os espaços de nomes que podem ser usados​​ na guia especializada:

  • Campo de tags
    • Espaços de nomes permitidos
      • Geometrixx Outdoors
      • Fluxo de trabalho
      • Fórum
      • Fotografia de bancos de dados
      • Geometrixx Media
      • Tags padrão
      • Marketing
      • Propriedades de ativos
    • Largura em pixels
    • Tamanho da pop-up

Campo de texto

O campo de texto padrão pode ser configurado no tamanho necessário e com o seu próprio lead na mensagem:

Botões de envio do fluxo de trabalho

Esse componente permite que você crie um botão de envio para usar em um fluxo de trabalho.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online