ProgramareVizuală

Dr.ing. Loredana STANCIU

loredana.stanciu@aut.upt.ro

Introducere• Foarte mulți utilizatori dețin calculator, fără să aibă

cunoștințe în a scrie programe

• Succesul foilor de calcul poate fi parțial atribuit abilității utilizatorilor de a scrie programe

• Oamenii au comunicat multă vreme folosind imagini

• Ex: un om poate urmări pe ecran o imagine și să discearnă un șablon numeric, dar îi este imposibil procesul invers

Introducere• Perechi de coordonate x,y

• Imagine

47 42 93 122 68 85 105 133 137

58 100 95 46 126 133 181 108 68

Introducere• Limbajele de programare vizuală întreabă:

o de ce să comunicăm cu calculatoarele noastre folosind limbaje de programare textuale?

o n-am fi mai productivi şi puterea de calcul a calculatoare moderne n-ar fi mai accesibilă la o gamă mai largă de oameni dacă le-am programa prin imagini?

• Motivarea principală a cercetării în limbajele de programare vizualăo majoritatea oamenilor gândesc și își amintesc lucrurile în imagini

o oamenii se referă la lumea înconjurătoare într-un mod grafic și folosesc imaginile drept componente principale în gândirea creatoare

Introducere• Programarea vizuală este programarea în care mai

mult de o dimensiune este folosită pentru a transmite informațieo obiecte multi-dimensionale

o relaționări spațiale

o timpul pentru specificarea relațiilor semantice de tip „înainte–după”

• Multidimensional numit jeton

• O colecție de unul sau mai multe jetoane este o expresie vizualăo diagrame

o schițe

o icoane

o demonstrații de acțiuni realizate cu obiecte grafice

Introducere• Când sintaxa unui limbaj de programare

(semnificativă din punct de vedere semantic) include expresii vizuale, limbajul de programare este un limbaj de programare vizuală (LPV)

• Când expresiile vizuale sunt folosite într-un mediu de programare drept o facilitate de editare rapidă pentru generarea de cod, acesta este denumit mediu de programare vizuală (MVP)o Comerciale, gândite pentru programatorii de profesie

Istoric• Programarea vizuală a apărut din combinarea:

o graficii pe calculator

o limbajelor de programare

o interacțiunii om-calculator

• Sketchpad, dezvoltat de Ivan SUTHERLAND, 1963, MIT, prima aplicație de grafică pe calculatoro Permite crearea de grafice 2D prin combinarea unor primitive simple (linii și cercuri), aplicarea unor operații (copierea) și a unor constrângeri asupra geometriei formelor.

• William SUTHERLAND, 1965, implementa un limbaj vizual simplu de fluxuri de date

Istoric• David CANFIELD-SMITH, 1975, Pygmalion

o o paradigmă de programare bazată pe icoane în care utilizatorul crea, modifica și conecta mici icoane, care aveau proprietăți definite pentru a realiza calcule

o programare prin exemple, utilizatorul îi arăta sistemului cum să realizeze o sarcină într-o situație specifică, iar sistemul folosea această informație pentru a genera un program care să realizeze sarcina în cazuri generale

• Dezvoltarea PV a avut loc în două direcții:o abordări vizuale asupra limbajelor de programare tradiționale (MVP-uri

comerciale de succes: Microsoft Visual Basic, uneltele CASE etc.)

o abordări vizuale de programare care s-au depărtat semnificativ de abordările tradiționale (orientate pe domenii: programarea achiziţiilor de date de laborator (LabView de la National Instruments), programarea simulărilor grafice şi a jocurilor (Cocoa de la Stagecoach Software), etc.)

Strategii în Programarea Vizuală

• Țeluri atinse în LPV:o face programarea mai accesibilă unei audienţe particulare

o îmbunătăţește corectitudinea cu care oamenii realizează sarcini de programare

o îmbunătăţește viteza cu care oamenii realizează sarcini de programare.

• Strategii:o Concret: presupune exprimarea unor aspecte ale programului folosind

instanțe particulare

o Direct: distanță cât mai mică între scop și acțiunile necesare pentru a atinge acest scop

o Explicit: anumite aspecte ale semanticii sunt explicite în mediu dacă pot fi precizate direct (ex: conectare prin arce)

o Răspuns vizual imediat: afișarea imediată a efectelor produse prin editarea programului

Strategii în Programarea Vizuală

