Visualizzazione del contenuto dell'aiuto per la versione :

I componenti seguenti sono destinati a essere utilizzati durante l’authoring di contenuti per una pagina web standard. Costituiscono un sottoinsieme dei componenti disponibili per un’installazione standard di AEM.

Alcuni sono immediatamente disponibili nella barra laterale, altri anche utilizzando la modalità di progettazione per attivarli/disattivarli.

Attenzione:

Questa sezione illustra unicamente i componenti disponibili pronti all’uso in un’installazione AEM standard.

A seconda dell’istanza corrente è possibile che siano presenti componenti personalizzati sviluppati esplicitamente per le tue esigenze. Questi possono anche avere lo stesso nome di alcuni dei componenti qui descritti.

I componenti sono disponibili quando si modifica una pagina dalla scheda Componenti della barra laterale, utilizzando il selettore Inserisci nuovo componente (con doppio clic nell’area Trascina qui i componenti o le risorse).

Puoi selezionare un componente, trascinarlo nella posizione appropriata sulla pagina e quindi modificarne il contenuto e le proprietà.

I componenti sono ordinati in base a varie categorie (gruppi di componenti), che comprendono (per l’authoring delle pagine):

  • Generale: include i componenti di base tra cui testo, immagini, tabelle, grafici e così via.
  • Colonne: include i componenti che consentono di organizzare il layout dei contenuti.
  • Modulo: include tutti i componenti necessari alla creazione di moduli.

Generale

I componenti del gruppo Generale sono i componenti di base utilizzati per creare contenuti.

Elemento account

È possibile definire un collegamento con titolo e descrizione.

chlimage_1

Immagine adattiva

Il componente Immagine adattiva genera immagini che vengono ridimensionate in base alla finestra nella quale viene aperta la pagina web. Per utilizzare questo componente, occorre fornire una risorsa immagine dal file system o DAM. Quando la pagina web viene aperta, il browser scarica una copia dell’immagine ridimensionata, adatta per la finestra corrente. 

Le dimensioni della finestra dipendono dalle seguenti caratteristiche:

  • Schermo del dispositivo: nei dispositivi mobili le pagine web vengono in genere visualizzate a schermo intero. 
  • Dimensioni della finestra del browser: gli utenti di computer laptop e desktop possono ridimensionare la finestra del browser.

Ad esempio, il componente genera un’immagine piccola quando la pagina web viene aperta da uno smartphone e un’immagine media quando viene aperta da un tablet. Per un portatile, verrà invece creata un’immagine grande se la pagina viene aperta in una finestra del browser con dimensioni massime. Se la finestra del browser viene ridimensionata e ridotta, il componente trasmette un’immagine più piccola e aggiorna la visualizzazione.

Formati di immagine supportati

Per il componente Immagine adattiva puoi usare file immagine con le seguenti estensioni:

  • .jpg
  • .jpeg
  • .png
  • .gif **

Attenzione:

** I file .gif animati non sono supportati in AEM per le rappresentazioni adattive.

Dimensioni e qualità delle immagini

Nella tabella seguente sono elencati i valori di larghezza immagine generati per determinate larghezze di visualizzazione. L’altezza dell’immagine generata è calcolata in modo da mantenere proporzioni costanti, senza spazi bianchi all’interno del bordo dell’immagine. Per evitare spazi bianchi può essere applicato il ritaglio.

Per le immagini JPEG, la dimensione di visualizzazione può inoltre influenzare la qualità JPEG. Sono possibili le seguenti qualità JPEG:

  • Bassa (0,42)
  • Media (0,82)
  • Alta (1,00)
Intervallo di larghezze di visualizzazione (pixel) Larghezza dell’immagine (pixel) Qualità JPEG Tipo di dispositivo di destinazione
Larghezza <= 319 320 Bassa  
Larghezza = 320 320 Media Cellulare (verticale)
320 < Larghezza < 481 480 Media Cellulare (orizzontale)
480 < Larghezza < 769 476 Alta Tablet (verticale)
768 < Larghezza < 1025 620 Alta Tablet (orizzontale)
Larghezza <= 1025 Completa (dimensione originale) Alta Desktop

Proprietà

La finestra di dialogo consente di modificare le proprietà per l’istanza del componente Immagine adattiva, molte delle quali sono in comune con il componente Immagine, sul quale il primo si basa. Le proprietà sono disponibili in due schede:

  • Immagine
    • Immagine
      Trascina un’immagine da Content Finder oppure fai clic per aprire una finestra in cui caricare un’immagine. Una volta caricata l’immagine, è possibile ritagliarla, ruotarla o eliminarla. Per ingrandire e ridurre l’immagine, utilizza la barra di scorrimento al di sotto dell’immagine (sopra i pulsanti OK e Annulla)
    • Ritaglia
      Consente di ritagliare un’immagine. Trascina il bordo dell’immagine per ritagliare.
    • Ruota
      Fai clic più volte fino a ottenere la rotazione desiderata.
    • Cancella
      Rimuove l’immagine corrente.
  • Avanzate
    • Titolo
      Il componente Immagine adattiva non utilizza questa proprietà.
    • Testo Alt
      Testo alternativo per l’immagine.
    • Collega a
      Il componente Immagine adattiva non utilizza questa proprietà.
    • Descrizione
      Il componente Immagine adattiva non utilizza questa proprietà.

Estensione del componente Immagine adattiva

Per informazioni su come personalizzare il componente Immagine adattiva, consulta Informazioni sul componente Immagine adattiva.

Carosello

Il componente Carosello consente di visualizzare le immagini associate a singole pagine:

  • una per volta
  • per un periodo di tempo limitato
  • in un ordine specificato
  • con un ritardo specificato

I controlli attivi consentono anche di muoversi in sequenza attraverso le pagine visualizzate in tempo reale, a richiesta. Fai clic sull’immagine di pagina visibile per passare alla pagina relativa. In altre parole, il carosello funge da controllo di navigazione.

