Instrumente pentru Modelare -...

47
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare Instrumente pentru Modelare Instrumente pentru Modelare Ciprian Dobre Ciprian Dobre [email protected] Instrumente pentru dezvoltarea programelor – Curs 4 1

Transcript of Instrumente pentru Modelare -...

Page 1: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Instrumente pentru ModelareInstrumente pentru Modelare

Ciprian DobreCiprian [email protected]

Instrumente pentru dezvoltarea programelor – Curs 4 1

Page 2: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

All models are wrong;some models are usefulsome models are useful

(George Box)

2Instrumente pentru dezvoltarea programelor – Curs 4

Page 3: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

CeCeCe Ce înseamnă înseamnă

d l ?d l ?modelarea?modelarea?

Instrumente pentru dezvoltarea programelor – Curs 4

Page 4: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

De ce modelDe ce modelăm?ăm?e ce odee ce ode ăă• Aplicaţiile software pot fi complexe; cum le putem

gestiona eficient?gestiona eficient?Posibilă soluţie: folosim o bună reprezentare a sistemului

• Model: reprezintă anumite proprietăţi ale unui obiect într-un anumit context

Reducerea complexităţii prin ascunderea detaliilor ce nu sunt– Reducerea complexităţii prin ascunderea detaliilor ce nu sunt necesare (abstractizare)

– Anumite proprietăţi ale sistemului pot deveni mai vizibile (claritate)– Facilitează aplicarea unei metodologii– În general; modelele oferă o mai bună utilizabilitate

• De obicei se folosesc mai multe modele în paralel; modele diferite pentru diverse scopuri

4Instrumente pentru dezvoltarea programelor – Curs 4

Page 5: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

ModeleModeleode eode e• Modele de date

Tipuri de date şi relaţiile între p ş ţacesteaE.g. Diagrame ER, diagrame de clase

• Modele arhitecturaleModele arhitecturaleComponente ale unui sistem şi relaţiile între acestea

• Modele pentru interfeţe utilizatorutilizatorStructura UI(navigare, interacţiune, …)E g formcharts diagrame

5

5E.g. formcharts, diagrame ecran

Instrumente pentru dezvoltarea programelor – Curs 4

Page 6: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Mai multe modeleMai multe modelea u te ode ea u te ode e• Modele stare tranziţie

Stări ale sistemului şi tranziţiiStări ale sistemului şi tranziţii între acesteaE.g. Maşini cu stare pentru modelarea jocurilormodelarea jocurilor

• Modele ale codului sursăStructura codului programuluiE.g. Arbori de sintaxă abstracţi (AST)(AST)

Grafuri de apeluri, grafuri de dependinţe diagrame dedependinţe, diagrame de fluxuri de date & multe altele… …

6

Instrumente pentru dezvoltarea programelor – Curs 4

Page 7: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Modelare orientatModelare orientată obiectă obiect

• Punct de pornire: descrierea informală a

ode a e o e tatode a e o e tată ob ectă ob ect

cerinţelor• Analiza OO:

– Modelează invarianţi specifici domeniului unui sistem– Părţi stabile ce descriu concepte stabilePărţi stabile ce descriu concepte stabile– Ex: într-o universitate sunt întotdeauna studenţi,

cursuri, profesori…, p• Proiectarea OO:

– Rafinează modelul de analiză cu părţi dependente deRafinează modelul de analiză cu părţi dependente de implementare

– Ex: persistenţă, distribuţie, folosirea anumitor pe s ste ţă, d st buţ e, o os ea a u totehnologii sau componente

7Instrumente pentru dezvoltarea programelor – Curs 4

Page 8: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Data ModelingData Modeling

8Instrumente pentru dezvoltarea programelor – Curs 4

Page 9: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Modelarea datelorModelarea datelorode a ea date oode a ea date o• Presupune crearea unui model al entităţilor unui sistem pornind de la

cerinţele utilizatorţ• Adesea cel mai important pas în construcţia software

Modelul de analizăC t l t l î ţ l d ăt tili t i• Conceptele aşa cum sunt ele înţelese de către utilizatori– Cu ce concepte lucrează sistemul? → clase, atribute, asocieri– Ce ar trebui să facă sistemul? → operaţii

