Padroneggiare la libreria di controlli

Costruire la Console operatore attorno al modello di controllo Wisej.NET. Il tuo codice C sharp modifica gli oggetti lato server e il framework sincronizza i widget del browser. Comprendere questa relazione ti aiuta a scegliere i controlli in base al comportamento anziché trattare lo schermo come una raccolta di frammenti di markup.

Considera un pulsante come un oggetto con proprietà, eventi, ciclo di vita e supporto del tema. La modifica del testo di un'etichetta di stato ne aggiorna lo stato; Wisej.NET trasferisce la modifica rilevante al widget. Lavori con il contratto di controllo invece di ricostruire manualmente l'elemento visualizzato.

Iniziare la selezione con la famiglia di controllo. Gli editor raccolgono valori, i contenitori organizzano le regioni, i controlli dei dati presentano le raccolte e i controlli del feedback spiegano i risultati. Gli extender e le integrazioni aggiungono funzionalità. L'identificazione della famiglia restringe la ricerca prima di confrontare le singole proprietà di controllo.

Chiedere cosa deve fare l'utente con i dati. Una gerarchia suggerisce TreeView, i record suggeriscono DataGridView e le regioni dell'interfaccia riutilizzabili suggeriscono UserControl. Ottieni un widget personalizzato solo dopo aver verificato se un controllo esistente si adatta già all'interazione richiesta.

Annotare le convenzioni prima di aggiungere altre schermate. I nomi dei ruoli aziendali, l'aggancio e l'ancoraggio deliberati, l'ordine della tastiera, il feedback e i tasti di aspetto devono essere coerenti tra i moduli. Una guida alla selezione rende queste scelte spiegabili quando un altro sviluppatore estende la console.

Rinominare controlli e gestori in base ai rispettivi ruoli in modo che un lettore possa collegare il codice allo schermo. Sostituisci le posizioni assolute con aree di navigazione, comando, stato e contenuto. L'ancoraggio esprime il modo in cui queste aree condividono lo spazio quando la finestra cambia dimensione.

Centralizza la navigazione in modo che ogni pagina segua la stessa transizione. Cancella l'area del contenuto, inserisci la nuova pagina per riempirla e aggiorna lo stato. Se l'apertura non riesce, spiegare il problema invece di lasciare che l'utente guardi un'area vuota inspiegabile.

Utilizza le sei pagine segnaposto per testare la shell prima di svilupparne le funzionalità complete. Ogni pulsante di navigazione dovrebbe cambiare sia il contenuto che lo stato. Ciò stabilisce un percorso affidabile per il cambio di pagina che gli editor, le schermate dati, il dashboard e la schermata widget successivi possono riutilizzare.

Fornisci la shell a quattro regioni e sei segnaposto navigabili con nomi di controllo significativi. Nella guida alla selezione, spiegare la famiglia utilizzata per ciascuna regione e il suo ruolo. L'obiettivo è una base che un altro sviluppatore può estendere senza indovinare come funziona la navigazione o il layout.

Crea CustomerEditor per aiutare gli utenti a inserire valori non ambigui e a recuperare dagli errori. La scelta degli editor adatti è solo il primo passo. La convalida, lo stato del comando e il feedback chiaro insieme determinano se il modulo è affidabile durante un salvataggio effettivo.

Un campo di testo normale accetta rappresentazioni il cui significato potrebbe non essere chiaro, in particolare date, importi e valori di stato. Utilizza l'interfaccia per prevenire errori evidenti e spiegare quelli rimanenti, mantenendo dietro di sé le regole del servizio e dei dati come protezione aggiuntiva.

Abbina il controllo di input al significato del valore. Utilizza il testo per nomi ed e-mail, un selettore di data per la data di inizio e un editor numerico per il credito. Negli elenchi di stato e tipo, visualizza testo descrittivo durante la memorizzazione della chiave stabile.

Scegli il feedback in base a ciò che l'utente deve fare dopo. ErrorProvider indica correzioni, suggerimenti offrono indicazioni e una finestra di messaggio richiede una decisione di blocco. Un avviso o un avviso segnala l'avanzamento del flusso di lavoro senza richiedere un riconoscimento non necessario.

