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

El reto práctico para esta insignia está localizado al japonés, español (LATAM) y portugués (Brasil). Para cambiar el idioma de su Trailhead Playground, siga estas instrucciones. Puede que la localización esté desactualizada. Si no aprueba el reto con las instrucciones localizadas, cambie el idioma a inglés y la configuración local a Estados Unidos, y vuelva a intentarlo.

Consulte la insignia Trailhead en su idioma para aprender a aprovechar la experiencia traducida de Trailhead.

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.

Abra Developer Console bajo Su nombre o el menú de acceso rápido (). Developer Console se abre en una nueva ventana.
Haga clic en File (Archivo) | New (Nuevo) | Visualforce Page (Página de Visualforce).
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.
En el editor, ingrese la siguiente marca para la página.
```
<apex:page>
    <h1>Hello World</h1>
</apex:page>
```
Haga clic en File (Archivo) | Save (Guardar).
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:
$A.get("e.force:navigateToURL").setParams({"url":"/apex/pageName"}).fire();

Esta secuencia desencadena el evento navigateToURL de Lightning Experience, que es el equivalente a ingresar la URL clásica /apex/PageName; puede incluso ver ese patrón de URL en el código.
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.

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.

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.
Pulse la tecla de flecha hacia abajo hasta que se seleccione sidebar (barra lateral). Pulse Volver. El atributo de barra lateral se agrega a la etiqueta <apex:page> en su marca y la sugerencia automática presenta posibles valores para él.
Utilice las teclas de flecha o escriba f para seleccionar false (falso) 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>
```
Guarde los cambios.
Repita los pasos anteriores 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.

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 agregarla y establezca el atributo title como “Un título de bloque”.
Agregue un componente <apex:pageBlockSection> dentro del componente <apex:pageBlock>. Establezca el atributo title como “Un título de sección”. <apex:pageBlockSection> es otro componente que agrega estructura y jerarquía a una página. Cuando se representan, <apex:pageBlockSection> los elementos se pueden contraer por el usuario para ocultar todos menos el título de la sección.
Agregue texto dentro del componente <apex:pageBlockSection>, como “¡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.
Agregue otro componente <apex:pageBlockSection> tras el primero, y establezca el título como “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 en 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