F ilit ă i li t l & ifi ifi ţi i• Facilitează comunicarea cu clientul & verificarea specificaţiei• Nu există detalii de implementare• Evoluează cu timpul (prea multe detalii prea devreme produc

l it t )neclaritate)

Modelul de proiectare• Extinde/adaptează modelul de analiză a î să devină mai clar cum vaExtinde/adaptează modelul de analiză a.î. să devină mai clar cum va

fi implementat sistemul• Rafinarea modelului de analiză cu detalii de implementare

9Instrumente pentru dezvoltarea programelor – Curs 4

Page 10: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

ClasClaseeClasClasee

• Numele clasei, variabile ale instanţei (atribute) şi semnăturile metodelor (operaţii)

• Observaţie: multe atribute ale unui Student şi ale

10

ţ şunui Lecturer concid

Instrumente pentru dezvoltarea programelor – Curs 4

Page 11: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

ReutilizabilitateaReutilizabilitatea ClaseClaselorlor: : M t iM t i / G li/ G liMoştenireMoştenire / Generaliza/ Generalizarere

Clasă abstractă

Relaţie “Is-a”

11Instrumente pentru dezvoltarea programelor – Curs 4

Page 12: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

MoştenireMoştenire & & Clase Clase AbstractAbstractee• Moştenirea singurală:

O superclasă generică

oşte eoşte e && C aseC ase bst actbst actee

– O superclasă generică– Mai multe subclase specializate

• Avantaje:– Refolosirea elementelor comune claselor– Mentenanţă mai bună– Invocarea dinamică a metodelor – (“Don’t ask what kind”)

• Superclasa abstractă se foloseşte atuncicând superclasa este atât de generalăcând superclasa este atât de generală încât nu are sens să fie instanţiată; subclase non-abstractesubclase non abstracte

• Mai multe exemple:– Superclasa Mammal, subclasele Cat, Dog, Human

S perclasa Car s bclasele SportsCar Van 4WD– Superclasa Car, subclasele SportsCar, Van, 4WD– Superclasa NetworkProtocol, subclasele HTTP, SMTP, POP3

12Instrumente pentru dezvoltarea programelor – Curs 4

Page 13: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Conectarea claselor: AsocieriConectarea claselor: AsocieriCo ecta ea c ase o soc eCo ecta ea c ase o soc e1. Conectarea claselor cu o linie2 S ifi lti li ităţii fi ă i ăt l i ii i2. Specificarea multiplicităţii fiecărui capăt al asocierii: min..max

(min şi max ale instanţelor conectate la fiecare capăt)

1..* 0..* 10..*

Un curs este predat de un

Un student poate avea un

Un curs este urmat de unul

Un profesor predă un număr p

