Fondamenti di Informatica II 27. Laboratorio 8 Windows Forms

Transcript

1 Interfacce utente Interfaccia utente parte del sistema operativo che consente all uomo di interagire con il computer Fondamenti di Informatica II 27. Laboratorio 8 Windows Forms interfaccia utente è nata come interfaccia di tipo testuale (DOS e UNIX) Corso di Laurea in Ingegneria Informatica A.A Semestre Corso (A-M) Prof. Giovanni Pascoschi 2 Tipi di interfacce utente L evoluzione delle interfacce utente (1) Due sono i tipi di interfaccia più diffusi per interagire con un computer: Interfacce a caratteri, anche dette a riga di comando (CLI, command line interfaces) Interfacce grafiche (GUI, graphical user interfaces), in particolare di tipo WIMP (Windows, Icons, Menus, Pointing device) Interfaccia a caratteri DOS 3 4

2 Tipi di interfacce grafiche Tipi di interfacce grafiche Cosa distingue una interfaccia grafica dall altra? il tipo di metafora usata; gli elementi costitutivi che l utente può manipolare. La metafora più utilizzata nei personal computer, oggi, è quella della scrivania (in inglese, desktop) Dalla sua introduzione ad oggi sono state introdotte diverse interfacce alternative, ma nessuna ha avuto sinora successo 5 6 L evoluzione delle interfacce utente (2) L evoluzione delle interfacce utente (3) Interfaccia grafica Apple Interfaccia grafica Windows

3 L evoluzione delle interfacce utente (4) L evoluzione delle interfacce utente (5) Interfaccia grafica Windows 3.0 Interfaccia grafica Windows L evoluzione delle interfacce utente (6) L evoluzione delle interfacce utente (7) Interfaccia grafica SUN tridimensionale Interfaccia grafica Windows VISTA 11 12

4 L evoluzione delle interfacce utente (8) Programmazione delle interfacce grafiche Interfaccia grafica Windows 7 programmare una GUI (Graphical User Interface) è molto complesso e necessaria molta programmazione a livello grafico sono necessari molti elementi grafici (pulsanti, menu, icone, ecc) non è praticabile costruire un applicazione GUI partendo completamente da zero e necessario usare una libreria GUI pre-esistente ogni piattaforma ha una propria libreria GUI Programmazione delle interfacce grafiche Programmazione delle interfacce grafiche Le interfacce attuali, basate sulla metafora della scrivania, sono di tipo WIMP (Windows, Icons, Menus, Pointing device) esempi di widget sono le icone, i menu, i pulsanti, le finestre, le barre di scorrimento, le caselle di testo, ecc Gli elementi che le compongono vengono detti widget Una widget è un elemento che fornisce informazioni all utente o gli permette di interagire con il sistema operativo o con un applicazione. di solito è il sistema operativo a mettere a disposizione un insieme di widget

5 Esempio di widgets in Windows Com è fatta un interfaccia grafica icona barra degli strumenti radiobox icone di riduzione, ripristino e chiusura La finestra è anche un contenitore, ossia un elemento grafico che ne contiene degli altri la barra del menu è un altro esempio di contenitore la finestra puo contenere altri contenitori, come una matrioska o le scatole cinesi finestra gli elementi grafici piu complessi sono costituiti dall unione di elementi grafici basilari i vari elementi che sono presenti nel contenitore vengono chiamati componenti visuali pulsante Le interfacce grafiche in C++ (1) Le interfacce grafiche in C++ (2) all epoca di Windows 2.0 era necessario utilizzare una decina di istruzioni per creare una singola finestra grafica (vuota...) occorreva utilizzare un set di funzioni (API Application Programming Interface) basate sul C Windows Forms è una parte della libreria WPF che si occupa della gestione delle finestre Tramite un estensione del C++ (chiamato CLI/CRL) è possibile utilizzare il codice destinato all ambiente.net anche con VC++ furono poi introdotte le MFC - Microsoft Foundation Class che costituivano una libreria di 200 classi con un modello ad oggetti stile C++ per le API di Win32 (Windows 95) l ambiente.net (introdotto con Windows Vista) ha creato la WPF - Windows Presentation Foundation accessibile interamente in.net (anche Windows XP SP1 ha nativamente il framework.net) 19 20

