Creare e modificare pagine Visualforce

Obiettivi di apprendimento

Al completamento di questa unità, sarai in grado di:

Spiegare cos'è una pagina Visualforce e descriverne gli attributi principali.
Indicare e aprire le pagine Visualforce esistenti nell'organizzazione.
Creare e modificare una pagina Visualforce utilizzando la Developer Console.
Individuare, aggiungere e personalizzare i tag e gli attributi di Visualforce nell'editor.

Nota

Stai seguendo la formazione in italiano? Inizia la sfida in un Trailhead Playground in italiano e utilizza le traduzioni fornite tra parentesi per la navigazione. Per quanto riguarda i valori da inserire, copia e incolla solo quelli in lingua inglese, perché la convalida della sfida è basata sul fatto che i dati siano in inglese. Se non superi la sfida nella tua organizzazione italiana, ti consigliamo di (1) selezionare Stati Uniti per le impostazioni internazionali, (2) selezionare Inglese per la lingua seguendo le istruzioni riportate qui e, successivamente, (3) fare nuovamente clic sul pulsante "Controlla la sfida".

Visita il badge Trailhead nella tua lingua per informazioni dettagliate su come usufruire dell'esperienza Trailhead in altre lingue.

Introduzione alla creazione di pagine Visualforce

Le pagine Visualforce sono i componenti base per gli sviluppatori di applicazioni. Una pagina Visualforce è simile a una pagina web standard, ma include efficaci funzioni per l'accesso, la visualizzazione e l'aggiornamento dei dati dell'organizzazione. È possibile fare riferimento alle pagine e invocarle tramite un URL univoco, proprio come accade in un server web tradizionale.

Visualforce utilizza un linguaggio di markup basato su tag, simile a HTML. Ciascun tag di Visualforce corrisponde a un componente dell'interfaccia utente granulare o grezzo, ad esempio la sezione di una pagina, una visualizzazione elenco o un campo singolo. Visualforce conta circa 150 componenti integrati e offre agli sviluppatori la possibilità di crearne di propri. Il linguaggio markup di Visualforce può essere combinato liberamente con il linguaggio markup HTML, gli stili CSS e le librerie JavaScript, offrendo una notevole flessibilità nell'implementazione dell'interfaccia utente dell'app.

In Salesforce è possibile visualizzare, creare e modificare le pagine Visualforce in diversi modi. Le pagine Visualforce possono inoltre essere create e modificate con le API Salesforce, rendendo utilizzabile una serie di strumenti esterni.

Creare pagine Visualforce nella Developer Console

La Developer Console consente di creare e modificare le pagine Visualforce e di accedere ad altri potenti strumenti di sviluppo di Lightning Platform. La Developer Console è dotata di evidenziazione automatica della sintassi, abbinamento delle coppie di tag, suggerimenti automatici e completamento automatico, rientro automatico e molte altre funzioni che la rendono utile per la modifica del linguaggio markup e del codice. Si tratta dello strumento integrato migliore quando si lavora sulla stessa pagina per un po' di tempo o per lavorare sulle pagine Visualforce con controller personalizzati, codice più lungo e complesso e così via.

Per creare una pagina Visualforce nella Developer Console, segui questi passaggi.

Apri la Developer Console sotto il tuo nome o attraverso menu di accesso rapido (). Le azioni della Developer Console si apriranno in una nuova finestra.
Fai clic su File | New | Visualforce Page (File | Nuovo | Pagina Visualforce).
Inserisci HelloWorld come nome della nuova pagina e fai clic su OK. Nella Developer Console si apre una nuova pagina Visualforce vuota.
Nell'editor, inserisci il seguente markup per la pagina.
```
<apex:page>
    <h1>Hello World</h1>
</apex:page>
```
Fai clic su File | Save (File | Salva).
Per vedere la nuova pagina, fai clic su Preview (Anteprima). La pagina visualizzata si apre in una nuova finestra. Nota che l'anteprima mostra la pagina senza gli stili Salesforce. Per visualizzare la tua pagina nel contesto di Lightning Experience, torna alla finestra principale del browser Lightning Experience. Apri la console JavaScript del browser e inserisci il seguente codice. Non dimenticare di sostituire pageName con il nome della tua pagina. Questo codice JavaScript innesca l'evento navigateToURL di Lightning Experience ed equivale all'inserimento dell'URL classico /apex/PageName.

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

