Creazione e aggiunta di modelli e componenti

NOTA

L’Adobe consiglia di utilizzare l’Editor SPA per i progetti che richiedono il rendering lato client basato su framework di applicazione a pagina singola (ad esempio, React). Ulteriori informazioni.

AEM Mobile On-Demand fornisce un modello di app, un modello di articolo e componenti per articoli completamente configurati.

L'app We.Unlimited è un modello di esempio che rappresenta la shell di un'applicazione AEM Mobile On-Demand completamente configurabile e gestibile.

La selezione di questo modello di esempio durante la creazione di una nuova app offre una dashboard con funzioni avanzate di AEM Mobile.

chlimage_1-70

NOTA

Per gestire il contenuto delle applicazioni e delle app mobili da AEM Mobile Apps Control Center, vedi Dashboard dell’applicazione AEM Mobile.

Creazione di modelli di app

Un modello di app viene utilizzato per creare una nuova app e funge da raccolta di modelli di pagina e componenti che rappresentano una linea di base o una base di un’app. Il modello timbra alcune proprietà fondamentali per condurre l’app nel modo appropriato. In generale, un cliente non creerebbe troppe app in totale.

I modelli di app consentono di sfruttare facilmente le progettazioni esistenti create dagli sviluppatori e utilizzate per la creazione di nuove app nell’ambito dell’AEM.

Quando crei una nuova app basata sul modello di un’altra app, otterrai un’app con un punto di partenza rappresentativo dell’app da cui è stata creata.

Passaggi per creare una nuova app basata su un modello di app:

  1. Passa al catalogo delle app AEM Mobile: <server-url>/aem/apps.html/content/mobileapps
  2. Seleziona Crea —> App come mostrato di seguito

Dopo aver creato un’app utilizzando questo modello, puoi aggiungere all’app articoli, banner e raccolte. Per rivedere, creare articoli, banner e raccolte, consulta Azioni gestione contenuti.

NOTA

In alternativa, puoi anche selezionare un modello di app di esempio, ad esempio We.Unlimited , messo a tua disposizione da uno sviluppatore AEM. Se utilizzi questo modello di esempio per la tua app, otterrai alcuni articoli e raccolte di esempio su cui lavorare. Potrai utilizzare i modelli e i componenti di esempio, personalizzare quelli esistenti o crearne di nuovi per la tua app.

ATTENZIONE

Impostazione redirectTarget proprietà

Quando utilizza uno dei modelli di app, lo sviluppatore definisce il contenuto dell’applicazione. Tuttavia, lo sviluppatore deve sapere dove viene creata l’applicazione nel file jcr e il valore di redirectTarget proprietà.

Il redirectTarget viene calcolato come parte dell’operazione create app e tenta di risolvere un percorso, se nel modello di app è disponibile una proprietà redirectTarget e il valore di redirectTarget è definito come relativo. Quando il processo di creazione dell'app trova un valore relativo per redirectTarget nel modello di app, il valore viene aggiunto alla posizione risolta di creazione dell'app.

Ad esempio, se un modello di app definisce un redirectTarget con un valore di "master di lingua/it", e l’app è stata creata in "/content/mobileapps/fooApp", il valore finale per redirectTarget dopo la creazione dell’app sarà "/content/mobileapps/fooApp/language-masters/it".

Creazione di modelli di contenuto

Ogni tipo di entità dispone di due modelli predefiniti. Secondo questi principi, il contenuto deve essere:

  • Modelli predefiniti: utilizzato per la creazione di contenuti con proprietà/struttura predefinite applicabili
  • Modelli importati: utilizzato per importare contenuto da AEM Mobile con proprietà/struttura predefinite applicabili

Modelli di articolo

