Exibir registros, campos e tabelas

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

• Explicar a diferença entre componentes genéricos e específicos e por que você pode querer usar uns ou outros.
  
• Explicar o que é um componente de iteração e para que é usado.
  
• Usar componentes genéricos relevantes para exibir detalhes de registros e listas relacionadas.
  
• Usar componentes específicos relevantes para substituir e personalizar componentes genéricos.
  

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e copie e cole os valores de português (Brasil). Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

Introdução aos componentes de saída

O Visualforce inclui cerca de 150 componentes integrados que podem ser usados em suas páginas. Os componentes são processados em HTML, CSS e JavaScript quando uma página é solicitada. Os componentes genéricos fornecem uma quantidade significativa de funcionalidades em um único componente e podem agregar muitas informações e a interface de usuário à página na qual são usados. Os componentes específicos fornecem funcionalidades mais focadas e permitem que você crie a página para ter a aparência e o comportamento que desejar.

Agora, nos concentraremos nos componentes de saída, ou seja, componentes que geram dados a partir de um registro e que permitem projetar uma interface de usuário somente de visualização.

Criar uma página do Visualforce com um controlador padrão

Use componentes de saída com um controlador padrão para que seja fácil acessá-los e exibir os detalhes do registro.

Você lidará com uma série de diferentes componentes de saída nesta página. Por ora, criaremos essencialmente uma página em branco.

1. Abra o Developer Console e clique em File (Arquivo) | New (Nova) | Visualforce Page (Página do Visualforce) para criar uma nova página do Visualforce. Insira AccountDetail como nome da página.
   
2. No editor, substitua qualquer marcação pelo seguinte.
   

   <apex:page standardController="Account">
       {! Account.Name }
   </apex:page>

3. Clique em Preview (Visualizar) para abrir uma visualização da página que você pode consultar enquanto faz alterações. Uma nova janela deve abrir mostrando os elementos de cabeçalho e barra lateral da página padrão do Salesforce, mas sem conteúdo.
   
4. Adicione a ID de uma conta ao URL da janela de visualização e pressione Return. A URL terá o seguinte formato: https://SalesforceInstance/apex/AccountDetail?core.apexpages.request.devconsole=1&id=001D000000JRBes Agora, você deve visualizar o nome da conta no corpo. Isso comprova o funcionamento de seu controlador padrão e a validade de seu ID de registro.
   

Exibir detalhes do registro

Use <apex:detail> para adicionar rapidamente detalhes de registro a uma página que faz uso de um controlador padrão.

Alguns componentes de saída agregam muito valor. Esses componentes “genéricos” oferecem uma série de funcionalidades, exibindo muitos campos, rótulos e outros elementos da interface de usuário. Com eles, você pode construir rapidamente páginas que são variações da interface de usuário integrada do Salesforce.

1. Substitua a linha com {!Account.Name } pela marcação a seguir e salve suas alterações.
   <apex:detail />Uau, é uma grande mudança! Com uma linha de marcação você acabou de reproduzir toda a página de visualização padrão do objeto da conta! 
   

<apex:detail> é um componente de saída genérico que adiciona muitos campos, seções, botões e outros elementos da interface de usuário à página usando apenas uma linha de marcação. Observe também que tudo o que é adicionado à página usa o estilo do Salesforce Classic. Há muitos atributos para personalizar a aparência de <apex:detail>. Gaste alguns minutos e tente fazer algumas alterações para ver o que elas provocam. Para criar páginas mais alinhadas com o estilo do Lightning, consulte Entender considerações de design visual importantes no módulo Visualforce & Lightning.

Exibir listas relacionadas

Use <apex:relatedList> para exibir listas de registros relacionados ao registro atual.

O que é exatamente uma lista relacionada? O que <apex:relatedList> faz quando você o adiciona a uma página?

• Ele coleta uma lista de elementos de dados similares. Por exemplo, uma lista de contatos da conta.
  
• Ele configura uma tabela com colunas para cada campo, cabeçalhos no topo de cada coluna e assim por diante.
  
• Ele acrescenta à tabela uma linha para cada item da lista (para cada contato relacionado) e preenche cada coluna com o campo adequado do registro.
  