Proprietà

Sono disponibili in due schede:

  • Carosello
    Consente di specificare il funzionamento del carosello:
    • Velocità di riproduzione
      Tempo in millisecondi prima della visualizzazione della diapositiva successiva.
    • Tempo di transizione
      Tempo in millisecondi per la transizione tra due dispositive.
    • Stile comandi
      Varie opzioni sono disponibili tramite un menu a discesa; ad esempio, Pulsanti Prec/Succ, Opzioni alto-destra.
  • Elenco
    Consente di specificare in che modo le pagine vengono incluse nel Carosello:
    • Genera elenco con
      Esistono vari modi per generare un elenco di pagine: Pagine figlie, Elenco correzioni, Ricerca o Ricerca avanzata (tutti descritti di seguito).
      Indipendentemente dal metodo scelto, alle pagine incluse nell’elenco dovrebbe già essere associata un’immagine, che verrà visualizzata nel Carosello. Se a una determinata pagina, nelle Proprietà pagina, non è associata un’immagine, è necessario eseguire l’associazione prima di iniziare, in caso contrario nel Carosello sarà visualizzata una pagina vuota (o quasi completamente vuota). Consulta Modifica delle Proprietà pagina.
      A seconda dell’elemento scelto sarà visualizzato un nuovo pannello:
      • Opzioni per le pagine secondarie
        • Pagina padre
          Consente di specificare il percorso manualmente o utilizzando il selettore. Non specificare nulla per utilizzare la pagina corrente come pagina padre.
      • Opzioni per elenco fisso
        • Pagine
          Consente di selezionare un elenco di pagine. Utilizza + per aggiungere voci e i pulsanti su/giù per modificare l’ordine.
      • Opzioni per la ricerca
        • Inizia in
          Consente di immettere un percorso di inizio, manualmente o utilizzando il selettore.
        • Query di ricerca
          Consente di inserire una query di ricerca sotto forma di testo normale.
      • Opzioni di ricerca avanzata
        • Notazione predicato QueryBuilder
          Consente di inserire una query di ricerca utilizzando la notazione del predicato QueryBuilder. Ad esempio, è possibile inserire “fulltext=Marketing” per visualizzare nel Carosello tutte le pagine il cui contenuto include “Marketing”.
          Consulta API di QueryBuilder per una descrizione approfondita delle espressioni di query e per altri esempi.
    • Ordina per
      Seleziona jcr:title, jcr:created, cq:lastModified o cq:template dal menu a discesa.
    • Limite
      Il numero massimo di voci da utilizzare nel carosello; facoltativo.

Nota:

Puoi creare un componente Carosello personalizzato per Adobe Experience Manager, per la visualizzazione delle risorse digitali presenti in DAM AEM. Per ulteriori informazioni, consulta Creazione di componenti Carosello personalizzati per Adobe Experience Manager.

Grafico

Il componente Grafico consente di aggiungere un grafico a barre, a linee o a torta. AEM crea un grafico a partire dai dati forniti. I dati vengono specificati digitando direttamente nella scheda Dati, o copiando e incollando un foglio di calcolo.

  • Dati
    • Dati grafico
      Inserisci i dati per il grafico in formato CSV, utilizzando la virgola (“,”) come separatore di campo.
  • Avanzate
    • Tipo di grafico
      Seleziona un’opzione tra Grafico a torta, Grafico a linee e Grafico a barre.
    • Testo alternativo
      Testo alternativo che viene visualizzato al posto del grafico.
    • Larghezza
      Larghezza del grafico in pixel.
    • Altezza
      Altezza del grafico in pixel.

L’esempio seguente mostra un esempio di dati del grafico, seguiti dal grafico a barre risultante:

chlimage_1
dc_chart_use

Nota:

Puoi creare un controllo per grafici AEM personalizzato per la visualizzazione di dati presenti in AEM JCR. Per ulteriori informazioni, consulta Visualizzazione di dati di Adobe Experience Manager in un grafico.

Frammento di contenuto

Attenzione:

La funzionalità completa di gestione dei frammenti di contenuto è disponibile solo nell’interfaccia touch.

Il componente Frammento di contenuto è visibile anche nella barra laterale dell’interfaccia classica, ma senza ulteriori funzioni.

I frammenti di contenuto vengono creati e gestiti come risorse indipendenti dalla pagina. Puoi quindi utilizzare questi frammenti, con le relative varianti, durante la creazione di pagine di contenuto.

Importazione progettazione

Questo consente di caricare un file zip che include un pacchetto di progettazione.

Scarica

Il componente Scarica crea un collegamento nella pagina web selezionata per scaricare un file specifico. Puoi trascinare un contenuto da Content Finder oppure caricare un file.

  • Scarica
    • Descrizione
      Breve descrizione visualizzata con il collegamento per il download.
    • File
      File disponibile per il download nella pagina Web risultante. Trascina una risorsa da Content Finder o fai clic nell’area per caricare il file da rendere disponibile come download.

Nell’esempio di seguito viene illustrato il componente Scarica di Geometrixx:

Esterno

Il componente per l’integrazione con applicazioni esterne (Esterno) consente di integrare applicazioni esterne nella pagina AEM tramite un iframe.

  • Esterno
    • Applicazione di destinazione
      Specifica l’URL dell’applicazione web da integrare, ad esempio:
      http://en.wikipedia.org/wiki/Main_Page
    • Passa parametri
      Se necessario, seleziona la casella di selezione per i parametri da passare all’applicazione.
    • Larghezza e altezza
      Consente di definire la dimensione dell’iframe.

L’applicazione esterna viene integrata nel sistema paragrafo della pagina AEM, ad esempio, quando si utilizza un’applicazione di destinazione http://en.wikipedia.org/wiki/Main_Page:

