Linguaggio C# 1. Interfaccia grafica utente 2. Applicazione Windows Form 3. Esempio. Prof. Carlo Favi

Transcript

1 Linguaggio C# 1. Interfaccia grafica utente Esempio Prof. Carlo Favi Bibliografia: Linguaggio C# - Mondadori informatica

2 Interfaccia utente Definizione L'interfaccia grafica utente, nota anche come GUI (dall'inglese Graphical User Interface), comunemente abbreviata in interfaccia grafica o interfaccia utente, è la modalità di rappresentare su video i dati e dalla modalità di acquisizione degli stessi. Ogni programma è logicamente suddiviso in due parti: La parte INTERFACCIA, che svolge la funzione di comunicare con l utente; La parte ELABORAZIONE che svolge la vera e propria elaborazione dei dati.

3 Interfaccia utente Caratteristiche Sono due gli aspetti che caratterizzano l interfaccia di un programma: 1. la gestione del video, cioè la forma con la quale le informazioni vengono visualizzate; A caratteri: l interfaccia può rappresentare solo informazioni testuali: lettere, numeri e caratteri speciali. (Applicazioni Console). Grafico: consente di visualizzare elementi grafici (Applicazioni Windows-Form). 2. il modello di comunicazione con l utente, cioè il modo in cui il programma riceve le azioni e i dati dall utente. Sequenziale: la richiesta e visualizzazione dei dati è rigidamente determinata dalle istruzioni del programma. (Applicazioni Console); Ad eventi: gli oggetti visuali che costituiscono l interfaccia determinano il tipo di azioni che l utente può dirigere verso di essi, ma non il loro ordine di esecuzione (Applicazioni Windows- Form).

4 1. la finestra grafica form associata all applicazione; 2. gli oggetti visuali, definiti controlli, contenuti nella finestra grafica; 3. gli eventi generati dai controlli; 4. i metodi che gestiscono oggetti. Interfaccia utente Struttura interfaccia grafica Alla base di una interfaccia grafica vi sono quattro elementi fondamentali:

5 Interfaccia utente Elementi grafici di una interfaccia Il form (letteralmente forma, immagine, ma in questo caso indica genericamente la finestra di Windows) è l elemento centrale di ogni applicazione; un form, infatti, costituisce la base dell interfaccia utente: è in un form che vengono inseriti tutti gli altri controlli, siano essi pulsanti, caselle di testo, timer, immagini, ecc.

6 Interfaccia utente Progettazione dell interfaccia La realizzazione di applicazioni con interfaccia grafica a finestre, menu, bottoni si concretizza attraverso 4 fasi: creare il controllo; definirne l aspetto, impostando opportunamente le sue proprietà; associare dei metodi agli eventi del controllo che si desidera gestire (i gestori di eventi); aggiungere il controllo all interfaccia. Lo strumento di cui ci avvarremo per la costruzione di una GUI è VISUAL STUDIO sviluppato da Microsoft, che supporta attualmente diversi tipi di linguaggio, quali C, C++, C#, F#, Visual Basic.Net e ASP.Net.

7 Interfaccia utente Visual studio Visual Studio è un ambiente di sviluppo integrato (integrated development environment o IDE ) che aiuta i programmatori nello sviluppo del codice sorgente di un programma. Visual Studio, e in generale tutti gli IDE, consiste di più componenti, da cui appunto il nome integrato: un editor di codice sorgente; un compilatore e/o un interprete; un tool di building automatico; un Debugger. Visual Studio è un IDE rivolto allo sviluppo di software orientato agli oggetti ed è integrato con uno o più strumenti (tools) di Form Designer che permettono di semplificare la costruzione di una GUI.

8 Interfaccia utente Form designer di Visual Studio Lavorare con il Form Designer è semplicissimo, è sufficiente selezionare un componente dalla Casella degli Strumenti, situata nella finestra principale dell IDE e posizionarlo all interno di quella che sarà la nostra form. Il posizionamento può avvenire in vari modi: si può cliccare sul componente nella Component Palette e successivamente cliccare nella form alla posizione in cui lo vogliamo inserire; si può cliccare il componente nella Component Palette quindi trascinarlo nella posizione voluta. Il componente posizionato nel form assumerà una la dimensione standard definita la momento dello sviluppo. E possibile variare le sue dimensioni semplicemente trascinando il suo bordo.

9 Nuovo Progetto Per inserire una selezionare Nuovo Progetto dal menù iniziale di Visual Studio. A questo punto comparirà la finestra di dialogo Nuovo progetto, quindi cliccare Applicazione Windows Form. Inserire il nome dell applicazione e confermare.

10 Creare un Form Visual Studio crea automaticamente il form nella quale creare l interfaccia grafica. Sulla sinistra espone la barra degli strumenti che permette di selezionare i controlli che si vogliono inserire nel Form. Sulla destra è possibile visualizzare la finestra Esplora Soluzioni nella quale vengono visualizzati tutti i files che compongono il progetto e la Finestra Proprietà che permette di definire l aspetto del form.