• Răspuns vizual imediat: timp de răspuns (liveness, Tanimoto):o Nivelul 1: nu se aplică nicio semantică, sistemul nu oferă niciun răspuns

programatorului (diagramele de tip entitate-relaționare pentru documentație)

o Nivelul 2: programatorul poate să obțină răspuns despre o porțiune a programului, dar acest răspuns nu este automat (compilatoare, interpretoare)

o Nivelul 3: un răspuns semantic incremental este asigurat în mod automat de fiecare dată când programatorul realizează o editare incrementală a programului (foi de calcul tabelar)

o Nivelul 4: sistemul răspunde la editările programului ca în nivelul 3, dar și la alte evenimente (întreruperi de la ceasul de timp al sistemului sau clicuri de maus)

Clasificarea Limbajelor de Programare Vizuală

• Limbaje vizuale pure:

• Sisteme hibride (text și vizuale)

• Sisteme de programare prin exemplificare

• Sisteme orientate pe constrângeri

• Sisteme bazate pe formulare7

• Categoriile nu sunt mutual exclusive

Clasificarea Limbajelor de Programare Vizuală

• Limbaje vizuale pure:o se bazează pe tehnici vizuale pe toată durata procesului de programare

o Program creat prin manipulare de icoane sau alte reprezentări grafice

o Program depanat și executat în mediu vizual

o Programul este compilat direct prin reprezentarea sa vizuală și nu este niciodată tradus într-un limbaj intermediar bazat pe text

• Divizate în limbaje:o cu icoane

o fără icoane

o orientate pe obiect

o Funcționale

o imperative

Teoria Limbajelor de Programare Vizuală

• icoană (icoană generalizată): un obiect cu reprezentare duală: partea logică (sensul) și partea fizică (imaginea).

• sistem iconic: un set structurat de icoane relaționate.

• propoziție iconică (propoziție vizuală): o aranjare spațială a icoanelor pentru sistemul iconic.

• limbaj vizual: un set de propoziții iconice construit pe baza unei sintaxe și a unei semantici date.

• analiză sintactică (analiză spațială): analiza unei propoziții iconice pentru determinarea structurii de bază.

• analiză semantică (interpretare spațială): analiza unei propoziții iconice pentru determinarea sensului de bază.

Specificarea formală a LPV-urilor

• Reguli de construcție folosite pentru aranjarea icoanelor:o concatenare orizontală (notată cu &)

o concatenare verticală (notată cu ^)

o suprapunere spațială (notată cu +)

• Tipuri de icoane:o De proces, care exprimă calcule

o Obiect

• Elementare: identifică obiecte primitive în limbaj

• Compozite: identifică obiecte formate printr-o aranjare spațială a icoanelor obiect elementare

Specificarea formală a LPV-urilor

• Icoane din setul Heidelberg:o Elementare: (a) un

caracter şi (b) un caracter selectat

o De proces: (c) operaţia de inserţie şi (d) operaţia de ştergere

o Obiect compozite: (e) un şir de caractere (compus din caractere) şi (f) un şir selectat (compus dintr-un caracter şi două caractere selectate)

o Propoziţie vizuală (g) reprezentând înlocuirea unui subşir într-un şir.

Specificarea formală a LPV-urilor

• Un limbaj de programare vizuală este specificat de o tripletă de forma (DI,G0,B)o DI este dicționarul de icoane: setul de icoane generalizate, fiecare

reprezentată printr-o pereche de forma (Xm,Xi), cu o parte logică Xm(sensul) și o parte fizică Xi (imaginea)

o G0 este gramatica: precizează modul în care icoanele obiect compozite pot fi construite din icoane elementare folosind operatori de aranjare spațială

o B este o bază de cunoștințe specifică unui anumit domeniu: conține informații specifice domeniului necesare pentru construirea sensului propoziției vizuale dorite (numele evenimentelor, relații conceptuale, numele obiectelor rezultate și referințele la obiectele rezultate)

Analiza Limbajelor de Programare Vizuală

• Propoziţiile vizuale sunt construite din icoane elementare cu ajutorul operatorilor iconici

• Arborele de analiză parcurs cu metode tradiționale de analiză semantică

• Analiza sintactică:o Gramatici pentru procesarea imaginilor: descoperă structura unei propoziţii

vizuale compunând pixelii în elemente vizuale recognoscibile (linii, arce etc.)

o Gramatici de precedenţă: pentru analiza expresiilor matematice bidimensionale, construite din icoane elementare şi operatori iconici