6 Le interfacce grafiche in C++ (3) Le interfacce grafiche in C++ (4) La differenza principale tra C++ e.net è la gestione completamente automatica dell allocazione e deallocazione della memoria impiegata per contenere le istanze degli oggetti Il CLR mantiene un Heap separato da quello tradizionale chiamato Managed Heap differenza tra variabili managed e unmanaged Tutti i controlli Windows Forms sono contenuti nel namespace System::Windows::Forms Esempio di crezione di una finestra dal titolo finestra : Form^ finestra = gcnew Form(); // gcnew è l operatore di allocazione.net // Form^ è il reference (come un puntatore) ad un oggetto di tipo managed la finestra cosi creata ha una serie di attributi e metodi esempio : finestra->text = Prova ; finestra->width = 300; //larghezza in pixel finestra->height = 200; //altezza in pixel Le interfacce grafiche in C++ (5) Le interfacce grafiche in C++ (6) Per creare una etichetta di testo (label): Label^ etichetta = gcnew Label( ); etichetta->text= Testo di prova ; una volta creato il componente visuale, bisogna inserirlo in un contenitore finestra->controls->add(etichetta); Un evento è una qualsiasi interazione dell utente con l interfaccia utente per esempio premere il pulsante OK in una finestra, la selezione di un radiobox, ecc. per gestire un qualsiasi evento bisogna utilizzare un gestore di evento (blocco di codice) che permette di catturare l evento eseguendo la relativa azione

7 Documentazione MSDN sulle Windows Form Esempi di progetti con Windows Form per reperire maggiori informazioni sulle Windows Forms riferirsi alla MSDN Library 1. Programma di somma di due numeri (progetto somma_numeri) 2. Programma di somma di due numeri complessi (progetto primo_clr) 3. Programma di immissione dati da memorizzare in un file (progetto azienda) Somma di due numeri con Forms (1 step) Somma di due numeri con Forms (2 step) Creazione progetto CLR (Common Resources Language) vuoto con nome somma_numeri Aggiunta elemento UI Windows Form con nome finestra

8 Somma di due numeri con Forms (3 step) Somma di due numeri con Forms Creazione interfaccia grafica (utilizzando Casella degli Strumenti) 3 step creazione finestra (form) con gli oggetti grafici, utilizzando il menu degli strumenti sulla destra creazione di tre TextBox, tre Label e un button di comando 4 step agendo sulle proprietà associazione dei nomi (Name) alle Textform : PRIMO, SECONDO, SOMMA; associazione alle tre label dei testi (Text) : primo numero, secondo numero, somma; associazione al bottone di comando del testo (Text) : OK Somma di due numeri con Forms (3 & 4 step) Somma di due numeri con Forms (5 step) 5 step doppio click sul bottone di comando inserimento nel corpo del metodo button1_click delle seguenti istruzioni: acquisisci_dati( ); // funzione per acquisire i dati PRIMO->Clear( ); // metodo per ripulire la Textform SECONDO->Clear( ); // metodo per ripulire la Textform e inserimento del prototipo della funzione nella sezione public: void acquisisci_dati( ); 31 32