11 Creare un Form Nel caso che le finestre Esplora Soluzioni, Finestra Proprietà e Casella degli strumenti non siano visibili occorre selezionare, dal menù Visualizza, le rispettive etichette.. Visual Studio permette all utente di comporre la interfaccia grafica dell IDE ancorando le varie finestre in qualsiasi posizione dello schermo, semplicemente trascinandole nel punto desiderato.

12 Ogni programma in C# è strutturato in base ad uno scheletro predefinito. Gli ambienti di sviluppo generano automaticamente, in Program.cs, lo scheletro del programma all atto della creazione. Attiva gli stili visivi per l applicazione Imposta il valore predefinito per l intera applicazione. Attiva l esecuzione dell applicazione e rende visibile il form. Lo scheletro di una applicazione windows using System; using System.Collections.Generic; using System.Linq; using System.Windows.Forms; namespace WindowsFormsApplication1 { static class Program { /// <summary> /// Punto di ingresso principale dell'applicazione. /// </summary> [STAThread] static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); Application.Run(new Form1()); } } }

13 Attraverso il Form Designer, Visual Studio genera automaticamente il codice sorgente, mostrata di lato, che determina la definizione del form. Dichiarazione del controllo form Form.Designer namespace WindowsFormsApplication1 { partial class Form1 { #region Codice generato da Progettazione Windows Form private void InitializeComponent() { this.suspendlayout(); // // Form1 // this.autoscaledimensions = new System.Drawing.SizeF(6F, 13F); this.autoscalemode = System.Windows.Forms.AutoScaleMode.Font; this.clientsize = new System.Drawing.Size(284, 262); this.name = "Form1"; this.text = "Form1"; this.resumelayout(false); } #endregion } }

14 Creare un Form Un form è prima di tutto un oggetto e, come tutti gli oggetti, dispone di proprietà, di metodi e di eventi. La PROPRIETÀ: è un attributo che definisce una determinata caratteristica di un oggetto. L EVENTO: è un azione che viene riconosciuta da un oggetto e alla quale è possibile rispondere mediante un codice scritto appositamente. Il METODO: è un azione eseguibile su un oggetto.

15 Creare un Form La PROPRIETÀ è un attributo che definisce una determinata caratteristica di un oggetto, in questo caso del form. Le proprietà fondamentali del form sono : Name: Indica il nome utilizzato nel codice per identificare l oggetto. BackColor: Colore di sfondo del form. ControlBox: abilita e disabilita i pulsanti di controllo del form; Text: permette di specificare la stringa da visualizzare nella barra del titolo del form. Icon: consente di selezionare l icona che contraddistinguerà il form. Size: determina la dimensione del controllo in pixel. Location: determina le coordinate dell angolo superiore del controllo rispetto all angolo superiore del contenitore.

16 Eventi del form Un evento è un qualsiasi atto proveniente dall'utente o anche dall'esterno; per ogni evento possibile è previsto un gestore dell'evento (event-handler). Nel Form sono previsti i seguenti gestori di eventi: Load: questo evento si verifica quando viene visualizzato un form. È uno degli eventi più utilizzati, dal momento che, di solito, contiene il codice che si vuole venga eseguito quando si carica un form: private void Form1_Load(object sender, EventArgs e) { } Resize: viene generato immediatamente prima che il form diventi visibile ed ogni volta che la finestra viene ridimensionata, sia trascinando i suoi bordi, sia ingrandendola, riducendola ad icona e ripristinandola: private void Form1_Resize(object sender, System.EventArgs e) { } FormClosed: generato prima della chiusura di un form da parte dell utente.

17 Aggiungere codice ad un evento Per aggiungere del codice al gestore d evento LOAD del Form occorre, semplicemente, fare doppio click sul controllo. Viene generato automaticamente il prototipo dell evento Load che costituisce l evento di default del controllo form: private void Form1_Load(object sender, EventArgs e) { }

18 Metodi del form Un metodo è un'azione che può essere richiesta a un oggetto. I metodi principali di un form sono: Show: che permette di rendere visibile un form modale cioè a scelta obbligatoria. Form1.Show() ShowDialog: che permette di rendere visibile un form non modali. Nel caso di form non modali è possibile passare da un form all'altro senza chiudere il form iniziale. Mentre il form rimane visualizzato, l'utente può continuare a lavorare nella stessa o in un'altra applicazione. Form1. ShowDialog()

19 Aggiungere controlli Per aggiungere controlli al form, dalla Casella degli strumenti, (dal menù Visualizza selezionare Casella degli strumenti), selezionare il controllo desiderato e trascinarlo sopra il form. E possibile spostare il controllo trascinandolo nel posto desiderato e/o ridimensionarlo agendo sulle apposite maniglie poste sul bordo dello stesso.

20 Aggiungere controlli Selezionare il controllo desiderato, visualizzare la finestra delle Proprietà (premere il tasto F4 o aprire il Menu rapido e selezionare Proprietà) e digitare il testo associato al controllo nella proprietà Text. Per modificare il nome del controllo selezionare la proprietà Name e digitate il nome desiderato.

21 Controlli I controlli di tipo Label (etichetta) svolgono l analoga funzione del metodo WriteLine(). Un uso tipico delle etichette è quello di qualificare i controlli TextBox, informando così l utente cosa gli si richiede di inserire. I controlli di tipo TextBox (casella di testo) svolgono l analoga funzione del metodo ReadLine() e cioè l acquisizione di stringhe di caratteri. I controlli di tipo Button (bottone) vengono impiegati per dare il via a qualche forma di elaborazione, risultato che viene ottenuto associando un metodo all evento Click. Frequentemente la parte di elaborazione del programma, viene eseguito in risposta al clic dell utente sul bottone.

22 Controlli I controlli RadioButton permettono all'utente di scegliere tra due o più impostazioni ed è consentita l'assegnazione di una sola impostazione. Per aggiungere gruppi separati è necessario inserirli all'interno di pannelli o di caselle di gruppo diversi. Il controllo CheckBox indica se una determinata condizione è attiva o disattiva. Viene usato comunemente per presentare all'utente la selezione di valori Vero/Falso e consentire all'utente la selezione di una o più opzioni. Il controllo ListBox consente all'utente di selezionare uno o più elementi da un elenco già definito.

23 Controlli I controlli Panel sono progettati per facilitare l impostazione dell aspetto e del layout dei form. Essi servono a raggruppare e contenere insiemi di controlli in gruppi identificabili. Il controllo Panel permette di utilizzare le barre di scorrimento che permettono di contenere più controlli rispetto allo spazio effettivamente necessario. Il controllo GroupBox è simile al controllo Panel, con la differenza che il controllo GroupBox non contiene barre di scorrimento ma permette di visualizza una didascalia.

24 Aggiungere controlli Il nome dei vari controlli vengono formulati, per convenzione, antecedendo al nome, che deve indicare in modo appropriato il motivo per il quale quel determinato controllo è stato progettato, uno dei seguenti suffissi: SUFFISSO frm lbl txt btn rdo chk lst pnl grp CONTROLLO form Label textbox button radiobutton CheckBox listbox Pannello groupbox

25 Aggiungere codice ad un evento Per aggiungere del codice ad un gestore d evento (event-handler) occorre, semplicemente, fare doppio click sul controllo: viene generato automaticamente il prototipo dell evento di default del controllo stesso. Es.: private void Form1_Load(object sender, EventArgs e) { } Di seguito vengono indicati gli eventi di default di vari controlli: CONTROLLO EVENTO DI DEFAULT DESCRIZIONE EVENTO form load Caricamento form Label click Click del mouse sul controllo textbox TextChanged modifica il testo di un oggetto button click Click del mouse sul controllo radiobutton CheckedChanged Cambia la proprietà Checked CheckBox CheckedChanged Cambia la proprietà Checked listbox SelectedIndexChanged Viene selezionata una riga Pannello Paint Caricamento del controllo groupbox Enter si entra nell'area del controllo

26 Esempio Equazione di 1 grado Realizzare l interfaccia grafica mostrata di seguito:

27 Esempio Aggiungere codice ad un evento Fare doppio click sul controllo Button : viene generato automaticamente il prototipo dell evento click del controllo private void btncalcolax_click(object sender, EventArgs e) { } Inserire il seguente codice: // acquisisce i coefficienti dai due TextBox double a = Convert.ToDouble(txtA.Text); double b = Convert.ToDouble(txtB.Text); double x; if (a!= 0) { x = -b / a; lblx.text = "La soluzione è: " + x; }

28 Esempio Aggiungere codice ad un evento else // a è uguale a zero { if (b!= 0) lblx.text = "Non esiste nessuna soluzione"; else lblx.text = "Esistono infinite soluzioni"; }

29 Esempio Analisi del funzionamento del programma Il modello di comunicazione impiegato non presuppone una sequenza predefinita di azioni da parte dell utente e di elaborazioni da parte del programma. L utente è infatti libero di: cliccare sul bottone Calcola X, determinando così il calcolo della soluzione, senza aver inserito alcun valore in uno dei due TextBox o in entrambi; inserire prima il valore del coefficiente B e poi quello del coefficiente A, o viceversa; inserire i due valori dei coefficienti, ma non eseguire il calcolo della soluzione, cliccando invece sul pulsante di chiusura del form; calcolare la soluzione di quante equazioni desidera, modificando ogni volta i valori dei due coefficienti e cliccando nuovamente sul bottone Calcola X. La parte elaborazione del programma viene eseguita se e quando l utente clicca sul bottone Calcola x. In un Applicazione Windows, dunque, l elaborazione avviene in risposta alle azioni dell utente, ma queste ultime non sono predeterminate dalla struttura del programma.