Crear y modificar páginas de Visualforce

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Explicar qué es una página de Visualforce y describir sus atributos clave.
  
• Indicar y abrir páginas de Visualforce existentes en su organización.
  
• Crear y modificar una página de Visualforce utilizando Developer Console.
  
• Identificar, agregar y personalizar etiquetas y atributos de Visualforce en el editor.
  

Nota

¿Su idioma de aprendizaje es español? Comience el reto en un Trailhead Playground en español y utilice las traducciones proporcionadas entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto se basan en los datos en inglés. Si no aprueba el reto en su organización en español, le recomendamos que (1) cambie la configuración regional a Estados Unidos, (2) cambie el idioma a inglés, siga las instrucciones descritas aquí y, a continuación, (3) vuelva a hacer clic en el botón Check Challenge (Comprobar el reto).

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

Introducción a la creación de páginas de Visualforce

Las páginas de Visualforce son partes integrantes básicas para los desarrolladores de la aplicación. Una página de Visualforce es similar a una página web estándar, pero incluye potentes funciones para acceder a los datos de su organización, así como mostrarlos y actualizarlos. Se puede invocar y hacer referencia a las páginas a través de una URL única, como ocurre en un servidor web tradicional.

Visualforce utiliza un lenguaje de marcado basado en etiquetas similar a HTML. Cada etiqueta de Visualforce corresponde a un componente de interfaz de usuario sin procesar o ajustado, como una sección de una página, una vista de lista o un campo individual. Visualforce incluye cerca de 150 componentes integrados y proporciona a los desarrolladores una forma de crear sus propios componentes. El marcado de Visualforce se puede mezclar libremente con el marcado HTML, estilos CSS y bibliotecas JavaScript, ofreciéndole una flexibilidad considerable en el modo en que implementa la interfaz de usuario de su aplicación.

Puede ver, crear y modificar páginas de Visualforce de diferentes formas en Salesforce. Las páginas de Visualforce también se crean y se modifican utilizando las API de Salesforce, mediante la activación de una variedad de herramientas externas.

Crear páginas de Visualforce en Developer Console

Utilice Developer Console para crear y modificar páginas de Visualforce, con acceso a otras herramientas de desarrollo potentes de la plataforma Lightning. Developer Console tiene resaltado de sintaxis automático, coincidencias de pares de etiquetas, sugerencias automáticas y relleno automático, sangrías inteligentes y muchas otras funciones dirigidas a facilitar la modificación de marcados y códigos. Es la mejor herramienta integrada para utilizar cuando está trabajando en la misma página durante mucho tiempo o para páginas de Visualforce con controladores personalizados, códigos más largos, más complejos, etc.

Siga estos pasos para crear una página de Visualforce en Developer Console.

1. Abra Developer Console en Su nombre o el menú de acceso rápido (). Developer Console se abre en una nueva ventana.
   
2. Haga clic en File (Archivo) | New (Nuevo) | Visualforce Page (Página de Visualforce).
   
3. Escriba HelloWorld para el nombre de la nueva página y haga clic en OK (Aceptar). Una nueva página en blanco de Visualforce se abre en Developer Console.
   
4. En el editor, introduzca el siguiente marcado para la página.
   

   <apex:page>
       <h1>Hello World</h1>
   </apex:page>

5. Haga clic en File Save (Archivo | Guardar).
   
6. Para ver su nueva página, haga clic en Preview (Vista previa). La página representada se abre en una nueva ventana. Tenga en cuenta que la vista previa de esta página muestra su página sin el estilo de Salesforce. Para ver su página en el contexto de Lightning Experience, vuelva a su ventana de navegador de Lightning Experience principal. Abra la consola JavaScript de su navegador e introduzca el siguiente código. No olvide sustituir pageName por el nombre de su página. Esta secuencia JavaScript desencadena el evento navigateToURL de Lightning Experience, que es el equivalente a introducir la URL clásica /apex/PageName.
   

$A.get("e.force:navigateToURL").setParams({"url": "/apex/pageName"}).fire();