Crea la convalida verso l'esterno dall'editor: configura le sue proprietà, analizza i valori digitati, controlla i campi, quindi controlla il modulo e il servizio durante il salvataggio. In caso di fallimento, mantieni la correzione visibile e focalizzata. In caso di successo, conferma il completamento senza interrompere l'attività successiva dell'utente.

Lascia che ogni validatore nominato sia proprietario del messaggio del suo campo. ValidateContent li chiama tutti, focalizza il primo input non valido e restituisce un risultato comprensibile dalla shell. Ciò separa la decisione di convalida dalla scelta del chiamante sull'opportunità di continuare il flusso di lavoro.

Mantieni il salvataggio leggibile come convalida, persistenza, aggiornamento dello stato e notifica. Utilizzare finally per rilasciare lo stato occupato anche quando la persistenza fallisce. Una chiara frase di fallimento e un brindisi di successo non bloccante consentono all'utente di comprendere il risultato senza interpretare le eccezioni.

Convalidare l'e-mail non valida e quindi correggerla per verificare che il feedback venga cancellato tempestivamente. Durante il salvataggio, tutti e tre i comandi diventano non disponibili, evitando azioni in conflitto. Il brindisi finale conferma il completamento lasciando l'utente libero di continuare senza premere un altro pulsante.

Fornisci CustomerEditor come controllo riutilizzabile con input di valore appropriato e validatori denominati. Salva, Reimposta e Convalida dovrebbero rispettare lo stato occupato e il completamento dovrebbe produrre un avviso o un avviso. Testare le correzioni e il ripristino dopo un errore con la stessa attenzione del salvataggio riuscito.

Sostituisci i segnaposto della console con contenitori che esprimono come è organizzata l'interfaccia. SplitContainer, TabControl, ToolBar e StatusBar hanno lavori distinti. La loro combinazione fornisce alla navigazione, ai comandi e al contenuto un layout in grado di rispondere alle modifiche delle dimensioni della finestra.

Le coordinate fisse descrivono solo una dimensione della finestra. Le regioni ancorate rivendicano invece i bordi e lasciano lo spazio rimanente al contenuto. Quando il ridimensionamento espone la sovrapposizione, rivedi le relazioni di layout anziché aggiungere un'altra serie di correzioni pixel a un gestore di ridimensionamento.

Controlla l'ordine figlio quando si agganciano le barre e la regione divisa principale. Le barre superiore e inferiore devono riservare il loro spazio prima che la regione di riempimento utilizzi il resto. Ancorare i controlli all'interno di quelle regioni in base a come dovrebbero rispondere i rispettivi bordi.

Utilizzare SplitContainer quando l'utente deve controllare la divisione, le schede per le sezioni peer e le barre per i comandi e lo stato. Indirizza menu, barre degli strumenti, barre multifunzione e menu contestuali attraverso un modello di comando in modo che diversi punti di ingresso eseguano la stessa azione in modo coerente.

Inizia con il layout del desktop, quindi assegna valori specifici del profilo solo alle proprietà che devono essere modificate. I layout di telefono e tablet possono riutilizzare gli stessi controlli. Crea una schermata separata solo quando il flusso di lavoro effettivo è diverso, non semplicemente perché la finestra è più stretta.

Il docking della shell ne definisce la struttura; ApplyNarrowProfile modifica la presentazione della navigazione e lo stato. Refresh delega l’operazione al comando condiviso, invece di duplicarne il comportamento nel gestore della barra degli strumenti. In questo modo le scelte di layout restano separate dall’operazione eseguita dal comando.

Estrai l'intestazione del record ripetuto in un UserControl con titolo, conteggio dei record e un evento di aggiornamento. Mantieni privati ​​i controlli secondari. I chiamanti dipendono quindi da ciò che fa l'intestazione, quindi una successiva modifica del layout interno non richiede la modifica di ogni schermata che la utilizza.

Restringi il browser e guarda la stessa presentazione cambiare pagina. La navigazione si chiude, viene visualizzato il pulsante del menu e lo stato segnala il profilo ristretto. Ciò dimostra il riutilizzo di un albero di controllo anziché il passaggio a uno schermo mobile gestito separatamente.

