Interfacce utente
Interfaccia utente
parte del sistema operativo che
consente all’uomo di interagire con il computer
Fondamenti di Informatica
interfaccia utente è nata come interfaccia di tipo testuale
(DOS e UNIX)
26. Windows Forms
Corso di Laurea in Ingegneria Informatica e dell’Automazione
A.A. 2012-2013
2° Semestre
Prof. Giovanni Pascoschi
Fondamenti di Informatica A.A. 2012-2013
Tipi di interfacce utente
a cura di Pascoschi Giovanni
2
a cura di Pascoschi Giovanni
4
L’evoluzione delle interfacce utente (1)
Interfaccia a caratteri DOS
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)
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
3
Fondamenti di Informatica A.A. 2012-2013
Tipi di interfacce grafiche
Tipi di interfacce grafiche
Cosa distingue una interfaccia grafica dall’altra?
La metafora più utilizzata nei personal computer, oggi,
è quella della “scrivania” (in inglese, desktop)
il tipo di metafora usata;
gli elementi costitutivi che l’utente può manipolare.
Dalla sua introduzione ad oggi sono state introdotte
diverse interfacce alternative, ma nessuna ha avuto
sinora successo
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
5
L’evoluzione delle interfacce utente (2)
a cura di Pascoschi Giovanni
6
a cura di Pascoschi Giovanni
8
L’evoluzione delle interfacce utente (3)
Interfaccia grafica Windows 1.0
Interfaccia grafica Apple
Fondamenti di Informatica A.A. 2012-2013
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
7
Fondamenti di Informatica A.A. 2012-2013
L’evoluzione delle interfacce utente (4)
L’evoluzione delle interfacce utente (5)
Interfaccia grafica Windows 3.0
Fondamenti di Informatica A.A. 2012-2013
Interfaccia grafica Windows 95
a cura di Pascoschi Giovanni
9
L’evoluzione delle interfacce utente (6)
a cura di Pascoschi Giovanni
10
a cura di Pascoschi Giovanni
12
L’evoluzione delle interfacce utente (7)
Interfaccia grafica SUN tridimensionale
Fondamenti di Informatica A.A. 2012-2013
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
Interfaccia grafica Windows VISTA
11
Fondamenti di Informatica A.A. 2012-2013
L’evoluzione delle interfacce utente (8)
L’evoluzione delle interfacce utente (9)
Interfaccia grafica Windows 8
Interfaccia grafica Windows 7
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
13
Programmazione delle interfacce grafiche
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
14
Programmazione delle interfacce grafiche
programmare una GUI (Graphical User Interface) è
molto complesso
Le interfacce attuali, basate sulla metafora della
scrivania, sono di tipo WIMP (Windows, Icons, Menus,
Pointing device)
e’ necessaria molta programmazione a livello grafico
Gli elementi che le compongono vengono detti widget
sono necessari molti elementi grafici (pulsanti, menu’,
icone, ecc)
non è praticabile costruire un’applicazione
partendo completamente da zero
Una “widget” è un elemento che fornisce informazioni
all’utente o gli permette di interagire con il sistema
operativo o con un’applicazione.
GUI
e’ necessario usare una libreria GUI pre-esistente
ogni piattaforma ha una propria libreria GUI
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
15
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
16
Programmazione delle interfacce grafiche
Esempio di widgets in Windows
icona
esempi di widget sono le icone, i menu, i pulsanti, le
finestre, le barre di scorrimento, le caselle di testo, ecc
barra degli
strumenti
icone di
riduzione,
ripristino e
chiusura
radiobox
di solito è il sistema operativo a mettere a disposizione
un insieme di widget.
finestra
pulsante
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
17
Com’è fatta un’interfaccia grafica
a cura di Pascoschi Giovanni
18
Le interfacce grafiche in C++ (1)
• all’epoca di Windows 2.0 era necessario utilizzare una decina di istruzioni
per creare una singola finestra grafica (vuota.....)
• La finestra è anche un contenitore, ossia un elemento grafico che ne
contiene degli altri
• occorreva utilizzare un set di funzioni (API – Application Programming
Interface) basate sul C
• la barra del menu è un altro esempio di contenitore
• la finestra puo’ contenere altri contenitori, come una matrioska o le scatole
cinesi
• gli elementi grafici piu’ complessi sono costituiti dall’unione di elementi
grafici basilari
a cura di Pascoschi Giovanni
• 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)
• i vari elementi che sono presenti nel contenitore vengono chiamati
componenti visuali
Fondamenti di Informatica A.A. 2012-2013
Fondamenti di Informatica A.A. 2012-2013
19
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
20
Le interfacce grafiche in C++ (2)
Le interfacce grafiche in C++ (3)
• Windows Forms è una parte della libreria WPF che si occupa della gestione
delle finestre
• Tramite un’estensione del C++ (chiamato CLI/CLR) è possibile utilizzare il
codice destinato all’ambiente .NET anche con VC++
• 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 CRL 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
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
21
Le interfacce grafiche in C++ (4)
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
22
Le interfacce grafiche in C++ (5)
Esempio di crezione di una finestra dal titolo “finestra”:
Form^ finestra = gcnew Form();
Per creare una etichetta di testo (label):
Label^ etichetta = gcnew Label( );
etichetta->Text=“Testo di prova”;
// gcnew è l’operatore di allocazione .NET
// Form^ è il reference (come un puntatore) ad un oggetto di tipo
managed
una volta creato il componente visuale, bisogna inserirlo in un contenitore
finestra->Controls->Add(etichetta);
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
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
23
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
24
Le interfacce grafiche in C++ (6)
Documentazione MSDN sulle Windows Form
• per reperire maggiori informazioni sulle Windows Forms riferirsi alla
http://msdn.microsoft.com/enMSDN
Library
us/library/dd30h2yb(VS.80).aspx
• 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.
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
25
Esempi di progetti con Windows Form
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
26
Somma di due numeri con Forms (1° step)
Creazione progetto CLR (Common Resources Language) vuoto con nome
somma_numeri
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)
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
27
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
28
Somma di due numeri con Forms (2° step)
Aggiunta elemento
UI
Somma di due numeri con Forms (3° step)
Windows Form con nome finestra1
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
Creazione interfaccia grafica (utilizzando Casella degli Strumenti)
29
Somma di due numeri con Forms
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
30
Somma di due numeri con Forms (3° & 4° step)
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
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
31
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
32
Somma di due numeri con Forms (5° 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( );
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
33
Somma di due numeri con Forms (6° step)
6° step
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
34
a cura di Pascoschi Giovanni
36
Somma di due numeri con Forms (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); // conv. da stringa “managed” a double
tot=num1+num2;
SOMMA->Text=Convert::ToString(tot); // convertire da double a stringa “managed”
}
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
35
Fondamenti di Informatica A.A. 2012-2013
Somma di due numeri con Forms (7° step)
Somma di due numeri con Forms (7° step)
7° step creare 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
}
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
37
Somma di due numeri con Forms (output)
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
38
Prodotto di due numeri complessi con Forms (step 1)
nome progetto primo_CLR
Creazione della finestra display cosi’ come qui evidenziato (reale1,
immaginario1, reale2, immaginario2, reale3, immaginario3)
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
39
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
40
Prodotto di due numeri complessi con Forms (step 2)
Prodotto di due numeri complessi con Forms (step 3)
file display.cpp
gestione dell’evento click sul bottone OK
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
41
Prodotto di due numeri complessi con Forms
a cura di Pascoschi Giovanni
42
Prodotto di due numeri complessi con Forms
alcuni metodi della classe complesso : complessi.cpp
inclusione della dichiarazione della classe complesso : complessi1.h
Fondamenti di Informatica A.A. 2012-2013
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
43
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
44
Prodotto di due numeri complessi con Forms (step 4)
Prodotto di due numeri complessi con Forms (output)
creazione main per partenza Form
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
45
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
46
using namespace System::Runtime::InteropServices;
Inserimento di dati da memorizzare in un file con Forms
Inserimento di dati da memorizzare in un file con Forms (1° step)
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
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
47
creazione Form di nome finestra1 (con textform, label e button)
nomi textbox
IDC_matricola, IDC_cognome, IDC_nome, IDC-stipendio
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
48
Inserimento di dati da memorizzare in un file con Forms (2° step)
Inserimento di dati da memorizzare in un file con Forms (3° step)
creazione GroupBox drag nella Form tasto destro mouse “Porta in
secondo piano”
selezione radiobutton click nell’area del GroupBox
proprietà radiobutton “impiegato” checked = true
proprietà radiobutton “dirigente”
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
selezione Menustrip
click nella finestra1 digitare File digitare nel submenu Esci
49
Inserimento di dati da memorizzare in un file con Forms (4° step)
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
50
Inserimento di dati da memorizzare in un file con Forms (5° step)
aggiungere un’altra Form di nome finestra2
inserire la label “Dati salvati correttamente”
facendo doppio click su Altro dip. e Annulla aggiungere le seguenti
istruzioni
OK
Annulla
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
51
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
52
Inserimento di dati da memorizzare in un file con Forms (6° step)
Inserimento di dati da memorizzare in un file con Forms (6° step)
Nel file finestra1.cpp inserire le istruzioni riportate nelle due slide successive:
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
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
53
Inserimento di dati da memorizzare in un file con Forms (6° step)
#include <iostream>
#include "finestra1.h"
#include "finestra2.h"
#include <fstream>
using namespace std;
using namespace System::Runtime::InteropServices;
struct dip{
int matricola;
char cognome[20];
char nome[20];
float stipendio;
bool dirigente;
};
struct dip dipendente;
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
54
Inserimento di dati da memorizzare in un file con Forms (7° step)
creazione main per partenza Form
void azienda::finestra1::acquisisci_dati() {
fstream fs;
fs.open ("Archivio.dat", ios::in | ios:: out | ios:: binary);
char* str1= (char*) (Marshal::StringToHGlobalAnsi(IDC_cognome->Text)).ToPointer();
char* str2= (char*) (Marshal::StringToHGlobalAnsi(IDC_nome->Text)).ToPointer();
dipendente.matricola = Convert::ToInt16(IDC_matricola->Text);
strcpy(dipendente.cognome,str1);
strcpy(dipendente.nome,str2);
dipendente.stipendio=Convert::ToInt16(IDC_stipendio->Text);
if(this->IDC_dirigente->Checked==true) dipendente.dirigente=true;
if(this->IDC_impiegato->Checked==true) dipendente.dirigente=false;
fs.write((char *)&dipendente, sizeof(dip));
fs.close();
finestra2 altra;
altra.ShowDialog();
}
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
55
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
56
Inserimento di dati da memorizzare in un file con Forms (8° step)
facendo doppio click su Fine e Esci aggiungere le seguenti istruzioni
Inserimento di dati da memorizzare in un file con Forms (output)
Fine
Esci
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
57
Inserimento di dati da memorizzare in un file con Forms (output)
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
58
a cura di Pascoschi Giovanni
60
Riepilogo della lezione
Windows Forms
Gestione delle GUI con C++
Windows Forms
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
59
Fondamenti di Informatica A.A. 2012-2013
Fine della lezione
Domande?
Fondamenti di Informatica A.A. 2012-2013
a cura di Pascoschi Giovanni
61