O componente <apex:detail> exibe os detalhes de um determinado registro, bem como listas de registros relacionados, como contatos, casos, oportunidades e assim por diante. Isso pode ser coisa demais, então você pode remover essas listas relacionadas e adicionar apenas algumas, usando um componente genérico diferente.

1. Revise a marcação para omitir listas relacionadas ao adicionar relatedList="false" ao componente <apex:detail>.
   

<apex:detail relatedList="false"/>

Os detalhes dos registros de conta ainda são exibidos, porém, as listas relacionadas desapareceram.

2. Adicione a seguinte marcação abaixo da linha <apex:detail />.
   

<apex:relatedList list="Opportunities" pageSize="5"/>
<apex:relatedList list="Contacts"/>

Sua página deve agora exibir duas listas relacionadas. Você pode configurar cada lista relacionada independentemente, alterando atributos apenas naquele componente.

O componente <apex:relatedList> é outro componente genérico, porém está em um nível inferior ao <apex:detail>. Ou seja, <apex:detail> exibe várias listas relacionadas de uma vez (ou nenhuma), enquanto <apex:relatedList> permite acessar uma por uma. Isso permite exibir apenas as listas relacionadas de seu interesse, e você pode personalizar a exibição de cada uma delas individualmente.

Use níveis mais altos de componentes quando eles oferecerem a funcionalidade necessária e use componentes de níveis mais baixos quando precisar controlar o que é exibido na página.

Exibir campos individuais

Use <apex:outputField> para exibir campos individuais de um registro.

Quando você precisar de mais controle sobre o layout de página, poderá adicionar campos individualmente. O componente <apex:outputField> foi projetado para fazer exatamente isso.

1. Substitua a linha <apex:detail/> pela marcação a seguir.
   

   <apex:outputField value="{! Account.Name }"/>
   <apex:outputField value="{! Account.Phone }"/>
   <apex:outputField value="{! Account.Industry }"/>
   <apex:outputField value="{! Account.AnnualRevenue }"/>

   Os quatro campos são adicionados à página. Mas a formatação talvez não fique como você esperava. Os valores de campo são exibidos em uma mesma linha, sem rótulos e sem outra formatação. Não é o que queremos e é um contraste muito grande comparado com os componentes <apex:detail> e <apex:relatedList>, que usam o estilo da plataforma automaticamente. Por si só, <apex:outputField> só gera o valor do campo. Mas quando você o encapsula nos componentes <apex:pageBlock> e <apex:pageBlockSection>, seu comportamento muda bastante.
   
2. Encapsule as linhas <apex:outputField> com componentes <apex:pageBlock> e <apex:pageBlockSection> para que sua marcação fique com esta aparência.
   

   <apex:pageBlock title="Account Details">
       <apex:pageBlockSection>
           <apex:outputField value="{! Account.Name }"/>
           <apex:outputField value="{! Account.Phone }"/>
           <apex:outputField value="{! Account.Industry }"/>
           <apex:outputField value="{! Account.AnnualRevenue }"/>
       </apex:pageBlockSection>
   </apex:pageBlock>

   Agora sim! 
   

Os componentes <apex:pageBlock> e <apex:pageBlockSection> são necessários para ativar a aparência da plataforma. Quando você usa <apex:outputField> em uma <apex:pageBlockSection>, ele adota o layout de duas colunas, adiciona rótulos de campo, alinha e dá estilo a campos e rótulos da maneira correta e por aí adiante.

Embora <apex:outputField> pareça ser um componente específico por gerar apenas um campo, ele na verdade faz muitas coisas. Ele sabe se está sendo usado dentro de outros componentes e muda sua saída e estilo de acordo com isso. Ele também é inteligente em relação à formatação e à exibição. Observe que o campo Receita anual está formatado como moeda. <apex:outputField> se adapta automaticamente ao tipo de dados do campo que está sendo exibido. Experimente adicionar uma data, uma lista de verificação ou de opções e veja o que acontece.

Exibir uma tabela

Use <apex:pageBlockTable> para adicionar uma tabela de dados a uma página.