Nell'editor, inserisci del testo aggiuntivo nella pagina e salvala. Quando si salva la pagina, la finestra di anteprima si aggiorna automaticamente per rispecchiare le modifiche apportate. In futuro tralasceremo l'istruzione di salvataggio, ma tra un passaggio e l'altro è vivamente consigliato salvare le pagine.

La Developer Console

Fai clic su File | Open (File | Apri) per vedere un elenco delle pagine Visualforce esistenti. Fai doppio clic su un pagina per aprirla. Puoi anche aprire altre entità di Salesforce, ad esempio classi e trigger Apex, componenti Visualforce e così via.

Aggiungere attributi utilizzando il suggerimento automatico

Imposta gli attributi nei componenti Visualforce per personalizzarne il comportamento. Utilizza il suggerimento automatico per aggiungere rapidamente attributi e valori ai tag dei componenti Visualforce.

Segui questi passaggi per aggiungere e modificare gli attributi in un tag Visualforce.

Nella pagina HelloWorld, fai clic all'interno del tag di apertura <apex:page>, appena prima del carattere > di chiusura. Digita uno spazio e poi s. Il suggerimento automatico presenta un elenco di possibili completamenti per ciò che viene digitato. Man mano che digiti altri caratteri, l'elenco dei suggerimenti si riduce ai soli valori corrispondenti.
Premi il tasto freccia giù fino a selezionare sidebar. Premi Invio. L'attributo sidebar viene aggiunto al tag <apex:page> nel markup e il suggerimento automatico ne propone i possibili valori.
Usa i tasti freccia o digita f per selezionare false e premi Invio. Il codice dovrebbe avere un aspetto simile al seguente:
```
<apex:page sidebar="false">
    <h1>Hello World</h1>
</apex:page>
```
Salva le modifiche.
Ripeti i passaggi precedenti per aggiungere showHeader="false" al tag <apex:page> e salva le modifiche. Il codice dovrebbe avere un aspetto simile al seguente:
```
<apex:page sidebar="false" showHeader="false">
    <h1>Hello World</h1>
</apex:page>
```

Il suggerimento automatico è molto utile quando si sa già quali componenti si vogliono utilizzare e quali sono gli attributi e le funzioni di ciascuno. In particolare quando stai imparando a conoscere Visualforce, però, è opportuno consultare spesso la Guida ai componenti standard, per sapere quali sono i componenti disponibili, che funzione hanno e come usarli e personalizzarli.

Oltre i concetti di base

In Salesforce Classic, il valore predefinito dell'attributo sidebar e dell'attributo showHeader è true. Tuttavia, in Lightning Experience e nell'app mobile Salesforce il valore di questi attributi viene sovrascritto ed è sempre false. Non è possibile rimuovere l'intestazione di Lightning Experience.

La pagina include ancora alcuni fogli di stile di Salesforce, che permettono di ricalcare le scelte di Salesforce in termini di caratteri, dimensioni e così via. Per rimuovere tutti gli output di Salesforce, aggiungi standardStylesheets="false" e rimuovi anche gli stili.

Aggiungere e disporre i componenti per formare la struttura di una pagina

Per sviluppare la struttura della pagina, puoi aggiungere dei componenti alla pagina Visualforce e posizionarli liberamente.

Segui questi passaggi per aggiungere nuovi tag Visualforce alla pagina e utilizzali per creare una struttura per la pagina.

