Sto costruendo un editor XML user-friendly in HTML / JS.
Alla ricerca di alcuni consigli generali su come costruire l'interfaccia utente dell'editor e quale approccio consiglieresti per mappare i dati nell'interfaccia utente.
Dettagli sul problema:
Fondamentalmente preleverò un singolo oggetto come XML da un server. Gli oggetti XML in questione saranno un piccolo insieme di XML specifici dell'organizzazione che possono essere strutturati in pochi modi diversi. (Nel complesso ci sono solo circa 15 diversi tipi di nodi disponibili.) Quindi conoscerò tutti i tipi di nodi che possono apparire, quindi so quale tipo di interfaccia utente creare per ciascun tipo di nodo.
Fondamentalmente, tutte le classi hanno lo stesso nodo radice ( Elemento ). Il primo nodo figlio di quella classe può essere un singolo nodo Elenco , Tabella , Persona o Edificio . Dopodiché, di solito ci sono circa 4 livelli di più nodi figlio, di strutture variabili. Ad esempio:
- Una persona contenente un elenco di indirizzi , in cui ogni nodo di indirizzo ha due proprietà; un id e un tipo="indirizzo personale" . Ovunque all'interno del testo di ciascun indirizzo ci può essere anche un riferimento, una sorta di link interno a un id nel sistema.
- Una tabella comprende Intestazione , Footer e un Corpo con un numero facoltativo di righe e celle
Il caso d'uso è il seguente:
L'utente inizierà sempre caricando un elemento XML esistente nell'editor. L'utente può modificare valori esistenti, rimuoverli e aggiungere nuovi valori. (Poiché tutti gli elementi hanno lo stesso tipo di nodo radice, l'utente avrà accesso per aggiungere praticamente qualsiasi tipo di nodo che desidera.) Quando hanno finito, premono "Salva" e l'editor si chiude, e una modalità di visualizzazione (già completata ) mostra l'elemento salvato.
Ho 2 idee per l'interfaccia utente dell'editor:
- Una sorta di editor Markup nello stile di StackExchange (un singolo campo di testo con tag di markup semplici)
- Un modulo HTML in cui viene eseguito il rendering di ogni nodo come uno o più campi di input e utilizzare i pulsanti per spostare / aggiungere / eliminare i campi. Renderò Tabelle come tabelle HTML e Elenchi come elenco non ordinato con ogni voce di elenco contenente più campi di input (un campo di input per ogni indirizzo e un menu a tendina per il tipo , e riponi l'id in un parametro ID dati ).
Quale di questi approcci all'interfaccia utente consiglieresti? (Sentiti libero di fare altre domande sull'XML.)
Come consiglieresti di mappare i dati nell'interfaccia utente? Conserveresti tutti i dati all'interno dell'HTML durante la modifica e poi li analizzeresti in XML quando l'utente salva il suo lavoro. Oppure memorizzare i dati come oggetto JavaScript, lavorare direttamente con l'oggetto JS e aggiornare l'interfaccia utente in base all'oggetto JS? Forse usando qualche framework MV * con binding a 2 vie? (Suppongo che quel metodo sarebbe preso in considerazione solo se avessi costruito l'interfaccia come modulo.) O sarebbe sempre più facile attraversare l'XML nodo per nodo e generare elementi dell'interfaccia utente basati su quello?