Creazione e aggiunta di modelli e componenti creating-and-adding-templates-and-components

NOTE
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 un’app offre una dashboard con funzioni avanzate di AEM Mobile.

chlimage_1-70

NOTE
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 creating-app-templates

Un modello di app viene utilizzato per creare un’app e funge da raccolta di modelli di pagina e componenti che rappresentano una linea di base o le basi 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 offrono un modo semplice di utilizzare le progettazioni esistenti create dagli sviluppatori e utilizzate per la creazione di nuove app nell’ambito dell’AEM.

Quando crei un’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 un’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.

NOTE
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.
CAUTION
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 creating-content-templates

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 article-templates

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

  1. In entrata Gestisci articoli, seleziona + per creare un 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 adding-components-to-article

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, quindi 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 creating-out-of-the-box-templates

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.

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

Creazione e aggiunta di componenti creating-and-adding-components

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.

NOTE
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. Seleziona l’icona chiave inglese per configurare il componente
NOTE
Puoi creare un componente in AEM e personalizzarlo utilizzando Sviluppo con CRXDE Liti. 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.
NOTE
Fai riferimento a Best practice per lo sviluppo di modelli e componenti in AEM Mobile.

Passaggi successivi the-next-steps

recommendation-more-help
2eeeb575-8007-40cc-a72d-206fbc4ddd4b