9 Somma di due numeri con Forms (5 step) Somma di due numeri con Forms (6 step) 6 step selezionare il file finestra1.cpp e aggiungere le seguenti istruzioni #include finestra1.h" #include <iostream> using namespace std; using namespace System::Runtime::InteropServices; // per gestire le conversioni di formato void somma_numeri::finestra1::acquisisci_dati( ) { double num1, num2, tot; num1 = Convert::ToDouble(PRIMO->Text); // convertire da stringa managed a double num2 = Convert::ToDouble(SECONDO->Text); // convertire da stringa managed a double tot=num1+num2; SOMMA->Text=Convert::ToString(tot); // convertire da double a stringa managed } Somma di due numeri con Forms (6 step) Somma di due numeri con Forms (7 step) 7 stepcreare il file main.cpp e aggiungere le seguenti istruzioni #include <iostream> #include <string> #include finestra1.h" using namespace std; int main( ){ somma_numeri::finestra1 Inizia; /*crea istanza Inizia della classe finestra1 del namespace somma_numeri*/ Inizia.ShowDialog(); // richiama il metodo ShowDialog } 35 36

10 Somma di due numeri con Forms (7 step) Somma di due numeri con Forms (output) Prodotto di due numeri complessi con Forms (step 1) Prodotto di due numeri complessi con Forms (step 2) nome progetto primo_clr Creazione della finestra display cosi come qui evidenziato (reale1, immaginario1, reale2, immaginario2, reale3, immaginario3) gestione dell evento click sul bottone OK 39 40

11 Prodotto di due numeri complessi con Forms (step 3) Prodotto di due numeri complessi con Forms file display.cpp inclusione della dichiarazione della classe complesso : complessi1.h Prodotto di due numeri complessi con Forms Prodotto di due numeri complessi con Forms (step 4) alcuni metodi della classe complesso : complessi1.cpp creazione main per partenza Form 43 44

12 Prodotto di due numeri complessi con Forms (output) Inserimento di dati da memorizzare in un file con Forms inserimento dipendenti in un archivio aziendale 1 Label, 4 Textbox + 1 radiobutton + 3 buttons (inserimento altro dipendente, annulla dati, fine programma) + Menu File con exit Inserimento di dati da memorizzare in un file con Forms (1 step) Inserimento di dati da memorizzare in un file con Forms (2 step) creazione Form di nome finestra1 (con textform, label e button) nomi textbox IDC_matricola, IDC_cognome, IDC_nome, IDC-stipendio creazione GroupBox drag nella Formtasto destro mouse Porta in secondo piano selezione radiobutton click nell area del GroupBox proprietà radiobutton impiegato checked = true proprietà radiobutton dirigente 47 48

13 Inserimento di dati da memorizzare in un file con Forms (3 step) Inserimento di dati da memorizzare in un file con Forms (4 step) selezione Menustrip click nella finestra1digitare Filedigitare nel submenu Esci aggiungere un altra Form di nome finestra2 inserire la label Dati salvati correttamente Inserimento di dati da memorizzare in un file con Forms (5 step) Inserimento di dati da memorizzare in un file con Forms (6 step) facendo doppio click su Altro dip. e Annullaaggiungere le seguenti istruzioni Nel file finestra1.cpp inserire le istruzioni riportate nell immagine occorre convertire le stringhe managed in stringhe unmanaged tramite il casting con la funzione di conversione StringToHGlobalAnsi IDC_impiegato->Checked controlla se è stato selezionato il radiobutton al termine viene richiamata l istanza della Form finestra2 e viene eseguito il metodo ShowDialog OK Annulla 51 52

14 Inserimento di dati da memorizzare in un file con Forms (7 step) Inserimento di dati da memorizzare in un file con Forms (8 step) creazione main per partenza Form facendo doppio click su Fine e Esciaggiungere le seguenti istruzioni Fine Esci Inserimento di dati da memorizzare in un file con Forms (output) Inserimento di dati da memorizzare in un file con Forms (output) 55 56

15 Esercizio n.1 Esercizio n.2 Implementare tramite Windows Forms la seguente applicazione che permette di usare una calcolatrice tascabile Implementare l esercizio sui file C++ relativo alla segreteria di una scuola (accesso diretto) inserendo i dati nel file tramite una Windows Form, lasciando inalterate le altre funzionalità richieste Analisi degli esercizi risolti dagli studenti Analisi degli esercizi risolti dagli studenti pila con vector pila con list 59