singur profesor(în realitate

lucrurile pot fi

pnumăr arbitrar

de cursuri(posibil nici

sau mai mulţi studenţi

p marbitrar de

cursuri(posibil nici

13

lucrurile pot fi diferite)

(posibil nici unul)

(posibil nici unul)

Instrumente pentru dezvoltarea programelor – Curs 4

Page 14: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Asocieri RecursiveAsocieri RecursiveAsocieri RecursiveAsocieri Recursive• Asocieri ce conectează o clasă cu aceaşi clasă• Pentru a distinge capetele asocierii le putem eticheta

(etichetele sunt numite roluri)• Exemplu: cursurile pre-necesare pentru un curs

– Un curs poate necesita ca un student să fi absolvit în prealabil 0..* alte cursurialte cursuri

– Fiecare curs poate fi cerut a fi completat anterior de către 0..* alte cursuri

0..* requiredCourses

0 *

14

0..requiredByCourses

Instrumente pentru dezvoltarea programelor – Curs 4

Page 15: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Analysis vs. Design ModelAnalysis vs. Design Modely gy g

Modelul de analiză M d l l d iModelul de analiză• Asocieri neorientate• Modelează doar acele aspecte

ce ţin de cerinţe

Modelul de proiectare• Asocieri orientate

(referinţe de obiecte Java)ce ţin de cerinţe• Doar acele metode ce

reprezintă funcţii cerute de ăt li t

(referinţe de obiecte Java)• Controlul accesului• Metode getter&setter

M t d t t d t l

15

către client • Metode pentru stocarea datelor, gestiunea erorilor, GUI, …

Instrumente pentru dezvoltarea programelor – Curs 4

Page 16: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Crearea Modelelor de Date Crearea Modelelor de Date GreenGreen ((EclipseEclipse))Green Green ((EclipseEclipse))

greengreen16Instrumente pentru dezvoltarea programelor – Curs 4

Page 17: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Crearea unui proiect nou Crearea unui proiect nou & & Importarea Importarea d l id l i JJ

1 Crearea unui proiect nou Java

codului codului JavaJava1. Crearea unui proiect nou Java

2. Click dreapta pe proiect în2. Click dreapta pe proiect în “package explorer”, selectare “Import…”

3. Selectarea de unde dorim î ă d l i (fi i jîncărcarea codului (fişiere .java sau arhive .jar) şi alegerea fişierului/elor

4 Fişierele apar în4. Fişierele apar în “package explorer”

17Instrumente pentru dezvoltarea programelor – Curs 4

Page 18: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Crearea unui Pachet nou Crearea unui Pachet nou & & Model de Model de P i f l i dP i f l i d GG

1. Click pe proiect în “package explorer”Proiectare folosind Proiectare folosind GreenGreen

şi adăugarea unui nou pachet2. Click dreapte pe noul pachet,

folosirea submeniului “Green UML”’folosirea submeniului Green UML3. Se deschide un panel de

diagramă şi în “packagediagramă şi în package explorer” apare un nou fişier diagramăş g

4. Editarea clasei diagramă duce la schimbarea corespunzătoare a codului sursă, e.g. generarea unui nou fişier .java

5. Exportarea diagramei ca imagine prin selectarea fişierului diagramă în “package explorer” şi selectarea File -> Save as…

18Instrumente pentru dezvoltarea programelor – Curs 4

Page 19: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Crearea unei Diagrame de Clase pornind Crearea unei Diagrame de Clase pornind d l C d l Jd l C d l J

1. Selectara fişierelor Java în

de la Codul Javade la Codul Java

“package explorer”

2 Click dreapta pe ele şi se2. Click dreapta pe ele şi se alege “Open in UML class diagram”

3. Clasele apar în view-ul pentru diagrame

4 Se repetă paşii pentru adăugarea mai multor clase la diagramă4. Se repetă paşii pentru adăugarea mai multor clase la diagramă

Aceasta funcţionează de asemenea pentru pachete şi proiecte întregi.

Mai multe despre Green: Help > Help Contents > Green UsersMai multe despre Green: Help -> Help Contents -> Green Users Guide

19Instrumente pentru dezvoltarea programelor – Curs 4

Page 20: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Sumar parţialSumar parţialSu a pa ţ aSu a pa ţ a• Modelele reprezintă aspecte interesante ale sistemului

într-un mod mai clar şi uşor de gestionatîntr-un mod mai clar şi uşor de gestionat• Există diverse modele ce servesc unor scopuri diferite• Modelele pentru analiză captează cerinţele sistemului şi• Modelele pentru analiză captează cerinţele sistemului şi

ajută la o mai bună înţelegere şi verificarea a acestora din partea utilizatorului

• Modelele de proiectare rafinează modelele de analiză a.î. să devină clar modul în care trebuie implementat sistemul

• Instrumentele de modelare ajută la crearea automată a• Instrumentele de modelare ajută la crearea automată a modelelor şi a codului

20Instrumente pentru dezvoltarea programelor – Curs 4

Page 21: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

ÎntrebăriÎntrebăriÎntrebăriÎntrebări1. Numiţi 3 modele diferite folosite în SE.ţ

2. Ce reprezintă o asociere recursivă? Daţi un alt exemplu decât cel amintit.

21Instrumente pentru dezvoltarea programelor – Curs 4

Page 22: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

MetamodelMetamodelee, Model, Modelee şişi Instanţe de Instanţe de ModelModeleeDistincţie între model şi instanţa acestuia (date)E d l l i d d t ( i i d t d l PDM)

,, şş ţţ

Ex: modelul economic de date (parsimonious data model - PDM)

Metamodel: descrie structura unui modelMetamodel: descrie structura unui model

Tip TipRol Rol

1owner

1owner

1partner

1partner

Model: descrie structura datelor1 *

1nume String

CursStudent

1..participanţi

nume

String1id

“Arcalianu Alexandra”A i iInstanţă de model: datele

IDPparticipanţi

numeArcalianu Alexandra

idnume?

D t

Asocieri

22

IDP“Simion Liviu Mihai”

id

participanţinume

id ?Date

Instrumente pentru dezvoltarea programelor – Curs 4

Page 23: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Domain Specific Languages (DSLs)Domain Specific Languages (DSLs)o a Spec c a guages ( S s)o a Spec c a guages ( S s)• Modelarea nu este obligatoriu realizată grafic; există şi

modele textualemodele textuale• DSL-urile sunt specifice unui anumit domeniu, ele

furnizează un model de descriere a entităţilor specificefurnizează un model de descriere a entităţilor specifice respectivului domeniu

• Mai uşor de descris o problemă folosind un DSL adecvat d â li b j i Jdecât un limbaj generic precum Java

• Ex: Limbajul GraphViz pentru construcţia grafurilorgraph G {graph G {

subgraph clusterA { a -- b; subgraph clusterC {C -- D;} } b h l { d f }subgraph clusterB { d -- f }

d -- D e -- clusterB

23

23clusterC -- clusterB

} Instrumente pentru dezvoltarea programelor – Curs 4

Page 24: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Forward Forward şişi Reverse EngineeringReverse EngineeringForward Engineering

G i ă i d i l ă

o a do a d şş e e se g ee ge e se g ee g

Model• Generarea unei reprezentări de nivel scăzut a sistemului pornind de la una de nivel ridicat

• De obicei: generarea unei implementări

Model

Implementationg ppornind de la un model

• Exemple: de la modelul de date la codul sursă, de la DSL la codul sursă

Implementation

sursă

Reverse EngineeringModel• Recuperarea informaţiilor de nivel înalt despre

un sistem pornind de la informaţia de nivel scăzut

Model

I l t tiscăzut• De obicei: de la implementare la model• Exemple: modelul de date pornind de la codul sursă, codul sursă din

executabilul binar modelul de date pornind de la o bază de date

Implementation

executabilul binar, modelul de date pornind de la o bază de date, documentarea unui “legacy code”

24Instrumente pentru dezvoltarea programelor – Curs 4

Page 25: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

ReRe--Engineering Engineering şi şi RoundRound--Trip Trip E i iE i i

Re-Engineering

EngineeringEngineeringModelg g

• Modificarea unui sistem existent aplicând întâi procesul de reverse engineering pentru

Model

Implementationaflarea de informaţii

• Folosirea informaţiei obţinută pentru aplicarea de modificări şi f t l i d f d i i

Implementation

efectuarea procesului de forward engineering

Round Trip EngineeringRound-Trip Engineering• Lucrul simultan cu două reprezentări diferite; switching între ele• Modificările efectuate într-o reprezentare duc la modificări• Modificările efectuate într-o reprezentare duc la modificări

corespunzătoare în cealaltă şi vice-versa; ambele direcţii

25Instrumente pentru dezvoltarea programelor – Curs 4

Page 26: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

InstrumenteInstrumente MetaMeta--CASECASEInstrumente Instrumente MetaMeta CASECASE• Idea: un instrument pentru crearea de instrumente CASE• Multe instrumente de modelare CASE folosind grafuri 2D pentruMulte instrumente de modelare CASE folosind grafuri 2D pentru

vizualizare, bazate pe noduri şi muchii• Variază formele, etichetele, conexiunile permise, etc.

F l i i ilit di il t ifi i ă i• Folosirea similitudinilor pentru specificarea generică a unui instrument:1. Specificarea modelului de date1. Specificarea modelului de date2. Specificarea modului în care elementele de date sunt

reprezentate în graful 2DE M t Edit P E li GMF• E.g. MetaEdit+, Pounamu, Eclipse GMF

1 nameString

CClass

1 1

Classname

26

AssociationInstrumente pentru dezvoltarea programelor – Curs 4

Page 27: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Modelarea Interfeţelor cu UtilizatoriiModelarea Interfeţelor cu UtilizatoriiModelarea Interfeţelor cu UtilizatoriiModelarea Interfeţelor cu Utilizatorii

27Instrumente pentru dezvoltarea programelor – Curs 4

Page 28: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

User Interfaces (UIs)User Interfaces (UIs)Use te aces (U s)Use te aces (U s)

• Interfeţele utilizator sunt interfeţele între oameni şi calculatoareţ ţ ş– Intrare: “Cum vorbeşte utilizatorul cu sistemul?“– Ieşire: “Cum vorbeşte sistemul cu utilizatorul?“– De-a lungul timpului intrarea şi ieşirea formează interacţiunea dintre om şi

l l t (HCI H C t I t ti )calculator (HCI=Human-Computer Interaction)• UI-ul reprezintă o parte critică a sistemului

– Funcţionalitatea e nefolositoare dacă utilizatorii nu ştiu cum să o foloseascăfolosească

– Utilizatorii nu vor folosi un sistem greu de manevrat• Câteva aspecte ale utilizabilităţii (conform lui Jakob Nielsen,

www useit com)www.useit.com)– Uşurinţa de învăţare (e.g. Navigare intuitivă) – Eficienţa folosirii– MemorabilitateaMemorabilitatea– Erori puţine şi ne-catastrofice– Satisfacţia subiectivă

28

How do we get the UI right ASAP?Instrumente pentru dezvoltarea programelor – Curs 4

Page 29: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Instrumente pentru construcInstrumente pentru construcția ția interfețelor utilizatorinterfețelor utilizator

C lit t tă t i t f ț l lt t• Calitate crescută pentru interfețele rezultat– Ideile pot fi ușor prototipate și implementatep ș p p ș p– Ușor de introdus modificări

• Codul UI mai ușor de întreținutCosturi mici pentru învățarea folosirii– Costuri mici pentru învățarea folosirii

– Mai puțin cod de scris

29Instrumente pentru dezvoltarea programelor – Curs 4

Page 30: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Diagrame EcranDiagrame Ecranag a e c aag a e c a• Idea: feed-back timpuriu din partea utilizatorilor• Folosirea de modele pentru discuţii privind UI-ul cu utilizatoriiFolosirea de modele pentru discuţii privind UI ul cu utilizatorii• Diagramele ecran reprezintă un model simplu informal pentru UI-uri

1. Se desenează ecrane prototip ale sistemului ce arată ca ecranele reale, cu date reale (detaliile grafice în acest moment nu sunt importante)( g p )

2. Se desenează săgeţi de la controalele unui ecran la ecranele ce urmează atunci când respectivul control este folosit (e.g. button click)

3. Dacă mai multe ecrane sunt conectate la un acelaşi cotrol se inserează n drept nghi negr a ând semnificaţia de ram ri condiţionateun dreptunghi negru, având semnificaţia de ramuri condiţionate

30Instrumente pentru dezvoltarea programelor – Curs 4

Page 31: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemplu de Diagramă EcranExemplu de Diagramă Ecran: : Instrument de Instrument de AdministrareAdministrareAdministrareAdministrare

Categories LinksRugbySailingSoccer

AnimalsSportsSchool

DeleteAdd Change DeleteAdd Change

DeleteDelete Rugby ??Cancel

Add Link Change Rugby

N Name Rugby

URL

Picture

URL

Picture

www.allblacks.com

C:\Docs\allblack jpg

Name Name Rugby

Instrumente pentru dezvoltarea programelor – Curs 4 31

31

Picture

Add

Picture

Change

C:\Docs\allblack.jpg

Page 32: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Click DummiesClick Dummies

• Aducerea unor diagrame ecran la viaţă:

C c u esC c u es

Machetă UI / Prototip UI / “click dummies”– Utilizatorul poate naviga între ecrane– Utilizatorul poate vedea cum sunt realizate intrările &

ieşirile de către sistem– Utilizatorul poate să-şi imagineze comportamentul

sistemului real• Foarte restrictive dar şi foarte uşor de creat

– Nu au implementate funcţionalităţi– Toate datele sunt doar ipotetice

• Adecvate pentru testarea timpurie din partea p p putilizatorului & feedback!!!

32Instrumente pentru dezvoltarea programelor – Curs 4

Page 33: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Ierarhia de ConţinutIerarhia de ConţinutIerarhia de ConţinutIerarhia de Conţinut• Ierarhia în care controalele unei Graphical User Interface (GUI) sunt

imbricate• Nu toate controalele sunt vizibile; adesea folosim containere invizibile

interne• E.g. pentru Java Swing:

topLevelContainer:JFrame or JDialog or JApplet

rootPane:JRootPane

glassPane:java awt Component

layeredPane:JLayeredPanejava.awt.Component JLayeredPane

menuBar (optional):contentPane:

33

menuBar (optional):JMenuBar

contentPane:java.awt.Container

Instrumente pentru dezvoltarea programelor – Curs 4

Page 34: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Instrumente UIInstrumente UIInstrumente UIInstrumente UI• Componente ale unui sistem UI:

Application

Toolkit

Instrumente de nivel înalt

Sistem de gestiune a ferestrelor

• Sistemul de gestiune a ferestrelor:

Operating System

Sistemul de gestiune a ferestrelor:– Pachete software ce ajută utilizatorii să monitorizeze și

controleze diverse contexte prin separarea lor fizică încontroleze diverse contexte prin separarea lor fizică în părți ale ecranului

34Instrumente pentru dezvoltarea programelor – Curs 4

Page 35: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Sistemul de gestiune a ferestrelorSistemul de gestiune a ferestrelorSistemul de gestiune a ferestrelorSistemul de gestiune a ferestrelor

Prezentare ComenziNivelul Interfeței

Utili t lManager de f tPrezentare Comenzicu Utilizatorul

Nivelul de bază

ferestre

Model ieșire Model intrare Sistemul de ferestre

• Sistemul de ferestre: rutine de bază– Afișează grafica (ieșire)

– Acces la dispozitivele de intrare

• Managerul de ferestre: aspectele vizibile pentru utilizator– Prezentare: stilul ferestrelor

– Comenzi: cum manipulează utilizatorul ferestrele

35Instrumente pentru dezvoltarea programelor – Curs 4

Page 36: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemple gestiune ferestre:Exemple gestiune ferestre:Exemple gestiune ferestre:Exemple gestiune ferestre:• Overlappingpp g

• Tiles

36Instrumente pentru dezvoltarea programelor – Curs 4

Page 37: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

ToolkitToolkitToolkitToolkitApplication

Toolkit

Instrumente de nivel înalt

Toolkit

Sistem de gestiune a ferestrelor

Operating System

• Librărie de instrumente/mecanisme pentru interacțiunea cu utilizatorul (widgets) folosite de aplicații– Includ meniuri, butoane, scrollbar-uri, ferestre de

dialog, etc.

37Instrumente pentru dezvoltarea programelor – Curs 4

Page 38: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Instrumente de nivel înaltInstrumente de nivel înaltInstrumente de nivel înaltInstrumente de nivel înaltApplication

Toolkit

Instrumente de nivel înalt

Toolkit

Sistem de gestiune a ferestrelor

T lkit il t d f l it

Operating System

• Toolkit-urile sunt greu de folosit – Instrumentele de nivel înalt automatizează procesul de dezvoltare UI

• Componente pentru proiectare UI

• Componente run-time: end-user

• Componente pentru evaluare și depanare38Instrumente pentru dezvoltarea programelor – Curs 4

Page 39: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Instrumente pentru UIInstrumente pentru UIInstrumente pentru UIInstrumente pentru UI• MVC:

– Model arhitectural ce izolează logica de business de interfața utilizatorbusiness de interfața utilizator

– Modularizare

– Model: dateModel: date– View: elementele UI

C t ll i l d t l– Controller: manipularea datelor39Instrumente pentru dezvoltarea programelor – Curs 4

Page 40: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemplu: arhitectura unei aplicații WebExemplu: arhitectura unei aplicații Webe p u a tectu a u e ap caț ebe p u a tectu a u e ap caț eb

40Instrumente pentru dezvoltarea programelor – Curs 4

Page 41: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Visual Editor Visual Editor pentrupentru EclipseEclipse

41Instrumente pentru dezvoltarea programelor – Curs 4

Page 42: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Crearea unuiCrearea unui FrameFrameCrearea unuiCrearea unui FrameFrame1. Se adaugă o “Visual Class” în proiect folosind

funcţia din meniu “New Java Class”funcţia din meniu New Java Class

2. Se alege un pachet, un nume şi stilul 1

2“Swing Frame”;pentru ferestre execuabile se verifică:

2

3. Pentru plasarea liberă a controalelor:click în interiorul ferestrei pentru a selecta 3jContentPane & se dezactivează managerul de layout prin setarea lui pe null

3

4. Pentru adaptarea ferestrei la redimensionare:selectare jContentPane al Frame-ului(e g în panelul JavaBeans) & setarea layout

42

42

(e.g. în panelul JavaBeans) & setarea layout manager-ului ca GridBagLayout 4

Instrumente pentru dezvoltarea programelor – Curs 4

Page 43: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Interfaţa Utilizator a Interfaţa Utilizator a Visual EditorVisual Editorte aţa Ut ato ate aţa Ut ato a sua d tosua d toPaleta de controale

Editor

controale GUI

Editor Vizual GUI

Round-Trip

Codul sursă al GUI

pEngineering

P i tăţil

GUI

I hiProprietăţile controlului

selectat

Ierarhia de

conţinut

43

selectat conţinut

Instrumente pentru dezvoltarea programelor – Curs 4

Page 44: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Event HandlersEvent Handlerse t a d e se t a d e s• Atunci când utilizatorul efectuază o acţiune (click, mişcare mouse,

apăsare tastă etc) este creat un obiect de tip evenimentapăsare tastă, etc) este creat un obiect de tip eveniment• Gestionarul de evenimente:

Metodă ce este apelată atunci când se produce un anumit eveniment• În Java:În Java:

– Gestionarul de evenimente este o metodă a unui obiect de tip “event listener”

– Pentru fiecare tip de eveniment se foloseşte o metodă particulară a unui p ş pevent listener particular

– Se setează corespunzător gestionarele de evenimente având metode setter dedicate în interiorul controlului

jButton.addActionListener(new java.awt.event.ActionListener() {public void actionPerformed(p (

java.awt.event.ActionEvent e){

System.out.println("You clicked me!!!");}

44

}});

Instrumente pentru dezvoltarea programelor – Curs 4

Page 45: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Setarea deSetarea de Event HandlersEvent HandlersEvenimentul “Close” pentru un frame:

Setarea deSetarea de Event HandlersEvent Handlers

1. Se selectează frame-ul2. Setare proprietatea

defaultCloseOperation la valoarea DISPOSE sau EXIT îndefaultCloseOperation la valoarea DISPOSE sau EXIT în panelul de proprietăţi

Evenimentul “Click” pentru un buton:1. Right-click pe buton, selectare

t ti P f devents->actionPeformed2. Se scrie codul pentru handler:

45Instrumente pentru dezvoltarea programelor – Curs 4

Page 46: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Deschiderea şi Închiderea unor Deschiderea şi Închiderea unor FrameFrame--uriurid ă i l dd ă i l d B Cli kB Cli kodată cu evenimentul de odată cu evenimentul de Button ClickButton Click

Codul pentru deschiderea unui frame nou:Codul pentru deschiderea unui frame nou:Frame2 f2 = new Frame2();f2.setVisible(true);

Codul pentru închiderea unui frame:// get event source// d di it JF// and dispose its JFrame((JFrame)

((java.awt.Component)e.getSource()) // get button.getParent() // get contentPane.getParent() // get JLayeredPane.getParent() // get JRootPane

46

.getParent()) // get JFrame.dispose();

Instrumente pentru dezvoltarea programelor – Curs 4

Page 47: Instrumente pentru Modelare - andrei.clubcisco.roandrei.clubcisco.ro/cursuri/f/f-sym/f/f-sym/4idp/4_Modele_software.pdf · Universitatea Politehnica Bucuresti - Facultatea de Automatica

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

SumarSumar• Există diferite nivele ale modelelor de date:

metamodele modele şi instanţe ale modelelor

Su aSu a

metamodele, modele şi instanţe ale modelelor• Domain Specific Languages (DSLs) sunt limbaje pentru

modelarea unor domenii particularep• Modelele sunt importante pentru forward şi reverse

engineering, re-engineering şi round-trip engineering• Instrumentele Meta-CASE suportă crearea de

instrumente grafice de modelare• Diagramele ecran ilustrează interfeţele utilizator ale unui• Diagramele ecran ilustrează interfeţele utilizator ale unui

sistem• “Click dummies” pot fi folosite pentru obţinerea de feed-Click dummies pot fi folosite pentru obţinerea de feed

back timpuriu din partea utilizatorului

47Instrumente pentru dezvoltarea programelor – Curs 4