Il framework Visualforce

Visualforce, introdotto nel 2008, è uno dei due framework per lo sviluppo di interfacce utente in Salesforce (l’altro, più recente, è Lightning Web Components).

Un framework è una struttura standardizzata che fornisce un’architettura di base, con la quale possiamo costruire le nostre applicazioni. In pratica aiuta gli sviluppatori a concentrarsi sulla logica e il funzionamento dell’applicazione anziché “reinventare la ruota” scrivendo ogni volta i componenti più standard.

Un framework include normalmente delle librerie, le API (Application Programming Interfaces – interfacce che consentono a diversi software di comunicare tra loro), e degli strumenti che implementano funzionalità ricorrenti (ad esempio la gestione delle autenticazioni, l’accesso ai dati o le interazioni con l’interfaccia utente).

I framework si distinguono dalle semplici librerie perché impongono un flusso di specifico: mentre una libreria offre funzioni che lo sviluppatore può chiamare quando necessario, un framework definisce l’architettura dell’applicazione.

L’architettura dell’applicazione sono i diversi livelli che svolgono funzioni specifiche.

Ad esempio un programma potrebbe includere un livello di presentazione che gestisce l’interfaccia utente (quello che vediamo sul nostro schermo) e le interazioni con il software, un livello logico del business che implementa le regole, i processi e i flussi operativi aziendali. Il livello che gestisce l’accesso ai dati si occupa della persistenza e del recupero delle informazioni. Il livello dell’infrastruttura si incarica dei servizi trasversali – ad esempio l’autenticazione e la gestione degli errori.

Visualforce è basato su un modello chiamato “MVC” (Model-View-Controller).

Si tratta di un modello molto diffuso, pensato per separare in tre componenti interconnessi ma distinti il funzionamento dell’applicazione:

1. Model (Modello): Rappresenta i dati e la logica di business dell’applicazione. Il modello gestisce l’accesso ai dati, la loro manipolazione e validazione, e implementa le regole di business. Non contiene informazioni su come i dati vengono visualizzati o come l’utente interagisce con essi. Nel caso di Salesforce, il modello può essere implementato tramite classi Apex che interagiscono con gli oggetti del database.
2. View (Vista): È la parte responsabile della presentazione dei dati all’utente e della gestione dell’interfaccia grafica. La vista riceve i dati dal modello e li formatta per la visualizzazione, ma non elabora direttamente i dati né implementa logica di business. In Visualforce, le viste sono rappresentate dalle pagine .page con il loro markup ( in Lightning Web Components sono invece dei file HTML.
3. Controller (Controllore): Funge da intermediario tra il modello e la vista. Il controller riceve gli input dell’utente dalla vista, li elabora (se necessario aggiornando il modello, salvando i dati modificati) e determina quale vista visualizzare successivamente. In Salesforce, i controller possono essere implementati come controller Apex di Visualforce.

Questa modo di lavorare offre numerosi vantaggi: manutenibilità (i cambi a un componente hanno un impatto minimo sugli altri), riutilizzabilità (i componenti possono essere riutilizzati in contesti diversi), facilità di sviluppo e di test (varie persone possono lavorare in parallelo ad aspetti diversi senza interferire tra loro).

In Visualforce, questa architettura è particolarmente evidente: le pagine Visualforce (.page) fungono da vista, i controller Apex (.cls) gestiscono la logica di controllo, e le classi Apex che interagiscono con gli oggetti Salesforce implementano il modello.

Visualforce utilizza una sintassi di markup simile a HTML, arricchita da tag proprietari di Salesforce. Questo framework consente di creare pagine personalizzate che possono essere integrate perfettamente nell’interfaccia di Salesforce o esposte come siti web esterni.

Il markup Visualforce utilizza tag prefissati con “apex:” che rappresentano componenti predefiniti come <apex:form>, <apex:pageBlock> o <apex:inputField>.

Questi componenti ereditano automaticamente lo stile standard di Salesforce Classic, ma possono essere personalizzati attraverso CSS.

Ad esempio, una pagina Visualforce scritta per visualizzare e modificare dati di opportunità potrebbe includere questo frammento di codice:

<apex:page controller="OpportunityEditorController" tabStyle="Opportunity">
    <apex:form>
        <apex:pageBlock title="Modifica Opportunità">
            <apex:pageBlockSection columns="2">
                <apex:inputField value="{!opportunity.Name}"/>
                <apex:inputField value="{!opportunity.CloseDate}"/>
                <apex:inputField value="{!opportunity.Amount}"/>
                <apex:inputField value="{!opportunity.StageName}"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons>
                <apex:commandButton value="Salva" action="{!saveOpportunity}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Questo esempio di frammento di codice potrebbe essere usato da una pagina Visualforce in Salesforce per creare un’interfaccia personalizzata per la modifica di una opportunità. Analizziamolo elemento per elemento:

<apex:page controller="OpportunityEditorController" tabStyle="Opportunity"> – Questa riga definisce l’inizio della pagina Visualforce, specificando che utilizzerà un controller personalizzato chiamato “OpportunityEditorController” per gestire la logica di business.

L’attributo tabStyle="Opportunity" fa sì che la pagina adotti lo stile visivo associato all’oggetto standard Opportunità, inclusa l’icona corrispondente.

<apex:form> – Qui creiamo un form HTML che raccoglierà gli input dell’utente e li invierà al server.

<apex:pageBlock title="Modifica Opportunità"> – Qui iniziamo a creare un blocco di contenuto, con il layout tipico di Salesforce Classic. Il titolo “Modifica Opportunità” apparirà in evidenza nella parte superiore.

<apex:pageBlockSection columns="2"> – Crea una nuova sezione all’interno del blocco, per organizzare il contenuto in due colonne (lo facciamo per migliorare la leggibilità e l’organizzazione dei campi).

I quattro tag <apex:inputField> creano i vari campi di input per permettere all’utente di definire le i dettagli dell’opportunità:

• value="{!opportunity.Name}" – Campo per il nome dell’opportunità
• value="{!opportunity.CloseDate}" – Campo per la data di chiusura
• value="{!opportunity.Amount}" – Campo per l’importo
• value="{!opportunity.StageName}" – Menu a discesa per la fase in cui si trova l’opportunità

<apex:pageBlockButtons> – Qui creiamo un’area con i pulsanti, che saranno posizionati secondo lo standard di Salesforce.

<apex:commandButton value="Salva" action="{!saveOpportunity}"/> – Crea un pulsante con la scritta “Salva” che, quando cliccato, chiama il metodo saveOpportunity() definito nel controller per elaborare i dati inseriti.

In sintesi, questo codice crea un’interfaccia utente per modificare i dettagli di un’opportunità, con campi per inserire nome, data di chiusura, importo e fase, più un pulsante per salvare le modifiche. L’interfaccia adotta lo stile visivo standard di Salesforce Classic, garantendo coerenza con il resto della piattaforma. La logica di elaborazione dei dati inseriti è delegata al controller “OpportunityEditorController”, rispettando il pattern MVC.

Visualforce opera principalmente sul server: il controller Apex elabora i dati e la logica di business, mentre il client riceve il markup HTML già renderizzato.

Vuoi imparare a lavorare con Salesforce? Vuoi migliorare il tuo CV per trovare il lavoro che ti interessa?

Vedi il nostro corso online di Salesforce Administrator !

Formazione a distanza specializzata | Garanzia 100% soddisfatti o rimborsati | Oltre 1000 studenti