chlimage_1

Nota:

A seconda del caso d’uso, per l’integrazione di applicazioni esterne possono essere disponibili altre opzioni, ad esempio l’Integrazione di portlet.

Flash

Il componente Flash permette di caricare un filmato Flash. Puoi trascinare una risorsa Flash da Content Finder sul componente oppure usare la finestra di dialogo:

  • Flash
    • Filmato Flash
      Il file del filmato Flash. Puoi trascinare una risorsa da Content Finder oppure fare clic per aprire una finestra con cui individuare il contenuto.
    • Dimensioni
      Dimensioni in pixel dell’area di visualizzazione destinata al filmato.
  • Immagine alternativa
    Un’immagine alternativa da visualizzare.
  • Avanzate
    • Menu di scelta rapida
      Indica se il menu di scelta rapida deve essere visualizzato o nascosto.
    • Modalità finestra
      Aspetto della finestra, ad esempio opaca, trasparente o distinta (in tinta unita).
    • Colore sfondo
      Un colore di sfondo selezionato dalla tavola colori fornita.
    • Versione minima
      Versione minima di Adobe Flash Player necessaria per riprodurre il filmato. L’impostazione predefinita è 9.0.0.
    • Attributi
      Eventuali altri attributi richiesti.

Immagine

Il componente Immagine visualizza un’immagine e il relativo testo in base ai parametri specificati.

Puoi caricare un’immagine, quindi modificarla e manipolarla, ad esempio ritagliandola, ruotandola o aggiungendo un collegamento, un titolo o un testo.

Puoi trascinare un’immagine da Content Finder direttamente sul componente o nella relativa finestra di dialogo di modifica. È anche possibile fare doppio clic nell’area centrale della finestra di dialogo di modifica per sfogliare il file system locale e caricare un’immagine. Le due schede della finestra di dialogo Modifica controllano anche tutte le definizioni e le operazioni di alterazione delle immagini:

dc_image

Nota:

In Internet Explorer non è possibile monitorare l’avanzamento del caricamento.

Se utilizzi Internet Explorer devi caricare l’immagine e fare clic su Ok, quindi riaprire l’immagine per visualizzare il file caricato nell’anteprima ed eseguire eventuali modifiche (ad esempio, ritagliare l’immagine).

Per ulteriori informazioni sulle funzioni HTML5 utilizzate da AEM, consulta Piattaforme certificate.

Quando carichi un’immagine, puoi configurare le opzioni seguenti:

  • Mappa
    Per mappare un’immagine, seleziona Mappa. È possibile specificare come si desidera creare la mappa immagine (rettangolare, poligonale, e così via) e specificare la destinazione dell’area.
  • Ritaglia
    Consente di ritagliare un’immagine. Utilizza il mouse per ritagliare.
  • Rotazione
    Per ruotare un’immagine. Fai clic più volte fino a ottenere la rotazione desiderata.
  • Cancella
    Rimuove l’immagine corrente.
  • Barra Zoom
    Per ingrandire e ridurre l’immagine, utilizza la barra di scorrimento disponibile sotto l’immagine (sopra i pulsanti OK e Annulla).
  • Titolo
    Il titolo dell’immagine.
  • Testo Alt
    Un testo alternativo da utilizzare per la creazione di contenuti accessibili.
  • Collega a
    Crea un collegamento a risorse o altre pagine nel tuo sito web.
  • Descrizione
    Una descrizione dell’immagine.
  • Dimensioni
    Consente di impostare l’altezza e la larghezza dell’immagine.

L’immagine finale (con Titolo e Descrizione) può essere visualizzata come:

chlimage_1

Contenitore di layout

Attenzione:

Il componente Contenitore di layout è disponibile anche nell’interfaccia classica, ma le sue funzionalità complete sono disponibili solo nell’interfaccia touch. Per ulteriori informazioni, consulta Layout reattivo.

Elenco

Il componente Elenco permette di configurare criteri di ricerca per la creazione di un elenco:

  • Elenco
    • Genera elenco con
      Consente di specificare la provenienza del contenuto dell’elenco. Sono disponibili diversi metodi:
    • A seconda dell’elemento scelto sarà visualizzato un nuovo pannello:
      • Opzioni per le pagine secondarie
        • Elemento secondario di (pagina padre)
          Consente di specificare il percorso manualmente o utilizzando il selettore. Non specificare nulla per utilizzare la pagina corrente.
      • Opzioni per elenco fisso
        • Pagine
          Consente di selezionare un elenco di pagine. Utilizza + per aggiungere voci e i pulsanti su/giù per modificare l’ordine.
      • Opzioni per la ricerca
        • Inizia in
          Consente di immettere un percorso di inizio, manualmente o utilizzando il selettore.
        • Query di ricerca
          Consente di inserire una query di ricerca sotto forma di testo normale.
      • Opzioni di ricerca avanzata
        • Notazione predicato QueryBuilder
          Consente di inserire una query di ricerca utilizzando la notazione predicato QueryBuilder. Ad esempio, puoi inserire “fulltext=Marketing” per visualizzare nel carosello tutte le pagine il cui contenuto include “Marketing”.
          Consulta API di QueryBuilder per una descrizione approfondita delle espressioni di query e per altri esempi.
      • Tag
        Consente di specificare la Pagina padre, Tag/Parole chiave e i criteri di corrispondenza richiesti.
    • Visualizza come
      Consente di specificare le modalità della visualizzazione in elenco degli elementi, ad esempio Collegamenti, Teaser o Notizie.
    • Ordina per
      Consente di specificare se l’elenco è da ordinare e, in tal caso, i criteri da utilizzare per l’ordinamento. Puoi inserire un criterio oppure selezionarne uno dall’elenco a discesa.
    • Limite
      Consente di specificare il numero massimo di elementi da visualizzare nell’elenco.
    • Abilita feed
      Indica se attivare un feed RSS per l’elenco.
    • Paginazione dopo
      Consente di specificare il numero di voci da visualizzare contemporaneamente. Se un elenco contiene più voci del numero specificato, verrà visualizzato in più parti.

