Creazione e aggiunta di modelli e componenti

NOTA

Adobe consiglia di utilizzare l'editor SPA per i progetti che richiedono il rendering lato client basato sul framework dell'applicazione a pagina singola (ad es. React). Per saperne di più.

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

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

Selezionando questo modello di esempio durante la creazione di una nuova app, viene distribuito un dashboard ricco di funzioni per AEM Mobile.

chlimage_1-70

NOTA

Per gestire l'applicazione e il contenuto dell'app mobile AEM Mobile Apps Control Center, vedete il AEM Mobile Application Dashboard.

Creazione di modelli di app

Un modello 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 elimina alcune proprietà fondamentali per guidare l'app nel modo appropriato. In generale, un cliente non creerebbe troppe app in totale.

I modelli di app forniscono un modo semplice per sfruttare i progetti esistenti creati dagli sviluppatori, utilizzati per la creazione di nuove app all'interno di AEM.

Quando crei una nuova app basata sul modello di un'altra app, riceverai 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. Andate al catalogo delle app AEM Mobile: <server-url>/aem/apps.html/content/mobileapps
  2. Selezionare Create —> App come illustrato di seguito

Dopo aver creato un'app utilizzando questo modello, potete aggiungere articoli, banner e raccolte all'app. Per visitare di nuovo gli articoli, i banner e le raccolte, consultate Azioni di gestione dei contenuti.

NOTA

In alternativa, puoi anche selezionare un modello di app di esempio, ad esempio l'app We.Unlimited, resa disponibile da uno sviluppatore AEM. Se utilizzate questo modello di esempio per la vostra app, potete ottenere alcuni articoli di esempio e raccolte su cui lavorare. Potete utilizzare i modelli e i componenti di esempio, personalizzare quelli esistenti o crearne di nuovi per l'app.

ATTENZIONE

Impostazione della proprietà redirectTarget

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

redirectTarget viene calcolato come parte dell'operazione di creazione dell'app e tenta di risolvere un percorso, se esiste una proprietà redirectTarget disponibile come parte del modello di app 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 in cui è stata creata l'app.

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

Creazione di modelli di contenuto

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

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

Modelli articolo

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

  1. Fate clic su + in Gestisci articoli per creare un nuovo articolo. È possibile scegliere un Articolo illimitato o un articolo RTF. L'immagine seguente mostra l'opzione che consente di scegliere tra questi due modelli di articolo.

  2. Fate clic su Next per definire i metadati dell'articolo come Nome/Titolo articolo, Descrizione, Autore, Abstract, Dipartimento, Miniatura immagine, Accesso articolo e così via.

  3. Fare clic su Next per compilare il campo Proprietà annuncio.

  4. Fate clic su Next per inserire l'immagine dell'articolo o social media

  5. Fate clic su Next per scegliere un collegamento alla raccolta a cui collegare il nuovo articolo.

  6. Fate clic su Next per inserire i dettagli per la condivisione per social network.

  7. Fate clic su Crea per completare il processo di creazione di un articolo utilizzando l'esempio. Fate clic su Fine o su 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 AEM modelli di pagina.

Selezionate un articolo, desiderate modificarlo e fate clic su Modifica per aggiungere componenti all'articolo.

chlimage_1-72 chlimage_1-73

Scegliete '+' nel pannello a sinistra per aggiungere componenti all'articolo.

chlimage_1-74

Creazione di modelli predefiniti

Non esistono modelli di articolo predefiniti, ma esiste un modello predefinito che i modelli personalizzati dovrebbero estendere. Consultate Esempio di modello di articolo dell'app Geometrixx Unlimited esempio.

Le proprietà chiave oltre le normali proprietà richieste per il modello AEM includono:

dps-resourceType="dps:Article"

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

In base AEM modelli, è possibile aggiungere proprietà predefinite o nodi secondari al jcr:content del modello.

ATTENZIONE

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

Creazione e aggiunta di componenti

I componenti utilizzano e consentono l'accesso ai Widget e questi vengono utilizzati per il rendering del contenuto.

Un semplice componente è incluso nell’archivio dei codici, la cui origine si trova in AEM. Successivamente, può essere aperto localmente in CRXDE Lite.

NOTA

Al momento non sono disponibili componenti forniti per AEM Mobile.

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

Tuttavia, i componenti personalizzati potrebbero non essere esportati e caricati correttamente in AEM Mobile On-demand Services senza un gestore di sincronizzazione del contenuto per l’esportazione personalizzato che esegue il rendering in AEM.

Una volta che il componente è già stato incluso in una pagina AEM, insieme ad altri componenti per blocchi predefiniti, è possibile aggiungere un altro componente alla pagina o modificarne uno esistente.

Per aggiungere un altro componente alla pagina:

  1. Scegliete la pagina desiderata e accertatevi di essere in modalità Modifica, mediante il menu a discesa in alto a destra dell’intestazione dell’editor
  2. Per attivare o disattivare il pannello laterale, usate l’icona più a sinistra nell’intestazione dell’editor
  3. Selezionare la scheda Componenti
  4. Trascinare uno dei componenti disponibili sulla pagina

chlimage_1-75

Per modificare un componente esistente:

  1. Scegliere la pagina e assicurarsi di essere in modalità Modifica e selezionare il componente
  2. Toccate l’icona della chiave inglese per configurare il componente
NOTA

È possibile creare un componente in AEM e personalizzare lo stesso utilizzando Sviluppo con CRXDE Lite. Dopo aver personalizzato il componente esistente come requisiti, è possibile aggiungerlo nella pagina utilizzando l'opzione Modifica in Gestisci articoli come illustrato nella figura precedente.

NOTA

Fare riferimento a Best practice per lo sviluppo di modelli e componenti in AEM Mobile.

Passaggi successivi

In questa pagina