L’articolo Unlimited è un modello di esempio che rappresenta un layout di articolo AEM Mobile On-Demand tipico.

  1. Fai clic su + in Gestisci articoli per creare un nuovo articolo. Puoi scegliere una delle seguenti opzioni: Articolo Unlimited o un Articolo Rich Text. L’immagine seguente mostra l’opzione che consente di scegliere uno di questi due modelli di articolo.

  2. Clic Successivo per definire i metadati di un articolo, ad esempio nome/titolo dell’articolo, descrizione, autore, riassunto, reparto, immagine miniatura, accesso all’articolo e così via.

  3. Clic Successivo per compilare le Proprietà annuncio.

  4. Clic Successivo per inserire l'immagine dell'articolo o l'immagine del social media

  5. Clic Successivo per scegliere una raccolta, collega questo nuovo articolo a.

  6. Clic Successivo per inserire i dettagli per la condivisione tramite social network.

  7. Clic Crea per completare il processo di creazione di un articolo utilizzando l'esempio. Fai clic su Fine o Modifica articolo per modificare le proprietà di questo articolo.

chlimage_1-71

Aggiunta di componenti all’articolo

Una volta creato, un autore può modificare il contenuto di un articolo aggiungendo componenti come testo e immagini. Gli articoli sono un’estensione dei modelli di pagina dell’AEM.

Seleziona un articolo da modificare e fai clic su Modifica per aggiungere componenti all’articolo.

chlimage_1-72 chlimage_1-73

Scegli il '+" nel pannello a sinistra per aggiungere componenti all’articolo.

chlimage_1-74

Creazione di modelli predefiniti

Non sono presenti modelli di articolo predefiniti, tuttavia è disponibile un modello predefinito che i modelli personalizzati devono estendere, vedi la sezione dell’app Geometrixx Unlimited Esempio di modello di articolo.

Le proprietà chiave oltre il normale modello AEM richiesto includono:

dps-resourceType="dps:Article"

Questa proprietà assicura che la pagina AEM sia riconosciuta come pagina di articolo di destinazione di AEM Mobile.

In base ai modelli AEM, puoi aggiungere tutte le proprietà predefinite o i nodi secondari al jcr:content.

ATTENZIONE

I banner e le raccolte non hanno contenuto, pertanto la loro creazione non supporta i modelli personalizzati.

Creazione e aggiunta di componenti

I componenti utilizzano e consentono l’accesso ai widget che vengono utilizzati per eseguire il rendering del contenuto.

Un componente semplice è incluso nell’archivio del codice, la cui origine è reperibile in AEM. Successivamente può essere aperto anche a livello locale in CRXDE Lite.

NOTA

Non sono attualmente disponibili componenti predefiniti per AEM Mobile.

Puoi aggiungere componenti alla pagina. Qualsiasi componente può essere utilizzato in un’app AEM Mobile, ma se applicato potrebbe non essere riprodotto correttamente.

Tuttavia, i componenti personalizzati potrebbero non esportare e caricare correttamente in AEM Mobile On-demand Services senza un gestore di sincronizzazione del contenuto di esportazione personalizzato con rendering in AEM.

Una volta che il componente è già stato incluso in una pagina AEM, insieme ad alcuni altri componenti del blocco predefinito, puoi aggiungerne un altro alla pagina o modificarne uno esistente.

Per aggiungere un altro componente alla pagina:

  1. Scegli quella pagina e accertati di essere in modalità Modifica, tramite il menu a discesa in alto a destra dell’intestazione dell’editor
  2. Attiva/disattiva il pannello laterale utilizzando l’icona più a sinistra nell’intestazione dell’editor
  3. Seleziona la Componenti scheda
  4. Trascina uno dei componenti disponibili nella pagina

chlimage_1-75

Per modificare un componente esistente:

  1. Scegli quella pagina e assicurati di essere in Modifica e seleziona il componente
  2. Tocca l’icona chiave inglese per configurare il componente
NOTA

Puoi creare un componente in AEM e personalizzarlo utilizzando Sviluppo con CRXDE Lite. Dopo aver personalizzato il componente esistente in base alle tue esigenze, puoi aggiungerlo alla pagina utilizzando Modifica opzione in Gestisci articoli come illustrato nella figura precedente.

NOTA

Passaggi successivi

In questa pagina