Nell’esempio seguente, un componente Elenco visualizza una serie di pagine figlie, in base alle definizioni CSS personalizzate della progettazione di un sito.

dc_list_use

Accesso

Forniscono i campi nome utente e password.

chlimage_1

Puoi configurare i parametri seguenti:

  • Accesso
    • Etichetta Sezione
      Testo iniziale per i campi di immissione.
    • Etichetta Nome utente
      Testo per etichettare il campo del nome utente.
    • Etichetta Password
      Testo per etichettare il campo della password.
    • Etichetta pulsante Accesso
      Testo per il pulsante di accesso.
    • Reindirizza a
      Puoi specificare la pagina del sito web che verrà visualizzata una volta che l’utente ha eseguito l’accesso.
  • Accesso già effettuato
    • Etichetta pulsante Continua
      Testo per indicare che l’utente ha già eseguito l’accesso.

Stato dell’ordine

  • Titolo
    • Titolo
      Consente di specificare il testo del titolo che si desidera visualizzare.
    • Collegamento
      Consente di specificare la pagina (prodotto) per il quale deve essere visualizzato lo stato dell’ordine.
    • Tipo/Dimensione
      Eseguire la selezione tra le opzioni disponibili.
chlimage_1

Riferimento

Il componente Riferimento consente di fare riferimento al testo da un’altra pagina del sito Web AEM (all’interno dell’istanza corrente). Il contenuto del paragrafo a cui viene fatto riferimento verrà visualizzato come se si trovasse nella pagina corrente. Il contenuto verrà aggiornato al modificarsi del paragrafo di origine (potrebbe essere necessario un aggiornamento della pagina).

  • Riferimento paragrafo
    • Riferimento
      Consente di specificare il percorso della pagina e il paragrafo cui si desidera fare riferimento (includere il contenuto).

Per specificare il percorso di un paragrafo è necessario aggiungere in coda al percorso (della pagina) quanto segue:

.../jcr:content/par/<paragraph-ID>

Esempio:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par/similar-products

Oltre a fare riferimento a un paragrafo specifico, il percorso può essere modificato anche in modo da specificare un sistema paragrafo completo. Questa operazione può essere eseguita inserendo in coda al percorso quanto segue:

/jcr:content/par

Esempio:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par

Una volta configurato il contenuto apparirà esattamente come nella pagina sorgente. Il fatto che si tratti di un riferimento è visibile solo quando il componente viene aperto per la modifica:

chlimage_1

Ricerca

Il componente Ricerca aggiunge alla pagina le funzionalità di ricerca.

Puoi configurare i parametri seguenti:

  • Ricerca
    • Tipi di nodo
      Se la ricerca deve essere limitata a tipi di nodo specifici, elencali qui; ad esempio, cq:Page.
    • Percorso di ricerca
      Consente di specificare la pagina principale del ramo che si desidera cercare.
    • Testo pulsante Cerca
      Nome visualizzato sul pulsante di ricerca.
    • Testo per statistiche
      Testo visualizzato sopra i risultati di ricerca.
    • Testo Nessun risultato
      In assenza di risultati viene visualizzato il testo inserito qui.
    • Controllo ortografia del testo
      Se qualcuno inserisce un termine simile, questo testo viene visualizzato prima del termine.
      Ad esempio, se digiti geometrixxe, il sistema mostra il messaggio “Prova con: Geometrixx”.
    • Testo per pagine simili
      Il testo visualizzato accanto a un risultato per pagine simili. Fai clic su questo collegamento per visualizzare le pagine con contenuto simile.
    • Testo di ricerche correlate
      Testo visualizzato accanto a ricerche per termini e argomenti correlati.
    • Testo di tendenze ricerca
      Titolo al di sopra dei termini di ricerca inseriti dall’utente.
    • Etichetta pagina risultati
      Testo visualizzato in fondo all’elenco, con collegamenti alle altre pagine di risultati.
    • Etichetta precedente
      Nome visualizzato sul collegamento alle pagine di ricerca precedenti.
    • Etichetta Successiva
      Nome visualizzato sul collegamento verso le pagine di ricerca successive.

L’esempio seguente mostra il componente Ricerca dopo la ricerca della parola geometrixx dalla directory principale di un’installazione standard. L’esempio mostra anche l’impaginazione dei risultati:

dc_search_use

L’esempio seguente mostra un termine di ricerca con errore ortografico e non disponibile:

Sitemap

Un elenco automatico di tipo sitemap, con impostazioni predefinite, include tutte le pagine, (sotto forma di collegamenti attivi), presenti nel sito Web corrente. Ad esempio, un estratto mostra quanto segue:

dc_sitemap_use

Se necessario puoi configurare i parametri seguenti:

  • Sitemap
    • Percorso directory principale
      Percorso di partenza per la creazione dell’elenco.

Presentazione

Questo componente permette di caricare una serie di immagini da visualizzare sulla pagina sotto forma di slideshow. Puoi aggiungere o rimuovere immagini e assegnare un titolo a ognuna di esse. In Avanzate è inoltre possibile specificare la dimensione dell’area di visualizzazione.

Puoi configurare i parametri seguenti:

  • Diapositive
    • Nuova diapositiva
      Puoi specificare una selezione di diapositive utilizzando i pulsanti Aggiungi (e Rimuovi).
    • Titolo
      Consente di specificare un titolo, se necessario. Questo verrà sovrapposto alla diapositiva appropriata.
  • Avanzate
    • Dimensioni
      Consente di specificare larghezza e altezza in pixel.

Quindi, il componente Presentazione visualizza in sequenza ciascuna immagine per un breve lasso di tempo, prima di passare alla diapositiva successiva con un effetto di dissolvenza:

