Da
mesma forma que podemos encapsular um pedaço de código em um método e, em
seguida, reutilizar esse método várias vezes em um programa, podemos encapsular
um padrão de design comum em um componente personalizado e também reutilizar esse componente várias vezes em uma ou mais páginas Visualforce.
Como
podemos fazer isso?
Primeiramente
instale a seguinte base de testes em sua ORG de desenvolvedor:
Em
seguida crie o controller do componente. Esse controller irá retornar algumas
informações referentes as contas, para realizar a criação da classe.
Próximos passos:
1 - Em
Configurações (Setup), clique em Desenvolver (Develop) | Classes do Apex (Apex
Class);
2 - Clique
em novo (New);
3 - No
editor de códigos cole a classe abaixo:
public with sharing class WarehouseAccountsController {
public Decimal lat {get; set;}
public Decimal lng {get; set;}
public WarehouseAccountsController() {}
public List<Account> getAccounts() {
String q = 'SELECT ID, Name, ShippingStreet, ShippingCity from Account WHERE DISTANCE(Location__c, GEOLOCATION('+String.valueOf(lat)+','+String.valueOf(lng)+'), \'mi\') < 100';
return Database.query(q);
}
}
4 - Clique
em salvar (Save).
Com
isso cria-se a classe que deverá ser chamada no componente.
A
criação do componente é parecida com a criação de uma página Visualforce. Siga
os passos abaixo para realizar essa criação:
1 - Clique
em Configuração (Setup) | Desenvolver (Develop) | Componentes (Components);
2 - Dê
um nome e um rótulo para o componente;
3 - Remova
todo o código HTML que aparece entre as tags <apex:component> e
</apex:component>.;
4 - Adicione o controle que acabou de ser criado – Ex. <apex:component controller="WarehouseAccountsController">
Uma
das maiores diferenças entre um componente e a página é a forma como a
informação é passada para um componente. A página recebe as informações via
POST ou GET variáveis, mas em um componente é preciso definir quais atributos
serão passados para ele, quando a página incorpora o componente.
Sendo
assim, precisamos definir as variáveis que iremos manipular e acessar via SOQL,
para isso precisamos adicionar as tags apex:attribute, conseguindo acesso aos
valores e posteriormente podendo atualizá-los, para tal precisamos declarar
nessa tag as seguintes propriedades:
1 – O
nome do atributo de referencia é a propriedade name;
2 – O
tipo de dado que será utilizado é a propriedade type;
3 – O
nome da variável interna que acessaremos é a propriedade assignTO;
4 –
Se o atributo é requerido é a propriedade required.
Neste
caso o nome do componente e do rótulo será WarehouseAccounts.
Adicione o código a seguir entre as tags
<apex:component> e </apex:component>, para realizar essa
declaração:
<apex:attribute name="latitude" type="Decimal" description="Latitude for Geolocation Query" assignTo="{!lat}" required=”false”/>
<apex:attribute name="long" type="Decimal" description="Longitude for Geolocation Query" assignTo="{!lng}" required=”false”/>
Agora
temos o controller, um componente e um atributo para ligar ao controller. Para
apresentar os resultados utilizaremos os CSS’s padrões do Salesforce, juntamente
com um datatable.
Ainda
no editor de código insira as informações abaixo logo após as tags de
attribute:
<apex:pageBlock >
<apex:pageBlockSection title="Accounts Less than 100 Miles Away">
<apex:dataTable width="600" value="{!accounts}" var="account" id="theTable" rowClasses="odd,even" styleClass="tableClass">
<apex:column>
<apex:facet name="header">Name</apex:facet>
<apex:outputLink value="/{!account.Id}" target="_top"><apex:outputText value="{!account.Name}"/></apex:outputLink>
</apex:column>
<apex:column>
<apex:facet name="header">Shipping Address</apex:facet>
<apex:outputText value="{!account.ShippingStreet}"/>
</apex:column>
<apex:column>
<apex:facet name="header">Shipping City</apex:facet>
<apex:outputText value="{!account.ShippingCity}"/>
</apex:column>
</apex:dataTable>
</apex:pageBlockSection>
</apex:pageBlock>
Agora
salve definitivamente o projeto e o componente está finalizado e só é preciso
de uma página Visualforce simples para hospedá-lo.
Siga
os seguintes passos para realizar esta tarefa:
1 - Em
Configurações (Setup), clique em Desenvolver (Develop) | Páginas (Pages);
2 - Clique
em novo (New);
3 - Dê
um nome e um rótulo para a página;
4 - Remova
o código que estiver contido no editor e cole o código a baixo:
<apex:page StandardController="Warehouse_Location__c" sidebar="false" showheader="false" standardStylesheets="true">
<c:WarehouseAccounts latitude="{!Warehouse_Location__c.Location__Latitude__s}" long="{!Warehouse_Location__c.Location__Longitude__s}" />
</apex:page>
O componente encapsulado nesta página é representado pela
tag <c: WarehouseAccounts />.
5 - Agora salve a página criada.
Para adicionar o componente ao Layout padrão
do Salesforce iremos adicionar esse componente em um Objeto Customizado. Siga
os passos a seguir:
1 -
Clique em Configurações (Setup) |
Criar (Create) | Objetos
(Objects);
2 -
Clique em Warehouse Location;
3 -
Vá até a opção de Page Layouts e selecione Editar (Edit);
4 -
Procure o elemento Visualforce Pages;
5 -
Selecione nova Seção (Section) para
o layout;
6 -
Coloque o nome desejado;
7 -
Selecione uma coluna e
click em OK;
8 -
Arraste o componente WarehouseAccounts até
essa nova seção;
9 -
Clique em Save;
10
- Acesse algum registro em Warehouse Location.
Espero ter ajudado e continue lendo os artigos do Blog para sanar dúvidas, ler dicas e continuar atualizado sobre os temas abordados por nós da MakeITSimple.
Escrito
por: Rafael Soares Souza
· - Bacharel em Sistemas de
Informação – UMC, Analista de Sistemas. NET/C# a mais de 4 anos, desenvolvedor
Salesforce na MakeITSimple. DATA CENTER TECHNICAL
SPECIALIST (DCTS), CERTIFIED LINUX
ADMINISTRATOR (CLA11), LPIC-1.