7. En el editor, agregue texto adicional a su página y guárdelo. La ventana de vista previa se actualiza automáticamente para reflejar los cambios cuando guarda la página. Excluiremos la instrucción de guardar en el futuro, pero debe guardar sus páginas entre los distintos pasos.
   

8. Haga clic en File (Archivo) | Open (Abrir) para ver una lista de páginas de Visualforce existentes. Haga doble clic en una página para abrirla. También puede abrir otras entidades de Salesforce, como clases y desencadenadores de Apex, componentes de Visualforce y mucho más.
   

Agregar atributos utilizando sugerencias automáticas

Establezca atributos en componentes de Visualforce para personalizar su comportamiento. Utilice sugerencias automáticas para agregar atributos y valores rápidamente a etiquetas de componente de Visualforce.

Siga estos pasos para agregar y modificar atributos en una etiqueta de Visualforce.

1. En su página HelloWorld, haga clic en la etiqueta de apertura <apex:page>, justo antes de la de cierre >. Escriba un espacio y, a continuación, s. La sugerencia automática presenta una lista de posibles finalizaciones de lo que escribe. Cuando escribe caracteres adicionales, la lista de sugerencias se reduce solo a valores coincidentes. 
   
2. Pulse la tecla de flecha hacia abajo hasta que se seleccione sidebar (barra lateral). Pulse Return (Volver). El atributo sidebar (barra lateral) se agrega a la etiqueta <apex:page> en su marca y la sugerencia automática presenta posibles valores para él.
   
3. Utilice las teclas de flecha o escriba f para seleccionar false y pulse Return (Volver). Su código debería tener un aspecto similar a este.
   

   <apex:page sidebar="false">
       <h1>Hello World</h1>
   </apex:page>

4. Guarde sus cambios.
   
5. Repita los siguientes pasos para agregar showHeader="false" a la etiqueta <apex:page> y guarde los cambios. Su código debería tener un aspecto similar a este.
   

   <apex:page sidebar="false" showHeader="false">
       <h1>Hello World</h1>
   </apex:page>

La sugerencia automática es perfecta para cuando ya sabe qué componentes desea utilizar, qué es cada atributo y qué hace. Especialmente mientras está descubriendo Visualforce, aunque tendrá que consultar la Referencia de componentes estándar a menudo, para saber qué componentes existen, qué hacen y cómo utilizarlos y personalizarlos.

Más allá de los aspectos básicos

En Salesforce Classic, el valor predeterminado del atributo sidebar y showHeader es true. Sin embargo, en Lightning Experience y la aplicación móvil Salesforce, el valor de estos atributos se anula y siempre es false. No hay forma de eliminar el encabezado de Lightning Experience.

La página incluye algunas hojas de estilo de Salesforce, lo que le permite comparar opciones de Salesforce para fuentes, tamaño y mucho más. Para suprimir todas las salidas de Salesforce, agregue standardStylesheets="false" para eliminar los estilos también.

Agregar y redactar componentes para formar una estructura de página

Agregue componentes a su página de Visualforce y organícelos para crear la estructura de la página.

Siga estos pasos para agregar nuevas etiquetas de Visualforce a su página y utilizarlas para crear una estructura para la página.

1. En su página HelloWorld, agregue un componente <apex:pageBlock> debajo del texto “Hello World”. <apex:pageBlock> es un elemento estructurado de la interfaz de usuario que agrupa elementos relacionados en una página. Utilice las sugerencias automáticas para agregarlo y establezca el atributo title como “A Block Title” (Un título de bloque).
   
2. Agregue un componente <apex:pageBlockSection> dentro del componente <apex:pageBlock>. Establezca el atributo title como “A Section Title” (Un título de sección). <apex:pageBlockSection> es otro componente que agrega estructura y jerarquía a una página. Cuando se representan, el usuario puede contraer los elementos <apex:pageBlockSection> para ocultar todos menos el título de la sección.
   
