Costruire un editor XML specifico per l'organizzazione in HTML

0

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?

    
posta Drkawashima 18.03.2014 - 08:41
fonte

1 risposta

1

In generale, mi aspetto che un buon editor grafico sia più facile da usare e che un editor di markup sia più facile da implementare e potenzialmente più potente, ma questo è davvero difficile da rispondere nel caso generale:

  • Qual è il set di abilità del tuo team? Un editor di markup in stile StackExchange sarebbe probabilmente più facile da implementare. Un framework MV * ha più di una curva di apprendimento. (Non ho esperienza sufficiente con i framework JavaScript MV * per dare un grosso parere in merito.) Ecc.
  • Quanto tecnicamente competenti sono i tuoi utenti? Per stereotipare, mi aspetterei che più utenti tecnici siano più disposti a modificare il markup (e potrebbero persino preferire), mentre gli utenti meno tecnici sarebbero più a loro agio con un grafico approccio.
  • Quante risorse hai? Ad esempio, anche se StackExchange ha digitato Markdown, hanno anche un'anteprima live molto elegante. Tuttavia, il tuo team potrebbe non disporre delle risorse di StackExchange.
  • Hai parlato con i tuoi utenti? La risposta alla domanda, "Qual è l'interfaccia utente migliore?", è quasi sempre , "Ottieni alcuni feedback da parte degli utenti effettivi. " L'intuizione degli sviluppatori su ciò che rende una buona interfaccia utente è notoriamente cattiva. Fai un prototipo (usa prototipi di carta se non vuoi crearne uno sul computer), fai qualche test di usabilità del corridoio , qualsiasi cosa occorra per ottenere un feedback effettivo dagli utenti effettivi.

Per quanto riguarda come implementare la mappatura dei dati nell'interfaccia utente, qualsiasi approccio che hai descritto dovrebbe funzionare. Dipende da cosa è comodo per la tua squadra, da come preferisci lavorare e da quali framework o librerie stai usando.

    
risposta data 18.03.2014 - 14:02
fonte

Leggi altre domande sui tag