dc_slideshow_use

Tabella

Nota:

Il componente Tabella è basato sull’editor Rich Text, come il componente Testo.

Si consiglia di utilizzare il componente Tabella per le tabelle, anche se è possibile generarle con il componente Testo.

Il componente Tabella è preconfigurato per consentire di generare, compilare e formattare una tabella. Utilizzando la finestra di dialogo puoi configurare la tabella e creare contenuti:

  • da zero
  • copiando e incollando un foglio di calcolo o una tabella da un programma di modifica esterno (come Excel, OpenOffice, Notepad e così via).
dc_table

La schermata seguente mostra un esempio del componente Tabella; la progettazione è determinata dal CSS specifico per il sito:

dc_table_use

Tag cloud

Una tag cloud mostra una rappresentazione grafica di una selezione di tag associati al contenuto del sito Web:

dc_tagclouduse

Per la configurazione del componente Tag cloud, puoi specificare:

  • Tag da visualizzare
    La posizione di origine dei tag da visualizzare. Puoi eseguire la selezione da una pagina o da una pagina con tutte le relative pagine figlie oppure tutti i tag.
  • Pagina
    La pagina alla quale verrà fatto riferimento.
  • Nessun collegamento sui tag
    Consente di specificare se i tag visualizzati devono fungere da collegamenti oppure no.

Per ulteriori informazioni sull’applicazione dei tag, consulta Utilizzo dei tag.

Testo

Nota:

Il componente Testo è basato sull’editor RTF, come il componente Tabella.

Si consiglia di utilizzare il componente Tabella per le tabelle, anche se è possibile generarle con il componente Testo.

Il componente Testo consente di inserire un blocco di testo utilizzando un editor WYSIWYG, le cui funzionalità sono fornite dall’Editor Rich Text. Sono disponibili varie icone che consentono di formattare il testo, specificando caratteristiche del font, allineamento, collegamenti, elenchi e rientri.

dc_text

La scheda Stili della finestra di dialogo Modifica consente di impostare anche:

  • Spaziatore
  • Stile di testo

Il testo formattato verrà quindi visualizzato sulla pagina; la progettazione effettiva dipenderà dal sito CSS:

dc_text_use

Per informazioni più dettagliate sul componente Testo e sulla funzionalità fornita dall’editor Rich Text, consulta la pagina editor Rich Text.

Modifica locale

Oltre alla modalità di modifica del testo RTF basata su finestra di dialogo, AEM supporta anche la modifica locale, che consente di modificare direttamente il testo, così come viene visualizzato nel layout della pagina.

Testo e immagine

Il componente Testo e immagine aggiunge un blocco di testo e un’immagine. È inoltre possibile aggiungere testo e immagini separatamente; per maggiori dettagli, vedi i componenti Testo e Immagine.

chlimage_1
chlimage_1

Puoi configurare i parametri seguenti:

  • Stili componente (Stili)
    Qui puoi allineare l’immagine a sinistra o a destra. L’importazione predefinita è l’allineamento a sinistra, con l’immagine a sinistra.
  • Proprietà immagine (Proprietà immagine avanzate)
    Consente di specificare quanto segue:
    • Risorsa immagine
      Carica l’immagine richiesta.
    • Titolo
      Titolo del blocco di testo che verrà visualizzato al passaggio del mouse.
    • Testo Alt
      Testo alternativo che verrà mostrato qualora l’immagine non sia disponibile. Se lasciato vuoto, verrà utilizzato il titolo.
    • Collega a
      Specifica un percorso di destinazione.
    • Descrizione
      Una descrizione dell’immagine.
    • Dimensioni
      Imposta l’altezza e la larghezza dell’immagine.

L’esempio seguente mostra un componente Testo e immagine che mostra l’immagine allineata a sinistra:

dc_textimage_use

Titolo

Il componente Titolo può visualizzare uno dei seguenti elementi:

  • il nome della pagina corrente, qualora il campo Titolo venga lasciato vuoto; oppure
  • il testo specificato nel campo Titolo.

Puoi configurare i parametri seguenti:

  • Titolo
    Per utilizzare un nome diverso dal titolo della pagina, inseriscilo in questo campo.
  • Collegamento
    L’URI se il titolo deve fungere da collegamento.
  • Tipo/Dimensione
    Consente di selezionare Piccolo o Grande dall’elenco a discesa. Piccolo viene generato come immagine. Grande viene generato come testo.

L’esempio seguente mostra un componente Titolo visualizzato; la progettazione dipende dal CSS specifico del sito.

dc_title_use

Video

Il componente Video consente di inserire un elemento video predefinito, disponibile out-of-the-box, nella pagina.

Per informazioni sull’uso con gli elementi HTML5, consulta anche Configurare i profili video.

Dopo aver posizionato un’istanza del componente sulla pagina puoi configurare i parametri seguenti:

  • Video
    • Risorsa video
      Consente di caricare o rilasciare la risorsa video.
    • Dimensioni
      Il formato nativo del video (larghezza x altezza in pixel) sarà visualizzato nel campo accanto a Dimensioni (vedi sopra). Immetti manualmente le dimensioni in larghezza e altezza per sovrascrivere le dimensioni native del video. Fai clic su OK per chiudere la finestra di dialogo.

Nota:

Tra i formati supportati:

  • .mp4
  • Ogg
  • FLV (video Flash)  

Colonne

Le colonne sono un meccanismo per controllare il layout del contenuto in AEM. In un’installazione standard sono inclusi componenti per la creazione di due e/o 3 colonne.

L’esempio seguente illustra l’utilizzo dei componenti 2 Colonne e 3 Colonne. Per nuovi componenti puoi utilizzare i segnaposto:

chlimage_1

2 Colonne

Componente Controllo colonna con impostazione predefinita di 2 colonne uguali.

