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? In questo badge, la convalida delle sfide pratiche di Trailhead funziona in inglese. Le traduzioni sono fornite tra parentesi come riferimento. Accertati di copiare e incollare i valori riportati in inglese e imposta la lingua del Trailhead Playground su Inglese e le impostazioni internazionali su Stati Uniti. Segui le istruzioni qui.

Visita il badge Trailhead nella tua lingua per scoprire come usufruire dell'esperienza di 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 questa anteprima pagina 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:
$A.get("e.force:navigateToURL").setParams({"url":"/apex/pageName"}).fire();

Questo codice JavaScript innesca l'evento navigateToURL di Lightning Experience ed equivale all'inserimento del classico URL /apex/PageName, come si può vedere anche nel codice.
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.

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 > 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. Tuttavia, durante la fase di apprendimento di Visualforce, è particolarmente opportuno consultare spesso la guida di riferimento 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” ("Un titolo di blocco").
Aggiungi un componente <apex:pageBlockSection> all'interno del componente <apex:pageBlock>. Imposta l'attributo title su “A Section Title” ("Un titolo di sezione"). <apex:pageBlockSection> è un altro componente che aggiunge struttura e gerarchia a una pagina. Quando visualizzati, gli elementi <apex:pageBlockSection> possono essere compressi dall'utente per 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 annidati all'interno del tag <apex:pageBlockSection>. Non puoi utilizzare un tag secondario <apex:pageBlockSection> 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 guida di riferimento ai componenti standard di Visualforce sono illustrati questi componenti e i rispettivi attributi, compresi esempi di codice per il loro utilizzo.

Risorse