3. Agregue texto dentro del componente <apex:pageBlockSection>, como I’m three components deep! (¡Estoy a tres componentes de profundidad!). Su código debería tener un aspecto similar a este.
   

   <apex:page>
       <h1>Hello World</h1>
       <apex:pageBlock title="A Block Title">
           <apex:pageBlockSection title="A Section Title">
               I'm three components deep!
           </apex:pageBlockSection>
       </apex:pageBlock>
   </apex:page>

   Tiene una página que muestra estructura, con un título de nivel superior, una sección contraíble con un título y texto sin formato. 
   
   
4. Agregue otro componente <apex:pageBlockSection> tras el primero, y establezca el título como ““A New Section” (Una nueva sección). Agregue texto al cuerpo del componente, como hizo con el primer componente <apex:pageBlockSection>. Su código debería tener un aspecto similar a este.
   

   <apex:page>
       <h1>Hello World</h1>
       <apex:pageBlock title="A Block Title">
           <apex:pageBlockSection title="A Section Title">
               I'm three components deep!
           </apex:pageBlockSection>
           <apex:pageBlockSection title="A New Section">
               This is another section.
           </apex:pageBlockSection>
       </apex:pageBlock>
   </apex:page>

   Observe cómo se anidan las etiquetas <apex:pageBlockSection> en la etiqueta <apex:pageBlock>. No puede utilizar una etiqueta secundaria <apex:pageBlockSection> sin ponerla en una etiqueta <apex:pageBlock> principal.
   

Ha aprendido todos los fundamentos de la elaboración de una página, incluyendo la creación de la página, la adición de atributos y la organización de los componentes para proporcionar a su página una estructura y un diseño.

Más información...

Developer Console es la herramienta más potente y llena de funciones para el desarrollo en la plataforma Lightning desde su organización de Salesforce.

Existen otras dos formas integradas para crear y modificar páginas de Visualforce en Salesforce.

• El modo de desarrollo “solución rápida” y pie de página es una forma rápida de crear rápidamente una nueva página o realizar modificaciones breves en una página existente. Es perfecto para realizar cambios rápidos o cuando desea crear una página corta para probar algunos nuevos códigos o una pizarra en blanco, antes de incorporarla en las páginas de su aplicación.
  
• El editor Configuración, disponible en Configuración al introducir Páginas de Visualforce en el cuadro Búsqueda rápida y seleccionar Páginas de Visualforce , es el editor más básico, pero proporciona el acceso a parámetros de página que no están disponibles en Developer Console o pie de página del modo de desarrollo.
  

También puede desarrollar páginas de Visualforce con Visual Studio Code, un editor de código ligero y extensible. Extensiones de Salesforce para Visual Studio Code incluye herramientas para desarrollar en Salesforce Platform. Proporciona funciones para trabajar con organizaciones de desarrollo (organizaciones borrador, sandboxes y organizaciones DE), Apex, componentes Aura y Visualforce.

Los componentes <apex:pageBlock> y <apex:pageBlockSection> que agregó a su página representan una interfaz de usuario que coincide con los elementos habituales de la interfaz de Salesforce Classic. Existen otros componentes que le permiten también coincidir con el estilo visual de la plataforma, como <apex:pageBlockSectionItem> y <apex:pageBlockButtons>. ¿Puede adivinar cuál se anida en <apex:pageBlockSection>?

Visualforce incluye cerca de 150 componentes integrados que proporcionan una gran variedad de comportamientos y elementos de la interfaz de usuario. En la Referencia de componentes estándar de Visualforce se enumeran esos componentes y se documentan sus atributos, incluyendo un ejemplo de código de cómo utilizar el componente.

Recursos

• Ayuda de Salesforce: Crear páginas de Visualforce
• Ayuda de Salesforce: Funciones de Developer Console
• Ayuda de Salesforce: Uso del Editor para Visualforce
• Guía del desarrollador de Visualforce: Herramientas para el desarrollo de Visualforce
• Guía del desarrollador de Visualforce: Referencia de componentes estándar
• Extensiones de Salesforce para Visual Studio Code
• Blog de desarrolladores de Salesforce: Desarrollo de Visualforce con su navegador