o Gramatici independente de context

o Gramatici dependente de context: determina compoziţia propoziţiile vizuale folosind formalisme cunoscute

o Gramatici gen graf: cele mai puternice (deşi mai puţin eficiente) specificaţii ale limbajelor vizuale, fezabile din punct de vedere computațional

Problemele limbajelor vizuale

• 1) Controlul fluxului

• Metoda imperativă:o realizează una sau mai multe diagrame de control al fluxului care indică

modul în care se realizează controlul pe parcursul programului

o Avantaj: asigură o reprezentare vizuală efectivă a paralelismului

o Dezavantaj: programatorul să fie atent la modul în care secvențiereaoperațiilor modifică starea programului

• Metoda declarativăo programatorul prevede ce calcule se efectuează și nu cum se execută acele

calcule

o programatorul creează un nou obiect prin copierea unuia existent și precizarea diferențelor dorite și nu prin modificarea stării obiectului existent

o programatorul definește operații prin specificarea dependențelor dintre obiecte

o secvențierea operațiilor dedusă de către sistem și nu definită de programator (avantaj), dar sistemul are de rezolvat problema dependențelor circulare, care trebuie detectate și semnalizate ca eroare (dezavantaj)

Problemele limbajelor vizuale

• 2) Abstractizarea procedurală

• Limbajele de programare vizuală de nivel înalt: o nu sunt limbaje de programare complete (există și module non vizuale

care sunt incluse în limbaj)

o sisteme orientate pe un anumit domeniu (uneltele de mentenanțăsoftware și mediile de vizualizare științifică)

• Limbajele vizuale de nivel scăzut:o nu permit programatorului să combine în modulele procedurale logică fin

granulată

o limbaje orientate pe domenii specifice, precum simulatoarele logice

• Limbajele de programare vizuală de uz general:o proprietăți de nivel scăzut (incluzând condiționările, recursivitatea,

iterația)

o proprietăți de nivel ridicat (combinarea logicii de nivel scăzut în module abstracte ca proceduri, clase, biblioteci etc.)

Problemele limbajelor vizuale

• 3) Abstractizarea datelor

• Întâlnită doar în limbajele de programare de uz general

• Tipurile de date abstracte sunt definite vizual (și nu textual), au o reprezentare vizuală (iconică) și asigură un comportament vizual

Exemple• 1) Chimera. Programarea vizuală imperativă prin

demonstrație

• Editare grafică, cu realizare de macrouri pentru acțiunile repetitive

• Istoric sub formă de benzi desenate

Exemple

Exemple

Exemple• 2) Forms/3. Programarea vizuală bazată pe foi de

calcul tabelar

• Formulare (foi de calcul tabelar) cu celule neîncastrate în grilă

• Suportă facilități precum grafică, animație și recursivitate

• Răspuns vizual imediat, de nivelul 4

• Concret: elementul grafic rezultat este văzut imediat ce suficiente formule au fost oferite pentru a face acest lucru posibil

• Programatorul demonstrează specificațiile direct pe elementul grafic creat

Exemple

Exemle• 3) Prograph. Programarea vizuală cu fluxuri de date

• LPV bazat pe fluxuri de date destinat programatorilor profesioniști

• Datele (transmise prin valori) sunt reprezentate prin linii, iar metodele prin diverse dreptunghiuri

• Nu există variabile, ci doar date care „curg“ prin metode

• Clasele, metodele și atributele Prograph sunt reprezentate și manipulate grafic

Exemple

Exemple• 4) KidSim/Cocoa. Programarea vizuală bazată pe reguli

• Programatorul specifică reguli pentru demonstrarea unei postcondiții plecând de la o precondiție

• Se pot crea lumi care să conțină o varietate de caractere, aspecte și proprietăți

• Simularea se face pe baza unui ceas

Exemple

Exemple

Exemple

Exemple• 5) Cube. Limbaje de programare vizuală 3D

• Primul limbaj vizual 3D

• Folosește o paradigmă de flux de date pentru construcția programelor

• Programele Cube sunt compuse din cuburi suport, cuburi predicat, cuburi de definire, porturi, conducte și planuri

Exemple

Exemple

Concluzii• Sketchpad și Pygmalion, și-au menținut influența în

numeroase design-uri de LPV-uri

• Studii arată că nu se justifică, încă, excluderea în totalitate a textului (mai ales pentru operații atomice)