Transcript Programarea vizuala
Interacțiunea om-calculator
Programarea vizuală (I)
Programarea vizuala
Vizual
vazului.
acel atribut al unui obiect ce il face destinat perceptiei folosind simtul
Programarea vizuala:
“Utilizarea de reprezentari grafice cu o anumita semnificatie in procesul de programare” (Shu, 1988).
Alternativa la reprezentarile grafice sunt reprezentarile textuale. Diferenta esentiala intre ele este ca primele sunt destinate vazului iar cele textuale auzului.
Programare vizuala
programare vizuala.
utilizarea de expresii vizuale in procesul de programare. Expresiile vizuale sunt manipulate cu ajutorul unui mediu de ◦ ◦ ◦ Caracteristici: ◦ Se refera la utilizarea de tehnici grafice, diagramatice, vizuale pentru a realiza programarea.
Ofera suport pentru interactiune vizuala.
Se refera la folosirea de tehnologii vizuale.
Un loc special il ocupa construirea de interfete grafice pentru limbajele de programare textuale.
© 2015 Mihaela Colhon
Medii de programare vizuala
Un mediu de programare vizuala trebuie sa sustina utilizatorul in realizarea urmatoarelor activitati: – Vizualizarea programului si a executiei acestuia • Manipularea convenabila a structurii programului (arborele de sintaxa) • Vizualizarea convenabila a executiei programului in vederea urmaririi si depanarii executiei sale.
– Vizualizarea datelor • Manipularea convenabila a tabelelor si interogarilor, daca programul prelucreaza baze de date.
• Manipularea convenabila a resurselor pentru construirea interfetelor grafice.
– Vizualizarea proiectului programului • • Manipularea convenabila a diagramelor de proiectare a programului.
Manipularea convenabila a documentatiei programului.
© 2015 Mihaela Colhon
Medii de Programare Vizuala
Definitie tehnica: Programarea vizuala se refera la metodologia de dezvoltare a programelor in cadrul careia folosirea notatiilor grafice si manipularea interactiva de componente software sunt sursele principale de a defini si compune programe noi. Obiectivele centrale ale unei astfel de metodologii sunt cresterea nivelului de intelegere al programelor procesului de programare.
si simplificarea
© 2015 Mihaela Colhon
Tipuri de interfete utilizator
Exista doua mari clase de interfete utilizator: ◦ Interfete in linie de comanda.
◦ Interfete cu manipulare directa (engl.direct manipulation user interface).
Interfete utilizator in linie de comanda: ◦ Comenzile sunt introduse la un prompter pe un ecran derulant in mod text.
◦ ◦ Comenzile se refera la obiecte pe care utilizatorul nu le poate vedea.
Sunt dificil de utilizat deoarece necesita invatarea unui limbaj de comanda pentru a putea fi folosite.
◦ ◦ Sunt utile pentru utilizatorii experimentati deoarece au o flexibilitate ridicata.
Sunt usor de dezvoltat folosind paradigma sistemelor transformationale (intrare prelucrare-iesire) si tehnicile clasice de compilare.
Interfete utilizator cu manipulare directa: ◦ Utilizatorul indica actiunile si obiectele cu ajutorul unui cursor pe un ecran grafic.
◦ Sunt foarte usor de folosit deoarece nu necesita invatarea unui limbaj de comanda.
◦ Sunt mai dificil de dezvoltat. Se foloseste paradigma sistemelor reactive (eveniment-stare-actiune).
© 2015 Mihaela Colhon
Arhitectura aplicatiilor cu interfata grafica
• Contine o parte de interfata grafica si o parte de prelucrare.
• Comenzile utilizatorului genereaza evenimente catre interfata grafica.
• Tratarea evenimentelor presupune apelul unor functii din partea de prelucrare.
• Efectuarea prelucrarilor intoarce rezultate catre interfata grafica.
• Aceste rezultate sunt prezentate utilizatorului sub forma de raspunsuri.
• Se apreciaza ca in construirea unei aplicatii cu interfata grafica efortul se imparte astfel: 40% interfata grafica, 40% partea de prelucrare, 20% integrarea.
• Este bine sa se pastreze o oarecare independenta intre partea de interfata grafica si partea de prelucrare.
© 2015 Mihaela Colhon
comenzi
Arhitectura aplicatiilor cu interfata grafica
apeluri raspunsuri Interfata grafica rezultate Parte de prelucrare: date si algoritmi
© 2015 Mihaela Colhon
Exemplu: gestiunea unui catalog
Se considera o aplicatie pentru gestiunea unei multimi de inregistrari cu urmatoarea structura: nume si prenume / grupa / nota. Aplicatia va permite efectuarea unor operatii de tipul: crearea de inregistrari, cautarea de inregistrari, etc. Aceste operatii realizandu-se prin intermediul unei interfete grafice.
Implementarea aplicatiilor grafice in Java se poate face folosind biblioteca Java/Swing. Aceasta biblioteca furnizeaza clase pentru implementarea obiectelor intalnite in interfetele utilizator grafice: JDialog , JList , Icon , etc.
JFrame , JPanel , JMenuBar , JMenu , Tipul standard de interfata grafica consta dintr-o fereastra cadru principala (engl.frame window), meniuri (de exemplu pull-down menu) si ferestre de dialog (engl.popup dialog window).
JFrame – clasa ce reprezinta fereastra principala a aplicatiei. Celelalte elemente grafice sunt componente directe sau indirecte ale acestei clase.
JPanel – clasa ce reprezinta zona din interfata grafica unde se prezinta sau se editeaza principalele informatii vizuale: grafice, diagrame, text, etc JMenuBar contine meniurile de optiuni/functii ale aplicatiei implementate prin clasa JMenu.
– clasa ce reprezinta bara de meniu a aplicatiei. Bara de meniu JDialog – clasa folosita pentru introducerea/editarea de informatii ca parte a functionalitatii aplicatiei © 2015 Mihaela Colhon
Scenarii de folosire a aplicatiei
1.
2.
3.
4.
– – – Cautarea unei inregistrari dupa nume: Se selecteaza optiunea de cautare a unei inregistrari dupa nume Se introduce numele cautat si se lanseaza cautarea In caz de esec se modifica numele si se repeta cautarea – – – – Adaugarea unei inregistrari noi Se incarca inregistrarile dintr-un fisier de inregistrari Se creaza o inregistrare noua si se adauga la inregistrarile existente Se repeta pasul anterior de una sau mai multe ori Se salveaza rezultatul intr-un fisier – – – – Crearea unui nou fisier de inregistrari Se creaza o multime vida de inregistrari Se creaza o inregistrare noua si se adauga la aceasta multime Se repeta pasul anterior de una sau mai multe ori Se salveaza rezultatul intr-un fisier – Cautarea unei inregistrari dupa nota
Proiectarea aplicatiei
Se urmareste separarea responsabilitatilor intre nivelele aplicatiei. Aplicatia va contine trei clase: ◦ Clasa Inregistrare pentru reprezentarea unei inregistrari.
◦ Clasa BazaDeDate de date.
pentru reprezentarea tutoror inregistrarilor intr-o baza ◦ Clasa Catalog pentru definirea ferestrei principale a aplicatiei.
Pentru reprezentarea a claselor vom folosi diagrame de clase UML. UML = un limbaj vizual util la dezvoltarea programelor. El se foloseste atat in faza de analiza, pentru specificarea cerintelor, cat si in faza de proiectare, pentru specificarea subsistemelor, componentelor, interfetelor, etc. El a fost propus de OMG – Object Management Group si se doreste a deveni un standard ISO.
Diagrama de clase = diagrama de structura statica pentru reprezentarea claselor unui program. O clasa contine: numele, atributele, operatiile aferente si asocierile cu alte clase. Optional se pot indica tipurile si vizibilitatile atributelor, respectiv semnaturile si vizibilitatile operatiilor.
© 2015 Mihaela Colhon
Interfata grafica
Codul interfetei grafice (IG) asigura independenta intre partea care tine strict de operarea interfetei si partea care asigura functionalitatea aplicatiei. Codul IG poate fi refolosit drept tipar pentru implementarea altor aplicatii cu IG prin tehnica cut-and-paste.
Clasa Catalog interfata extinde (mosteneste) clasa JFrame si implementeaza ActionListener . Ea reprezinta astfel containerul de obiecte grafice de nivel cel mai inalt (engl.top-level) al aplicatiei si furnizeaza functionalitatea de a raspunde la actiunile utilizatorului.
Clasa Catalog implementeaza metoda public void actionPerformed(ActionEvent e) de la interfata ActionListener reprezinta. Acestea se obtin cu . Parametrul e mostenita contine informatii despre obiectul care a generat evenimentul sau despre comanda pe care o Object sursa = e.getSource() respectiv cu String et = (String) e.getActionCommand() .
Proiectarea meniurilor
Fiecare element de meniu trebuie sa fie corelat la o functie a programului, ideal printr-o corespondenta de unu la unu, Elementele de meniu corelate se grupeaza in acelasi meniu. De exemplu: Cauta dupa nume, Cauta dupa grupa, Cauta dupa nota in meniul Cauta, operatiile la nivel de fisier in meniul Fisier, etc.
Elementele de meniu care sunt actionate frecvent unul dupa altul se vor grupa impreuna, in ordinea in care sunt folosite.
Daca anumite operatii trebuie invalidate pana cand anumite operatii predecesoare au fost executate, se poate folosi metoda setEnabled() a clasei MenuItem pentru invaliare, apelata cu argumentul false .
Operatiile cu efecte foarte diferite (de exemplu Creare si Stergere) trebuie plasate separat pentru a se evita erorile utilizatorului in operarea interfetei.
Elementele de meniu se pot grupa in subgrupe intr-un acelasi meniu prin utilizarea de separatori.
© 2015 Mihaela Colhon
Fisier Deschide Salveaza Inchide
Structura meniurilor aplicatiei
Creaza Cauta Inregistrare Cauta dupa nume Cauta dupa grupa Cauta dupa nota Terminare Structura meniurilor este importanta pentru estimarea
costurilor cognitive de acces
la fiecare comanda. Un astfel de cost este suma costurilor arcelor verticale plus suma costurilor arcelor orizontale, incepand din coltul din stanga-sus.
© 2015 Mihaela Colhon
Clasa Inregistrare
public class Inregistrare extends Object { private String nume = ""; private String grupa = ""; private String nota = ""; public Inregistrare(String s,String g,String n) { nume = s; grupa = g; nota = n; } public String getNume() { return nume; } public String getGrupa() { return grupa; } public String getNota() { return nota;} public String toString() { return nume+" @grupa: "+grupa+" @nota: "+nota; } }
© 2015 Mihaela Colhon
Clasa BazaDeDate
import java.util.*; public class BazaDeDate { public ArrayList elemente = new ArrayList(); public void adaugaInregistrare(String n,String g,String s) { elemente.add(new Inregistrare(n,g,s)); } public ArrayList cautaDupaNume(String n) { ArrayList rez = new ArrayList(); for (int i = 0; i < elemente.size(); i++) { Inregistrare r = (Inregistrare)elemente.get(i); if (r.getNume().equals(n)) { rez.add(r); } } return rez; } ...
}
© 2015 Mihaela Colhon
Clasa BazaDeDate functia
–
main()
public class BazaDeDate { ...
public static void main(String[] args) { BazaDeDate bd = new BazaDeDate(); bd.adaugaInregistrare("Ion Ionel", “grupa 221",“9"); bd.adaugaInregistrare("Ionut Ionel", “grupa 222",“8"); ArrayList rez = bd.cautaDupaNume("Ion Ionel"); System.out.println(rez); } } © 2015 Mihaela Colhon
+Catalog() Catalog © 2015 Mihaela Colhon
Interfata
Clasa Catalog – atribute si constructor
public class Catalog extends JFrame implements ActionListener { private JTextArea panou; } public CarnetDeAdrese() { addWindowListener( new WindowAdapter() { public void windowClosing(WindowEvent e) { ... System.exit(0); } }); Container continut = getContentPane(); panou = new JTextArea(); JScrollPane zonaDerulare = new JScrollPane(panou, JScrollPane.VERTICAL_SCROLLBAR_ALWAYS, JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS); zonaDerulare.setPreferredSize(new Dimension(600,600)); continut.add(zonaDerulare,BorderLayout.CENTER); JMenuBar baraMeniu = new JMenuBar(); setJMenuBar(baraMeniu); } ...
© 2015 Mihaela Colhon
Clasa Catalog – continuare constructor
public class CarnetDeAdrese extends JFrame implements ActionListener { } public CarnetDeAdrese() { ...
JMenu meniuFiser = new JMenu("Fisier"); baraMeniu.add(meniuFiser); addMenuItem("Deschide",meniuFiser); addMenuItem("Salveaza",meniuFiser); addMenuItem("Inchide",meniuFiser); meniuFiser.addSeparator(); addMenuItem("Terminare",meniuFiser); JMenu meniuCreaza = new JMenu("Creaza"); baraMeniu.add(meniuCreaza); addMenuItem("Inregistrare",meniuCreaza); JMenu meniuCauta = new JMenu("Cauta"); baraMeniu.add(meniuCauta); addMenuItem("Cauta dupa nume",meniuCauta); addMenuItem("Cauta dupa grupa",meniuCauta); addMenuItem("Cauta dupa nota",meniuCauta); } ...
© 2015 Mihaela Colhon
Clasa Catalog – actionPerformed()
public class CarnetDeAdrese extends JFrame implements ActionListener { ...
public void actionPerformed(ActionEvent e) { Object eventSource = e.getSource(); if (eventSource instanceof JMenuItem) { String et = (String) e.getActionCommand(); if (et.equals("Iesire")) { System.out.println("Iesire din Catalog"); dispose(); System.exit(0); } else if (et.equals("Deschide")) { System.out.println("Se deschide baza de date"); } else if (et.equals("Salveaza")) { System.out.println("Se salveaza baza de date"); } else if (et.equals("Inchide")) { System.out.println("Se inchide baza de date"); } ...
} } ...
} © 2015 Mihaela Colhon
Clasa Catalog addMenuItem() si – main()
public class Catalog extends JFrame implements ActionListener { ...
private void addMenuItem(String et,JMenu m) { JMenuItem mi = new JMenuItem(et); mi.addActionListener(this); m.add(mi); } public static void main(String[] args) { Catalog fereastra = new Catalog(); fereastra.setTitle("Carnet de adrese"); fereastra.setSize(500,400); fereastra.setVisible(true); } } Clasa Catalog foloseste pachetele SWING si AWT, deci la inceputul fisierului sursa trebuie adaugate urmatoarele linii de cod: import javax.swing.*; import javax.swing.event.*; import java.awt.*; import java.awt.event.*; © 2015 Mihaela Colhon
Comportamentul reactiv al interfetei grafice
O IG trebuie sa fie capabila sa raspunda la evenimentele generate de actiunile utilizatorului: selectarea unui meniu, clic pe o bara de derulare, clic intr-o zona de afisare grafica, apasarea unei taste, etc.
O mare parte din tratarea evenimentelor este deja implementata de platforma Java. Spre exemplu comportamentul unei bare de derulare, apasarea unui buton, etc, sunt deja programate. Alte aspecte trebuie insa programate explicit, cum este cazul implementarii operatiei actionPerformed() .
Un sistem sau program ce raspunde astfel la evenimente se numeste reactiv.
© 2015 Mihaela Colhon
Comportamentul reactiv al interfetei grafice
In Java/Swing exista obiecte generatoare de evenimente si obiecte ascultatoare. Un obiect ascultator trebuie sa se inregistreze la obiectele generatoare ca fiind interesat de primirea evenimentelor.
Astfel, cand se genereaza un eveniment de catre obiectul generator, el va fi trimis obiectelor interesate care s-au inregistrat pentru primirea evenimentului. Trimiterea se face prin apelul unei metode care primeste ca parametru un obiect de tip eveniment ce contine informatii despre eveniment si obiectul generator.
In exemplul nostru inregistrarea obiectului ascultator (fereastra aplicatiei) la obiectele generatoare se face cu metoda addActionListener().
© 2015 Mihaela Colhon
© 2015 Mihaela Colhon