Ricostruisci la shell con i contenitori scelti, estrai le regioni ripetute e aggiungi il profilo stretto. Documenta il motivo per cui l'ordine di ancoraggio funziona e acquisisci entrambe le larghezze. La consegna dovrebbe spiegare le relazioni di layout e mostrare che le due presentazioni rimangono utilizzabili.

Costruisci l'esploratore documenti con una gerarchia, un elenco di documenti e un'area dettagli riutilizzabile. La Console operatore dovrebbe caricare solo le informazioni necessarie all'interazione corrente. Il caricamento lento dell'albero e gli elementi dell'elenco virtuale rendono visibile tale divisione nella progettazione del controllo.

Scegli il controllo dalla forma delle informazioni e dal modo in cui gli utenti le navigano. Una scelta piatta, una gerarchia, una raccolta di carte e un'ispezione della proprietà sono compiti diversi. Trattarli tutti come elenchi di selezione generici rende la mappa dell’utente più difficile da comprendere.

Utilizza ComboBox per scelte compatte, TreeView per la gerarchia e ListView quando la presentazione degli articoli è importante. DataRepeater e PropertyGrid servono carte e ispezioni. Pianificare in anticipo identificatori stabili e caricamento posticipato, in modo che la crescita non imponga una riprogettazione del modo in cui la selezione raggiunge i dati.

La modalità virtuale dichiara la dimensione totale dell'elenco senza costruire in anticipo ogni elemento di controllo visibile. RetrieveVirtualItem crea l'elemento richiesto dai dati lato server quando necessario, assegnandone insieme l'identificatore e l'immagine. Questo separa il numero di record esistenti dal numero di elementi che devono essere creati ora.

Carica solo il primo livello dell'albero, utilizzando un segnaposto figlio per indicare che un nodo può espandersi. AfterExpand sostituisce quel segnaposto con i figli recuperati dalla chiave stabile in Tag. Il testo visualizzato può quindi cambiare senza modificare l'identità utilizzata dal servizio.

Traccia l'identificatore selezionato dall'albero o dall'elenco nella chiamata di servizio. BuildTree e l'espansione preservano le chiavi stabili; La selezione carica il modello con la gestione degli errori e lo passa al controllo dettaglio. Nessuna ricerca di servizi dovrebbe dipendere dal testo di un'etichetta visualizzata.

Lascia che la selezione generi un evento, lascia che la pagina recuperi i dati e lascia che il controllo dei dettagli visualizzi il modello restituito. Ciò mantiene la regione dei dettagli indipendente sia dall'albero che dall'accesso al database. Lo stesso controllo di dettaglio può quindi essere utilizzato da un'altra superficie di navigazione.

Espandi il nodo cliente e osserva che vengono caricati solo i suoi figli. La categoria selezionata riporta centinaia di documenti creando solo le voci di elenco richieste. La selezione di un documento ne carica il dettaglio tramite il servizio; utilizzare questi limiti per ragionare su una quantità di dati dieci volte superiore.

Fornisci all'esploratore identificatori di nodo stabili, chiavi immagine appropriate e un elenco che utilizza il caricamento virtuale o differito. Recupera i dettagli tramite un servizio e passa il modello nel suo UserControl. Spiegare in che modo la strategia di caricamento di ciascun controllo supporta la forma dei relativi dati.

Costruisci la griglia degli Ordini in più fasi in modo che ogni tecnica risolva un'esigenza particolare. L'associazione stabilisce da dove provengono i valori, la formattazione li spiega e la modalità virtuale controlla il caricamento di dati di grandi dimensioni. La giusta combinazione consente di continuare a utilizzare Operations Console man mano che il volume degli ordini aumenta.

Valuta una griglia attraverso il lavoro effettivo dell'utente: caricamento, scorrimento, modifica e stato di interpretazione. La stessa tecnica potrebbe non adattarsi a un piccolo elenco modificabile e a un'enorme cronologia degli ordini. La dimensione dei dati e l'attività dovrebbero determinare la progettazione prima che venga aggiunto il miglioramento visivo.