3 Colonne

Componente Controllo colonna con impostazione predefinita di 3 colonne uguali.

Controllo colonna

Il componente Controllo colonna consente agli utenti di selezionare la modalità di suddivisione del contenuto del pannello principale della pagina web in più colonne. Gli utenti possono selezionare il numero di colonne richiesto (da un elenco predefinito) e quindi creare, eliminare o spostare i contenuti all’interno di ciascuna colonna.

  • Controllo colonna
    • Layout colonna
      Consente di selezionare il numero di colonne desiderato. Una volta creata, ogni colonna include un proprio collegamento per trascinare componenti o risorse per l’aggiunta di contenuti.

Modulo

I componenti Modulo permettono di creare dei moduli che i visitatori possono compilare e inviare. I moduli e i componenti modulo consentono di raccogliere informazioni come ad esempio feedback dagli utenti (ad es. mediante un modulo di valutazione del livello di soddisfazione) e informazioni (ad es. mediante un modulo di registrazione utente).

Nota:

Consulta Aiuto moduli AEM per informazioni sui moduli AEM.

I moduli sono composti di diversi componenti distinti:

  • Modulo
    Questo componente è necessario per definire l’inizio e la fine di un nuovo modulo su una pagina. È quindi possibile inserire altri componenti tra tali elementi, ad esempio tabelle, file da scaricare e così via.
  • Campi ed elementi modulo
    I campi e gli elementi modulo possono includere caselle di testo, pulsanti di scelta, immagini e così via. L’utente spesso compie un’azione in un campo modulo, ad esempio la digitazione di testo. Per ulteriori informazioni, consulta le sezioni sui singoli elementi modulo.
  • Componenti profilo
    I componenti profilo si riferiscono ai profili dei visitatori utilizzati per la collaborazione sui social network e in altre aree in cui è richiesta la personalizzazione in base al visitatore.

Di seguito è visualizzato un modulo di esempio, composto dal componente Modulo (inizio e fine), con due campi di testo modulo per consentire l’input da parte del visitatore, un campo di testo generale utilizzato per il testo lead-in e un pulsante Invia.

dc_form

Nota:

Informazioni sullo sviluppo e sulla personalizzazione ulteriori del moduli sono disponibili sulla pagina Sviluppo di moduli. Sono inclusi, tra gli altri, aggiunta di azioni, vincoli, precaricamento di campi e utilizzo di script per richiamare un servizio per l’esecuzione di un’azione.

Impostazioni comuni a numerosi componenti modulo

Anche se i vari componenti modulo hanno funzioni diverse, molti di essi offrono opzioni e parametri simili.

Quando si configura un componente modulo, la finestra di dialogo presenta le seguenti schede:

  • Titolo e testo
    Qui è necessario specificare le informazioni di base, come il titolo del modulo ed eventuale testo di accompagnamento. Se appropriato è inoltre possibile definire altre informazioni chiave, ad esempio se il campo consente una selezione multipla e quali voci possono essere selezionate.
  • Valori iniziali
    Consente di specificare un valore predefinito.
  • Vincoli
    Consente di specificare se un campo è obbligatorio ed eventuali vincoli associati al campo (ad esempio se il valore deve essere numerico e così via).
  • Attribuzione stile
    Indica la dimensione e lo stile dei campi.

Nota:

I campi disponibili variano notevolmente in base al singolo componente.

Queste schede forniscono i parametri necessari, che dipendono dal tipo di componente, ma possono includere:

  • Titolo e testo
    • Nome elemento
      Il nome dell’elemento. Indica la posizione di memorizzazione dei dati nell’archivio.
      Si tratta di un campo obbligatorio che deve contenere solo i caratteri seguenti:
      • caratteri alfanumerici
      • _ . / : -
    • Titolo
      Il titolo visualizzato insieme al campo. Se lasciato vuoto, viene visualizzato il titolo predefinito.
    • Descrizione
      Consente di fornire informazioni aggiuntive per l’utente, se necessario. Nel modulo è visualizzata sotto il campo, in un font più piccolo rispetto al titolo.
    • Mostra/Nascondi
      Determina quando il campo è visibile.
  • Valori iniziali
    • Valore predefinito
      Il valore visualizzato nel campo all’apertura del modulo, ovvero prima che venga compilato dall’utente.
  • Vincoli
    • Obbligatorio
      Dipende dal tipo di componente modulo, ma fornisce una o più caselle di controllo per indicare che questo campo, o alcune parti di esso, sono obbligatorie.
    • Messaggio richiesto
      Un messaggio che informa gli utenti che questo campo è obbligatorio; il campo obbligatorio sarà anche contrassegnato da un asterisco.
    • Vincolo
      I vincoli disponibili per la selezione dipendono dal tipo di componente modulo.
    • Messaggio Vincolo
      Un messaggio per informare gli utenti del vincolo da rispettare.
  • Attribuzione stile
    • Dimensioni
      In righe e colonne.
    • Larghezza
      In pixel.
    • CSS

Modulo (componente)

Il componente Modulo definisce l’inizio e la fine di un modulo con gli elementi Inizio modulo e Fine modulo. Questi sono sempre utilizzati in coppia per garantire la corretta definizione del modulo.

dc_form

Tra l’inizio e la fine di un modulo puoi aggiungere componenti modulo che definiscono i campi di immissione presentati agli utenti.

Inizio del modulo

