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

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y copie y pegue los valores en español (LATAM). Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

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, mostrar y actualizar los datos de su organización. Se puede invocar y hacer referencia a las páginas a través de una URL única, como debería ser 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 en bruto o refinado, 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. Las marcas de Visualforce se pueden mezclar libremente con marcas 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, activando 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 hacerla útil para la modificación de marcas 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 esos pasos para crear una página de Visualforce en Developer Console.

1. Abra Developer Console bajo 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. Ingrese 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, ingrese la siguiente marca para la página.
   

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

5. Haga clic en File (Archivo) | Save (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 ingrese 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 ingresar la URL /apex/PageName en Classic.
   

$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 sus cambios cuando guarda la página. Excluiremos la instrucción de guardar en el futuro, pero debe guardar sus páginas entre 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 luego 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). Presione Return (Volver). El atributo sidebar (barra lateral) se agrega a la ficha <apex:page> en su marca y la sugerencia automática presenta posibles valores para este.
   
3. Utilice las teclas de flecha o escriba f para seleccionar false (falso) y presione 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 los 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 y qué es cada atributo y qué hace. Especialmente mientras está aún descubriendo Visualforce, aunque deseará hacer referencia a la Referencia de componente estándar a menudo, para saber qué componentes existen, qué hacen y cómo utilizarlos y personalizarlos.

Más allá de los fundamentos

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

La página aún 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” (“Hola, mundo”). <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 de <apex:pageBlockSection> para ocultar todo 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 de Plataforma Lightning desde su organización de Salesforce.

Existen dos otras 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 ingresando Páginas de Visualforce en el cuadro Búsqueda rápida, luego seleccionando 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.
  

Además, puede desarrollar páginas de Visualforce con Visual Studio Code, un editor de código sencillo y extensible. Extensiones de Salesforce para Visual Studio Code incluye herramientas para desarrollar sobre Salesforce Platform. Proporciona funciones para trabajar con organizaciones de desarrollo (organizaciones borrador, entornos sandbox y organizaciones de DE), Apex, componentes Aura y Visualforce.

Los componentes <apex:pageBlock> y <apex:pageBlockSection> que agregó a su página representa una interfaz de usuario que coincide con los elementos regulares de la interfaz de Salesforce Classic. Existen otros componentes que le permiten también coincidir con el estilo visual de la plataforma, incluyendo <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. La Referencia de componente estándar de Visualforce indica esos componentes y documenta 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