Qual è il termine che descrive questo sistema per la generazione di interfacce utente?

3

Quindi, c'è questa idea, che già conosci: Definisci il layout dell'interfaccia utente creando un albero di pannelli. I nodi foglia sull'albero sono quelli che usavamo chiamare 'controlli' nel corso della giornata: le cose con cui l'utente interagisce, i pulsanti di opzione e le caselle di riepilogo e così via. I nodi interni sono principalmente interessati dal layout; questo tipo di pannello impila i suoi pannelli figli verticalmente, quel tipo mette i suoi bambini in una griglia, ecc.

È COMUNE. La maggior parte dei sistemi di generazione di UI che ho visto negli ultimi vent'anni sono implementazioni di questo, e quelli che non sono presi a prestito da esso.

Qual è la parola per questa idea?

EDIT: Sto cercando una parola, o una frase, per il modello che sto descrivendo. È un modello grande e di alto livello ed è diventato quasi universale. AWT, moduli HTML con i controlli nelle celle della tabella, Swing, XAML, Android e ASP.NET lo utilizzano o prendono in prestito da esso. C'è un'idea qui, allo stesso livello di concetti come "windowing system" o "mesh network". Come lo chiamiamo?

Sospetto che la vera risposta sia "non c'è ancora un consenso su un nome per questo". Il che sarebbe di per sé molto interessante.

    
posta mjfgates 06.04.2012 - 19:28
fonte

6 risposte

4

In HTML / CSS ti stai riferendo a un modello di visualizzazione relazionale

Dove gli elementi sono posizionati in base alla loro relazione con gli elementi che si trovano prima / dopo di loro nell'albero.

L'alternativa è un modello di posizionamento assoluto in cui la struttura non ha importanza e la posizione di ogni elemento è esplicitamente posizionata rispetto all'angolo in alto a sinistra.

Generalmente è preferibile la relazione perché consente di apportare modifiche a parti dell'intero senza richiedere un completo ricalcolo di tutti gli offset all'interno della pagina.

Ad esempio, se si modifica l'offset per un pannello di 5 generazioni / nodi rimossi dal pannello principale; in una modalità relazionale, tutto ri-fluisce per compensare automaticamente; in un modello assoluto, l'offset per tutte le 5 generazioni / nodi di pannelli parent deve essere ricalcolato in ordine decrescente perché nessun bambino può calcolarne l'offset in relazione al genitore fino a quando il genitore non viene aggiornato per primo.

La parte difficile dei modelli di layout HTML / CSS è che puoi combinarli.

Per esempio, un quinto riquadro figlio può essere posizionato usando il posizionamento relativo (display: relativo) ma gli elementi figli di quel nodo possono essere posizionati usando il posizionamento assoluto (display: assoluto) all'interno di quell'elemento. Vale a dire invece di calcolare l'offset in alto a sinistra dall'angolo della finestra, viene preso in relazione all'angolo superiore sinistro della finestra in cui risiede (5 generazioni di profondità).

La forza del modello di posizionamento relativo è che nessun bambino deve essere consapevole del posizionamento del suo genitore. Gli elementi secondari possono essere beatamente inconsapevoli. La difficoltà arriva quando ci sono problemi / incongruenze (cioè come è accaduto molto con incoerenze del browser in passato). Dovrai quindi eseguire di nuovo il backup dell'albero un elemento alla volta fino a quando non potrai determinare quello che causa il problema.

Fortunatamente, con strumenti come FireBug e Strumenti per sviluppatori di Google Chrome, è davvero facile eseguire la scansione attraverso l'albero e visualizzare le caselle di layout, i margini di riempimento, i margini e così via interagire tra loro.

Sfortunatamente, una volta adottato un modello relazionale diventa davvero difficile progettare un tipico strumento di costruzione GUI drag-drop in modo che la maggior parte dello sviluppo della GUI relazionale avvenga solo nel codice. Forse cambierà nel prossimo / lontano futuro.

Nota: per completezza, sento che dovrei menzionare anche il modello di posizionamento fisso. È fondamentalmente lo stesso del posizionamento assoluto ma non è influenzato dallo scorrimento. È così che quelle fastidiose barre degli strumenti che si attaccano alla parte inferiore / laterale della pagina vengono create sulla maggior parte dei siti web.

    
risposta data 08.04.2012 - 07:05
fonte
3

Di solito lo vedo chiamato qualcosa di simile a una gerarchia di contenitori , con i 'controlli' che sono chiamati widget .

    
risposta data 06.04.2012 - 19:33
fonte
1

Il termine generico per tale strumento è "GUI Builder". Come hai notato chiaramente, questi strumenti possono spaziare dall'essere completamente WYSIWYG drag-n-drop, a qualcosa che è più orientato al programmatore esperto, dove l'approccio progettuale non è esattamente WYSIWYG, ma rappresentato utilizzando una relazione gerarchica di gruppo di widget (esempio XUL) in una forma più testuale / programmatica.

    
risposta data 06.04.2012 - 20:31
fonte
1

L'hai descritto tu stesso nella domanda:

Define the layout of your UI by creating a tree of panels. The leaf nodes on the tree are what we used to call 'controls' way back in the day

L'ho sempre chiamato variazioni di: "struttura ad albero", "gerarchia ad albero [di controlli / widget UI]" e così via. A volte devo specificare "larghezza variabile" poiché gli alberi binari tendono a essere ciò che viene in mente, ma "albero" si applica in generale bene.

    
risposta data 08.04.2012 - 08:53
fonte
0

Un wireframe di un sito Web è una guida visiva che rappresenta la struttura scheletrica di un sito web. Il wireframe rappresenta l'impaginazione o la disposizione del contenuto del sito Web, inclusi elementi dell'interfaccia e sistemi di navigazione, e come funzionano insieme. link

    
risposta data 20.03.2013 - 17:35
fonte
0

Lo chiamerei definizione dichiarativa . (cioè definisci "cosa" è l'interfaccia utente, non i passaggi di "come" per disegnarlo).

L'interfaccia utente può essere definita come un albero, ma è perché l'interfaccia utente è un albero per sua stessa natura. L'interfaccia utente sarebbe ancora un albero se definita in modo imperativo con i puntatori agli oggetti padre / figlio. Credo che sia importante dichiarativo contro imperativo.

    
risposta data 20.03.2013 - 17:54
fonte

Leggi altre domande sui tag