Questo componente è necessario per definire l’inizio di un nuovo modulo su una pagina. Puoi configurare i parametri seguenti:

  • Modulo
    • Pagina di ringraziamento
      La pagina a cui viene fatto riferimento per ringraziare i visitatori dopo l’invio del modulo. Se lasciato vuoto, dopo l’invio viene visualizzato di nuovo il modulo.
    • Avvia flusso di lavoro
      Determina il flusso di lavoro attivato dopo l’invio del modulo.
  • Avanzate
    • Tipo di azione
      Un modulo richiede un’azione. L’azione definisce l’operazione attivata per l’esecuzione con i dati inviati dall’utente (simile a action= nel linguaggio HTML). Alcuni richiedono una Configurazione azione corrispondente.
      Con un’installazione standard di AEM è inclusa una selezione di tipi di azione:
      • Richiesta account
      • Crea contenuto
      • Crea lead
      • Crea e aggiorna account
      • Servizio e-mail: crea utente con sottoscrizione e aggiungi all'elenco
      • Servizio e-mail: invia e-mail di risposta automatica
      • Servizio e-mail: annulla sottoscrizione a mailing list
      • Modifica Community
      • Modifica riferimento
      • Modifica Risorse controllate da flusso di lavoro
      • E-mail
      • Dettagli ordine inoltrato
      • Aggiornamento profilo
      • Ripristina password
      • Imposta password
      • Contenuto store
        È il tipo di azione predefinito.
      • Contenuto store con caricamenti
      • Invia ordine
      • Annulla sottoscrizione utente
      • Aggiorna ordine
    • Identificatore modulo
      L’identificatore del modulo identifica in modo univoco il modulo. Utilizza l’identificatore in presenza di diversi moduli su una stessa pagina, avendo cura di usare identificatori diversi.
    • Percorso di caricamento
      Il percorso alle proprietà dei nodi utilizzato per caricare i valori predefiniti nei campi del modulo.
      È un campo facoltativo che specifica il percorso a un nodo nell’archivio. Quando a questo nodo sono associate proprietà che corrispondono ai nomi di campo, i campi modulo corrispondenti vengono precaricati con il valore di tali proprietà. Se non esiste corrispondenza, il campo contiene il valore predefinito.
      Utilizzando Percorso di caricamento puoi precaricare valori nei campi del modulo. Per ulteriori informazioni, consulta Precaricamento di valori nel modulo.
    • Convalida client
      Indica se è necessaria la convalida del client per questo modulo (la convalida server si verifica sempre). Questo può essere ottenuto in combinazione con il componente Captcha per moduli.
    • Tipo risorsa validazione
      Definisce il tipo di risorsa per la convalida del modulo se si desidera convalidare l’intero modulo (anziché i singoli campi). Se devi convalidare l’intero modulo, includi anche uno degli elementi seguenti:
      • Uno script per la convalida del client:
        /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
      • Uno script per la convalida sul lato server:
        /apps/<myApp>/form/<myValidation>/formservervalidation.jsp
    • Configurazione azione
      Le opzioni disponibili in Configurazione azione dipendono dalla selezione in Tipo di azione:
      • Richiesta account
        • Pagina di creazione account
          Pagina utilizzata per la creazione di un nuovo account.
      • Crea contenuto
        • Percorso contenuto
          Il percorso a qualsiasi contenuto rilasciato dal modulo. Immetti un percorso che termini con una barra /. Questo significa che per ciascun modulo viene creato un nuovo nodo nel percorso specificato, ad esempio:
              /forms/feedback/
        • Tipo
          Seleziona il tipo richiesto.
        • Modulo
          Consente di specificare il modulo.
        • Rendering con
          Consente di selezionare l’opzione desiderata dall’elenco.
        • Tipo risorsa
          Se impostato, viene aggiunto a ogni commento come sling:resourceType
        • Selettore vista
      • Crea lead
        • Il lead verrà aggiunto a questo elenco
          Consente di specificare l’elenco di lead richiesto.
      • Crea e aggiorna account
        • Gruppo iniziale
          Gruppo cui assegnare il nuovo utente.
        • Home
          Pagina da visualizzare dopo l’accesso.
        • Percorso
          Il percorso (relativo) per la creazione e la memorizzazione del nuovo account.
        • Visualizza dati
          Fai clic su questo pulsante per accedere alle informazioni sui risultati del modulo in Modifiche collettive. Da qui puoi esportare le informazioni in un file .tsv (separato da tabulazioni) da utilizzare, ad esempio, in un foglio di calcolo Excel.
      • E-mail
        • Da
          L’indirizzo e-mail dal quale deve essere inviato il messaggio.
        • Invia a
          Gli indirizzi e-mail cui deve essere inviato il modulo.
        • CC
          Gli indirizzi e-mail per l’invio in CC.
        • CCN
          Gli indirizzi e-mail per l’invio in CCN.
        • Oggetto
          L’oggetto del messaggio e-mail.
      • Ripristina password
        • Pagina modifica password
          Pagina utilizzata per modificare la password.
      • Contenuto store
        • Percorso contenuto
          Il percorso a qualsiasi contenuto rilasciato dal modulo. Immetti un percorso che termini con una barra /. Questo significa che per ciascun modulo viene creato un nuovo nodo nel percorso specificato, ad esempio:
              /forms/feedback/
        • Visualizza dati
          Fai clic su questo pulsante per accedere alle informazioni sui risultati del modulo in Modifiche collettive. Da qui puoi esportare le informazioni in un file .tsv (separato da tabulazioni) da utilizzare, ad esempio, in un foglio di calcolo Excel.
      • Contenuto store con caricamenti
        Prevede le stesse opzioni di Contenuto store.
      • Annulla sottoscrizione utente
        • Il lead verrà eliminato da questo elenco
          Consente di specificare l’elenco di lead richiesto.

Fine del modulo

Questo indica la fine del modulo. È possibile configurare quanto segue:

  • Fine modulo
    • Mostra pulsante Invia
      Indica se mostrare o meno un pulsante Invia.
    • Nome invio
      Identificatore utilizzato qualora il modulo contiene più pulsanti Invia.
    • Titolo invio
      Nome visualizzato sul pulsante, ad esempio Invia.
    • Mostra pulsante Ripristina
      Seleziona la casella di selezione per rendere visibile il pulsante Ripristina.
    • Titolo ripristino
      Nome visualizzato sul pulsante Ripristina.
    • Descrizione
      Informazioni riportate sotto il pulsante.

