This entry will talk about how to start working with Visualforce and Apex. We can find thousand of blogs in English that talk about this topic, however it is more difficult to find information in Spanish. Because of that, this entry will be in my home language so it will try to help Salesforce newbies in my country.

Esta será la primera de una serie de entradas que hablarán sobre Visualforce y Apex. Escribir una única entrada contando todo lo que me gustaría compartir, podría llegar a ser un post difícil de seguir, ó incluso llegar a aburrirte cerrando la ventana antes de terminar, y eso es lo que quiero evitar.

Aunque la entrada está escrita en Español, seguiré usando los términos ingleses por si tu entorno está en ese idioma.

Comencemos por el principio. Una vez que ya tienes tu entorno (org) Salesforce te ofrece ya algunos objetos que llamamos Standard. Dependiendo de la organización que tengas, podrás acceder a unos u otros, pero en principio tendrás acceso por lo menos a Accounts y Opportunities, así que vamos a utilizar esto dos objetos para los casos prácticos.

Cómo puedes leer en esta entrada, Salesforce se basa en el patrón MVC – Modelo Vista – Controlador. Cuando un usuario interactúa con una página, cualquier acción se manda al controlador el cual se encarga de ejecutar el proceso que la acción necesita con la ayuda del Modelo, y cuando éste finaliza, devuelve a la página el resultado para que lo pueda mostrar. Esto se puede hacer de dos formas, utilizando la funcionalidad Standard y la Custom. Recuerda estas dos palabras porque vamos a hacer referencia a ellas en muchos sitios.

• ¿Qué significa Standar? Todo aquello que Salesforce te ofrece y puedes utilizar sin añadir una sola línea de código.
• ¿Qué significa Custom? Si lo que Salesforce te ofrece no es lo que necesitas, lo puedes modificar. Para ello Salesforce te ofrece la posibilidad de hacerlo con sólo clicks de ratón, ó usando Apex y Visualforce.

Todo objeto en Salesforce, ya sea Standard ó Custom (el que creas tú con clicks de ratón) ofrece una vista que puedes utilizar en tu aplicación. Este es un ejemplo de un registro del objeto Account.

Esta vista se puede modificar sin una línea de código. ¿Cómo? Edita el Page Layout del objeto hasta conseguir el look and feel que desees.

• Si es un objeto Standar, cómo Account, ve a Setup | App Setup | Customize |  | Page Layout
• Si lo has creado tú, es decir, es un objeto Custom, ve a Setup | App Setup | Create | Objects . En esta página, selecciona tu objeto y busca la sección Page Layout

Pero como hemos dicho anteriormente, puede que necesites algo más que ordenar los campos en el Page Layout del objeto.

Para ello crearemos una página visualforce que llamaremos accountview ya que nos servirá para mostrar los datos de la cuenta en modo lectura.

Esta página la enlazaremos con un controlador, y al igual que antes, todo objeto, Standard y Custom tiene su propio Controlador Standard y para usarlo, sólo tenemos que indicar el API name del object que vamos a usar. Posteriormente añadiremos una cuantas secciones con los tags pageBlock (para definir la cabecera la página) y pageBlockSection (nos ayuda a definir una sección) NOTA: podemos añadir tantos bloques y secciones en nuestra página, aunque lo más normal suele tener un único bloque con múltiples secciones.

<!-- accountview -->
<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="Vista Cuenta">
            <apex:pageBlockSection title="Campos Cuenta">
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>     

¿Cómo lo visualizamos en nuestro entorno? Simplemente tendremos que añadir a la URL /apex/, en nuestro caso: https://c.eu2.visual.force.com/apex/accountview y este es el resultado: Nuestro siguiente paso será añadir campos a la sección Campos Cuenta utilizando el tag outputField. Vamos a crear una página con una apariencia similar a la que nos ofrece Salesforce, pero este ejemplo te puede ayudar a empezar a buscar cómo conseguir el look and feel que realmente quieres. Revisa los links que ofrezco para saber más de los tags que utilizamos en estos ejemplos. Todos ofrecen distintos atributos para personalizar la vista de la página.

<!-- accountview -->
<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="Vista Cuenta">
            <apex:pageBlockSection title="Campos Cuenta">
                <apex:outputField value="{!account.name}"/>
                <apex:outputField value="{!account.site}"/>
                <apex:outputField value="{!account.type}"/>
                <apex:outputField value="{!account.accountNumber}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Y si volvemos a refrescar la página, vemos como en la sección Campos Cuenta aparece lo que hemos añadido, el Nombre, Tipo, Site y Número de Cuenta.

Viendo esta imagen nos pueden surgir dos dudas.

1. ¿Por qué el nombre de los campos viene en inglés? Porque estamos usando el controlador Standard de objeto Account, y la llamada account. traerá la etiqueta que hemos definido para ese campo. Mi entorno está en inglés, de ahí el obtener Account Name en vez de Nombre de Cuenta.
2. ¿Por qué sólo veo la etiqueta de los campos y no el valor? Para poder mostrar los valores, debemos indicarle qué cuenta quiero mostrar. Salesforce asigna un identificador único (15 ó 18 caracteres) a todos sus registro. Es lo que llamaremos Id. Si añadimos ese id al final de la URL, le estamos diciendo a Salesforce que queremos ver la información relacionada a ese registro.
   1. ¿Cómo obtenemos este Id? Muy fácil, si abrimos el registro que queremos, pero usando su vista Standard, la URL nos lo proporciona.

Después, podemos usar ese Id en nuestra nueva URL quedando así: https://c.eu2.visual.force.com/apex/accountview?id=001b000000Cw7X8 

Podría seguir contándoos más cosas sobre las páginas Visualforce, pero creo que por hoy os he dado bastante información. En futuros post partiremos de este ejemplo para complicar la personalización de esta página.

Mi recomendación antes del próximo post:

1. Lee y asimila cómo funciona el Modelo Vista Controlador de Salesforce.
2. Familiarízate con los objetos Standard, su campos, sus Page Layout, etc.
3. Crea algún objeto custom por ti mimo.
4. Crea tu primera página Visualforce usando el Controlador Standard.
   1. Investiga los tags de hoy:
      1. apex:page
      2. apex:form
      3. apex:pageBlock
      4. apex:pageBlockSection
      5. apex:outputField

Hasta la próxima!!