Separare la popolazione dei dati dalla generazione delle colonne. Una griglia può ricevere righe direttamente o utilizzare un'origine di associazione, indipendentemente dal fatto che le colonne vengano generate automaticamente. Per la schermata di produzione, associare il modello di visualizzazione tramite BindingSource e definire esplicitamente le colonne per controllarne il comportamento.

Definisci la colonna di stato anziché fare affidamento sulla generazione automatica. CellFormatting converte il suo valore in un badge di stato codificato, rendendo il display più facile da leggere. Mantieni la convalida fuori da questo passaggio della presentazione: un badge cambia aspetto, non se il valore sottostante è accettabile.

Scegli la presentazione di cella più leggera che supporti l'attività. Gli stili e il markup formattato costano meno dell'incorporamento di controlli o della verniciatura personalizzata. Un pulsante per ogni riga moltiplica il conteggio dei controlli, quindi riserva l'interazione incorporata alla riga che ne ha effettivamente bisogno.

Per set di dati di grandi dimensioni, dichiara il conteggio delle righe e fornisci i valori richiesti tramite la modalità virtuale. OrderCache recupera una pagina quando mancano i dati, anziché interrogare una cella alla volta. Applicare prima il filtro in modo che le righe virtuali rappresentino il set di risultati richiesto.

Confronta il conteggio completo degli ordini con il numero ridotto di righe trasferite per l'area visibile. Saltare molto in basso nella griglia richiede un'altra pagina, mentre i badge e le regioni di filtro e stato rimangono disponibili. L'utente può navigare in un risultato di grandi dimensioni senza costruire in anticipo l'interfaccia di ogni riga.

Assegna l'editor del calendario alla colonna della data di scadenza e controlla entrambe le direzioni del trasferimento del valore. Se l'editor non scambia il valore automaticamente, coordinalo negli eventi di inizio modifica e di fine modifica. Un editor personalizzato è completo solo quando il valore scelto ritorna correttamente.

Fornisci colonne associate esplicite, una cella di stato formattata e un editor significativo o una colonna di comando. Aggiungere la cache virtuale e le aree di filtro e stato composte. Verifica sia la modifica ordinaria che la navigazione su righe distanti in modo che l'interazione della griglia e le strategie di caricamento funzionino insieme.

Costruisci la dashboard in base alle decisioni che i suoi dati dovrebbero supportare. Grafici, indicatore di completamento, anteprima del documento e caricamento possono condividere una schermata, ma necessitano di un aggiornamento coordinato. La Console operatore dovrebbe mostrare un'istantanea coerente invece di aggiornamenti visivi non correlati.

Inizia affermando la domanda a cui ciascuna regione risponde. Un'immagine può essere attraente e tuttavia non fornire un utile supporto decisionale. Rimuovere tale ambiguità prima di selezionare un grafico impedisce alla dashboard di diventare una raccolta di elementi grafici di cui l'utente deve indovinare lo scopo.

Abbina la visualizzazione alle informazioni: i modelli necessitano di grafici, i singoli record necessitano di una griglia, un valore di completamento necessita di un indicatore e la posizione necessita di una mappa. Queste scelte rendono i dati più facili da interpretare perché il controllo serve alla domanda piuttosto che decorare lo schermo.

Aggiungi ChartJS tramite il suo pacchetto e mantieni le sue opzioni, etichette e set di dati sotto la proprietà del server. Il browser esegue il rendering. Converti il ​​modello di visualizzazione del dashboard in dati del grafico in un unico posto in modo che la configurazione del grafico non si diffonda tra gestori eventi non correlati.

DashboardModel fornisce mesi aggregati, conteggi e dati di completamento. RefreshDashboard assegna insieme etichette e set di dati, quindi aggiorna l'indicatore, l'anteprima del documento e l'ora. L'utilizzo di un modello mantiene i valori visualizzati correlati allo stesso aggiornamento invece di mescolare risultati separati.

Rispetta i limiti del browser quando aggiungi anteprime, caricamenti e mappe. Il caricamento invia byte scelti esplicitamente dall'utente; non fornisce al server l'accesso per esplorare il disco del dispositivo. Pulisci il markup incorporato prima della visualizzazione in modo che la gestione dei contenuti rimanga una parte intenzionale del progetto.