Nome account

Consente di inserire un nome account:

dc_form_accountname

Indirizzo

Consente di inserire un campo di indirizzo internazionale nel seguente formato:

dc_form_addressfield

Il componente è configurato per l’utilizzo immediato, ma puoi modificare la configurazione se necessario. Ad esempio, possono essere aggiunti vincoli per i singoli elementi dell’indirizzo. Lasciando i campi vuoti saranno utilizzate le impostazioni predefinite.

Captcha

Il componente Captcha richiede all’utente di inserire la stringa alfanumerica visualizzata sullo schermo. Con ogni aggiornamento della schermata viene visualizzata una stringa diversa.

dc_form_captcha

Puoi configurare vari parametri per questo componente, incluso un messaggio da visualizzare se la stringa Captcha non è valida.

Gruppo di caselle di selezione

Una casella di selezione consente di generare un elenco composto di una o più caselle. L’utente potrà selezionare più caselle.

dc_form_checkboxgroupuse

Puoi specificare vari parametri, inclusi un titolo, una descrizione e il nome dell’elemento. Utilizza i pulsanti + e - per aggiungere o rimuovere elementi, quindi riposizionali mediante le frecce verso l’alto o il basso.

Nota:

Utilizzando Percorso di caricamento elementi puoi precaricare l’elenco del gruppo di caselle di selezione con i relativi valori.

Consulta Precaricamento dei campi modulo con più valori.

Dati carta di credito

Questo consente di includere i campi necessari per inserire i dati della carta di credito. Puoi configurarlo per specificare i tipi di carte accettate e le informazioni richieste (ad esempio, il codice protezione).

chlimage_1

Elenco a discesa

Un elenco a discesa più essere configurato con una serie di valori da selezionare:

dc_form_dropdownlistuse

Puoi specificare un titolo e le voci incluse nell’elenco. Utilizza i pulsanti + e - per aggiungere o rimuovere le voci, quindi riposizionale mediante le frecce verso l’alto o il basso. Puoi specificare se gli utenti sono autorizzati a selezionare più voci dall’elenco e tutte le voci che dovrebbero essere selezionate automaticamente al primo accesso all’elenco (valori iniziali).

Nota:

Utilizzando Percorso di caricamento elementi puoi precaricare nell’elenco a discesa i relativi valori.

Consulta Precaricamento dei campi modulo con più valori.

Caricamento file

Il componente Caricamento file offre all’utente la possibilità di selezionare e caricare un file.

dc_form_fileupload

Nota:

Puoi creare un componente di caricamento personalizzato per caricare i file su un Servlet Sling. Per ulteriori informazioni, consulta Caricamento di file in Adobe Experience Manager.

Campo nascosto

Questo componente consente di creare un campo nascosto. Questi possono essere utilizzati per vari scopi; ad esempio, quando è necessario eseguire un’azione dopo l’invio del modulo, o quando dati nascosti sono necessari in fase di post-elaborazione.

Nota:

Puoi inoltre personalizzare il modulo in modo da mostrare o nascondere specifici componenti a seconda dei valori di altri campi nel modulo. La modifica della visibilità di un campo modulo è utile se il campo è richiesto solo in presenza di particolari condizioni.

Consulta Mostrare e nascondere i componenti di un modulo.

Pulsante immagine

Un pulsante immagine consente di creare un pulsante con testo e immagine personalizzati:

dc_form_imagebutton

Caricamento immagine

Il componente Caricamento immagine offre all’utente la possibilità di selezionare e caricare un file immagine.

dc_form_imageupload

Campo collegamento

Il componente Campo collegamento permette di specificare un URL:

dc_form_link

Viene utilizzato frequentemente per il modulo evento calendario, in cui fornisce un campo URL/collegamento per un evento.

Campo password

Viene utilizzato per consentire all’utente di inserire la propria password:

dc_form_password

Reimpostazione password

Questo componente fornisce all’utente due campi:

  • per inserire una password
  • per inserire nuovamente la password e verificare che sia stata inserita correttamente.

Con le impostazioni predefinite, il componente si presenta come segue:

dc_password_reset

Gruppo pulsanti di scelta

Un gruppo pulsanti di scelta offre un elenco composto di uno o più caselle di selezione. L’utente potrà selezionarne solo uno.

Puoi specificare il nome dell’elemento insieme a un titolo e descrizione. Utilizza i pulsanti + e - per aggiungere o rimuovere elementi, quindi riposizionali mediante le frecce verso l’alto o il basso e se necessario specifica un valore predefinito:

dc_form_radiogroupuse

Nota:

Utilizzando Percorso di caricamento elementi puoi precaricare il gruppo pulsanti di scelta con i relativi valori.

Consulta Precaricamento dei campi modulo con più valori.

Pulsante Invia

Questo componente permette di creare un pulsante Invia, con testo predefinito:

dc_form_submitbutton

oppure con testo personalizzato:

dc_form_submitbuttonuse

Campo tag

Questo campo consente di selezionare i tag:

dc_form_tags_use

Puoi specificare vari parametri, compresi i namespace utilizzabili mediante la scheda apposita:

  • Campo tag
    • Namespace consentiti
      • Geometrixx Outdoors
      • Flusso di lavoro
      • Forum
      • Fotografia Stock
      • Geometrixx Media
      • Tag standard
      • Marketing
      • Proprietà risorsa
    • Larghezza in pixel
    • Dimensione popup

Campo testo

Il campo di testo standard può essere configurato con la dimensione richiesta e con un messaggio introduttivo personalizzato:

dc_form_text

Pulsanti invio flusso di lavoro

Questo consente di creare un pulsante Invia da utilizzare in un flusso di lavoro.

chlimage_1

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online