Nella pagina HelloWorld, aggiungi un componente <apex:pageBlock> sotto il testo "Hello World". <apex:pageBlock> è un elemento strutturato dell'interfaccia utente che raggruppa gli elementi correlati di una pagina. Usa il suggerimento automatico per aggiungerlo e imposta l'attributo title su "A Block Title" ("Titolo di un blocco").
Aggiungi un componente <apex:pageBlockSection> all'interno del componente <apex:pageBlock>. Imposta l'attributo title su "A Section Title" ("Titolo di una sezione"). <apex:pageBlockSection> è un altro componente che aggiunge struttura e gerarchia a una pagina. Quando viene eseguito il rendering, gli elementi <apex:pageBlockSection> possono essere compressi dall'utente in modo da nascondere tutto tranne il titolo della sezione.
Aggiungi del testo all'interno del componente <apex:pageBlockSection>, ad esempio I’m three components deep! (Sono al terzo sottolivello dei componenti!). Il codice dovrebbe avere un aspetto simile al seguente:
```
<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>
```
La tua pagina presenta una struttura, con un titolo al primo livello, una sezione comprimibile con un titolo e testo normale.
Aggiungi un'altra <apex:pageBlockSection> dopo la prima e imposta il titolo su "A New Section" ("Una nuova sezione"). Aggiungi del testo al corpo del componente, come hai fatto per la prima <apex:pageBlockSection>. Il codice dovrebbe avere un aspetto simile al seguente:
```
<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>
```
Noterai che i tag <apex:pageBlockSection> sono nidificati all'interno del tag <apex:pageBlock>. Non puoi utilizzare un tag <apex:pageBlockSection> secondario senza inserirlo all'interno di un tag principale <apex:pageBlock>.

Hai imparato tutti i principi fondamentali relativi alla creazione di una pagina, tra cui la creazione della pagina, l'aggiunta di attributi e componenti e la disposizione dei componenti per conferire alla pagina una struttura e un design.

Ulteriori informazioni...

La Developer Console è lo strumento di sviluppo più potente e completo per Lightning Platform dall'interno dell'organizzazione Salesforce.

Esistono altri due metodi integrati per creare e modificare le pagine Visualforce in Salesforce.

La modalità di sviluppo "quick fix" e il piè di pagina rappresentano un metodo veloce per creare una nuova pagina o per apportare brevi modifiche a una pagina esistente. È l'ideale per apportare modifiche rapide o quando si desidera creare una breve pagina per sottoporre a test un nuovo codice su un "terreno vergine", prima di integrarlo nelle pagine dell'app.
L'editor di impostazione, disponibile in Imposta inserendo Pagine Visualforce nella casella Ricerca veloce e selezionando Pagine Visualforce, è l'editor più elementare, ma consente di accedere alle impostazioni di pagina che non sono disponibili nella Developer Console o nel piè di pagina della modalità di sviluppo.

Puoi sviluppare pagine Visualforce anche utilizzando Visual Studio Code, un editor di codice leggero ed estensibile. Le estensioni Salesforce per Visual Studio Code includono strumenti per lo sviluppo sulla piattaforma Salesforce e forniscono funzionalità che consentono di lavorare con organizzazioni di sviluppo (organizzazioni vuote, sandbox e organizzazioni Developer Edition), Apex, componenti Aura e Visualforce.

I componenti <apex:pageBlock> e <apex:pageBlockSection>, aggiunti alla pagina, visualizzano un'interfaccia utente che ricalca quella degli elementi dell'interfaccia Salesforce Classic. Ci sono altri componenti che permettono di ricalcare lo stile visivo della piattaforma, ad esempio <apex:pageBlockSectionItem> e <apex:pageBlockButtons>. Riesci a indovinare quale si annida all'interno di una <apex:pageBlockSection>?

Visualforce include circa 150 componenti integrati che offrono un'ampia gamma di elementi e funzionalità per l'interfaccia utente. Nella Standard Component Reference (Guida di riferimento per i componenti standard) di Visualforce sono riportati questi componenti e documentati i rispettivi attributi, compresi esempi di codice per l'utilizzo del componente.

Risorse

Assistenza Salesforce: Creazione di pagine Visualforce
Assistenza Salesforce: (Developer Console Functionality) Funzionalità della Developer Console
Assistenza Salesforce: Utilizzo dell'editor per Visualforce
Visualforce Developer Guide: Tools for Visualforce Development (Strumenti per lo sviluppo di Visualforce)
Visualforce Developer Guide: Standard Component Reference (Guida di riferimento ai componenti standard)
The Salesforce Extensions for Visual Studio Code (Estensioni Salesforce per Visual Studio Code)
Salesforce Developer Blog: Developing Visualforce With Your Browser (Sviluppare Visualforce con il browser)

Hai bisogno di aiuto?

Scopri di più