Aggiorna la dashboard in un'unica operazione: richiedi i dati aggregati una volta e aggiorna insieme i controlli. Mostra il caricamento durante l'esecuzione e un timestamp visibile in seguito. Il timestamp aiuta gli utenti a giudicare l'aggiornamento, mentre l'aggregazione evita il trasferimento di record grezzi di cui i grafici non hanno bisogno.

L'aggiornamento dell'orologio non è più disponibile mentre il grafico, l'indicatore, l'anteprima e il timestamp cambiano contemporaneamente. L'indicatore di completamento raggiunge il settantotto percento. Carica quindi il documento selezionato e osserva l'anteprima seguirlo, confermando che il server ha ricevuto il file scelto tramite il browser.

Fornisci una dashboard il cui grafico e la visualizzazione dell'avanzamento provengono dallo stesso modello di visualizzazione. Aggiungi l'anteprima del documento o del markup e carica, con un metodo RefreshDashboard che aggiorna l'intera schermata. Spiegare a quale domanda risponde ciascuna regione e verificare che l'aggiornamento rimanga coordinato.

Aggiungere la funzionalità di valutazione a stelle solo dopo aver verificato che la libreria nativa non fornisce il controllo necessario. La chiave di volta racchiude un widget del browser preservando la proprietà, gli eventi e i temi Wisej.NET. Ciò rende l’integrazione parte del modello di controllo dell’applicazione piuttosto che uno script isolato.

Preferisci un controllo esistente quando fornisce già la finestra di progettazione, lo stato del server, gli eventi e il comportamento del tema di cui hai bisogno. L'integrazione personalizzata è giustificata dalla mancanza di funzionalità del browser o di funzionalità della libreria. Fermarsi al livello più semplice che soddisfa il requisito invece di ricostruire il supporto già disponibile.

Name l'estensione secondo la propria responsabilità prima di sceglierne l'implementazione. Un widget, un componente, un extender, un pacchetto di icone e un'area dell'interfaccia riutilizzabile non sono intercambiabili. Questa distinzione impedisce di creare un controllo personalizzato completo quando sarebbe sufficiente un limite di integrazione più piccolo.

Carica lo script e il foglio di stile tramite Packages, quindi inizializza l'oggetto browser con InitScript. Il widget invia modifiche significative tramite fireWidgetEvent e il server riceve WidgetEvent. Le chiamate nella direzione opposta consentono al server di confermare lo stato all'implementazione del browser.

Il wrapper convalida sia il tipo di evento che il relativo payload prima di richiamare RatingService. Nel callback del browser, mantieni il riferimento corretto al widget in modo che l'evento ritorni attraverso l'istanza prevista. Questi controlli proteggono il confine tra l'interazione del browser e il lavoro attendibile sul lato server.

Documenta il pacchetto, la proprietà, l'evento, il payload e il contratto di chiamata al server accanto al codice. Quando il widget non funziona, controlla l'ordine delle risorse, i percorsi, i tempi di inizializzazione e la ricreazione dopo l'aggiornamento negli strumenti del browser. Un contratto scritto fornisce ad ogni domanda diagnostica una chiara risposta prevista.

Click una valutazione e segui lo scambio completo. Il server controlla l'intervallo da uno a cinque, salva e conferma il completamento; il browser mostra quindi lo stato salvato. La striscia diagnostica identifica il controllo, il record, il profilo e l'aggiornamento correnti, rendendo più semplice tracciare lo scambio.

Perfeziona l'integrazione attraverso aspetti di temi o stili pacchettizzati, quindi verifica il comportamento reattivo e le etichette accessibili. Evita di incorporare decisioni visive in JavaScript che dovrebbero appartenere al tema. La console finale e la sua guida dovrebbero spiegare perché ogni scelta di controllo serve allo scopo dello schermo.

Invia il widget funzionante con i relativi pacchetti, percorso eventi bidirezionale e contratto documentato come parte della Console operatore completa. Includere lo script dimostrativo e le note chiave di volta. La revisione dovrebbe mostrare sia il risultato rivolto all'utente sia il ragionamento alla base del confine di integrazione scelto.