É possível fazer o mesmo com a marcação do Visualforce usando componentes de iteração. O componente de iteração trabalha com um conjunto de itens similares, em vez de um valor único. Por exemplo, {!Account.contacts} é uma expressão que avalia a lista de contatos de uma conta. Use essa expressão com um componente de iteração para criar uma lista ou tabela com os detalhes desses contatos relacionados.

1. Substitua as duas linhas <apex:relatedList/> pela marcação a seguir.
   

   <apex:pageBlock title="Contacts">
      <apex:pageBlockTable value="{!Account.contacts}" var="contact">
         <apex:column value="{!contact.Name}"/>
         <apex:column value="{!contact.Title}"/>
         <apex:column value="{!contact.Phone}"/>
      </apex:pageBlockTable>
   </apex:pageBlock>

   Uma tabela informando os contatos da conta é adicionada à página, contendo apenas as colunas escolhidas. 
   

<apex:pageBlockTable> é um componente de iteração que gera uma tabela de dados preenchida com o estilo da plataforma. Vamos descrever o que acontece com a sua marcação.

• O atributo value de <apex:pageBlockTable> é definido como a expressão mencionada anteriormente, {!Account.contacts}. Essa é a lista de registros com a qual <apex:pageBlockTable> trabalhará.
  
• Para cada registro da lista, <apex:pageBlockTable> atribui um registro por vez à variável nomeada no atributo var de <apex:pageBlockTable>. Nesse caso, a variável se chama contact.
  
• Para cada registro, <apex:pageBlockTable> gera uma nova linha na tabela, usando a linha definida pelo conjunto de componentes <apex:column> no corpo de <apex:pageBlockTable>. Os componentes <apex:column>, por sua vez, usam a variável contact que representa o registro atual para extrair os valores de campo desse registro.
  
• Fora do loop, <apex:pageBlockTable> usa os campos nos componentes <apex:column> para criar cabeçalhos de coluna pesquisando o rótulo de cada campo.
  

É muita informação para absorver, e é difícil compreender os componentes de iteração de primeira. A melhor coisa a fazer agora é tentar criar os seus. Adicione uma lista de registros relacionados à oportunidade à página usando <apex:pageBlockTable>. Escolha os campos a serem mostrados na tabela. Pesquise os diversos atributos de <apex:pageBlockTable> e <apex:column> e experimente até se familiarizar.

Quero saber mais...

Os componentes genéricos permitem adicionar rapidamente várias funcionalidades a uma página, enquanto os componentes específicos proporcionam mais controle sobre os detalhes específicos de uma página.

<apex:enhancedList> e <apex:listViews> são outros componentes genéricos que podem ser usados com ou no lugar de <apex:relatedList>. E há muitos outros componentes que incluem uma série de funcionalidades em uma única marca. Se não tiver feito isso ainda, vá até Referência de componente padrão e veja a gama de possibilidades.

<apex:pageBlockTable> é um componente de iteração que usa o estilo do Salesforce Classic. <apex:dataTable> e <apex:dataList> são componentes de iteração para a criação de tabelas e listas sem o estilo. E <apex:repeat> é um componente de iteração que pode ser usado para gerar qualquer marcação arbitrária para uma coleção de registros.

Você deve ter notado que as listas relacionadas criadas manualmente estão sem algumas coisas que foram adicionadas à tabela criada por <apex:relatedList>. Por exemplo, os links Edit (Editar) e Del (Excluir) para editar e excluir registros individuais estão faltando, assim como o botão New Contact (Novo contato). Para criar esses elementos da interface de usuário você precisa saber um pouco mais do Visualforce, especificamente sobre formulários e ações. Você aprenderá a fazer isso em outro momento.

Recursos

• Guia do desenvolvedor do Visualforce: Displaying Field Values with Visualforce
• Guia do desenvolvedor do Visualforce: Using the Visualforce Component Library
• Guia do desenvolvedor do Visualforce: Displaying Related Lists for Custom Objects
• Guia do desenvolvedor do Visualforce: Building a Table of Data in a Page
• Guia do desenvolvedor do Visualforce: Standard Component Reference